@yamada-ui/react 2.2.1-dev-20260428112552 → 2.2.1-dev-20260428120502
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/number-input/use-number-counter.cjs +8 -7
- package/dist/cjs/components/number-input/use-number-counter.cjs.map +1 -1
- package/dist/cjs/components/number-input/use-number-input.cjs +32 -28
- package/dist/cjs/components/number-input/use-number-input.cjs.map +1 -1
- package/dist/esm/components/number-input/use-number-counter.js +8 -7
- package/dist/esm/components/number-input/use-number-counter.js.map +1 -1
- package/dist/esm/components/number-input/use-number-input.js +32 -28
- package/dist/esm/components/number-input/use-number-input.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -4
- 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/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/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/breadcrumb.style.d.ts +1 -1
- 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/chart.d.ts +5 -5
- 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-group.d.ts +0 -2
- package/dist/types/components/checkbox/checkbox.d.ts +4 -5
- 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/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 +4 -7
- package/dist/types/components/dropzone/use-dropzone.d.ts +0 -1
- package/dist/types/components/editable/editable.d.ts +2 -3
- 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/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/use-field-props.d.ts +3 -3
- package/dist/types/components/fieldset/fieldset.d.ts +3 -4
- 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/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 -4
- 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/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 -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/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 -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/use-number-input.d.ts +0 -1
- package/dist/types/components/pagination/pagination.d.ts +2 -3
- 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 -3
- package/dist/types/components/password-input/strength-meter.d.ts +2 -2
- 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 +4 -5
- 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/rating.style.d.ts +2 -2
- 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/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 -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/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/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/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 -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 +182 -183
- 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-combobox/index.d.ts +0 -1
- package/dist/types/hooks/use-counter/index.d.ts +2 -2
- package/dist/types/hooks/use-descendants/index.d.ts +2 -2
- package/dist/types/hooks/use-field-sizing/index.d.ts +2 -2
- package/dist/types/hooks/use-hover/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 +0 -1
- package/dist/types/utils/children.d.ts +2 -2
- package/package.json +2 -2
|
@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
|
|
|
4
4
|
const require_dom = require('../../utils/dom.cjs');
|
|
5
5
|
const require_ref = require('../../utils/ref.cjs');
|
|
6
6
|
const require_utils_index = require('../../utils/index.cjs');
|
|
7
|
+
const require_props = require('../../core/components/props.cjs');
|
|
8
|
+
require('../../core/index.cjs');
|
|
7
9
|
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
|
|
8
10
|
require('../../providers/i18n-provider/index.cjs');
|
|
9
11
|
const require_use_spinner = require('./use-spinner.cjs');
|
|
@@ -20,15 +22,14 @@ const useNumberCounter = ({ decrement, disabled, increment, keepWithinRange, max
|
|
|
20
22
|
const { t } = require_i18n_provider.useI18n("numberInput");
|
|
21
23
|
require_dom.useAttributeObserver(incrementRef, ["disabled"], spinning, stop);
|
|
22
24
|
require_dom.useAttributeObserver(decrementRef, ["disabled"], spinning, stop);
|
|
23
|
-
const getButtonProps = (0, react.useCallback)((props = {}) => ({
|
|
25
|
+
const getButtonProps = (0, react.useCallback)((props = {}) => require_props.mergeProps({
|
|
24
26
|
type: "button",
|
|
25
27
|
disabled,
|
|
26
|
-
tabIndex: -1
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}), [
|
|
28
|
+
tabIndex: -1
|
|
29
|
+
}, rest, props, {
|
|
30
|
+
onPointerLeave: stop,
|
|
31
|
+
onPointerUp: stop
|
|
32
|
+
})(), [
|
|
32
33
|
rest,
|
|
33
34
|
disabled,
|
|
34
35
|
stop
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-number-counter.cjs","names":["useSpinner","useI18n","getButtonProps: PropGetter<\"button\">","getIncrementProps: PropGetter<\"button\">","mergeRefs"],"sources":["../../../../src/components/number-input/use-number-counter.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps, UseCounterReturn } from \"../../hooks/use-counter\"\nimport type { UseSpinnerProps } from \"./use-spinner\"\nimport { useCallback, useRef } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll, mergeRefs, useAttributeObserver } from \"../../utils\"\nimport { useSpinner } from \"./use-spinner\"\n\nexport interface UseNumberCounterProps\n extends\n HTMLProps<\"button\">,\n Pick<UseCounterProps, \"keepWithinRange\">,\n Pick<UseCounterReturn, \"max\" | \"min\">,\n UseSpinnerProps {}\n\nexport const useNumberCounter = ({\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...rest\n}: UseNumberCounterProps) => {\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n const { down, spinning, stop, up } = useSpinner({ decrement, increment })\n const { t } = useI18n(\"numberInput\")\n\n useAttributeObserver(incrementRef, [\"disabled\"], spinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], spinning, stop)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props = {})
|
|
1
|
+
{"version":3,"file":"use-number-counter.cjs","names":["useSpinner","useI18n","getButtonProps: PropGetter<\"button\">","mergeProps","getIncrementProps: PropGetter<\"button\">","mergeRefs"],"sources":["../../../../src/components/number-input/use-number-counter.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps, UseCounterReturn } from \"../../hooks/use-counter\"\nimport type { UseSpinnerProps } from \"./use-spinner\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll, mergeRefs, useAttributeObserver } from \"../../utils\"\nimport { useSpinner } from \"./use-spinner\"\n\nexport interface UseNumberCounterProps\n extends\n HTMLProps<\"button\">,\n Pick<UseCounterProps, \"keepWithinRange\">,\n Pick<UseCounterReturn, \"max\" | \"min\">,\n UseSpinnerProps {}\n\nexport const useNumberCounter = ({\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...rest\n}: UseNumberCounterProps) => {\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n const { down, spinning, stop, up } = useSpinner({ decrement, increment })\n const { t } = useI18n(\"numberInput\")\n\n useAttributeObserver(incrementRef, [\"disabled\"], spinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], spinning, stop)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n type: \"button\",\n disabled,\n tabIndex: -1,\n },\n rest,\n props,\n {\n onPointerLeave: stop,\n onPointerUp: stop,\n },\n )(),\n [rest, disabled, stop],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const trulyDisabled = disabled || (keepWithinRange && max)\n\n return {\n ref: mergeRefs(ref, incrementRef),\n \"aria-label\": t(\"Increase\"),\n ...getButtonProps({ disabled: trulyDisabled, ...props }),\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button !== 0 || trulyDisabled) return\n\n ev.preventDefault()\n up()\n }),\n }\n },\n [getButtonProps, disabled, keepWithinRange, max, up, t],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const trulyDisabled = disabled || (keepWithinRange && min)\n\n return {\n ref: mergeRefs(ref, decrementRef),\n \"aria-label\": t(\"Decrease\"),\n ...getButtonProps({ disabled: trulyDisabled, ...props }),\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button !== 0 || trulyDisabled) return\n\n ev.preventDefault()\n down()\n }),\n }\n },\n [getButtonProps, disabled, keepWithinRange, min, down, t],\n )\n\n return { getDecrementProps, getIncrementProps }\n}\n\nexport type UseNumberCounterReturn = ReturnType<typeof useNumberCounter>\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,oBAAoB,EAC/B,WACA,UACA,WACA,iBACA,KACA,KACA,GAAG,WACwB;CAC3B,MAAM,iCAAyC,KAAK;CACpD,MAAM,iCAAyC,KAAK;CACpD,MAAM,EAAE,MAAM,UAAU,MAAM,OAAOA,+BAAW;EAAE;EAAW;EAAW,CAAC;CACzE,MAAM,EAAE,MAAMC,8BAAQ,cAAc;AAEpC,kCAAqB,cAAc,CAAC,WAAW,EAAE,UAAU,KAAK;AAChE,kCAAqB,cAAc,CAAC,WAAW,EAAE,UAAU,KAAK;CAEhE,MAAMC,yCACH,QAAQ,EAAE,KACTC,yBACE;EACE,MAAM;EACN;EACA,UAAU;EACX,EACD,MACA,OACA;EACE,gBAAgB;EAChB,aAAa;EACd,CACF,EAAE,EACL;EAAC;EAAM;EAAU;EAAK,CACvB;CAED,MAAMC,4CACH,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;EAC1B,MAAM,gBAAgB,YAAa,mBAAmB;AAEtD,SAAO;GACL,KAAKC,sBAAU,KAAK,aAAa;GACjC,cAAc,EAAE,WAAW;GAC3B,GAAG,eAAe;IAAE,UAAU;IAAe,GAAG;IAAO,CAAC;GACxD,iEAA0B,MAAM,gBAAgB,OAAO;AACrD,QAAI,GAAG,WAAW,KAAK,cAAe;AAEtC,OAAG,gBAAgB;AACnB,QAAI;KACJ;GACH;IAEH;EAAC;EAAgB;EAAU;EAAiB;EAAK;EAAI;EAAE,CACxD;AAqBD,QAAO;EAAE,2CAlBN,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;GAC1B,MAAM,gBAAgB,YAAa,mBAAmB;AAEtD,UAAO;IACL,KAAKA,sBAAU,KAAK,aAAa;IACjC,cAAc,EAAE,WAAW;IAC3B,GAAG,eAAe;KAAE,UAAU;KAAe,GAAG;KAAO,CAAC;IACxD,iEAA0B,MAAM,gBAAgB,OAAO;AACrD,SAAI,GAAG,WAAW,KAAK,cAAe;AAEtC,QAAG,gBAAgB;AACnB,WAAM;MACN;IACH;KAEH;GAAC;GAAgB;GAAU;GAAiB;GAAK;GAAM;GAAE,CAC1D;EAE2B;EAAmB"}
|
|
@@ -5,6 +5,8 @@ const require_dom = require('../../utils/dom.cjs');
|
|
|
5
5
|
const require_effect = require('../../utils/effect.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_event_listener_index = require('../../hooks/use-event-listener/index.cjs');
|
|
9
11
|
const require_use_field_props = require('../field/use-field-props.cjs');
|
|
10
12
|
require('../field/index.cjs');
|
|
@@ -160,34 +162,36 @@ const useNumberInput = (props = {}) => {
|
|
|
160
162
|
return {
|
|
161
163
|
getDecrementProps,
|
|
162
164
|
getIncrementProps,
|
|
163
|
-
getInputProps: (0, react.useCallback)(({ ref, ...props$1 } = {}) =>
|
|
164
|
-
...
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
165
|
+
getInputProps: (0, react.useCallback)(({ ref, ...props$1 } = {}) => {
|
|
166
|
+
const { ref: restRef, ...restWithoutRef } = rest;
|
|
167
|
+
return require_props.mergeProps({
|
|
168
|
+
...ariaProps,
|
|
169
|
+
...dataProps,
|
|
170
|
+
type: "text",
|
|
171
|
+
"aria-invalid": (0, require_utils_index.utils_exports.ariaAttr)(ariaProps["aria-invalid"] ?? out),
|
|
172
|
+
"aria-valuemax": maxValue,
|
|
173
|
+
"aria-valuemin": minValue,
|
|
174
|
+
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
175
|
+
"aria-valuetext": valueText,
|
|
176
|
+
autoComplete: "off",
|
|
177
|
+
autoCorrect: "off",
|
|
178
|
+
disabled,
|
|
179
|
+
inputMode: "decimal",
|
|
180
|
+
max: maxValue,
|
|
181
|
+
min: minValue,
|
|
182
|
+
pattern: "[0-9]*(.[0-9]+)?",
|
|
183
|
+
readOnly,
|
|
184
|
+
role: "spinbutton",
|
|
185
|
+
step,
|
|
186
|
+
value: format(value)
|
|
187
|
+
}, restWithoutRef, eventProps, props$1, {
|
|
188
|
+
ref: require_ref.mergeRefs(ref, restRef, inputRef),
|
|
189
|
+
onBlur,
|
|
190
|
+
onChange,
|
|
191
|
+
onFocus,
|
|
192
|
+
onKeyDown
|
|
193
|
+
})();
|
|
194
|
+
}, [
|
|
191
195
|
format,
|
|
192
196
|
out,
|
|
193
197
|
value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-number-input.cjs","names":["useFieldProps","useCounter","value","isComposing","useNumberCounter","props","mergeRefs"],"sources":["../../../../src/components/number-input/use-number-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps } from \"../../hooks/use-counter\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useCounter } from \"../../hooks/use-counter\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport {\n ariaAttr,\n handlerAll,\n isComposing,\n mergeRefs,\n runKeyAction,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useNumberCounter } from \"./use-number-counter\"\n\nconst defaultFormat = (value: number | string) => value.toString()\n\nconst defaultParse = (value: string) => value\n\nconst isDefaultValidCharacter = (char: string) => /^[Ee0-9+\\-.]$/.test(char)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const modifierKey = ctrlKey || altKey || metaKey\n const singleCharacterKey = key.length === 1\n\n if (!singleCharacterKey || modifierKey) return true\n\n return isValid(key)\n}\n\nconst getStepRatio = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\nexport interface UseNumberInputProps\n extends\n Omit<HTMLProps<\"input\">, keyof UseCounterProps>,\n UseCounterProps,\n FieldProps {\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the button.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n props: {\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n disabled,\n focusInputOnChange = true,\n format = defaultFormat,\n getAriaValueText,\n isValidCharacter = isDefaultValidCharacter,\n keepWithinRange = true,\n max: maxValue = Number.MAX_SAFE_INTEGER,\n min: minValue = Number.MIN_SAFE_INTEGER,\n parse = defaultParse,\n precision,\n readOnly,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly || disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const {\n cast,\n max,\n min,\n out,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max: maxValue,\n min: minValue,\n precision,\n step,\n value: valueProp,\n onChange: onChangeProp,\n })\n const selectionRef = useRef<null | {\n end: null | number\n start: null | number\n }>(null)\n const valueText = useMemo(() => {\n let text = getAriaValueText?.(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const increment = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.increment(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const decrement = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.decrement(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n const { selectionEnd, selectionStart, value } = ev.currentTarget\n\n update(sanitize(parse(value)))\n\n selectionRef.current = { end: selectionEnd, start: selectionStart }\n },\n [parse, sanitize, update],\n )\n\n const onFocus = useCallback((ev: FocusEvent<HTMLInputElement>) => {\n if (!selectionRef.current) return\n\n const { end, start } = selectionRef.current\n const { selectionStart, value } = ev.currentTarget\n\n ev.currentTarget.selectionStart = start ?? value.length\n ev.currentTarget.selectionEnd = end ?? selectionStart\n }, [])\n\n const onBlur = useCallback(() => {\n if (!clampValueOnBlur) return\n\n let nextValue = value\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < minValue) nextValue = minValue\n\n if (valueAsNumber > maxValue) nextValue = maxValue\n\n cast(nextValue)\n }\n }, [\n cast,\n clampValueOnBlur,\n maxValue,\n minValue,\n setValue,\n value,\n valueAsNumber,\n ])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n\n runKeyAction(ev, {\n ArrowDown: () => decrement(stepValue),\n ArrowUp: () => increment(stepValue),\n End: () => update(maxValue),\n Home: () => update(minValue),\n })\n },\n [decrement, increment, isValidCharacter, maxValue, minValue, step, update],\n )\n\n const { getDecrementProps, getIncrementProps } = useNumberCounter({\n \"aria-disabled\": ariaAttr(!interactive),\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...dataProps,\n })\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n setValue(sanitize(parse(inputRef.current.value)))\n }, [parse, sanitize])\n\n useEventListener(\n inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const focused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !focused) return\n\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(stepValue)\n } else if (direction === 1) {\n decrement(stepValue)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...ariaProps,\n ...dataProps,\n type: \"text\",\n \"aria-invalid\": ariaAttr(ariaProps[\"aria-invalid\"] ?? out),\n \"aria-valuemax\": maxValue,\n \"aria-valuemin\": minValue,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n disabled,\n inputMode: \"decimal\",\n max: maxValue,\n min: minValue,\n pattern: \"[0-9]*(.[0-9]+)?\",\n readOnly,\n role: \"spinbutton\",\n step,\n value: format(value),\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, inputRef),\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus),\n onKeyDown: handlerAll(rest.onKeyDown, props.onKeyDown, onKeyDown),\n }),\n [\n format,\n out,\n value,\n valueText,\n ariaProps,\n dataProps,\n eventProps,\n maxValue,\n minValue,\n valueAsNumber,\n disabled,\n readOnly,\n step,\n rest,\n onKeyDown,\n onBlur,\n onFocus,\n onChange,\n ],\n )\n\n return { getDecrementProps, getIncrementProps, getInputProps }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-number-input.cjs","names":["useFieldProps","useCounter","value","isComposing","useNumberCounter","props","mergeProps","mergeRefs"],"sources":["../../../../src/components/number-input/use-number-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps } from \"../../hooks/use-counter\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useCounter } from \"../../hooks/use-counter\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport {\n ariaAttr,\n isComposing,\n mergeRefs,\n runKeyAction,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useNumberCounter } from \"./use-number-counter\"\n\nconst defaultFormat = (value: number | string) => value.toString()\n\nconst defaultParse = (value: string) => value\n\nconst isDefaultValidCharacter = (char: string) => /^[Ee0-9+\\-.]$/.test(char)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const modifierKey = ctrlKey || altKey || metaKey\n const singleCharacterKey = key.length === 1\n\n if (!singleCharacterKey || modifierKey) return true\n\n return isValid(key)\n}\n\nconst getStepRatio = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\nexport interface UseNumberInputProps\n extends\n Omit<HTMLProps<\"input\">, keyof UseCounterProps>,\n UseCounterProps,\n FieldProps {\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the button.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n props: {\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n disabled,\n focusInputOnChange = true,\n format = defaultFormat,\n getAriaValueText,\n isValidCharacter = isDefaultValidCharacter,\n keepWithinRange = true,\n max: maxValue = Number.MAX_SAFE_INTEGER,\n min: minValue = Number.MIN_SAFE_INTEGER,\n parse = defaultParse,\n precision,\n readOnly,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly || disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const {\n cast,\n max,\n min,\n out,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max: maxValue,\n min: minValue,\n precision,\n step,\n value: valueProp,\n onChange: onChangeProp,\n })\n const selectionRef = useRef<null | {\n end: null | number\n start: null | number\n }>(null)\n const valueText = useMemo(() => {\n let text = getAriaValueText?.(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const increment = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.increment(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const decrement = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.decrement(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n const { selectionEnd, selectionStart, value } = ev.currentTarget\n\n update(sanitize(parse(value)))\n\n selectionRef.current = { end: selectionEnd, start: selectionStart }\n },\n [parse, sanitize, update],\n )\n\n const onFocus = useCallback((ev: FocusEvent<HTMLInputElement>) => {\n if (!selectionRef.current) return\n\n const { end, start } = selectionRef.current\n const { selectionStart, value } = ev.currentTarget\n\n ev.currentTarget.selectionStart = start ?? value.length\n ev.currentTarget.selectionEnd = end ?? selectionStart\n }, [])\n\n const onBlur = useCallback(() => {\n if (!clampValueOnBlur) return\n\n let nextValue = value\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < minValue) nextValue = minValue\n\n if (valueAsNumber > maxValue) nextValue = maxValue\n\n cast(nextValue)\n }\n }, [\n cast,\n clampValueOnBlur,\n maxValue,\n minValue,\n setValue,\n value,\n valueAsNumber,\n ])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n\n runKeyAction(ev, {\n ArrowDown: () => decrement(stepValue),\n ArrowUp: () => increment(stepValue),\n End: () => update(maxValue),\n Home: () => update(minValue),\n })\n },\n [decrement, increment, isValidCharacter, maxValue, minValue, step, update],\n )\n\n const { getDecrementProps, getIncrementProps } = useNumberCounter({\n \"aria-disabled\": ariaAttr(!interactive),\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...dataProps,\n })\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n setValue(sanitize(parse(inputRef.current.value)))\n }, [parse, sanitize])\n\n useEventListener(\n inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const focused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !focused) return\n\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(stepValue)\n } else if (direction === 1) {\n decrement(stepValue)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const { ref: restRef, ...restWithoutRef } = rest\n\n return mergeProps(\n {\n ...ariaProps,\n ...dataProps,\n type: \"text\",\n \"aria-invalid\": ariaAttr(ariaProps[\"aria-invalid\"] ?? out),\n \"aria-valuemax\": maxValue,\n \"aria-valuemin\": minValue,\n \"aria-valuenow\": Number.isNaN(valueAsNumber)\n ? undefined\n : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n disabled,\n inputMode: \"decimal\",\n max: maxValue,\n min: minValue,\n pattern: \"[0-9]*(.[0-9]+)?\",\n readOnly,\n role: \"spinbutton\",\n step,\n value: format(value),\n },\n restWithoutRef,\n eventProps,\n props,\n {\n ref: mergeRefs(ref, restRef, inputRef),\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n },\n )()\n },\n [\n format,\n out,\n value,\n valueText,\n ariaProps,\n dataProps,\n eventProps,\n maxValue,\n minValue,\n valueAsNumber,\n disabled,\n readOnly,\n step,\n rest,\n onKeyDown,\n onBlur,\n onFocus,\n onChange,\n ],\n )\n\n return { getDecrementProps, getIncrementProps, getInputProps }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n"],"mappings":"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"}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
import { useAttributeObserver } from "../../utils/dom.js";
|
|
4
4
|
import { mergeRefs } from "../../utils/ref.js";
|
|
5
5
|
import { utils_exports } from "../../utils/index.js";
|
|
6
|
+
import { mergeProps } from "../../core/components/props.js";
|
|
7
|
+
import "../../core/index.js";
|
|
6
8
|
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
|
|
7
9
|
import "../../providers/i18n-provider/index.js";
|
|
8
10
|
import { useSpinner } from "./use-spinner.js";
|
|
@@ -19,15 +21,14 @@ const useNumberCounter = ({ decrement, disabled, increment, keepWithinRange, max
|
|
|
19
21
|
const { t } = useI18n("numberInput");
|
|
20
22
|
useAttributeObserver(incrementRef, ["disabled"], spinning, stop);
|
|
21
23
|
useAttributeObserver(decrementRef, ["disabled"], spinning, stop);
|
|
22
|
-
const getButtonProps = useCallback((props = {}) => ({
|
|
24
|
+
const getButtonProps = useCallback((props = {}) => mergeProps({
|
|
23
25
|
type: "button",
|
|
24
26
|
disabled,
|
|
25
|
-
tabIndex: -1
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}), [
|
|
27
|
+
tabIndex: -1
|
|
28
|
+
}, rest, props, {
|
|
29
|
+
onPointerLeave: stop,
|
|
30
|
+
onPointerUp: stop
|
|
31
|
+
})(), [
|
|
31
32
|
rest,
|
|
32
33
|
disabled,
|
|
33
34
|
stop
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-number-counter.js","names":["getButtonProps: PropGetter<\"button\">","getIncrementProps: PropGetter<\"button\">"],"sources":["../../../../src/components/number-input/use-number-counter.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps, UseCounterReturn } from \"../../hooks/use-counter\"\nimport type { UseSpinnerProps } from \"./use-spinner\"\nimport { useCallback, useRef } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll, mergeRefs, useAttributeObserver } from \"../../utils\"\nimport { useSpinner } from \"./use-spinner\"\n\nexport interface UseNumberCounterProps\n extends\n HTMLProps<\"button\">,\n Pick<UseCounterProps, \"keepWithinRange\">,\n Pick<UseCounterReturn, \"max\" | \"min\">,\n UseSpinnerProps {}\n\nexport const useNumberCounter = ({\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...rest\n}: UseNumberCounterProps) => {\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n const { down, spinning, stop, up } = useSpinner({ decrement, increment })\n const { t } = useI18n(\"numberInput\")\n\n useAttributeObserver(incrementRef, [\"disabled\"], spinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], spinning, stop)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props = {})
|
|
1
|
+
{"version":3,"file":"use-number-counter.js","names":["getButtonProps: PropGetter<\"button\">","getIncrementProps: PropGetter<\"button\">"],"sources":["../../../../src/components/number-input/use-number-counter.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps, UseCounterReturn } from \"../../hooks/use-counter\"\nimport type { UseSpinnerProps } from \"./use-spinner\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll, mergeRefs, useAttributeObserver } from \"../../utils\"\nimport { useSpinner } from \"./use-spinner\"\n\nexport interface UseNumberCounterProps\n extends\n HTMLProps<\"button\">,\n Pick<UseCounterProps, \"keepWithinRange\">,\n Pick<UseCounterReturn, \"max\" | \"min\">,\n UseSpinnerProps {}\n\nexport const useNumberCounter = ({\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...rest\n}: UseNumberCounterProps) => {\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n const { down, spinning, stop, up } = useSpinner({ decrement, increment })\n const { t } = useI18n(\"numberInput\")\n\n useAttributeObserver(incrementRef, [\"disabled\"], spinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], spinning, stop)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n type: \"button\",\n disabled,\n tabIndex: -1,\n },\n rest,\n props,\n {\n onPointerLeave: stop,\n onPointerUp: stop,\n },\n )(),\n [rest, disabled, stop],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const trulyDisabled = disabled || (keepWithinRange && max)\n\n return {\n ref: mergeRefs(ref, incrementRef),\n \"aria-label\": t(\"Increase\"),\n ...getButtonProps({ disabled: trulyDisabled, ...props }),\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button !== 0 || trulyDisabled) return\n\n ev.preventDefault()\n up()\n }),\n }\n },\n [getButtonProps, disabled, keepWithinRange, max, up, t],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const trulyDisabled = disabled || (keepWithinRange && min)\n\n return {\n ref: mergeRefs(ref, decrementRef),\n \"aria-label\": t(\"Decrease\"),\n ...getButtonProps({ disabled: trulyDisabled, ...props }),\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button !== 0 || trulyDisabled) return\n\n ev.preventDefault()\n down()\n }),\n }\n },\n [getButtonProps, disabled, keepWithinRange, min, down, t],\n )\n\n return { getDecrementProps, getIncrementProps }\n}\n\nexport type UseNumberCounterReturn = ReturnType<typeof useNumberCounter>\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAa,oBAAoB,EAC/B,WACA,UACA,WACA,iBACA,KACA,KACA,GAAG,WACwB;CAC3B,MAAM,eAAe,OAA0B,KAAK;CACpD,MAAM,eAAe,OAA0B,KAAK;CACpD,MAAM,EAAE,MAAM,UAAU,MAAM,OAAO,WAAW;EAAE;EAAW;EAAW,CAAC;CACzE,MAAM,EAAE,MAAM,QAAQ,cAAc;AAEpC,sBAAqB,cAAc,CAAC,WAAW,EAAE,UAAU,KAAK;AAChE,sBAAqB,cAAc,CAAC,WAAW,EAAE,UAAU,KAAK;CAEhE,MAAMA,iBAAuC,aAC1C,QAAQ,EAAE,KACT,WACE;EACE,MAAM;EACN;EACA,UAAU;EACX,EACD,MACA,OACA;EACE,gBAAgB;EAChB,aAAa;EACd,CACF,EAAE,EACL;EAAC;EAAM;EAAU;EAAK,CACvB;CAED,MAAMC,oBAA0C,aAC7C,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;EAC1B,MAAM,gBAAgB,YAAa,mBAAmB;AAEtD,SAAO;GACL,KAAK,UAAU,KAAK,aAAa;GACjC,cAAc,EAAE,WAAW;GAC3B,GAAG,eAAe;IAAE,UAAU;IAAe,GAAG;IAAO,CAAC;GACxD,6CAA0B,MAAM,gBAAgB,OAAO;AACrD,QAAI,GAAG,WAAW,KAAK,cAAe;AAEtC,OAAG,gBAAgB;AACnB,QAAI;KACJ;GACH;IAEH;EAAC;EAAgB;EAAU;EAAiB;EAAK;EAAI;EAAE,CACxD;AAqBD,QAAO;EAAE,mBAnBuC,aAC7C,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;GAC1B,MAAM,gBAAgB,YAAa,mBAAmB;AAEtD,UAAO;IACL,KAAK,UAAU,KAAK,aAAa;IACjC,cAAc,EAAE,WAAW;IAC3B,GAAG,eAAe;KAAE,UAAU;KAAe,GAAG;KAAO,CAAC;IACxD,6CAA0B,MAAM,gBAAgB,OAAO;AACrD,SAAI,GAAG,WAAW,KAAK,cAAe;AAEtC,QAAG,gBAAgB;AACnB,WAAM;MACN;IACH;KAEH;GAAC;GAAgB;GAAU;GAAiB;GAAK;GAAM;GAAE,CAC1D;EAE2B;EAAmB"}
|
|
@@ -4,6 +4,8 @@ import { isComposing, runKeyAction } from "../../utils/dom.js";
|
|
|
4
4
|
import { useSafeLayoutEffect } from "../../utils/effect.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 { useEventListener } from "../../hooks/use-event-listener/index.js";
|
|
8
10
|
import { useFieldProps } from "../field/use-field-props.js";
|
|
9
11
|
import "../field/index.js";
|
|
@@ -159,34 +161,36 @@ const useNumberInput = (props = {}) => {
|
|
|
159
161
|
return {
|
|
160
162
|
getDecrementProps,
|
|
161
163
|
getIncrementProps,
|
|
162
|
-
getInputProps: useCallback(({ ref, ...props$1 } = {}) =>
|
|
163
|
-
...
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
164
|
+
getInputProps: useCallback(({ ref, ...props$1 } = {}) => {
|
|
165
|
+
const { ref: restRef, ...restWithoutRef } = rest;
|
|
166
|
+
return mergeProps({
|
|
167
|
+
...ariaProps,
|
|
168
|
+
...dataProps,
|
|
169
|
+
type: "text",
|
|
170
|
+
"aria-invalid": (0, utils_exports.ariaAttr)(ariaProps["aria-invalid"] ?? out),
|
|
171
|
+
"aria-valuemax": maxValue,
|
|
172
|
+
"aria-valuemin": minValue,
|
|
173
|
+
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
174
|
+
"aria-valuetext": valueText,
|
|
175
|
+
autoComplete: "off",
|
|
176
|
+
autoCorrect: "off",
|
|
177
|
+
disabled,
|
|
178
|
+
inputMode: "decimal",
|
|
179
|
+
max: maxValue,
|
|
180
|
+
min: minValue,
|
|
181
|
+
pattern: "[0-9]*(.[0-9]+)?",
|
|
182
|
+
readOnly,
|
|
183
|
+
role: "spinbutton",
|
|
184
|
+
step,
|
|
185
|
+
value: format(value)
|
|
186
|
+
}, restWithoutRef, eventProps, props$1, {
|
|
187
|
+
ref: mergeRefs(ref, restRef, inputRef),
|
|
188
|
+
onBlur,
|
|
189
|
+
onChange,
|
|
190
|
+
onFocus,
|
|
191
|
+
onKeyDown
|
|
192
|
+
})();
|
|
193
|
+
}, [
|
|
190
194
|
format,
|
|
191
195
|
out,
|
|
192
196
|
value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-number-input.js","names":["value","props"],"sources":["../../../../src/components/number-input/use-number-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps } from \"../../hooks/use-counter\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useCounter } from \"../../hooks/use-counter\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport {\n ariaAttr,\n handlerAll,\n isComposing,\n mergeRefs,\n runKeyAction,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useNumberCounter } from \"./use-number-counter\"\n\nconst defaultFormat = (value: number | string) => value.toString()\n\nconst defaultParse = (value: string) => value\n\nconst isDefaultValidCharacter = (char: string) => /^[Ee0-9+\\-.]$/.test(char)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const modifierKey = ctrlKey || altKey || metaKey\n const singleCharacterKey = key.length === 1\n\n if (!singleCharacterKey || modifierKey) return true\n\n return isValid(key)\n}\n\nconst getStepRatio = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\nexport interface UseNumberInputProps\n extends\n Omit<HTMLProps<\"input\">, keyof UseCounterProps>,\n UseCounterProps,\n FieldProps {\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the button.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n props: {\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n disabled,\n focusInputOnChange = true,\n format = defaultFormat,\n getAriaValueText,\n isValidCharacter = isDefaultValidCharacter,\n keepWithinRange = true,\n max: maxValue = Number.MAX_SAFE_INTEGER,\n min: minValue = Number.MIN_SAFE_INTEGER,\n parse = defaultParse,\n precision,\n readOnly,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly || disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const {\n cast,\n max,\n min,\n out,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max: maxValue,\n min: minValue,\n precision,\n step,\n value: valueProp,\n onChange: onChangeProp,\n })\n const selectionRef = useRef<null | {\n end: null | number\n start: null | number\n }>(null)\n const valueText = useMemo(() => {\n let text = getAriaValueText?.(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const increment = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.increment(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const decrement = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.decrement(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n const { selectionEnd, selectionStart, value } = ev.currentTarget\n\n update(sanitize(parse(value)))\n\n selectionRef.current = { end: selectionEnd, start: selectionStart }\n },\n [parse, sanitize, update],\n )\n\n const onFocus = useCallback((ev: FocusEvent<HTMLInputElement>) => {\n if (!selectionRef.current) return\n\n const { end, start } = selectionRef.current\n const { selectionStart, value } = ev.currentTarget\n\n ev.currentTarget.selectionStart = start ?? value.length\n ev.currentTarget.selectionEnd = end ?? selectionStart\n }, [])\n\n const onBlur = useCallback(() => {\n if (!clampValueOnBlur) return\n\n let nextValue = value\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < minValue) nextValue = minValue\n\n if (valueAsNumber > maxValue) nextValue = maxValue\n\n cast(nextValue)\n }\n }, [\n cast,\n clampValueOnBlur,\n maxValue,\n minValue,\n setValue,\n value,\n valueAsNumber,\n ])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n\n runKeyAction(ev, {\n ArrowDown: () => decrement(stepValue),\n ArrowUp: () => increment(stepValue),\n End: () => update(maxValue),\n Home: () => update(minValue),\n })\n },\n [decrement, increment, isValidCharacter, maxValue, minValue, step, update],\n )\n\n const { getDecrementProps, getIncrementProps } = useNumberCounter({\n \"aria-disabled\": ariaAttr(!interactive),\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...dataProps,\n })\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n setValue(sanitize(parse(inputRef.current.value)))\n }, [parse, sanitize])\n\n useEventListener(\n inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const focused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !focused) return\n\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(stepValue)\n } else if (direction === 1) {\n decrement(stepValue)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...ariaProps,\n ...dataProps,\n type: \"text\",\n \"aria-invalid\": ariaAttr(ariaProps[\"aria-invalid\"] ?? out),\n \"aria-valuemax\": maxValue,\n \"aria-valuemin\": minValue,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n disabled,\n inputMode: \"decimal\",\n max: maxValue,\n min: minValue,\n pattern: \"[0-9]*(.[0-9]+)?\",\n readOnly,\n role: \"spinbutton\",\n step,\n value: format(value),\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, inputRef),\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus),\n onKeyDown: handlerAll(rest.onKeyDown, props.onKeyDown, onKeyDown),\n }),\n [\n format,\n out,\n value,\n valueText,\n ariaProps,\n dataProps,\n eventProps,\n maxValue,\n minValue,\n valueAsNumber,\n disabled,\n readOnly,\n step,\n rest,\n onKeyDown,\n onBlur,\n onFocus,\n onChange,\n ],\n )\n\n return { getDecrementProps, getIncrementProps, getInputProps }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-number-input.js","names":["value","props"],"sources":["../../../../src/components/number-input/use-number-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseCounterProps } from \"../../hooks/use-counter\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useCounter } from \"../../hooks/use-counter\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport {\n ariaAttr,\n isComposing,\n mergeRefs,\n runKeyAction,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useNumberCounter } from \"./use-number-counter\"\n\nconst defaultFormat = (value: number | string) => value.toString()\n\nconst defaultParse = (value: string) => value\n\nconst isDefaultValidCharacter = (char: string) => /^[Ee0-9+\\-.]$/.test(char)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const modifierKey = ctrlKey || altKey || metaKey\n const singleCharacterKey = key.length === 1\n\n if (!singleCharacterKey || modifierKey) return true\n\n return isValid(key)\n}\n\nconst getStepRatio = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\nexport interface UseNumberInputProps\n extends\n Omit<HTMLProps<\"input\">, keyof UseCounterProps>,\n UseCounterProps,\n FieldProps {\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the button.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n props: {\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n disabled,\n focusInputOnChange = true,\n format = defaultFormat,\n getAriaValueText,\n isValidCharacter = isDefaultValidCharacter,\n keepWithinRange = true,\n max: maxValue = Number.MAX_SAFE_INTEGER,\n min: minValue = Number.MIN_SAFE_INTEGER,\n parse = defaultParse,\n precision,\n readOnly,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly || disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const {\n cast,\n max,\n min,\n out,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max: maxValue,\n min: minValue,\n precision,\n step,\n value: valueProp,\n onChange: onChangeProp,\n })\n const selectionRef = useRef<null | {\n end: null | number\n start: null | number\n }>(null)\n const valueText = useMemo(() => {\n let text = getAriaValueText?.(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const increment = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.increment(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const decrement = useCallback(\n (value: number = step) => {\n if (!interactive) return\n\n counter.decrement(value)\n\n if (!focusInputOnChange) return\n\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n },\n [interactive, counter, step, focusInputOnChange],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n const { selectionEnd, selectionStart, value } = ev.currentTarget\n\n update(sanitize(parse(value)))\n\n selectionRef.current = { end: selectionEnd, start: selectionStart }\n },\n [parse, sanitize, update],\n )\n\n const onFocus = useCallback((ev: FocusEvent<HTMLInputElement>) => {\n if (!selectionRef.current) return\n\n const { end, start } = selectionRef.current\n const { selectionStart, value } = ev.currentTarget\n\n ev.currentTarget.selectionStart = start ?? value.length\n ev.currentTarget.selectionEnd = end ?? selectionStart\n }, [])\n\n const onBlur = useCallback(() => {\n if (!clampValueOnBlur) return\n\n let nextValue = value\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < minValue) nextValue = minValue\n\n if (valueAsNumber > maxValue) nextValue = maxValue\n\n cast(nextValue)\n }\n }, [\n cast,\n clampValueOnBlur,\n maxValue,\n minValue,\n setValue,\n value,\n valueAsNumber,\n ])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (isComposing(ev)) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n\n runKeyAction(ev, {\n ArrowDown: () => decrement(stepValue),\n ArrowUp: () => increment(stepValue),\n End: () => update(maxValue),\n Home: () => update(minValue),\n })\n },\n [decrement, increment, isValidCharacter, maxValue, minValue, step, update],\n )\n\n const { getDecrementProps, getIncrementProps } = useNumberCounter({\n \"aria-disabled\": ariaAttr(!interactive),\n decrement,\n disabled,\n increment,\n keepWithinRange,\n max,\n min,\n ...dataProps,\n })\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n setValue(sanitize(parse(inputRef.current.value)))\n }, [parse, sanitize])\n\n useEventListener(\n inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const focused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !focused) return\n\n ev.preventDefault()\n\n const stepValue = getStepRatio(ev) * step\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(stepValue)\n } else if (direction === 1) {\n decrement(stepValue)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => {\n const { ref: restRef, ...restWithoutRef } = rest\n\n return mergeProps(\n {\n ...ariaProps,\n ...dataProps,\n type: \"text\",\n \"aria-invalid\": ariaAttr(ariaProps[\"aria-invalid\"] ?? out),\n \"aria-valuemax\": maxValue,\n \"aria-valuemin\": minValue,\n \"aria-valuenow\": Number.isNaN(valueAsNumber)\n ? undefined\n : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n disabled,\n inputMode: \"decimal\",\n max: maxValue,\n min: minValue,\n pattern: \"[0-9]*(.[0-9]+)?\",\n readOnly,\n role: \"spinbutton\",\n step,\n value: format(value),\n },\n restWithoutRef,\n eventProps,\n props,\n {\n ref: mergeRefs(ref, restRef, inputRef),\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n },\n )()\n },\n [\n format,\n out,\n value,\n valueText,\n ariaProps,\n dataProps,\n eventProps,\n maxValue,\n minValue,\n valueAsNumber,\n disabled,\n readOnly,\n step,\n rest,\n onKeyDown,\n onBlur,\n onFocus,\n onChange,\n ],\n )\n\n return { getDecrementProps, getIncrementProps, getInputProps }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n"],"mappings":"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"}
|
|
@@ -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 react1168 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: react1168.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
|
*
|
|
@@ -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 react1156 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/accordion/use-accordion.d.ts
|
|
8
|
-
declare const AccordionDescendantsContext:
|
|
8
|
+
declare const AccordionDescendantsContext: react1156.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: react42.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) => react1156.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: react42.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) => react1156.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: react1156.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: react42.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) => react1156.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: react1156.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
|
|
85
85
|
interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
|
|
86
|
-
declare const AccordionItemContext:
|
|
86
|
+
declare const AccordionItemContext: react1156.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) => react1156.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: react1156.Dispatch<react1156.SetStateAction<number>>;
|
|
149
|
+
setIndex: react1156.Dispatch<react1156.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 react1154 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: react1154.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 react1155 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: react1155.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 react1153 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: react1153.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,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 react1145 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: react1145.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
|
*
|