UNPKG

@yamada-ui/react

Version:

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

1 lines 11.4 kB
{"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 AccordionComponentContext\n extends Pick<AccordionRootProps, \"icon\" | \"iconHidden\"> {}\n\nexport interface AccordionRootProps\n extends 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 AccordionItemComponentContext\n extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [AccordionItemComponentContext, useAccordionItemComponentContext] =\n createContext<AccordionItemComponentContext>({\n name: \"AccordionItemComponentContext\",\n })\n\nconst {\n ComponentContext,\n PropsContext: AccordionPropsContext,\n useComponentContext,\n usePropsContext: useAccordionPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n AccordionRootProps,\n AccordionStyle,\n AccordionComponentContext\n>(\"accordion\", accordionStyle)\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 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\n children = useMemo(\n () => runIfFn(children, { disabled, expanded: open }),\n [children, disabled, open],\n )\n\n const [omittedChildren, customAccordionButton, customAccordionPanel] =\n useSplitChildren(children, AccordionButton, AccordionPanel)\n\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 <AccordionItemComponentContext 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 </AccordionItemComponentContext>\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<{ disabled?: boolean; expanded?: boolean }>\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 } = useAccordionItemComponentContext()\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(itemIcon, props) ??\n runIfFn(rootIcon, props) ??\n runIfFn(customIcon, 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 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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"}