@plexui/ui 0.19.0 → 0.20.0
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/README.md +1 -3
- package/dist/es/components/Accordion/Accordion.js +2 -2
- package/dist/es/components/Accordion/Accordion.js.map +1 -1
- package/dist/es/components/Accordion/index.js +1 -1
- package/dist/es/components/Alert/Alert.js +6 -6
- package/dist/es/components/Alert/Alert.js.map +1 -1
- package/dist/es/components/Alert/index.js +1 -1
- package/dist/es/components/Avatar/Avatar.js +12 -5
- package/dist/es/components/Avatar/Avatar.js.map +1 -1
- package/dist/es/components/Avatar/AvatarGroup.js +2 -2
- package/dist/es/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/es/components/Avatar/index.js +2 -2
- package/dist/es/components/Badge/index.js +3 -3
- package/dist/es/components/Badge/index.js.map +1 -1
- package/dist/es/components/Breadcrumb/Breadcrumb.js +34 -0
- package/dist/es/components/Breadcrumb/Breadcrumb.js.map +1 -0
- package/dist/es/components/Breadcrumb/index.js +2 -0
- package/dist/es/components/Breadcrumb/index.js.map +1 -0
- package/dist/es/components/Button/Button.js +7 -7
- package/dist/es/components/Button/Button.js.map +1 -1
- package/dist/es/components/Button/CopyButton.js +25 -13
- package/dist/es/components/Button/CopyButton.js.map +1 -1
- package/dist/es/components/Button/index.js +2 -2
- package/dist/es/components/ButtonGroup/ButtonGroup.js +2 -2
- package/dist/es/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/es/components/ButtonGroup/index.js +1 -1
- package/dist/es/components/Card/Card.js +4 -3
- package/dist/es/components/Card/Card.js.map +1 -1
- package/dist/es/components/Card/index.js +1 -1
- package/dist/es/components/Checkbox/Checkbox.js +12 -6
- package/dist/es/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/es/components/Checkbox/index.js +1 -1
- package/dist/es/components/CodeBlock/CodeBlock.js +25 -25
- package/dist/es/components/CodeBlock/CodeBlock.js.map +1 -1
- package/dist/es/components/CodeBlock/CollapsibleCodeBlock.js +6 -4
- package/dist/es/components/CodeBlock/CollapsibleCodeBlock.js.map +1 -1
- package/dist/es/components/CodeBlock/index.js +2 -2
- package/dist/es/components/DataTable/DataTable.js +108 -27
- package/dist/es/components/DataTable/DataTable.js.map +1 -1
- package/dist/es/components/DataTable/DataTableColumnHeader.js +2 -2
- package/dist/es/components/DataTable/DataTableColumnHeader.js.map +1 -1
- package/dist/es/components/DataTable/DataTablePagination.js +8 -4
- package/dist/es/components/DataTable/DataTablePagination.js.map +1 -1
- package/dist/es/components/DataTable/columnHelpers.js +3 -3
- package/dist/es/components/DataTable/index.js +4 -4
- package/dist/es/components/DateInput/DateInput.js +21 -13
- package/dist/es/components/DateInput/DateInput.js.map +1 -1
- package/dist/es/components/DateInput/index.js +1 -1
- package/dist/es/components/DatePicker/Calendar.js +136 -32
- package/dist/es/components/DatePicker/Calendar.js.map +1 -1
- package/dist/es/components/DatePicker/DatePicker.js +15 -11
- package/dist/es/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/es/components/DatePicker/index.js +1 -1
- package/dist/es/components/DateRangePicker/Calendar.js +125 -22
- package/dist/es/components/DateRangePicker/Calendar.js.map +1 -1
- package/dist/es/components/DateRangePicker/DateRangePicker.js +10 -9
- package/dist/es/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/es/components/DateRangePicker/Trigger.js +12 -9
- package/dist/es/components/DateRangePicker/Trigger.js.map +1 -1
- package/dist/es/components/DateRangePicker/index.js +2 -2
- package/dist/es/components/Dialog/Dialog.js +11 -6
- package/dist/es/components/Dialog/Dialog.js.map +1 -1
- package/dist/es/components/Dialog/index.js +1 -1
- package/dist/es/components/Dialog/index.js.map +1 -1
- package/dist/es/components/EmptyMessage/EmptyMessage.js +4 -4
- package/dist/es/components/EmptyMessage/EmptyMessage.js.map +1 -1
- package/dist/es/components/EmptyMessage/index.js +1 -1
- package/dist/es/components/Field/Field.js +22 -7
- package/dist/es/components/Field/Field.js.map +1 -1
- package/dist/es/components/Field/index.js +1 -1
- package/dist/es/components/FieldError/FieldError.js +4 -4
- package/dist/es/components/FieldError/FieldError.js.map +1 -1
- package/dist/es/components/FieldError/index.js +1 -1
- package/dist/es/components/FileUpload/FileUpload.js +12 -9
- package/dist/es/components/FileUpload/FileUpload.js.map +1 -1
- package/dist/es/components/FileUpload/index.js +1 -1
- package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js +31 -4
- package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js.map +1 -1
- package/dist/es/components/FloatingLabelInput/index.js +1 -1
- package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js +28 -8
- package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js.map +1 -1
- package/dist/es/components/FloatingLabelSelect/index.js +1 -1
- package/dist/es/components/Icon/aliases.js +20 -20
- package/dist/es/components/Icon/index.js +653 -653
- package/dist/es/components/Image/Image.js +19 -7
- package/dist/es/components/Image/Image.js.map +1 -1
- package/dist/es/components/Image/index.js +1 -1
- package/dist/es/components/Indicator/CircularProgress.js +3 -3
- package/dist/es/components/Indicator/CircularProgress.js.map +1 -1
- package/dist/es/components/Indicator/LoadingDots.js +1 -1
- package/dist/es/components/Indicator/LoadingDots.js.map +1 -1
- package/dist/es/components/Indicator/LoadingIndicator.js +2 -2
- package/dist/es/components/Indicator/LoadingIndicator.js.map +1 -1
- package/dist/es/components/Indicator/index.js +3 -3
- package/dist/es/components/Input/Input.js +16 -5
- package/dist/es/components/Input/Input.js.map +1 -1
- package/dist/es/components/Input/index.js +1 -1
- package/dist/es/components/InputGroup/InputGroup.js +60 -0
- package/dist/es/components/InputGroup/InputGroup.js.map +1 -0
- package/dist/es/components/InputGroup/index.js +2 -0
- package/dist/es/components/InputGroup/index.js.map +1 -0
- package/dist/es/components/Kbd/Kbd.js +13 -0
- package/dist/es/components/Kbd/Kbd.js.map +1 -0
- package/dist/es/components/Kbd/index.js +2 -0
- package/dist/es/components/Kbd/index.js.map +1 -0
- package/dist/es/components/Label/Label.js +1 -1
- package/dist/es/components/Label/Label.js.map +1 -1
- package/dist/es/components/Label/index.js +1 -1
- package/dist/es/components/Markdown/Markdown.js +8 -8
- package/dist/es/components/Markdown/Markdown.js.map +1 -1
- package/dist/es/components/Markdown/directives.js +2 -2
- package/dist/es/components/Markdown/index.js +4 -5
- package/dist/es/components/Markdown/index.js.map +1 -1
- package/dist/es/components/MarkdownEditor/MarkdownEditor.js +35 -11
- package/dist/es/components/MarkdownEditor/MarkdownEditor.js.map +1 -1
- package/dist/es/components/MarkdownEditor/index.js +1 -1
- package/dist/es/components/Menu/Menu.js +26 -18
- package/dist/es/components/Menu/Menu.js.map +1 -1
- package/dist/es/components/Menu/index.js +1 -1
- package/dist/es/components/OTPInput/OTPInput.js +51 -34
- package/dist/es/components/OTPInput/OTPInput.js.map +1 -1
- package/dist/es/components/OTPInput/index.js +1 -1
- package/dist/es/components/PlexUIProvider/PlexUIProvider.js +3 -1
- package/dist/es/components/PlexUIProvider/PlexUIProvider.js.map +1 -1
- package/dist/es/components/PlexUIProvider/index.js +1 -1
- package/dist/es/components/PlexUIProvider/internal.js +1 -1
- package/dist/es/components/Popover/Popover.js +7 -7
- package/dist/es/components/Popover/Popover.js.map +1 -1
- package/dist/es/components/Popover/index.js +2 -3
- package/dist/es/components/Popover/index.js.map +1 -1
- package/dist/es/components/Popover/usePopoverController.js +2 -2
- package/dist/es/components/Progress/Progress.js +1 -1
- package/dist/es/components/Progress/Progress.js.map +1 -1
- package/dist/es/components/Progress/index.js +1 -1
- package/dist/es/components/ProgressSteps/ProgressSteps.js +6 -4
- package/dist/es/components/ProgressSteps/ProgressSteps.js.map +1 -1
- package/dist/es/components/ProgressSteps/index.js +1 -1
- package/dist/es/components/RadioGroup/RadioGroup.js +10 -6
- package/dist/es/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/es/components/RadioGroup/index.js +1 -1
- package/dist/es/components/SegmentedControl/index.js +1 -1
- package/dist/es/components/Select/Select.js +104 -67
- package/dist/es/components/Select/Select.js.map +1 -1
- package/dist/es/components/Select/index.js +1 -1
- package/dist/es/components/SelectControl/SelectControl.js +10 -5
- package/dist/es/components/SelectControl/SelectControl.js.map +1 -1
- package/dist/es/components/SelectControl/index.js +1 -1
- package/dist/es/components/Separator/Separator.js +1 -1
- package/dist/es/components/Separator/Separator.js.map +1 -1
- package/dist/es/components/Separator/index.js +1 -1
- package/dist/es/components/ShimmerText/ShimmerText.js +1 -1
- package/dist/es/components/ShimmerText/ShimmerText.js.map +1 -1
- package/dist/es/components/ShimmerText/index.js +1 -1
- package/dist/es/components/Sidebar/Sidebar.js +37 -29
- package/dist/es/components/Sidebar/Sidebar.js.map +1 -1
- package/dist/es/components/Sidebar/index.js +2 -2
- package/dist/es/components/Sidebar/useSidebarContext.js +17 -19
- package/dist/es/components/Sidebar/useSidebarContext.js.map +1 -1
- package/dist/es/components/Skeleton/index.js +1 -1
- package/dist/es/components/Skeleton/index.js.map +1 -1
- package/dist/es/components/Slider/Slider.js +48 -19
- package/dist/es/components/Slider/Slider.js.map +1 -1
- package/dist/es/components/Slider/index.js +1 -1
- package/dist/es/components/StatCard/StatCard.js +5 -5
- package/dist/es/components/StatCard/StatCard.js.map +1 -1
- package/dist/es/components/StatCard/index.js +1 -1
- package/dist/es/components/Switch/Switch.js +7 -3
- package/dist/es/components/Switch/Switch.js.map +1 -1
- package/dist/es/components/Switch/index.js +1 -1
- package/dist/es/components/Table/Table.js +1 -1
- package/dist/es/components/Table/Table.js.map +1 -1
- package/dist/es/components/Table/index.js +1 -1
- package/dist/es/components/Tabs/Tabs.js +154 -6
- package/dist/es/components/Tabs/Tabs.js.map +1 -1
- package/dist/es/components/Tabs/index.js +1 -1
- package/dist/es/components/Tabs/overflow.js +44 -0
- package/dist/es/components/Tabs/overflow.js.map +1 -0
- package/dist/es/components/TagInput/TagInput.js +47 -23
- package/dist/es/components/TagInput/TagInput.js.map +1 -1
- package/dist/es/components/TagInput/index.js +1 -1
- package/dist/es/components/TextLink/TextLink.js +16 -5
- package/dist/es/components/TextLink/TextLink.js.map +1 -1
- package/dist/es/components/TextLink/index.js +1 -1
- package/dist/es/components/Textarea/Textarea.js +4 -4
- package/dist/es/components/Textarea/Textarea.js.map +1 -1
- package/dist/es/components/Textarea/index.js +1 -1
- package/dist/es/components/Toast/Toaster.js +2 -2
- package/dist/es/components/Toast/Toaster.js.map +1 -1
- package/dist/es/components/Toast/index.js +1 -1
- package/dist/es/components/Tooltip/CopyTooltip.js +30 -9
- package/dist/es/components/Tooltip/CopyTooltip.js.map +1 -1
- package/dist/es/components/Tooltip/Tooltip.js +3 -3
- package/dist/es/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/es/components/Tooltip/index.js +2 -2
- package/dist/es/components/Transition/Animate.js +4 -4
- package/dist/es/components/Transition/Animate.js.map +1 -1
- package/dist/es/components/Transition/AnimateLayout.js +4 -4
- package/dist/es/components/Transition/AnimateLayout.js.map +1 -1
- package/dist/es/components/Transition/AnimateLayoutGroup.js +12 -8
- package/dist/es/components/Transition/AnimateLayoutGroup.js.map +1 -1
- package/dist/es/components/Transition/SlotTransitionGroup.js +4 -4
- package/dist/es/components/Transition/TransitionGroup.js +5 -5
- package/dist/es/components/Transition/TransitionGroup.js.map +1 -1
- package/dist/es/components/Transition/getDisableAnimations.js +1 -1
- package/dist/es/components/Transition/index.js +5 -5
- package/dist/es/components/Transition/shared.js +7 -5
- package/dist/es/components/Transition/shared.js.map +1 -1
- package/dist/es/components/UIProvider/UIProvider.js +1 -1
- package/dist/es/components/UIProvider/index.js +1 -1
- package/dist/es/components/UIProvider/internal.js +1 -1
- package/dist/es/hooks/useAnimatedScrollTo.js +1 -1
- package/dist/es/hooks/useBreakpoints.js +8 -2
- package/dist/es/hooks/useBreakpoints.js.map +1 -1
- package/dist/es/hooks/useEscCloseStack.js +1 -1
- package/dist/es/hooks/usePrevious.js +7 -5
- package/dist/es/hooks/usePrevious.js.map +1 -1
- package/dist/es/hooks/useTextSelection.js +2 -2
- package/dist/es/hooks/useTrailingValue.js +1 -1
- package/dist/es/lib/constants.js +1 -1
- package/dist/es/lib/helpers.js +1 -1
- package/dist/es/lib/helpers.js.map +1 -1
- package/dist/es/lib/renderHelpers.js +15 -6
- package/dist/es/lib/renderHelpers.js.map +1 -1
- package/dist/es/lib/theme.js +16 -16
- package/dist/es/lib/theme.js.map +1 -1
- package/dist/es/lib/userAgent.js +3 -2
- package/dist/es/lib/userAgent.js.map +1 -1
- package/dist/es/styles/base.css +1 -102
- package/dist/es/styles/globals.css +1 -50
- package/dist/es/styles/index.css +1 -25
- package/dist/es/styles/katex.min.css +1 -1296
- package/dist/es/styles/tailwind-utilities.css +1 -1316
- package/dist/es/styles/variables-components.css +1 -626
- package/dist/es/styles/variables-primitive.css +1 -327
- package/dist/es/styles/variables-semantic.css +1 -609
- package/dist/es/styles/variables-tailwind-theme.css +1 -34
- package/dist/es/styles/variables-tokens-root.css +1 -41
- package/dist/es/types.js +1 -1
- package/dist/es/types.js.map +1 -1
- package/dist/es/vite/index.js +3 -53
- package/dist/es/vite/index.js.map +1 -1
- package/dist/types/components/Accordion/index.d.ts +1 -1
- package/dist/types/components/Alert/Alert.d.ts +8 -2
- package/dist/types/components/Alert/index.d.ts +1 -1
- package/dist/types/components/Avatar/Avatar.d.ts +1 -1
- package/dist/types/components/Avatar/index.d.ts +2 -2
- package/dist/types/components/Badge/index.d.ts +1 -1
- package/dist/types/components/Breadcrumb/Breadcrumb.d.ts +34 -0
- package/dist/types/components/Breadcrumb/index.d.ts +1 -0
- package/dist/types/components/Button/Button.d.ts +3 -3
- package/dist/types/components/Button/CopyButton.d.ts +9 -4
- package/dist/types/components/Button/index.d.ts +2 -2
- package/dist/types/components/ButtonGroup/ButtonGroup.d.ts +4 -3
- package/dist/types/components/ButtonGroup/index.d.ts +1 -1
- package/dist/types/components/Card/index.d.ts +1 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts +3 -1
- package/dist/types/components/Checkbox/index.d.ts +1 -1
- package/dist/types/components/CodeBlock/index.d.ts +2 -2
- package/dist/types/components/DataTable/DataTable.d.ts +3 -2
- package/dist/types/components/DataTable/index.d.ts +4 -4
- package/dist/types/components/DateInput/DateInput.d.ts +1 -1
- package/dist/types/components/DateInput/index.d.ts +1 -1
- package/dist/types/components/DatePicker/DatePicker.d.ts +7 -6
- package/dist/types/components/DatePicker/context.d.ts +1 -1
- package/dist/types/components/DatePicker/index.d.ts +2 -2
- package/dist/types/components/DateRangePicker/Calendar.d.ts +1 -1
- package/dist/types/components/DateRangePicker/DateRangePicker.d.ts +5 -5
- package/dist/types/components/DateRangePicker/context.d.ts +2 -2
- package/dist/types/components/DateRangePicker/index.d.ts +2 -2
- package/dist/types/components/Dialog/Dialog.d.ts +19 -1
- package/dist/types/components/Dialog/index.d.ts +1 -1
- package/dist/types/components/EmptyMessage/EmptyMessage.d.ts +15 -3
- package/dist/types/components/EmptyMessage/index.d.ts +1 -1
- package/dist/types/components/Field/Field.d.ts +14 -4
- package/dist/types/components/Field/index.d.ts +1 -1
- package/dist/types/components/FieldError/FieldError.d.ts +7 -1
- package/dist/types/components/FieldError/index.d.ts +1 -1
- package/dist/types/components/FileUpload/index.d.ts +1 -1
- package/dist/types/components/FloatingLabelInput/index.d.ts +1 -1
- package/dist/types/components/FloatingLabelSelect/index.d.ts +1 -1
- package/dist/types/components/Icon/aliases.d.ts +20 -20
- package/dist/types/components/Icon/index.d.ts +653 -653
- package/dist/types/components/Image/Image.d.ts +1 -1
- package/dist/types/components/Image/index.d.ts +1 -1
- package/dist/types/components/Indicator/index.d.ts +3 -3
- package/dist/types/components/Input/Input.d.ts +2 -2
- package/dist/types/components/Input/index.d.ts +1 -1
- package/dist/types/components/InputGroup/InputGroup.d.ts +78 -0
- package/dist/types/components/InputGroup/index.d.ts +1 -0
- package/dist/types/components/Kbd/Kbd.d.ts +20 -0
- package/dist/types/components/Kbd/index.d.ts +1 -0
- package/dist/types/components/Label/index.d.ts +1 -1
- package/dist/types/components/Markdown/Markdown.d.ts +1 -1
- package/dist/types/components/Markdown/index.d.ts +4 -4
- package/dist/types/components/MarkdownEditor/MarkdownEditor.d.ts +6 -2
- package/dist/types/components/MarkdownEditor/index.d.ts +1 -1
- package/dist/types/components/Menu/Menu.d.ts +11 -3
- package/dist/types/components/Menu/index.d.ts +1 -1
- package/dist/types/components/OTPInput/index.d.ts +1 -1
- package/dist/types/components/PlexUIProvider/PlexUIProvider.d.ts +0 -11
- package/dist/types/components/PlexUIProvider/index.d.ts +1 -1
- package/dist/types/components/Popover/index.d.ts +2 -2
- package/dist/types/components/Progress/index.d.ts +1 -1
- package/dist/types/components/ProgressSteps/ProgressSteps.d.ts +1 -1
- package/dist/types/components/ProgressSteps/index.d.ts +1 -1
- package/dist/types/components/RadioGroup/RadioGroup.d.ts +3 -1
- package/dist/types/components/RadioGroup/index.d.ts +1 -1
- package/dist/types/components/SegmentedControl/index.d.ts +2 -2
- package/dist/types/components/Select/Select.d.ts +8 -1
- package/dist/types/components/Select/index.d.ts +1 -1
- package/dist/types/components/SelectControl/SelectControl.d.ts +1 -1
- package/dist/types/components/SelectControl/index.d.ts +1 -1
- package/dist/types/components/Separator/index.d.ts +1 -1
- package/dist/types/components/ShimmerText/index.d.ts +1 -1
- package/dist/types/components/Sidebar/Sidebar.d.ts +4 -8
- package/dist/types/components/Sidebar/index.d.ts +4 -4
- package/dist/types/components/Slider/Slider.d.ts +8 -0
- package/dist/types/components/Slider/index.d.ts +2 -2
- package/dist/types/components/StatCard/index.d.ts +1 -1
- package/dist/types/components/Switch/index.d.ts +1 -1
- package/dist/types/components/Table/index.d.ts +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts +15 -2
- package/dist/types/components/Tabs/index.d.ts +2 -2
- package/dist/types/components/Tabs/overflow.d.ts +17 -0
- package/dist/types/components/TagInput/TagInput.d.ts +1 -1
- package/dist/types/components/TagInput/index.d.ts +1 -1
- package/dist/types/components/TextLink/index.d.ts +1 -1
- package/dist/types/components/Textarea/Textarea.d.ts +1 -1
- package/dist/types/components/Textarea/index.d.ts +1 -1
- package/dist/types/components/Toast/index.d.ts +1 -1
- package/dist/types/components/Tooltip/CopyTooltip.d.ts +6 -1
- package/dist/types/components/Tooltip/index.d.ts +2 -2
- package/dist/types/components/Transition/Animate.d.ts +2 -2
- package/dist/types/components/Transition/AnimateLayout.d.ts +2 -2
- package/dist/types/components/Transition/AnimateLayoutGroup.d.ts +2 -2
- package/dist/types/components/Transition/SlotTransitionGroup.d.ts +1 -1
- package/dist/types/components/Transition/TransitionGroup.d.ts +1 -1
- package/dist/types/components/Transition/index.d.ts +5 -5
- package/dist/types/components/UIProvider/index.d.ts +1 -1
- package/dist/types/global.d.ts +5 -1
- package/dist/types/lib/constants.d.ts +1 -1
- package/dist/types/lib/helpers.d.ts +4 -4
- package/dist/types/lib/theme.d.ts +1 -1
- package/dist/types/types.d.ts +2 -15
- package/dist/types/vite/index.d.ts +2 -55
- package/package.json +10 -18
- package/dist/es/components/Accordion/Accordion.module.css +0 -89
- package/dist/es/components/Alert/Alert.module.css +0 -187
- package/dist/es/components/Avatar/Avatar.module.css +0 -168
- package/dist/es/components/Avatar/AvatarGroup.module.css +0 -26
- package/dist/es/components/Badge/Badge.module.css +0 -196
- package/dist/es/components/Button/Button.module.css +0 -859
- package/dist/es/components/ButtonGroup/ButtonGroup.module.css +0 -159
- package/dist/es/components/Card/Card.module.css +0 -125
- package/dist/es/components/Checkbox/Checkbox.module.css +0 -198
- package/dist/es/components/CodeBlock/CodeBlock.module.css +0 -137
- package/dist/es/components/DataTable/DataTable.module.css +0 -108
- package/dist/es/components/DatePicker/Calendar.module.css +0 -271
- package/dist/es/components/DateRangePicker/Calendar.module.css +0 -295
- package/dist/es/components/DateRangePicker/Trigger.module.css +0 -25
- package/dist/es/components/Dialog/Dialog.module.css +0 -133
- package/dist/es/components/EmptyMessage/EmptyMessage.module.css +0 -82
- package/dist/es/components/Field/Field.module.css +0 -137
- package/dist/es/components/FieldError/FieldError.module.css +0 -22
- package/dist/es/components/FileUpload/FileUpload.module.css +0 -133
- package/dist/es/components/FloatingLabelInput/FloatingLabelInput.module.css +0 -220
- package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.module.css +0 -146
- package/dist/es/components/Image/Image.module.css +0 -9
- package/dist/es/components/Indicator/CircularProgress.module.css +0 -28
- package/dist/es/components/Indicator/LoadingDots.module.css +0 -35
- package/dist/es/components/Indicator/LoadingIndicator.module.css +0 -41
- package/dist/es/components/Input/Input.module.css +0 -507
- package/dist/es/components/Label/Label.module.css +0 -16
- package/dist/es/components/Markdown/Markdown.module.css +0 -233
- package/dist/es/components/MarkdownEditor/MarkdownEditor.module.css +0 -297
- package/dist/es/components/Menu/Menu.module.css +0 -377
- package/dist/es/components/OTPInput/OTPInput.module.css +0 -66
- package/dist/es/components/Popover/Popover.module.css +0 -82
- package/dist/es/components/Progress/Progress.module.css +0 -34
- package/dist/es/components/ProgressSteps/ProgressSteps.module.css +0 -246
- package/dist/es/components/RadioGroup/RadioGroup.module.css +0 -137
- package/dist/es/components/Select/Select.module.css +0 -310
- package/dist/es/components/SelectControl/SelectControl.module.css +0 -558
- package/dist/es/components/Separator/Separator.module.css +0 -16
- package/dist/es/components/ShimmerText/ShimmerText.module.css +0 -43
- package/dist/es/components/Sidebar/Sidebar.module.css +0 -909
- package/dist/es/components/Skeleton/Skeleton.module.css +0 -17
- package/dist/es/components/Slider/Slider.module.css +0 -203
- package/dist/es/components/StatCard/StatCard.module.css +0 -234
- package/dist/es/components/Switch/Switch.module.css +0 -121
- package/dist/es/components/Table/Table.module.css +0 -56
- package/dist/es/components/Tabs/Tabs.module.css +0 -672
- package/dist/es/components/TagInput/TagInput.module.css +0 -320
- package/dist/es/components/TextLink/TextLink.module.css +0 -50
- package/dist/es/components/Textarea/Textarea.module.css +0 -272
- package/dist/es/components/Toast/Toast.module.css +0 -84
- package/dist/es/components/Tooltip/Tooltip.module.css +0 -91
- package/dist/es/components/Transition/Animate.module.css +0 -54
- package/dist/es/components/Transition/AnimateLayout.module.css +0 -101
- package/dist/es/components/Transition/AnimateLayoutGroup.module.css +0 -72
- package/dist/es/components/Transition/TransitionGroup.module.css +0 -4
|
@@ -2,11 +2,15 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
import { Fragment, forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
|
|
5
|
-
import { FieldError } from "../FieldError";
|
|
6
|
-
import s from "
|
|
5
|
+
import { FieldError } from "../FieldError/index.js";
|
|
6
|
+
import s from "@plexui/styles/components/OTPInput/OTPInput.module.css";
|
|
7
7
|
function sanitizeDigits(value, length) {
|
|
8
8
|
return value.replace(/\D/g, "").slice(0, length);
|
|
9
9
|
}
|
|
10
|
+
// One entry per cell, "" when empty
|
|
11
|
+
function toCells(value, length) {
|
|
12
|
+
return Array.from({ length }, (_, index) => value[index] ?? "");
|
|
13
|
+
}
|
|
10
14
|
function shouldShowGap(index, grouping) {
|
|
11
15
|
let pos = 0;
|
|
12
16
|
for (const groupSize of grouping) {
|
|
@@ -21,39 +25,39 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
21
25
|
const length = Math.max(1, Math.floor(lengthProp));
|
|
22
26
|
const controlledValue = useMemo(() => sanitizeDigits(value ?? "", length), [value, length]);
|
|
23
27
|
const isControlled = value !== undefined;
|
|
24
|
-
|
|
28
|
+
// The digit of every cell, so clearing or filling one cell never moves the
|
|
29
|
+
// others; the value is the filled cells' digits in order
|
|
30
|
+
const [cells, setCells] = useState(() => toCells(controlledValue, length));
|
|
25
31
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
26
32
|
const rootRef = useRef(null);
|
|
27
33
|
const inputRefs = useRef([]);
|
|
28
34
|
useImperativeHandle(ref, () => rootRef.current, []);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
setInternalValue((current) => sanitizeDigits(current, length));
|
|
35
|
-
}, [controlledValue, isControlled, length]);
|
|
36
|
-
const currentValue = isControlled ? controlledValue : internalValue;
|
|
37
|
-
const digits = useMemo(() => Array.from({ length }, (_, index) => currentValue[index] ?? ""), [currentValue, length]);
|
|
35
|
+
const ownCells = useMemo(() => Array.from({ length }, (_, index) => cells[index] ?? ""), [cells, length]);
|
|
36
|
+
const currentValue = isControlled ? controlledValue : ownCells.join("");
|
|
37
|
+
// The cells keep their gaps while they spell the value; any other value
|
|
38
|
+
// (set by the parent) fills the cells from the start
|
|
39
|
+
const digits = useMemo(() => (ownCells.join("") === currentValue ? ownCells : toCells(currentValue, length)), [ownCells, currentValue, length]);
|
|
38
40
|
const errorId = `otp-input-${useId()}-error`;
|
|
39
41
|
useEffect(() => {
|
|
40
42
|
if (!autoFocus || disabled)
|
|
41
43
|
return;
|
|
42
44
|
inputRefs.current[0]?.focus();
|
|
43
45
|
}, [autoFocus, disabled]);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
// The value the field's own last edit produced, until the value changes:
|
|
47
|
+
// a field the user empties keeps the caret where it is
|
|
48
|
+
const ownValueRef = useRef(null);
|
|
49
|
+
const commitDigits = useCallback((nextDigits) => {
|
|
50
|
+
// Kept when controlled too: the parent's value then keeps these gaps
|
|
51
|
+
setCells(nextDigits);
|
|
52
|
+
const nextValue = nextDigits.join("");
|
|
53
|
+
ownValueRef.current = nextValue;
|
|
49
54
|
if (nextValue !== currentValue) {
|
|
50
55
|
onChange?.(nextValue);
|
|
51
56
|
}
|
|
52
57
|
if (nextValue.length === length) {
|
|
53
58
|
onComplete?.(nextValue);
|
|
54
59
|
}
|
|
55
|
-
|
|
56
|
-
}, [currentValue, isControlled, length, onChange, onComplete]);
|
|
60
|
+
}, [currentValue, length, onChange, onComplete]);
|
|
57
61
|
const focusCell = useCallback((index) => {
|
|
58
62
|
const clampedIndex = Math.max(0, Math.min(index, length - 1));
|
|
59
63
|
const input = inputRefs.current[clampedIndex];
|
|
@@ -62,6 +66,19 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
62
66
|
input.focus();
|
|
63
67
|
input.setSelectionRange(1, 1);
|
|
64
68
|
}, [length]);
|
|
69
|
+
// A field cleared from outside (a wrong code wiped by the form) puts the
|
|
70
|
+
// caret back in the first cell, when the focus was in the field already
|
|
71
|
+
const hadValueRef = useRef(currentValue.length > 0);
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
const filled = currentValue.length > 0;
|
|
74
|
+
const fromOutside = ownValueRef.current !== currentValue;
|
|
75
|
+
ownValueRef.current = null;
|
|
76
|
+
const root = rootRef.current;
|
|
77
|
+
if (!filled && hadValueRef.current && fromOutside && !disabled && root?.contains(document.activeElement)) {
|
|
78
|
+
focusCell(0);
|
|
79
|
+
}
|
|
80
|
+
hadValueRef.current = filled;
|
|
81
|
+
}, [currentValue, disabled, focusCell]);
|
|
65
82
|
const handleCellClick = useCallback((index) => {
|
|
66
83
|
if (disabled)
|
|
67
84
|
return;
|
|
@@ -82,10 +99,10 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
82
99
|
nextDigits[writeIndex] = digit;
|
|
83
100
|
writeIndex += 1;
|
|
84
101
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
focusCell(
|
|
88
|
-
}, [
|
|
102
|
+
commitDigits(nextDigits);
|
|
103
|
+
// The cell after the pasted digits
|
|
104
|
+
focusCell(Math.min(writeIndex, length - 1));
|
|
105
|
+
}, [commitDigits, digits, disabled, focusCell, length]);
|
|
89
106
|
const handleChange = useCallback((index, evt) => {
|
|
90
107
|
if (disabled)
|
|
91
108
|
return;
|
|
@@ -93,14 +110,14 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
93
110
|
if (!typedDigits) {
|
|
94
111
|
const nextDigits = [...digits];
|
|
95
112
|
nextDigits[index] = "";
|
|
96
|
-
|
|
113
|
+
commitDigits(nextDigits);
|
|
97
114
|
return;
|
|
98
115
|
}
|
|
99
116
|
const nextDigits = [...digits];
|
|
100
117
|
if (typedDigits.length === 1) {
|
|
101
118
|
nextDigits[index] = typedDigits[0];
|
|
102
|
-
|
|
103
|
-
if (index < length - 1
|
|
119
|
+
commitDigits(nextDigits);
|
|
120
|
+
if (index < length - 1) {
|
|
104
121
|
focusCell(index + 1);
|
|
105
122
|
}
|
|
106
123
|
return;
|
|
@@ -112,10 +129,10 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
112
129
|
nextDigits[writeIndex] = digit;
|
|
113
130
|
writeIndex += 1;
|
|
114
131
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
focusCell(
|
|
118
|
-
}, [
|
|
132
|
+
commitDigits(nextDigits);
|
|
133
|
+
// The cell after the typed digits
|
|
134
|
+
focusCell(Math.min(writeIndex, length - 1));
|
|
135
|
+
}, [commitDigits, digits, disabled, focusCell, length]);
|
|
119
136
|
const handleKeyDown = useCallback((index, evt) => {
|
|
120
137
|
if (disabled)
|
|
121
138
|
return;
|
|
@@ -124,12 +141,12 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
124
141
|
const nextDigits = [...digits];
|
|
125
142
|
if (nextDigits[index]) {
|
|
126
143
|
nextDigits[index] = "";
|
|
127
|
-
|
|
144
|
+
commitDigits(nextDigits);
|
|
128
145
|
return;
|
|
129
146
|
}
|
|
130
147
|
if (index > 0) {
|
|
131
148
|
nextDigits[index - 1] = "";
|
|
132
|
-
|
|
149
|
+
commitDigits(nextDigits);
|
|
133
150
|
focusCell(index - 1);
|
|
134
151
|
}
|
|
135
152
|
return;
|
|
@@ -138,7 +155,7 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
138
155
|
evt.preventDefault();
|
|
139
156
|
const nextDigits = [...digits];
|
|
140
157
|
nextDigits[index] = "";
|
|
141
|
-
|
|
158
|
+
commitDigits(nextDigits);
|
|
142
159
|
return;
|
|
143
160
|
}
|
|
144
161
|
if (evt.key === "ArrowLeft") {
|
|
@@ -150,7 +167,7 @@ export const OTPInput = forwardRef(function OTPInput(props, ref) {
|
|
|
150
167
|
evt.preventDefault();
|
|
151
168
|
focusCell(index + 1);
|
|
152
169
|
}
|
|
153
|
-
}, [
|
|
170
|
+
}, [commitDigits, digits, disabled, focusCell]);
|
|
154
171
|
const handleBlur = useCallback(() => {
|
|
155
172
|
requestAnimationFrame(() => {
|
|
156
173
|
const activeElement = document.activeElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,OAAO,CAAC,MAAM,uBAAuB,CAAA;AAerC,SAAS,cAAc,CAAC,KAAa,EAAE,MAAc;IACnD,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;AAClD,CAAC;AAED,SAAS,aAAa,CAAC,KAAa,EAAE,QAAkB;IACtD,IAAI,GAAG,GAAG,CAAC,CAAA;IACX,KAAK,MAAM,SAAS,IAAI,QAAQ,EAAE,CAAC;QACjC,GAAG,IAAI,SAAS,CAAA;QAChB,IAAI,KAAK,KAAK,GAAG;YAAE,OAAO,IAAI,CAAA;IAChC,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAgC,SAAS,QAAQ,CAAC,KAAK,EAAE,GAAG;IAC5F,MAAM,EACJ,MAAM,EAAE,UAAU,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GACV,GAAG,KAAK,CAAA;IAET,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAA;IAClD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAC3F,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAA;IAExC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IAEpD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IACnD,MAAM,SAAS,GAAG,MAAM,CAAiC,EAAE,CAAC,CAAA;IAE5D,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAyB,EAAE,EAAE,CAAC,CAAA;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,gBAAgB,CAAC,eAAe,CAAC,CAAA;YACjC,OAAM;QACR,CAAC;QACD,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAChE,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAA;IAE3C,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAA;IACnE,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EACrE,CAAC,YAAY,EAAE,MAAM,CAAC,CACvB,CAAA;IAED,MAAM,OAAO,GAAG,aAAa,KAAK,EAAE,QAAQ,CAAA;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,QAAQ;YAAE,OAAM;QAClC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAA;IAC/B,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEzB,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,YAAoB,EAAE,EAAE;QACvB,MAAM,SAAS,GAAG,cAAc,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;QACtD,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,gBAAgB,CAAC,SAAS,CAAC,CAAA;QAC7B,CAAC;QACD,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;YAC/B,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAA;QACvB,CAAC;QACD,IAAI,SAAS,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAChC,UAAU,EAAE,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,CAC3D,CAAA;IAED,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAC9C,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;QAC7D,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;QAC7C,IAAI,CAAC,KAAK;YAAE,OAAM;QAClB,KAAK,CAAC,KAAK,EAAE,CAAA;QACb,KAAK,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACpD,IAAI,QAAQ;YAAE,OAAM;QACpB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAA;IAEzB,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAa,EAAE,GAA2C,EAAE,EAAE;QAC7D,IAAI,QAAQ;YAAE,OAAM;QACpB,GAAG,CAAC,cAAc,EAAE,CAAA;QACpB,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;QAC9E,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;QAC9B,IAAI,UAAU,GAAG,KAAK,CAAA;QAEtB,KAAK,MAAM,KAAK,IAAI,YAAY,EAAE,CAAC;YACjC,IAAI,UAAU,IAAI,MAAM;gBAAE,MAAK;YAC/B,UAAU,CAAC,UAAU,CAAC,GAAG,KAAK,CAAA;YAC9B,UAAU,IAAI,CAAC,CAAA;QACjB,CAAC;QAED,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;QAClD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;QAC7D,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3B,CAAC,EACD,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,CACnD,CAAA;IAED,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAa,EAAE,GAAwC,EAAE,EAAE;QAC1D,IAAI,QAAQ;YAAE,OAAM;QACpB,MAAM,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QAE9D,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;YAC9B,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;YACtB,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;YAChC,OAAM;QACR,CAAC;QAED,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;QAE9B,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,UAAU,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;YAClC,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;YAClD,IAAI,KAAK,GAAG,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC;gBACnD,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;YACtB,CAAC;YACD,OAAM;QACR,CAAC;QAED,IAAI,UAAU,GAAG,KAAK,CAAA;QACtB,KAAK,MAAM,KAAK,IAAI,WAAW,EAAE,CAAC;YAChC,IAAI,UAAU,IAAI,MAAM;gBAAE,MAAK;YAC/B,UAAU,CAAC,UAAU,CAAC,GAAG,KAAK,CAAA;YAC9B,UAAU,IAAI,CAAC,CAAA;QACjB,CAAC;QAED,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;QAClD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;QAC7D,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3B,CAAC,EACD,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,CACnD,CAAA;IAED,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAa,EAAE,GAA0C,EAAE,EAAE;QAC5D,IAAI,QAAQ;YAAE,OAAM;QAEpB,IAAI,GAAG,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC5B,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;YAE9B,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBACtB,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;gBACtB,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;gBAChC,OAAM;YACR,CAAC;YAED,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;gBACd,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;gBAC1B,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;gBAChC,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;YACtB,CAAC;YACD,OAAM;QACR,CAAC;QAED,IAAI,GAAG,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACzB,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;YAC9B,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;YACtB,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;YAChC,OAAM;QACR,CAAC;QAED,IAAI,GAAG,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC5B,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;YACpB,OAAM;QACR,CAAC;QAED,IAAI,GAAG,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC7B,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EACD,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAC3C,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,qBAAqB,CAAC,GAAG,EAAE;YACzB,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAA;YAC5C,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,aAAa,CAAC,CAAA;YACnF,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACtB,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA;YACrB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,eAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aACnD,cAAK,SAAS,EAAE,CAAC,CAAC,KAAK,YACpB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;oBACnC,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;oBAEpE,OAAO,CACL,MAAC,QAAQ,eACN,UAAU,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,wBAAgB,EACzD,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;oCACtB,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,YAAY,KAAK,KAAK;oCACvC,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;iCAChC,CAAC,kBACY,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBACvB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,aAErC,gBACE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;4CACf,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;wCACpC,CAAC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,CAAC,SAAS,EACtB,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,EAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACrC,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,gBAC7B,SAAS,KAAK,GAAG,CAAC,EAAE,kBAClB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,sBACtB,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACpD,YAAY,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,GACnD,EACD,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,YAAY,KAAK,KAAK,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,GAAI,IAC7E,KAjCO,KAAK,CAkCT,CACZ,CAAA;gBACH,CAAC,CAAC,GACE,EACL,YAAY,IAAI,CACf,KAAC,UAAU,IAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAAY,YAC/C,YAAY,GACF,CACd,IACG,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n Fragment,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\"\n\nimport { FieldError } from \"../FieldError\"\n\nimport s from \"./OTPInput.module.css\"\n\nexport type OTPInputProps = {\n length?: number\n value?: string\n onChange?: (value: string) => void\n onComplete?: (value: string) => void\n grouping?: number[]\n invalid?: boolean\n errorMessage?: string\n disabled?: boolean\n autoFocus?: boolean\n className?: string\n}\n\nfunction sanitizeDigits(value: string, length: number): string {\n return value.replace(/\\D/g, \"\").slice(0, length)\n}\n\nfunction shouldShowGap(index: number, grouping: number[]): boolean {\n let pos = 0\n for (const groupSize of grouping) {\n pos += groupSize\n if (index === pos) return true\n }\n return false\n}\n\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(function OTPInput(props, ref) {\n const {\n length: lengthProp = 6,\n value,\n onChange,\n onComplete,\n grouping,\n invalid = false,\n errorMessage,\n disabled = false,\n autoFocus = false,\n className,\n } = props\n\n const length = Math.max(1, Math.floor(lengthProp))\n const controlledValue = useMemo(() => sanitizeDigits(value ?? \"\", length), [value, length])\n const isControlled = value !== undefined\n\n const [internalValue, setInternalValue] = useState(() => sanitizeDigits(value ?? \"\", length))\n const [focusedIndex, setFocusedIndex] = useState(-1)\n\n const rootRef = useRef<HTMLDivElement | null>(null)\n const inputRefs = useRef<Array<HTMLInputElement | null>>([])\n\n useImperativeHandle(ref, () => rootRef.current as HTMLDivElement, [])\n\n useEffect(() => {\n if (isControlled) {\n setInternalValue(controlledValue)\n return\n }\n setInternalValue((current) => sanitizeDigits(current, length))\n }, [controlledValue, isControlled, length])\n\n const currentValue = isControlled ? controlledValue : internalValue\n const digits = useMemo(\n () => Array.from({ length }, (_, index) => currentValue[index] ?? \"\"),\n [currentValue, length],\n )\n\n const errorId = `otp-input-${useId()}-error`\n\n useEffect(() => {\n if (!autoFocus || disabled) return\n inputRefs.current[0]?.focus()\n }, [autoFocus, disabled])\n\n const commitValue = useCallback(\n (nextValueRaw: string) => {\n const nextValue = sanitizeDigits(nextValueRaw, length)\n if (!isControlled) {\n setInternalValue(nextValue)\n }\n if (nextValue !== currentValue) {\n onChange?.(nextValue)\n }\n if (nextValue.length === length) {\n onComplete?.(nextValue)\n }\n return nextValue\n },\n [currentValue, isControlled, length, onChange, onComplete],\n )\n\n const focusCell = useCallback((index: number) => {\n const clampedIndex = Math.max(0, Math.min(index, length - 1))\n const input = inputRefs.current[clampedIndex]\n if (!input) return\n input.focus()\n input.setSelectionRange(1, 1)\n }, [length])\n\n const handleCellClick = useCallback((index: number) => {\n if (disabled) return\n focusCell(index)\n }, [disabled, focusCell])\n\n const handlePaste = useCallback(\n (index: number, evt: React.ClipboardEvent<HTMLInputElement>) => {\n if (disabled) return\n evt.preventDefault()\n const pastedDigits = sanitizeDigits(evt.clipboardData.getData(\"text\"), length)\n if (!pastedDigits) return\n\n const nextDigits = [...digits]\n let writeIndex = index\n\n for (const digit of pastedDigits) {\n if (writeIndex >= length) break\n nextDigits[writeIndex] = digit\n writeIndex += 1\n }\n\n const nextValue = commitValue(nextDigits.join(\"\"))\n const nextFocusIndex = Math.min(nextValue.length, length - 1)\n focusCell(nextFocusIndex)\n },\n [commitValue, digits, disabled, focusCell, length],\n )\n\n const handleChange = useCallback(\n (index: number, evt: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return\n const typedDigits = evt.currentTarget.value.replace(/\\D/g, \"\")\n\n if (!typedDigits) {\n const nextDigits = [...digits]\n nextDigits[index] = \"\"\n commitValue(nextDigits.join(\"\"))\n return\n }\n\n const nextDigits = [...digits]\n\n if (typedDigits.length === 1) {\n nextDigits[index] = typedDigits[0]\n const nextValue = commitValue(nextDigits.join(\"\"))\n if (index < length - 1 && nextValue.length > index) {\n focusCell(index + 1)\n }\n return\n }\n\n let writeIndex = index\n for (const digit of typedDigits) {\n if (writeIndex >= length) break\n nextDigits[writeIndex] = digit\n writeIndex += 1\n }\n\n const nextValue = commitValue(nextDigits.join(\"\"))\n const nextFocusIndex = Math.min(nextValue.length, length - 1)\n focusCell(nextFocusIndex)\n },\n [commitValue, digits, disabled, focusCell, length],\n )\n\n const handleKeyDown = useCallback(\n (index: number, evt: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return\n\n if (evt.key === \"Backspace\") {\n evt.preventDefault()\n const nextDigits = [...digits]\n\n if (nextDigits[index]) {\n nextDigits[index] = \"\"\n commitValue(nextDigits.join(\"\"))\n return\n }\n\n if (index > 0) {\n nextDigits[index - 1] = \"\"\n commitValue(nextDigits.join(\"\"))\n focusCell(index - 1)\n }\n return\n }\n\n if (evt.key === \"Delete\") {\n evt.preventDefault()\n const nextDigits = [...digits]\n nextDigits[index] = \"\"\n commitValue(nextDigits.join(\"\"))\n return\n }\n\n if (evt.key === \"ArrowLeft\") {\n evt.preventDefault()\n focusCell(index - 1)\n return\n }\n\n if (evt.key === \"ArrowRight\") {\n evt.preventDefault()\n focusCell(index + 1)\n }\n },\n [commitValue, digits, disabled, focusCell],\n )\n\n const handleBlur = useCallback(() => {\n requestAnimationFrame(() => {\n const activeElement = document.activeElement\n const isAnyCellFocused = inputRefs.current.some((input) => input === activeElement)\n if (!isAnyCellFocused) {\n setFocusedIndex(-1)\n }\n })\n }, [])\n\n return (\n <div ref={rootRef} className={clsx(s.Root, className)}>\n <div className={s.Cells}>\n {Array.from({ length }, (_, index) => {\n const isGroupGap = grouping ? shouldShowGap(index, grouping) : false\n\n return (\n <Fragment key={index}>\n {isGroupGap && <div className={s.GroupGap} aria-hidden />}\n <div\n className={clsx(s.Cell, {\n [s.CellFocused]: focusedIndex === index,\n [s.CellFilled]: !!digits[index],\n })}\n data-invalid={invalid ? \"\" : undefined}\n data-disabled={disabled ? \"\" : undefined}\n onClick={() => handleCellClick(index)}\n >\n <input\n ref={(element) => {\n inputRefs.current[index] = element\n }}\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]\"\n maxLength={1}\n value={digits[index]}\n disabled={disabled}\n className={s.CellInput}\n onChange={(evt) => handleChange(index, evt)}\n onKeyDown={(evt) => handleKeyDown(index, evt)}\n onFocus={() => setFocusedIndex(index)}\n onBlur={handleBlur}\n onPaste={(evt) => handlePaste(index, evt)}\n aria-label={`Digit ${index + 1}`}\n aria-invalid={invalid ? true : undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n />\n {!digits[index] && focusedIndex !== index && <div className={s.DotPlaceholder} />}\n </div>\n </Fragment>\n )\n })}\n </div>\n {errorMessage && (\n <FieldError id={errorId} className={s.ErrorMessage}>\n {errorMessage}\n </FieldError>\n )}\n </div>\n )\n})\n\nOTPInput.displayName = \"OTPInput\"\n"]}
|
|
1
|
+
{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport {\n Fragment,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\"\n\nimport { FieldError } from \"../FieldError\"\n\nimport s from \"@plexui/styles/components/OTPInput/OTPInput.module.css\"\n\nexport type OTPInputProps = {\n length?: number\n value?: string\n onChange?: (value: string) => void\n onComplete?: (value: string) => void\n grouping?: number[]\n invalid?: boolean\n errorMessage?: string\n disabled?: boolean\n autoFocus?: boolean\n className?: string\n}\n\nfunction sanitizeDigits(value: string, length: number): string {\n return value.replace(/\\D/g, \"\").slice(0, length)\n}\n\n// One entry per cell, \"\" when empty\nfunction toCells(value: string, length: number): string[] {\n return Array.from({ length }, (_, index) => value[index] ?? \"\")\n}\n\nfunction shouldShowGap(index: number, grouping: number[]): boolean {\n let pos = 0\n for (const groupSize of grouping) {\n pos += groupSize\n if (index === pos) return true\n }\n return false\n}\n\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(function OTPInput(props, ref) {\n const {\n length: lengthProp = 6,\n value,\n onChange,\n onComplete,\n grouping,\n invalid = false,\n errorMessage,\n disabled = false,\n autoFocus = false,\n className,\n } = props\n\n const length = Math.max(1, Math.floor(lengthProp))\n const controlledValue = useMemo(() => sanitizeDigits(value ?? \"\", length), [value, length])\n const isControlled = value !== undefined\n\n // The digit of every cell, so clearing or filling one cell never moves the\n // others; the value is the filled cells' digits in order\n const [cells, setCells] = useState(() => toCells(controlledValue, length))\n const [focusedIndex, setFocusedIndex] = useState(-1)\n\n const rootRef = useRef<HTMLDivElement | null>(null)\n const inputRefs = useRef<Array<HTMLInputElement | null>>([])\n\n useImperativeHandle(ref, () => rootRef.current as HTMLDivElement, [])\n\n const ownCells = useMemo(() => Array.from({ length }, (_, index) => cells[index] ?? \"\"), [cells, length])\n const currentValue = isControlled ? controlledValue : ownCells.join(\"\")\n // The cells keep their gaps while they spell the value; any other value\n // (set by the parent) fills the cells from the start\n const digits = useMemo(\n () => (ownCells.join(\"\") === currentValue ? ownCells : toCells(currentValue, length)),\n [ownCells, currentValue, length],\n )\n\n const errorId = `otp-input-${useId()}-error`\n\n useEffect(() => {\n if (!autoFocus || disabled) return\n inputRefs.current[0]?.focus()\n }, [autoFocus, disabled])\n\n // The value the field's own last edit produced, until the value changes:\n // a field the user empties keeps the caret where it is\n const ownValueRef = useRef<string | null>(null)\n\n const commitDigits = useCallback(\n (nextDigits: string[]) => {\n // Kept when controlled too: the parent's value then keeps these gaps\n setCells(nextDigits)\n const nextValue = nextDigits.join(\"\")\n ownValueRef.current = nextValue\n if (nextValue !== currentValue) {\n onChange?.(nextValue)\n }\n if (nextValue.length === length) {\n onComplete?.(nextValue)\n }\n },\n [currentValue, length, onChange, onComplete],\n )\n\n const focusCell = useCallback((index: number) => {\n const clampedIndex = Math.max(0, Math.min(index, length - 1))\n const input = inputRefs.current[clampedIndex]\n if (!input) return\n input.focus()\n input.setSelectionRange(1, 1)\n }, [length])\n\n // A field cleared from outside (a wrong code wiped by the form) puts the\n // caret back in the first cell, when the focus was in the field already\n const hadValueRef = useRef(currentValue.length > 0)\n useEffect(() => {\n const filled = currentValue.length > 0\n const fromOutside = ownValueRef.current !== currentValue\n ownValueRef.current = null\n const root = rootRef.current\n if (!filled && hadValueRef.current && fromOutside && !disabled && root?.contains(document.activeElement)) {\n focusCell(0)\n }\n hadValueRef.current = filled\n }, [currentValue, disabled, focusCell])\n\n const handleCellClick = useCallback((index: number) => {\n if (disabled) return\n focusCell(index)\n }, [disabled, focusCell])\n\n const handlePaste = useCallback(\n (index: number, evt: React.ClipboardEvent<HTMLInputElement>) => {\n if (disabled) return\n evt.preventDefault()\n const pastedDigits = sanitizeDigits(evt.clipboardData.getData(\"text\"), length)\n if (!pastedDigits) return\n\n const nextDigits = [...digits]\n let writeIndex = index\n\n for (const digit of pastedDigits) {\n if (writeIndex >= length) break\n nextDigits[writeIndex] = digit\n writeIndex += 1\n }\n\n commitDigits(nextDigits)\n // The cell after the pasted digits\n focusCell(Math.min(writeIndex, length - 1))\n },\n [commitDigits, digits, disabled, focusCell, length],\n )\n\n const handleChange = useCallback(\n (index: number, evt: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return\n const typedDigits = evt.currentTarget.value.replace(/\\D/g, \"\")\n\n if (!typedDigits) {\n const nextDigits = [...digits]\n nextDigits[index] = \"\"\n commitDigits(nextDigits)\n return\n }\n\n const nextDigits = [...digits]\n\n if (typedDigits.length === 1) {\n nextDigits[index] = typedDigits[0]\n commitDigits(nextDigits)\n if (index < length - 1) {\n focusCell(index + 1)\n }\n return\n }\n\n let writeIndex = index\n for (const digit of typedDigits) {\n if (writeIndex >= length) break\n nextDigits[writeIndex] = digit\n writeIndex += 1\n }\n\n commitDigits(nextDigits)\n // The cell after the typed digits\n focusCell(Math.min(writeIndex, length - 1))\n },\n [commitDigits, digits, disabled, focusCell, length],\n )\n\n const handleKeyDown = useCallback(\n (index: number, evt: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return\n\n if (evt.key === \"Backspace\") {\n evt.preventDefault()\n const nextDigits = [...digits]\n\n if (nextDigits[index]) {\n nextDigits[index] = \"\"\n commitDigits(nextDigits)\n return\n }\n\n if (index > 0) {\n nextDigits[index - 1] = \"\"\n commitDigits(nextDigits)\n focusCell(index - 1)\n }\n return\n }\n\n if (evt.key === \"Delete\") {\n evt.preventDefault()\n const nextDigits = [...digits]\n nextDigits[index] = \"\"\n commitDigits(nextDigits)\n return\n }\n\n if (evt.key === \"ArrowLeft\") {\n evt.preventDefault()\n focusCell(index - 1)\n return\n }\n\n if (evt.key === \"ArrowRight\") {\n evt.preventDefault()\n focusCell(index + 1)\n }\n },\n [commitDigits, digits, disabled, focusCell],\n )\n\n const handleBlur = useCallback(() => {\n requestAnimationFrame(() => {\n const activeElement = document.activeElement\n const isAnyCellFocused = inputRefs.current.some((input) => input === activeElement)\n if (!isAnyCellFocused) {\n setFocusedIndex(-1)\n }\n })\n }, [])\n\n return (\n <div ref={rootRef} className={clsx(s.Root, className)}>\n <div className={s.Cells}>\n {Array.from({ length }, (_, index) => {\n const isGroupGap = grouping ? shouldShowGap(index, grouping) : false\n\n return (\n <Fragment key={index}>\n {isGroupGap && <div className={s.GroupGap} aria-hidden />}\n <div\n className={clsx(s.Cell, {\n [s.CellFocused]: focusedIndex === index,\n [s.CellFilled]: !!digits[index],\n })}\n data-invalid={invalid ? \"\" : undefined}\n data-disabled={disabled ? \"\" : undefined}\n onClick={() => handleCellClick(index)}\n >\n <input\n ref={(element) => {\n inputRefs.current[index] = element\n }}\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]\"\n maxLength={1}\n value={digits[index]}\n disabled={disabled}\n className={s.CellInput}\n onChange={(evt) => handleChange(index, evt)}\n onKeyDown={(evt) => handleKeyDown(index, evt)}\n onFocus={() => setFocusedIndex(index)}\n onBlur={handleBlur}\n onPaste={(evt) => handlePaste(index, evt)}\n aria-label={`Digit ${index + 1}`}\n aria-invalid={invalid ? true : undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n />\n {!digits[index] && focusedIndex !== index && <div className={s.DotPlaceholder} />}\n </div>\n </Fragment>\n )\n })}\n </div>\n {errorMessage && (\n <FieldError id={errorId} className={s.ErrorMessage}>\n {errorMessage}\n </FieldError>\n )}\n </div>\n )\n})\n\nOTPInput.displayName = \"OTPInput\"\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { OTPInput } from "./OTPInput";
|
|
1
|
+
export { OTPInput } from "./OTPInput.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import {} from "react";
|
|
4
|
-
import { PlexUIContext } from "./PlexUIContext";
|
|
4
|
+
import { PlexUIContext } from "./PlexUIContext.js";
|
|
5
|
+
// The link component's type comes from PlexUIConfig in global.d.ts, which is
|
|
6
|
+
// what ButtonLink, TextLink and Menu.Link read.
|
|
5
7
|
/**
|
|
6
8
|
* Shared context for all Plex UI components - wrap your app in this
|
|
7
9
|
* provider to use Plex UI components.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlexUIProvider.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/PlexUIProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"PlexUIProvider.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/PlexUIProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,6EAA6E;AAC7E,gDAAgD;AAEhD;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,aAAa,GAKd;IACC,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,YAAG,QAAQ,GAA0B,CAAA;AAC9F,CAAC","sourcesContent":["\"use client\"\n\nimport { type ComponentType, type ForwardRefExoticComponent, type ReactNode } from \"react\"\nimport { PlexUIContext } from \"./PlexUIContext\"\n\n// The link component's type comes from PlexUIConfig in global.d.ts, which is\n// what ButtonLink, TextLink and Menu.Link read.\n\n/**\n * Shared context for all Plex UI components - wrap your app in this\n * provider to use Plex UI components.\n *\n * It's pretty thin right now, we only use it to hold onto the component you\n * use for rendering Links, but it could be expanded in the future.\n */\nexport function PlexUIProvider({\n children,\n linkComponent,\n}: {\n children: ReactNode\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n linkComponent: ComponentType<any> | ForwardRefExoticComponent<any> | \"a\"\n}) {\n return <PlexUIContext.Provider value={{ linkComponent }}>{children}</PlexUIContext.Provider>\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { PlexUIProvider } from "./PlexUIProvider";
|
|
1
|
+
export { PlexUIProvider } from "./PlexUIProvider.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useContext } from "react";
|
|
3
|
-
import { PlexUIContext } from "./PlexUIContext";
|
|
3
|
+
import { PlexUIContext } from "./PlexUIContext.js";
|
|
4
4
|
export function useLinkComponent() {
|
|
5
5
|
const context = useContext(PlexUIContext);
|
|
6
6
|
return context?.linkComponent ?? "a";
|
|
@@ -4,13 +4,13 @@ import clsx from "clsx";
|
|
|
4
4
|
import { Popover as RadixPopover } from "radix-ui";
|
|
5
5
|
import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
|
|
6
6
|
import { useTimeout } from "usehooks-ts";
|
|
7
|
-
import { useEscCloseStack } from "../../hooks/useEscCloseStack";
|
|
8
|
-
import { useLatestValue } from "../../hooks/useLatestValue";
|
|
9
|
-
import { focusableElements, preventDefaultHandler, toCssVariables } from "../../lib/helpers";
|
|
10
|
-
import { TransitionGroup } from "../Transition";
|
|
11
|
-
import { createPointerIntentArea, isPointInPolygon } from "./pointerIntent";
|
|
12
|
-
import s from "
|
|
13
|
-
import { PopoverContext, usePopoverContext } from "./usePopoverContext";
|
|
7
|
+
import { useEscCloseStack } from "../../hooks/useEscCloseStack.js";
|
|
8
|
+
import { useLatestValue } from "../../hooks/useLatestValue.js";
|
|
9
|
+
import { focusableElements, preventDefaultHandler, toCssVariables } from "../../lib/helpers.js";
|
|
10
|
+
import { TransitionGroup } from "../Transition/index.js";
|
|
11
|
+
import { createPointerIntentArea, isPointInPolygon } from "./pointerIntent.js";
|
|
12
|
+
import s from "@plexui/styles/components/Popover/Popover.module.css";
|
|
13
|
+
import { PopoverContext, usePopoverContext } from "./usePopoverContext.js";
|
|
14
14
|
export const Popover = ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, showOnHover = false, hoverOpenDelay = 150, children, }) => {
|
|
15
15
|
const [open, setOpen] = useState(false);
|
|
16
16
|
const [shake, setShake] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Popover as RadixPopover } from \"radix-ui\"\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type PointerEventHandler,\n type ReactNode,\n} from \"react\"\nimport { useTimeout } from \"usehooks-ts\"\nimport { useEscCloseStack } from \"../../hooks/useEscCloseStack\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { focusableElements, preventDefaultHandler, toCssVariables } from \"../../lib/helpers\"\nimport { TransitionGroup } from \"../Transition\"\nimport { createPointerIntentArea, isPointInPolygon, type Polygon } from \"./pointerIntent\"\nimport s from \"./Popover.module.css\"\nimport { PopoverContext, usePopoverContext, type PopoverContextValue } from \"./usePopoverContext\"\n\nexport type PopoverProps = {\n /** Sets controlled visibility state */\n open?: boolean\n /** Callback invoked when visibility state changes */\n onOpenChange?: (nextState: boolean) => void\n showOnHover?: boolean\n hoverOpenDelay?: number\n children: React.ReactNode\n}\n\nexport const Popover = ({\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n showOnHover = false,\n hoverOpenDelay = 150,\n children,\n}: PopoverProps) => {\n const [open, setOpen] = useState<boolean>(false)\n const [shake, setShake] = useState<boolean>(false)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const openTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)\n const hoverOpenFocusedWithTab = useRef<boolean>(false)\n const isPointerInTransitRef = useRef<boolean>(false)\n const isOpen = controlledOpen ?? open\n\n const [temporarilyPreventClickToClose, setTemporarilyPreventClickToClose] =\n useState<boolean>(false)\n useTimeout(\n () => setTemporarilyPreventClickToClose(false),\n temporarilyPreventClickToClose ? 500 : null,\n )\n\n const latestOpenChange = useLatestValue(controlledOnOpenChange)\n\n const handleOpenChangeImpl = useLatestValue((nextState: boolean) => {\n clearTimeout(openTimerRef.current)\n\n // No-op if the state is not changing\n if (isOpen === nextState) {\n return\n }\n\n if (!nextState) {\n // clear any running shake animation on close\n setShake(false)\n\n // Check for specific hover conditions where focus should be\n // immediately restored to the trigger before closing\n if (showOnHover && hoverOpenFocusedWithTab.current) {\n triggerRef.current?.focus()\n }\n\n // Always cleanup this state\n hoverOpenFocusedWithTab.current = false\n }\n\n latestOpenChange.current?.(nextState)\n setOpen(nextState)\n\n if (showOnHover) {\n setTemporarilyPreventClickToClose(nextState)\n }\n })\n\n const handleOpenChange = useCallback(\n (nextState: boolean) => {\n handleOpenChangeImpl.current(nextState)\n },\n [handleOpenChangeImpl],\n )\n\n const handleTriggerEnter = useCallback(() => {\n openTimerRef.current = setTimeout(() => handleOpenChange(true), hoverOpenDelay)\n }, [handleOpenChange, hoverOpenDelay])\n\n const handleTriggerLeave = useCallback(() => {\n clearTimeout(openTimerRef.current)\n }, [])\n\n useEffect(() => {\n return () => {\n clearTimeout(openTimerRef.current)\n }\n }, [])\n\n const store = useMemo<PopoverContextValue>(\n () => ({\n open: isOpen,\n setOpen: handleOpenChange,\n shake,\n setShake,\n showOnHover,\n temporarilyPreventClickToClose,\n onTriggerEnter: handleTriggerEnter,\n onTriggerLeave: handleTriggerLeave,\n isPointerInTransitRef,\n triggerRef,\n contentRef,\n hoverOpenFocusedWithTab,\n }),\n [\n isOpen,\n handleOpenChange,\n shake,\n setShake,\n showOnHover,\n temporarilyPreventClickToClose,\n hoverOpenFocusedWithTab,\n isPointerInTransitRef,\n handleTriggerEnter,\n handleTriggerLeave,\n ],\n )\n\n return (\n <PopoverContext value={store}>\n <RadixPopover.Root open={isOpen} onOpenChange={handleOpenChange} modal={false}>\n {children}\n </RadixPopover.Root>\n </PopoverContext>\n )\n}\n\nconst Trigger = ({\n children,\n onPointerDown,\n onClick,\n}: {\n children: React.ReactNode\n onPointerDown?: PointerEventHandler\n onClick?: MouseEventHandler\n}) => {\n const {\n setOpen,\n showOnHover,\n temporarilyPreventClickToClose,\n onTriggerEnter,\n onTriggerLeave,\n isPointerInTransitRef,\n triggerRef,\n contentRef,\n } = usePopoverContext()\n const hasPointerMoveOpenedRef = useRef<boolean>(false)\n\n const maybePreventClickClose = (evt: React.MouseEvent) => {\n // Don't prevent temporary close if the trigger is an anchor tag itself\n const isLink = evt.currentTarget.nodeName.toLocaleLowerCase() === \"a\"\n\n if (!isLink && temporarilyPreventClickToClose) {\n // Prevents tooltip listeners from closing\n evt.preventDefault()\n evt.stopPropagation()\n }\n }\n\n const handlePointerMove = (evt: React.PointerEvent) => {\n if (evt.pointerType === \"touch\") {\n return\n }\n\n if (!hasPointerMoveOpenedRef.current && !isPointerInTransitRef.current) {\n onTriggerEnter()\n hasPointerMoveOpenedRef.current = true\n }\n }\n\n const handlePointerLeave = () => {\n if (!hasPointerMoveOpenedRef.current) {\n return\n }\n\n onTriggerLeave()\n hasPointerMoveOpenedRef.current = false\n }\n\n return (\n <RadixPopover.Trigger\n asChild\n ref={triggerRef}\n onPointerDown={(evt) => {\n maybePreventClickClose(evt)\n onPointerDown?.(evt)\n }}\n onClick={(evt) => {\n maybePreventClickClose(evt)\n onClick?.(evt)\n }}\n onPointerMove={showOnHover ? handlePointerMove : undefined}\n onPointerLeave={showOnHover ? handlePointerLeave : undefined}\n onFocus={showOnHover ? () => setOpen(true) : undefined}\n onBlur={\n showOnHover\n ? () => {\n setTimeout(() => {\n // Ignore this handler if focus has moved into the popover\n if (contentRef.current?.contains(document.activeElement)) {\n return\n }\n\n setOpen(false)\n }, 50)\n }\n : undefined\n }\n >\n {children}\n </RadixPopover.Trigger>\n )\n}\n\nexport type PopoverContentProps = {\n children: ReactNode\n /**\n * Whether to avoid collisions with vieport/scroll containersw.\n * @default true\n */\n avoidCollisions?: boolean\n /**\n * Set the `width` of the popover, in pixels.\n * @default auto\n */\n width?: number | \"auto\"\n /**\n * Set the `min-width` of the popover, in pixels.\n * @default 300\n */\n minWidth?: number | \"auto\"\n /**\n * Set the `max-width` of the popover, in pixels.\n */\n maxWidth?: number\n /**\n * Background style for the popover\n * @default default\n */\n /**\n * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n * @default bottom\n */\n side?: RadixPopover.PopoverContentProps[\"side\"]\n /**\n * The distance in pixels from the trigger.\n * @default 8\n */\n sideOffset?: RadixPopover.PopoverContentProps[\"sideOffset\"]\n /**\n * The preferred alignment against the trigger. May change when collisions occur.\n * @default center\n */\n align?: RadixPopover.PopoverContentProps[\"align\"]\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment options.\n * @default 0\n */\n alignOffset?: RadixPopover.PopoverContentProps[\"alignOffset\"]\n /**\n * Whether the popover surface should be translucent.\n * @default false\n */\n translucent?: boolean\n /** Additional class name to apply to the popover content, you usually don't want to set this, but ag-grid needs it to render a custom editor properly */\n className?: string\n /**\n * Auto focus the popover content when it is opened.\n * @default true\n */\n autoFocus?: boolean\n}\n\nconst ContentImpl = ({\n children,\n avoidCollisions,\n width,\n minWidth,\n maxWidth,\n side,\n sideOffset = 8,\n align,\n alignOffset,\n translucent,\n className,\n autoFocus = true,\n}: PopoverContentProps) => {\n const { showOnHover, shake, contentRef } = usePopoverContext()\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (evt) => {\n const contentElement = contentRef.current\n\n if (\n // When the current target is our container\n contentElement &&\n evt.target === contentElement &&\n // We know that shift key tabs will lead to closing the popover (because we don't use `modal`)\n evt.key === \"Tab\" &&\n evt.shiftKey\n ) {\n // Prevent that from happening\n evt.preventDefault()\n evt.stopPropagation()\n\n // Move focus to the last focusable element, placing the user in the focus loop\n const focusable = focusableElements(contentElement)\n const lastFocusable = focusable[focusable.length - 1]\n lastFocusable?.focus()\n }\n }\n\n // Important that we send initial focus into the popover, placing it onto the container.\n // This allows focus looping to begin, as well as capturing scoped key presses.\n // We prevent Radix's default behavior of focusing an element, because this can have adverse side-effects.\n useEffect(() => {\n const contentElement = contentRef.current\n\n if (!contentElement || !autoFocus) {\n return\n }\n\n // If we're already focused within the content area, no-op.\n // This would be true if some inner component declares autoFocus\n if (contentElement?.contains(document.activeElement)) {\n return\n }\n\n // Our focus isn't in the content area - move it there.\n // NOTE: Don't automatically shift focus on hover popovers\n if (!showOnHover) {\n contentElement.focus({ preventScroll: true })\n }\n }, [contentRef, showOnHover, autoFocus])\n\n return (\n <RadixPopover.Content\n forceMount\n ref={contentRef}\n className={clsx(s.Popover, className)}\n style={toCssVariables({\n \"popover-width\": width,\n \"popover-min-width\": minWidth,\n \"popover-max-width\": maxWidth,\n })}\n onCloseAutoFocus={showOnHover ? preventDefaultHandler : undefined}\n // data-surface={surface}\n data-animate={shake ? \"shake\" : undefined}\n data-translucent={translucent ? \"true\" : undefined}\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset ?? (align === \"center\" ? 0 : -5)}\n avoidCollisions={avoidCollisions ?? true}\n hideWhenDetached\n collisionPadding={20}\n onOpenAutoFocus={preventDefaultHandler}\n // Use custom esc listener because default Radix is bound to the document\n // and cannot have propagation stopped.\n onEscapeKeyDown={preventDefaultHandler}\n onKeyDown={handleKeyDown}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nconst ContentHoverable = (props: PopoverContentProps) => {\n const { setOpen, triggerRef, contentRef, isPointerInTransitRef, hoverOpenFocusedWithTab } =\n usePopoverContext()\n const [pointerGraceArea, setPointerGraceArea] = useState<Polygon | null>(null)\n\n const handleRemoveGraceArea = useCallback(() => {\n setPointerGraceArea(null)\n isPointerInTransitRef.current = false\n }, [isPointerInTransitRef])\n\n const handleCreateGraceArea = useCallback(\n (event: PointerEvent, hoverTarget: HTMLElement) => {\n const graceArea = createPointerIntentArea(event, hoverTarget)\n setPointerGraceArea(graceArea)\n isPointerInTransitRef.current = true\n },\n [isPointerInTransitRef],\n )\n\n useEffect(() => {\n return () => handleRemoveGraceArea()\n }, [handleRemoveGraceArea])\n\n useEffect(() => {\n const trigger = triggerRef.current\n const content = contentRef.current\n\n if (!trigger || !content) {\n return\n }\n\n const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, content)\n const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, trigger)\n\n trigger.addEventListener(\"pointerleave\", handleTriggerLeave)\n content.addEventListener(\"pointerleave\", handleContentLeave)\n return () => {\n trigger.removeEventListener(\"pointerleave\", handleTriggerLeave)\n content.removeEventListener(\"pointerleave\", handleContentLeave)\n }\n }, [contentRef, triggerRef, handleCreateGraceArea, handleRemoveGraceArea])\n\n useEffect(() => {\n if (!pointerGraceArea) {\n return\n }\n\n const handleTrackPointerGrace = (event: PointerEvent) => {\n const trigger = triggerRef.current\n const content = contentRef.current\n const target = event.target as HTMLElement\n const pointerPosition = { x: event.clientX, y: event.clientY }\n const hasEnteredTarget = trigger?.contains(target) || content?.contains(target)\n const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea)\n // Stop considering grace areas when the pointer runs into other control triggers\n const targetHasPopup = target.hasAttribute(\"aria-haspopup\")\n\n if (hasEnteredTarget) {\n handleRemoveGraceArea()\n } else if (isPointerOutsideGraceArea || targetHasPopup) {\n handleRemoveGraceArea()\n setOpen(false)\n }\n }\n document.addEventListener(\"pointermove\", handleTrackPointerGrace)\n return () => document.removeEventListener(\"pointermove\", handleTrackPointerGrace)\n }, [pointerGraceArea, setOpen, handleRemoveGraceArea, triggerRef, contentRef])\n\n // Hoverable doesn't place focus in the popover by default\n // If this is open, and tab is pressed, and focusableElements() has an element, prevent default behavior and focus it\n // Then set a flag (probably in context) that tells us to restore focus to the trigger on close (e.g., not execute the onCloseAutoFocus handler)\n\n useEffect(() => {\n const handleKeyDown = (evt: KeyboardEvent) => {\n if (!contentRef.current) {\n return\n }\n\n // Only assume forward tab is attempting to move into the popup\n if (evt.key === \"Tab\" && !evt.shiftKey) {\n const [firstFocusable] = focusableElements(contentRef.current)\n if (firstFocusable) {\n evt.preventDefault()\n firstFocusable.focus()\n hoverOpenFocusedWithTab.current = true\n document.removeEventListener(\"keydown\", handleKeyDown)\n }\n }\n }\n document.addEventListener(\"keydown\", handleKeyDown)\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown)\n }\n }, [contentRef, hoverOpenFocusedWithTab])\n\n return <ContentImpl {...props} />\n}\n\nconst Content = (props: PopoverContentProps) => {\n const { open, showOnHover, setOpen } = usePopoverContext()\n\n useEscCloseStack(open, () => {\n setOpen(false)\n })\n\n return (\n <RadixPopover.Portal forceMount>\n <TransitionGroup\n enterDuration={600}\n exitDuration={300}\n className={s.Transition}\n disableAnimations\n >\n {open &&\n (showOnHover ? (\n <ContentHoverable key=\"popover-hover\" {...props} />\n ) : (\n <ContentImpl key=\"popover\" {...props} />\n ))}\n </TransitionGroup>\n </RadixPopover.Portal>\n )\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GAKT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAC5F,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAgB,MAAM,iBAAiB,CAAA;AACzF,OAAO,CAAC,MAAM,sDAAsD,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAA4B,MAAM,qBAAqB,CAAA;AAYjG,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAW,GAAG,KAAK,EACnB,cAAc,GAAG,GAAG,EACpB,QAAQ,GACK,EAAE,EAAE;IACjB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAClD,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC/C,MAAM,YAAY,GAAG,MAAM,CAAgC,SAAS,CAAC,CAAA;IACrE,MAAM,uBAAuB,GAAG,MAAM,CAAU,KAAK,CAAC,CAAA;IACtD,MAAM,qBAAqB,GAAG,MAAM,CAAU,KAAK,CAAC,CAAA;IACpD,MAAM,MAAM,GAAG,cAAc,IAAI,IAAI,CAAA;IAErC,MAAM,CAAC,8BAA8B,EAAE,iCAAiC,CAAC,GACvE,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC1B,UAAU,CACR,GAAG,EAAE,CAAC,iCAAiC,CAAC,KAAK,CAAC,EAC9C,8BAA8B,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAC5C,CAAA;IAED,MAAM,gBAAgB,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAA;IAE/D,MAAM,oBAAoB,GAAG,cAAc,CAAC,CAAC,SAAkB,EAAE,EAAE;QACjE,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QAElC,qCAAqC;QACrC,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,6CAA6C;YAC7C,QAAQ,CAAC,KAAK,CAAC,CAAA;YAEf,4DAA4D;YAC5D,qDAAqD;YACrD,IAAI,WAAW,IAAI,uBAAuB,CAAC,OAAO,EAAE,CAAC;gBACnD,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAA;YAC7B,CAAC;YAED,4BAA4B;YAC5B,uBAAuB,CAAC,OAAO,GAAG,KAAK,CAAA;QACzC,CAAC;QAED,gBAAgB,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,CAAA;QACrC,OAAO,CAAC,SAAS,CAAC,CAAA;QAElB,IAAI,WAAW,EAAE,CAAC;YAChB,iCAAiC,CAAC,SAAS,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,SAAkB,EAAE,EAAE;QACrB,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;IACzC,CAAC,EACD,CAAC,oBAAoB,CAAC,CACvB,CAAA;IAED,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC,CAAA;IACjF,CAAC,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAA;IAEtC,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;IACpC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,gBAAgB;QACzB,KAAK;QACL,QAAQ;QACR,WAAW;QACX,8BAA8B;QAC9B,cAAc,EAAE,kBAAkB;QAClC,cAAc,EAAE,kBAAkB;QAClC,qBAAqB;QACrB,UAAU;QACV,UAAU;QACV,uBAAuB;KACxB,CAAC,EACF;QACE,MAAM;QACN,gBAAgB;QAChB,KAAK;QACL,QAAQ;QACR,WAAW;QACX,8BAA8B;QAC9B,uBAAuB;QACvB,qBAAqB;QACrB,kBAAkB;QAClB,kBAAkB;KACnB,CACF,CAAA;IAED,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,YAC1B,KAAC,YAAY,CAAC,IAAI,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,YAC1E,QAAQ,GACS,GACL,CAClB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,aAAa,EACb,OAAO,GAKR,EAAE,EAAE;IACH,MAAM,EACJ,OAAO,EACP,WAAW,EACX,8BAA8B,EAC9B,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,UAAU,EACV,UAAU,GACX,GAAG,iBAAiB,EAAE,CAAA;IACvB,MAAM,uBAAuB,GAAG,MAAM,CAAU,KAAK,CAAC,CAAA;IAEtD,MAAM,sBAAsB,GAAG,CAAC,GAAqB,EAAE,EAAE;QACvD,uEAAuE;QACvE,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,iBAAiB,EAAE,KAAK,GAAG,CAAA;QAErE,IAAI,CAAC,MAAM,IAAI,8BAA8B,EAAE,CAAC;YAC9C,0CAA0C;YAC1C,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,GAAG,CAAC,eAAe,EAAE,CAAA;QACvB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,GAAuB,EAAE,EAAE;QACpD,IAAI,GAAG,CAAC,WAAW,KAAK,OAAO,EAAE,CAAC;YAChC,OAAM;QACR,CAAC;QAED,IAAI,CAAC,uBAAuB,CAAC,OAAO,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;YACvE,cAAc,EAAE,CAAA;YAChB,uBAAuB,CAAC,OAAO,GAAG,IAAI,CAAA;QACxC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;YACrC,OAAM;QACR,CAAC;QAED,cAAc,EAAE,CAAA;QAChB,uBAAuB,CAAC,OAAO,GAAG,KAAK,CAAA;IACzC,CAAC,CAAA;IAED,OAAO,CACL,KAAC,YAAY,CAAC,OAAO,IACnB,OAAO,QACP,GAAG,EAAE,UAAU,EACf,aAAa,EAAE,CAAC,GAAG,EAAE,EAAE;YACrB,sBAAsB,CAAC,GAAG,CAAC,CAAA;YAC3B,aAAa,EAAE,CAAC,GAAG,CAAC,CAAA;QACtB,CAAC,EACD,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;YACf,sBAAsB,CAAC,GAAG,CAAC,CAAA;YAC3B,OAAO,EAAE,CAAC,GAAG,CAAC,CAAA;QAChB,CAAC,EACD,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EAC1D,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EAC5D,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACtD,MAAM,EACJ,WAAW;YACT,CAAC,CAAC,GAAG,EAAE;gBACH,UAAU,CAAC,GAAG,EAAE;oBACd,0DAA0D;oBAC1D,IAAI,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;wBACzD,OAAM;oBACR,CAAC;oBAED,OAAO,CAAC,KAAK,CAAC,CAAA;gBAChB,CAAC,EAAE,EAAE,CAAC,CAAA;YACR,CAAC;YACH,CAAC,CAAC,SAAS,YAGd,QAAQ,GACY,CACxB,CAAA;AACH,CAAC,CAAA;AA6DD,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,eAAe,EACf,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,UAAU,GAAG,CAAC,EACd,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,SAAS,GAAG,IAAI,GACI,EAAE,EAAE;IACxB,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAE9D,MAAM,aAAa,GAAyC,CAAC,GAAG,EAAE,EAAE;QAClE,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAA;QAEzC;QACE,2CAA2C;QAC3C,cAAc;YACd,GAAG,CAAC,MAAM,KAAK,cAAc;YAC7B,8FAA8F;YAC9F,GAAG,CAAC,GAAG,KAAK,KAAK;YACjB,GAAG,CAAC,QAAQ,EACZ,CAAC;YACD,8BAA8B;YAC9B,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,GAAG,CAAC,eAAe,EAAE,CAAA;YAErB,+EAA+E;YAC/E,MAAM,SAAS,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAA;YACnD,MAAM,aAAa,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;YACrD,aAAa,EAAE,KAAK,EAAE,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IAED,wFAAwF;IACxF,+EAA+E;IAC/E,0GAA0G;IAC1G,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAA;QAEzC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,EAAE,CAAC;YAClC,OAAM;QACR,CAAC;QAED,2DAA2D;QAC3D,gEAAgE;QAChE,IAAI,cAAc,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACrD,OAAM;QACR,CAAC;QAED,uDAAuD;QACvD,0DAA0D;QAC1D,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,cAAc,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,CAAA;IAExC,OAAO,CACL,KAAC,YAAY,CAAC,OAAO,IACnB,UAAU,QACV,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EACrC,KAAK,EAAE,cAAc,CAAC;YACpB,eAAe,EAAE,KAAK;YACtB,mBAAmB,EAAE,QAAQ;YAC7B,mBAAmB,EAAE,QAAQ;SAC9B,CAAC,EACF,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,kBAEnD,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,sBACvB,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAClD,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzD,eAAe,EAAE,eAAe,IAAI,IAAI,EACxC,gBAAgB,QAChB,gBAAgB,EAAE,EAAE,EACpB,eAAe,EAAE,qBAAqB;QACtC,yEAAyE;QACzE,uCAAuC;QACvC,eAAe,EAAE,qBAAqB,EACtC,SAAS,EAAE,aAAa,YAEvB,QAAQ,GACY,CACxB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,EAAE;IACtD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,GACvF,iBAAiB,EAAE,CAAA;IACrB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAA;IAE9E,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,mBAAmB,CAAC,IAAI,CAAC,CAAA;QACzB,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAA;IACvC,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAA;IAE3B,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,KAAmB,EAAE,WAAwB,EAAE,EAAE;QAChD,MAAM,SAAS,GAAG,uBAAuB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAA;QAC7D,mBAAmB,CAAC,SAAS,CAAC,CAAA;QAC9B,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAA;IACtC,CAAC,EACD,CAAC,qBAAqB,CAAC,CACxB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAA;IACtC,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAA;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;QAClC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;QAElC,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;YACzB,OAAM;QACR,CAAC;QAED,MAAM,kBAAkB,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QACzF,MAAM,kBAAkB,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAEzF,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAA;QAC5D,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAA;QAC5D,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAA;YAC/D,OAAO,CAAC,mBAAmB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAA;QACjE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAAA;IAE1E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QAED,MAAM,uBAAuB,GAAG,CAAC,KAAmB,EAAE,EAAE;YACtD,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;YAClC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;YAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;YAC1C,MAAM,eAAe,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAA;YAC9D,MAAM,gBAAgB,GAAG,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;YAC/E,MAAM,yBAAyB,GAAG,CAAC,gBAAgB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAA;YACtF,iFAAiF;YACjF,MAAM,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;YAE3D,IAAI,gBAAgB,EAAE,CAAC;gBACrB,qBAAqB,EAAE,CAAA;YACzB,CAAC;iBAAM,IAAI,yBAAyB,IAAI,cAAc,EAAE,CAAC;gBACvD,qBAAqB,EAAE,CAAA;gBACvB,OAAO,CAAC,KAAK,CAAC,CAAA;YAChB,CAAC;QACH,CAAC,CAAA;QACD,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAA;QACjE,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAA;IACnF,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAA;IAE9E,0DAA0D;IAC1D,qHAAqH;IACrH,gJAAgJ;IAEhJ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,CAAC,GAAkB,EAAE,EAAE;YAC3C,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;gBACxB,OAAM;YACR,CAAC;YAED,+DAA+D;YAC/D,IAAI,GAAG,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;gBACvC,MAAM,CAAC,cAAc,CAAC,GAAG,iBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;gBAC9D,IAAI,cAAc,EAAE,CAAC;oBACnB,GAAG,CAAC,cAAc,EAAE,CAAA;oBACpB,cAAc,CAAC,KAAK,EAAE,CAAA;oBACtB,uBAAuB,CAAC,OAAO,GAAG,IAAI,CAAA;oBACtC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;gBACxD,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QACD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACnD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACxD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEzC,OAAO,KAAC,WAAW,OAAK,KAAK,GAAI,CAAA;AACnC,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAE1D,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,CAAA;IAChB,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,YAAY,CAAC,MAAM,IAAC,UAAU,kBAC7B,KAAC,eAAe,IACd,aAAa,EAAE,GAAG,EAClB,YAAY,EAAE,GAAG,EACjB,SAAS,EAAE,CAAC,CAAC,UAAU,EACvB,iBAAiB,kBAEhB,IAAI;gBACH,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,gBAAgB,OAAyB,KAAK,IAAzB,eAAe,CAAc,CACpD,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,OAAmB,KAAK,IAAnB,SAAS,CAAc,CACzC,CAAC,GACY,GACE,CACvB,CAAA;AACH,CAAC,CAAA;AAED,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA;AACzB,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Popover as RadixPopover } from \"radix-ui\"\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type PointerEventHandler,\n type ReactNode,\n} from \"react\"\nimport { useTimeout } from \"usehooks-ts\"\nimport { useEscCloseStack } from \"../../hooks/useEscCloseStack\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { focusableElements, preventDefaultHandler, toCssVariables } from \"../../lib/helpers\"\nimport { TransitionGroup } from \"../Transition\"\nimport { createPointerIntentArea, isPointInPolygon, type Polygon } from \"./pointerIntent\"\nimport s from \"@plexui/styles/components/Popover/Popover.module.css\"\nimport { PopoverContext, usePopoverContext, type PopoverContextValue } from \"./usePopoverContext\"\n\nexport type PopoverProps = {\n /** Sets controlled visibility state */\n open?: boolean\n /** Callback invoked when visibility state changes */\n onOpenChange?: (nextState: boolean) => void\n showOnHover?: boolean\n hoverOpenDelay?: number\n children: React.ReactNode\n}\n\nexport const Popover = ({\n open: controlledOpen,\n onOpenChange: controlledOnOpenChange,\n showOnHover = false,\n hoverOpenDelay = 150,\n children,\n}: PopoverProps) => {\n const [open, setOpen] = useState<boolean>(false)\n const [shake, setShake] = useState<boolean>(false)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const openTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)\n const hoverOpenFocusedWithTab = useRef<boolean>(false)\n const isPointerInTransitRef = useRef<boolean>(false)\n const isOpen = controlledOpen ?? open\n\n const [temporarilyPreventClickToClose, setTemporarilyPreventClickToClose] =\n useState<boolean>(false)\n useTimeout(\n () => setTemporarilyPreventClickToClose(false),\n temporarilyPreventClickToClose ? 500 : null,\n )\n\n const latestOpenChange = useLatestValue(controlledOnOpenChange)\n\n const handleOpenChangeImpl = useLatestValue((nextState: boolean) => {\n clearTimeout(openTimerRef.current)\n\n // No-op if the state is not changing\n if (isOpen === nextState) {\n return\n }\n\n if (!nextState) {\n // clear any running shake animation on close\n setShake(false)\n\n // Check for specific hover conditions where focus should be\n // immediately restored to the trigger before closing\n if (showOnHover && hoverOpenFocusedWithTab.current) {\n triggerRef.current?.focus()\n }\n\n // Always cleanup this state\n hoverOpenFocusedWithTab.current = false\n }\n\n latestOpenChange.current?.(nextState)\n setOpen(nextState)\n\n if (showOnHover) {\n setTemporarilyPreventClickToClose(nextState)\n }\n })\n\n const handleOpenChange = useCallback(\n (nextState: boolean) => {\n handleOpenChangeImpl.current(nextState)\n },\n [handleOpenChangeImpl],\n )\n\n const handleTriggerEnter = useCallback(() => {\n openTimerRef.current = setTimeout(() => handleOpenChange(true), hoverOpenDelay)\n }, [handleOpenChange, hoverOpenDelay])\n\n const handleTriggerLeave = useCallback(() => {\n clearTimeout(openTimerRef.current)\n }, [])\n\n useEffect(() => {\n return () => {\n clearTimeout(openTimerRef.current)\n }\n }, [])\n\n const store = useMemo<PopoverContextValue>(\n () => ({\n open: isOpen,\n setOpen: handleOpenChange,\n shake,\n setShake,\n showOnHover,\n temporarilyPreventClickToClose,\n onTriggerEnter: handleTriggerEnter,\n onTriggerLeave: handleTriggerLeave,\n isPointerInTransitRef,\n triggerRef,\n contentRef,\n hoverOpenFocusedWithTab,\n }),\n [\n isOpen,\n handleOpenChange,\n shake,\n setShake,\n showOnHover,\n temporarilyPreventClickToClose,\n hoverOpenFocusedWithTab,\n isPointerInTransitRef,\n handleTriggerEnter,\n handleTriggerLeave,\n ],\n )\n\n return (\n <PopoverContext value={store}>\n <RadixPopover.Root open={isOpen} onOpenChange={handleOpenChange} modal={false}>\n {children}\n </RadixPopover.Root>\n </PopoverContext>\n )\n}\n\nconst Trigger = ({\n children,\n onPointerDown,\n onClick,\n}: {\n children: React.ReactNode\n onPointerDown?: PointerEventHandler\n onClick?: MouseEventHandler\n}) => {\n const {\n setOpen,\n showOnHover,\n temporarilyPreventClickToClose,\n onTriggerEnter,\n onTriggerLeave,\n isPointerInTransitRef,\n triggerRef,\n contentRef,\n } = usePopoverContext()\n const hasPointerMoveOpenedRef = useRef<boolean>(false)\n\n const maybePreventClickClose = (evt: React.MouseEvent) => {\n // Don't prevent temporary close if the trigger is an anchor tag itself\n const isLink = evt.currentTarget.nodeName.toLocaleLowerCase() === \"a\"\n\n if (!isLink && temporarilyPreventClickToClose) {\n // Prevents tooltip listeners from closing\n evt.preventDefault()\n evt.stopPropagation()\n }\n }\n\n const handlePointerMove = (evt: React.PointerEvent) => {\n if (evt.pointerType === \"touch\") {\n return\n }\n\n if (!hasPointerMoveOpenedRef.current && !isPointerInTransitRef.current) {\n onTriggerEnter()\n hasPointerMoveOpenedRef.current = true\n }\n }\n\n const handlePointerLeave = () => {\n if (!hasPointerMoveOpenedRef.current) {\n return\n }\n\n onTriggerLeave()\n hasPointerMoveOpenedRef.current = false\n }\n\n return (\n <RadixPopover.Trigger\n asChild\n ref={triggerRef}\n onPointerDown={(evt) => {\n maybePreventClickClose(evt)\n onPointerDown?.(evt)\n }}\n onClick={(evt) => {\n maybePreventClickClose(evt)\n onClick?.(evt)\n }}\n onPointerMove={showOnHover ? handlePointerMove : undefined}\n onPointerLeave={showOnHover ? handlePointerLeave : undefined}\n onFocus={showOnHover ? () => setOpen(true) : undefined}\n onBlur={\n showOnHover\n ? () => {\n setTimeout(() => {\n // Ignore this handler if focus has moved into the popover\n if (contentRef.current?.contains(document.activeElement)) {\n return\n }\n\n setOpen(false)\n }, 50)\n }\n : undefined\n }\n >\n {children}\n </RadixPopover.Trigger>\n )\n}\n\nexport type PopoverContentProps = {\n children: ReactNode\n /**\n * Whether to avoid collisions with vieport/scroll containersw.\n * @default true\n */\n avoidCollisions?: boolean\n /**\n * Set the `width` of the popover, in pixels.\n * @default auto\n */\n width?: number | \"auto\"\n /**\n * Set the `min-width` of the popover, in pixels.\n * @default 300\n */\n minWidth?: number | \"auto\"\n /**\n * Set the `max-width` of the popover, in pixels.\n */\n maxWidth?: number\n /**\n * Background style for the popover\n * @default default\n */\n /**\n * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n * @default bottom\n */\n side?: RadixPopover.PopoverContentProps[\"side\"]\n /**\n * The distance in pixels from the trigger.\n * @default 8\n */\n sideOffset?: RadixPopover.PopoverContentProps[\"sideOffset\"]\n /**\n * The preferred alignment against the trigger. May change when collisions occur.\n * @default center\n */\n align?: RadixPopover.PopoverContentProps[\"align\"]\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment options.\n * @default 0\n */\n alignOffset?: RadixPopover.PopoverContentProps[\"alignOffset\"]\n /**\n * Whether the popover surface should be translucent.\n * @default false\n */\n translucent?: boolean\n /** Additional class name to apply to the popover content, you usually don't want to set this, but ag-grid needs it to render a custom editor properly */\n className?: string\n /**\n * Auto focus the popover content when it is opened.\n * @default true\n */\n autoFocus?: boolean\n}\n\nconst ContentImpl = ({\n children,\n avoidCollisions,\n width,\n minWidth,\n maxWidth,\n side,\n sideOffset = 8,\n align,\n alignOffset,\n translucent,\n className,\n autoFocus = true,\n}: PopoverContentProps) => {\n const { showOnHover, shake, contentRef } = usePopoverContext()\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (evt) => {\n const contentElement = contentRef.current\n\n if (\n // When the current target is our container\n contentElement &&\n evt.target === contentElement &&\n // We know that shift key tabs will lead to closing the popover (because we don't use `modal`)\n evt.key === \"Tab\" &&\n evt.shiftKey\n ) {\n // Prevent that from happening\n evt.preventDefault()\n evt.stopPropagation()\n\n // Move focus to the last focusable element, placing the user in the focus loop\n const focusable = focusableElements(contentElement)\n const lastFocusable = focusable[focusable.length - 1]\n lastFocusable?.focus()\n }\n }\n\n // Important that we send initial focus into the popover, placing it onto the container.\n // This allows focus looping to begin, as well as capturing scoped key presses.\n // We prevent Radix's default behavior of focusing an element, because this can have adverse side-effects.\n useEffect(() => {\n const contentElement = contentRef.current\n\n if (!contentElement || !autoFocus) {\n return\n }\n\n // If we're already focused within the content area, no-op.\n // This would be true if some inner component declares autoFocus\n if (contentElement?.contains(document.activeElement)) {\n return\n }\n\n // Our focus isn't in the content area - move it there.\n // NOTE: Don't automatically shift focus on hover popovers\n if (!showOnHover) {\n contentElement.focus({ preventScroll: true })\n }\n }, [contentRef, showOnHover, autoFocus])\n\n return (\n <RadixPopover.Content\n forceMount\n ref={contentRef}\n className={clsx(s.Popover, className)}\n style={toCssVariables({\n \"popover-width\": width,\n \"popover-min-width\": minWidth,\n \"popover-max-width\": maxWidth,\n })}\n onCloseAutoFocus={showOnHover ? preventDefaultHandler : undefined}\n // data-surface={surface}\n data-animate={shake ? \"shake\" : undefined}\n data-translucent={translucent ? \"true\" : undefined}\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset ?? (align === \"center\" ? 0 : -5)}\n avoidCollisions={avoidCollisions ?? true}\n hideWhenDetached\n collisionPadding={20}\n onOpenAutoFocus={preventDefaultHandler}\n // Use custom esc listener because default Radix is bound to the document\n // and cannot have propagation stopped.\n onEscapeKeyDown={preventDefaultHandler}\n onKeyDown={handleKeyDown}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nconst ContentHoverable = (props: PopoverContentProps) => {\n const { setOpen, triggerRef, contentRef, isPointerInTransitRef, hoverOpenFocusedWithTab } =\n usePopoverContext()\n const [pointerGraceArea, setPointerGraceArea] = useState<Polygon | null>(null)\n\n const handleRemoveGraceArea = useCallback(() => {\n setPointerGraceArea(null)\n isPointerInTransitRef.current = false\n }, [isPointerInTransitRef])\n\n const handleCreateGraceArea = useCallback(\n (event: PointerEvent, hoverTarget: HTMLElement) => {\n const graceArea = createPointerIntentArea(event, hoverTarget)\n setPointerGraceArea(graceArea)\n isPointerInTransitRef.current = true\n },\n [isPointerInTransitRef],\n )\n\n useEffect(() => {\n return () => handleRemoveGraceArea()\n }, [handleRemoveGraceArea])\n\n useEffect(() => {\n const trigger = triggerRef.current\n const content = contentRef.current\n\n if (!trigger || !content) {\n return\n }\n\n const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, content)\n const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, trigger)\n\n trigger.addEventListener(\"pointerleave\", handleTriggerLeave)\n content.addEventListener(\"pointerleave\", handleContentLeave)\n return () => {\n trigger.removeEventListener(\"pointerleave\", handleTriggerLeave)\n content.removeEventListener(\"pointerleave\", handleContentLeave)\n }\n }, [contentRef, triggerRef, handleCreateGraceArea, handleRemoveGraceArea])\n\n useEffect(() => {\n if (!pointerGraceArea) {\n return\n }\n\n const handleTrackPointerGrace = (event: PointerEvent) => {\n const trigger = triggerRef.current\n const content = contentRef.current\n const target = event.target as HTMLElement\n const pointerPosition = { x: event.clientX, y: event.clientY }\n const hasEnteredTarget = trigger?.contains(target) || content?.contains(target)\n const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea)\n // Stop considering grace areas when the pointer runs into other control triggers\n const targetHasPopup = target.hasAttribute(\"aria-haspopup\")\n\n if (hasEnteredTarget) {\n handleRemoveGraceArea()\n } else if (isPointerOutsideGraceArea || targetHasPopup) {\n handleRemoveGraceArea()\n setOpen(false)\n }\n }\n document.addEventListener(\"pointermove\", handleTrackPointerGrace)\n return () => document.removeEventListener(\"pointermove\", handleTrackPointerGrace)\n }, [pointerGraceArea, setOpen, handleRemoveGraceArea, triggerRef, contentRef])\n\n // Hoverable doesn't place focus in the popover by default\n // If this is open, and tab is pressed, and focusableElements() has an element, prevent default behavior and focus it\n // Then set a flag (probably in context) that tells us to restore focus to the trigger on close (e.g., not execute the onCloseAutoFocus handler)\n\n useEffect(() => {\n const handleKeyDown = (evt: KeyboardEvent) => {\n if (!contentRef.current) {\n return\n }\n\n // Only assume forward tab is attempting to move into the popup\n if (evt.key === \"Tab\" && !evt.shiftKey) {\n const [firstFocusable] = focusableElements(contentRef.current)\n if (firstFocusable) {\n evt.preventDefault()\n firstFocusable.focus()\n hoverOpenFocusedWithTab.current = true\n document.removeEventListener(\"keydown\", handleKeyDown)\n }\n }\n }\n document.addEventListener(\"keydown\", handleKeyDown)\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown)\n }\n }, [contentRef, hoverOpenFocusedWithTab])\n\n return <ContentImpl {...props} />\n}\n\nconst Content = (props: PopoverContentProps) => {\n const { open, showOnHover, setOpen } = usePopoverContext()\n\n useEscCloseStack(open, () => {\n setOpen(false)\n })\n\n return (\n <RadixPopover.Portal forceMount>\n <TransitionGroup\n enterDuration={600}\n exitDuration={300}\n className={s.Transition}\n disableAnimations\n >\n {open &&\n (showOnHover ? (\n <ContentHoverable key=\"popover-hover\" {...props} />\n ) : (\n <ContentImpl key=\"popover\" {...props} />\n ))}\n </TransitionGroup>\n </RadixPopover.Portal>\n )\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\n"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export { Popover } from "./Popover";
|
|
2
|
-
|
|
3
|
-
export { usePopoverController } from "./usePopoverController";
|
|
1
|
+
export { Popover } from "./Popover.js";
|
|
2
|
+
export { usePopoverController } from "./usePopoverController.js";
|
|
4
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAA+C,MAAM,WAAW,CAAA;AAChF,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAA+C,MAAM,WAAW,CAAA;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA","sourcesContent":["export { Popover, type PopoverContentProps, type PopoverProps } from \"./Popover\"\nexport { usePopoverController } from \"./usePopoverController\"\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
3
|
import { flushSync } from "react-dom";
|
|
4
|
-
import { waitForAnimationFrame } from "../../lib/helpers";
|
|
5
|
-
import { usePopoverContext } from "./usePopoverContext";
|
|
4
|
+
import { waitForAnimationFrame } from "../../lib/helpers.js";
|
|
5
|
+
import { usePopoverContext } from "./usePopoverContext.js";
|
|
6
6
|
export const usePopoverClose = () => {
|
|
7
7
|
const { setOpen } = usePopoverContext();
|
|
8
8
|
return useCallback(() => setOpen(false), [setOpen]);
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
import {} from "react";
|
|
5
5
|
import { Progress as RadixProgress } from "radix-ui";
|
|
6
|
-
import s from "
|
|
6
|
+
import s from "@plexui/styles/components/Progress/Progress.module.css";
|
|
7
7
|
export const Progress = ({ value = null, max = 100, className, ...restProps }) => {
|
|
8
8
|
const resolved = value == null ? null : Math.max(0, Math.min(max, value));
|
|
9
9
|
const percentage = resolved == null ? null : (resolved / max) * 100;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,CAAC,MAAM,wDAAwD,CAAA;AAmBtE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,GAAG,IAAI,EACZ,GAAG,GAAG,GAAG,EACT,SAAS,EACT,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;IACzE,MAAM,UAAU,GAAG,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;IAEnE,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,IACjB,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,YAEb,KAAC,aAAa,CAAC,SAAS,IACtB,SAAS,EAAE,CAAC,CAAC,SAAS,EACtB,KAAK,EAAE;gBACL,SAAS,EACP,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,GAAG,GAAG,UAAU,IAAI;aACvE,wBACmB,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GACvD,GACiB,CACtB,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport { Progress as RadixProgress } from \"radix-ui\"\nimport s from \"@plexui/styles/components/Progress/Progress.module.css\"\n\nexport type ProgressProps = Omit<\n ComponentProps<typeof RadixProgress.Root>,\n \"children\"\n> & {\n /**\n * Current progress value, between `0` and `max`.\n * Omit (or pass `null`) for an indeterminate state.\n */\n value?: number | null\n /**\n * Maximum value.\n * @default 100\n */\n max?: number\n className?: string\n}\n\nexport const Progress = ({\n value = null,\n max = 100,\n className,\n ...restProps\n}: ProgressProps) => {\n const resolved = value == null ? null : Math.max(0, Math.min(max, value))\n const percentage = resolved == null ? null : (resolved / max) * 100\n\n return (\n <RadixProgress.Root\n value={resolved}\n max={max}\n className={clsx(s.Root, className)}\n {...restProps}\n >\n <RadixProgress.Indicator\n className={s.Indicator}\n style={{\n transform:\n percentage == null ? undefined : `translateX(-${100 - percentage}%)`,\n }}\n data-indeterminate={percentage == null ? \"\" : undefined}\n />\n </RadixProgress.Root>\n )\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Progress } from "./Progress";
|
|
1
|
+
export { Progress } from "./Progress.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
import React, { createContext, use, useMemo, useRef } from "react";
|
|
5
|
-
import { isDev } from "../../lib/environment";
|
|
6
|
-
import { CheckMd } from "../Icon";
|
|
7
|
-
import s from "
|
|
5
|
+
import { isDev } from "../../lib/environment.js";
|
|
6
|
+
import { CheckMd } from "../Icon/index.js";
|
|
7
|
+
import s from "@plexui/styles/components/ProgressSteps/ProgressSteps.module.css";
|
|
8
8
|
const ProgressStepsContext = createContext(null);
|
|
9
9
|
const useProgressStepsContext = () => {
|
|
10
10
|
const context = use(ProgressStepsContext);
|
|
@@ -24,7 +24,9 @@ export const ProgressSteps = ({ current, total, variant = "default", color = "de
|
|
|
24
24
|
const store = useMemo(() => ({ current, orientation, size, connectorStyle, variant, color, totalSteps }), [current, orientation, size, connectorStyle, variant, color, totalSteps]);
|
|
25
25
|
// Minimal variant: render horizontal bar segments
|
|
26
26
|
if (variant === "minimal") {
|
|
27
|
-
return (
|
|
27
|
+
return (
|
|
28
|
+
// A div, not nav: role="progressbar" is not allowed on <nav>
|
|
29
|
+
_jsx("div", { "aria-label": "Progress", role: "progressbar", "aria-valuenow": current, "aria-valuemin": 1, "aria-valuemax": totalSteps, className: clsx(s.ProgressSteps, s.Minimal, className), "data-size": size, "data-color": color, "data-variant": "minimal", children: _jsx("div", { className: s.MinimalList, children: Array.from({ length: totalSteps }, (_, i) => (_jsx("div", { className: s.MinimalSegment, "data-state": i < current ? "completed" : "upcoming" }, i))) }) }));
|
|
28
30
|
}
|
|
29
31
|
return (_jsx(ProgressStepsContext, { value: store, children: _jsx("nav", { "aria-label": "Progress", className: clsx(s.ProgressSteps, className), "data-size": size, "data-color": color, "data-variant": variant, children: _jsx("ol", { className: s.List, "data-orientation": orientation, "data-connector": connectorStyle, "data-variant": variant, children: React.Children.map(children, (child, index) => React.isValidElement(child)
|
|
30
32
|
? React.cloneElement(child, { _index: index })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressSteps.js","sourceRoot":"","sources":["../../../../src/components/ProgressSteps/ProgressSteps.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAE7C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"ProgressSteps.js","sourceRoot":"","sources":["../../../../src/components/ProgressSteps/ProgressSteps.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport React, { createContext, use, useMemo, useRef, type ReactNode } from \"react\"\nimport { isDev } from \"../../lib/environment\"\nimport type { Sizes } from \"../../types\"\nimport { CheckMd } from \"../Icon\"\nimport s from \"@plexui/styles/components/ProgressSteps/ProgressSteps.module.css\"\n\ntype Orientation = \"horizontal\" | \"vertical\"\ntype StepState = \"completed\" | \"active\" | \"inactive\"\ntype ConnectorStyle = \"solid\" | \"dashed\"\ntype Variant = \"default\" | \"minimal\"\ntype Color = \"default\" | \"success\"\n\ntype ProgressStepsContextValue = {\n current: number\n orientation: Orientation\n size: Sizes<\"sm\" | \"md\" | \"lg\">\n connectorStyle: ConnectorStyle\n variant: Variant\n color: Color\n totalSteps: number\n}\n\nconst ProgressStepsContext = createContext<ProgressStepsContextValue | null>(null)\n\nconst useProgressStepsContext = () => {\n const context = use(ProgressStepsContext)\n if (!context) {\n throw new Error(\"ProgressSteps components must be wrapped in <ProgressSteps />\")\n }\n return context\n}\n\nexport type ProgressStepsProps = {\n /** Current active step (1-indexed, starts from 1) */\n current: number\n /**\n * Total number of steps (required for minimal variant)\n */\n total?: number\n /**\n * Visual variant\n * @default default\n */\n variant?: Variant\n /**\n * Color scheme\n * @default default\n */\n color?: Color\n /**\n * Layout orientation\n * @default horizontal\n */\n orientation?: Orientation\n /**\n * Size of step indicators\n * @default md\n */\n size?: Sizes<\"sm\" | \"md\" | \"lg\">\n /**\n * Connector line style\n * @default solid\n */\n connectorStyle?: ConnectorStyle\n /** Class applied to the container */\n className?: string\n children?: ReactNode\n}\n\nexport const ProgressSteps = ({\n current,\n total,\n variant = \"default\",\n color = \"default\",\n orientation = \"horizontal\",\n size = \"md\",\n connectorStyle = \"solid\",\n children,\n className,\n}: ProgressStepsProps) => {\n const totalSteps = variant === \"minimal\" ? total ?? 0 : React.Children.count(children)\n\n const warnedRef = useRef(false)\n if (isDev && variant === \"minimal\" && (total == null || total <= 0) && !warnedRef.current) {\n warnedRef.current = true\n // eslint-disable-next-line no-console\n console.warn(\n '[ProgressSteps] variant=\"minimal\" requires a positive `total` prop. Received:',\n total,\n )\n }\n\n const store = useMemo<ProgressStepsContextValue>(\n () => ({ current, orientation, size, connectorStyle, variant, color, totalSteps }),\n [current, orientation, size, connectorStyle, variant, color, totalSteps],\n )\n\n // Minimal variant: render horizontal bar segments\n if (variant === \"minimal\") {\n return (\n // A div, not nav: role=\"progressbar\" is not allowed on <nav>\n <div\n aria-label=\"Progress\"\n role=\"progressbar\"\n aria-valuenow={current}\n aria-valuemin={1}\n aria-valuemax={totalSteps}\n className={clsx(s.ProgressSteps, s.Minimal, className)}\n data-size={size}\n data-color={color}\n data-variant=\"minimal\"\n >\n <div className={s.MinimalList}>\n {Array.from({ length: totalSteps }, (_, i) => (\n <div\n key={i}\n className={s.MinimalSegment}\n data-state={i < current ? \"completed\" : \"upcoming\"}\n />\n ))}\n </div>\n </div>\n )\n }\n\n return (\n <ProgressStepsContext value={store}>\n <nav\n aria-label=\"Progress\"\n className={clsx(s.ProgressSteps, className)}\n data-size={size}\n data-color={color}\n data-variant={variant}\n >\n <ol\n className={s.List}\n data-orientation={orientation}\n data-connector={connectorStyle}\n data-variant={variant}\n >\n {React.Children.map(children, (child, index) =>\n React.isValidElement(child)\n ? React.cloneElement(child, { _index: index } as Record<string, unknown>)\n : child,\n )}\n </ol>\n </nav>\n </ProgressStepsContext>\n )\n}\n\nexport type StepProps = {\n /** Custom icon (replaces step number) */\n icon?: ReactNode\n /** Step content (Title and/or Description) */\n children?: ReactNode\n /** @internal - injected by parent */\n _index?: number\n}\n\nconst Step = ({ children, icon, _index = 0 }: StepProps) => {\n const { current, totalSteps } = useProgressStepsContext()\n\n const state: StepState =\n _index < current - 1 ? \"completed\" : _index === current - 1 ? \"active\" : \"inactive\"\n\n const isLast = _index === totalSteps - 1\n\n return (\n <li\n className={s.Step}\n data-state={state}\n aria-current={state === \"active\" ? \"step\" : undefined}\n >\n <div className={s.StepIndicator}>\n {state === \"completed\" ? <CheckMd data-no-autosize /> : icon ?? _index + 1}\n </div>\n {!isLast && <div className={s.StepConnector} />}\n <div className={s.StepContent}>{children}</div>\n </li>\n )\n}\n\nconst Title = ({ children, className }: { children: ReactNode; className?: string }) => (\n <div className={clsx(s.StepTitle, className)}>{children}</div>\n)\n\nconst Description = ({ children, className }: { children: ReactNode; className?: string }) => (\n <div className={clsx(s.StepDescription, className)}>{children}</div>\n)\n\nProgressSteps.Step = Step\nProgressSteps.Title = Title\nProgressSteps.Description = Description\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { ProgressSteps } from "./ProgressSteps";
|
|
1
|
+
export { ProgressSteps } from "./ProgressSteps.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|