@yamada-ui/react 2.1.2 → 2.1.3-dev-20260312112728

package/dist/cjs/components/accordion/accordion.cjs

@@ -38,8 +38,6 @@ const AccordionRoot = withProvider(({ children, icon, iconHidden, items, ...prop
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_accordion.AccordionContext, {
 			value: (0, react.useMemo)(() => ({
 				focusedIndex,
-				icon,
-				iconHidden,
 				index,
 				multiple,
 				setFocusedIndex,
@@ -47,8 +45,6 @@ const AccordionRoot = withProvider(({ children, icon, iconHidden, items, ...prop
 				toggle
 			}), [
 				focusedIndex,
-				icon,
-				iconHidden,
 				index,
 				multiple,
 				setFocusedIndex,

package/dist/cjs/components/accordion/accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":["createContext","createSlotComponent","accordionStyle","useAccordion","index","props","AccordionDescendantsContext","AccordionContext","styled","useAccordionItem","useSplitChildren","AccordionItemContext","useAccordionItemContext","ChevronDownIcon","Children","Collapse"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, isString, runIfFn, useSplitChildren } from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface ComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface ItemComponentContext extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<AccordionRootProps, AccordionStyle, ComponentContext>(\n  \"accordion\",\n  accordionStyle,\n)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n    const computedChildren = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(computedChildren, AccordionButton, AccordionPanel)\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <ItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </ItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(customIcon, props) ??\n              runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0DA,MAAM,CAAC,sBAAsB,2BAC3BA,8BAAoC,EAClC,MAAM,wBACP,CAAC;AAEJ,MAAM,EACJ,kBACA,cAAc,uBACd,qBACA,iBAAiB,0BACjB,aACA,iBACEC,6CACF,aACAC,uCACD;;;;;;AASD,MAAa,gBAAgB,cAC1B,EAAE,UAAU,MAAM,YAAY,OAAO,GAAG,YAAY;CACnD,MAAM,EACJ,aACA,cACA,OACA,UACA,iBACA,UACA,QACA,iBACEC,mCAAa,MAAM;CACvB,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,OAAO,KAAK,SAAO,YACxB,2CAAC;GAA0B,OAAOC;GAAO,GAAIC;KAAzBD,QAAkC,CACtD;IACD,CAAC,UAAU,MAAM,CAAC;AA4BrB,QACE,2CAACE;EAA4B,OAAO;YAClC,2CAACC;GAAiB,iCA5Bb;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aASK,2CAAC;IAAiB,iCAPf;KAAE;KAAM;KAAY,GAC3B,CAAC,MAAM,WAAW,CACnB;cAMO,2CAACC,uBAAO;KAAI,GAAI,cAAc;eAAG;MAA8B;KAC9C;IACF;GACS;GAGlC,OACD,EAAE;AAoBH,MAAa,gBAAgB,aAC1B,EAAE,QAAQ,UAAU,MAAM,GAAG,WAAW;CACvC,MAAM,EACJ,UACA,MACA,gBACA,cACA,cACA,kBACEC,uCAAiB,KAAK;CAK1B,MAAM,CAAC,iBAAiB,uBAAuB,wBAC7CC,0GAJc,UAAU;EAAE;EAAU,UAAU;EAAM,CAAC,EACrD;EAAC;EAAU;EAAU;EAAK,CAC3B,EAEoC,iBAAiB,eAAe;AAcrE,QACE,2CAACC;EAAqB,iCAbf;GACL;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GAAC;GAAU;GAAgB;GAAe;GAAc;GAAM;GAAK,CACpE;YAKG,2CAAC;GAAqB,iCAJc,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC;aAKpD,4CAACH,uBAAO;IAAI,GAAI,cAAc;eAC3B,yBACC,2CAAC,4EACU,QAAQ;KAAE;KAAU,UAAU;KAAM,CAAC,GAC9B,EAEnB,wBACC,2CAAC,4BAAgB,kBAAiC;KAEzC;IACQ;GACF;GAG3B,OACD,EAAE;AAaH,MAAa,kBAAkB,aAC5B,EAAE,UAAU,MAAM,YAAY,gBAAgB,GAAG,WAAW;CAC3D,MAAM,EAAE,MAAM,aAAa,qBAAqB;CAChD,MAAM,EAAE,MAAM,aAAa,yBAAyB;CACpD,MAAM,EAAE,UAAU,MAAM,mBAAmBI,+CAAyB;CACpE,MAAM,QAAQ;EAAE;EAAU,UAAU;EAAM;AAE1C,QACE,2CAACJ,uBAAO;EAAG,GAAI;YACb,4CAACA,uBAAO;GAAO,GAAI,eAAe,KAAK;cACpC,UAED,2CAAC,0EACU,YAAY,MAAM,mDACjB,UAAU,MAAM,mDAChB,UAAU,MAAM,GACZ;IACF;GACN;GAGhB,SACD,EAAE;AAIH,MAAa,gBAAgB,aAC1B,EAAE,WAAW,2CAACK,8CAAkB,EAAE,GAAG,WAAW;CAC/C,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,EAAE,iBAAiBD,+CAAyB;AAElD,KAAI,WAAY,QAAO;AAEvB,+BAAqC,SAAS,CAC5C,gCACE,UACA,aAAa;EACX,GAAG;EACH,GAAG,SAAS;EACb,CAAC,CACH;AAEH,QAAOE,eAAS,MAAM,SAAS,GAAG,IAAIA,eAAS,KAAK,KAAK,GAAG;GAE9D,OACD,EAAE;AAaH,MAAa,iBAAiB,aAC3B,EACC,kBACA,UACA,OACA,UACA,cACA,gBACA,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,EAAE,MAAM,kBAAkBF,+CAAyB;AAEzD,QACE,2CAACG;EAEG;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;YAGF,2CAACP,uBAAO;GAAI,GAAI,cAAc,KAAK;6DACvB,SAAS,GAAG,2CAACA,uBAAO,KAAG,WAAoB,GAAG;IAC7C;GACJ;GAGf,QACD,EAAE"}
+{"version":3,"file":"accordion.cjs","names":["createContext","createSlotComponent","accordionStyle","useAccordion","index","props","AccordionDescendantsContext","AccordionContext","styled","useAccordionItem","useSplitChildren","AccordionItemContext","useAccordionItemContext","ChevronDownIcon","Children","Collapse"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, isString, runIfFn, useSplitChildren } from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface ComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface ItemComponentContext extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<AccordionRootProps, AccordionStyle, ComponentContext>(\n  \"accordion\",\n  accordionStyle,\n)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [focusedIndex, index, multiple, setFocusedIndex, setIndex, toggle],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n    const computedChildren = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(computedChildren, AccordionButton, AccordionPanel)\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <ItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </ItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(customIcon, props) ??\n              runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/accordion/use-accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-accordion.cjs","names":["createDescendants","createContext","useControllableState","getRootProps: PropGetter","mergeRefs","open","getItemProps: PropGetter","getButtonProps: PropGetter<\"button\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/accordion/use-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  mergeRefs,\n  runKeyAction,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: AccordionDescendantsContext,\n  useDescendant: useAccordionDescendant,\n  useDescendants: useAccordionDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport {\n  AccordionDescendantsContext,\n  useAccordionDescendant,\n  useAccordionDescendants,\n}\n\ninterface AccordionContext extends Omit<\n  UseAccordionReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [AccordionContext, useAccordionContext] = createContext<AccordionContext>(\n  {\n    name: \"AccordionContext\",\n  },\n)\n\nexport { AccordionContext, useAccordionContext }\n\ninterface AccordionItemContext extends Omit<\n  UseAccordionItemReturn,\n  \"getItemProps\"\n> {}\n\nconst [AccordionItemContext, useAccordionItemContext] =\n  createContext<AccordionItemContext>({\n    name: \"AccordionItemContext\",\n  })\n\nexport { AccordionItemContext, useAccordionItemContext }\n\nexport interface UseAccordionProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index(es) of the accordion item to expand.\n   */\n  defaultIndex?: number | number[]\n  /**\n   * The index(es) of the accordion item to expand.\n   */\n  index?: number | number[]\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * If `true`, any expanded accordion item can be collapsed again.\n   *\n   * @default false\n   */\n  toggle?: boolean\n  /**\n   * The callback invoked when accordion items are expanded or collapsed.\n   */\n  onChange?: (index: number | number[]) => void\n}\n\nexport const useAccordion = ({\n  defaultIndex: defaultIndexProp,\n  index: indexProp,\n  multiple,\n  toggle,\n  onChange,\n  ...rest\n}: UseAccordionProps = {}) => {\n  if (\n    (indexProp || defaultIndexProp) != null &&\n    !isArray(indexProp || defaultIndexProp) &&\n    multiple\n  ) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, then 'index' or 'defaultIndex' must be an array.`,\n    )\n  }\n\n  if (multiple && toggle) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, 'toggle' will be ignored. Either remove 'toggle' or 'multiple' depending on whether you want multiple accordions visible or not`,\n    )\n  }\n\n  const descendants = useAccordionDescendants()\n\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n  const [index, setIndex] = useControllableState({\n    defaultValue: () =>\n      multiple ? (defaultIndexProp ?? []) : (defaultIndexProp ?? -1),\n    value: indexProp,\n    onChange,\n  })\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  useEffect(() => {\n    return () => setFocusedIndex(-1)\n  }, [])\n\n  return {\n    descendants,\n    focusedIndex,\n    index,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n    getRootProps,\n  }\n}\n\nexport type UseAccordionReturn = ReturnType<typeof useAccordion>\n\nexport interface UseAccordionItemProps extends HTMLProps {\n  /**\n   * The index of the accordion item.\n   */\n  index: number\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useAccordionItem = ({\n  disabled,\n  index,\n  ...rest\n}: UseAccordionItemProps) => {\n  const itemId = useId()\n  const panelId = useId()\n  const {\n    index: selectedIndex,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n  } = useAccordionContext()\n  const { descendants, register } = useAccordionDescendant({ disabled })\n  const open =\n    index !== -1\n      ? isArray(selectedIndex)\n        ? selectedIndex.includes(index)\n        : selectedIndex === index\n      : false\n\n  if (open && disabled)\n    console.warn(`Accordion: Cannot open a disabled accordion item`)\n\n  const onChange = useCallback(\n    (open: boolean) => {\n      if (index === -1) return\n\n      if (multiple && isArray(selectedIndex)) {\n        setIndex(\n          open\n            ? selectedIndex.concat(index)\n            : selectedIndex.filter((i) => i !== index),\n        )\n      } else if (open) {\n        setIndex(index)\n      } else if (toggle) {\n        setIndex(-1)\n      }\n    },\n    [multiple, toggle, index, selectedIndex, setIndex],\n  )\n\n  const onFocus = useCallback(() => {\n    setFocusedIndex(index)\n  }, [setFocusedIndex, index])\n\n  const onClick = useCallback(() => {\n    onChange(!open)\n    setFocusedIndex(index)\n  }, [index, setFocusedIndex, open, onChange])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLButtonElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          const next = descendants.enabledNextValue(index)\n\n          next?.node.focus()\n        },\n        ArrowUp: () => {\n          const prev = descendants.enabledPrevValue(index)\n\n          prev?.node.focus()\n        },\n        End: () => {\n          const last = descendants.enabledLastValue()\n\n          last?.node.focus()\n        },\n        Home: () => {\n          const first = descendants.enabledFirstValue()\n\n          first?.node.focus()\n        },\n      })\n    },\n    [descendants, index],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"data-expanded\": dataAttr(open),\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [open, rest],\n  )\n\n  const getButtonProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: itemId,\n      type: \"button\",\n      \"aria-controls\": panelId,\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      ...props,\n      ref: mergeRefs(register, ref),\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      itemId,\n      open,\n      panelId,\n      multiple,\n      toggle,\n      disabled,\n      register,\n      onClick,\n      onFocus,\n      onKeyDown,\n    ],\n  )\n\n  const getPanelProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: panelId,\n      \"aria-labelledby\": cx(ariaLabelledby, itemId),\n      role: \"region\",\n      ...props,\n    }),\n    [itemId, panelId],\n  )\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [multiple, toggle, open, disabled],\n  )\n\n  return {\n    disabled,\n    open,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-accordion.cjs","names":["createDescendants","createContext","useControllableState","getRootProps: PropGetter","mergeRefs","open","getItemProps: PropGetter","getButtonProps: PropGetter<\"button\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/accordion/use-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  mergeRefs,\n  runKeyAction,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: AccordionDescendantsContext,\n  useDescendant: useAccordionDescendant,\n  useDescendants: useAccordionDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport {\n  AccordionDescendantsContext,\n  useAccordionDescendant,\n  useAccordionDescendants,\n}\n\ninterface AccordionContext extends Omit<\n  UseAccordionReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [AccordionContext, useAccordionContext] = createContext<AccordionContext>(\n  { name: \"AccordionContext\" },\n)\n\nexport { AccordionContext, useAccordionContext }\n\ninterface AccordionItemContext extends Omit<\n  UseAccordionItemReturn,\n  \"getItemProps\"\n> {}\n\nconst [AccordionItemContext, useAccordionItemContext] =\n  createContext<AccordionItemContext>({\n    name: \"AccordionItemContext\",\n  })\n\nexport { AccordionItemContext, useAccordionItemContext }\n\nexport interface UseAccordionProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index(es) of the accordion item to expand.\n   */\n  defaultIndex?: number | number[]\n  /**\n   * The index(es) of the accordion item to expand.\n   */\n  index?: number | number[]\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * If `true`, any expanded accordion item can be collapsed again.\n   *\n   * @default false\n   */\n  toggle?: boolean\n  /**\n   * The callback invoked when accordion items are expanded or collapsed.\n   */\n  onChange?: (index: number | number[]) => void\n}\n\nexport const useAccordion = ({\n  defaultIndex: defaultIndexProp,\n  index: indexProp,\n  multiple,\n  toggle,\n  onChange,\n  ...rest\n}: UseAccordionProps = {}) => {\n  if (\n    (indexProp || defaultIndexProp) != null &&\n    !isArray(indexProp || defaultIndexProp) &&\n    multiple\n  ) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, then 'index' or 'defaultIndex' must be an array.`,\n    )\n  }\n\n  if (multiple && toggle) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, 'toggle' will be ignored. Either remove 'toggle' or 'multiple' depending on whether you want multiple accordions visible or not`,\n    )\n  }\n\n  const descendants = useAccordionDescendants()\n\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n  const [index, setIndex] = useControllableState({\n    defaultValue: () =>\n      multiple ? (defaultIndexProp ?? []) : (defaultIndexProp ?? -1),\n    value: indexProp,\n    onChange,\n  })\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  useEffect(() => {\n    return () => setFocusedIndex(-1)\n  }, [])\n\n  return {\n    descendants,\n    focusedIndex,\n    index,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n    getRootProps,\n  }\n}\n\nexport type UseAccordionReturn = ReturnType<typeof useAccordion>\n\nexport interface UseAccordionItemProps extends HTMLProps {\n  /**\n   * The index of the accordion item.\n   */\n  index: number\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useAccordionItem = ({\n  disabled,\n  index,\n  ...rest\n}: UseAccordionItemProps) => {\n  const itemId = useId()\n  const panelId = useId()\n  const {\n    index: selectedIndex,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n  } = useAccordionContext()\n  const { descendants, register } = useAccordionDescendant({ disabled })\n  const open =\n    index !== -1\n      ? isArray(selectedIndex)\n        ? selectedIndex.includes(index)\n        : selectedIndex === index\n      : false\n\n  if (open && disabled)\n    console.warn(`Accordion: Cannot open a disabled accordion item`)\n\n  const onChange = useCallback(\n    (open: boolean) => {\n      if (index === -1) return\n\n      if (multiple && isArray(selectedIndex)) {\n        setIndex(\n          open\n            ? selectedIndex.concat(index)\n            : selectedIndex.filter((i) => i !== index),\n        )\n      } else if (open) {\n        setIndex(index)\n      } else if (toggle) {\n        setIndex(-1)\n      }\n    },\n    [multiple, toggle, index, selectedIndex, setIndex],\n  )\n\n  const onFocus = useCallback(() => {\n    setFocusedIndex(index)\n  }, [setFocusedIndex, index])\n\n  const onClick = useCallback(() => {\n    onChange(!open)\n    setFocusedIndex(index)\n  }, [index, setFocusedIndex, open, onChange])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLButtonElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          const next = descendants.enabledNextValue(index)\n\n          next?.node.focus()\n        },\n        ArrowUp: () => {\n          const prev = descendants.enabledPrevValue(index)\n\n          prev?.node.focus()\n        },\n        End: () => {\n          const last = descendants.enabledLastValue()\n\n          last?.node.focus()\n        },\n        Home: () => {\n          const first = descendants.enabledFirstValue()\n\n          first?.node.focus()\n        },\n      })\n    },\n    [descendants, index],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"data-expanded\": dataAttr(open),\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [open, rest],\n  )\n\n  const getButtonProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: itemId,\n      type: \"button\",\n      \"aria-controls\": panelId,\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      ...props,\n      ref: mergeRefs(register, ref),\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      itemId,\n      open,\n      panelId,\n      multiple,\n      toggle,\n      disabled,\n      register,\n      onClick,\n      onFocus,\n      onKeyDown,\n    ],\n  )\n\n  const getPanelProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: panelId,\n      \"aria-labelledby\": cx(ariaLabelledby, itemId),\n      role: \"region\",\n      ...props,\n    }),\n    [itemId, panelId],\n  )\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [multiple, toggle, open, disabled],\n  )\n\n  return {\n    disabled,\n    open,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>\n"],"mappings":"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"}

package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs

@@ -2,7 +2,7 @@
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ref = require('../../utils/ref.cjs');
-require('../../utils/index.cjs');
+const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
@@ -30,7 +30,7 @@ const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: fini
 		resetRef,
 		reverse,
 		rootMargin,
-		rootRef: rootRefProp ?? rootRef,
+		rootRef: (0, require_utils_index.utils_exports.isNull)(rootRefProp) ? null : rootRefProp ?? rootRef,
 		startIndex,
 		threshold,
 		onLoad

package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll-area.cjs","names":["createSlotComponent","infiniteScrollAreaStyle","useInfiniteScroll","useValue","styled","mergeRefs"],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: rootRefProp ?? rootRef,\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACEA,6CACF,wBACAC,2DACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,4BAAiC,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAWC,8CAAkB;EACpD;EACA;EACA;EACA,aALkBC,uCAAS,gBAAgB;EAM3C;EACA;EACA;EACA,SAAS,eAAe;EACxB;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,4CAACC,uBAAO;EACN,KAAKC,sBAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}
+{"version":3,"file":"infinite-scroll-area.cjs","names":["createSlotComponent","infiniteScrollAreaStyle","useInfiniteScroll","useValue","styled","mergeRefs"],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACEA,6CACF,wBACAC,2DACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,4BAAiC,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAWC,8CAAkB;EACpD;EACA;EACA;EACA,aALkBC,uCAAS,gBAAgB;EAM3C;EACA;EACA;EACA,uDAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,4CAACC,uBAAO;EACN,KAAKC,sBAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}

package/dist/cjs/components/infinite-scroll-area/use-infinite-scroll.cjs

@@ -41,17 +41,6 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 	const onLoad = require_ref.useCallbackRef(onLoadProp);
 	const vertical = orientation === "vertical";
 	const direction = vertical ? "top" : "left";
-	const options = (0, react.useMemo)(() => {
-		return {
-			root: rootRef?.current,
-			rootMargin,
-			threshold
-		};
-	}, [
-		rootMargin,
-		rootRef,
-		threshold
-	]);
 	const onReset = (0, react.useCallback)((index = 1, runScroll = true) => {
 		indexRef.current = index;
 		setFinish(false);
@@ -91,10 +80,11 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 		setFinish(true);
 	}, []);
 	const createObserver = (0, react.useCallback)(() => {
+		const root = rootRef?.current ?? null;
 		return new IntersectionObserver(async ([entry]) => {
-			const root = rootRef?.current;
+			const root$1 = rootRef?.current;
 			const body = getDocument()?.body;
-			const el = root && isScrollable(root, vertical) ? root : body;
+			const el = root$1 && isScrollable(root$1, vertical) ? root$1 : body;
 			if (!entry?.isIntersecting || processingRef.current || !el) return;
 			const props = {
 				entry,
@@ -102,7 +92,7 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 				index: indexRef.current
 			};
 			processingRef.current = true;
-			if (root) root.ariaBusy = "true";
+			if (root$1) root$1.ariaBusy = "true";
 			let prevScrollPosition = 0;
 			if (reverse) prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth;
 			await onLoad(props);
@@ -113,11 +103,16 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 			});
 			indexRef.current += 1;
 			processingRef.current = false;
-			if (root) root.ariaBusy = "false";
-		}, options);
+			if (root$1) root$1.ariaBusy = "false";
+		}, {
+			root,
+			rootMargin,
+			threshold
+		});
 	}, [
-		options,
 		rootRef,
+		rootMargin,
+		threshold,
 		getDocument,
 		vertical,
 		onFinish,

package/dist/cjs/components/infinite-scroll-area/use-infinite-scroll.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.cjs","names":["useEnvironment","useCallbackRef","options: IntersectionObserverInit","root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n  const style = getComputedStyle(el)\n\n  if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n  if (vertical) {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n  } else {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n  }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n  IntersectionObserverInit,\n  \"root\"\n> {\n  /**\n   * Determines whether scrolling is instant or animates smoothly.\n   */\n  behavior?: ScrollBehavior\n  /**\n   * If `true`, the infinite scroll is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Ref to a reset index function.\n   */\n  indexRef?: RefObject<(index: number) => void>\n  /**\n   * If `true`, invoke `onLoad` function for the first time.\n   *\n   * @default false\n   */\n  initialLoad?: boolean\n  /**\n   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * Ref to a reset function.\n   */\n  resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n  /**\n   *  If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Margin around the root. Can have values similar to the CSS margin property,\n   * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   */\n  rootMargin?: string\n  /**\n   * The element that is used as the viewport for checking visibility of the target.\n   * Defaults to the browser viewport if not specified or if `null`.\n   */\n  rootRef?: RefObject<HTMLElement | null>\n  /**\n   * If set the `onLoad` function will start from the given index.\n   * If `initialLoad` is `true`, index starts from `0`.\n   *\n   * @default 1\n   */\n  startIndex?: number\n  /**\n   * Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n   */\n  threshold?: number | number[]\n  /**\n   * The callback invoked when trigger is intersect.\n   */\n  onLoad?: ({\n    entry,\n    finish,\n    index,\n  }: {\n    index: number\n    finish: () => void\n    entry?: IntersectionObserverEntry\n  }) => Promise<void> | void\n}\n\n/**\n * `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n *\n * @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n  behavior,\n  disabled = false,\n  indexRef: indexRefProp,\n  initialLoad = false,\n  orientation = \"vertical\",\n  resetRef,\n  reverse = false,\n  rootMargin,\n  rootRef,\n  startIndex = initialLoad ? 0 : 1,\n  threshold,\n  onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n  const ref = useRef<Y>(null)\n  const { getDocument, getWindow } = useEnvironment()\n  const indexRef = useRef<number>(startIndex)\n  const processingRef = useRef<boolean>(false)\n  const observerRef = useRef<IntersectionObserver | undefined>(undefined)\n  const [finish, setFinish] = useState<boolean>(false)\n  const onLoad = useCallbackRef(onLoadProp)\n  const vertical = orientation === \"vertical\"\n  const direction = vertical ? \"top\" : \"left\"\n  const options: IntersectionObserverInit = useMemo(() => {\n    const root = rootRef?.current\n\n    return { root, rootMargin, threshold }\n  }, [rootMargin, rootRef, threshold])\n\n  const onReset = useCallback(\n    (index = 1, runScroll = true) => {\n      indexRef.current = index\n\n      setFinish(false)\n\n      if (runScroll) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = reverse\n            ? vertical\n              ? el.scrollHeight\n              : el.scrollWidth\n            : 0\n\n          target?.scrollTo({ behavior, [direction]: position })\n        }\n      }\n\n      if (disabled) return\n\n      setTimeout(() => {\n        const observer = observerRef.current\n        const el = ref.current\n\n        if (el) observer?.observe(el)\n      })\n    },\n    [\n      disabled,\n      rootRef,\n      getDocument,\n      vertical,\n      getWindow,\n      reverse,\n      behavior,\n      direction,\n    ],\n  )\n\n  const onFinish = useCallback(() => {\n    const observer = observerRef.current\n    const el = ref.current\n\n    if (el) observer?.unobserve(el)\n\n    setFinish(true)\n  }, [])\n\n  const createObserver = useCallback(() => {\n    const observer = new IntersectionObserver(async ([entry]) => {\n      const root = rootRef?.current\n      const body = getDocument()?.body\n      const el = root && isScrollable(root, vertical) ? root : body\n\n      if (!entry?.isIntersecting || processingRef.current || !el) return\n\n      const props = { entry, finish: onFinish, index: indexRef.current }\n\n      processingRef.current = true\n\n      if (root) root.ariaBusy = \"true\"\n\n      let prevScrollPosition = 0\n\n      if (reverse)\n        prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n      await onLoad(props)\n\n      if (reverse)\n        setTimeout(() => {\n          const target = el === body ? getWindow() : el\n          const position =\n            (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n          target?.scrollTo({ [direction]: position })\n        })\n\n      indexRef.current += 1\n      processingRef.current = false\n\n      if (root) root.ariaBusy = \"false\"\n    }, options)\n\n    return observer\n  }, [\n    options,\n    rootRef,\n    getDocument,\n    vertical,\n    onFinish,\n    reverse,\n    onLoad,\n    getWindow,\n    direction,\n  ])\n\n  useEffect(() => {\n    const setTabIndexAttribute = () => {\n      const root = rootRef?.current\n      if (\n        root &&\n        isScrollable(root, vertical) &&\n        !root.hasAttribute(\"tabindex\")\n      ) {\n        root.setAttribute(\"tabindex\", \"0\")\n      }\n    }\n\n    const setupObserver = async () => {\n      const el = ref.current\n      const index = indexRef.current\n      const root = rootRef?.current\n\n      if (initialLoad) {\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        await onLoad({ finish: onFinish, index })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      }\n\n      if (disabled) return\n\n      observerRef.current = createObserver()\n\n      const observer = observerRef.current\n\n      if (reverse) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = vertical ? el.scrollHeight : el.scrollWidth\n\n          target?.scrollTo({ [direction]: position })\n        }\n      }\n\n      setTimeout(() => {\n        if (el) observer.observe(el)\n      })\n\n      return () => {\n        if (el) observer.unobserve(el)\n      }\n    }\n\n    setTabIndexAttribute()\n    setupObserver()\n  }, [\n    createObserver,\n    initialLoad,\n    disabled,\n    reverse,\n    vertical,\n    onFinish,\n    onLoad,\n    rootRef,\n    getDocument,\n    getWindow,\n    direction,\n  ])\n\n  assignRef(resetRef, onReset)\n  assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n  return { ref, finish }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-infinite-scroll.cjs","names":["useEnvironment","useCallbackRef","root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n  const style = getComputedStyle(el)\n\n  if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n  if (vertical) {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n  } else {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n  }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n  IntersectionObserverInit,\n  \"root\"\n> {\n  /**\n   * Determines whether scrolling is instant or animates smoothly.\n   */\n  behavior?: ScrollBehavior\n  /**\n   * If `true`, the infinite scroll is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Ref to a reset index function.\n   */\n  indexRef?: RefObject<(index: number) => void>\n  /**\n   * If `true`, invoke `onLoad` function for the first time.\n   *\n   * @default false\n   */\n  initialLoad?: boolean\n  /**\n   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * Ref to a reset function.\n   */\n  resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n  /**\n   *  If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Margin around the root. Can have values similar to the CSS margin property,\n   * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   */\n  rootMargin?: string\n  /**\n   * The element that is used as the viewport for checking visibility of the target.\n   * Defaults to the browser viewport if not specified or if `null`.\n   */\n  rootRef?: null | RefObject<HTMLElement | null>\n  /**\n   * If set the `onLoad` function will start from the given index.\n   * If `initialLoad` is `true`, index starts from `0`.\n   *\n   * @default 1\n   */\n  startIndex?: number\n  /**\n   * Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n   */\n  threshold?: number | number[]\n  /**\n   * The callback invoked when trigger is intersect.\n   */\n  onLoad?: ({\n    entry,\n    finish,\n    index,\n  }: {\n    index: number\n    finish: () => void\n    entry?: IntersectionObserverEntry\n  }) => Promise<void> | void\n}\n\n/**\n * `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n *\n * @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n  behavior,\n  disabled = false,\n  indexRef: indexRefProp,\n  initialLoad = false,\n  orientation = \"vertical\",\n  resetRef,\n  reverse = false,\n  rootMargin,\n  rootRef,\n  startIndex = initialLoad ? 0 : 1,\n  threshold,\n  onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n  const ref = useRef<Y>(null)\n  const { getDocument, getWindow } = useEnvironment()\n  const indexRef = useRef<number>(startIndex)\n  const processingRef = useRef<boolean>(false)\n  const observerRef = useRef<IntersectionObserver | undefined>(undefined)\n  const [finish, setFinish] = useState<boolean>(false)\n  const onLoad = useCallbackRef(onLoadProp)\n  const vertical = orientation === \"vertical\"\n  const direction = vertical ? \"top\" : \"left\"\n\n  const onReset = useCallback(\n    (index = 1, runScroll = true) => {\n      indexRef.current = index\n\n      setFinish(false)\n\n      if (runScroll) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = reverse\n            ? vertical\n              ? el.scrollHeight\n              : el.scrollWidth\n            : 0\n\n          target?.scrollTo({ behavior, [direction]: position })\n        }\n      }\n\n      if (disabled) return\n\n      setTimeout(() => {\n        const observer = observerRef.current\n        const el = ref.current\n\n        if (el) observer?.observe(el)\n      })\n    },\n    [\n      disabled,\n      rootRef,\n      getDocument,\n      vertical,\n      getWindow,\n      reverse,\n      behavior,\n      direction,\n    ],\n  )\n\n  const onFinish = useCallback(() => {\n    const observer = observerRef.current\n    const el = ref.current\n\n    if (el) observer?.unobserve(el)\n\n    setFinish(true)\n  }, [])\n\n  const createObserver = useCallback(() => {\n    const root = rootRef?.current ?? null\n\n    const observer = new IntersectionObserver(\n      async ([entry]) => {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (!entry?.isIntersecting || processingRef.current || !el) return\n\n        const props = { entry, finish: onFinish, index: indexRef.current }\n\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        let prevScrollPosition = 0\n\n        if (reverse)\n          prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n        await onLoad(props)\n\n        if (reverse)\n          setTimeout(() => {\n            const target = el === body ? getWindow() : el\n            const position =\n              (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n            target?.scrollTo({ [direction]: position })\n          })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      },\n      { root, rootMargin, threshold },\n    )\n\n    return observer\n  }, [\n    rootRef,\n    rootMargin,\n    threshold,\n    getDocument,\n    vertical,\n    onFinish,\n    reverse,\n    onLoad,\n    getWindow,\n    direction,\n  ])\n\n  useEffect(() => {\n    const setTabIndexAttribute = () => {\n      const root = rootRef?.current\n      if (\n        root &&\n        isScrollable(root, vertical) &&\n        !root.hasAttribute(\"tabindex\")\n      ) {\n        root.setAttribute(\"tabindex\", \"0\")\n      }\n    }\n\n    const setupObserver = async () => {\n      const el = ref.current\n      const index = indexRef.current\n      const root = rootRef?.current\n\n      if (initialLoad) {\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        await onLoad({ finish: onFinish, index })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      }\n\n      if (disabled) return\n\n      observerRef.current = createObserver()\n\n      const observer = observerRef.current\n\n      if (reverse) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = vertical ? el.scrollHeight : el.scrollWidth\n\n          target?.scrollTo({ [direction]: position })\n        }\n      }\n\n      setTimeout(() => {\n        if (el) observer.observe(el)\n      })\n\n      return () => {\n        if (el) observer.unobserve(el)\n      }\n    }\n\n    setTabIndexAttribute()\n    setupObserver()\n  }, [\n    createObserver,\n    initialLoad,\n    disabled,\n    reverse,\n    vertical,\n    onFinish,\n    onLoad,\n    rootRef,\n    getDocument,\n    getWindow,\n    direction,\n  ])\n\n  assignRef(resetRef, onReset)\n  assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n  return { ref, finish }\n}\n"],"mappings":"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"}

package/dist/esm/components/accordion/accordion.js

@@ -37,8 +37,6 @@ const AccordionRoot = withProvider(({ children, icon, iconHidden, items, ...prop
 		children: /* @__PURE__ */ jsx(AccordionContext, {
 			value: useMemo(() => ({
 				focusedIndex,
-				icon,
-				iconHidden,
 				index,
 				multiple,
 				setFocusedIndex,
@@ -46,8 +44,6 @@ const AccordionRoot = withProvider(({ children, icon, iconHidden, items, ...prop
 				toggle
 			}), [
 				focusedIndex,
-				icon,
-				iconHidden,
 				index,
 				multiple,
 				setFocusedIndex,

package/dist/esm/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["createContext","index","props"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, isString, runIfFn, useSplitChildren } from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface ComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface ItemComponentContext extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<AccordionRootProps, AccordionStyle, ComponentContext>(\n  \"accordion\",\n  accordionStyle,\n)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [\n        focusedIndex,\n        icon,\n        iconHidden,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n    const computedChildren = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(computedChildren, AccordionButton, AccordionPanel)\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <ItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </ItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(customIcon, props) ??\n              runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"accordion.js","names":["createContext","index","props"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, isString, runIfFn, useSplitChildren } from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface ComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface ItemComponentContext extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<AccordionRootProps, AccordionStyle, ComponentContext>(\n  \"accordion\",\n  accordionStyle,\n)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [focusedIndex, index, multiple, setFocusedIndex, setIndex, toggle],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n    const computedChildren = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(computedChildren, AccordionButton, AccordionPanel)\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <ItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </ItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(customIcon, props) ??\n              runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":"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"}

package/dist/esm/components/accordion/use-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-accordion.js","names":["createContext","getRootProps: PropGetter","open","getItemProps: PropGetter","getButtonProps: PropGetter<\"button\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/accordion/use-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  mergeRefs,\n  runKeyAction,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: AccordionDescendantsContext,\n  useDescendant: useAccordionDescendant,\n  useDescendants: useAccordionDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport {\n  AccordionDescendantsContext,\n  useAccordionDescendant,\n  useAccordionDescendants,\n}\n\ninterface AccordionContext extends Omit<\n  UseAccordionReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [AccordionContext, useAccordionContext] = createContext<AccordionContext>(\n  {\n    name: \"AccordionContext\",\n  },\n)\n\nexport { AccordionContext, useAccordionContext }\n\ninterface AccordionItemContext extends Omit<\n  UseAccordionItemReturn,\n  \"getItemProps\"\n> {}\n\nconst [AccordionItemContext, useAccordionItemContext] =\n  createContext<AccordionItemContext>({\n    name: \"AccordionItemContext\",\n  })\n\nexport { AccordionItemContext, useAccordionItemContext }\n\nexport interface UseAccordionProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index(es) of the accordion item to expand.\n   */\n  defaultIndex?: number | number[]\n  /**\n   * The index(es) of the accordion item to expand.\n   */\n  index?: number | number[]\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * If `true`, any expanded accordion item can be collapsed again.\n   *\n   * @default false\n   */\n  toggle?: boolean\n  /**\n   * The callback invoked when accordion items are expanded or collapsed.\n   */\n  onChange?: (index: number | number[]) => void\n}\n\nexport const useAccordion = ({\n  defaultIndex: defaultIndexProp,\n  index: indexProp,\n  multiple,\n  toggle,\n  onChange,\n  ...rest\n}: UseAccordionProps = {}) => {\n  if (\n    (indexProp || defaultIndexProp) != null &&\n    !isArray(indexProp || defaultIndexProp) &&\n    multiple\n  ) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, then 'index' or 'defaultIndex' must be an array.`,\n    )\n  }\n\n  if (multiple && toggle) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, 'toggle' will be ignored. Either remove 'toggle' or 'multiple' depending on whether you want multiple accordions visible or not`,\n    )\n  }\n\n  const descendants = useAccordionDescendants()\n\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n  const [index, setIndex] = useControllableState({\n    defaultValue: () =>\n      multiple ? (defaultIndexProp ?? []) : (defaultIndexProp ?? -1),\n    value: indexProp,\n    onChange,\n  })\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  useEffect(() => {\n    return () => setFocusedIndex(-1)\n  }, [])\n\n  return {\n    descendants,\n    focusedIndex,\n    index,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n    getRootProps,\n  }\n}\n\nexport type UseAccordionReturn = ReturnType<typeof useAccordion>\n\nexport interface UseAccordionItemProps extends HTMLProps {\n  /**\n   * The index of the accordion item.\n   */\n  index: number\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useAccordionItem = ({\n  disabled,\n  index,\n  ...rest\n}: UseAccordionItemProps) => {\n  const itemId = useId()\n  const panelId = useId()\n  const {\n    index: selectedIndex,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n  } = useAccordionContext()\n  const { descendants, register } = useAccordionDescendant({ disabled })\n  const open =\n    index !== -1\n      ? isArray(selectedIndex)\n        ? selectedIndex.includes(index)\n        : selectedIndex === index\n      : false\n\n  if (open && disabled)\n    console.warn(`Accordion: Cannot open a disabled accordion item`)\n\n  const onChange = useCallback(\n    (open: boolean) => {\n      if (index === -1) return\n\n      if (multiple && isArray(selectedIndex)) {\n        setIndex(\n          open\n            ? selectedIndex.concat(index)\n            : selectedIndex.filter((i) => i !== index),\n        )\n      } else if (open) {\n        setIndex(index)\n      } else if (toggle) {\n        setIndex(-1)\n      }\n    },\n    [multiple, toggle, index, selectedIndex, setIndex],\n  )\n\n  const onFocus = useCallback(() => {\n    setFocusedIndex(index)\n  }, [setFocusedIndex, index])\n\n  const onClick = useCallback(() => {\n    onChange(!open)\n    setFocusedIndex(index)\n  }, [index, setFocusedIndex, open, onChange])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLButtonElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          const next = descendants.enabledNextValue(index)\n\n          next?.node.focus()\n        },\n        ArrowUp: () => {\n          const prev = descendants.enabledPrevValue(index)\n\n          prev?.node.focus()\n        },\n        End: () => {\n          const last = descendants.enabledLastValue()\n\n          last?.node.focus()\n        },\n        Home: () => {\n          const first = descendants.enabledFirstValue()\n\n          first?.node.focus()\n        },\n      })\n    },\n    [descendants, index],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"data-expanded\": dataAttr(open),\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [open, rest],\n  )\n\n  const getButtonProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: itemId,\n      type: \"button\",\n      \"aria-controls\": panelId,\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      ...props,\n      ref: mergeRefs(register, ref),\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      itemId,\n      open,\n      panelId,\n      multiple,\n      toggle,\n      disabled,\n      register,\n      onClick,\n      onFocus,\n      onKeyDown,\n    ],\n  )\n\n  const getPanelProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: panelId,\n      \"aria-labelledby\": cx(ariaLabelledby, itemId),\n      role: \"region\",\n      ...props,\n    }),\n    [itemId, panelId],\n  )\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [multiple, toggle, open, disabled],\n  )\n\n  return {\n    disabled,\n    open,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-accordion.js","names":["createContext","getRootProps: PropGetter","open","getItemProps: PropGetter","getButtonProps: PropGetter<\"button\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/accordion/use-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isArray,\n  mergeRefs,\n  runKeyAction,\n} from \"../../utils\"\n\nconst {\n  DescendantsContext: AccordionDescendantsContext,\n  useDescendant: useAccordionDescendant,\n  useDescendants: useAccordionDescendants,\n} = createDescendants<HTMLButtonElement>()\n\nexport {\n  AccordionDescendantsContext,\n  useAccordionDescendant,\n  useAccordionDescendants,\n}\n\ninterface AccordionContext extends Omit<\n  UseAccordionReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [AccordionContext, useAccordionContext] = createContext<AccordionContext>(\n  { name: \"AccordionContext\" },\n)\n\nexport { AccordionContext, useAccordionContext }\n\ninterface AccordionItemContext extends Omit<\n  UseAccordionItemReturn,\n  \"getItemProps\"\n> {}\n\nconst [AccordionItemContext, useAccordionItemContext] =\n  createContext<AccordionItemContext>({\n    name: \"AccordionItemContext\",\n  })\n\nexport { AccordionItemContext, useAccordionItemContext }\n\nexport interface UseAccordionProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial index(es) of the accordion item to expand.\n   */\n  defaultIndex?: number | number[]\n  /**\n   * The index(es) of the accordion item to expand.\n   */\n  index?: number | number[]\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * If `true`, any expanded accordion item can be collapsed again.\n   *\n   * @default false\n   */\n  toggle?: boolean\n  /**\n   * The callback invoked when accordion items are expanded or collapsed.\n   */\n  onChange?: (index: number | number[]) => void\n}\n\nexport const useAccordion = ({\n  defaultIndex: defaultIndexProp,\n  index: indexProp,\n  multiple,\n  toggle,\n  onChange,\n  ...rest\n}: UseAccordionProps = {}) => {\n  if (\n    (indexProp || defaultIndexProp) != null &&\n    !isArray(indexProp || defaultIndexProp) &&\n    multiple\n  ) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, then 'index' or 'defaultIndex' must be an array.`,\n    )\n  }\n\n  if (multiple && toggle) {\n    console.warn(\n      `Accordion: If 'multiple' is passed, 'toggle' will be ignored. Either remove 'toggle' or 'multiple' depending on whether you want multiple accordions visible or not`,\n    )\n  }\n\n  const descendants = useAccordionDescendants()\n\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n  const [index, setIndex] = useControllableState({\n    defaultValue: () =>\n      multiple ? (defaultIndexProp ?? []) : (defaultIndexProp ?? -1),\n    value: indexProp,\n    onChange,\n  })\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  useEffect(() => {\n    return () => setFocusedIndex(-1)\n  }, [])\n\n  return {\n    descendants,\n    focusedIndex,\n    index,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n    getRootProps,\n  }\n}\n\nexport type UseAccordionReturn = ReturnType<typeof useAccordion>\n\nexport interface UseAccordionItemProps extends HTMLProps {\n  /**\n   * The index of the accordion item.\n   */\n  index: number\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useAccordionItem = ({\n  disabled,\n  index,\n  ...rest\n}: UseAccordionItemProps) => {\n  const itemId = useId()\n  const panelId = useId()\n  const {\n    index: selectedIndex,\n    multiple,\n    setFocusedIndex,\n    setIndex,\n    toggle,\n  } = useAccordionContext()\n  const { descendants, register } = useAccordionDescendant({ disabled })\n  const open =\n    index !== -1\n      ? isArray(selectedIndex)\n        ? selectedIndex.includes(index)\n        : selectedIndex === index\n      : false\n\n  if (open && disabled)\n    console.warn(`Accordion: Cannot open a disabled accordion item`)\n\n  const onChange = useCallback(\n    (open: boolean) => {\n      if (index === -1) return\n\n      if (multiple && isArray(selectedIndex)) {\n        setIndex(\n          open\n            ? selectedIndex.concat(index)\n            : selectedIndex.filter((i) => i !== index),\n        )\n      } else if (open) {\n        setIndex(index)\n      } else if (toggle) {\n        setIndex(-1)\n      }\n    },\n    [multiple, toggle, index, selectedIndex, setIndex],\n  )\n\n  const onFocus = useCallback(() => {\n    setFocusedIndex(index)\n  }, [setFocusedIndex, index])\n\n  const onClick = useCallback(() => {\n    onChange(!open)\n    setFocusedIndex(index)\n  }, [index, setFocusedIndex, open, onChange])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLButtonElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => {\n          const next = descendants.enabledNextValue(index)\n\n          next?.node.focus()\n        },\n        ArrowUp: () => {\n          const prev = descendants.enabledPrevValue(index)\n\n          prev?.node.focus()\n        },\n        End: () => {\n          const last = descendants.enabledLastValue()\n\n          last?.node.focus()\n        },\n        Home: () => {\n          const first = descendants.enabledFirstValue()\n\n          first?.node.focus()\n        },\n      })\n    },\n    [descendants, index],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"data-expanded\": dataAttr(open),\n      ...props,\n      ...rest,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [open, rest],\n  )\n\n  const getButtonProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: itemId,\n      type: \"button\",\n      \"aria-controls\": panelId,\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      ...props,\n      ref: mergeRefs(register, ref),\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n      onFocus: handlerAll(props.onFocus, onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      itemId,\n      open,\n      panelId,\n      multiple,\n      toggle,\n      disabled,\n      register,\n      onClick,\n      onFocus,\n      onKeyDown,\n    ],\n  )\n\n  const getPanelProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: panelId,\n      \"aria-labelledby\": cx(ariaLabelledby, itemId),\n      role: \"region\",\n      ...props,\n    }),\n    [itemId, panelId],\n  )\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr((!multiple && !toggle && open) || disabled),\n      \"aria-expanded\": open,\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [multiple, toggle, open, disabled],\n  )\n\n  return {\n    disabled,\n    open,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>\n"],"mappings":"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"}

package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { mergeRefs } from "../../utils/ref.js";
-import "../../utils/index.js";
+import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
@@ -29,7 +29,7 @@ const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: fini
 		resetRef,
 		reverse,
 		rootMargin,
-		rootRef: rootRefProp ?? rootRef,
+		rootRef: (0, utils_exports.isNull)(rootRefProp) ? null : rootRefProp ?? rootRef,
 		startIndex,
 		threshold,
 		onLoad

package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll-area.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: rootRefProp ?? rootRef,\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACE,oBACF,wBACA,wBACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAW,kBAAkB;EACpD;EACA;EACA;EACA,aALkB,SAAS,gBAAgB;EAM3C;EACA;EACA;EACA,SAAS,eAAe;EACxB;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,qBAAC,OAAO;EACN,KAAK,UAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}
+{"version":3,"file":"infinite-scroll-area.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACE,oBACF,wBACA,wBACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAW,kBAAkB;EACpD;EACA;EACA;EACA,aALkB,SAAS,gBAAgB;EAM3C;EACA;EACA;EACA,mCAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,qBAAC,OAAO;EACN,KAAK,UAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}

package/dist/esm/components/infinite-scroll-area/use-infinite-scroll.js

@@ -4,7 +4,7 @@ import { assignRef, useCallbackRef } from "../../utils/ref.js";
 import "../../utils/index.js";
 import { useEnvironment } from "../../core/system/environment-provider.js";
 import "../../core/index.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/components/infinite-scroll-area/use-infinite-scroll.ts
 const isScrollable = (el, vertical) => {
@@ -40,17 +40,6 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 	const onLoad = useCallbackRef(onLoadProp);
 	const vertical = orientation === "vertical";
 	const direction = vertical ? "top" : "left";
-	const options = useMemo(() => {
-		return {
-			root: rootRef?.current,
-			rootMargin,
-			threshold
-		};
-	}, [
-		rootMargin,
-		rootRef,
-		threshold
-	]);
 	const onReset = useCallback((index = 1, runScroll = true) => {
 		indexRef.current = index;
 		setFinish(false);
@@ -90,10 +79,11 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 		setFinish(true);
 	}, []);
 	const createObserver = useCallback(() => {
+		const root = rootRef?.current ?? null;
 		return new IntersectionObserver(async ([entry]) => {
-			const root = rootRef?.current;
+			const root$1 = rootRef?.current;
 			const body = getDocument()?.body;
-			const el = root && isScrollable(root, vertical) ? root : body;
+			const el = root$1 && isScrollable(root$1, vertical) ? root$1 : body;
 			if (!entry?.isIntersecting || processingRef.current || !el) return;
 			const props = {
 				entry,
@@ -101,7 +91,7 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 				index: indexRef.current
 			};
 			processingRef.current = true;
-			if (root) root.ariaBusy = "true";
+			if (root$1) root$1.ariaBusy = "true";
 			let prevScrollPosition = 0;
 			if (reverse) prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth;
 			await onLoad(props);
@@ -112,11 +102,16 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 			});
 			indexRef.current += 1;
 			processingRef.current = false;
-			if (root) root.ariaBusy = "false";
-		}, options);
+			if (root$1) root$1.ariaBusy = "false";
+		}, {
+			root,
+			rootMargin,
+			threshold
+		});
 	}, [
-		options,
 		rootRef,
+		rootMargin,
+		threshold,
 		getDocument,
 		vertical,
 		onFinish,

package/dist/esm/components/infinite-scroll-area/use-infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.js","names":["options: IntersectionObserverInit","root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n  const style = getComputedStyle(el)\n\n  if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n  if (vertical) {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n  } else {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n  }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n  IntersectionObserverInit,\n  \"root\"\n> {\n  /**\n   * Determines whether scrolling is instant or animates smoothly.\n   */\n  behavior?: ScrollBehavior\n  /**\n   * If `true`, the infinite scroll is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Ref to a reset index function.\n   */\n  indexRef?: RefObject<(index: number) => void>\n  /**\n   * If `true`, invoke `onLoad` function for the first time.\n   *\n   * @default false\n   */\n  initialLoad?: boolean\n  /**\n   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * Ref to a reset function.\n   */\n  resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n  /**\n   *  If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Margin around the root. Can have values similar to the CSS margin property,\n   * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   */\n  rootMargin?: string\n  /**\n   * The element that is used as the viewport for checking visibility of the target.\n   * Defaults to the browser viewport if not specified or if `null`.\n   */\n  rootRef?: RefObject<HTMLElement | null>\n  /**\n   * If set the `onLoad` function will start from the given index.\n   * If `initialLoad` is `true`, index starts from `0`.\n   *\n   * @default 1\n   */\n  startIndex?: number\n  /**\n   * Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n   */\n  threshold?: number | number[]\n  /**\n   * The callback invoked when trigger is intersect.\n   */\n  onLoad?: ({\n    entry,\n    finish,\n    index,\n  }: {\n    index: number\n    finish: () => void\n    entry?: IntersectionObserverEntry\n  }) => Promise<void> | void\n}\n\n/**\n * `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n *\n * @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n  behavior,\n  disabled = false,\n  indexRef: indexRefProp,\n  initialLoad = false,\n  orientation = \"vertical\",\n  resetRef,\n  reverse = false,\n  rootMargin,\n  rootRef,\n  startIndex = initialLoad ? 0 : 1,\n  threshold,\n  onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n  const ref = useRef<Y>(null)\n  const { getDocument, getWindow } = useEnvironment()\n  const indexRef = useRef<number>(startIndex)\n  const processingRef = useRef<boolean>(false)\n  const observerRef = useRef<IntersectionObserver | undefined>(undefined)\n  const [finish, setFinish] = useState<boolean>(false)\n  const onLoad = useCallbackRef(onLoadProp)\n  const vertical = orientation === \"vertical\"\n  const direction = vertical ? \"top\" : \"left\"\n  const options: IntersectionObserverInit = useMemo(() => {\n    const root = rootRef?.current\n\n    return { root, rootMargin, threshold }\n  }, [rootMargin, rootRef, threshold])\n\n  const onReset = useCallback(\n    (index = 1, runScroll = true) => {\n      indexRef.current = index\n\n      setFinish(false)\n\n      if (runScroll) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = reverse\n            ? vertical\n              ? el.scrollHeight\n              : el.scrollWidth\n            : 0\n\n          target?.scrollTo({ behavior, [direction]: position })\n        }\n      }\n\n      if (disabled) return\n\n      setTimeout(() => {\n        const observer = observerRef.current\n        const el = ref.current\n\n        if (el) observer?.observe(el)\n      })\n    },\n    [\n      disabled,\n      rootRef,\n      getDocument,\n      vertical,\n      getWindow,\n      reverse,\n      behavior,\n      direction,\n    ],\n  )\n\n  const onFinish = useCallback(() => {\n    const observer = observerRef.current\n    const el = ref.current\n\n    if (el) observer?.unobserve(el)\n\n    setFinish(true)\n  }, [])\n\n  const createObserver = useCallback(() => {\n    const observer = new IntersectionObserver(async ([entry]) => {\n      const root = rootRef?.current\n      const body = getDocument()?.body\n      const el = root && isScrollable(root, vertical) ? root : body\n\n      if (!entry?.isIntersecting || processingRef.current || !el) return\n\n      const props = { entry, finish: onFinish, index: indexRef.current }\n\n      processingRef.current = true\n\n      if (root) root.ariaBusy = \"true\"\n\n      let prevScrollPosition = 0\n\n      if (reverse)\n        prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n      await onLoad(props)\n\n      if (reverse)\n        setTimeout(() => {\n          const target = el === body ? getWindow() : el\n          const position =\n            (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n          target?.scrollTo({ [direction]: position })\n        })\n\n      indexRef.current += 1\n      processingRef.current = false\n\n      if (root) root.ariaBusy = \"false\"\n    }, options)\n\n    return observer\n  }, [\n    options,\n    rootRef,\n    getDocument,\n    vertical,\n    onFinish,\n    reverse,\n    onLoad,\n    getWindow,\n    direction,\n  ])\n\n  useEffect(() => {\n    const setTabIndexAttribute = () => {\n      const root = rootRef?.current\n      if (\n        root &&\n        isScrollable(root, vertical) &&\n        !root.hasAttribute(\"tabindex\")\n      ) {\n        root.setAttribute(\"tabindex\", \"0\")\n      }\n    }\n\n    const setupObserver = async () => {\n      const el = ref.current\n      const index = indexRef.current\n      const root = rootRef?.current\n\n      if (initialLoad) {\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        await onLoad({ finish: onFinish, index })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      }\n\n      if (disabled) return\n\n      observerRef.current = createObserver()\n\n      const observer = observerRef.current\n\n      if (reverse) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = vertical ? el.scrollHeight : el.scrollWidth\n\n          target?.scrollTo({ [direction]: position })\n        }\n      }\n\n      setTimeout(() => {\n        if (el) observer.observe(el)\n      })\n\n      return () => {\n        if (el) observer.unobserve(el)\n      }\n    }\n\n    setTabIndexAttribute()\n    setupObserver()\n  }, [\n    createObserver,\n    initialLoad,\n    disabled,\n    reverse,\n    vertical,\n    onFinish,\n    onLoad,\n    rootRef,\n    getDocument,\n    getWindow,\n    direction,\n  ])\n\n  assignRef(resetRef, onReset)\n  assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n  return { ref, finish }\n}\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAgB,IAAiB,aAAsB;CAC3D,MAAM,QAAQ,iBAAiB,GAAG;AAElC,KAAI;EAAC;EAAQ;EAAW;EAAS,CAAC,SAAS,MAAM,SAAS,CAAE,QAAO;AAEnE,KAAI,SACF,QAAO;EAAC;EAAQ;EAAW;EAAS,CAAC,SAAS,MAAM,UAAU;KAE9D,QAAO;EAAC;EAAQ;EAAW;EAAS,CAAC,SAAS,MAAM,UAAU;;;;;;;AAoFlE,MAAa,qBAA6D,EACxE,UACA,WAAW,OACX,UAAU,cACV,cAAc,OACd,cAAc,YACd,UACA,UAAU,OACV,YACA,SACA,aAAa,cAAc,IAAI,GAC/B,WACA,QAAQ,eACkB,EAAE,KAAK;CACjC,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,EAAE,aAAa,cAAc,gBAAgB;CACnD,MAAM,WAAW,OAAe,WAAW;CAC3C,MAAM,gBAAgB,OAAgB,MAAM;CAC5C,MAAM,cAAc,OAAyC,OAAU;CACvE,MAAM,CAAC,QAAQ,aAAa,SAAkB,MAAM;CACpD,MAAM,SAAS,eAAe,WAAW;CACzC,MAAM,WAAW,gBAAgB;CACjC,MAAM,YAAY,WAAW,QAAQ;CACrC,MAAMA,UAAoC,cAAc;AAGtD,SAAO;GAAE,MAFI,SAAS;GAEP;GAAY;GAAW;IACrC;EAAC;EAAY;EAAS;EAAU,CAAC;CAEpC,MAAM,UAAU,aACb,QAAQ,GAAG,YAAY,SAAS;AAC/B,WAAS,UAAU;AAEnB,YAAU,MAAM;AAEhB,MAAI,WAAW;GACb,MAAM,OAAO,SAAS;GACtB,MAAM,OAAO,aAAa,EAAE;GAC5B,MAAM,KAAK,QAAQ,aAAa,MAAM,SAAS,GAAG,OAAO;AAEzD,OAAI,IAAI;IACN,MAAM,SAAS,OAAO,OAAO,WAAW,GAAG;IAC3C,MAAM,WAAW,UACb,WACE,GAAG,eACH,GAAG,cACL;AAEJ,YAAQ,SAAS;KAAE;MAAW,YAAY;KAAU,CAAC;;;AAIzD,MAAI,SAAU;AAEd,mBAAiB;GACf,MAAM,WAAW,YAAY;GAC7B,MAAM,KAAK,IAAI;AAEf,OAAI,GAAI,WAAU,QAAQ,GAAG;IAC7B;IAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,WAAW,kBAAkB;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,KAAK,IAAI;AAEf,MAAI,GAAI,WAAU,UAAU,GAAG;AAE/B,YAAU,KAAK;IACd,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;AAoCvC,SAnCiB,IAAI,qBAAqB,OAAO,CAAC,WAAW;GAC3D,MAAM,OAAO,SAAS;GACtB,MAAM,OAAO,aAAa,EAAE;GAC5B,MAAM,KAAK,QAAQ,aAAa,MAAM,SAAS,GAAG,OAAO;AAEzD,OAAI,CAAC,OAAO,kBAAkB,cAAc,WAAW,CAAC,GAAI;GAE5D,MAAM,QAAQ;IAAE;IAAO,QAAQ;IAAU,OAAO,SAAS;IAAS;AAElE,iBAAc,UAAU;AAExB,OAAI,KAAM,MAAK,WAAW;GAE1B,IAAI,qBAAqB;AAEzB,OAAI,QACF,sBAAqB,WAAW,GAAG,eAAe,GAAG;AAEvD,SAAM,OAAO,MAAM;AAEnB,OAAI,QACF,kBAAiB;IACf,MAAM,SAAS,OAAO,OAAO,WAAW,GAAG;IAC3C,MAAM,YACH,WAAW,GAAG,eAAe,GAAG,eAAe;AAElD,YAAQ,SAAS,GAAG,YAAY,UAAU,CAAC;KAC3C;AAEJ,YAAS,WAAW;AACpB,iBAAc,UAAU;AAExB,OAAI,KAAM,MAAK,WAAW;KACzB,QAAQ;IAGV;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,iBAAgB;EACd,MAAM,6BAA6B;GACjC,MAAM,OAAO,SAAS;AACtB,OACE,QACA,aAAa,MAAM,SAAS,IAC5B,CAAC,KAAK,aAAa,WAAW,CAE9B,MAAK,aAAa,YAAY,IAAI;;EAItC,MAAM,gBAAgB,YAAY;GAChC,MAAM,KAAK,IAAI;GACf,MAAM,QAAQ,SAAS;GACvB,MAAM,OAAO,SAAS;AAEtB,OAAI,aAAa;AACf,kBAAc,UAAU;AAExB,QAAI,KAAM,MAAK,WAAW;AAE1B,UAAM,OAAO;KAAE,QAAQ;KAAU;KAAO,CAAC;AAEzC,aAAS,WAAW;AACpB,kBAAc,UAAU;AAExB,QAAI,KAAM,MAAK,WAAW;;AAG5B,OAAI,SAAU;AAEd,eAAY,UAAU,gBAAgB;GAEtC,MAAM,WAAW,YAAY;AAE7B,OAAI,SAAS;IACX,MAAMC,SAAO,SAAS;IACtB,MAAM,OAAO,aAAa,EAAE;IAC5B,MAAMC,OAAKD,UAAQ,aAAaA,QAAM,SAAS,GAAGA,SAAO;AAEzD,QAAIC,MAAI;KACN,MAAM,SAASA,SAAO,OAAO,WAAW,GAAGA;KAC3C,MAAM,WAAW,WAAWA,KAAG,eAAeA,KAAG;AAEjD,aAAQ,SAAS,GAAG,YAAY,UAAU,CAAC;;;AAI/C,oBAAiB;AACf,QAAI,GAAI,UAAS,QAAQ,GAAG;KAC5B;AAEF,gBAAa;AACX,QAAI,GAAI,UAAS,UAAU,GAAG;;;AAIlC,wBAAsB;AACtB,iBAAe;IACd;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,WAAU,UAAU,QAAQ;AAC5B,WAAU,eAAe,UAAW,SAAS,UAAU,MAAO;AAE9D,QAAO;EAAE;EAAK;EAAQ"}
+{"version":3,"file":"use-infinite-scroll.js","names":["root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n  const style = getComputedStyle(el)\n\n  if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n  if (vertical) {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n  } else {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n  }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n  IntersectionObserverInit,\n  \"root\"\n> {\n  /**\n   * Determines whether scrolling is instant or animates smoothly.\n   */\n  behavior?: ScrollBehavior\n  /**\n   * If `true`, the infinite scroll is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Ref to a reset index function.\n   */\n  indexRef?: RefObject<(index: number) => void>\n  /**\n   * If `true`, invoke `onLoad` function for the first time.\n   *\n   * @default false\n   */\n  initialLoad?: boolean\n  /**\n   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * Ref to a reset function.\n   */\n  resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n  /**\n   *  If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Margin around the root. Can have values similar to the CSS margin property,\n   * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   */\n  rootMargin?: string\n  /**\n   * The element that is used as the viewport for checking visibility of the target.\n   * Defaults to the browser viewport if not specified or if `null`.\n   */\n  rootRef?: null | RefObject<HTMLElement | null>\n  /**\n   * If set the `onLoad` function will start from the given index.\n   * If `initialLoad` is `true`, index starts from `0`.\n   *\n   * @default 1\n   */\n  startIndex?: number\n  /**\n   * Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n   */\n  threshold?: number | number[]\n  /**\n   * The callback invoked when trigger is intersect.\n   */\n  onLoad?: ({\n    entry,\n    finish,\n    index,\n  }: {\n    index: number\n    finish: () => void\n    entry?: IntersectionObserverEntry\n  }) => Promise<void> | void\n}\n\n/**\n * `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n *\n * @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n  behavior,\n  disabled = false,\n  indexRef: indexRefProp,\n  initialLoad = false,\n  orientation = \"vertical\",\n  resetRef,\n  reverse = false,\n  rootMargin,\n  rootRef,\n  startIndex = initialLoad ? 0 : 1,\n  threshold,\n  onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n  const ref = useRef<Y>(null)\n  const { getDocument, getWindow } = useEnvironment()\n  const indexRef = useRef<number>(startIndex)\n  const processingRef = useRef<boolean>(false)\n  const observerRef = useRef<IntersectionObserver | undefined>(undefined)\n  const [finish, setFinish] = useState<boolean>(false)\n  const onLoad = useCallbackRef(onLoadProp)\n  const vertical = orientation === \"vertical\"\n  const direction = vertical ? \"top\" : \"left\"\n\n  const onReset = useCallback(\n    (index = 1, runScroll = true) => {\n      indexRef.current = index\n\n      setFinish(false)\n\n      if (runScroll) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = reverse\n            ? vertical\n              ? el.scrollHeight\n              : el.scrollWidth\n            : 0\n\n          target?.scrollTo({ behavior, [direction]: position })\n        }\n      }\n\n      if (disabled) return\n\n      setTimeout(() => {\n        const observer = observerRef.current\n        const el = ref.current\n\n        if (el) observer?.observe(el)\n      })\n    },\n    [\n      disabled,\n      rootRef,\n      getDocument,\n      vertical,\n      getWindow,\n      reverse,\n      behavior,\n      direction,\n    ],\n  )\n\n  const onFinish = useCallback(() => {\n    const observer = observerRef.current\n    const el = ref.current\n\n    if (el) observer?.unobserve(el)\n\n    setFinish(true)\n  }, [])\n\n  const createObserver = useCallback(() => {\n    const root = rootRef?.current ?? null\n\n    const observer = new IntersectionObserver(\n      async ([entry]) => {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (!entry?.isIntersecting || processingRef.current || !el) return\n\n        const props = { entry, finish: onFinish, index: indexRef.current }\n\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        let prevScrollPosition = 0\n\n        if (reverse)\n          prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n        await onLoad(props)\n\n        if (reverse)\n          setTimeout(() => {\n            const target = el === body ? getWindow() : el\n            const position =\n              (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n            target?.scrollTo({ [direction]: position })\n          })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      },\n      { root, rootMargin, threshold },\n    )\n\n    return observer\n  }, [\n    rootRef,\n    rootMargin,\n    threshold,\n    getDocument,\n    vertical,\n    onFinish,\n    reverse,\n    onLoad,\n    getWindow,\n    direction,\n  ])\n\n  useEffect(() => {\n    const setTabIndexAttribute = () => {\n      const root = rootRef?.current\n      if (\n        root &&\n        isScrollable(root, vertical) &&\n        !root.hasAttribute(\"tabindex\")\n      ) {\n        root.setAttribute(\"tabindex\", \"0\")\n      }\n    }\n\n    const setupObserver = async () => {\n      const el = ref.current\n      const index = indexRef.current\n      const root = rootRef?.current\n\n      if (initialLoad) {\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        await onLoad({ finish: onFinish, index })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      }\n\n      if (disabled) return\n\n      observerRef.current = createObserver()\n\n      const observer = observerRef.current\n\n      if (reverse) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = vertical ? el.scrollHeight : el.scrollWidth\n\n          target?.scrollTo({ [direction]: position })\n        }\n      }\n\n      setTimeout(() => {\n        if (el) observer.observe(el)\n      })\n\n      return () => {\n        if (el) observer.unobserve(el)\n      }\n    }\n\n    setTabIndexAttribute()\n    setupObserver()\n  }, [\n    createObserver,\n    initialLoad,\n    disabled,\n    reverse,\n    vertical,\n    onFinish,\n    onLoad,\n    rootRef,\n    getDocument,\n    getWindow,\n    direction,\n  ])\n\n  assignRef(resetRef, onReset)\n  assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n  return { ref, finish }\n}\n"],"mappings":"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"}