@yamada-ui/react/dist/cjs/components/stack/z-stack.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"z-stack.cjs","names":["createComponent","zStackStyle","getValidChildren","css: CSSObject","Fragment","mergeRefs","mergeCSS","css","styled","useInjectVarsIntoCss","useInjectVarsIntoProps"],"sources":["../../../../src/components/stack/z-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type {\n  CSSObject,\n  Direction,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { ZStackStyle } from \"./z-stack.style\"\nimport {\n  cloneElement,\n  createRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  createComponent,\n  mergeCSS,\n  styled,\n  useInjectVarsIntoCss,\n  useInjectVarsIntoProps,\n} from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { zStackStyle } from \"./z-stack.style\"\n\nexport interface ZStackProps\n  extends Omit<HTMLStyledProps, \"direction\">,\n    ThemeProps<ZStackStyle> {\n  /**\n   * Stack in the specified direction.\n   *\n   * @default 'end'\n   */\n  direction?: Direction\n  /**\n   * If `true`, calculate the `width` and `height` of the element and assign container.\n   *\n   * @default true\n   */\n  fit?: boolean\n  /**\n   * If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * If set the stack will start from the given index.\n   *\n   * @default 0\n   */\n  startIndex?: number\n}\n\nconst {\n  PropsContext: ZStackPropsContext,\n  usePropsContext: useZStackPropsContext,\n  withContext,\n} = createComponent<ZStackProps, ZStackStyle>(\"stack--depth\", zStackStyle)\n\nexport { useZStackPropsContext, ZStackPropsContext }\n\n/**\n * `ZStack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const ZStack = withContext<\"div\", ZStackProps>(\n  ({\n    css,\n    children,\n    direction = \"end\",\n    fit = true,\n    reverse = false,\n    startIndex = 0,\n    ...rest\n  }) => {\n    if (direction === \"start-center\") direction = \"start\"\n    if (direction === \"end-center\") direction = \"end\"\n\n    const refMap = useRef<Map<number, RefObject<HTMLDivElement | null>>>(\n      new Map(),\n    )\n    const [rect, setRect] = useState<{ height: number; width: number }>({\n      height: 0,\n      width: 0,\n    })\n\n    const vertical = useCallback(\n      (space: string) => {\n        if (direction.startsWith(\"start\")) {\n          return { [!reverse ? \"bottom\" : \"top\"]: space }\n        } else if (direction.startsWith(\"end\")) {\n          return { [!reverse ? \"top\" : \"bottom\"]: space }\n        } else {\n          return { [!reverse ? \"top\" : \"bottom\"]: 0 }\n        }\n      },\n      [direction, reverse],\n    )\n\n    const horizontal = useCallback(\n      (space: string) => {\n        if (direction.endsWith(\"-start\")) {\n          return { [!reverse ? \"right\" : \"left\"]: space }\n        } else if (direction.endsWith(\"-end\")) {\n          return { [!reverse ? \"left\" : \"right\"]: space }\n        } else {\n          return { [!reverse ? \"left\" : \"right\"]: 0 }\n        }\n      },\n      [direction, reverse],\n    )\n\n    const cloneChildren = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      const clonedChildren = validChildren.map((child, index) => {\n        const ref = createRef<HTMLDivElement>()\n\n        refMap.current.set(index, ref)\n\n        const key = child.key ?? index\n\n        const zIndex = startIndex + index\n        const space = `calc({space} * ${index})`\n\n        const css: CSSObject = {\n          position: \"absolute\",\n          zIndex,\n          ...vertical(space),\n          ...horizontal(space),\n        }\n\n        const props = {\n          ...child.props,\n          ref: mergeRefs(child.props.ref, ref),\n          css: mergeCSS(child.props.css, css),\n        }\n\n        const clonedChild = cloneElement(child, props)\n\n        return <Fragment key={key}>{clonedChild}</Fragment>\n      })\n\n      return clonedChildren\n    }, [children, startIndex, vertical, horizontal])\n\n    useEffect(() => {\n      if (!fit) return\n\n      let negativeLeft = direction.endsWith(\"-start\")\n      let negativeTop = direction.startsWith(\"start\")\n      let width = 0\n      let height = 0\n\n      if (reverse) {\n        negativeLeft = !negativeLeft\n        negativeTop = !negativeTop\n      }\n\n      for (const ref of refMap.current.values()) {\n        if (!ref.current) continue\n\n        let { offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth } =\n          ref.current\n\n        if (!offsetParent && process.env.NODE_ENV !== \"test\") continue\n\n        if (negativeLeft) {\n          const offsetParentWidth =\n            (offsetParent as HTMLDivElement | null)?.offsetWidth ?? 0\n\n          offsetLeft = offsetParentWidth - offsetLeft - offsetWidth\n        }\n\n        if (negativeTop) {\n          const offsetParentHeight =\n            (offsetParent as HTMLDivElement | null)?.offsetHeight ?? 0\n\n          offsetTop = offsetParentHeight - offsetTop - offsetHeight\n        }\n\n        offsetWidth += offsetLeft\n        offsetHeight += offsetTop\n\n        if (offsetWidth > width) width = offsetWidth\n        if (offsetHeight > height) height = offsetHeight\n      }\n\n      setRect({ height, width })\n    }, [cloneChildren, direction, reverse, fit])\n\n    return (\n      <styled.div\n        css={css}\n        minHeight={fit ? `${rect.height}px` : undefined}\n        minWidth={fit ? `${rect.width}px` : undefined}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)(undefined, (props) => {\n  const css = useInjectVarsIntoCss(props.css, { gap: \"space\" })\n  const rest = useInjectVarsIntoProps(props, { gap: \"space\" })\n\n  return { ...rest, css }\n})\n"],"mappings":"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"}