1 line
5.5 KiB
Plaintext
1 line
5.5 KiB
Plaintext
{"version":3,"sources":["../src/stack/stack.tsx"],"sourcesContent":["import { getValidChildren } from \"@chakra-ui/react-children-utils\"\nimport { cx } from \"@chakra-ui/shared-utils\"\nimport {\n chakra,\n forwardRef,\n HTMLChakraProps,\n SystemProps,\n} from \"@chakra-ui/system\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\n\nimport { StackItem } from \"./stack-item\"\nimport type { StackDirection } from \"./stack.utils\"\nimport { getDividerStyles } from \"./stack.utils\"\n\nexport type { StackDirection }\n\ninterface StackOptions {\n /**\n * Shorthand for `alignItems` style prop\n * @type SystemProps[\"alignItems\"]\n */\n align?: SystemProps[\"alignItems\"]\n /**\n * Shorthand for `justifyContent` style prop\n * @type SystemProps[\"justifyContent\"]\n */\n justify?: SystemProps[\"justifyContent\"]\n /**\n * Shorthand for `flexWrap` style prop\n * @type SystemProps[\"flexWrap\"]\n */\n wrap?: SystemProps[\"flexWrap\"]\n /**\n * The space between each stack item\n * @type SystemProps[\"margin\"]\n * @default \"0.5rem\"\n */\n spacing?: SystemProps[\"margin\"]\n /**\n * The direction to stack the items.\n * @default \"column\"\n */\n direction?: StackDirection\n /**\n * If `true`, each stack item will show a divider\n * @type React.ReactElement\n */\n divider?: React.ReactElement\n /**\n * If `true`, the children will be wrapped in a `Box` with\n * `display: inline-block`, and the `Box` will take the spacing props\n *\n * @default false\n */\n shouldWrapChildren?: boolean\n /**\n * If `true` the items will be stacked horizontally.\n *\n * @default false\n *\n * @deprecated - Use `direction=\"row\"` or `HStack` instead\n */\n isInline?: boolean\n}\n\nexport interface StackProps extends HTMLChakraProps<\"div\">, StackOptions {}\n\n/**\n * Stacks help you easily create flexible and automatically distributed layouts\n *\n * You can stack elements in the horizontal or vertical direction,\n * and apply a space or/and divider between each element.\n *\n * It uses `display: flex` internally and renders a `div`.\n *\n * @see Docs https://chakra-ui.com/stack\n *\n */\nexport const Stack = forwardRef<StackProps, \"div\">((props, ref) => {\n const {\n isInline,\n direction: directionProp,\n align,\n justify,\n spacing = \"0.5rem\",\n wrap,\n children,\n divider,\n className,\n shouldWrapChildren,\n ...rest\n } = props\n\n const direction = isInline ? \"row\" : directionProp ?? \"column\"\n\n const dividerStyle = useMemo(\n () => getDividerStyles({ spacing, direction }),\n [spacing, direction],\n )\n\n const hasDivider = !!divider\n const shouldUseChildren = !shouldWrapChildren && !hasDivider\n\n const clones = useMemo(() => {\n const validChildren = getValidChildren(children)\n return shouldUseChildren\n ? validChildren\n : validChildren.map((child, index) => {\n // Prefer provided child key, fallback to index\n const key = typeof child.key !== \"undefined\" ? child.key : index\n const isLast = index + 1 === validChildren.length\n const wrappedChild = <StackItem key={key}>{child}</StackItem>\n const _child = shouldWrapChildren ? wrappedChild : child\n\n if (!hasDivider) return _child\n\n const clonedDivider = cloneElement(\n divider as React.ReactElement<any>,\n {\n __css: dividerStyle,\n },\n )\n\n const _divider = isLast ? null : clonedDivider\n\n return (\n <Fragment key={key}>\n {_child}\n {_divider}\n </Fragment>\n )\n })\n }, [\n divider,\n dividerStyle,\n hasDivider,\n shouldUseChildren,\n shouldWrapChildren,\n children,\n ])\n\n const _className = cx(\"chakra-stack\", className)\n\n return (\n <chakra.div\n ref={ref}\n display=\"flex\"\n alignItems={align}\n justifyContent={justify}\n flexDirection={direction}\n flexWrap={wrap}\n gap={hasDivider ? undefined : spacing}\n className={_className}\n {...rest}\n >\n {clones}\n </chakra.div>\n )\n})\n\nStack.displayName = \"Stack\"\n"],"mappings":";;;;;;;;;AAAA,SAAS,wBAAwB;AACjC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,cAAc,UAAU,eAAe;AAuGjB,cAenB,YAfmB;AAjCxB,IAAM,QAAQ,WAA8B,CAAC,OAAO,QAAQ;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,YAAY,WAAW,QAAQ,wCAAiB;AAEtD,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,EAAE,SAAS,UAAU,CAAC;AAAA,IAC7C,CAAC,SAAS,SAAS;AAAA,EACrB;AAEA,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,oBAAoB,CAAC,sBAAsB,CAAC;AAElD,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,WAAO,oBACH,gBACA,cAAc,IAAI,CAAC,OAAO,UAAU;AAElC,YAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;AAC3D,YAAM,SAAS,QAAQ,MAAM,cAAc;AAC3C,YAAM,eAAe,oBAAC,aAAqB,mBAAN,GAAY;AACjD,YAAM,SAAS,qBAAqB,eAAe;AAEnD,UAAI,CAAC;AAAY,eAAO;AAExB,YAAM,gBAAgB;AAAA,QACpB;AAAA,QACA;AAAA,UACE,OAAO;AAAA,QACT;AAAA,MACF;AAEA,YAAM,WAAW,SAAS,OAAO;AAEjC,aACE,qBAAC,YACE;AAAA;AAAA,QACA;AAAA,WAFY,GAGf;AAAA,IAEJ,CAAC;AAAA,EACP,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,GAAG,gBAAgB,SAAS;AAE/C,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,KAAK,aAAa,SAAY;AAAA,MAC9B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,MAAM,cAAc;","names":[]} |