@yamada-ui/react 2.2.1-dev-20260428074008 → 2.2.1-dev-20260428082432
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/scroll-area/use-scroll-area.cjs +2 -0
- package/dist/cjs/components/scroll-area/use-scroll-area.cjs.map +1 -1
- package/dist/cjs/components/segmented-control/use-segmented-control.cjs +8 -10
- package/dist/cjs/components/segmented-control/use-segmented-control.cjs.map +1 -1
- package/dist/esm/components/scroll-area/use-scroll-area.js +2 -0
- package/dist/esm/components/scroll-area/use-scroll-area.js.map +1 -1
- package/dist/esm/components/segmented-control/use-segmented-control.js +8 -10
- package/dist/esm/components/segmented-control/use-segmented-control.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -4
- package/dist/types/components/accordion/use-accordion.d.ts +11 -11
- package/dist/types/components/action-bar/action-bar.d.ts +2 -3
- package/dist/types/components/airy/airy.d.ts +2 -3
- package/dist/types/components/alert/alert.d.ts +2 -5
- package/dist/types/components/alert/alert.style.d.ts +1 -1
- package/dist/types/components/alpha-slider/alpha-slider.d.ts +2 -3
- package/dist/types/components/aspect-ratio/aspect-ratio.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.d.ts +2 -4
- package/dist/types/components/autocomplete/autocomplete.style.d.ts +1 -1
- package/dist/types/components/autocomplete/use-autocomplete.d.ts +5 -7
- package/dist/types/components/avatar/avatar.d.ts +5 -5
- package/dist/types/components/avatar/use-avatar-group.d.ts +2 -2
- package/dist/types/components/badge/badge.d.ts +2 -2
- package/dist/types/components/bleed/bleed.d.ts +2 -2
- package/dist/types/components/blockquote/blockquote.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +2 -2
- package/dist/types/components/breadcrumb/use-breadcrumb.d.ts +2 -2
- package/dist/types/components/button/button-group.d.ts +0 -1
- package/dist/types/components/button/button.d.ts +2 -3
- package/dist/types/components/button/icon-button.d.ts +2 -2
- package/dist/types/components/calendar/calendar.d.ts +2 -3
- package/dist/types/components/calendar/calendar.style.d.ts +2 -2
- package/dist/types/components/calendar/use-calendar.d.ts +8 -9
- package/dist/types/components/card/card.d.ts +2 -2
- package/dist/types/components/carousel/carousel.d.ts +2 -3
- package/dist/types/components/carousel/carousel.style.d.ts +2 -2
- package/dist/types/components/carousel/use-carousel.d.ts +3 -3
- package/dist/types/components/center/center.d.ts +2 -2
- package/dist/types/components/chart/area-chart.d.ts +2 -2
- package/dist/types/components/chart/chart.d.ts +2 -2
- package/dist/types/components/chart/composed-chart.d.ts +2 -2
- package/dist/types/components/chart/line-chart.d.ts +2 -2
- package/dist/types/components/chart/pie-chart.d.ts +2 -2
- package/dist/types/components/chart/use-chart.d.ts +2 -2
- package/dist/types/components/checkbox/checkbox-group.d.ts +0 -2
- package/dist/types/components/checkbox/checkbox.d.ts +5 -6
- package/dist/types/components/checkbox/checkbox.style.d.ts +1 -1
- package/dist/types/components/checkbox/use-checkbox-group.d.ts +2 -3
- package/dist/types/components/checkbox/use-checkbox.d.ts +0 -1
- package/dist/types/components/checkbox-card/checkbox-card-group.d.ts +0 -3
- package/dist/types/components/checkbox-card/checkbox-card.d.ts +5 -7
- package/dist/types/components/checkbox-card/checkbox-card.style.d.ts +1 -1
- package/dist/types/components/circle-progress/circle-progress.d.ts +2 -3
- package/dist/types/components/close-button/close-button.d.ts +2 -3
- package/dist/types/components/code/code.d.ts +2 -2
- package/dist/types/components/collapse/collapse.d.ts +2 -3
- package/dist/types/components/color-picker/color-picker.d.ts +2 -6
- 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 -5
- package/dist/types/components/color-selector/color-selector.d.ts +2 -6
- package/dist/types/components/color-selector/use-color-selector.d.ts +3 -5
- 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 -5
- package/dist/types/components/date-picker/use-date-picker.d.ts +4 -7
- package/dist/types/components/drawer/drawer.d.ts +2 -5
- package/dist/types/components/drawer/use-drawer.d.ts +0 -2
- package/dist/types/components/dropzone/dropzone.d.ts +5 -8
- package/dist/types/components/dropzone/dropzone.style.d.ts +1 -1
- package/dist/types/components/dropzone/use-dropzone.d.ts +0 -1
- package/dist/types/components/editable/editable.d.ts +4 -5
- package/dist/types/components/editable/use-editable.d.ts +2 -3
- 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 -3
- package/dist/types/components/fade-scale/fade-scale.d.ts +0 -1
- 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 -4
- package/dist/types/components/fieldset/fieldset.style.d.ts +1 -1
- package/dist/types/components/file-button/file-button.d.ts +2 -4
- package/dist/types/components/file-button/use-file-button.d.ts +18 -20
- package/dist/types/components/file-input/file-input.d.ts +2 -4
- package/dist/types/components/file-input/use-file-input.d.ts +15 -16
- package/dist/types/components/flex/flex.d.ts +2 -2
- package/dist/types/components/flip/flip.d.ts +4 -5
- package/dist/types/components/float/float.d.ts +2 -2
- package/dist/types/components/form/form.d.ts +3 -4
- package/dist/types/components/form/form.style.d.ts +1 -1
- 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/format/use-format-byte.d.ts +0 -1
- package/dist/types/components/format/use-format-date-time.d.ts +0 -1
- package/dist/types/components/format/use-format-number.d.ts +0 -1
- 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 -3
- 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/highlight/highlight.d.ts +0 -2
- package/dist/types/components/hue-slider/hue-slider.d.ts +3 -4
- package/dist/types/components/icon/icon.d.ts +5 -5
- package/dist/types/components/image/image.d.ts +2 -2
- package/dist/types/components/indicator/indicator.d.ts +4 -5
- 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-group.d.ts +0 -2
- package/dist/types/components/input/input.d.ts +2 -3
- package/dist/types/components/kbd/kbd.d.ts +2 -2
- package/dist/types/components/link/link.d.ts +2 -2
- package/dist/types/components/link-box/link-box.d.ts +2 -2
- package/dist/types/components/list/list.d.ts +2 -2
- package/dist/types/components/loading/loading-provider.d.ts +2 -2
- package/dist/types/components/loading/loading.d.ts +3 -4
- package/dist/types/components/loading/use-loading-component.d.ts +0 -1
- package/dist/types/components/mark/mark.d.ts +2 -2
- package/dist/types/components/menu/menu.d.ts +2 -3
- package/dist/types/components/menu/use-menu.d.ts +11 -11
- package/dist/types/components/modal/modal.d.ts +2 -6
- package/dist/types/components/native-accordion/native-accordion.d.ts +2 -2
- package/dist/types/components/native-accordion/use-native-accordion.d.ts +2 -2
- package/dist/types/components/native-popover/native-popover.d.ts +2 -2
- package/dist/types/components/native-select/native-select.d.ts +2 -4
- package/dist/types/components/native-select/use-native-select.d.ts +0 -1
- 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/notice/use-notice.d.ts +0 -3
- package/dist/types/components/number-input/number-input.d.ts +2 -3
- package/dist/types/components/number-input/number-input.style.d.ts +1 -1
- package/dist/types/components/number-input/use-number-input.d.ts +0 -1
- package/dist/types/components/pagination/pagination.d.ts +2 -3
- package/dist/types/components/pagination/use-pagination.d.ts +2 -2
- package/dist/types/components/password-input/password-input.d.ts +2 -3
- package/dist/types/components/password-input/strength-meter.d.ts +2 -2
- package/dist/types/components/password-input/strength-meter.style.d.ts +1 -1
- package/dist/types/components/password-input/use-password-input.d.ts +2 -3
- package/dist/types/components/picture/picture.d.ts +0 -1
- package/dist/types/components/pin-input/pin-input.d.ts +2 -4
- package/dist/types/components/pin-input/use-pin-input.d.ts +7 -8
- package/dist/types/components/popover/popover.d.ts +2 -3
- 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-group.d.ts +0 -2
- package/dist/types/components/radio/radio.d.ts +5 -6
- package/dist/types/components/radio/radio.style.d.ts +1 -1
- package/dist/types/components/radio/use-radio-group.d.ts +2 -3
- package/dist/types/components/radio/use-radio.d.ts +0 -1
- package/dist/types/components/radio-card/radio-card-group.d.ts +0 -3
- package/dist/types/components/radio-card/radio-card.d.ts +5 -7
- package/dist/types/components/radio-card/radio-card.style.d.ts +1 -1
- package/dist/types/components/rating/use-rating.d.ts +7 -8
- package/dist/types/components/reorder/reorder.d.ts +2 -3
- package/dist/types/components/reorder/use-reorder.d.ts +3 -3
- package/dist/types/components/resizable/resizable.d.ts +2 -2
- package/dist/types/components/resizable/use-resizable.d.ts +2 -2
- package/dist/types/components/ripple/ripple.d.ts +2 -3
- package/dist/types/components/ripple/use-ripple.d.ts +2 -2
- package/dist/types/components/rotate/rotate.d.ts +2 -3
- package/dist/types/components/saturation-slider/saturation-slider.d.ts +2 -2
- package/dist/types/components/saturation-slider/use-saturation-slider.d.ts +2 -3
- package/dist/types/components/scroll-area/scroll-area.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.d.ts +2 -3
- 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 -10
- package/dist/types/components/select/select.d.ts +2 -4
- package/dist/types/components/select/select.style.d.ts +1 -1
- package/dist/types/components/select/use-select.d.ts +4 -6
- package/dist/types/components/separator/separator.d.ts +2 -2
- package/dist/types/components/sidebar/sidebar.d.ts +2 -7
- package/dist/types/components/sidebar/use-sidebar.d.ts +9 -9
- package/dist/types/components/simple-grid/simple-grid.d.ts +2 -3
- package/dist/types/components/skeleton/skeleton.d.ts +2 -2
- package/dist/types/components/slide/slide.d.ts +2 -3
- package/dist/types/components/slide-fade/slide-fade.d.ts +2 -3
- package/dist/types/components/slider/slider.d.ts +2 -2
- package/dist/types/components/slider/use-slider.d.ts +2 -3
- package/dist/types/components/snacks/snacks.d.ts +0 -2
- package/dist/types/components/snacks/use-snacks.d.ts +0 -1
- 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/status/status.style.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/switch/use-switch.d.ts +0 -1
- package/dist/types/components/table/table.d.ts +2 -4
- 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/text/text.d.ts +2 -2
- package/dist/types/components/textarea/textarea.d.ts +2 -4
- 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 +1 -1
- package/dist/types/components/tip/tip.d.ts +0 -3
- package/dist/types/components/toggle/toggle-group.d.ts +1 -1
- package/dist/types/components/toggle/toggle.d.ts +5 -7
- package/dist/types/components/toggle/use-toggle-group.d.ts +2 -2
- package/dist/types/components/toggle/use-toggle.d.ts +2 -3
- package/dist/types/components/tooltip/tooltip.d.ts +2 -4
- package/dist/types/components/tree/tree.d.ts +2 -6
- package/dist/types/components/tree/tree.style.d.ts +1 -1
- package/dist/types/components/tree/use-tree.d.ts +183 -184
- package/dist/types/components/visually-hidden/visually-hidden.d.ts +2 -2
- package/dist/types/components/wrap/wrap.d.ts +2 -3
- package/dist/types/core/components/create-component.d.ts +9 -7
- package/dist/types/core/components/index.types.d.ts +1 -0
- package/dist/types/core/components/use-component-style.d.ts +2 -0
- package/dist/types/core/components/utils.d.ts +1 -0
- package/dist/types/core/constant.d.ts +1 -0
- package/dist/types/core/css/calc.d.ts +1 -0
- package/dist/types/core/css/config.d.ts +1 -0
- package/dist/types/core/css/css.d.ts +1 -0
- package/dist/types/core/css/index.types.d.ts +1 -0
- package/dist/types/core/css/styles.d.ts +1 -0
- package/dist/types/core/css/token.d.ts +1 -0
- package/dist/types/core/css/use-css.d.ts +1 -0
- package/dist/types/core/css/utils.d.ts +2 -0
- package/dist/types/core/generated-theme-tokens.types.d.ts +1 -0
- package/dist/types/core/index.d.ts +2 -0
- package/dist/types/core/system/color-mode-provider.d.ts +2 -2
- package/dist/types/core/system/config.d.ts +1 -0
- package/dist/types/core/system/create-system.d.ts +1 -0
- package/dist/types/core/system/factory.d.ts +1 -0
- package/dist/types/core/system/index.types.d.ts +1 -0
- package/dist/types/core/system/storage-script.d.ts +3 -3
- package/dist/types/core/system/styled.d.ts +3 -2
- package/dist/types/core/system/system-provider.d.ts +2 -2
- package/dist/types/core/system/var.d.ts +2 -0
- package/dist/types/hooks/use-async-callback/index.d.ts +0 -1
- 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 -13
- package/dist/types/hooks/use-counter/index.d.ts +2 -2
- package/dist/types/index.d.ts +0 -106
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +3 -3
- package/dist/types/providers/ui-provider/ui-provider.d.ts +2 -3
- package/dist/types/utils/children.d.ts +2 -2
- package/package.json +2 -2
|
@@ -96,6 +96,8 @@ const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrol
|
|
|
96
96
|
tabIndex: 0,
|
|
97
97
|
onMouseEnter: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseEnter, rest.onMouseEnter, onMouseEnter),
|
|
98
98
|
onMouseLeave: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseLeave, rest.onMouseLeave, onMouseLeave),
|
|
99
|
+
onPointerEnter: (0, require_utils_index.utils_exports.handlerAll)(props.onPointerEnter, rest.onPointerEnter, onMouseEnter),
|
|
100
|
+
onPointerLeave: (0, require_utils_index.utils_exports.handlerAll)(props.onPointerLeave, rest.onPointerLeave, onMouseLeave),
|
|
99
101
|
onScroll: (0, require_utils_index.utils_exports.handlerAll)(props.onScroll, rest.onScroll, onScroll)
|
|
100
102
|
}), [
|
|
101
103
|
isNever,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-scroll-area.cjs","names":["mergeRefs"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n dataAttr,\n handlerAll,\n isMac,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n id,\n ref,\n type = \"hover\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n}: UseScrollAreaProps = {}) => {\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isHidden = !isAlways && !isHovered && !isScrolling\n const isSafari = isMac() && vendor(/apple/i)\n const uuid = useId()\n const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const safariProps = useMemo(\n () => ({\n key,\n ref: mergeRefs(ref, scrollAreaRef),\n \"data-key\": key,\n }),\n [key, ref, scrollAreaRef],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n ref,\n style: { overflow: \"auto\", ...style },\n ...rest,\n ...(isSafari ? safariProps : {}),\n ...props,\n \"data-hidden\": dataAttr(isHidden),\n \"data-hover\": dataAttr(isHovered),\n \"data-never\": dataAttr(isNever),\n \"data-scroll\": dataAttr(isScrolling),\n tabIndex: 0,\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n }),\n [\n isNever,\n ref,\n isHidden,\n isHovered,\n isScrolling,\n isSafari,\n safariProps,\n rest,\n onMouseEnter,\n onMouseLeave,\n onScroll,\n ],\n )\n\n return {\n isAlways,\n isHidden,\n isHovered,\n isNever,\n isScrolling,\n getRootProps,\n }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;;AAiCA,MAAa,iBAAiB,EAC5B,IACA,KACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,aAAa,sCAAoC,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,yDAAkB,kDAAW,SAAS;CAC5C,MAAM,yBAAc;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,iCAA2B,OAAU;CAC3C,MAAM,kCAA4B,OAAU;CAC5C,MAAM,kCAAuC,KAAK;CAClD,MAAM,mCAAwB;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,0CAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,mCACH,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,4BAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAEN,MAAM,wCACG;EACL;EACA,KAAKA,sBAAU,KAAK,cAAc;EAClC,YAAY;EACb,GACD;EAAC;EAAK;EAAK;EAAc,CAC1B;
|
|
1
|
+
{"version":3,"file":"use-scroll-area.cjs","names":["mergeRefs"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n dataAttr,\n handlerAll,\n isMac,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n id,\n ref,\n type = \"hover\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n}: UseScrollAreaProps = {}) => {\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isHidden = !isAlways && !isHovered && !isScrolling\n const isSafari = isMac() && vendor(/apple/i)\n const uuid = useId()\n const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const safariProps = useMemo(\n () => ({\n key,\n ref: mergeRefs(ref, scrollAreaRef),\n \"data-key\": key,\n }),\n [key, ref, scrollAreaRef],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n ref,\n style: { overflow: \"auto\", ...style },\n ...rest,\n ...(isSafari ? safariProps : {}),\n ...props,\n \"data-hidden\": dataAttr(isHidden),\n \"data-hover\": dataAttr(isHovered),\n \"data-never\": dataAttr(isNever),\n \"data-scroll\": dataAttr(isScrolling),\n tabIndex: 0,\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onPointerEnter: handlerAll(\n props.onPointerEnter,\n rest.onPointerEnter,\n onMouseEnter,\n ),\n onPointerLeave: handlerAll(\n props.onPointerLeave,\n rest.onPointerLeave,\n onMouseLeave,\n ),\n onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n }),\n [\n isNever,\n ref,\n isHidden,\n isHovered,\n isScrolling,\n isSafari,\n safariProps,\n rest,\n onMouseEnter,\n onMouseLeave,\n onScroll,\n ],\n )\n\n return {\n isAlways,\n isHidden,\n isHovered,\n isNever,\n isScrolling,\n getRootProps,\n }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;;AAiCA,MAAa,iBAAiB,EAC5B,IACA,KACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,aAAa,sCAAoC,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,yDAAkB,kDAAW,SAAS;CAC5C,MAAM,yBAAc;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,iCAA2B,OAAU;CAC3C,MAAM,kCAA4B,OAAU;CAC5C,MAAM,kCAAuC,KAAK;CAClD,MAAM,mCAAwB;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,0CAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,mCACH,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,4BAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAEN,MAAM,wCACG;EACL;EACA,KAAKA,sBAAU,KAAK,cAAc;EAClC,YAAY;EACb,GACD;EAAC;EAAK;EAAK;EAAc,CAC1B;AAmDD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,sCAtDC,EAAE,OAAO,GAAG,UAAU,EAAE,MAAM;GAC7B;GACA,OAAO;IAAE,UAAU;IAAQ,GAAG;IAAO;GACrC,GAAG;GACH,GAAI,WAAW,cAAc,EAAE;GAC/B,GAAG;GACH,+DAAwB,SAAS;GACjC,8DAAuB,UAAU;GACjC,8DAAuB,QAAQ;GAC/B,+DAAwB,YAAY;GACpC,UAAU;GACV,gEACE,MAAM,cACN,KAAK,cACL,aACD;GACD,gEACE,MAAM,cACN,KAAK,cACL,aACD;GACD,kEACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,kEACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,4DAAqB,MAAM,UAAU,KAAK,UAAU,SAAS;GAC9D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}
|
|
@@ -5,6 +5,8 @@ const require_context = require('../../utils/context.cjs');
|
|
|
5
5
|
const require_dom = require('../../utils/dom.cjs');
|
|
6
6
|
const require_ref = require('../../utils/ref.cjs');
|
|
7
7
|
const require_utils_index = require('../../utils/index.cjs');
|
|
8
|
+
const require_props = require('../../core/components/props.cjs');
|
|
9
|
+
require('../../core/index.cjs');
|
|
8
10
|
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
|
|
9
11
|
const require_hooks_use_descendants_index = require('../../hooks/use-descendants/index.cjs');
|
|
10
12
|
let react = require("react");
|
|
@@ -22,17 +24,15 @@ const useSegmentedControl = ({ id, name, defaultValue, disabled, orientation = "
|
|
|
22
24
|
const descendants = useSegmentedControlDescendants();
|
|
23
25
|
id ??= uuid;
|
|
24
26
|
name ??= uuid;
|
|
25
|
-
const getRootProps = (0, react.useCallback)((props) => ({
|
|
27
|
+
const getRootProps = (0, react.useCallback)((props) => require_props.mergeProps({
|
|
26
28
|
id,
|
|
27
29
|
"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
|
|
28
30
|
"aria-orientation": orientation,
|
|
29
31
|
"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
|
|
30
32
|
"data-orientation": orientation,
|
|
31
33
|
"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
|
|
32
|
-
role: "radiogroup"
|
|
33
|
-
|
|
34
|
-
...props
|
|
35
|
-
}), [
|
|
34
|
+
role: "radiogroup"
|
|
35
|
+
}, rest, props)(), [
|
|
36
36
|
disabled,
|
|
37
37
|
id,
|
|
38
38
|
orientation,
|
|
@@ -61,17 +61,15 @@ const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps, ...res
|
|
|
61
61
|
const onChange = (0, react.useCallback)((ev) => {
|
|
62
62
|
setValue(ev.target.value);
|
|
63
63
|
}, [setValue]);
|
|
64
|
-
const getLabelProps = (0, react.useCallback)((props) => ({
|
|
64
|
+
const getLabelProps = (0, react.useCallback)((props) => require_props.mergeProps({
|
|
65
65
|
"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
|
|
66
66
|
"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
|
|
67
67
|
"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
|
|
68
68
|
"data-orientation": orientation,
|
|
69
69
|
"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(trulyReadOnly),
|
|
70
70
|
"data-root-disabled": (0, require_utils_index.utils_exports.dataAttr)(rootDisabled),
|
|
71
|
-
"data-root-readonly": (0, require_utils_index.utils_exports.dataAttr)(rootReadOnly)
|
|
72
|
-
|
|
73
|
-
...rest
|
|
74
|
-
}), [
|
|
71
|
+
"data-root-readonly": (0, require_utils_index.utils_exports.dataAttr)(rootReadOnly)
|
|
72
|
+
}, rest, props)(), [
|
|
75
73
|
orientation,
|
|
76
74
|
trulyDisabled,
|
|
77
75
|
trulyReadOnly,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-segmented-control.cjs","names":["createContext","createDescendants","useControllableState","getRootProps: PropGetter","getLabelProps: PropGetter<\"label\">","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n handlerAll,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n UseSegmentedControlReturn,\n \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n createContext<SegmentedControlContext>({\n name: \"SegmentedControlContext\",\n })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n DescendantsContext: SegmentedControlDescendantsContext,\n useDescendant: useSegmentedControlDescendant,\n useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n SegmentedControlDescendantsContext,\n useSegmentedControlDescendant,\n useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: Y\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The orientation of the segmented control.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * The value of the segmented control.\n */\n value?: Y\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n id,\n name,\n defaultValue,\n disabled,\n orientation = \"horizontal\",\n readOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n const uuid = useId()\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const descendants = useSegmentedControlDescendants()\n\n id ??= uuid\n name ??= uuid\n\n const getRootProps: PropGetter = useCallback(\n (props)
|
|
1
|
+
{"version":3,"file":"use-segmented-control.cjs","names":["createContext","createDescendants","useControllableState","getRootProps: PropGetter","mergeProps","getLabelProps: PropGetter<\"label\">","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n handlerAll,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n UseSegmentedControlReturn,\n \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n createContext<SegmentedControlContext>({\n name: \"SegmentedControlContext\",\n })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n DescendantsContext: SegmentedControlDescendantsContext,\n useDescendant: useSegmentedControlDescendant,\n useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n SegmentedControlDescendantsContext,\n useSegmentedControlDescendant,\n useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: Y\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The orientation of the segmented control.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * The value of the segmented control.\n */\n value?: Y\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n id,\n name,\n defaultValue,\n disabled,\n orientation = \"horizontal\",\n readOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n const uuid = useId()\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const descendants = useSegmentedControlDescendants()\n\n id ??= uuid\n name ??= uuid\n\n const getRootProps: PropGetter = useCallback(\n (props) =>\n mergeProps(\n {\n id,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-orientation\": orientation,\n \"data-disabled\": dataAttr(disabled),\n \"data-orientation\": orientation,\n \"data-readonly\": dataAttr(readOnly),\n role: \"radiogroup\",\n },\n rest,\n props,\n )(),\n [disabled, id, orientation, readOnly, rest],\n )\n\n return {\n id,\n name,\n descendants,\n disabled,\n orientation,\n readOnly,\n setValue,\n value,\n getRootProps,\n }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n /**\n * The value of the segmented control item.\n */\n value: Y\n /**\n * Props for the input element.\n */\n inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n disabled,\n readOnly,\n value,\n inputProps,\n ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n const {\n name,\n disabled: rootDisabled,\n orientation,\n readOnly: rootReadOnly,\n setValue,\n value: selectedValue,\n } = useSegmentedControlContext()\n const { register } = useSegmentedControlDescendant({\n disabled: disabled || readOnly,\n })\n const checked = value === selectedValue\n const trulyDisabled = disabled ?? rootDisabled\n const trulyReadOnly = readOnly ?? rootReadOnly\n const interactive = !(trulyReadOnly || trulyDisabled)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n setValue(ev.target.value)\n },\n [setValue],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n (props) =>\n mergeProps(\n {\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-disabled\": dataAttr(trulyDisabled),\n \"data-orientation\": orientation,\n \"data-readonly\": dataAttr(trulyReadOnly),\n \"data-root-disabled\": dataAttr(rootDisabled),\n \"data-root-readonly\": dataAttr(rootReadOnly),\n },\n rest,\n props,\n )(),\n [\n orientation,\n trulyDisabled,\n trulyReadOnly,\n checked,\n rootDisabled,\n rootReadOnly,\n rest,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-disabled\": dataAttr(trulyDisabled),\n \"data-orientation\": orientation,\n \"data-readonly\": dataAttr(trulyReadOnly),\n checked,\n disabled: trulyDisabled || trulyReadOnly,\n readOnly: trulyReadOnly,\n tabIndex: interactive ? undefined : -1,\n value,\n ...inputProps,\n ...props,\n ref: mergeRefs(register, ref),\n onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n }),\n [\n orientation,\n name,\n trulyDisabled,\n trulyReadOnly,\n checked,\n interactive,\n value,\n inputProps,\n register,\n onChange,\n ],\n )\n\n return {\n checked,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,CAAC,yBAAyB,8BAC9BA,8BAAuC,EACrC,MAAM,2BACP,CAAC;AAIJ,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACdC,uDAAqC;AA+CzC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,EAAE,KAAK;CACtC,MAAM,yBAAc;CACpB,MAAM,CAAC,OAAO,YAAYC,gEAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,gCAAgC;AAEpD,QAAO;AACP,UAAS;CAET,MAAMC,uCACH,UACCC,yBACE;EACE;EACA,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,MAAM;EACP,EACD,MACA,MACD,EAAE,EACL;EAAC;EAAU;EAAI;EAAa;EAAU;EAAK,CAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAiBH,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,4BAA4B;CAChC,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,UACvB,CAAC;CACF,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,mCACH,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAMC,wCACH,UACCD,yBACE;EACE,iEAA0B,cAAc;EACxC,gEAAyB,QAAQ;EACjC,iEAA0B,cAAc;EACxC,oBAAoB;EACpB,iEAA0B,cAAc;EACxC,sEAA+B,aAAa;EAC5C,sEAA+B,aAAa;EAC7C,EACD,MACA,MACD,EAAE,EACL;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAoCD,QAAO;EACL;EACA,uCAnCC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;GAC3B,MAAM;GACN;GACA,OAAOE,qCAAyB;GAChC,iEAA0B,cAAc;GACxC,gEAAyB,QAAQ;GACjC,iEAA0B,cAAc;GACxC,oBAAoB;GACpB,iEAA0B,cAAc;GACxC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,SAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAKC,sBAAU,UAAU,IAAI;GAC7B,4DAAqB,MAAM,UAAU,YAAY,UAAU,SAAS;GACrE,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAKC;EACD"}
|
|
@@ -95,6 +95,8 @@ const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrol
|
|
|
95
95
|
tabIndex: 0,
|
|
96
96
|
onMouseEnter: (0, utils_exports.handlerAll)(props.onMouseEnter, rest.onMouseEnter, onMouseEnter),
|
|
97
97
|
onMouseLeave: (0, utils_exports.handlerAll)(props.onMouseLeave, rest.onMouseLeave, onMouseLeave),
|
|
98
|
+
onPointerEnter: (0, utils_exports.handlerAll)(props.onPointerEnter, rest.onPointerEnter, onMouseEnter),
|
|
99
|
+
onPointerLeave: (0, utils_exports.handlerAll)(props.onPointerLeave, rest.onPointerLeave, onMouseLeave),
|
|
98
100
|
onScroll: (0, utils_exports.handlerAll)(props.onScroll, rest.onScroll, onScroll)
|
|
99
101
|
}), [
|
|
100
102
|
isNever,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n dataAttr,\n handlerAll,\n isMac,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n id,\n ref,\n type = \"hover\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n}: UseScrollAreaProps = {}) => {\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isHidden = !isAlways && !isHovered && !isScrolling\n const isSafari = isMac() && vendor(/apple/i)\n const uuid = useId()\n const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const safariProps = useMemo(\n () => ({\n key,\n ref: mergeRefs(ref, scrollAreaRef),\n \"data-key\": key,\n }),\n [key, ref, scrollAreaRef],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n ref,\n style: { overflow: \"auto\", ...style },\n ...rest,\n ...(isSafari ? safariProps : {}),\n ...props,\n \"data-hidden\": dataAttr(isHidden),\n \"data-hover\": dataAttr(isHovered),\n \"data-never\": dataAttr(isNever),\n \"data-scroll\": dataAttr(isScrolling),\n tabIndex: 0,\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n }),\n [\n isNever,\n ref,\n isHidden,\n isHovered,\n isScrolling,\n isSafari,\n safariProps,\n rest,\n onMouseEnter,\n onMouseLeave,\n onScroll,\n ],\n )\n\n return {\n isAlways,\n isHidden,\n isHovered,\n isNever,\n isScrolling,\n getRootProps,\n }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;AAiCA,MAAa,iBAAiB,EAC5B,IACA,KACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,qCAAkB,8BAAW,SAAS;CAC5C,MAAM,OAAO,OAAO;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,OAAU;CAC3C,MAAM,gBAAgB,OAAY,OAAU;CAC5C,MAAM,gBAAgB,OAAuB,KAAK;CAClD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,2BAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,WAAW,aACd,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAEN,MAAM,cAAc,eACX;EACL;EACA,KAAK,UAAU,KAAK,cAAc;EAClC,YAAY;EACb,GACD;EAAC;EAAK;EAAK;EAAc,CAC1B;
|
|
1
|
+
{"version":3,"file":"use-scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n dataAttr,\n handlerAll,\n isMac,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n id,\n ref,\n type = \"hover\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n}: UseScrollAreaProps = {}) => {\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isHidden = !isAlways && !isHovered && !isScrolling\n const isSafari = isMac() && vendor(/apple/i)\n const uuid = useId()\n const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const safariProps = useMemo(\n () => ({\n key,\n ref: mergeRefs(ref, scrollAreaRef),\n \"data-key\": key,\n }),\n [key, ref, scrollAreaRef],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n ref,\n style: { overflow: \"auto\", ...style },\n ...rest,\n ...(isSafari ? safariProps : {}),\n ...props,\n \"data-hidden\": dataAttr(isHidden),\n \"data-hover\": dataAttr(isHovered),\n \"data-never\": dataAttr(isNever),\n \"data-scroll\": dataAttr(isScrolling),\n tabIndex: 0,\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onPointerEnter: handlerAll(\n props.onPointerEnter,\n rest.onPointerEnter,\n onMouseEnter,\n ),\n onPointerLeave: handlerAll(\n props.onPointerLeave,\n rest.onPointerLeave,\n onMouseLeave,\n ),\n onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n }),\n [\n isNever,\n ref,\n isHidden,\n isHovered,\n isScrolling,\n isSafari,\n safariProps,\n rest,\n onMouseEnter,\n onMouseLeave,\n onScroll,\n ],\n )\n\n return {\n isAlways,\n isHidden,\n isHovered,\n isNever,\n isScrolling,\n getRootProps,\n }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;AAiCA,MAAa,iBAAiB,EAC5B,IACA,KACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,qCAAkB,8BAAW,SAAS;CAC5C,MAAM,OAAO,OAAO;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,OAAU;CAC3C,MAAM,gBAAgB,OAAY,OAAU;CAC5C,MAAM,gBAAgB,OAAuB,KAAK;CAClD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,2BAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,WAAW,aACd,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAEN,MAAM,cAAc,eACX;EACL;EACA,KAAK,UAAU,KAAK,cAAc;EAClC,YAAY;EACb,GACD;EAAC;EAAK;EAAK;EAAc,CAC1B;AAmDD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,cAvD+B,aAC9B,EAAE,OAAO,GAAG,UAAU,EAAE,MAAM;GAC7B;GACA,OAAO;IAAE,UAAU;IAAQ,GAAG;IAAO;GACrC,GAAG;GACH,GAAI,WAAW,cAAc,EAAE;GAC/B,GAAG;GACH,2CAAwB,SAAS;GACjC,0CAAuB,UAAU;GACjC,0CAAuB,QAAQ;GAC/B,2CAAwB,YAAY;GACpC,UAAU;GACV,4CACE,MAAM,cACN,KAAK,cACL,aACD;GACD,4CACE,MAAM,cACN,KAAK,cACL,aACD;GACD,8CACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,8CACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,wCAAqB,MAAM,UAAU,KAAK,UAAU,SAAS;GAC9D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}
|
|
@@ -4,6 +4,8 @@ import { createContext as createContext$1 } from "../../utils/context.js";
|
|
|
4
4
|
import { visuallyHiddenAttributes } from "../../utils/dom.js";
|
|
5
5
|
import { mergeRefs } from "../../utils/ref.js";
|
|
6
6
|
import { utils_exports } from "../../utils/index.js";
|
|
7
|
+
import { mergeProps } from "../../core/components/props.js";
|
|
8
|
+
import "../../core/index.js";
|
|
7
9
|
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
|
|
8
10
|
import { createDescendants } from "../../hooks/use-descendants/index.js";
|
|
9
11
|
import { useCallback, useId } from "react";
|
|
@@ -21,17 +23,15 @@ const useSegmentedControl = ({ id, name, defaultValue, disabled, orientation = "
|
|
|
21
23
|
const descendants = useSegmentedControlDescendants();
|
|
22
24
|
id ??= uuid;
|
|
23
25
|
name ??= uuid;
|
|
24
|
-
const getRootProps = useCallback((props) => ({
|
|
26
|
+
const getRootProps = useCallback((props) => mergeProps({
|
|
25
27
|
id,
|
|
26
28
|
"aria-disabled": (0, utils_exports.ariaAttr)(disabled),
|
|
27
29
|
"aria-orientation": orientation,
|
|
28
30
|
"data-disabled": (0, utils_exports.dataAttr)(disabled),
|
|
29
31
|
"data-orientation": orientation,
|
|
30
32
|
"data-readonly": (0, utils_exports.dataAttr)(readOnly),
|
|
31
|
-
role: "radiogroup"
|
|
32
|
-
|
|
33
|
-
...props
|
|
34
|
-
}), [
|
|
33
|
+
role: "radiogroup"
|
|
34
|
+
}, rest, props)(), [
|
|
35
35
|
disabled,
|
|
36
36
|
id,
|
|
37
37
|
orientation,
|
|
@@ -60,17 +60,15 @@ const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps, ...res
|
|
|
60
60
|
const onChange = useCallback((ev) => {
|
|
61
61
|
setValue(ev.target.value);
|
|
62
62
|
}, [setValue]);
|
|
63
|
-
const getLabelProps = useCallback((props) => ({
|
|
63
|
+
const getLabelProps = useCallback((props) => mergeProps({
|
|
64
64
|
"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
|
|
65
65
|
"data-checked": (0, utils_exports.dataAttr)(checked),
|
|
66
66
|
"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
|
|
67
67
|
"data-orientation": orientation,
|
|
68
68
|
"data-readonly": (0, utils_exports.dataAttr)(trulyReadOnly),
|
|
69
69
|
"data-root-disabled": (0, utils_exports.dataAttr)(rootDisabled),
|
|
70
|
-
"data-root-readonly": (0, utils_exports.dataAttr)(rootReadOnly)
|
|
71
|
-
|
|
72
|
-
...rest
|
|
73
|
-
}), [
|
|
70
|
+
"data-root-readonly": (0, utils_exports.dataAttr)(rootReadOnly)
|
|
71
|
+
}, rest, props)(), [
|
|
74
72
|
orientation,
|
|
75
73
|
trulyDisabled,
|
|
76
74
|
trulyReadOnly,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-segmented-control.js","names":["createContext","getRootProps: PropGetter","getLabelProps: PropGetter<\"label\">"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n handlerAll,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n UseSegmentedControlReturn,\n \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n createContext<SegmentedControlContext>({\n name: \"SegmentedControlContext\",\n })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n DescendantsContext: SegmentedControlDescendantsContext,\n useDescendant: useSegmentedControlDescendant,\n useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n SegmentedControlDescendantsContext,\n useSegmentedControlDescendant,\n useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: Y\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The orientation of the segmented control.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * The value of the segmented control.\n */\n value?: Y\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n id,\n name,\n defaultValue,\n disabled,\n orientation = \"horizontal\",\n readOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n const uuid = useId()\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const descendants = useSegmentedControlDescendants()\n\n id ??= uuid\n name ??= uuid\n\n const getRootProps: PropGetter = useCallback(\n (props)
|
|
1
|
+
{"version":3,"file":"use-segmented-control.js","names":["createContext","getRootProps: PropGetter","getLabelProps: PropGetter<\"label\">"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n handlerAll,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n UseSegmentedControlReturn,\n \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n createContext<SegmentedControlContext>({\n name: \"SegmentedControlContext\",\n })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n DescendantsContext: SegmentedControlDescendantsContext,\n useDescendant: useSegmentedControlDescendant,\n useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n SegmentedControlDescendantsContext,\n useSegmentedControlDescendant,\n useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: Y\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The orientation of the segmented control.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * The value of the segmented control.\n */\n value?: Y\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n id,\n name,\n defaultValue,\n disabled,\n orientation = \"horizontal\",\n readOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n const uuid = useId()\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const descendants = useSegmentedControlDescendants()\n\n id ??= uuid\n name ??= uuid\n\n const getRootProps: PropGetter = useCallback(\n (props) =>\n mergeProps(\n {\n id,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-orientation\": orientation,\n \"data-disabled\": dataAttr(disabled),\n \"data-orientation\": orientation,\n \"data-readonly\": dataAttr(readOnly),\n role: \"radiogroup\",\n },\n rest,\n props,\n )(),\n [disabled, id, orientation, readOnly, rest],\n )\n\n return {\n id,\n name,\n descendants,\n disabled,\n orientation,\n readOnly,\n setValue,\n value,\n getRootProps,\n }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n /**\n * The value of the segmented control item.\n */\n value: Y\n /**\n * Props for the input element.\n */\n inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n disabled,\n readOnly,\n value,\n inputProps,\n ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n const {\n name,\n disabled: rootDisabled,\n orientation,\n readOnly: rootReadOnly,\n setValue,\n value: selectedValue,\n } = useSegmentedControlContext()\n const { register } = useSegmentedControlDescendant({\n disabled: disabled || readOnly,\n })\n const checked = value === selectedValue\n const trulyDisabled = disabled ?? rootDisabled\n const trulyReadOnly = readOnly ?? rootReadOnly\n const interactive = !(trulyReadOnly || trulyDisabled)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n setValue(ev.target.value)\n },\n [setValue],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n (props) =>\n mergeProps(\n {\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-disabled\": dataAttr(trulyDisabled),\n \"data-orientation\": orientation,\n \"data-readonly\": dataAttr(trulyReadOnly),\n \"data-root-disabled\": dataAttr(rootDisabled),\n \"data-root-readonly\": dataAttr(rootReadOnly),\n },\n rest,\n props,\n )(),\n [\n orientation,\n trulyDisabled,\n trulyReadOnly,\n checked,\n rootDisabled,\n rootReadOnly,\n rest,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-disabled\": dataAttr(trulyDisabled),\n \"data-orientation\": orientation,\n \"data-readonly\": dataAttr(trulyReadOnly),\n checked,\n disabled: trulyDisabled || trulyReadOnly,\n readOnly: trulyReadOnly,\n tabIndex: interactive ? undefined : -1,\n value,\n ...inputProps,\n ...props,\n ref: mergeRefs(register, ref),\n onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n }),\n [\n orientation,\n name,\n trulyDisabled,\n trulyReadOnly,\n checked,\n interactive,\n value,\n inputProps,\n register,\n onChange,\n ],\n )\n\n return {\n checked,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,CAAC,yBAAyB,8BAC9BA,gBAAuC,EACrC,MAAM,2BACP,CAAC;AAIJ,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACd,mBAAqC;AA+CzC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,EAAE,KAAK;CACtC,MAAM,OAAO,OAAO;CACpB,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,gCAAgC;AAEpD,QAAO;AACP,UAAS;CAET,MAAMC,eAA2B,aAC9B,UACC,WACE;EACE;EACA,6CAA0B,SAAS;EACnC,oBAAoB;EACpB,6CAA0B,SAAS;EACnC,oBAAoB;EACpB,6CAA0B,SAAS;EACnC,MAAM;EACP,EACD,MACA,MACD,EAAE,EACL;EAAC;EAAU;EAAI;EAAa;EAAU;EAAK,CAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAiBH,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,4BAA4B;CAChC,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,UACvB,CAAC;CACF,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,WAAW,aACd,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAMC,gBAAqC,aACxC,UACC,WACE;EACE,6CAA0B,cAAc;EACxC,4CAAyB,QAAQ;EACjC,6CAA0B,cAAc;EACxC,oBAAoB;EACpB,6CAA0B,cAAc;EACxC,kDAA+B,aAAa;EAC5C,kDAA+B,aAAa;EAC7C,EACD,MACA,MACD,EAAE,EACL;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAoCD,QAAO;EACL;EACA,eApCyC,aACxC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;GAC3B,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,6CAA0B,cAAc;GACxC,4CAAyB,QAAQ;GACjC,6CAA0B,cAAc;GACxC,oBAAoB;GACpB,6CAA0B,cAAc;GACxC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,SAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAK,UAAU,UAAU,IAAI;GAC7B,wCAAqB,MAAM,UAAU,YAAY,UAAU,SAAS;GACrE,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAKC;EACD"}
|
|
@@ -3,13 +3,11 @@ import { ThemeProps } from "../../core/system/index.types.js";
|
|
|
3
3
|
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
|
|
4
4
|
import "../../core/index.js";
|
|
5
5
|
import { WithTransitionProps } from "../motion/index.types.js";
|
|
6
|
-
import "../motion/index.js";
|
|
7
6
|
import { CollapseProps } from "../collapse/collapse.js";
|
|
8
|
-
import "../collapse/index.js";
|
|
9
7
|
import "../../index.js";
|
|
10
8
|
import { AccordionStyle } from "./accordion.style.js";
|
|
11
9
|
import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
|
|
12
|
-
import * as
|
|
10
|
+
import * as react92 from "react";
|
|
13
11
|
|
|
14
12
|
//#region src/components/accordion/accordion.d.ts
|
|
15
13
|
interface AccordionCallBackProps {
|
|
@@ -33,7 +31,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
|
|
|
33
31
|
*/
|
|
34
32
|
items?: AccordionItem[];
|
|
35
33
|
}
|
|
36
|
-
declare const AccordionPropsContext:
|
|
34
|
+
declare const AccordionPropsContext: react92.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
|
|
37
35
|
/**
|
|
38
36
|
* `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
|
|
39
37
|
*
|
|
@@ -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 react93 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/accordion/use-accordion.d.ts
|
|
8
|
-
declare const AccordionDescendantsContext:
|
|
8
|
+
declare const AccordionDescendantsContext: react93.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: react965.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) => react93.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: react965.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) => react93.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: react93.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: react965.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) => react93.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: react93.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
|
|
85
85
|
interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
|
|
86
|
-
declare const AccordionItemContext:
|
|
86
|
+
declare const AccordionItemContext: react93.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) => react93.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: react93.Dispatch<react93.SetStateAction<number>>;
|
|
149
|
+
setIndex: react93.Dispatch<react93.SetStateAction<number | number[]>>;
|
|
150
150
|
toggle: boolean | undefined;
|
|
151
151
|
getRootProps: PropGetter<"div", undefined, undefined>;
|
|
152
152
|
};
|
|
@@ -4,10 +4,9 @@ import "../../core/index.js";
|
|
|
4
4
|
import { ActionBarStyle } from "./action-bar.style.js";
|
|
5
5
|
import { PortalProps } from "../portal/portal.js";
|
|
6
6
|
import { UsePopupAnimationProps } from "../popover/popover.js";
|
|
7
|
-
import "../popover/index.js";
|
|
8
7
|
import { UseActionBarProps } from "./use-action-bar.js";
|
|
9
8
|
import "../../index.js";
|
|
10
|
-
import * as
|
|
9
|
+
import * as react78 from "react";
|
|
11
10
|
import { PropsWithChildren, ReactNode } from "react";
|
|
12
11
|
|
|
13
12
|
//#region src/components/action-bar/action-bar.d.ts
|
|
@@ -29,7 +28,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
|
|
|
29
28
|
*/
|
|
30
29
|
onCloseComplete?: () => void;
|
|
31
30
|
}
|
|
32
|
-
declare const ActionBarPropsContext:
|
|
31
|
+
declare const ActionBarPropsContext: react78.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
|
|
33
32
|
/**
|
|
34
33
|
* `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
|
|
35
34
|
*
|
|
@@ -2,10 +2,9 @@ import { KeyframeIdent, ThemeProps } from "../../core/system/index.types.js";
|
|
|
2
2
|
import { Component } from "../../core/components/index.types.js";
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import { HTMLMotionProps } from "../motion/index.types.js";
|
|
5
|
-
import "../motion/index.js";
|
|
6
5
|
import { AiryStyle } from "./airy.style.js";
|
|
7
6
|
import "../../index.js";
|
|
8
|
-
import * as
|
|
7
|
+
import * as react952 from "react";
|
|
9
8
|
import { ReactNode } from "react";
|
|
10
9
|
|
|
11
10
|
//#region src/components/airy/airy.d.ts
|
|
@@ -57,7 +56,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
|
|
|
57
56
|
*/
|
|
58
57
|
onChange?: (value: KeyframeIdent) => void;
|
|
59
58
|
}
|
|
60
|
-
declare const AiryPropsContext:
|
|
59
|
+
declare const AiryPropsContext: react952.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
|
|
61
60
|
/**
|
|
62
61
|
* `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
|
|
63
62
|
*
|
|
@@ -3,13 +3,10 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
|
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import { AlertStyle } from "./alert.style.js";
|
|
5
5
|
import { IconProps } from "../icon/icon.js";
|
|
6
|
-
import "../icon/index.js";
|
|
7
6
|
import { LoadingProps } from "../loading/loading.js";
|
|
8
|
-
import "../loading/index.js";
|
|
9
7
|
import { StatusScheme } from "../status/status.js";
|
|
10
|
-
import "../status/index.js";
|
|
11
8
|
import "../../index.js";
|
|
12
|
-
import * as
|
|
9
|
+
import * as react105 from "react";
|
|
13
10
|
|
|
14
11
|
//#region src/components/alert/alert.d.ts
|
|
15
12
|
interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
|
|
@@ -20,7 +17,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
|
|
|
20
17
|
*/
|
|
21
18
|
status?: StatusScheme;
|
|
22
19
|
}
|
|
23
|
-
declare const AlertPropsContext:
|
|
20
|
+
declare const AlertPropsContext: react105.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
|
|
24
21
|
/**
|
|
25
22
|
* `Alert` is a component that conveys information to the user.
|
|
26
23
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/alert/alert.style.d.ts
|
|
6
|
-
declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "
|
|
6
|
+
declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
|
|
7
7
|
island: {
|
|
8
8
|
description: {
|
|
9
9
|
color: "fg.muted";
|
|
@@ -3,9 +3,8 @@ import { Component } from "../../core/components/index.types.js";
|
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import { AlphaSliderStyle } from "./alpha-slider.style.js";
|
|
5
5
|
import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
|
|
6
|
-
import "../hue-slider/index.js";
|
|
7
6
|
import "../../index.js";
|
|
8
|
-
import * as
|
|
7
|
+
import * as react91 from "react";
|
|
9
8
|
|
|
10
9
|
//#region src/components/alpha-slider/alpha-slider.d.ts
|
|
11
10
|
interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
|
|
@@ -38,7 +37,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
|
|
|
38
37
|
*/
|
|
39
38
|
trackProps?: AlphaSliderTrackProps;
|
|
40
39
|
}
|
|
41
|
-
declare const AlphaSliderPropsContext:
|
|
40
|
+
declare const AlphaSliderPropsContext: react91.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
|
|
42
41
|
/**
|
|
43
42
|
* `AlphaSlider` is a component used to allow the user to select color transparency.
|
|
44
43
|
*
|
|
@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
|
|
|
2
2
|
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react79 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/aspect-ratio/aspect-ratio.d.ts
|
|
8
8
|
interface AspectRatioProps extends HTMLStyledProps {
|
|
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
|
|
|
13
13
|
*/
|
|
14
14
|
ratio?: StyleValue<number>;
|
|
15
15
|
}
|
|
16
|
-
declare const AspectRatioPropsContext:
|
|
16
|
+
declare const AspectRatioPropsContext: react79.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
|
|
17
17
|
/**
|
|
18
18
|
* `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
|
|
19
19
|
*
|
|
@@ -3,16 +3,14 @@ import { ThemeProps } from "../../core/system/index.types.js";
|
|
|
3
3
|
import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
|
|
4
4
|
import "../../core/index.js";
|
|
5
5
|
import { PopoverContentProps, UsePopoverStyleProps, UsePopupAnimationProps } from "../popover/popover.js";
|
|
6
|
-
import "../popover/index.js";
|
|
7
6
|
import { AutocompleteStyle } from "./autocomplete.style.js";
|
|
8
7
|
import { UseComboboxGroupProps } from "../../hooks/use-combobox/index.js";
|
|
9
8
|
import { UseInputBorderProps } from "../input/use-input-border.js";
|
|
10
9
|
import { InputElementProps } from "../input/input-element.js";
|
|
11
10
|
import { InputGroupRootProps } from "../input/input-group.js";
|
|
12
|
-
import "../input/index.js";
|
|
13
11
|
import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
|
|
14
12
|
import "../../index.js";
|
|
15
|
-
import * as
|
|
13
|
+
import * as react61 from "react";
|
|
16
14
|
import { ReactElement, ReactNode } from "react";
|
|
17
15
|
|
|
18
16
|
//#region src/components/autocomplete/autocomplete.d.ts
|
|
@@ -68,7 +66,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
|
|
|
68
66
|
*/
|
|
69
67
|
rootProps?: InputGroupRootProps;
|
|
70
68
|
}
|
|
71
|
-
declare const AutocompletePropsContext:
|
|
69
|
+
declare const AutocompletePropsContext: react61.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
|
|
72
70
|
/**
|
|
73
71
|
* `Autocomplete` is a component used to display suggestions in response to user text input.
|
|
74
72
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/autocomplete/autocomplete.style.d.ts
|
|
6
|
-
declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "
|
|
6
|
+
declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "empty" | "field" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "empty" | "field" | "valueText">>, {
|
|
7
7
|
xs: {
|
|
8
8
|
empty: {
|
|
9
9
|
gap: "1.5";
|
|
@@ -2,13 +2,11 @@ import { index_d_exports } from "../../utils/index.js";
|
|
|
2
2
|
import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import { UsePopoverProps } from "../popover/use-popover.js";
|
|
5
|
-
import "../popover/index.js";
|
|
6
5
|
import { FieldProps } from "../field/field.js";
|
|
7
|
-
import "../field/index.js";
|
|
8
6
|
import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
|
|
9
7
|
import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
|
|
10
8
|
import "../../index.js";
|
|
11
|
-
import * as
|
|
9
|
+
import * as react62 from "react";
|
|
12
10
|
import { ChangeEvent, ReactNode } from "react";
|
|
13
11
|
|
|
14
12
|
//#region src/components/autocomplete/use-autocomplete.d.ts
|
|
@@ -28,7 +26,7 @@ interface AutocompleteFilter {
|
|
|
28
26
|
}
|
|
29
27
|
type AutocompleteMatcher = typeof index_d_exports.match;
|
|
30
28
|
interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
|
|
31
|
-
declare const AutocompleteContext:
|
|
29
|
+
declare const AutocompleteContext: react62.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
|
|
32
30
|
interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
|
|
33
31
|
/**
|
|
34
32
|
* If `true`, the autocomplete will allow custom value.
|
|
@@ -156,7 +154,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
|
|
|
156
154
|
lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
157
155
|
nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
158
156
|
prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
159
|
-
register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) =>
|
|
157
|
+
register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react62.RefCallback<HTMLDivElement>;
|
|
160
158
|
unregister: (node?: HTMLDivElement | null | undefined) => void;
|
|
161
159
|
value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
162
160
|
values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
|
|
@@ -166,8 +164,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
|
|
|
166
164
|
items: ComboboxItem[];
|
|
167
165
|
max: number | undefined;
|
|
168
166
|
open: boolean;
|
|
169
|
-
setInputValue:
|
|
170
|
-
setValue:
|
|
167
|
+
setInputValue: react62.Dispatch<react62.SetStateAction<string>>;
|
|
168
|
+
setValue: react62.Dispatch<react62.SetStateAction<Multiple extends true ? string[] : string>>;
|
|
171
169
|
value: Multiple extends true ? string[] : string;
|
|
172
170
|
valueMap: {
|
|
173
171
|
[key: string]: ComboboxItemWithValue;
|