@yamada-ui/react 2.2.0 → 2.3.0-next-20260411064049
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/accordion/accordion.cjs +15 -5
- package/dist/cjs/components/accordion/accordion.cjs.map +1 -1
- package/dist/cjs/components/avatar/avatar-group.cjs +6 -3
- package/dist/cjs/components/avatar/avatar-group.cjs.map +1 -1
- package/dist/cjs/components/checkbox/checkbox-group.cjs +6 -4
- package/dist/cjs/components/checkbox/checkbox-group.cjs.map +1 -1
- package/dist/cjs/components/checkbox-card/checkbox-card-group.cjs +5 -3
- package/dist/cjs/components/checkbox-card/checkbox-card-group.cjs.map +1 -1
- package/dist/cjs/components/menu/menu.cjs +45 -42
- package/dist/cjs/components/menu/menu.cjs.map +1 -1
- package/dist/cjs/components/native-popover/native-popover.cjs +26 -23
- package/dist/cjs/components/native-popover/native-popover.cjs.map +1 -1
- package/dist/cjs/components/popover/popover.cjs +34 -31
- package/dist/cjs/components/popover/popover.cjs.map +1 -1
- package/dist/cjs/components/radio/radio-group.cjs +6 -4
- package/dist/cjs/components/radio/radio-group.cjs.map +1 -1
- package/dist/cjs/components/radio-card/radio-card-group.cjs +5 -3
- package/dist/cjs/components/radio-card/radio-card-group.cjs.map +1 -1
- package/dist/cjs/components/toggle/toggle-group.cjs +6 -4
- package/dist/cjs/components/toggle/toggle-group.cjs.map +1 -1
- package/dist/cjs/components/tooltip/tooltip.cjs +23 -18
- package/dist/cjs/components/tooltip/tooltip.cjs.map +1 -1
- package/dist/cjs/core/components/create-component.cjs +31 -6
- package/dist/cjs/core/components/create-component.cjs.map +1 -1
- package/dist/esm/components/accordion/accordion.js +15 -5
- package/dist/esm/components/accordion/accordion.js.map +1 -1
- package/dist/esm/components/avatar/avatar-group.js +6 -3
- package/dist/esm/components/avatar/avatar-group.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox-group.js +6 -4
- package/dist/esm/components/checkbox/checkbox-group.js.map +1 -1
- package/dist/esm/components/checkbox-card/checkbox-card-group.js +5 -3
- package/dist/esm/components/checkbox-card/checkbox-card-group.js.map +1 -1
- package/dist/esm/components/menu/menu.js +45 -42
- package/dist/esm/components/menu/menu.js.map +1 -1
- package/dist/esm/components/native-popover/native-popover.js +26 -23
- package/dist/esm/components/native-popover/native-popover.js.map +1 -1
- package/dist/esm/components/popover/popover.js +34 -31
- package/dist/esm/components/popover/popover.js.map +1 -1
- package/dist/esm/components/radio/radio-group.js +6 -4
- package/dist/esm/components/radio/radio-group.js.map +1 -1
- package/dist/esm/components/radio-card/radio-card-group.js +5 -3
- package/dist/esm/components/radio-card/radio-card-group.js.map +1 -1
- package/dist/esm/components/toggle/toggle-group.js +6 -4
- package/dist/esm/components/toggle/toggle-group.js.map +1 -1
- package/dist/esm/components/tooltip/tooltip.js +23 -18
- package/dist/esm/components/tooltip/tooltip.js.map +1 -1
- package/dist/esm/core/components/create-component.js +31 -6
- package/dist/esm/core/components/create-component.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -2
- package/dist/types/components/accordion/use-accordion.d.ts +11 -11
- package/dist/types/components/action-bar/action-bar.d.ts +2 -2
- package/dist/types/components/airy/airy.d.ts +2 -2
- package/dist/types/components/alert/alert.d.ts +2 -2
- package/dist/types/components/alpha-slider/alpha-slider.d.ts +2 -2
- package/dist/types/components/aspect-ratio/aspect-ratio.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.style.d.ts +1 -1
- package/dist/types/components/autocomplete/use-autocomplete.d.ts +5 -5
- package/dist/types/components/avatar/avatar.d.ts +5 -5
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/avatar/use-avatar-group.d.ts +2 -2
- package/dist/types/components/badge/badge.d.ts +2 -2
- package/dist/types/components/bleed/bleed.d.ts +2 -2
- package/dist/types/components/blockquote/blockquote.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +2 -2
- package/dist/types/components/breadcrumb/use-breadcrumb.d.ts +2 -2
- package/dist/types/components/button/button.d.ts +2 -2
- package/dist/types/components/button/icon-button.d.ts +2 -2
- package/dist/types/components/calendar/calendar.d.ts +2 -2
- package/dist/types/components/calendar/calendar.style.d.ts +2 -2
- package/dist/types/components/calendar/use-calendar.d.ts +8 -8
- package/dist/types/components/card/card.d.ts +2 -2
- package/dist/types/components/carousel/carousel.d.ts +2 -2
- package/dist/types/components/carousel/carousel.style.d.ts +2 -2
- package/dist/types/components/carousel/use-carousel.d.ts +3 -3
- package/dist/types/components/center/center.d.ts +2 -2
- package/dist/types/components/chart/area-chart.d.ts +2 -2
- package/dist/types/components/chart/bar-chart.d.ts +2 -2
- package/dist/types/components/chart/chart.d.ts +5 -5
- package/dist/types/components/chart/composed-chart.d.ts +2 -2
- package/dist/types/components/chart/donut-chart.d.ts +2 -2
- package/dist/types/components/chart/pie-chart.d.ts +2 -2
- package/dist/types/components/chart/radar-chart.d.ts +2 -2
- package/dist/types/components/chart/radial-chart.d.ts +2 -2
- package/dist/types/components/chart/use-chart.d.ts +2 -2
- package/dist/types/components/checkbox/checkbox.d.ts +4 -4
- package/dist/types/components/checkbox/use-checkbox-group.d.ts +2 -2
- package/dist/types/components/checkbox-card/checkbox-card.d.ts +4 -4
- package/dist/types/components/circle-progress/circle-progress.d.ts +2 -2
- package/dist/types/components/close-button/close-button.d.ts +2 -2
- package/dist/types/components/code/code.d.ts +2 -2
- package/dist/types/components/collapse/collapse.d.ts +2 -2
- package/dist/types/components/color-picker/color-picker.d.ts +2 -2
- package/dist/types/components/color-picker/color-picker.style.d.ts +1 -1
- package/dist/types/components/color-picker/use-color-picker.d.ts +2 -2
- package/dist/types/components/color-selector/color-selector.d.ts +2 -2
- package/dist/types/components/color-selector/color-selector.style.d.ts +2 -2
- package/dist/types/components/color-selector/use-color-selector.d.ts +3 -3
- package/dist/types/components/color-swatch/color-swatch.d.ts +2 -2
- package/dist/types/components/container/container.d.ts +2 -2
- package/dist/types/components/data-list/data-list.d.ts +2 -2
- package/dist/types/components/date-picker/date-picker.d.ts +2 -2
- package/dist/types/components/date-picker/use-date-picker.d.ts +4 -4
- package/dist/types/components/drawer/drawer.d.ts +2 -2
- package/dist/types/components/drawer/drawer.style.d.ts +2 -2
- package/dist/types/components/dropzone/dropzone.d.ts +4 -4
- package/dist/types/components/editable/editable.d.ts +4 -4
- package/dist/types/components/editable/use-editable.d.ts +2 -2
- package/dist/types/components/em/em.d.ts +2 -2
- package/dist/types/components/empty-state/empty-state.d.ts +2 -2
- package/dist/types/components/fade/fade.d.ts +2 -2
- package/dist/types/components/field/field.d.ts +3 -3
- package/dist/types/components/field/use-field-props.d.ts +3 -3
- package/dist/types/components/fieldset/fieldset.d.ts +3 -3
- package/dist/types/components/file-button/file-button.d.ts +2 -2
- package/dist/types/components/file-button/use-file-button.d.ts +18 -18
- package/dist/types/components/file-input/file-input.d.ts +2 -2
- package/dist/types/components/file-input/file-input.style.d.ts +1 -1
- package/dist/types/components/file-input/use-file-input.d.ts +15 -15
- package/dist/types/components/flex/flex.d.ts +2 -2
- package/dist/types/components/flip/flip.d.ts +4 -4
- package/dist/types/components/float/float.d.ts +2 -2
- package/dist/types/components/form/form.d.ts +3 -3
- package/dist/types/components/format/format-byte.d.ts +4 -4
- package/dist/types/components/format/format-date-time.d.ts +4 -4
- package/dist/types/components/format/format-number.d.ts +2 -2
- package/dist/types/components/grid/grid-item.d.ts +2 -2
- package/dist/types/components/grid/grid.d.ts +2 -2
- package/dist/types/components/group/group.d.ts +2 -2
- package/dist/types/components/group/use-group.d.ts +2 -2
- package/dist/types/components/heading/heading.d.ts +2 -2
- package/dist/types/components/hue-slider/hue-slider.d.ts +3 -3
- package/dist/types/components/icon/icon.d.ts +5 -5
- package/dist/types/components/image/image.d.ts +2 -2
- package/dist/types/components/indicator/indicator.d.ts +4 -4
- package/dist/types/components/infinite-scroll-area/infinite-scroll-area.d.ts +2 -2
- package/dist/types/components/input/input-addon.d.ts +2 -2
- package/dist/types/components/input/input-element.d.ts +2 -2
- package/dist/types/components/input/input.d.ts +2 -2
- package/dist/types/components/kbd/kbd.d.ts +2 -2
- package/dist/types/components/link/link.d.ts +2 -2
- package/dist/types/components/link-box/link-box.d.ts +2 -2
- package/dist/types/components/list/list.d.ts +2 -2
- package/dist/types/components/loading/loading-provider.d.ts +2 -2
- package/dist/types/components/loading/loading.d.ts +3 -3
- package/dist/types/components/mark/mark.d.ts +2 -2
- package/dist/types/components/menu/menu.d.ts +2 -2
- package/dist/types/components/menu/menu.style.d.ts +2 -2
- package/dist/types/components/menu/use-menu.d.ts +11 -11
- package/dist/types/components/modal/modal.d.ts +2 -2
- package/dist/types/components/modal/modal.style.d.ts +2 -2
- package/dist/types/components/native-accordion/native-accordion.d.ts +2 -2
- package/dist/types/components/native-accordion/use-native-accordion.d.ts +2 -2
- package/dist/types/components/native-popover/native-popover.d.ts +4 -4
- package/dist/types/components/native-select/native-select.d.ts +2 -2
- package/dist/types/components/native-table/native-table.d.ts +4 -4
- package/dist/types/components/notice/notice.style.d.ts +1 -1
- package/dist/types/components/number-input/number-input.d.ts +2 -2
- package/dist/types/components/number-input/number-input.style.d.ts +1 -1
- package/dist/types/components/pagination/pagination.d.ts +2 -2
- package/dist/types/components/pagination/use-pagination.d.ts +2 -2
- package/dist/types/components/password-input/password-input.d.ts +2 -2
- package/dist/types/components/password-input/strength-meter.d.ts +2 -2
- package/dist/types/components/password-input/use-password-input.d.ts +2 -2
- package/dist/types/components/pin-input/pin-input.d.ts +2 -2
- package/dist/types/components/pin-input/use-pin-input.d.ts +7 -7
- package/dist/types/components/popover/popover.d.ts +4 -4
- package/dist/types/components/progress/progress.d.ts +4 -4
- package/dist/types/components/progress/use-progress.d.ts +706 -706
- package/dist/types/components/qr-code/qr-code.d.ts +2 -2
- package/dist/types/components/radio/radio.d.ts +4 -4
- package/dist/types/components/radio/use-radio-group.d.ts +2 -2
- package/dist/types/components/radio-card/radio-card.d.ts +4 -4
- package/dist/types/components/rating/use-rating.d.ts +7 -7
- package/dist/types/components/reorder/reorder.d.ts +2 -2
- package/dist/types/components/reorder/use-reorder.d.ts +3 -3
- package/dist/types/components/resizable/resizable.d.ts +2 -2
- package/dist/types/components/resizable/use-resizable.d.ts +2 -2
- package/dist/types/components/ripple/ripple.d.ts +2 -2
- package/dist/types/components/ripple/use-ripple.d.ts +2 -2
- package/dist/types/components/rotate/rotate.d.ts +2 -2
- package/dist/types/components/saturation-slider/saturation-slider.d.ts +2 -2
- package/dist/types/components/saturation-slider/use-saturation-slider.d.ts +2 -2
- package/dist/types/components/scroll-area/scroll-area.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.d.ts +2 -2
- package/dist/types/components/segmented-control/use-segmented-control.d.ts +9 -9
- package/dist/types/components/select/select.d.ts +2 -2
- package/dist/types/components/select/use-select.d.ts +4 -4
- package/dist/types/components/separator/separator.d.ts +2 -2
- package/dist/types/components/sidebar/sidebar.d.ts +2 -2
- package/dist/types/components/sidebar/use-sidebar.d.ts +9 -9
- package/dist/types/components/simple-grid/simple-grid.d.ts +2 -2
- package/dist/types/components/skeleton/skeleton.d.ts +2 -2
- package/dist/types/components/slide/slide.d.ts +2 -2
- package/dist/types/components/slide-fade/slide-fade.d.ts +2 -2
- package/dist/types/components/slider/slider.d.ts +2 -2
- package/dist/types/components/slider/use-slider.d.ts +2 -2
- package/dist/types/components/stack/h-stack.d.ts +2 -2
- package/dist/types/components/stack/stack.d.ts +2 -2
- package/dist/types/components/stack/v-stack.d.ts +2 -2
- package/dist/types/components/stack/z-stack.d.ts +2 -2
- package/dist/types/components/stat/stat.d.ts +2 -2
- package/dist/types/components/status/status.d.ts +2 -2
- package/dist/types/components/steps/steps.d.ts +2 -2
- package/dist/types/components/steps/use-steps.d.ts +10 -10
- package/dist/types/components/switch/switch.d.ts +2 -2
- package/dist/types/components/table/table.d.ts +2 -2
- package/dist/types/components/tabs/tabs.d.ts +2 -2
- package/dist/types/components/tabs/use-tabs.d.ts +16 -16
- package/dist/types/components/tag/tag.d.ts +2 -2
- package/dist/types/components/tag/tag.style.d.ts +1 -1
- package/dist/types/components/text/text.d.ts +2 -2
- package/dist/types/components/textarea/textarea.d.ts +2 -2
- package/dist/types/components/textarea/use-autosize.d.ts +2 -2
- package/dist/types/components/timeline/timeline.d.ts +4 -4
- package/dist/types/components/toggle/toggle.d.ts +5 -5
- package/dist/types/components/toggle/use-toggle-group.d.ts +2 -2
- package/dist/types/components/toggle/use-toggle.d.ts +2 -2
- package/dist/types/components/tooltip/tooltip.d.ts +4 -3
- package/dist/types/components/tree/tree.d.ts +2 -2
- package/dist/types/components/tree/use-tree.d.ts +182 -182
- package/dist/types/components/visually-hidden/visually-hidden.d.ts +2 -2
- package/dist/types/components/wrap/wrap.d.ts +2 -2
- package/dist/types/core/components/create-component.d.ts +19 -10
- package/dist/types/core/components/index.d.ts +2 -2
- package/dist/types/core/index.d.ts +2 -2
- package/dist/types/core/system/color-mode-provider.d.ts +2 -2
- package/dist/types/core/system/storage-script.d.ts +3 -3
- package/dist/types/core/system/styled.d.ts +2 -2
- package/dist/types/core/system/system-provider.d.ts +2 -2
- package/dist/types/hooks/use-breakpoint/use-breakpoint-state.d.ts +2 -2
- package/dist/types/hooks/use-counter/index.d.ts +2 -2
- package/dist/types/hooks/use-descendants/index.d.ts +2 -2
- package/dist/types/index.d.ts +3 -3
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +3 -3
- package/dist/types/providers/ui-provider/ui-provider.d.ts +2 -2
- package/dist/types/utils/children.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-component.cjs","names":["Fragment","styled","getDisplayName","createContext","useSystem","getClassName","name","useComponentStyle","withContext","mergeProps","chainProps","getSlotClassName","useComponentSlotStyle","style","mergeSlotCSS"],"sources":["../../../../src/core/components/create-component.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, FunctionComponent } from \"react\"\nimport type { AnyString, Dict, Merge } from \"../../utils\"\nimport type { CSSObject, CSSSlotObject } from \"../css\"\nimport type {\n ComponentSlotStyle,\n ComponentStyle,\n StyledOptions,\n System,\n WithoutThemeProps,\n} from \"../system\"\nimport type {\n As,\n DOMElement,\n HTMLStyledProps,\n Component as OriginalComponent,\n} from \"./index.types\"\nimport { Fragment } from \"react\"\nimport {\n createContext,\n cx,\n isArray,\n isFunction,\n isObject,\n isString,\n runIfFn,\n toArray,\n toCamelCase,\n toPascalCase,\n} from \"../../utils\"\nimport { styled, useSystem } from \"../system\"\nimport { chainProps, mergeProps } from \"./props\"\nimport {\n getSlotClassName,\n mergeSlotCSS,\n useComponentSlotStyle,\n useComponentStyle,\n} from \"./use-component-style\"\nimport { getClassName, getDisplayName } from \"./utils\"\n\ntype AsWithFragment = \"fragment\" | As\ntype ClassName = ((system: System) => string) | string\n\ntype Component<\n Y extends AsWithFragment = AsWithFragment,\n M extends object = {},\n> = Y extends \"fragment\"\n ? FunctionComponent<M>\n : OriginalComponent<Exclude<Y, \"fragment\">, M>\n\nexport type ComponentSlotName<\n Y extends ComponentSlotStyle | ComponentStyle = ComponentSlotStyle,\n> = AnyString | Extract<keyof NonNullable<Y[\"base\"]>, string>\n\nexport type ComponentSlot<Y extends string> =\n | [Y, Y]\n | Y\n | { name: string; slot: [Y, Y] | Y }\n\nexport type InitialProps<Y extends Dict = Dict> =\n | ((props: Y) => any)\n | Partial<Y>\nexport type SuperProps<Y extends Dict = Dict> = ((props: Y) => any) | Y\n\nexport type SuperWithoutThemeProps<\n Y extends Dict = Dict,\n M extends Dict = Dict,\n D extends keyof Y = keyof Y,\n> = ((props: WithoutThemeProps<Y, M, D>) => any) | WithoutThemeProps<Y, M, D>\n\nexport interface UseComponentPropsOptions<\n Y extends number | string | symbol = string,\n> {\n className?: ClassName\n withContext?: boolean\n transferProps?: Y[]\n}\n\nexport interface ComponentOptions extends Omit<StyledOptions, \"transferProps\"> {\n className?: ClassName\n shouldStyleProps?: boolean\n}\n\ninterface classNameOptions<Y extends string = string> {\n className?: ClassName\n slot?: ComponentSlot<Y>\n}\n\nexport interface ComponentWithContextOptions<\n Y extends number | string | symbol = string,\n>\n extends ComponentOptions, UseComponentPropsOptions<Y> {}\n\nfunction createProxyComponent<\n Y extends AsWithFragment = \"div\",\n M extends Dict = Dict,\n>(el: FC<M> | Y, { shouldStyleProps, ...options }: ComponentOptions = {}) {\n options.shouldForwardProp ??= isFunction(el)\n shouldStyleProps ??= !isFunction(el)\n\n if (el === \"fragment\") el = Fragment\n\n if (shouldStyleProps || isString(el)) {\n const ProxyComponent = styled(el as As, options)\n\n ProxyComponent.displayName = \"ProxyComponent\"\n\n return ProxyComponent\n } else {\n el.displayName ??= \"ProxyComponent\"\n\n return el as FC<M>\n }\n}\n\nfunction withDisplayName<\n Y extends AsWithFragment = AsWithFragment,\n M extends object = {},\n>(Component: FC<M>, displayName: string) {\n Object.defineProperty(Component, \"name\", { value: displayName })\n Object.defineProperty(Component, \"displayName\", { value: displayName })\n\n return Component as Component<Y, M>\n}\n\nfunction getSlotKey<Y extends string>(slot?: ComponentSlot<Y>) {\n if (!slot) return \"unknown\"\n\n if (isArray(slot) || !isObject(slot)) {\n return toCamelCase(toArray(slot).join(\"-\"))\n } else {\n return toCamelCase(slot.name)\n }\n}\n\nfunction getSlotName<Y extends string>(slot?: ComponentSlot<Y>) {\n if (!slot) return \"\"\n\n if (isArray(slot)) {\n return slot.map((value) => toPascalCase(value as string)).join(\"\")\n } else if (isObject(slot)) {\n return toPascalCase(slot.name)\n } else {\n return toPascalCase(slot as string)\n }\n}\n\nexport function createComponent<\n Y extends object = {},\n M extends ComponentStyle = Dict,\n D extends Dict = Dict,\n>(name: string, style?: M) {\n const defaultClassName = style?.className\n const defaultDisplayName = getDisplayName(name)\n const [ComponentContext, useComponentContext] = createContext<D>({\n name: `${defaultDisplayName}Context`,\n })\n const [PropsContext, usePropsContext] = createContext<Partial<Y>>({\n name: `${defaultDisplayName}PropsContext`,\n strict: false,\n })\n\n function useClassName(name?: string, className?: ClassName) {\n const system = useSystem()\n\n className = runIfFn(className, system)\n className ??= getClassName(name, defaultClassName)(system)\n\n return className\n }\n\n function useComponentProps<H extends Y = Y, R extends keyof H = keyof H>(\n props: H,\n {\n className,\n withContext = true,\n transferProps,\n }: UseComponentPropsOptions<R> = {},\n ) {\n const system = useSystem()\n\n className = runIfFn(className, system)\n className ??= defaultClassName\n className ??= getClassName(name)(system)\n\n const contextProps = usePropsContext() ?? {}\n const mergedProps = withContext\n ? (mergeProps(contextProps, props)() as H)\n : props\n const [, rest] = useComponentStyle(mergedProps, {\n name,\n className,\n style,\n transferProps,\n })\n\n return rest\n }\n\n function component<D extends AsWithFragment = \"div\", H extends Dict = Y>(\n el: D | FC<H>,\n { name, className, ...options }: ComponentOptions = {},\n ) {\n const displayName = getDisplayName(name, defaultDisplayName)\n const ProxyComponent = createProxyComponent(el, options)\n\n return function (\n initialProps?: InitialProps<H>,\n ...superProps: SuperProps<H>[]\n ) {\n return withDisplayName<D, H>((props) => {\n className = useClassName(name, className)\n\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = chainProps<any>(...superProps)()(computedProps)\n\n return (\n <ProxyComponent\n {...mergedProps}\n className={cx(className, mergedProps.className)}\n />\n )\n }, displayName)\n }\n }\n\n function withContext<\n D extends AsWithFragment = \"div\",\n H extends Y = Y,\n R extends keyof H = keyof H,\n >(\n el: D | FC<WithoutThemeProps<H, M, R>>,\n {\n name,\n className,\n withContext,\n transferProps,\n ...options\n }: ComponentWithContextOptions<R> = {},\n ) {\n const displayName = getDisplayName(name, defaultDisplayName)\n const ProxyComponent = createProxyComponent(el, options)\n\n return function (\n initialProps?: InitialProps<H>,\n ...superProps: SuperWithoutThemeProps<H, M, R>[]\n ) {\n return withDisplayName<D, H>((props) => {\n className = useClassName(name, className)\n\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = useComponentProps(computedProps, {\n className,\n withContext,\n transferProps,\n })\n const rest = chainProps<any>(...toArray(superProps))()(mergedProps)\n\n return <ProxyComponent {...rest} />\n }, displayName)\n }\n }\n\n return {\n component,\n ComponentContext,\n PropsContext,\n useComponentContext,\n usePropsContext,\n withContext,\n useComponentProps,\n }\n}\n\nexport function createSlotComponent<\n Y extends object = {},\n M extends ComponentSlotStyle = Dict,\n D extends Dict = Dict,\n>(rootName: string, style?: M) {\n const rootClassName = style?.className\n const rootDisplayName = getDisplayName(rootName)\n const classNameMap = new Map<string, classNameOptions>()\n const [StyleContext, useStyleContext] = createContext<\n CSSSlotObject<ComponentSlotName<M>>\n >({\n name: `${rootDisplayName}StyleContext`,\n })\n const [ComponentContext, useComponentContext] = createContext<D>({\n name: `${rootDisplayName}Context`,\n })\n const [PropsContext, usePropsContext] = createContext<Partial<Y>>({\n name: `${rootDisplayName}PropsContext`,\n strict: false,\n })\n\n function useClassName(\n slot?: ComponentSlot<ComponentSlotName<M>>,\n className?: ClassName,\n ) {\n const system = useSystem()\n\n className = runIfFn(className, system)\n className ??= getSlotClassName(\n rootClassName ?? getClassName(rootName)(system),\n slot,\n )\n\n return className\n }\n\n function useClassNames() {\n const system = useSystem()\n const entries = classNameMap.entries().map(([key, { className, slot }]) => {\n className = runIfFn(className, system)\n className ??= getSlotClassName(\n rootClassName ?? getClassName(rootName)(system),\n slot,\n )\n\n return [key, className]\n })\n\n return Object.fromEntries(\n entries.filter(([_, className]) => className),\n ) as { [key: string]: string }\n }\n\n function useRootComponentProps<\n Y extends Dict = {},\n R extends keyof Y = keyof Y,\n >(\n props: Y,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n {\n className,\n withContext = true,\n transferProps,\n }: UseComponentPropsOptions<R> = {},\n ): [\n CSSSlotObject,\n Merge<WithoutThemeProps<Y, M, R>, { css?: CSSObject | CSSObject[] }>,\n ] {\n className = useClassName(slot, className)\n\n const contextProps = usePropsContext() ?? {}\n const mergedProps = withContext\n ? (mergeProps(contextProps, props)() as Y)\n : props\n const [css, rest] = useComponentSlotStyle(mergedProps, {\n name: rootName,\n className,\n style,\n slot,\n transferProps,\n })\n\n return [css, rest]\n }\n\n function useSlotComponentProps<Y extends Dict = {}>(\n props: Y,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n { className }: Omit<UseComponentPropsOptions, \"transferProps\"> = {},\n ) {\n className = useClassName(slot, className)\n\n const style = useStyleContext()\n\n return {\n ...props,\n className: cx(className, props.className),\n css: mergeSlotCSS(slot, style, props.css),\n }\n }\n\n function component<H extends AsWithFragment = \"div\", R extends Dict = Dict>(\n el: FC<R> | H,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n { name, className, ...options }: ComponentOptions = {},\n ) {\n const ProxyComponent = createProxyComponent(el, options)\n const slotKey = getSlotKey(slot)\n const slotName = getSlotName(slot)\n const displayName = getDisplayName(name, `${rootDisplayName}${slotName}`)\n\n classNameMap.set(slotKey, { className, slot })\n\n return function (\n initialProps?: InitialProps<R>,\n ...superProps: SuperProps<R>[]\n ) {\n return withDisplayName<H, R>((props) => {\n className = useClassName(slot, className)\n\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = chainProps(...superProps)()(computedProps)\n\n return (\n <ProxyComponent\n {...mergedProps}\n className={cx(className, mergedProps.className)}\n />\n )\n }, displayName)\n }\n }\n\n function withProvider<\n H extends AsWithFragment = \"div\",\n R extends Y = Y,\n T extends keyof R = keyof R,\n >(\n el: FC<WithoutThemeProps<R, M, T>> | H,\n slot: ComponentSlot<ComponentSlotName<M>> = \"root\" as ComponentSlot<\n ComponentSlotName<M>\n >,\n {\n name,\n className,\n withContext,\n transferProps,\n ...options\n }: ComponentWithContextOptions<T> = {},\n ) {\n const ProxyComponent = createProxyComponent(el, options)\n const slotKey = getSlotKey(slot)\n const slotName = getSlotName(slot)\n const displayName = getDisplayName(name, `${rootDisplayName}${slotName}`)\n\n classNameMap.set(slotKey, { className, slot })\n\n return function (\n initialProps?: InitialProps<R>,\n ...superProps: SuperWithoutThemeProps<R, M, T>[]\n ) {\n return withDisplayName<H, R>((props) => {\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const [context, mergedProps] = useRootComponentProps(\n computedProps,\n slot,\n {\n className,\n withContext,\n transferProps,\n },\n )\n const rest = chainProps<any>(...superProps)()(mergedProps)\n\n return (\n <StyleContext value={context}>\n <ProxyComponent {...rest} />\n </StyleContext>\n )\n }, displayName)\n }\n }\n\n function withContext<\n H extends AsWithFragment = \"div\",\n R extends Dict = H extends DOMElement ? HTMLStyledProps<H> : Dict,\n >(\n el: FC<R> | H,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n {\n name,\n className,\n withContext,\n ...options\n }: Omit<ComponentWithContextOptions, \"transferProps\"> = {},\n ) {\n const ProxyComponent = createProxyComponent(el, options)\n const slotKey = getSlotKey(slot)\n const slotName = getSlotName(slot)\n const displayName = getDisplayName(name, `${rootDisplayName}${slotName}`)\n\n classNameMap.set(slotKey, { className, slot })\n\n return function (\n initialProps?: InitialProps<R>,\n ...superProps: SuperProps<R>[]\n ) {\n return withDisplayName<H, R>((props) => {\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = useSlotComponentProps(computedProps, slot, {\n className,\n withContext,\n })\n const rest = chainProps(...superProps)()(mergedProps)\n\n return <ProxyComponent {...rest} />\n }, displayName)\n }\n }\n\n return {\n component,\n ComponentContext,\n PropsContext,\n StyleContext,\n useClassNames,\n useComponentContext,\n usePropsContext,\n useStyleContext,\n withContext,\n withProvider,\n useRootComponentProps,\n useSlotComponentProps,\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create-component.cjs","names":["Fragment","styled","getDisplayName","createContext","useSystem","getClassName","name","useComponentStyle","withContext","mergeProps","chainProps","getSlotClassName","useComponentSlotStyle","style","mergeSlotCSS"],"sources":["../../../../src/core/components/create-component.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, FunctionComponent } from \"react\"\nimport type { AnyString, Dict, Merge } from \"../../utils\"\nimport type { CSSObject, CSSSlotObject } from \"../css\"\nimport type {\n ComponentSlotStyle,\n ComponentStyle,\n StyledOptions,\n System,\n WithoutThemeProps,\n} from \"../system\"\nimport type {\n As,\n DOMElement,\n HTMLStyledProps,\n Component as OriginalComponent,\n} from \"./index.types\"\nimport { Fragment } from \"react\"\nimport {\n createContext,\n cx,\n isArray,\n isFunction,\n isObject,\n isString,\n runIfFn,\n toArray,\n toCamelCase,\n toPascalCase,\n} from \"../../utils\"\nimport { styled, useSystem } from \"../system\"\nimport { chainProps, mergeProps } from \"./props\"\nimport {\n getSlotClassName,\n mergeSlotCSS,\n useComponentSlotStyle,\n useComponentStyle,\n} from \"./use-component-style\"\nimport { getClassName, getDisplayName } from \"./utils\"\n\nexport interface HydrationContext {\n suppressHydrationWarning?: boolean\n}\n\ntype AsWithFragment = \"fragment\" | As\ntype ClassName = ((system: System) => string) | string\n\ntype Component<\n Y extends AsWithFragment = AsWithFragment,\n M extends object = {},\n> = Y extends \"fragment\"\n ? FunctionComponent<M>\n : OriginalComponent<Exclude<Y, \"fragment\">, M>\n\nexport type ComponentSlotName<\n Y extends ComponentSlotStyle | ComponentStyle = ComponentSlotStyle,\n> = AnyString | Extract<keyof NonNullable<Y[\"base\"]>, string>\n\nexport type ComponentSlot<Y extends string> =\n | [Y, Y]\n | Y\n | { name: string; slot: [Y, Y] | Y }\n\nexport type InitialProps<Y extends Dict = Dict> =\n | ((props: Y) => any)\n | Partial<Y>\nexport type SuperProps<Y extends Dict = Dict> = ((props: Y) => any) | Y\n\nexport type SuperWithoutThemeProps<\n Y extends Dict = Dict,\n M extends Dict = Dict,\n D extends keyof Y = keyof Y,\n> = ((props: WithoutThemeProps<Y, M, D>) => any) | WithoutThemeProps<Y, M, D>\n\nexport interface UseComponentPropsOptions<\n Y extends number | string | symbol = string,\n> {\n className?: ClassName\n withContext?: boolean\n transferProps?: Y[]\n}\n\nexport interface ComponentOptions extends Omit<StyledOptions, \"transferProps\"> {\n className?: ClassName\n shouldStyleProps?: boolean\n}\n\ninterface classNameOptions<Y extends string = string> {\n className?: ClassName\n slot?: ComponentSlot<Y>\n}\n\nexport interface ComponentWithContextOptions<\n Y extends number | string | symbol = string,\n>\n extends ComponentOptions, UseComponentPropsOptions<Y> {}\n\nfunction createProxyComponent<\n Y extends AsWithFragment = \"div\",\n M extends Dict = Dict,\n>(el: FC<M> | Y, { shouldStyleProps, ...options }: ComponentOptions = {}) {\n options.shouldForwardProp ??= isFunction(el)\n shouldStyleProps ??= !isFunction(el)\n\n if (el === \"fragment\") el = Fragment\n\n if (shouldStyleProps || isString(el)) {\n const ProxyComponent = styled(el as As, options)\n\n ProxyComponent.displayName = \"ProxyComponent\"\n\n return ProxyComponent\n } else {\n el.displayName ??= \"ProxyComponent\"\n\n return el as FC<M>\n }\n}\n\nfunction withDisplayName<\n Y extends AsWithFragment = AsWithFragment,\n M extends object = {},\n>(Component: FC<M>, displayName: string) {\n Object.defineProperty(Component, \"name\", { value: displayName })\n Object.defineProperty(Component, \"displayName\", { value: displayName })\n\n return Component as Component<Y, M>\n}\n\nfunction getSlotKey<Y extends string>(slot?: ComponentSlot<Y>) {\n if (!slot) return \"unknown\"\n\n if (isArray(slot) || !isObject(slot)) {\n return toCamelCase(toArray(slot).join(\"-\"))\n } else {\n return toCamelCase(slot.name)\n }\n}\n\nfunction getSlotName<Y extends string>(slot?: ComponentSlot<Y>) {\n if (!slot) return \"\"\n\n if (isArray(slot)) {\n return slot.map((value) => toPascalCase(value as string)).join(\"\")\n } else if (isObject(slot)) {\n return toPascalCase(slot.name)\n } else {\n return toPascalCase(slot as string)\n }\n}\n\nexport function createComponent<\n Y extends Dict = {},\n M extends ComponentStyle = Dict,\n D extends Dict = Dict,\n>(name: string, style?: M) {\n const defaultClassName = style?.className\n const defaultDisplayName = getDisplayName(name)\n const [ComponentContext, useComponentContext] = createContext<D>({\n name: `${defaultDisplayName}Context`,\n })\n const [PropsContext, usePropsContext] = createContext<Partial<Y>>({\n name: `${defaultDisplayName}PropsContext`,\n strict: false,\n })\n const [HydrationContext, useHydrationContext] =\n createContext<HydrationContext>({\n name: `${defaultDisplayName}HydrationContext`,\n strict: false,\n })\n\n function useClassName(name?: string, className?: ClassName) {\n const system = useSystem()\n\n className = runIfFn(className, system)\n className ??= getClassName(name, defaultClassName)(system)\n\n return className\n }\n\n function useComponentProps<H extends Y = Y, R extends keyof H = keyof H>(\n props: H,\n {\n className,\n withContext = true,\n transferProps,\n }: UseComponentPropsOptions<R> = {},\n ) {\n const system = useSystem()\n\n className = runIfFn(className, system)\n className ??= defaultClassName\n className ??= getClassName(name)(system)\n\n const contextProps = usePropsContext() ?? {}\n const mergedProps = withContext\n ? (mergeProps(contextProps, props)() as H)\n : props\n const [, rest] = useComponentStyle(mergedProps, {\n name,\n className,\n style,\n transferProps,\n })\n\n return rest\n }\n\n function component<D extends AsWithFragment = \"div\", H extends Dict = Y>(\n el: D | FC<H>,\n { name, className, ...options }: ComponentOptions = {},\n ) {\n const displayName = getDisplayName(name, defaultDisplayName)\n const ProxyComponent = createProxyComponent(el, options)\n\n return function (\n initialProps?: InitialProps<H>,\n ...superProps: SuperProps<H>[]\n ) {\n return withDisplayName<D, H>((props) => {\n className = useClassName(name, className)\n\n const hydrationProps = useHydrationContext()\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = chainProps<any>(...superProps)()(computedProps)\n\n return (\n <ProxyComponent\n {...hydrationProps}\n {...mergedProps}\n className={cx(className, mergedProps.className)}\n />\n )\n }, displayName)\n }\n }\n\n function withContext<\n D extends AsWithFragment = \"div\",\n H extends Y = Y,\n R extends keyof H = keyof H,\n >(\n el: D | FC<WithoutThemeProps<H, M, R>>,\n {\n name,\n className,\n withContext,\n transferProps,\n ...options\n }: ComponentWithContextOptions<R> = {},\n ) {\n const displayName = getDisplayName(name, defaultDisplayName)\n const ProxyComponent = createProxyComponent(el, options)\n\n return function (\n initialProps?: InitialProps<H>,\n ...superProps: SuperWithoutThemeProps<H, M, R>[]\n ) {\n return withDisplayName<D, H>((props) => {\n className = useClassName(name, className)\n\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = useComponentProps(computedProps, {\n className,\n withContext,\n transferProps,\n })\n const rest = chainProps<any>(...toArray(superProps))()(mergedProps)\n const hydrationContext = rest.suppressHydrationWarning\n ? { suppressHydrationWarning: true }\n : {}\n\n return (\n <HydrationContext value={hydrationContext}>\n <ProxyComponent {...rest} />\n </HydrationContext>\n )\n }, displayName)\n }\n }\n\n return {\n component,\n ComponentContext,\n HydrationContext,\n PropsContext,\n useComponentContext,\n useHydrationContext,\n usePropsContext,\n withContext,\n useComponentProps,\n }\n}\n\nexport function createSlotComponent<\n Y extends object = {},\n M extends ComponentSlotStyle = Dict,\n D extends Dict = Dict,\n>(rootName: string, style?: M) {\n const rootClassName = style?.className\n const rootDisplayName = getDisplayName(rootName)\n const classNameMap = new Map<string, classNameOptions>()\n const [StyleContext, useStyleContext] = createContext<\n CSSSlotObject<ComponentSlotName<M>>\n >({\n name: `${rootDisplayName}StyleContext`,\n })\n const [ComponentContext, useComponentContext] = createContext<D>({\n name: `${rootDisplayName}Context`,\n })\n const [PropsContext, usePropsContext] = createContext<Partial<Y>>({\n name: `${rootDisplayName}PropsContext`,\n strict: false,\n })\n const [HydrationContext, useHydrationContext] =\n createContext<HydrationContext>({\n name: `${rootDisplayName}HydrationContext`,\n strict: false,\n })\n\n function useClassName(\n slot?: ComponentSlot<ComponentSlotName<M>>,\n className?: ClassName,\n ) {\n const system = useSystem()\n\n className = runIfFn(className, system)\n className ??= getSlotClassName(\n rootClassName ?? getClassName(rootName)(system),\n slot,\n )\n\n return className\n }\n\n function useClassNames() {\n const system = useSystem()\n const entries = classNameMap.entries().map(([key, { className, slot }]) => {\n className = runIfFn(className, system)\n className ??= getSlotClassName(\n rootClassName ?? getClassName(rootName)(system),\n slot,\n )\n\n return [key, className]\n })\n\n return Object.fromEntries(\n entries.filter(([_, className]) => className),\n ) as { [key: string]: string }\n }\n\n function useRootComponentProps<\n Y extends Dict = {},\n R extends keyof Y = keyof Y,\n >(\n props: Y,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n {\n className,\n withContext = true,\n transferProps,\n }: UseComponentPropsOptions<R> = {},\n ): [\n CSSSlotObject,\n Merge<WithoutThemeProps<Y, M, R>, { css?: CSSObject | CSSObject[] }>,\n ] {\n className = useClassName(slot, className)\n\n const contextProps = usePropsContext() ?? {}\n const mergedProps = withContext\n ? (mergeProps(contextProps, props)() as Y)\n : props\n const [styleContext, rest] = useComponentSlotStyle(mergedProps, {\n name: rootName,\n className,\n style,\n slot,\n transferProps,\n })\n\n return [styleContext, rest]\n }\n\n function useSlotComponentProps<Y extends Dict = {}>(\n props: Y,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n { className }: Omit<UseComponentPropsOptions, \"transferProps\"> = {},\n ) {\n className = useClassName(slot, className)\n\n const style = useStyleContext()\n const hydrationProps = useHydrationContext()\n\n return {\n ...hydrationProps,\n ...props,\n className: cx(className, props.className),\n css: mergeSlotCSS(slot, style, props.css),\n }\n }\n\n function component<H extends AsWithFragment = \"div\", R extends Dict = Dict>(\n el: FC<R> | H,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n { name, className, ...options }: ComponentOptions = {},\n ) {\n const ProxyComponent = createProxyComponent(el, options)\n const slotKey = getSlotKey(slot)\n const slotName = getSlotName(slot)\n const displayName = getDisplayName(name, `${rootDisplayName}${slotName}`)\n\n classNameMap.set(slotKey, { className, slot })\n\n return function (\n initialProps?: InitialProps<R>,\n ...superProps: SuperProps<R>[]\n ) {\n return withDisplayName<H, R>((props) => {\n className = useClassName(slot, className)\n\n const hydrationProps = useHydrationContext()\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = chainProps(...superProps)()(computedProps)\n\n return (\n <ProxyComponent\n {...hydrationProps}\n {...mergedProps}\n className={cx(className, mergedProps.className)}\n />\n )\n }, displayName)\n }\n }\n\n function withProvider<\n H extends AsWithFragment = \"div\",\n R extends Y = Y,\n T extends keyof R = keyof R,\n >(\n el: FC<WithoutThemeProps<R, M, T>> | H,\n slot: ComponentSlot<ComponentSlotName<M>> = \"root\" as ComponentSlot<\n ComponentSlotName<M>\n >,\n {\n name,\n className,\n withContext,\n transferProps,\n ...options\n }: ComponentWithContextOptions<T> = {},\n ) {\n const ProxyComponent = createProxyComponent(el, options)\n const slotKey = getSlotKey(slot)\n const slotName = getSlotName(slot)\n const displayName = getDisplayName(name, `${rootDisplayName}${slotName}`)\n\n classNameMap.set(slotKey, { className, slot })\n\n return function (\n initialProps?: InitialProps<R>,\n ...superProps: SuperWithoutThemeProps<R, M, T>[]\n ) {\n return withDisplayName<H, R>((props) => {\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const [styleContext, mergedProps] = useRootComponentProps(\n computedProps,\n slot,\n {\n className,\n withContext,\n transferProps,\n },\n )\n const rest = chainProps<any>(...superProps)()(mergedProps)\n const hydrationContext = rest.suppressHydrationWarning\n ? { suppressHydrationWarning: true }\n : {}\n\n return (\n <StyleContext value={styleContext}>\n <HydrationContext value={hydrationContext}>\n <ProxyComponent {...rest} />\n </HydrationContext>\n </StyleContext>\n )\n }, displayName)\n }\n }\n\n function withContext<\n H extends AsWithFragment = \"div\",\n R extends Dict = H extends DOMElement ? HTMLStyledProps<H> : Dict,\n >(\n el: FC<R> | H,\n slot?: ComponentSlot<ComponentSlotName<M>>,\n {\n name,\n className,\n withContext,\n ...options\n }: Omit<ComponentWithContextOptions, \"transferProps\"> = {},\n ) {\n const ProxyComponent = createProxyComponent(el, options)\n const slotKey = getSlotKey(slot)\n const slotName = getSlotName(slot)\n const displayName = getDisplayName(name, `${rootDisplayName}${slotName}`)\n\n classNameMap.set(slotKey, { className, slot })\n\n return function (\n initialProps?: InitialProps<R>,\n ...superProps: SuperProps<R>[]\n ) {\n return withDisplayName<H, R>((props) => {\n const computedProps = isFunction(initialProps)\n ? initialProps(props)\n : mergeProps(initialProps ?? {}, props)()\n const mergedProps = useSlotComponentProps(computedProps, slot, {\n className,\n withContext,\n })\n const rest = chainProps(...superProps)()(mergedProps)\n\n return <ProxyComponent {...rest} />\n }, displayName)\n }\n }\n\n return {\n component,\n ComponentContext,\n HydrationContext,\n PropsContext,\n StyleContext,\n useClassNames,\n useComponentContext,\n useHydrationContext,\n usePropsContext,\n useStyleContext,\n withContext,\n withProvider,\n useRootComponentProps,\n useSlotComponentProps,\n }\n}\n"],"mappings":"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"}
|
|
@@ -101,7 +101,7 @@ const AccordionItem = withContext(({ button, children, icon, ...rest }) => {
|
|
|
101
101
|
})
|
|
102
102
|
});
|
|
103
103
|
}, "item")();
|
|
104
|
-
const AccordionButton = withContext(({ children, icon: customIcon, containerProps, ...rest }) => {
|
|
104
|
+
const AccordionButton = withContext(({ children, icon: customIcon, suppressHydrationWarning, containerProps, ...rest }) => {
|
|
105
105
|
const { icon: rootIcon } = useComponentContext();
|
|
106
106
|
const { icon: itemIcon } = useItemComponentContext();
|
|
107
107
|
const { disabled, open, getButtonProps } = useAccordionItemContext();
|
|
@@ -110,9 +110,13 @@ const AccordionButton = withContext(({ children, icon: customIcon, containerProp
|
|
|
110
110
|
expanded: open
|
|
111
111
|
};
|
|
112
112
|
return /* @__PURE__ */ jsx(styled.h3, {
|
|
113
|
+
suppressHydrationWarning,
|
|
113
114
|
...containerProps,
|
|
114
115
|
children: /* @__PURE__ */ jsxs(styled.button, {
|
|
115
|
-
...getButtonProps(
|
|
116
|
+
...getButtonProps({
|
|
117
|
+
suppressHydrationWarning,
|
|
118
|
+
...rest
|
|
119
|
+
}),
|
|
116
120
|
children: [children, /* @__PURE__ */ jsx(AccordionIcon, { children: (0, utils_exports.runIfFn)(customIcon, props) ?? (0, utils_exports.runIfFn)(itemIcon, props) ?? (0, utils_exports.runIfFn)(rootIcon, props) })]
|
|
117
121
|
})
|
|
118
122
|
});
|
|
@@ -127,7 +131,7 @@ const AccordionIcon = withContext(({ children = /* @__PURE__ */ jsx(ChevronDownI
|
|
|
127
131
|
}));
|
|
128
132
|
return Children.count(children) > 1 ? Children.only(null) : null;
|
|
129
133
|
}, "icon")();
|
|
130
|
-
const AccordionPanel = withContext(({ animationOpacity, children, delay, duration, endingHeight, startingHeight, transition, transitionEnd, unmountOnExit, ...rest }) => {
|
|
134
|
+
const AccordionPanel = withContext(({ animationOpacity, children, delay, duration, endingHeight, startingHeight, suppressHydrationWarning, transition, transitionEnd, unmountOnExit, ...rest }) => {
|
|
131
135
|
const { open, getPanelProps } = useAccordionItemContext();
|
|
132
136
|
return /* @__PURE__ */ jsx(Collapse, {
|
|
133
137
|
animationOpacity,
|
|
@@ -140,8 +144,14 @@ const AccordionPanel = withContext(({ animationOpacity, children, delay, duratio
|
|
|
140
144
|
transitionEnd,
|
|
141
145
|
unmountOnExit,
|
|
142
146
|
children: /* @__PURE__ */ jsx(styled.div, {
|
|
143
|
-
...getPanelProps(
|
|
144
|
-
|
|
147
|
+
...getPanelProps({
|
|
148
|
+
suppressHydrationWarning,
|
|
149
|
+
...rest
|
|
150
|
+
}),
|
|
151
|
+
children: (0, utils_exports.isString)(children) ? /* @__PURE__ */ jsx(styled.p, {
|
|
152
|
+
suppressHydrationWarning,
|
|
153
|
+
children
|
|
154
|
+
}) : children
|
|
145
155
|
})
|
|
146
156
|
});
|
|
147
157
|
}, "panel")();
|
|
@@ -1 +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 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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"}
|
|
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 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 ({\n children,\n icon: customIcon,\n suppressHydrationWarning,\n containerProps,\n ...rest\n }) => {\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\n suppressHydrationWarning={suppressHydrationWarning}\n {...containerProps}\n >\n <styled.button\n {...getButtonProps({ suppressHydrationWarning, ...rest })}\n >\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 suppressHydrationWarning,\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({ suppressHydrationWarning, ...rest })}>\n {isString(children) ? (\n <styled.p suppressHydrationWarning={suppressHydrationWarning}>\n {children}\n </styled.p>\n ) : (\n children\n )}\n </styled.div>\n </Collapse>\n )\n },\n \"panel\",\n)()\n"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
14
14
|
* @see https://yamada-ui.com/docs/components/avatar
|
|
15
15
|
*/
|
|
16
16
|
const AvatarGroupRoot = component((props) => {
|
|
17
|
-
const [, { colorScheme, size, variant, shape, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
17
|
+
const [, { colorScheme, size, variant, shape, suppressHydrationWarning, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
18
18
|
"variant",
|
|
19
19
|
"colorScheme",
|
|
20
20
|
"size",
|
|
@@ -26,14 +26,17 @@ const AvatarGroupRoot = component((props) => {
|
|
|
26
26
|
colorScheme,
|
|
27
27
|
size,
|
|
28
28
|
variant,
|
|
29
|
-
shape
|
|
29
|
+
shape,
|
|
30
|
+
suppressHydrationWarning
|
|
30
31
|
}), [
|
|
31
32
|
variant,
|
|
32
33
|
size,
|
|
33
34
|
colorScheme,
|
|
34
|
-
shape
|
|
35
|
+
shape,
|
|
36
|
+
suppressHydrationWarning
|
|
35
37
|
]),
|
|
36
38
|
children: /* @__PURE__ */ jsxs(styled.div, {
|
|
39
|
+
suppressHydrationWarning,
|
|
37
40
|
...getRootProps(),
|
|
38
41
|
children: [excess > 0 ? /* @__PURE__ */ jsx(Avatar, { fallback: `+${excess}` }) : null, children]
|
|
39
42
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar-group.js","names":[],"sources":["../../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { AvatarStyle } from \"./avatar.style\"\nimport type { UseAvatarGroupProps } from \"./use-avatar-group\"\nimport { useMemo } from \"react\"\nimport { styled } from \"../../core\"\nimport {\n Avatar,\n AvatarPropsContext,\n component,\n useRootComponentProps,\n} from \"./avatar\"\nimport { useAvatarGroup } from \"./use-avatar-group\"\n\nexport interface AvatarGroupRootProps\n extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarGroupProps {}\n\n/**\n * `Avatar` is a component that displays a profile picture or an icon with initials representing a user.\n *\n * @see https://yamada-ui.com/docs/components/avatar\n */\nexport const AvatarGroupRoot = component<\"div\", AvatarGroupRootProps>(\n (props) => {\n const [
|
|
1
|
+
{"version":3,"file":"avatar-group.js","names":[],"sources":["../../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { AvatarStyle } from \"./avatar.style\"\nimport type { UseAvatarGroupProps } from \"./use-avatar-group\"\nimport { useMemo } from \"react\"\nimport { styled } from \"../../core\"\nimport {\n Avatar,\n AvatarPropsContext,\n component,\n useRootComponentProps,\n} from \"./avatar\"\nimport { useAvatarGroup } from \"./use-avatar-group\"\n\nexport interface AvatarGroupRootProps\n extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarGroupProps {}\n\n/**\n * `Avatar` is a component that displays a profile picture or an icon with initials representing a user.\n *\n * @see https://yamada-ui.com/docs/components/avatar\n */\nexport const AvatarGroupRoot = component<\"div\", AvatarGroupRootProps>(\n (props) => {\n const [\n ,\n { colorScheme, size, variant, shape, suppressHydrationWarning, ...rest },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n })\n const { children, excess, getRootProps } = useAvatarGroup(rest)\n const context = useMemo(\n () => ({\n colorScheme,\n size,\n variant,\n shape,\n suppressHydrationWarning,\n }),\n [variant, size, colorScheme, shape, suppressHydrationWarning],\n )\n\n return (\n <AvatarPropsContext value={context}>\n <styled.div\n suppressHydrationWarning={suppressHydrationWarning}\n {...getRootProps()}\n >\n {excess > 0 ? <Avatar fallback={`+${excess}`} /> : null}\n {children}\n </styled.div>\n </AvatarPropsContext>\n )\n },\n \"group\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,kBAAkB,WAC5B,UAAU;CACT,MAAM,GAEJ,EAAE,aAAa,MAAM,SAAS,OAAO,0BAA0B,GAAG,UAChE,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;EAAQ,EAC3D,CAAC;CACF,MAAM,EAAE,UAAU,QAAQ,iBAAiB,eAAe,KAAK;AAY/D,QACE,oBAAC;EAAmB,OAZN,eACP;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GAAC;GAAS;GAAM;GAAa;GAAO;GAAyB,CAC9D;YAIG,qBAAC,OAAO;GACoB;GAC1B,GAAI,cAAc;cAEjB,SAAS,IAAI,oBAAC,UAAO,UAAU,IAAI,WAAY,GAAG,MAClD;IACU;GACM;GAGzB,QACD,EAAE"}
|
|
@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
14
14
|
* @see https://yamada-ui.com/docs/components/checkbox
|
|
15
15
|
*/
|
|
16
16
|
const CheckboxGroupRoot = component((props) => {
|
|
17
|
-
const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], readOnly, shape, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
17
|
+
const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], readOnly, shape, suppressHydrationWarning, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
18
18
|
"variant",
|
|
19
19
|
"colorScheme",
|
|
20
20
|
"size",
|
|
@@ -40,7 +40,8 @@ const CheckboxGroupRoot = component((props) => {
|
|
|
40
40
|
focusBorderColor,
|
|
41
41
|
invalid,
|
|
42
42
|
readOnly,
|
|
43
|
-
shape
|
|
43
|
+
shape,
|
|
44
|
+
suppressHydrationWarning
|
|
44
45
|
}), [
|
|
45
46
|
variant,
|
|
46
47
|
size,
|
|
@@ -51,7 +52,8 @@ const CheckboxGroupRoot = component((props) => {
|
|
|
51
52
|
readOnly,
|
|
52
53
|
errorBorderColor,
|
|
53
54
|
focusBorderColor,
|
|
54
|
-
checkedIcon
|
|
55
|
+
checkedIcon,
|
|
56
|
+
suppressHydrationWarning
|
|
55
57
|
]),
|
|
56
58
|
children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
|
|
57
59
|
value: useMemo(() => ({
|
|
@@ -69,7 +71,7 @@ const CheckboxGroupRoot = component((props) => {
|
|
|
69
71
|
]),
|
|
70
72
|
children: /* @__PURE__ */ jsx(Group, {
|
|
71
73
|
orientation: "vertical",
|
|
72
|
-
...getRootProps(),
|
|
74
|
+
...getRootProps({ suppressHydrationWarning }),
|
|
73
75
|
children: computedChildren
|
|
74
76
|
})
|
|
75
77
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxGroupProps } from \"./use-checkbox-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n Checkbox,\n CheckboxPropsContext,\n component,\n useRootComponentProps,\n} from \"./checkbox\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"./use-checkbox-group\"\n\nexport interface CheckboxGroupItem<\n Y extends string = string,\n> extends CheckboxProps<Y> {\n label: ReactNode\n}\n\nexport interface CheckboxGroupRootProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, CheckboxStyle>,\n \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<CheckboxStyle>,\n UseCheckboxGroupProps<Y>,\n UseInputBorderProps,\n Pick<CheckboxProps, \"checkedIcon\"> {\n /**\n * If provided, generate options based on items.\n *\n * @default []\n */\n items?: CheckboxGroupItem<Y>[]\n}\n\n/**\n * `CheckboxGroup` is a component that groups `Checkbox` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const CheckboxGroupRoot = component<\"div\", CheckboxGroupRootProps>(\n (props) => {\n const [\n ,\n {\n colorScheme,\n size,\n variant,\n checkedIcon,\n children,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n items = [],\n readOnly,\n shape,\n ...rest\n },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n })\n const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n useCheckboxGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(({ label, value, ...rest }, index) => (\n <Checkbox key={value ?? index} value={value} {...rest}>\n {label}\n </Checkbox>\n ))\n }, [items, children])\n const context = useMemo(\n () => ({\n colorScheme,\n size,\n variant,\n checkedIcon,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n readOnly,\n shape,\n }),\n [\n variant,\n size,\n colorScheme,\n shape,\n disabled,\n invalid,\n readOnly,\n errorBorderColor,\n focusBorderColor,\n checkedIcon,\n ],\n )\n const groupContext = useMemo(\n () => ({ max, value, getInputProps, getLabelProps, onChange }),\n [max, value, getInputProps, getLabelProps, onChange],\n )\n\n return (\n <CheckboxPropsContext value={context}>\n <CheckboxGroupContext value={groupContext}>\n <Group
|
|
1
|
+
{"version":3,"file":"checkbox-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxGroupProps } from \"./use-checkbox-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n Checkbox,\n CheckboxPropsContext,\n component,\n useRootComponentProps,\n} from \"./checkbox\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"./use-checkbox-group\"\n\nexport interface CheckboxGroupItem<\n Y extends string = string,\n> extends CheckboxProps<Y> {\n label: ReactNode\n}\n\nexport interface CheckboxGroupRootProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, CheckboxStyle>,\n \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<CheckboxStyle>,\n UseCheckboxGroupProps<Y>,\n UseInputBorderProps,\n Pick<CheckboxProps, \"checkedIcon\"> {\n /**\n * If provided, generate options based on items.\n *\n * @default []\n */\n items?: CheckboxGroupItem<Y>[]\n}\n\n/**\n * `CheckboxGroup` is a component that groups `Checkbox` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const CheckboxGroupRoot = component<\"div\", CheckboxGroupRootProps>(\n (props) => {\n const [\n ,\n {\n colorScheme,\n size,\n variant,\n checkedIcon,\n children,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n items = [],\n readOnly,\n shape,\n suppressHydrationWarning,\n ...rest\n },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n })\n const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n useCheckboxGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(({ label, value, ...rest }, index) => (\n <Checkbox key={value ?? index} value={value} {...rest}>\n {label}\n </Checkbox>\n ))\n }, [items, children])\n const context = useMemo(\n () => ({\n colorScheme,\n size,\n variant,\n checkedIcon,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n readOnly,\n shape,\n suppressHydrationWarning,\n }),\n [\n variant,\n size,\n colorScheme,\n shape,\n disabled,\n invalid,\n readOnly,\n errorBorderColor,\n focusBorderColor,\n checkedIcon,\n suppressHydrationWarning,\n ],\n )\n const groupContext = useMemo(\n () => ({ max, value, getInputProps, getLabelProps, onChange }),\n [max, value, getInputProps, getLabelProps, onChange],\n )\n\n return (\n <CheckboxPropsContext value={context}>\n <CheckboxGroupContext value={groupContext}>\n <Group\n orientation=\"vertical\"\n {...getRootProps({ suppressHydrationWarning })}\n >\n {computedChildren}\n </Group>\n </CheckboxGroupContext>\n </CheckboxPropsContext>\n )\n },\n \"group\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: CheckboxGroupRootProps<Y>): ReactElement\n}>\n\nexport { Checkbox as CheckboxGroupItem }\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAa,oBAAoB,WAC9B,UAAU;CACT,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,EAAE,EACV,UACA,OACA,0BACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;EAAQ,EAC3D,CAAC;CACF,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,KAAK;CACxB,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAAK,EAAE,OAAO,gBAAO,GAAGA,UAAQ,UAC3C,oBAAC;GAA8B,OAAOC;GAAO,GAAID;aAC9C;KADYC,WAAS,MAEb,CACX;IACD,CAAC,OAAO,SAAS,CAAC;AAkCrB,QACE,oBAAC;EAAqB,OAlCR,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAQG,oBAAC;GAAqB,OAPL,eACZ;IAAE;IAAK;IAAO;IAAe;IAAe;IAAU,GAC7D;IAAC;IAAK;IAAO;IAAe;IAAe;IAAS,CACrD;aAKK,oBAAC;IACC,aAAY;IACZ,GAAI,aAAa,EAAE,0BAA0B,CAAC;cAE7C;KACK;IACa;GACF;GAG3B,QACD,EAAE"}
|
|
@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
15
15
|
* @see https://yamada-ui.com/docs/components/checkbox-card
|
|
16
16
|
*/
|
|
17
17
|
const CheckboxCardGroupRoot = component((props) => {
|
|
18
|
-
const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], justify, readOnly, shape, withIndicator, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
18
|
+
const [, { colorScheme, size, variant, checkedIcon, children, disabled, errorBorderColor, focusBorderColor, invalid, items = [], justify, readOnly, shape, suppressHydrationWarning, withIndicator, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
|
|
19
19
|
"variant",
|
|
20
20
|
"colorScheme",
|
|
21
21
|
"size",
|
|
@@ -44,6 +44,7 @@ const CheckboxCardGroupRoot = component((props) => {
|
|
|
44
44
|
justify,
|
|
45
45
|
readOnly,
|
|
46
46
|
shape,
|
|
47
|
+
suppressHydrationWarning,
|
|
47
48
|
withIndicator
|
|
48
49
|
}), [
|
|
49
50
|
colorScheme,
|
|
@@ -57,7 +58,8 @@ const CheckboxCardGroupRoot = component((props) => {
|
|
|
57
58
|
focusBorderColor,
|
|
58
59
|
invalid,
|
|
59
60
|
readOnly,
|
|
60
|
-
shape
|
|
61
|
+
shape,
|
|
62
|
+
suppressHydrationWarning
|
|
61
63
|
]),
|
|
62
64
|
children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
|
|
63
65
|
value: useMemo(() => ({
|
|
@@ -74,7 +76,7 @@ const CheckboxCardGroupRoot = component((props) => {
|
|
|
74
76
|
onChange
|
|
75
77
|
]),
|
|
76
78
|
children: /* @__PURE__ */ jsx(Group, {
|
|
77
|
-
...getRootProps(),
|
|
79
|
+
...getRootProps({ suppressHydrationWarning }),
|
|
78
80
|
children: computedChildren
|
|
79
81
|
})
|
|
80
82
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-card-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox-card/checkbox-card-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { UseCheckboxGroupProps } from \"../checkbox\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardRootProps } from \"./checkbox-card\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"../checkbox\"\nimport { Group } from \"../group\"\nimport {\n CheckboxCardPropsContext,\n CheckboxCardRoot,\n component,\n useRootComponentProps,\n} from \"./checkbox-card\"\n\nexport interface CheckboxCardGroupItem<\n Y extends string = string,\n> extends CheckboxCardRootProps<Y> {}\n\nexport interface CheckboxCardGroupRootProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, CheckboxCardStyle>,\n \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<CheckboxCardStyle>,\n UseCheckboxGroupProps<Y>,\n UseInputBorderProps,\n Pick<CheckboxCardRootProps, \"checkedIcon\" | \"withIndicator\"> {\n /**\n * If provided, generate options based on items.\n *\n * @default []\n */\n items?: CheckboxCardGroupItem<Y>[]\n}\n\n/**\n * `CheckboxCardGroup` is a component that groups `CheckboxCard` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardGroupRoot = component<\n \"div\",\n CheckboxCardGroupRootProps\n>((props) => {\n const [\n ,\n {\n colorScheme,\n size,\n variant,\n checkedIcon,\n children,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n items = [],\n justify,\n readOnly,\n shape,\n withIndicator,\n ...rest\n },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\n \"variant\",\n \"colorScheme\",\n \"size\",\n \"shape\",\n \"justify\",\n \"withIndicator\",\n ],\n })\n const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n useCheckboxGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(({ value, ...rest }, index) => (\n <CheckboxCardRoot key={value ?? index} value={value} {...rest} />\n ))\n }, [items, children])\n const context = useMemo(\n () => ({\n colorScheme,\n size,\n variant,\n checkedIcon,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n justify,\n readOnly,\n shape,\n withIndicator,\n }),\n [\n colorScheme,\n size,\n checkedIcon,\n variant,\n disabled,\n justify,\n withIndicator,\n errorBorderColor,\n focusBorderColor,\n invalid,\n readOnly,\n shape,\n ],\n )\n const groupContext = useMemo(\n () => ({ max, value, getInputProps, getLabelProps, onChange }),\n [max, value, getInputProps, getLabelProps, onChange],\n )\n\n return (\n <CheckboxCardPropsContext value={context}>\n <CheckboxGroupContext value={groupContext}>\n <Group {...getRootProps()}
|
|
1
|
+
{"version":3,"file":"checkbox-card-group.js","names":["rest","value"],"sources":["../../../../src/components/checkbox-card/checkbox-card-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { UseCheckboxGroupProps } from \"../checkbox\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardRootProps } from \"./checkbox-card\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"../checkbox\"\nimport { Group } from \"../group\"\nimport {\n CheckboxCardPropsContext,\n CheckboxCardRoot,\n component,\n useRootComponentProps,\n} from \"./checkbox-card\"\n\nexport interface CheckboxCardGroupItem<\n Y extends string = string,\n> extends CheckboxCardRootProps<Y> {}\n\nexport interface CheckboxCardGroupRootProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, CheckboxCardStyle>,\n \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<CheckboxCardStyle>,\n UseCheckboxGroupProps<Y>,\n UseInputBorderProps,\n Pick<CheckboxCardRootProps, \"checkedIcon\" | \"withIndicator\"> {\n /**\n * If provided, generate options based on items.\n *\n * @default []\n */\n items?: CheckboxCardGroupItem<Y>[]\n}\n\n/**\n * `CheckboxCardGroup` is a component that groups `CheckboxCard` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardGroupRoot = component<\n \"div\",\n CheckboxCardGroupRootProps\n>((props) => {\n const [\n ,\n {\n colorScheme,\n size,\n variant,\n checkedIcon,\n children,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n items = [],\n justify,\n readOnly,\n shape,\n suppressHydrationWarning,\n withIndicator,\n ...rest\n },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\n \"variant\",\n \"colorScheme\",\n \"size\",\n \"shape\",\n \"justify\",\n \"withIndicator\",\n ],\n })\n const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n useCheckboxGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(({ value, ...rest }, index) => (\n <CheckboxCardRoot key={value ?? index} value={value} {...rest} />\n ))\n }, [items, children])\n const context = useMemo(\n () => ({\n colorScheme,\n size,\n variant,\n checkedIcon,\n disabled,\n errorBorderColor,\n focusBorderColor,\n invalid,\n justify,\n readOnly,\n shape,\n suppressHydrationWarning,\n withIndicator,\n }),\n [\n colorScheme,\n size,\n checkedIcon,\n variant,\n disabled,\n justify,\n withIndicator,\n errorBorderColor,\n focusBorderColor,\n invalid,\n readOnly,\n shape,\n suppressHydrationWarning,\n ],\n )\n const groupContext = useMemo(\n () => ({ max, value, getInputProps, getLabelProps, onChange }),\n [max, value, getInputProps, getLabelProps, onChange],\n )\n\n return (\n <CheckboxCardPropsContext value={context}>\n <CheckboxGroupContext value={groupContext}>\n <Group {...getRootProps({ suppressHydrationWarning })}>\n {computedChildren}\n </Group>\n </CheckboxGroupContext>\n </CheckboxCardPropsContext>\n )\n}, \"group\")() as GenericsComponent<{\n <Y extends string = string>(\n props: CheckboxCardGroupRootProps<Y>,\n ): ReactElement\n}>\n\nexport { CheckboxCardRoot as CheckboxCardGroupItem }\n"],"mappings":";;;;;;;;;;;;;;;;AAkDA,MAAa,wBAAwB,WAGlC,UAAU;CACX,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,EAAE,EACV,SACA,UACA,OACA,0BACA,eACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACD,EACF,CAAC;CACF,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,KAAK;CACxB,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAAK,EAAE,gBAAO,GAAGA,UAAQ,UACpC,oBAAC;GAAsC,OAAOC;GAAO,GAAID;KAAlCC,WAAS,MAAiC,CACjE;IACD,CAAC,OAAO,SAAS,CAAC;AAsCrB,QACE,oBAAC;EAAyB,OAtCZ,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAQG,oBAAC;GAAqB,OAPL,eACZ;IAAE;IAAK;IAAO;IAAe;IAAe;IAAU,GAC7D;IAAC;IAAK;IAAO;IAAe;IAAe;IAAS,CACrD;aAKK,oBAAC;IAAM,GAAI,aAAa,EAAE,0BAA0B,CAAC;cAClD;KACK;IACa;GACE;GAE5B,QAAQ,EAAE"}
|
|
@@ -17,7 +17,7 @@ import { Fragment, useMemo, useState } from "react";
|
|
|
17
17
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
18
18
|
|
|
19
19
|
//#region src/components/menu/menu.tsx
|
|
20
|
-
const { ComponentContext, PropsContext: MenuPropsContext, StyleContext, useComponentContext, usePropsContext: useMenuPropsContext, withContext, useRootComponentProps } = createSlotComponent("menu", menuStyle);
|
|
20
|
+
const { ComponentContext, HydrationContext, PropsContext: MenuPropsContext, StyleContext, useComponentContext, usePropsContext: useMenuPropsContext, withContext, useRootComponentProps } = createSlotComponent("menu", menuStyle);
|
|
21
21
|
/**
|
|
22
22
|
* `Menu` is a component that displays a common dropdown menu.
|
|
23
23
|
*
|
|
@@ -25,7 +25,7 @@ const { ComponentContext, PropsContext: MenuPropsContext, StyleContext, useCompo
|
|
|
25
25
|
*/
|
|
26
26
|
const MenuRoot = (props) => {
|
|
27
27
|
const [styleContext, mergedProps] = useRootComponentProps(props);
|
|
28
|
-
const [{ animationScheme, initialFocusRef, offset, placement, ...popoverProps }, { children, disabled, ...rest }] = usePopoverProps(mergedProps, [
|
|
28
|
+
const [{ animationScheme, initialFocusRef, offset, placement, ...popoverProps }, { children, disabled, suppressHydrationWarning, ...rest }] = usePopoverProps(mergedProps, [
|
|
29
29
|
"disabled",
|
|
30
30
|
"open",
|
|
31
31
|
"defaultOpen",
|
|
@@ -64,55 +64,58 @@ const MenuRoot = (props) => {
|
|
|
64
64
|
]);
|
|
65
65
|
return /* @__PURE__ */ jsx(StyleContext, {
|
|
66
66
|
value: styleContext,
|
|
67
|
-
children: /* @__PURE__ */ jsx(
|
|
68
|
-
value:
|
|
69
|
-
children: /* @__PURE__ */ jsx(
|
|
70
|
-
value:
|
|
71
|
-
|
|
72
|
-
subMenuDirection,
|
|
73
|
-
onActiveDescendant,
|
|
74
|
-
onClose,
|
|
75
|
-
onCloseSubMenu,
|
|
76
|
-
onOpen,
|
|
77
|
-
onSelect
|
|
78
|
-
}), [
|
|
79
|
-
onClose,
|
|
80
|
-
onOpen,
|
|
81
|
-
onSelect,
|
|
82
|
-
onActiveDescendant,
|
|
83
|
-
subMenu,
|
|
84
|
-
subMenuDirection,
|
|
85
|
-
onCloseSubMenu
|
|
86
|
-
]),
|
|
87
|
-
children: /* @__PURE__ */ jsx(MainMenuContext, {
|
|
67
|
+
children: /* @__PURE__ */ jsx(HydrationContext, {
|
|
68
|
+
value: useMemo(() => suppressHydrationWarning ? { suppressHydrationWarning } : {}, [suppressHydrationWarning]),
|
|
69
|
+
children: /* @__PURE__ */ jsx(MenuDescendantsContext, {
|
|
70
|
+
value: descendants,
|
|
71
|
+
children: /* @__PURE__ */ jsx(MenuContext, {
|
|
88
72
|
value: useMemo(() => ({
|
|
89
|
-
|
|
90
|
-
|
|
73
|
+
subMenu,
|
|
74
|
+
subMenuDirection,
|
|
91
75
|
onActiveDescendant,
|
|
92
|
-
|
|
76
|
+
onClose,
|
|
77
|
+
onCloseSubMenu,
|
|
78
|
+
onOpen,
|
|
93
79
|
onSelect
|
|
94
80
|
}), [
|
|
95
|
-
|
|
96
|
-
|
|
81
|
+
onClose,
|
|
82
|
+
onOpen,
|
|
83
|
+
onSelect,
|
|
97
84
|
onActiveDescendant,
|
|
98
|
-
|
|
99
|
-
|
|
85
|
+
subMenu,
|
|
86
|
+
subMenuDirection,
|
|
87
|
+
onCloseSubMenu
|
|
100
88
|
]),
|
|
101
|
-
children: /* @__PURE__ */ jsx(
|
|
89
|
+
children: /* @__PURE__ */ jsx(MainMenuContext, {
|
|
102
90
|
value: useMemo(() => ({
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
91
|
+
closeOnSelect,
|
|
92
|
+
descendants,
|
|
93
|
+
onActiveDescendant,
|
|
94
|
+
onCloseRef,
|
|
95
|
+
onSelect
|
|
107
96
|
}), [
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
97
|
+
closeOnSelect,
|
|
98
|
+
descendants,
|
|
99
|
+
onActiveDescendant,
|
|
100
|
+
onCloseRef,
|
|
101
|
+
onSelect
|
|
112
102
|
]),
|
|
113
|
-
children: /* @__PURE__ */ jsx(
|
|
114
|
-
|
|
115
|
-
|
|
103
|
+
children: /* @__PURE__ */ jsx(ComponentContext, {
|
|
104
|
+
value: useMemo(() => ({
|
|
105
|
+
getContentProps,
|
|
106
|
+
getContextTriggerProps,
|
|
107
|
+
getSeparatorProps,
|
|
108
|
+
getTriggerProps
|
|
109
|
+
}), [
|
|
110
|
+
getContentProps,
|
|
111
|
+
getContextTriggerProps,
|
|
112
|
+
getSeparatorProps,
|
|
113
|
+
getTriggerProps
|
|
114
|
+
]),
|
|
115
|
+
children: /* @__PURE__ */ jsx(PopoverRoot, {
|
|
116
|
+
...mergedPopoverProps,
|
|
117
|
+
children
|
|
118
|
+
})
|
|
116
119
|
})
|
|
117
120
|
})
|
|
118
121
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","names":["MenuRoot: FC<MenuRootProps>","Popover.Root","Popover.Trigger","Popover.Anchor","Popover.Content","rest","items","index"],"sources":["../../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { MenuStyle } from \"./menu.style\"\nimport type {\n MenuOptionGroupType,\n MenuOptionGroupValue,\n UseMenuGroupProps,\n UseMenuItemProps,\n UseMenuOptionGroupProps,\n UseMenuOptionItemProps,\n UseMenuProps,\n UseMenuReturn,\n} from \"./use-menu\"\nimport { Fragment, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { CheckIcon, ChevronRightIcon, CircleSmallIcon } from \"../icon\"\nimport { Popover, usePopoverProps } from \"../popover\"\nimport { menuStyle } from \"./menu.style\"\nimport {\n MainMenuContext,\n MenuContext,\n MenuDescendantsContext,\n MenuGroupContext,\n MenuOptionGroupContext,\n useMenu,\n useMenuContext,\n useMenuGroup,\n useMenuGroupContext,\n useMenuItem,\n useMenuOptionGroup,\n useMenuOptionItem,\n} from \"./use-menu\"\n\ninterface MenuSharedItem {\n label?: ReactNode\n}\n\ninterface MenuItemWithValue extends MenuSharedItem, MenuItemProps {}\n\ninterface MenuOptionItem extends MenuSharedItem, MenuOptionItemProps {}\n\ninterface MenuItemWithSeparator extends MenuSeparatorProps {\n type: \"separator\"\n}\n\ninterface MenuItemWithRadioGroup<Y extends string = string>\n extends\n Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n MenuOptionGroupProps<\"radio\", Y> {\n type: \"radio\"\n items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithCheckboxGroup<Y extends string[] = string[]>\n extends\n Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n MenuOptionGroupProps<\"checkbox\", Y> {\n type: \"checkbox\"\n items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithItems extends MenuSharedItem, MenuGroupProps {\n hasEndSeparator?: boolean\n hasSeparator?: boolean\n hasStartSeparator?: boolean\n items?: MenuItemWithValue[]\n labelProps?: MenuLabelProps\n}\n\nexport type MenuItem =\n | MenuItemWithCheckboxGroup\n | MenuItemWithItems\n | MenuItemWithRadioGroup\n | MenuItemWithSeparator\n | MenuItemWithValue\n\ninterface ComponentContext extends Pick<\n UseMenuReturn,\n | \"getContentProps\"\n | \"getContextTriggerProps\"\n | \"getSeparatorProps\"\n | \"getTriggerProps\"\n> {}\n\nexport interface MenuRootProps\n extends\n UseMenuProps,\n Omit<\n WithoutThemeProps<Popover.RootProps, MenuStyle>,\n \"autoFocus\" | \"modal\" | \"updateRef\" | \"withCloseButton\"\n >,\n ThemeProps<MenuStyle> {\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end-start'\n */\n placement?: Popover.RootProps[\"placement\"]\n}\n\nconst {\n ComponentContext,\n PropsContext: MenuPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: useMenuPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<MenuRootProps, MenuStyle, ComponentContext>(\n \"menu\",\n menuStyle,\n)\n\nexport { MenuPropsContext, useMenuPropsContext }\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see https://yamada-ui.com/docs/components/menu\n */\nexport const MenuRoot: FC<MenuRootProps> = (props) => {\n const [styleContext, mergedProps] = useRootComponentProps(props)\n const [\n { animationScheme, initialFocusRef, offset, placement, ...popoverProps },\n { children, disabled, ...rest },\n ] = usePopoverProps(mergedProps, [\n \"disabled\",\n \"open\",\n \"defaultOpen\",\n \"onOpen\",\n \"onClose\",\n ])\n const {\n closeOnSelect,\n descendants,\n open,\n subMenu,\n subMenuDirection,\n updateRef,\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n onActiveDescendant,\n onClose,\n onCloseRef,\n onCloseSubMenu,\n onOpen,\n onSelect,\n } = useMenu({ disabled, ...rest })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n ...popoverProps,\n animationScheme:\n animationScheme ?? (subMenu ? \"inline-start\" : \"block-start\"),\n autoFocus: !!initialFocusRef,\n disabled,\n initialFocusRef,\n offset: offset ?? (subMenu ? [0, 0] : undefined),\n open,\n placement:\n placement ?? (subMenu ? `center-${subMenuDirection}` : \"end-start\"),\n updateRef,\n onClose,\n onOpen,\n }),\n [\n animationScheme,\n disabled,\n initialFocusRef,\n offset,\n onClose,\n onOpen,\n open,\n placement,\n popoverProps,\n subMenu,\n subMenuDirection,\n updateRef,\n ],\n )\n const menuContext = useMemo(\n () => ({\n subMenu,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onCloseSubMenu,\n onOpen,\n onSelect,\n }),\n [\n onClose,\n onOpen,\n onSelect,\n onActiveDescendant,\n subMenu,\n subMenuDirection,\n onCloseSubMenu,\n ],\n )\n const mainMenuContext = useMemo(\n () => ({\n closeOnSelect,\n descendants,\n onActiveDescendant,\n onCloseRef,\n onSelect,\n }),\n [closeOnSelect, descendants, onActiveDescendant, onCloseRef, onSelect],\n )\n const componentContext = useMemo(\n () => ({\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n }),\n [\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <MenuDescendantsContext value={descendants}>\n <MenuContext value={menuContext}>\n <MainMenuContext value={mainMenuContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>{children}</Popover.Root>\n </ComponentContext>\n </MainMenuContext>\n </MenuContext>\n </MenuDescendantsContext>\n </StyleContext>\n )\n}\n\nexport interface MenuTriggerProps extends Popover.TriggerProps {}\n\nexport const MenuTrigger = withContext<\"button\", MenuTriggerProps>(\n Popover.Trigger,\n \"trigger\",\n)(undefined, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return cast<HTMLProps<\"button\">>(getTriggerProps(cast<HTMLProps>(props)))\n})\n\ninterface Rect {\n left: number\n top: number\n}\n\nexport interface MenuContextTriggerProps extends HTMLProps {}\n\nexport const MenuContextTrigger = withContext<\"div\", MenuContextTriggerProps>(\n ({ children, onContextMenu, ...rest }) => {\n const [rect, setRect] = useState<Rect>({\n left: 0,\n top: 0,\n })\n const { getContextTriggerProps } = useComponentContext()\n\n return (\n <>\n <MenuAnchor>\n <styled.div style={{ position: \"fixed\", ...rect }} />\n </MenuAnchor>\n\n <styled.div\n asChild\n {...getContextTriggerProps({\n onContextMenu: handlerAll(onContextMenu, (ev) => {\n setRect({ left: ev.clientX, top: ev.clientY })\n }),\n ...rest,\n })}\n >\n {children}\n </styled.div>\n </>\n )\n },\n \"contextTrigger\",\n)()\n\nexport interface MenuAnchorProps extends Popover.AnchorProps {}\n\nexport const MenuAnchor = withContext<\"div\", MenuAnchorProps>(\n Popover.Anchor,\n \"anchor\",\n)()\n\nexport interface MenuContentProps extends Popover.ContentProps {\n /**\n * The footer of the menu.\n */\n footer?: ReactNode\n /**\n * The header of the menu.\n */\n header?: ReactNode\n /**\n * If provided, generate elements based on items.\n */\n items?: MenuItem[]\n /**\n * Props for the footer component.\n */\n footerProps?: MenuFooterProps\n /**\n * Props for the header component.\n */\n headerProps?: MenuHeaderProps\n}\n\nexport const MenuContent = withContext<\"div\", MenuContentProps>(\n Popover.Content,\n \"content\",\n)(\n undefined,\n ({\n children,\n footer,\n header,\n items = [],\n footerProps,\n headerProps,\n portalProps,\n ...rest\n }) => {\n const { subMenu } = useMenuContext()\n const { getContentProps } = useComponentContext()\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n {header ? <MenuHeader {...headerProps}>{header}</MenuHeader> : null}\n\n {items.map((props, index) => {\n if (\"type\" in props) {\n if (props.type === \"radio\") {\n const {\n type,\n hasSeparator = true,\n hasEndSeparator = hasSeparator,\n hasStartSeparator = hasSeparator,\n items = [],\n ...rest\n } = props\n\n return (\n <Fragment key={index}>\n {hasStartSeparator ? <MenuSeparator /> : null}\n\n <MenuOptionGroup type={type} {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <MenuOptionItem key={index} {...rest}>\n {label}\n </MenuOptionItem>\n ))}\n </MenuOptionGroup>\n\n {hasEndSeparator ? <MenuSeparator /> : null}\n </Fragment>\n )\n } else if (props.type === \"checkbox\") {\n const {\n type,\n hasSeparator = true,\n hasEndSeparator = hasSeparator,\n hasStartSeparator = hasSeparator,\n items = [],\n ...rest\n } = props\n\n return (\n <Fragment key={index}>\n {hasStartSeparator ? <MenuSeparator /> : null}\n\n <MenuOptionGroup type={type} {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <MenuOptionItem key={index} {...rest}>\n {label}\n </MenuOptionItem>\n ))}\n </MenuOptionGroup>\n\n {hasEndSeparator ? <MenuSeparator /> : null}\n </Fragment>\n )\n } else {\n return <MenuSeparator key={index} />\n }\n } else if (\"items\" in props) {\n const {\n hasSeparator = true,\n hasEndSeparator = hasSeparator,\n hasStartSeparator = hasSeparator,\n items = [],\n ...rest\n } = props\n\n return (\n <Fragment key={index}>\n {hasStartSeparator ? <MenuSeparator /> : null}\n\n <MenuGroup {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <MenuItem key={index} {...rest}>\n {label}\n </MenuItem>\n ))}\n </MenuGroup>\n\n {hasEndSeparator ? <MenuSeparator /> : null}\n </Fragment>\n )\n } else if (\"value\" in props) {\n const { label, ...rest } = props\n\n return (\n <MenuItem key={index} {...rest}>\n {label}\n </MenuItem>\n )\n }\n })}\n\n {footer ? <MenuFooter {...footerProps}>{footer}</MenuFooter> : null}\n </>\n )\n }, [children, footer, footerProps, header, headerProps, items])\n\n return {\n ...getContentProps(\n cast<HTMLProps>({ ...rest, children: computedChildren }),\n ),\n portalProps: subMenu ? { ...portalProps, disabled: true } : portalProps,\n }\n },\n)\n\nexport interface MenuHeaderProps extends HTMLStyledProps {}\n\nexport const MenuHeader = withContext<\"div\", MenuHeaderProps>(\n \"div\",\n \"header\",\n)({ \"data-header\": \"\" })\n\nexport interface MenuFooterProps extends HTMLStyledProps {}\n\nexport const MenuFooter = withContext<\"div\", MenuFooterProps>(\n \"div\",\n \"footer\",\n)({ \"data-footer\": \"\" })\n\nexport interface MenuLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const MenuLabel = withContext<\"span\", MenuLabelProps>(\"span\", \"label\")(\n undefined,\n (props) => {\n const { getLabelProps } = useMenuGroupContext()\n\n return getLabelProps(props)\n },\n)\n\nexport interface MenuGroupProps extends UseMenuGroupProps, HTMLStyledProps {\n /**\n * The label of the group.\n */\n label?: ReactNode\n /**\n * Props for the label component.\n */\n labelProps?: MenuLabelProps\n}\n\nexport const MenuGroup = withContext<\"div\", MenuGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { getGroupProps, getLabelProps } = useMenuGroup(rest)\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <MenuGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? <MenuLabel {...labelProps}>{label}</MenuLabel> : null}\n {children}\n </styled.div>\n </MenuGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface MenuOptionGroupProps<\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n>\n extends\n UseMenuOptionGroupProps<Y, M>,\n Omit<MenuGroupProps, \"defaultValue\" | \"onChange\"> {}\n\nexport const MenuOptionGroup = withContext<\"div\", MenuOptionGroupProps>(\n ({\n type: typeProp,\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n }) => {\n const { type, value, onChange } = useMenuOptionGroup({\n type: typeProp,\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const context = useMemo(\n () => ({ type, value, onChange }),\n [type, value, onChange],\n )\n\n return (\n <MenuOptionGroupContext value={context}>\n <MenuGroup {...rest} />\n </MenuOptionGroupContext>\n )\n },\n { name: \"OptionGroup\", slot: [\"group\", \"option\"] },\n)() as GenericsComponent<{\n <\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n >(\n props: MenuOptionGroupProps<Y, M>,\n ): ReactElement\n}>\n\nexport interface MenuItemProps extends HTMLStyledProps, UseMenuItemProps {}\n\nexport const MenuItem = withContext<\"div\", MenuItemProps>(\n ({ children, ...rest }) => {\n const { subMenuTrigger, getItemProps } = useMenuItem(rest)\n\n return (\n <styled.div {...getItemProps()}>\n {children}\n\n {subMenuTrigger ? (\n <MenuIndicator as={ChevronRightIcon} ms=\"auto\" />\n ) : null}\n </styled.div>\n )\n },\n \"item\",\n)()\n\nexport interface MenuOptionItemProps\n extends HTMLStyledProps, UseMenuOptionItemProps {\n /**\n * The icon to be used in the menu option item.\n */\n icon?: ReactNode\n}\n\nexport const MenuOptionItem = withContext<\"div\", MenuOptionItemProps>(\n ({ children, icon, ...rest }) => {\n const { type, getIndicatorProps, getOptionItemProps } =\n useMenuOptionItem(rest)\n\n return (\n <styled.div {...getOptionItemProps()}>\n <MenuIndicator {...getIndicatorProps()}>\n {icon ||\n (type === \"radio\" ? (\n <CircleSmallIcon fill=\"currentColor\" />\n ) : (\n <CheckIcon />\n ))}\n </MenuIndicator>\n {children}\n </styled.div>\n )\n },\n { name: \"OptionItem\", slot: [\"item\", \"option\"] },\n)()\n\nexport interface MenuIndicatorProps extends HTMLStyledProps {}\n\nexport const MenuIndicator = withContext<\"div\", MenuIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface MenuCommandProps extends HTMLStyledProps<\"kbd\"> {}\n\nexport const MenuCommand = withContext<\"kbd\", MenuCommandProps>(\n \"kbd\",\n \"command\",\n)()\n\nexport interface MenuSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const MenuSeparator = withContext<\"hr\", MenuSeparatorProps>(\n \"hr\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useComponentContext()\n\n return getSeparatorProps(props)\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6GA,MAAM,EACJ,kBACA,cAAc,kBACd,cACA,qBACA,iBAAiB,qBACjB,aACA,0BACE,oBACF,QACA,UACD;;;;;;AASD,MAAaA,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,GAAG,UACvB,gBAAgB,aAAa;EAC/B;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,EACJ,eACA,aACA,MACA,SACA,kBACA,WACA,iBACA,wBACA,mBACA,iBACA,oBACA,SACA,YACA,gBACA,QACA,aACE,QAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,qBAAqB,eAClB;EACL,GAAG;EACH,iBACE,oBAAoB,UAAU,iBAAiB;EACjD,WAAW,CAAC,CAAC;EACb;EACA;EACA,QAAQ,WAAW,UAAU,CAAC,GAAG,EAAE,GAAG;EACtC;EACA,WACE,cAAc,UAAU,UAAU,qBAAqB;EACzD;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AA8CD,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAuB,OAAO;aAC7B,oBAAC;IAAY,OAhDC,eACX;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cA8BO,oBAAC;KAAgB,OA7BD,eACf;MACL;MACA;MACA;MACA;MACA;MACD,GACD;MAAC;MAAe;MAAa;MAAoB;MAAY;MAAS,CACvE;eAqBS,oBAAC;MAAiB,OApBH,eAChB;OACL;OACA;OACA;OACA;OACD,GACD;OACE;OACA;OACA;OACA;OACD,CACF;gBAQW,oBAACC;OAAa,GAAI;OAAqB;QAAwB;OAC9C;MACH;KACN;IACS;GACZ;;AAMnB,MAAa,cAAc,YACzBC,gBACA,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB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"}
|
|
1
|
+
{"version":3,"file":"menu.js","names":["MenuRoot: FC<MenuRootProps>","Popover.Root","Popover.Trigger","Popover.Anchor","Popover.Content","rest","items","index"],"sources":["../../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { MenuStyle } from \"./menu.style\"\nimport type {\n MenuOptionGroupType,\n MenuOptionGroupValue,\n UseMenuGroupProps,\n UseMenuItemProps,\n UseMenuOptionGroupProps,\n UseMenuOptionItemProps,\n UseMenuProps,\n UseMenuReturn,\n} from \"./use-menu\"\nimport { Fragment, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { CheckIcon, ChevronRightIcon, CircleSmallIcon } from \"../icon\"\nimport { Popover, usePopoverProps } from \"../popover\"\nimport { menuStyle } from \"./menu.style\"\nimport {\n MainMenuContext,\n MenuContext,\n MenuDescendantsContext,\n MenuGroupContext,\n MenuOptionGroupContext,\n useMenu,\n useMenuContext,\n useMenuGroup,\n useMenuGroupContext,\n useMenuItem,\n useMenuOptionGroup,\n useMenuOptionItem,\n} from \"./use-menu\"\n\ninterface MenuSharedItem {\n label?: ReactNode\n}\n\ninterface MenuItemWithValue extends MenuSharedItem, MenuItemProps {}\n\ninterface MenuOptionItem extends MenuSharedItem, MenuOptionItemProps {}\n\ninterface MenuItemWithSeparator extends MenuSeparatorProps {\n type: \"separator\"\n}\n\ninterface MenuItemWithRadioGroup<Y extends string = string>\n extends\n Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n MenuOptionGroupProps<\"radio\", Y> {\n type: \"radio\"\n items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithCheckboxGroup<Y extends string[] = string[]>\n extends\n Omit<MenuItemWithItems, \"defaultValue\" | \"items\" | \"onChange\">,\n MenuOptionGroupProps<\"checkbox\", Y> {\n type: \"checkbox\"\n items?: MenuOptionItem[]\n}\n\ninterface MenuItemWithItems extends MenuSharedItem, MenuGroupProps {\n hasEndSeparator?: boolean\n hasSeparator?: boolean\n hasStartSeparator?: boolean\n items?: MenuItemWithValue[]\n labelProps?: MenuLabelProps\n}\n\nexport type MenuItem =\n | MenuItemWithCheckboxGroup\n | MenuItemWithItems\n | MenuItemWithRadioGroup\n | MenuItemWithSeparator\n | MenuItemWithValue\n\ninterface ComponentContext extends Pick<\n UseMenuReturn,\n | \"getContentProps\"\n | \"getContextTriggerProps\"\n | \"getSeparatorProps\"\n | \"getTriggerProps\"\n> {}\n\nexport interface MenuRootProps\n extends\n UseMenuProps,\n Omit<\n WithoutThemeProps<Popover.RootProps, MenuStyle>,\n \"autoFocus\" | \"modal\" | \"updateRef\" | \"withCloseButton\"\n >,\n ThemeProps<MenuStyle> {\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end-start'\n */\n placement?: Popover.RootProps[\"placement\"]\n}\n\nconst {\n ComponentContext,\n HydrationContext,\n PropsContext: MenuPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: useMenuPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<MenuRootProps, MenuStyle, ComponentContext>(\n \"menu\",\n menuStyle,\n)\n\nexport { MenuPropsContext, useMenuPropsContext }\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see https://yamada-ui.com/docs/components/menu\n */\nexport const MenuRoot: FC<MenuRootProps> = (props) => {\n const [styleContext, mergedProps] = useRootComponentProps(props)\n const [\n { animationScheme, initialFocusRef, offset, placement, ...popoverProps },\n { children, disabled, suppressHydrationWarning, ...rest },\n ] = usePopoverProps(mergedProps, [\n \"disabled\",\n \"open\",\n \"defaultOpen\",\n \"onOpen\",\n \"onClose\",\n ])\n const {\n closeOnSelect,\n descendants,\n open,\n subMenu,\n subMenuDirection,\n updateRef,\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n onActiveDescendant,\n onClose,\n onCloseRef,\n onCloseSubMenu,\n onOpen,\n onSelect,\n } = useMenu({ disabled, ...rest })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n ...popoverProps,\n animationScheme:\n animationScheme ?? (subMenu ? \"inline-start\" : \"block-start\"),\n autoFocus: !!initialFocusRef,\n disabled,\n initialFocusRef,\n offset: offset ?? (subMenu ? [0, 0] : undefined),\n open,\n placement:\n placement ?? (subMenu ? `center-${subMenuDirection}` : \"end-start\"),\n updateRef,\n onClose,\n onOpen,\n }),\n [\n animationScheme,\n disabled,\n initialFocusRef,\n offset,\n onClose,\n onOpen,\n open,\n placement,\n popoverProps,\n subMenu,\n subMenuDirection,\n updateRef,\n ],\n )\n const hydrationContext = useMemo(\n () => (suppressHydrationWarning ? { suppressHydrationWarning } : {}),\n [suppressHydrationWarning],\n )\n const menuContext = useMemo(\n () => ({\n subMenu,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onCloseSubMenu,\n onOpen,\n onSelect,\n }),\n [\n onClose,\n onOpen,\n onSelect,\n onActiveDescendant,\n subMenu,\n subMenuDirection,\n onCloseSubMenu,\n ],\n )\n const mainMenuContext = useMemo(\n () => ({\n closeOnSelect,\n descendants,\n onActiveDescendant,\n onCloseRef,\n onSelect,\n }),\n [closeOnSelect, descendants, onActiveDescendant, onCloseRef, onSelect],\n )\n const componentContext = useMemo(\n () => ({\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n }),\n [\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <HydrationContext value={hydrationContext}>\n <MenuDescendantsContext value={descendants}>\n <MenuContext value={menuContext}>\n <MainMenuContext value={mainMenuContext}>\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>{children}</Popover.Root>\n </ComponentContext>\n </MainMenuContext>\n </MenuContext>\n </MenuDescendantsContext>\n </HydrationContext>\n </StyleContext>\n )\n}\n\nexport interface MenuTriggerProps extends Popover.TriggerProps {}\n\nexport const MenuTrigger = withContext<\"button\", MenuTriggerProps>(\n Popover.Trigger,\n \"trigger\",\n)(undefined, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return cast<HTMLProps<\"button\">>(getTriggerProps(cast<HTMLProps>(props)))\n})\n\ninterface Rect {\n left: number\n top: number\n}\n\nexport interface MenuContextTriggerProps extends HTMLProps {}\n\nexport const MenuContextTrigger = withContext<\"div\", MenuContextTriggerProps>(\n ({ children, onContextMenu, ...rest }) => {\n const [rect, setRect] = useState<Rect>({\n left: 0,\n top: 0,\n })\n const { getContextTriggerProps } = useComponentContext()\n\n return (\n <>\n <MenuAnchor>\n <styled.div style={{ position: \"fixed\", ...rect }} />\n </MenuAnchor>\n\n <styled.div\n asChild\n {...getContextTriggerProps({\n onContextMenu: handlerAll(onContextMenu, (ev) => {\n setRect({ left: ev.clientX, top: ev.clientY })\n }),\n ...rest,\n })}\n >\n {children}\n </styled.div>\n </>\n )\n },\n \"contextTrigger\",\n)()\n\nexport interface MenuAnchorProps extends Popover.AnchorProps {}\n\nexport const MenuAnchor = withContext<\"div\", MenuAnchorProps>(\n Popover.Anchor,\n \"anchor\",\n)()\n\nexport interface MenuContentProps extends Popover.ContentProps {\n /**\n * The footer of the menu.\n */\n footer?: ReactNode\n /**\n * The header of the menu.\n */\n header?: ReactNode\n /**\n * If provided, generate elements based on items.\n */\n items?: MenuItem[]\n /**\n * Props for the footer component.\n */\n footerProps?: MenuFooterProps\n /**\n * Props for the header component.\n */\n headerProps?: MenuHeaderProps\n}\n\nexport const MenuContent = withContext<\"div\", MenuContentProps>(\n Popover.Content,\n \"content\",\n)(\n undefined,\n ({\n children,\n footer,\n header,\n items = [],\n footerProps,\n headerProps,\n portalProps,\n ...rest\n }) => {\n const { subMenu } = useMenuContext()\n const { getContentProps } = useComponentContext()\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n {header ? <MenuHeader {...headerProps}>{header}</MenuHeader> : null}\n\n {items.map((props, index) => {\n if (\"type\" in props) {\n if (props.type === \"radio\") {\n const {\n type,\n hasSeparator = true,\n hasEndSeparator = hasSeparator,\n hasStartSeparator = hasSeparator,\n items = [],\n ...rest\n } = props\n\n return (\n <Fragment key={index}>\n {hasStartSeparator ? <MenuSeparator /> : null}\n\n <MenuOptionGroup type={type} {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <MenuOptionItem key={index} {...rest}>\n {label}\n </MenuOptionItem>\n ))}\n </MenuOptionGroup>\n\n {hasEndSeparator ? <MenuSeparator /> : null}\n </Fragment>\n )\n } else if (props.type === \"checkbox\") {\n const {\n type,\n hasSeparator = true,\n hasEndSeparator = hasSeparator,\n hasStartSeparator = hasSeparator,\n items = [],\n ...rest\n } = props\n\n return (\n <Fragment key={index}>\n {hasStartSeparator ? <MenuSeparator /> : null}\n\n <MenuOptionGroup type={type} {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <MenuOptionItem key={index} {...rest}>\n {label}\n </MenuOptionItem>\n ))}\n </MenuOptionGroup>\n\n {hasEndSeparator ? <MenuSeparator /> : null}\n </Fragment>\n )\n } else {\n return <MenuSeparator key={index} />\n }\n } else if (\"items\" in props) {\n const {\n hasSeparator = true,\n hasEndSeparator = hasSeparator,\n hasStartSeparator = hasSeparator,\n items = [],\n ...rest\n } = props\n\n return (\n <Fragment key={index}>\n {hasStartSeparator ? <MenuSeparator /> : null}\n\n <MenuGroup {...rest}>\n {items.map(({ label, ...rest }, index) => (\n <MenuItem key={index} {...rest}>\n {label}\n </MenuItem>\n ))}\n </MenuGroup>\n\n {hasEndSeparator ? <MenuSeparator /> : null}\n </Fragment>\n )\n } else if (\"value\" in props) {\n const { label, ...rest } = props\n\n return (\n <MenuItem key={index} {...rest}>\n {label}\n </MenuItem>\n )\n }\n })}\n\n {footer ? <MenuFooter {...footerProps}>{footer}</MenuFooter> : null}\n </>\n )\n }, [children, footer, footerProps, header, headerProps, items])\n\n return {\n ...getContentProps(\n cast<HTMLProps>({ ...rest, children: computedChildren }),\n ),\n portalProps: subMenu ? { ...portalProps, disabled: true } : portalProps,\n }\n },\n)\n\nexport interface MenuHeaderProps extends HTMLStyledProps {}\n\nexport const MenuHeader = withContext<\"div\", MenuHeaderProps>(\n \"div\",\n \"header\",\n)({ \"data-header\": \"\" })\n\nexport interface MenuFooterProps extends HTMLStyledProps {}\n\nexport const MenuFooter = withContext<\"div\", MenuFooterProps>(\n \"div\",\n \"footer\",\n)({ \"data-footer\": \"\" })\n\nexport interface MenuLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const MenuLabel = withContext<\"span\", MenuLabelProps>(\"span\", \"label\")(\n undefined,\n (props) => {\n const { getLabelProps } = useMenuGroupContext()\n\n return getLabelProps(props)\n },\n)\n\nexport interface MenuGroupProps extends UseMenuGroupProps, HTMLStyledProps {\n /**\n * The label of the group.\n */\n label?: ReactNode\n /**\n * Props for the label component.\n */\n labelProps?: MenuLabelProps\n}\n\nexport const MenuGroup = withContext<\"div\", MenuGroupProps>(\n ({ children, label, labelProps, ...rest }) => {\n const { getGroupProps, getLabelProps } = useMenuGroup(rest)\n const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n return (\n <MenuGroupContext value={context}>\n <styled.div {...getGroupProps()}>\n {label ? <MenuLabel {...labelProps}>{label}</MenuLabel> : null}\n {children}\n </styled.div>\n </MenuGroupContext>\n )\n },\n \"group\",\n)()\n\nexport interface MenuOptionGroupProps<\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n>\n extends\n UseMenuOptionGroupProps<Y, M>,\n Omit<MenuGroupProps, \"defaultValue\" | \"onChange\"> {}\n\nexport const MenuOptionGroup = withContext<\"div\", MenuOptionGroupProps>(\n ({\n type: typeProp,\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n }) => {\n const { type, value, onChange } = useMenuOptionGroup({\n type: typeProp,\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const context = useMemo(\n () => ({ type, value, onChange }),\n [type, value, onChange],\n )\n\n return (\n <MenuOptionGroupContext value={context}>\n <MenuGroup {...rest} />\n </MenuOptionGroupContext>\n )\n },\n { name: \"OptionGroup\", slot: [\"group\", \"option\"] },\n)() as GenericsComponent<{\n <\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n >(\n props: MenuOptionGroupProps<Y, M>,\n ): ReactElement\n}>\n\nexport interface MenuItemProps extends HTMLStyledProps, UseMenuItemProps {}\n\nexport const MenuItem = withContext<\"div\", MenuItemProps>(\n ({ children, ...rest }) => {\n const { subMenuTrigger, getItemProps } = useMenuItem(rest)\n\n return (\n <styled.div {...getItemProps()}>\n {children}\n\n {subMenuTrigger ? (\n <MenuIndicator as={ChevronRightIcon} ms=\"auto\" />\n ) : null}\n </styled.div>\n )\n },\n \"item\",\n)()\n\nexport interface MenuOptionItemProps\n extends HTMLStyledProps, UseMenuOptionItemProps {\n /**\n * The icon to be used in the menu option item.\n */\n icon?: ReactNode\n}\n\nexport const MenuOptionItem = withContext<\"div\", MenuOptionItemProps>(\n ({ children, icon, ...rest }) => {\n const { type, getIndicatorProps, getOptionItemProps } =\n useMenuOptionItem(rest)\n\n return (\n <styled.div {...getOptionItemProps()}>\n <MenuIndicator {...getIndicatorProps()}>\n {icon ||\n (type === \"radio\" ? (\n <CircleSmallIcon fill=\"currentColor\" />\n ) : (\n <CheckIcon />\n ))}\n </MenuIndicator>\n {children}\n </styled.div>\n )\n },\n { name: \"OptionItem\", slot: [\"item\", \"option\"] },\n)()\n\nexport interface MenuIndicatorProps extends HTMLStyledProps {}\n\nexport const MenuIndicator = withContext<\"div\", MenuIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface MenuCommandProps extends HTMLStyledProps<\"kbd\"> {}\n\nexport const MenuCommand = withContext<\"kbd\", MenuCommandProps>(\n \"kbd\",\n \"command\",\n)()\n\nexport interface MenuSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const MenuSeparator = withContext<\"hr\", MenuSeparatorProps>(\n \"hr\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useComponentContext()\n\n return getSeparatorProps(props)\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6GA,MAAM,EACJ,kBACA,kBACA,cAAc,kBACd,cACA,qBACA,iBAAiB,qBACjB,aACA,0BACE,oBACF,QACA,UACD;;;;;;AASD,MAAaA,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,0BAA0B,GAAG,UACjD,gBAAgB,aAAa;EAC/B;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,EACJ,eACA,aACA,MACA,SACA,kBACA,WACA,iBACA,wBACA,mBACA,iBACA,oBACA,SACA,YACA,gBACA,QACA,aACE,QAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,qBAAqB,eAClB;EACL,GAAG;EACH,iBACE,oBAAoB,UAAU,iBAAiB;EACjD,WAAW,CAAC,CAAC;EACb;EACA;EACA,QAAQ,WAAW,UAAU,CAAC,GAAG,EAAE,GAAG;EACtC;EACA,WACE,cAAc,UAAU,UAAU,qBAAqB;EACzD;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAkDD,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAiB,OAnDG,cAChB,2BAA2B,EAAE,0BAA0B,GAAG,EAAE,EACnE,CAAC,yBAAyB,CAC3B;aAiDK,oBAAC;IAAuB,OAAO;cAC7B,oBAAC;KAAY,OAjDD,eACX;MACL;MACA;MACA;MACA;MACA;MACA;MACA;MACD,GACD;MACE;MACA;MACA;MACA;MACA;MACA;MACA;MACD,CACF;eA+BS,oBAAC;MAAgB,OA9BH,eACf;OACL;OACA;OACA;OACA;OACA;OACD,GACD;OAAC;OAAe;OAAa;OAAoB;OAAY;OAAS,CACvE;gBAsBW,oBAAC;OAAiB,OArBL,eAChB;QACL;QACA;QACA;QACA;QACD,GACD;QACE;QACA;QACA;QACA;QACD,CACF;iBASa,oBAACC;QAAa,GAAI;QAAqB;SAAwB;QAC9C;OA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"}
|