@yamada-ui/react 2.1.4-dev-20260324185108 → 2.1.4
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/menu/menu.cjs +2 -2
- package/dist/cjs/components/menu/menu.cjs.map +1 -1
- package/dist/cjs/components/pagination/pagination.cjs +4 -4
- package/dist/cjs/components/pagination/pagination.cjs.map +1 -1
- package/dist/esm/components/menu/menu.js +2 -2
- package/dist/esm/components/menu/menu.js.map +1 -1
- package/dist/esm/components/pagination/pagination.js +4 -4
- package/dist/esm/components/pagination/pagination.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -2
- package/dist/types/components/accordion/accordion.style.d.ts +1 -1
- package/dist/types/components/accordion/use-accordion.d.ts +11 -11
- 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/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/breadcrumb.style.d.ts +1 -1
- 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/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 +5 -5
- package/dist/types/components/checkbox-card/checkbox-card.style.d.ts +1 -1
- 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/data-list/data-list.style.d.ts +1 -1
- 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/empty-state/empty-state.style.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/field.style.d.ts +2 -2
- package/dist/types/components/field/use-field-props.d.ts +4 -4
- package/dist/types/components/fieldset/fieldset.d.ts +3 -3
- package/dist/types/components/fieldset/fieldset.style.d.ts +1 -1
- 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/flip/flip.style.d.ts +1 -1
- 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 +4 -4
- 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/list/list.style.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/native-accordion.style.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 +2 -2
- 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/pagination.style.d.ts +1 -1
- 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 +2 -2
- 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 +5 -5
- package/dist/types/components/radio-card/radio-card.style.d.ts +1 -1
- package/dist/types/components/rating/rating.style.d.ts +2 -2
- 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/reorder.style.d.ts +1 -1
- 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/resizable.style.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/segmented-control.style.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/select.style.d.ts +1 -1
- 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/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/stat/stat.style.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/steps.style.d.ts +1 -1
- 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 +5 -5
- package/dist/types/components/timeline/timeline.style.d.ts +2 -2
- 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 +2 -2
- 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 +7 -7
- 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-clickable/index.d.ts +7 -7
- package/dist/types/hooks/use-clipboard/index.d.ts +2 -2
- package/dist/types/hooks/use-combobox/index.d.ts +12 -12
- package/dist/types/hooks/use-counter/index.d.ts +2 -2
- package/dist/types/hooks/use-field-sizing/index.d.ts +2 -2
- package/dist/types/hooks/use-hover/index.d.ts +2 -2
- package/dist/types/hooks/use-popper/index.d.ts +2 -2
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +3 -3
- package/dist/types/utils/children.d.ts +2 -2
- package/package.json +2 -2
|
@@ -273,7 +273,7 @@ const MenuOptionGroup = withContext(({ type: typeProp, defaultValue, value: valu
|
|
|
273
273
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuGroup, { ...rest })
|
|
274
274
|
});
|
|
275
275
|
}, {
|
|
276
|
-
name: "
|
|
276
|
+
name: "OptionGroup",
|
|
277
277
|
slot: ["group", "option"]
|
|
278
278
|
})();
|
|
279
279
|
const MenuItem = withContext(({ children, ...rest }) => {
|
|
@@ -296,7 +296,7 @@ const MenuOptionItem = withContext(({ children, icon, ...rest }) => {
|
|
|
296
296
|
}), children]
|
|
297
297
|
});
|
|
298
298
|
}, {
|
|
299
|
-
name: "
|
|
299
|
+
name: "OptionItem",
|
|
300
300
|
slot: ["item", "option"]
|
|
301
301
|
})();
|
|
302
302
|
const MenuIndicator = withContext("div", "indicator")();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.cjs","names":["createSlotComponent","menuStyle","MenuRoot: FC<MenuRootProps>","usePopoverProps","useMenu","MenuDescendantsContext","MenuContext","MainMenuContext","styled","useMenuContext","rest","Fragment","items","index","useMenuGroupContext","useMenuGroup","MenuGroupContext","useMenuOptionGroup","MenuOptionGroupContext","useMenuItem","ChevronRightIcon","useMenuOptionItem","CircleSmallIcon","CheckIcon"],"sources":["../../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n Direction,\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?: Direction\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":";;;;;;;;;;;;;;;;;;;;AA8GA,MAAM,EACJ,kBACA,cAAc,kBACd,cACA,qBACA,iBAAiB,qBACjB,aACA,0BACEA,6CACF,QACAC,6BACD;;;;;;AASD,MAAaC,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,GAAG,UACvBC,oCAAgB,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,aACEC,yBAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,+CACG;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,2CAAC;EAAa,OAAO;YACnB,2CAACC;GAAuB,OAAO;aAC7B,2CAACC;IAAY,iCA/CV;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cA8BO,2CAACC;KAAgB,iCA5BhB;MACL;MACA;MACA;MACA;MACA;MACD,GACD;MAAC;MAAe;MAAa;MAAoB;MAAY;MAAS,CACvE;eAqBS,2CAAC;MAAiB,iCAnBnB;OACL;OACA;OACA;OACA;OACD,GACD;OACE;OACA;OACA;OACA;OACD,CACF;gBAQW;OAAc,GAAI;OAAqB;QAAwB;OAC9C;MACH;KACN;IACS;GACZ;;AAMnB,MAAa,cAAc,4CAEzB,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,oDAAiC,4DAAgC,MAAM,CAAC,CAAC;EACzE;AASF,MAAa,qBAAqB,aAC/B,EAAE,UAAU,eAAe,GAAG,WAAW;CACxC,MAAM,CAAC,MAAM,+BAA0B;EACrC,MAAM;EACN,KAAK;EACN,CAAC;CACF,MAAM,EAAE,2BAA2B,qBAAqB;AAExD,QACE,qFACE,2CAAC,wBACC,2CAACC,uBAAO,OAAI,OAAO;EAAE,UAAU;EAAS,GAAG;EAAM,GAAI,GAC1C,EAEb,2CAACA,uBAAO;EACN;EACA,GAAI,uBAAuB;GACzB,iEAA0B,gBAAgB,OAAO;AAC/C,YAAQ;KAAE,MAAM,GAAG;KAAS,KAAK,GAAG;KAAS,CAAC;KAC9C;GACF,GAAG;GACJ,CAAC;EAED;GACU,IACZ;GAGP,iBACD,EAAE;AAIH,MAAa,aAAa,2CAExB,SACD,EAAE;AAyBH,MAAa,cAAc,4CAEzB,UACD,CACC,SACC,EACC,UACA,QACA,QACA,QAAQ,EAAE,EACV,aACA,aACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,YAAYC,iCAAgB;CACpC,MAAM,EAAE,oBAAoB,qBAAqB;CACjD,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SACE;GACG,SAAS,2CAAC;IAAW,GAAI;cAAc;KAAoB,GAAG;GAE9D,MAAM,KAAK,OAAO,UAAU;AAC3B,QAAI,UAAU,MACZ,KAAI,MAAM,SAAS,SAAS;KAC1B,MAAM,EACJ,MACA,eAAe,MACf,kBAAkB,cAClB,oBAAoB,cACpB,iBAAQ,EAAE,EACV,GAAGC,WACD;AAEJ,YACE,4CAACC;MACE,oBAAoB,2CAAC,kBAAgB,GAAG;MAEzC,2CAAC;OAAsB;OAAM,GAAID;iBAC9BE,QAAM,KAAK,EAAE,OAAO,GAAGF,UAAQ,YAC9B,2CAAC;QAA2B,GAAIA;kBAC7B;UADkBG,QAEJ,CACjB;QACc;MAEjB,kBAAkB,2CAAC,kBAAgB,GAAG;UAX1B,MAYJ;eAEJ,MAAM,SAAS,YAAY;KACpC,MAAM,EACJ,MACA,eAAe,MACf,kBAAkB,cAClB,oBAAoB,cACpB,iBAAQ,EAAE,EACV,GAAGH,WACD;AAEJ,YACE,4CAACC;MACE,oBAAoB,2CAAC,kBAAgB,GAAG;MAEzC,2CAAC;OAAsB;OAAM,GAAID;iBAC9BE,QAAM,KAAK,EAAE,OAAO,GAAGF,UAAQ,YAC9B,2CAAC;QAA2B,GAAIA;kBAC7B;UADkBG,QAEJ,CACjB;QACc;MAEjB,kBAAkB,2CAAC,kBAAgB,GAAG;UAX1B,MAYJ;UAGb,QAAO,2CAAC,mBAAmB,MAAS;aAE7B,WAAW,OAAO;KAC3B,MAAM,EACJ,eAAe,MACf,kBAAkB,cAClB,oBAAoB,cACpB,iBAAQ,EAAE,EACV,GAAGH,WACD;AAEJ,YACE,4CAACC;MACE,oBAAoB,2CAAC,kBAAgB,GAAG;MAEzC,2CAAC;OAAU,GAAID;iBACZE,QAAM,KAAK,EAAE,OAAO,GAAGF,UAAQ,YAC9B,2CAAC;QAAqB,GAAIA;kBACvB;UADYG,QAEJ,CACX;QACQ;MAEX,kBAAkB,2CAAC,kBAAgB,GAAG;UAX1B,MAYJ;eAEJ,WAAW,OAAO;KAC3B,MAAM,EAAE,OAAO,GAAGH,WAAS;AAE3B,YACE,2CAAC;MAAqB,GAAIA;gBACvB;QADY,MAEJ;;KAGf;GAED,SAAS,2CAAC;IAAW,GAAI;cAAc;KAAoB,GAAG;MAC9D;IAEJ;EAAC;EAAU;EAAQ;EAAa;EAAQ;EAAa;EAAM,CAAC;AAE/D,QAAO;EACL,GAAG,4DACe;GAAE,GAAG;GAAM,UAAU;GAAkB,CAAC,CACzD;EACD,aAAa,UAAU;GAAE,GAAG;GAAa,UAAU;GAAM,GAAG;EAC7D;EAEJ;AAID,MAAa,aAAa,YACxB,OACA,SACD,CAAC,EAAE,eAAe,IAAI,CAAC;AAIxB,MAAa,aAAa,YACxB,OACA,SACD,CAAC,EAAE,eAAe,IAAI,CAAC;AAIxB,MAAa,YAAY,YAAoC,QAAQ,QAAQ,CAC3E,SACC,UAAU;CACT,MAAM,EAAE,kBAAkBI,sCAAqB;AAE/C,QAAO,cAAc,MAAM;EAE9B;AAaD,MAAa,YAAY,aACtB,EAAE,UAAU,OAAO,YAAY,GAAG,WAAW;CAC5C,MAAM,EAAE,eAAe,kBAAkBC,8BAAa,KAAK;AAG3D,QACE,2CAACC;EAAiB,iCAHW,EAAE,eAAe,GAAG,CAAC,cAAc,CAAC;YAI/D,4CAACR,uBAAO;GAAI,GAAI,eAAe;cAC5B,QAAQ,2CAAC;IAAU,GAAI;cAAa;KAAkB,GAAG,MACzD;IACU;GACI;GAGvB,QACD,EAAE;AAUH,MAAa,kBAAkB,aAC5B,EACC,MAAM,UACN,cACA,OAAO,WACP,UAAU,cACV,GAAG,WACC;CACJ,MAAM,EAAE,MAAM,OAAO,aAAaS,oCAAmB;EACnD,MAAM;EACN;EACA,OAAO;EACP,UAAU;EACX,CAAC;AAMF,QACE,2CAACC;EAAuB,iCALjB;GAAE;GAAM;GAAO;GAAU,GAChC;GAAC;GAAM;GAAO;GAAS,CACxB;YAIG,2CAAC,aAAU,GAAI,OAAQ;GACA;GAG7B;CAAE,MAAM;CAAe,MAAM,CAAC,SAAS,SAAS;CAAE,CACnD,EAAE;AAWH,MAAa,WAAW,aACrB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,gBAAgB,iBAAiBC,6BAAY,KAAK;AAE1D,QACE,4CAACX,uBAAO;EAAI,GAAI,cAAc;aAC3B,UAEA,iBACC,2CAAC;GAAc,IAAIY;GAAkB,IAAG;IAAS,GAC/C;GACO;GAGjB,OACD,EAAE;AAUH,MAAa,iBAAiB,aAC3B,EAAE,UAAU,MAAM,GAAG,WAAW;CAC/B,MAAM,EAAE,MAAM,mBAAmB,uBAC/BC,mCAAkB,KAAK;AAEzB,QACE,4CAACb,uBAAO;EAAI,GAAI,oBAAoB;aAClC,2CAAC;GAAc,GAAI,mBAAmB;aACnC,SACE,SAAS,UACR,2CAACc,6CAAgB,MAAK,iBAAiB,GAEvC,2CAACC,iCAAY;IAEH,EACf;GACU;GAGjB;CAAE,MAAM;CAAc,MAAM,CAAC,QAAQ,SAAS;CAAE,CACjD,EAAE;AAIH,MAAa,gBAAgB,YAC3B,OACA,YACD,EAAE;AAIH,MAAa,cAAc,YACzB,OACA,UACD,EAAE;AAIH,MAAa,gBAAgB,YAC3B,MACA,YACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,sBAAsB,qBAAqB;AAEnD,QAAO,kBAAkB,MAAM;EAC/B"}
|
|
1
|
+
{"version":3,"file":"menu.cjs","names":["createSlotComponent","menuStyle","MenuRoot: FC<MenuRootProps>","usePopoverProps","useMenu","MenuDescendantsContext","MenuContext","MainMenuContext","styled","useMenuContext","rest","Fragment","items","index","useMenuGroupContext","useMenuGroup","MenuGroupContext","useMenuOptionGroup","MenuOptionGroupContext","useMenuItem","ChevronRightIcon","useMenuOptionItem","CircleSmallIcon","CheckIcon"],"sources":["../../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n Direction,\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?: Direction\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":";;;;;;;;;;;;;;;;;;;;AA8GA,MAAM,EACJ,kBACA,cAAc,kBACd,cACA,qBACA,iBAAiB,qBACjB,aACA,0BACEA,6CACF,QACAC,6BACD;;;;;;AASD,MAAaC,YAA+B,UAAU;CACpD,MAAM,CAAC,cAAc,eAAe,sBAAsB,MAAM;CAChE,MAAM,CACJ,EAAE,iBAAiB,iBAAiB,QAAQ,WAAW,GAAG,gBAC1D,EAAE,UAAU,UAAU,GAAG,UACvBC,oCAAgB,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,aACEC,yBAAQ;EAAE;EAAU,GAAG;EAAM,CAAC;CAClC,MAAM,+CACG;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,2CAAC;EAAa,OAAO;YACnB,2CAACC;GAAuB,OAAO;aAC7B,2CAACC;IAAY,iCA/CV;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cA8BO,2CAACC;KAAgB,iCA5BhB;MACL;MACA;MACA;MACA;MACA;MACD,GACD;MAAC;MAAe;MAAa;MAAoB;MAAY;MAAS,CACvE;eAqBS,2CAAC;MAAiB,iCAnBnB;OACL;OACA;OACA;OACA;OACD,GACD;OACE;OACA;OACA;OACA;OACD,CACF;gBAQW;OAAc,GAAI;OAAqB;QAAwB;OAC9C;MACH;KACN;IACS;GACZ;;AAMnB,MAAa,cAAc,4CAEzB,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,oDAAiC,4DAAgC,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"}
|
|
@@ -169,7 +169,7 @@ const PaginationText = withContext("span", "text")(void 0, ({ children, format =
|
|
|
169
169
|
};
|
|
170
170
|
});
|
|
171
171
|
const PaginationStartTrigger = withContext("button", {
|
|
172
|
-
name: "
|
|
172
|
+
name: "StartTrigger",
|
|
173
173
|
slot: ["trigger", "start"]
|
|
174
174
|
})(void 0, (props) => {
|
|
175
175
|
const { getStartTriggerProps } = require_use_pagination.usePaginationContext();
|
|
@@ -179,7 +179,7 @@ const PaginationStartTrigger = withContext("button", {
|
|
|
179
179
|
};
|
|
180
180
|
});
|
|
181
181
|
const PaginationEndTrigger = withContext("button", {
|
|
182
|
-
name: "
|
|
182
|
+
name: "EndTrigger",
|
|
183
183
|
slot: ["trigger", "end"]
|
|
184
184
|
})(void 0, (props) => {
|
|
185
185
|
const { getEndTriggerProps } = require_use_pagination.usePaginationContext();
|
|
@@ -189,7 +189,7 @@ const PaginationEndTrigger = withContext("button", {
|
|
|
189
189
|
};
|
|
190
190
|
});
|
|
191
191
|
const PaginationPrevTrigger = withContext("button", {
|
|
192
|
-
name: "
|
|
192
|
+
name: "PrevTrigger",
|
|
193
193
|
slot: ["trigger", "prev"]
|
|
194
194
|
})(void 0, (props) => {
|
|
195
195
|
const { getPrevTriggerProps } = require_use_pagination.usePaginationContext();
|
|
@@ -199,7 +199,7 @@ const PaginationPrevTrigger = withContext("button", {
|
|
|
199
199
|
};
|
|
200
200
|
});
|
|
201
201
|
const PaginationNextTrigger = withContext("button", {
|
|
202
|
-
name: "
|
|
202
|
+
name: "NextTrigger",
|
|
203
203
|
slot: ["trigger", "next"]
|
|
204
204
|
})(void 0, (props) => {
|
|
205
205
|
const { getNextTriggerProps } = require_use_pagination.usePaginationContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.cjs","names":["createSlotComponent","paginationStyle","usePagination","children: ReactNode[]","ChevronsLeftIcon","ChevronLeftIcon","styled","EllipsisIcon","ChevronRightIcon","ChevronsRightIcon","children","PaginationContext","PaginationItems: FC<PaginationItemsProps>","usePaginationContext","useI18n"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...edgeProps}\n {...edgeStartProps}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...controlProps}\n {...controlPrevProps}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...controlProps}\n {...controlNextProps}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...edgeProps}\n {...edgeEndProps}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"startTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"endTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"prevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"nextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,6CACF,cACAC,yCACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACEC,qCAAc,KAAK;CACvB,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,4CAAiC;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMC,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,2CAAC,oCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,8CAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,2CAAC,mBACC,SAAS,yDACE,KAAK,GACZ,2CAAC;IAAe,GAAI;cAClB,2CAACC,uBAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,2CAAC;IACC,IAAG;IACH,MAAM,2CAACC,uCAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,2CAAC,kCACC,2CAAC;IACC,MAAM,2CAACC,kDAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,2CAACC;EAAkB,OAAO;YACxB;GACE,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiBC,6CAAsB;AAEtD,iCAEI,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,gCAAwC,UAAU,CAChD,gCAAoB,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,4CAE5B,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAUA,6CAAsB;CACrD,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CACnC,MAAM,4CAAiC;AACrC,MAAI,SACF,uDAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyBD,6CAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuBA,6CAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
1
|
+
{"version":3,"file":"pagination.cjs","names":["createSlotComponent","paginationStyle","usePagination","children: ReactNode[]","ChevronsLeftIcon","ChevronLeftIcon","styled","EllipsisIcon","ChevronRightIcon","ChevronsRightIcon","children","PaginationContext","PaginationItems: FC<PaginationItemsProps>","usePaginationContext","useI18n"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...edgeProps}\n {...edgeStartProps}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...controlProps}\n {...controlPrevProps}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...controlProps}\n {...controlNextProps}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...edgeProps}\n {...edgeEndProps}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,6CACF,cACAC,yCACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACEC,qCAAc,KAAK;CACvB,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,4CAAiC;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMC,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,2CAAC,oCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,8CAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,2CAAC,mBACC,SAAS,yDACE,KAAK,GACZ,2CAAC;IAAe,GAAI;cAClB,2CAACC,uBAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,2CAAC;IACC,IAAG;IACH,MAAM,2CAACC,uCAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,2CAAC,kCACC,2CAAC;IACC,MAAM,2CAACC,kDAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,2CAACC;EAAkB,OAAO;YACxB;GACE,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiBC,6CAAsB;AAEtD,iCAEI,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,gCAAwC,UAAU,CAChD,gCAAoB,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,4CAE5B,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAUA,6CAAsB;CACrD,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CACnC,MAAM,4CAAiC;AACrC,MAAI,SACF,uDAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyBD,6CAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuBA,6CAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
@@ -272,7 +272,7 @@ const MenuOptionGroup = withContext(({ type: typeProp, defaultValue, value: valu
|
|
|
272
272
|
children: /* @__PURE__ */ jsx(MenuGroup, { ...rest })
|
|
273
273
|
});
|
|
274
274
|
}, {
|
|
275
|
-
name: "
|
|
275
|
+
name: "OptionGroup",
|
|
276
276
|
slot: ["group", "option"]
|
|
277
277
|
})();
|
|
278
278
|
const MenuItem = withContext(({ children, ...rest }) => {
|
|
@@ -295,7 +295,7 @@ const MenuOptionItem = withContext(({ children, icon, ...rest }) => {
|
|
|
295
295
|
}), children]
|
|
296
296
|
});
|
|
297
297
|
}, {
|
|
298
|
-
name: "
|
|
298
|
+
name: "OptionItem",
|
|
299
299
|
slot: ["item", "option"]
|
|
300
300
|
})();
|
|
301
301
|
const MenuIndicator = withContext("div", "indicator")();
|
|
@@ -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 Direction,\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?: Direction\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":";;;;;;;;;;;;;;;;;;;AA8GA,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 Direction,\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?: Direction\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":";;;;;;;;;;;;;;;;;;;AA8GA,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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"}
|
|
@@ -168,7 +168,7 @@ const PaginationText = withContext("span", "text")(void 0, ({ children, format =
|
|
|
168
168
|
};
|
|
169
169
|
});
|
|
170
170
|
const PaginationStartTrigger = withContext("button", {
|
|
171
|
-
name: "
|
|
171
|
+
name: "StartTrigger",
|
|
172
172
|
slot: ["trigger", "start"]
|
|
173
173
|
})(void 0, (props) => {
|
|
174
174
|
const { getStartTriggerProps } = usePaginationContext();
|
|
@@ -178,7 +178,7 @@ const PaginationStartTrigger = withContext("button", {
|
|
|
178
178
|
};
|
|
179
179
|
});
|
|
180
180
|
const PaginationEndTrigger = withContext("button", {
|
|
181
|
-
name: "
|
|
181
|
+
name: "EndTrigger",
|
|
182
182
|
slot: ["trigger", "end"]
|
|
183
183
|
})(void 0, (props) => {
|
|
184
184
|
const { getEndTriggerProps } = usePaginationContext();
|
|
@@ -188,7 +188,7 @@ const PaginationEndTrigger = withContext("button", {
|
|
|
188
188
|
};
|
|
189
189
|
});
|
|
190
190
|
const PaginationPrevTrigger = withContext("button", {
|
|
191
|
-
name: "
|
|
191
|
+
name: "PrevTrigger",
|
|
192
192
|
slot: ["trigger", "prev"]
|
|
193
193
|
})(void 0, (props) => {
|
|
194
194
|
const { getPrevTriggerProps } = usePaginationContext();
|
|
@@ -198,7 +198,7 @@ const PaginationPrevTrigger = withContext("button", {
|
|
|
198
198
|
};
|
|
199
199
|
});
|
|
200
200
|
const PaginationNextTrigger = withContext("button", {
|
|
201
|
-
name: "
|
|
201
|
+
name: "NextTrigger",
|
|
202
202
|
slot: ["trigger", "next"]
|
|
203
203
|
})(void 0, (props) => {
|
|
204
204
|
const { getNextTriggerProps } = usePaginationContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.js","names":["children: ReactNode[]","children","ButtonGroup.Root","PaginationItems: FC<PaginationItemsProps>","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...edgeProps}\n {...edgeStartProps}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...controlProps}\n {...controlPrevProps}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...controlProps}\n {...controlNextProps}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...edgeProps}\n {...edgeEndProps}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"startTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"endTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"prevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"nextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,cACA,gBACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACE,cAAc,KAAK;CACvB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMA,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,oBAAC,oCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,oBAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,oBAAC,mBACC,SAAS,qCACE,KAAK,GACZ,oBAAC;IAAe,GAAI;cAClB,oBAAC,OAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,oBAAC;IACC,IAAG;IACH,MAAM,oBAAC,iBAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,oBAAC,kCACC,oBAAC;IACC,MAAM,oBAAC,sBAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAkB,OAAO;YACxB,oBAACC;GACC,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;AAEtD,QAAO,cAEH,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,MAAI,eAAoC,UAAU,CAChD,QAAO,aAAa,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,YAC5BC,YACA,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAU,sBAAsB;CACrD,MAAM,EAAE,MAAM,QAAQ,aAAa;CACnC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,mCAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,sBAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuB,sBAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
1
|
+
{"version":3,"file":"pagination.js","names":["children: ReactNode[]","children","ButtonGroup.Root","PaginationItems: FC<PaginationItemsProps>","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...edgeProps}\n {...edgeStartProps}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...controlProps}\n {...controlPrevProps}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...controlProps}\n {...controlNextProps}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...edgeProps}\n {...edgeEndProps}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,cACA,gBACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACE,cAAc,KAAK;CACvB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMA,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,oBAAC,oCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,oBAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,oBAAC,mBACC,SAAS,qCACE,KAAK,GACZ,oBAAC;IAAe,GAAI;cAClB,oBAAC,OAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,oBAAC;IACC,IAAG;IACH,MAAM,oBAAC,iBAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,oBAAC,kCACC,oBAAC;IACC,MAAM,oBAAC,sBAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAkB,OAAO;YACxB,oBAACC;GACC,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;AAEtD,QAAO,cAEH,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,MAAI,eAAoC,UAAU,CAChD,QAAO,aAAa,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,YAC5BC,YACA,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAU,sBAAsB;CACrD,MAAM,EAAE,MAAM,QAAQ,aAAa;CACnC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,mCAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,sBAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuB,sBAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
@@ -9,7 +9,7 @@ import "../collapse/index.js";
|
|
|
9
9
|
import "../../index.js";
|
|
10
10
|
import { AccordionStyle } from "./accordion.style.js";
|
|
11
11
|
import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
|
|
12
|
-
import * as
|
|
12
|
+
import * as react909 from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/accordion/accordion.d.ts
|
|
15
15
|
interface AccordionCallBackProps {
|
|
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
|
|
|
33
33
|
*/
|
|
34
34
|
items?: AccordionItem[];
|
|
35
35
|
}
|
|
36
|
-
declare const AccordionPropsContext:
|
|
36
|
+
declare const AccordionPropsContext: react909.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
|
|
37
37
|
/**
|
|
38
38
|
* `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
|
|
39
39
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/accordion/accordion.style.d.ts
|
|
6
|
-
declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "
|
|
6
|
+
declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
|
|
7
7
|
panel: {
|
|
8
8
|
button: {
|
|
9
9
|
rounded: "l2";
|
|
@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
|
|
|
2
2
|
import "../../core/index.js";
|
|
3
3
|
import { Descendant } from "../../hooks/use-descendants/index.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react910 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/accordion/use-accordion.d.ts
|
|
8
|
-
declare const AccordionDescendantsContext:
|
|
8
|
+
declare const AccordionDescendantsContext: react910.Context<{
|
|
9
9
|
active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
|
|
10
10
|
count: (props?: Partial<{}> | undefined) => number;
|
|
11
11
|
destroy: () => void;
|
|
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react1025.Context<{
|
|
|
24
24
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
25
25
|
register: (props?: {
|
|
26
26
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
27
|
-
} | undefined) =>
|
|
27
|
+
} | undefined) => react910.RefCallback<HTMLButtonElement>;
|
|
28
28
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
29
29
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
30
30
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react1025.Context<{
|
|
|
50
50
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
51
51
|
register: (props?: {
|
|
52
52
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
53
|
-
} | undefined) =>
|
|
53
|
+
} | undefined) => react910.RefCallback<HTMLButtonElement>;
|
|
54
54
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
55
55
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
56
56
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
57
57
|
};
|
|
58
|
-
register:
|
|
58
|
+
register: react910.RefCallback<HTMLButtonElement>;
|
|
59
59
|
}, useAccordionDescendants: () => {
|
|
60
60
|
active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
|
|
61
61
|
count: (props?: Partial<{}> | undefined) => number;
|
|
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react1025.Context<{
|
|
|
75
75
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
76
76
|
register: (props?: {
|
|
77
77
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
78
|
-
} | undefined) =>
|
|
78
|
+
} | undefined) => react910.RefCallback<HTMLButtonElement>;
|
|
79
79
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
80
80
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
81
81
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
82
82
|
};
|
|
83
83
|
interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
|
|
84
|
-
declare const AccordionContext:
|
|
84
|
+
declare const AccordionContext: react910.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
|
|
85
85
|
interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
|
|
86
|
-
declare const AccordionItemContext:
|
|
86
|
+
declare const AccordionItemContext: react910.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
|
|
87
87
|
interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
|
|
88
88
|
/**
|
|
89
89
|
* The initial index(es) of the accordion item to expand.
|
|
@@ -137,7 +137,7 @@ declare const useAccordion: ({
|
|
|
137
137
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
138
138
|
register: (props?: {
|
|
139
139
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
140
|
-
} | undefined) =>
|
|
140
|
+
} | undefined) => react910.RefCallback<HTMLButtonElement>;
|
|
141
141
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
142
142
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
143
143
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
@@ -145,8 +145,8 @@ declare const useAccordion: ({
|
|
|
145
145
|
focusedIndex: number;
|
|
146
146
|
index: number | number[];
|
|
147
147
|
multiple: boolean | undefined;
|
|
148
|
-
setFocusedIndex:
|
|
149
|
-
setIndex:
|
|
148
|
+
setFocusedIndex: react910.Dispatch<react910.SetStateAction<number>>;
|
|
149
|
+
setIndex: react910.Dispatch<react910.SetStateAction<number | number[]>>;
|
|
150
150
|
toggle: boolean | undefined;
|
|
151
151
|
getRootProps: PropGetter<"div", undefined, undefined>;
|
|
152
152
|
};
|