@gunkin/uiify 0.0.25-alpha → 0.0.26-alpha
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/agents/reference/components/accordion.md +4 -4
- package/agents/reference/components/alert-modal.md +10 -10
- package/agents/reference/components/alert.md +1 -1
- package/agents/reference/components/aspect-ratio.md +1 -1
- package/agents/reference/components/avatar.md +2 -2
- package/agents/reference/components/breadcrumb.md +9 -10
- package/agents/reference/components/candle-chart.md +35 -35
- package/agents/reference/components/carousel.md +10 -14
- package/agents/reference/components/collapsible.md +3 -3
- package/agents/reference/components/color-picker.md +6 -6
- package/agents/reference/components/combobox.md +7 -17
- package/agents/reference/components/context-menu.md +5 -26
- package/agents/reference/components/date-picker.md +2 -1
- package/agents/reference/components/drawer.md +17 -31
- package/agents/reference/components/dropdown-menu.md +2 -3
- package/agents/reference/components/field.md +11 -11
- package/agents/reference/components/form-error-summary.md +4 -4
- package/agents/reference/components/input-group.md +1 -0
- package/agents/reference/components/input.md +1 -0
- package/agents/reference/components/line-chart.md +29 -29
- package/agents/reference/components/modal.md +13 -15
- package/agents/reference/components/number-field.md +1 -1
- package/agents/reference/components/otp-input.md +2 -1
- package/agents/reference/components/pagination.md +7 -8
- package/agents/reference/components/rating.md +1 -1
- package/agents/reference/components/segmented-control.md +1 -0
- package/agents/reference/components/select.md +1 -0
- package/agents/reference/components/slider.md +4 -4
- package/agents/reference/components/spinner.md +1 -1
- package/agents/reference/components/table.md +1 -1
- package/agents/reference/components/tabs.md +6 -6
- package/agents/reference/components/tags-input.md +5 -12
- package/agents/reference/components/toast.md +8 -15
- package/agents/reference/components/toggle.md +4 -3
- package/agents/reference/components/virtual-scroll.md +4 -5
- package/agents/reference/elements/choice.md +3 -3
- package/agents/reference/elements/details.md +2 -2
- package/agents/reference/elements/popover.md +3 -3
- package/dist/components/accordion/Accordion.d.ts.map +1 -1
- package/dist/components/accordion/Accordion.js +20 -46
- package/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/accordion/types.d.ts +6 -15
- package/dist/components/accordion/types.d.ts.map +1 -1
- package/dist/components/alert/Alert.d.ts.map +1 -1
- package/dist/components/alert/Alert.js +5 -14
- package/dist/components/alert/Alert.js.map +1 -1
- package/dist/components/alert/types.d.ts +3 -7
- package/dist/components/alert/types.d.ts.map +1 -1
- package/dist/components/alert-modal/AlertModal.d.ts.map +1 -1
- package/dist/components/alert-modal/AlertModal.js +28 -137
- package/dist/components/alert-modal/AlertModal.js.map +1 -1
- package/dist/components/alert-modal/AlertModalParts.d.ts.map +1 -1
- package/dist/components/alert-modal/AlertModalParts.js +4 -37
- package/dist/components/alert-modal/AlertModalParts.js.map +1 -1
- package/dist/components/alert-modal/types.d.ts +15 -33
- package/dist/components/alert-modal/types.d.ts.map +1 -1
- package/dist/components/aspect-ratio/AspectRatio.d.ts.map +1 -1
- package/dist/components/aspect-ratio/AspectRatio.js +4 -12
- package/dist/components/aspect-ratio/AspectRatio.js.map +1 -1
- package/dist/components/aspect-ratio/types.d.ts +3 -6
- package/dist/components/aspect-ratio/types.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js +4 -21
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/types.d.ts +4 -14
- package/dist/components/avatar/types.d.ts.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.js +43 -123
- package/dist/components/breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/components/breadcrumb/types.d.ts +12 -35
- package/dist/components/breadcrumb/types.d.ts.map +1 -1
- package/dist/components/candle-chart/CandleChart.d.ts.map +1 -1
- package/dist/components/candle-chart/CandleChart.js +122 -186
- package/dist/components/candle-chart/CandleChart.js.map +1 -1
- package/dist/components/candle-chart/client/CandleChartClient.d.ts.map +1 -1
- package/dist/components/candle-chart/client/CandleChartClient.js +8 -15
- package/dist/components/candle-chart/client/CandleChartClient.js.map +1 -1
- package/dist/components/candle-chart/types.d.ts +42 -116
- package/dist/components/candle-chart/types.d.ts.map +1 -1
- package/dist/components/carousel/CarouselMarkup.d.ts.map +1 -1
- package/dist/components/carousel/CarouselMarkup.js +55 -142
- package/dist/components/carousel/CarouselMarkup.js.map +1 -1
- package/dist/components/carousel/types.d.ts +13 -80
- package/dist/components/carousel/types.d.ts.map +1 -1
- package/dist/components/collapsible/Collapsible.d.ts +1 -5
- package/dist/components/collapsible/Collapsible.d.ts.map +1 -1
- package/dist/components/collapsible/Collapsible.js +3 -33
- package/dist/components/collapsible/Collapsible.js.map +1 -1
- package/dist/components/collapsible/types.d.ts +4 -18
- package/dist/components/collapsible/types.d.ts.map +1 -1
- package/dist/components/color-picker/ColorPicker.d.ts.map +1 -1
- package/dist/components/color-picker/ColorPicker.js +28 -123
- package/dist/components/color-picker/ColorPicker.js.map +1 -1
- package/dist/components/color-picker/types.d.ts +11 -30
- package/dist/components/color-picker/types.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.js +30 -23
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/combobox/types.d.ts +9 -29
- package/dist/components/combobox/types.d.ts.map +1 -1
- package/dist/components/context-menu/ContextMenu.d.ts.map +1 -1
- package/dist/components/context-menu/ContextMenu.js +30 -53
- package/dist/components/context-menu/ContextMenu.js.map +1 -1
- package/dist/components/context-menu/types.d.ts +6 -31
- package/dist/components/context-menu/types.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.d.ts +1 -1
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.js +2 -1
- package/dist/components/date-picker/DatePicker.js.map +1 -1
- package/dist/components/date-picker/types.d.ts +4 -1
- package/dist/components/date-picker/types.d.ts.map +1 -1
- package/dist/components/drawer/Drawer.d.ts.map +1 -1
- package/dist/components/drawer/Drawer.js +12 -12
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/drawer/DrawerNative.d.ts.map +1 -1
- package/dist/components/drawer/DrawerNative.js +47 -252
- package/dist/components/drawer/DrawerNative.js.map +1 -1
- package/dist/components/drawer/types.d.ts +25 -30
- package/dist/components/drawer/types.d.ts.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.js +30 -27
- package/dist/components/dropdown-menu/DropdownMenu.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuBar.d.ts.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuBar.js +3 -7
- package/dist/components/dropdown-menu/DropdownMenuBar.js.map +1 -1
- package/dist/components/dropdown-menu/types.d.ts +2 -5
- package/dist/components/dropdown-menu/types.d.ts.map +1 -1
- package/dist/components/field/Field.js +7 -7
- package/dist/components/field/Field.js.map +1 -1
- package/dist/components/field/types.d.ts +11 -11
- package/dist/components/field/types.d.ts.map +1 -1
- package/dist/components/form-error-summary/FormErrorSummary.d.ts.map +1 -1
- package/dist/components/form-error-summary/FormErrorSummary.js +20 -34
- package/dist/components/form-error-summary/FormErrorSummary.js.map +1 -1
- package/dist/components/form-error-summary/types.d.ts +6 -16
- package/dist/components/form-error-summary/types.d.ts.map +1 -1
- package/dist/components/hover-card/HoverCard.d.ts.map +1 -1
- package/dist/components/hover-card/HoverCard.js +9 -9
- package/dist/components/hover-card/HoverCard.js.map +1 -1
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +2 -0
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input/types.d.ts +3 -0
- package/dist/components/input/types.d.ts.map +1 -1
- package/dist/components/input-group/InputGroup.d.ts.map +1 -1
- package/dist/components/input-group/InputGroup.js +2 -1
- package/dist/components/input-group/InputGroup.js.map +1 -1
- package/dist/components/input-group/types.d.ts +3 -0
- package/dist/components/input-group/types.d.ts.map +1 -1
- package/dist/components/internal/chart-scrollbar/use-scrollbar-reserve.d.ts +2 -2
- package/dist/components/internal/chart-scrollbar/use-scrollbar-reserve.d.ts.map +1 -1
- package/dist/components/internal/chart-scrollbar/use-scrollbar-reserve.js +11 -3
- package/dist/components/internal/chart-scrollbar/use-scrollbar-reserve.js.map +1 -1
- package/dist/components/internal/choice-family/ChoiceGroup.d.ts.map +1 -1
- package/dist/components/internal/choice-family/ChoiceGroup.js +14 -51
- package/dist/components/internal/choice-family/ChoiceGroup.js.map +1 -1
- package/dist/components/internal/choice-family/types.d.ts +8 -40
- package/dist/components/internal/choice-family/types.d.ts.map +1 -1
- package/dist/components/internal/control-size/types.d.ts +3 -0
- package/dist/components/internal/control-size/types.d.ts.map +1 -0
- package/dist/components/internal/control-size/types.js +1 -0
- package/dist/components/internal/control-size/types.js.map +1 -0
- package/dist/components/internal/live-chart/types.d.ts +3 -1
- package/dist/components/internal/live-chart/types.d.ts.map +1 -1
- package/dist/components/internal/live-chart/use-live-chart-window.d.ts.map +1 -1
- package/dist/components/internal/live-chart/use-live-chart-window.js +21 -5
- package/dist/components/internal/live-chart/use-live-chart-window.js.map +1 -1
- package/dist/components/internal/menu/menu-parts.d.ts.map +1 -1
- package/dist/components/internal/menu/menu-parts.js +3 -3
- package/dist/components/internal/menu/menu-parts.js.map +1 -1
- package/dist/components/internal/native-check-control/NativeCheckControl.d.ts.map +1 -1
- package/dist/components/internal/native-check-control/NativeCheckControl.js +8 -32
- package/dist/components/internal/native-check-control/NativeCheckControl.js.map +1 -1
- package/dist/components/internal/native-check-control/types.d.ts +4 -18
- package/dist/components/internal/native-check-control/types.d.ts.map +1 -1
- package/dist/components/line-chart/LineChart.d.ts.map +1 -1
- package/dist/components/line-chart/LineChart.js +134 -208
- package/dist/components/line-chart/LineChart.js.map +1 -1
- package/dist/components/line-chart/client/LineChartClient.d.ts.map +1 -1
- package/dist/components/line-chart/client/LineChartClient.js +8 -15
- package/dist/components/line-chart/client/LineChartClient.js.map +1 -1
- package/dist/components/line-chart/types.d.ts +36 -103
- package/dist/components/line-chart/types.d.ts.map +1 -1
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +34 -115
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/ModalAnatomy.js +6 -6
- package/dist/components/modal/ModalAnatomy.js.map +1 -1
- package/dist/components/modal/ModalParts.js +1 -1
- package/dist/components/modal/ModalParts.js.map +1 -1
- package/dist/components/modal/client/ModalClientContent.d.ts.map +1 -1
- package/dist/components/modal/client/ModalClientContent.js +2 -2
- package/dist/components/modal/client/ModalClientContent.js.map +1 -1
- package/dist/components/modal/types.d.ts +19 -19
- package/dist/components/modal/types.d.ts.map +1 -1
- package/dist/components/number-field/NumberField.d.ts.map +1 -1
- package/dist/components/number-field/NumberField.js +13 -11
- package/dist/components/number-field/NumberField.js.map +1 -1
- package/dist/components/number-field/types.d.ts +1 -1
- package/dist/components/number-field/types.d.ts.map +1 -1
- package/dist/components/otp-input/OtpInput.d.ts.map +1 -1
- package/dist/components/otp-input/OtpInput.js +9 -9
- package/dist/components/otp-input/OtpInput.js.map +1 -1
- package/dist/components/otp-input/types.d.ts +4 -1
- package/dist/components/otp-input/types.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.js +26 -69
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/PaginationShell.d.ts.map +1 -1
- package/dist/components/pagination/PaginationShell.js +5 -6
- package/dist/components/pagination/PaginationShell.js.map +1 -1
- package/dist/components/pagination/types.d.ts +9 -32
- package/dist/components/pagination/types.d.ts.map +1 -1
- package/dist/components/rating/types.d.ts +1 -5
- package/dist/components/rating/types.d.ts.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.d.ts +1 -1
- package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.js +4 -2
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
- package/dist/components/segmented-control/client/SegmentedControlClient.d.ts +1 -1
- package/dist/components/segmented-control/client/SegmentedControlClient.d.ts.map +1 -1
- package/dist/components/segmented-control/client/SegmentedControlClient.js +4 -2
- package/dist/components/segmented-control/client/SegmentedControlClient.js.map +1 -1
- package/dist/components/segmented-control/types.d.ts +3 -0
- package/dist/components/segmented-control/types.d.ts.map +1 -1
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +2 -0
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select/types.d.ts +3 -0
- package/dist/components/select/types.d.ts.map +1 -1
- package/dist/components/slider/Slider.d.ts.map +1 -1
- package/dist/components/slider/Slider.js +12 -7
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/slider/client/SliderClient.d.ts.map +1 -1
- package/dist/components/slider/client/SliderClient.js +53 -100
- package/dist/components/slider/client/SliderClient.js.map +1 -1
- package/dist/components/slider/types.d.ts +8 -38
- package/dist/components/slider/types.d.ts.map +1 -1
- package/dist/components/spinner/Spinner.d.ts.map +1 -1
- package/dist/components/spinner/Spinner.js +2 -10
- package/dist/components/spinner/Spinner.js.map +1 -1
- package/dist/components/spinner/types.d.ts +3 -6
- package/dist/components/spinner/types.d.ts.map +1 -1
- package/dist/components/table/client/TableColumnHeader.d.ts.map +1 -1
- package/dist/components/table/client/TableColumnHeader.js +1 -15
- package/dist/components/table/client/TableColumnHeader.js.map +1 -1
- package/dist/components/table/types.d.ts +2 -6
- package/dist/components/table/types.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +9 -43
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/types.d.ts +8 -21
- package/dist/components/tabs/types.d.ts.map +1 -1
- package/dist/components/tags-input/TagsInput.d.ts.map +1 -1
- package/dist/components/tags-input/TagsInput.js +16 -27
- package/dist/components/tags-input/TagsInput.js.map +1 -1
- package/dist/components/tags-input/types.d.ts +8 -23
- package/dist/components/tags-input/types.d.ts.map +1 -1
- package/dist/components/toast/Toast.d.ts.map +1 -1
- package/dist/components/toast/Toast.js +13 -62
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toast/ToastElements.d.ts.map +1 -1
- package/dist/components/toast/ToastElements.js +20 -57
- package/dist/components/toast/ToastElements.js.map +1 -1
- package/dist/components/toast/types.d.ts +9 -36
- package/dist/components/toast/types.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.d.ts +1 -1
- package/dist/components/toggle/Toggle.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.js +36 -61
- package/dist/components/toggle/Toggle.js.map +1 -1
- package/dist/components/toggle/types.d.ts +5 -24
- package/dist/components/toggle/types.d.ts.map +1 -1
- package/dist/components/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/tooltip/Tooltip.js +4 -4
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/virtual-scroll/VirtualScroll.d.ts.map +1 -1
- package/dist/components/virtual-scroll/VirtualScroll.js +65 -43
- package/dist/components/virtual-scroll/VirtualScroll.js.map +1 -1
- package/dist/components/virtual-scroll/VirtualScrollRowShell.js +2 -2
- package/dist/components/virtual-scroll/VirtualScrollRowShell.js.map +1 -1
- package/dist/components/virtual-scroll/types.d.ts +7 -20
- package/dist/components/virtual-scroll/types.d.ts.map +1 -1
- package/dist/components/virtual-scroll/types.js.map +1 -1
- package/dist/components/virtual-scroll/virtual-scroll-scroll-sync.d.ts +3 -0
- package/dist/components/virtual-scroll/virtual-scroll-scroll-sync.d.ts.map +1 -1
- package/dist/components/virtual-scroll/virtual-scroll-scroll-sync.js +11 -2
- package/dist/components/virtual-scroll/virtual-scroll-scroll-sync.js.map +1 -1
- package/dist/core/class-names.d.ts +3 -0
- package/dist/core/class-names.d.ts.map +1 -0
- package/dist/core/class-names.js +7 -0
- package/dist/core/class-names.js.map +1 -0
- package/dist/core/part-names.d.ts +8 -0
- package/dist/core/part-names.d.ts.map +1 -0
- package/dist/core/part-names.js +111 -0
- package/dist/core/part-names.js.map +1 -0
- package/dist/core/polymorphic.d.ts +10 -3
- package/dist/core/polymorphic.d.ts.map +1 -1
- package/dist/core/render-native-invoker.d.ts +1 -0
- package/dist/core/render-native-invoker.d.ts.map +1 -1
- package/dist/core/render-native-invoker.js +6 -6
- package/dist/core/render-native-invoker.js.map +1 -1
- package/dist/core/roving-focus.d.ts +2 -2
- package/dist/core/roving-focus.d.ts.map +1 -1
- package/dist/core/roving-focus.js +6 -7
- package/dist/core/roving-focus.js.map +1 -1
- package/dist/core/slot-props.d.ts +9 -7
- package/dist/core/slot-props.d.ts.map +1 -1
- package/dist/core/slot-props.js +4 -14
- package/dist/core/slot-props.js.map +1 -1
- package/dist/elements/choice/Choice.d.ts.map +1 -1
- package/dist/elements/choice/Choice.js +5 -42
- package/dist/elements/choice/Choice.js.map +1 -1
- package/dist/elements/choice/types.d.ts +4 -11
- package/dist/elements/choice/types.d.ts.map +1 -1
- package/dist/elements/details/Details.d.ts.map +1 -1
- package/dist/elements/details/Details.js +4 -5
- package/dist/elements/details/Details.js.map +1 -1
- package/dist/elements/details/types.d.ts +3 -3
- package/dist/elements/details/types.d.ts.map +1 -1
- package/dist/elements/dialog/Dialog.d.ts.map +1 -1
- package/dist/elements/dialog/Dialog.js +1 -1
- package/dist/elements/dialog/Dialog.js.map +1 -1
- package/dist/elements/invoker/Invoker.js +3 -3
- package/dist/elements/invoker/Invoker.js.map +1 -1
- package/dist/elements/popover/Popover.d.ts.map +1 -1
- package/dist/elements/popover/Popover.js +3 -3
- package/dist/elements/popover/Popover.js.map +1 -1
- package/dist/elements/popover/types.d.ts +6 -4
- package/dist/elements/popover/types.d.ts.map +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/styles/tailwind.css +2 -2
- package/dist/styles/tokens.css +1 -1
- package/package.json +1 -1
- package/skills/uiify/references/elements/aspect-ratio.md +1 -1
- package/skills/uiify/references/elements/field.md +1 -1
- package/skills/uiify/references/elements/toggle.md +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { CSSProperties, ElementType, ReactElement, Ref } from \"react\";\nimport { useChartViewport } from \"../../../hooks/use-chart-viewport.js\";\nimport { useMergedRefs } from \"../../../hooks/use-merged-refs.js\";\nimport { useResizeObserver } from \"../../../hooks/use-resize-observer.js\";\nimport {\n liveTimeAxis,\n useLiveChartWindow,\n} from \"../../internal/live-chart/use-live-chart-window.js\";\nimport { useScrollbarReserve } from \"../../internal/chart-scrollbar/use-scrollbar-reserve.js\";\nimport { omitProps } from \"../../../core/slot-props.js\";\nimport { VirtualScroll } from \"../../virtual-scroll/VirtualScroll.js\";\nimport { LineChart, LineChartPoint } from \"../LineChart.js\";\nimport { getValueBounds } from \"../line-chart-geometry.js\";\nimport type {\n LineChartClientProps,\n LineChartData,\n LineChartPointerPosition,\n LineChartProps,\n LineChartViewProps,\n} from \"../types.js\";\n\ninterface CursorState extends LineChartPointerPosition {}\n\ninterface InteractiveLineStyle extends CSSProperties {\n \"--line-scale\": string;\n \"--line-content-size\"?: string;\n \"--line-plot-height\"?: string;\n \"--line-run\"?: string;\n}\n\ninterface LivePoint {\n readonly id: string;\n readonly point: LineChartData;\n}\n\n/**\n * `[data-part=\"plot\"]`'s fixed price-axis column (4.5rem) plus its grid gap\n * (0.75rem) — see line-chart.css. `useChartViewport` measures the whole\n * `<figure>`, but points only ever get the width left over after this\n * column, so it must be subtracted before sizing `minItemWidth`.\n */\nconst Y_AXIS_COLUMN_WIDTH = 72 + 12;\n\nexport function LineChartClient<TAs extends ElementType = \"figure\">(\n props: LineChartClientProps<TAs>,\n): ReactElement | null {\n const {\n data,\n visibleCount,\n xAxis,\n ref: consumerRef,\n style: consumerStyle,\n onPointClick: consumerOnPointClick,\n onPointPointerLeave: consumerOnPointPointerLeave,\n onPointPointerMove: consumerOnPointPointerMove,\n slotProps,\n ...consumerProps\n } = props as LineChartClientProps<\"figure\"> & {\n ref?: Ref<HTMLElement>;\n style?: CSSProperties;\n };\n const live = visibleCount !== undefined && visibleCount > 0;\n const viewport = useChartViewport(\n live\n ? {\n enabled: false,\n initialScale: 1,\n itemCount: visibleCount,\n measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,\n }\n : { itemCount: data.length, measuredWidthOffset: Y_AXIS_COLUMN_WIDTH, minItemWidth: 24 },\n );\n const figureSize = useResizeObserver(viewport.ref);\n const liveWindow = useLiveChartWindow({\n count: data.length,\n visibleCount,\n itemWidth: viewport.itemWidth,\n figureHeight: figureSize?.height,\n scrollVariable: \"--line-scroll-x\",\n });\n useScrollbarReserve(liveWindow.chartRef, \"--line-scrollbar-size\");\n // Cursor and selection hold absolute indices so they survive scrolling and appends.\n const [cursor, setCursor] = useState<CursorState | null>(null);\n const [selectedPointIndex, setSelectedPointIndex] = useState<number | undefined>();\n const chartRef = useMergedRefs<HTMLElement>(viewport.ref, consumerRef, liveWindow.chartRef);\n const handlePointClick = useCallback(\n (index: number) => {\n setSelectedPointIndex(index);\n consumerOnPointClick?.(index);\n },\n [consumerOnPointClick],\n );\n const handlePointPointerLeave = useCallback(() => {\n setCursor(null);\n consumerOnPointPointerLeave?.();\n }, [consumerOnPointPointerLeave]);\n const handlePointPointerMove = useCallback(\n (position: LineChartPointerPosition) => {\n setCursor(position);\n consumerOnPointPointerMove?.(position);\n },\n [consumerOnPointPointerMove],\n );\n const liveItems = useMemo<readonly LivePoint[]>(\n () => (live ? data.map((point, index) => ({ id: String(index), point })) : []),\n [data, live],\n );\n\n const style: InteractiveLineStyle = {\n ...consumerStyle,\n \"--line-scale\": String(viewport.scale),\n };\n\n if (!live) {\n const chartProps = {\n ...consumerProps,\n ...(xAxis ? { xAxis } : {}),\n data,\n activePointIndex: cursor?.index,\n cursorY: cursor?.offsetY,\n interactive: true,\n onPointClick: handlePointClick,\n onPointPointerLeave: handlePointPointerLeave,\n onPointPointerMove: handlePointPointerMove,\n ...(slotProps ? { slotProps } : {}),\n ref: chartRef,\n selectedPointIndex,\n style,\n } as LineChartProps<\"figure\">;\n return <LineChart {...chartProps} />;\n }\n\n const { sliceStart, sliceEnd, contentSize, plotHeight } = liveWindow;\n const slice = data.slice(sliceStart, sliceEnd);\n const { min, max } = getValueBounds(slice);\n const toSliceIndex = (index: number | undefined): number | undefined =>\n index !== undefined && index >= sliceStart && index < sliceEnd ? index - sliceStart : undefined;\n const { ref: liveScrollportRef, ...liveScrollportProps } = slotProps?.liveScrollport ?? {};\n const pointLayer = (\n <VirtualScroll\n height={plotHeight}\n items={liveItems}\n orientation=\"horizontal\"\n overscan={2}\n rowHeight={viewport.itemWidth}\n scrollRef={liveWindow.scrollRef}\n onRangeChange={liveWindow.onRangeChange}\n renderRow={({ point }, index) => {\n // Overscan points stay inert, so focus never scrolls hidden points into view.\n const inSlice = index >= sliceStart && index < sliceEnd;\n const isActive = cursor?.index === index;\n return (\n <LineChartPoint\n as=\"div\"\n point={point}\n previousPoint={data[index - 1]}\n index={index}\n count={data.length}\n min={min}\n max={max}\n interactive={inSlice}\n isActive={isActive}\n isSelected={selectedPointIndex === index}\n cursorY={isActive ? cursor?.offsetY : undefined}\n onPointClick={handlePointClick}\n onPointPointerLeave={handlePointPointerLeave}\n onPointPointerMove={handlePointPointerMove}\n slotProps={slotProps}\n />\n );\n }}\n {...omitProps(liveScrollportProps, [\n \"children\",\n \"dangerouslySetInnerHTML\",\n \"data-dynamic-layout\",\n \"data-orientation\",\n \"data-part\",\n \"data-uiify-virtual-scroll\",\n \"role\",\n ])}\n {...(liveScrollportRef ? { ref: liveScrollportRef } : {})}\n slotProps={{\n ...(slotProps?.liveSpacer ? { spacer: slotProps.liveSpacer } : {}),\n ...(slotProps?.livePointRow ? { row: slotProps.livePointRow } : {}),\n }}\n />\n );\n\n const liveStyle: InteractiveLineStyle = {\n ...style,\n \"--line-content-size\": `${contentSize}px`,\n \"--line-plot-height\": `${plotHeight}px`,\n // One virtual row: the viewport holds `visibleCount` of them.\n \"--line-run\": String(100 / visibleCount),\n };\n const chartProps = {\n ...consumerProps,\n data: slice,\n xAxis: xAxis ?? liveTimeAxis(data, sliceStart, sliceEnd, visibleCount),\n activePointIndex: toSliceIndex(cursor?.index),\n announceReadout: false,\n pointLayer,\n cursorY: cursor?.offsetY,\n interactive: true,\n ...(slotProps ? { slotProps } : {}),\n ref: chartRef,\n selectedPointIndex: toSliceIndex(selectedPointIndex),\n slotCount: data.length,\n slotOffset: sliceStart,\n style: liveStyle,\n } as LineChartProps<\"figure\"> & LineChartViewProps;\n\n return <LineChart {...chartProps} />;\n}\nLineChartClient.displayName = \"LineChartClient\";\n"],"mappings":"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","names":["chartProps"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { CSSProperties, ElementType, ReactElement, Ref } from \"react\";\nimport { useChartViewport } from \"../../../hooks/use-chart-viewport.js\";\nimport { useMergedRefs } from \"../../../hooks/use-merged-refs.js\";\nimport { useResizeObserver } from \"../../../hooks/use-resize-observer.js\";\nimport {\n liveTimeAxis,\n useLiveChartWindow,\n} from \"../../internal/live-chart/use-live-chart-window.js\";\nimport { useScrollbarReserve } from \"../../internal/chart-scrollbar/use-scrollbar-reserve.js\";\nimport { VirtualScroll } from \"../../virtual-scroll/VirtualScroll.js\";\nimport { LineChart, LineChartPoint } from \"../LineChart.js\";\nimport { getValueBounds } from \"../line-chart-geometry.js\";\nimport type {\n LineChartClientProps,\n LineChartData,\n LineChartPointerPosition,\n LineChartProps,\n LineChartViewProps,\n} from \"../types.js\";\n\ninterface CursorState extends LineChartPointerPosition {}\n\ninterface InteractiveLineStyle extends CSSProperties {\n \"--line-scale\": string;\n \"--line-content-size\"?: string;\n \"--line-plot-height\"?: string;\n \"--line-run\"?: string;\n}\n\ninterface LivePoint {\n readonly id: string;\n readonly point: LineChartData;\n}\n\n/**\n * `[data-part=\"plot\"]`'s fixed price-axis column (4.5rem) plus its grid gap\n * (0.75rem) — see line-chart.css. `useChartViewport` measures the whole\n * `<figure>`, but points only ever get the width left over after this\n * column, so it must be subtracted before sizing `minItemWidth`.\n */\nconst Y_AXIS_COLUMN_WIDTH = 72 + 12;\n\nexport function LineChartClient<TAs extends ElementType = \"figure\">(\n props: LineChartClientProps<TAs>,\n): ReactElement | null {\n const {\n data,\n visibleCount,\n xAxis,\n ref: consumerRef,\n style: consumerStyle,\n onPointClick: consumerOnPointClick,\n onPointPointerLeave: consumerOnPointPointerLeave,\n onPointPointerMove: consumerOnPointPointerMove,\n slotProps,\n ...consumerProps\n } = props as LineChartClientProps<\"figure\"> & {\n ref?: Ref<HTMLElement>;\n style?: CSSProperties;\n };\n const live = visibleCount !== undefined && visibleCount > 0;\n const viewport = useChartViewport(\n live\n ? {\n enabled: false,\n initialScale: 1,\n itemCount: visibleCount,\n measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,\n }\n : { itemCount: data.length, measuredWidthOffset: Y_AXIS_COLUMN_WIDTH, minItemWidth: 24 },\n );\n const figureSize = useResizeObserver(viewport.ref);\n const liveWindow = useLiveChartWindow({\n count: data.length,\n visibleCount,\n itemWidth: viewport.itemWidth,\n figureHeight: figureSize?.height,\n scrollVariable: \"--line-scroll-x\",\n consumerStyle,\n });\n useScrollbarReserve(liveWindow.chartRef, \"--line-scrollbar-size\", consumerStyle);\n // Cursor and selection hold absolute indices so they survive scrolling and appends.\n const [cursor, setCursor] = useState<CursorState | null>(null);\n const [selectedPointIndex, setSelectedPointIndex] = useState<number | undefined>();\n const chartRef = useMergedRefs<HTMLElement>(viewport.ref, consumerRef, liveWindow.chartRef);\n const handlePointClick = useCallback(\n (index: number) => {\n setSelectedPointIndex(index);\n consumerOnPointClick?.(index);\n },\n [consumerOnPointClick],\n );\n const handlePointPointerLeave = useCallback(() => {\n setCursor(null);\n consumerOnPointPointerLeave?.();\n }, [consumerOnPointPointerLeave]);\n const handlePointPointerMove = useCallback(\n (position: LineChartPointerPosition) => {\n setCursor(position);\n consumerOnPointPointerMove?.(position);\n },\n [consumerOnPointPointerMove],\n );\n const liveItems = useMemo<readonly LivePoint[]>(\n () => (live ? data.map((point, index) => ({ id: String(index), point })) : []),\n [data, live],\n );\n\n const style: InteractiveLineStyle = {\n \"--line-scale\": String(viewport.scale),\n ...consumerStyle,\n };\n\n if (!live) {\n const chartProps = {\n ...consumerProps,\n ...(xAxis ? { xAxis } : {}),\n data,\n activePointIndex: cursor?.index,\n cursorY: cursor?.offsetY,\n interactive: true,\n onPointClick: handlePointClick,\n onPointPointerLeave: handlePointPointerLeave,\n onPointPointerMove: handlePointPointerMove,\n ...(slotProps ? { slotProps } : {}),\n ref: chartRef,\n selectedPointIndex,\n style,\n } as LineChartProps<\"figure\">;\n return <LineChart {...chartProps} />;\n }\n\n const { sliceStart, sliceEnd, contentSize, plotHeight } = liveWindow;\n const slice = data.slice(sliceStart, sliceEnd);\n const { min, max } = getValueBounds(slice);\n const toSliceIndex = (index: number | undefined): number | undefined =>\n index !== undefined && index >= sliceStart && index < sliceEnd ? index - sliceStart : undefined;\n const { ref: liveScrollportRef, ...liveScrollportProps } = slotProps?.liveScrollport ?? {};\n const pointLayer = (\n <VirtualScroll\n height={plotHeight}\n items={liveItems}\n orientation=\"horizontal\"\n overscan={2}\n rowHeight={viewport.itemWidth}\n scrollRef={liveWindow.scrollRef}\n onRangeChange={liveWindow.onRangeChange}\n renderRow={({ point }, index) => {\n // Overscan points stay inert, so focus never scrolls hidden points into view.\n const inSlice = index >= sliceStart && index < sliceEnd;\n const isActive = cursor?.index === index;\n return (\n <LineChartPoint\n as=\"div\"\n point={point}\n previousPoint={data[index - 1]}\n index={index}\n count={data.length}\n min={min}\n max={max}\n interactive={inSlice}\n isActive={isActive}\n isSelected={selectedPointIndex === index}\n cursorY={isActive ? cursor?.offsetY : undefined}\n onPointClick={handlePointClick}\n onPointPointerLeave={handlePointPointerLeave}\n onPointPointerMove={handlePointPointerMove}\n slotProps={slotProps}\n />\n );\n }}\n {...liveScrollportProps}\n {...(liveScrollportRef ? { ref: liveScrollportRef } : {})}\n slotProps={{\n ...(slotProps?.liveSpacer ? { spacer: slotProps.liveSpacer } : {}),\n ...(slotProps?.livePointRow ? { row: slotProps.livePointRow } : {}),\n }}\n />\n );\n\n const liveStyle: InteractiveLineStyle = {\n ...style,\n \"--line-content-size\": `${contentSize}px`,\n \"--line-plot-height\": `${plotHeight}px`,\n // One virtual row: the viewport holds `visibleCount` of them.\n \"--line-run\": String(100 / visibleCount),\n ...consumerStyle,\n };\n const chartProps = {\n ...consumerProps,\n data: slice,\n xAxis: xAxis ?? liveTimeAxis(data, sliceStart, sliceEnd, visibleCount),\n activePointIndex: toSliceIndex(cursor?.index),\n announceReadout: false,\n pointLayer,\n cursorY: cursor?.offsetY,\n interactive: true,\n ...(slotProps ? { slotProps } : {}),\n ref: chartRef,\n selectedPointIndex: toSliceIndex(selectedPointIndex),\n slotCount: data.length,\n slotOffset: sliceStart,\n style: liveStyle,\n } as LineChartProps<\"figure\"> & LineChartViewProps;\n\n return <LineChart {...chartProps} />;\n}\nLineChartClient.displayName = \"LineChartClient\";\n"],"mappings":"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","names":["chartProps"]}
|
|
@@ -1,112 +1,45 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ElementType, DOMAttributes, ReactNode, Ref } from "react";
|
|
2
2
|
import type { RenderableProps } from "@gunkin/uiify/core/render";
|
|
3
|
-
import type {
|
|
4
|
-
type
|
|
5
|
-
readonly
|
|
6
|
-
}> = Omit<ComponentPropsWithRef<TTag>, "children" | "dangerouslySetInnerHTML" | keyof TOwned> & ConsumerDataAttributes & TOwned;
|
|
7
|
-
type LineChartIndexedSlotProps<TProps extends object, TOwned extends object = object> = Omit<TProps, "children" | "dangerouslySetInnerHTML"> & ConsumerDataAttributes & TOwned & {
|
|
8
|
-
readonly byItemIndex?: Readonly<Record<number, Omit<TProps, "children" | "dangerouslySetInnerHTML"> & ConsumerDataAttributes & TOwned>>;
|
|
3
|
+
import type { SlotProps } from "../../core/slot-props.js";
|
|
4
|
+
type LineChartIndexedSlotProps<TProps extends object> = TProps & {
|
|
5
|
+
readonly byItemIndex?: Readonly<Record<number, TProps>>;
|
|
9
6
|
};
|
|
10
|
-
type LineChartRepeatedSlotProps<TTag extends ElementType
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
type LineChartPointElementProps = HTMLAttributes<HTMLElement> & {
|
|
14
|
-
readonly ref?: Ref<HTMLElement>;
|
|
15
|
-
};
|
|
16
|
-
type LineChartPointOwnedProps = {
|
|
17
|
-
readonly "aria-hidden"?: never;
|
|
18
|
-
readonly "data-crosshair-active"?: never;
|
|
19
|
-
readonly "data-first"?: never;
|
|
20
|
-
readonly "data-part"?: never;
|
|
21
|
-
readonly "data-point-selected"?: never;
|
|
22
|
-
readonly "data-time"?: never;
|
|
23
|
-
readonly "data-trend"?: never;
|
|
24
|
-
};
|
|
25
|
-
type LineChartLiveRowOwnedProps = {
|
|
26
|
-
readonly "aria-posinset"?: never;
|
|
27
|
-
readonly "aria-setsize"?: never;
|
|
28
|
-
readonly "data-dynamic-row"?: never;
|
|
29
|
-
readonly "data-part"?: never;
|
|
30
|
-
readonly "data-row-index"?: never;
|
|
31
|
-
readonly role?: never;
|
|
32
|
-
};
|
|
33
|
-
type LineChartLiveRowSlotProps = Omit<LineChartRepeatedSlotProps<"div">, "byItemIndex"> & LineChartLiveRowOwnedProps & {
|
|
34
|
-
readonly byItemIndex?: Readonly<Record<number, Omit<ComponentPropsWithRef<"div">, "children" | "dangerouslySetInnerHTML"> & ConsumerDataAttributes & LineChartLiveRowOwnedProps>>;
|
|
7
|
+
type LineChartRepeatedSlotProps<TTag extends ElementType> = LineChartIndexedSlotProps<SlotProps<TTag>>;
|
|
8
|
+
type LineChartPointElementProps = Omit<SlotProps<"div">, keyof DOMAttributes<HTMLElement> | "ref"> & Omit<DOMAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML"> & {
|
|
9
|
+
readonly ref?: Ref<HTMLElement> | undefined;
|
|
35
10
|
};
|
|
36
11
|
export interface LineChartSlotProps {
|
|
37
|
-
readonly caption?:
|
|
38
|
-
readonly readout?:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
readonly
|
|
43
|
-
readonly
|
|
44
|
-
readonly
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
readonly
|
|
49
|
-
readonly
|
|
50
|
-
readonly
|
|
51
|
-
readonly
|
|
52
|
-
readonly "aria-label"?: never;
|
|
53
|
-
readonly "data-part"?: never;
|
|
54
|
-
}>;
|
|
55
|
-
readonly point?: LineChartIndexedSlotProps<LineChartPointElementProps, LineChartPointOwnedProps>;
|
|
56
|
-
readonly pointHit?: LineChartRepeatedSlotProps<"button", {
|
|
57
|
-
readonly "aria-label"?: never;
|
|
58
|
-
readonly "aria-pressed"?: never;
|
|
59
|
-
readonly "data-part"?: never;
|
|
60
|
-
readonly type?: never;
|
|
61
|
-
}>;
|
|
62
|
-
readonly crosshair?: LineChartPartSlotProps<"div", {
|
|
63
|
-
readonly "aria-hidden"?: never;
|
|
64
|
-
readonly "data-part"?: never;
|
|
65
|
-
}>;
|
|
66
|
-
readonly crosshairMarker?: LineChartPartSlotProps<"span">;
|
|
67
|
-
readonly timeViewport?: LineChartPartSlotProps<"div">;
|
|
68
|
-
readonly timeAxis?: LineChartPartSlotProps<"ol", {
|
|
69
|
-
readonly "aria-label"?: never;
|
|
70
|
-
readonly "data-axis"?: never;
|
|
71
|
-
readonly "data-part"?: never;
|
|
72
|
-
}>;
|
|
12
|
+
readonly caption?: SlotProps<"figcaption">;
|
|
13
|
+
readonly readout?: SlotProps<"div">;
|
|
14
|
+
readonly readoutTime?: SlotProps<"span">;
|
|
15
|
+
readonly readoutValue?: SlotProps<"span">;
|
|
16
|
+
readonly plot?: SlotProps<"div">;
|
|
17
|
+
readonly scrollViewport?: SlotProps<"div">;
|
|
18
|
+
readonly canvas?: SlotProps<"div">;
|
|
19
|
+
readonly viewport?: SlotProps<"div">;
|
|
20
|
+
readonly points?: SlotProps<"ol">;
|
|
21
|
+
readonly point?: LineChartIndexedSlotProps<LineChartPointElementProps>;
|
|
22
|
+
readonly pointHit?: LineChartRepeatedSlotProps<"button">;
|
|
23
|
+
readonly crosshair?: SlotProps<"div">;
|
|
24
|
+
readonly crosshairMarker?: SlotProps<"span">;
|
|
25
|
+
readonly timeViewport?: SlotProps<"div">;
|
|
26
|
+
readonly timeAxis?: SlotProps<"ol">;
|
|
73
27
|
readonly timeAxisLabel?: LineChartRepeatedSlotProps<"li">;
|
|
74
|
-
readonly crosshairTime?:
|
|
75
|
-
readonly valueAxis?:
|
|
76
|
-
readonly "aria-label"?: never;
|
|
77
|
-
readonly "data-axis"?: never;
|
|
78
|
-
readonly "data-part"?: never;
|
|
79
|
-
}>;
|
|
28
|
+
readonly crosshairTime?: SlotProps<"li">;
|
|
29
|
+
readonly valueAxis?: SlotProps<"ol">;
|
|
80
30
|
readonly valueAxisLabel?: LineChartRepeatedSlotProps<"li">;
|
|
81
|
-
readonly crosshairValue?:
|
|
82
|
-
readonly liveScrollport?:
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
readonly
|
|
90
|
-
readonly
|
|
91
|
-
readonly dataTable?: LineChartPartSlotProps<"table", {
|
|
92
|
-
readonly "aria-label"?: never;
|
|
93
|
-
readonly "data-part"?: never;
|
|
94
|
-
}>;
|
|
95
|
-
readonly dataTableHead?: LineChartPartSlotProps<"thead">;
|
|
96
|
-
readonly dataTableHeaderRow?: LineChartPartSlotProps<"tr">;
|
|
97
|
-
readonly dataTableTimeHeader?: LineChartPartSlotProps<"th", {
|
|
98
|
-
readonly scope?: never;
|
|
99
|
-
readonly "data-part"?: never;
|
|
100
|
-
}>;
|
|
101
|
-
readonly dataTableValueHeader?: LineChartPartSlotProps<"th", {
|
|
102
|
-
readonly scope?: never;
|
|
103
|
-
readonly "data-part"?: never;
|
|
104
|
-
}>;
|
|
105
|
-
readonly dataTableBody?: LineChartPartSlotProps<"tbody">;
|
|
31
|
+
readonly crosshairValue?: SlotProps<"li">;
|
|
32
|
+
readonly liveScrollport?: SlotProps<"div">;
|
|
33
|
+
readonly liveSpacer?: SlotProps<"div">;
|
|
34
|
+
readonly livePointRow?: LineChartRepeatedSlotProps<"div">;
|
|
35
|
+
readonly dataTable?: SlotProps<"table">;
|
|
36
|
+
readonly dataTableHead?: SlotProps<"thead">;
|
|
37
|
+
readonly dataTableHeaderRow?: SlotProps<"tr">;
|
|
38
|
+
readonly dataTableTimeHeader?: SlotProps<"th">;
|
|
39
|
+
readonly dataTableValueHeader?: SlotProps<"th">;
|
|
40
|
+
readonly dataTableBody?: SlotProps<"tbody">;
|
|
106
41
|
readonly dataTableRow?: LineChartRepeatedSlotProps<"tr">;
|
|
107
|
-
readonly dataTableTimeCell?: LineChartRepeatedSlotProps<"th"
|
|
108
|
-
readonly scope?: never;
|
|
109
|
-
}>;
|
|
42
|
+
readonly dataTableTimeCell?: LineChartRepeatedSlotProps<"th">;
|
|
110
43
|
readonly dataTableValueCell?: LineChartRepeatedSlotProps<"td">;
|
|
111
44
|
}
|
|
112
45
|
export interface LineChartData {
|
|
@@ -124,7 +57,7 @@ export interface LineChartPointerPosition {
|
|
|
124
57
|
readonly offsetY: number;
|
|
125
58
|
}
|
|
126
59
|
export interface LineChartOwnProps {
|
|
127
|
-
readonly "aria-label"?: string;
|
|
60
|
+
readonly "aria-label"?: string | undefined;
|
|
128
61
|
readonly activePointIndex?: number;
|
|
129
62
|
readonly cursorY?: number;
|
|
130
63
|
readonly data: readonly LineChartData[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/line-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/line-chart/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AAYrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAS7C;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,UAAU,GAAG,YAAY,CA0C3B;yBAzDe,KAAK"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { omitProps } from "../../core/slot-props.js";
|
|
3
2
|
import {
|
|
4
3
|
ModalBody,
|
|
5
4
|
ModalClose,
|
|
@@ -15,9 +14,6 @@ const DEFAULT_MODAL_LABELS = { close: "Close" };
|
|
|
15
14
|
function isAbsent(node) {
|
|
16
15
|
return node === null || node === void 0;
|
|
17
16
|
}
|
|
18
|
-
function safeSlotProps(props, owned = []) {
|
|
19
|
-
return props === void 0 ? void 0 : omitProps(props, ["children", "dangerouslySetInnerHTML", ...owned]);
|
|
20
|
-
}
|
|
21
17
|
function Modal({
|
|
22
18
|
id,
|
|
23
19
|
trigger,
|
|
@@ -37,117 +33,40 @@ function Modal({
|
|
|
37
33
|
const titleId = `${id}-title`;
|
|
38
34
|
const descriptionId = `${id}-description`;
|
|
39
35
|
const effectiveCloseLabel = closeLabel ?? labels?.close ?? DEFAULT_MODAL_LABELS.close;
|
|
40
|
-
return /* @__PURE__ */ jsxs(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
"aria-describedby",
|
|
75
|
-
"aria-labelledby"
|
|
76
|
-
]),
|
|
77
|
-
align,
|
|
78
|
-
"aria-describedby": isAbsent(description) ? void 0 : descriptionId,
|
|
79
|
-
"aria-labelledby": titleId,
|
|
80
|
-
backdrop,
|
|
81
|
-
dismiss,
|
|
82
|
-
id,
|
|
83
|
-
size,
|
|
84
|
-
children: [
|
|
85
|
-
/* @__PURE__ */ jsx(
|
|
86
|
-
ModalGrabber,
|
|
87
|
-
{
|
|
88
|
-
...safeSlotProps(slotProps?.grabber, ["data-part", "data-uiify-modal", "aria-hidden"])
|
|
89
|
-
}
|
|
90
|
-
),
|
|
91
|
-
/* @__PURE__ */ jsxs(ModalHeader, { ...safeSlotProps(slotProps?.header, ["data-part", "data-uiify-modal"]), children: [
|
|
92
|
-
/* @__PURE__ */ jsx(
|
|
93
|
-
ModalTitle,
|
|
94
|
-
{
|
|
95
|
-
...safeSlotProps(slotProps?.title, ["id", "data-part", "data-uiify-modal"]),
|
|
96
|
-
id: titleId,
|
|
97
|
-
children: title
|
|
98
|
-
}
|
|
99
|
-
),
|
|
100
|
-
isAbsent(description) ? null : /* @__PURE__ */ jsx(
|
|
101
|
-
ModalDescription,
|
|
102
|
-
{
|
|
103
|
-
...safeSlotProps(slotProps?.description, ["id", "data-part", "data-uiify-modal"]),
|
|
104
|
-
id: descriptionId,
|
|
105
|
-
children: description
|
|
106
|
-
}
|
|
107
|
-
),
|
|
108
|
-
/* @__PURE__ */ jsx(
|
|
109
|
-
ModalClose,
|
|
110
|
-
{
|
|
111
|
-
...safeSlotProps(slotProps?.close, [
|
|
112
|
-
"type",
|
|
113
|
-
"command",
|
|
114
|
-
"commandfor",
|
|
115
|
-
"popoverTarget",
|
|
116
|
-
"popoverTargetAction",
|
|
117
|
-
"data-part",
|
|
118
|
-
"data-uiify-modal",
|
|
119
|
-
"data-uiify-button",
|
|
120
|
-
"aria-label"
|
|
121
|
-
]),
|
|
122
|
-
"aria-label": effectiveCloseLabel,
|
|
123
|
-
target: id,
|
|
124
|
-
children: /* @__PURE__ */ jsx(
|
|
125
|
-
"svg",
|
|
126
|
-
{
|
|
127
|
-
fill: "none",
|
|
128
|
-
height: "14",
|
|
129
|
-
stroke: "currentColor",
|
|
130
|
-
strokeLinecap: "round",
|
|
131
|
-
strokeWidth: "1.75",
|
|
132
|
-
viewBox: "0 0 16 16",
|
|
133
|
-
width: "14",
|
|
134
|
-
...safeSlotProps(slotProps?.closeIcon, ["aria-hidden", "focusable"]),
|
|
135
|
-
"aria-hidden": "true",
|
|
136
|
-
focusable: "false",
|
|
137
|
-
children: /* @__PURE__ */ jsx("path", { d: "M3 3l10 10M13 3L3 13", ...safeSlotProps(slotProps?.closeIconPath) })
|
|
138
|
-
}
|
|
139
|
-
)
|
|
140
|
-
}
|
|
141
|
-
)
|
|
142
|
-
] }),
|
|
143
|
-
isAbsent(children) ? null : /* @__PURE__ */ jsx(ModalBody, { ...safeSlotProps(slotProps?.body, ["data-part", "data-uiify-modal"]), children }),
|
|
144
|
-
isAbsent(footer) ? null : /* @__PURE__ */ jsx(ModalFooter, { ...safeSlotProps(slotProps?.footer, ["data-part", "data-uiify-modal"]), children: footer })
|
|
145
|
-
]
|
|
146
|
-
}
|
|
147
|
-
)
|
|
148
|
-
]
|
|
149
|
-
}
|
|
150
|
-
);
|
|
36
|
+
return /* @__PURE__ */ jsxs("div", { "data-part": "root", "data-uiify-modal": "", ...rootProps, children: [
|
|
37
|
+
/* @__PURE__ */ jsx(ModalTrigger, { target: id, ...slotProps?.trigger, children: trigger }),
|
|
38
|
+
/* @__PURE__ */ jsxs(
|
|
39
|
+
ModalContent,
|
|
40
|
+
{
|
|
41
|
+
align,
|
|
42
|
+
"aria-describedby": isAbsent(description) ? void 0 : descriptionId,
|
|
43
|
+
"aria-labelledby": titleId,
|
|
44
|
+
backdrop,
|
|
45
|
+
dismiss,
|
|
46
|
+
id,
|
|
47
|
+
size,
|
|
48
|
+
...slotProps?.content,
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsx(ModalGrabber, { ...slotProps?.grabber }),
|
|
51
|
+
/* @__PURE__ */ jsxs(ModalHeader, { ...slotProps?.header, children: [
|
|
52
|
+
/* @__PURE__ */ jsx(ModalTitle, { id: titleId, ...slotProps?.title, children: title }),
|
|
53
|
+
isAbsent(description) ? null : /* @__PURE__ */ jsx(ModalDescription, { id: descriptionId, ...slotProps?.description, children: description }),
|
|
54
|
+
/* @__PURE__ */ jsx(
|
|
55
|
+
ModalClose,
|
|
56
|
+
{
|
|
57
|
+
"aria-label": effectiveCloseLabel,
|
|
58
|
+
"data-size": "icon",
|
|
59
|
+
target: id,
|
|
60
|
+
...slotProps?.close
|
|
61
|
+
}
|
|
62
|
+
)
|
|
63
|
+
] }),
|
|
64
|
+
isAbsent(children) ? null : /* @__PURE__ */ jsx(ModalBody, { ...slotProps?.body, children }),
|
|
65
|
+
isAbsent(footer) ? null : /* @__PURE__ */ jsx(ModalFooter, { ...slotProps?.footer, children: footer })
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
] });
|
|
151
70
|
}
|
|
152
71
|
Modal.displayName = "Modal";
|
|
153
72
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport {\n ModalBody,\n ModalClose,\n ModalContent,\n ModalDescription,\n ModalFooter,\n ModalGrabber,\n ModalHeader,\n ModalTitle,\n ModalTrigger,\n} from \"./ModalParts.js\";\nimport type { ModalProps } from \"./types.js\";\n\nconst DEFAULT_MODAL_LABELS = { close: \"Close\" } as const;\n\n/** `null` and `undefined` both mean \"not given\": no empty part, no dangling `aria-describedby`. */\nfunction isAbsent(node: ReactNode): node is null | undefined {\n return node === null || node === undefined;\n}\n\n/**\n * Convenience shell over the native parts: one trigger and one modal `<dialog>`\n * with a header (title, description, close icon), a body and an optional footer.\n * Controlled or initially open dialogs use `ModalClientContent` from\n * `@gunkin/uiify/components/modal/client`.\n */\nexport function Modal({\n id,\n trigger,\n title,\n description,\n children,\n closeLabel,\n labels,\n footer,\n slotProps,\n align,\n backdrop,\n dismiss,\n size,\n ...rootProps\n}: ModalProps): ReactElement {\n const titleId = `${id}-title`;\n const descriptionId = `${id}-description`;\n const effectiveCloseLabel = closeLabel ?? labels?.close ?? DEFAULT_MODAL_LABELS.close;\n\n return (\n <div data-part=\"root\" data-uiify-modal=\"\" {...rootProps}>\n <ModalTrigger target={id} {...slotProps?.trigger}>\n {trigger}\n </ModalTrigger>\n <ModalContent\n align={align}\n aria-describedby={isAbsent(description) ? undefined : descriptionId}\n aria-labelledby={titleId}\n backdrop={backdrop}\n dismiss={dismiss}\n id={id}\n size={size}\n {...slotProps?.content}\n >\n <ModalGrabber {...slotProps?.grabber} />\n <ModalHeader {...slotProps?.header}>\n <ModalTitle id={titleId} {...slotProps?.title}>\n {title}\n </ModalTitle>\n {isAbsent(description) ? null : (\n <ModalDescription id={descriptionId} {...slotProps?.description}>\n {description}\n </ModalDescription>\n )}\n <ModalClose\n aria-label={effectiveCloseLabel}\n data-size=\"icon\"\n target={id}\n {...slotProps?.close}\n />\n </ModalHeader>\n {isAbsent(children) ? null : <ModalBody {...slotProps?.body}>{children}</ModalBody>}\n {isAbsent(footer) ? null : <ModalFooter {...slotProps?.footer}>{footer}</ModalFooter>}\n </ModalContent>\n </div>\n );\n}\nModal.displayName = \"Modal\";\n"],"mappings":"AAiDM,cAcE,YAdF;AAhDN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,uBAAuB,EAAE,OAAO,QAAQ;AAG9C,SAAS,SAAS,MAA2C;AAC3D,SAAO,SAAS,QAAQ,SAAS;AACnC;AAQO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAC3B,QAAM,sBAAsB,cAAc,QAAQ,SAAS,qBAAqB;AAEhF,SACE,qBAAC,SAAI,aAAU,QAAO,oBAAiB,IAAI,GAAG,WAC5C;AAAA,wBAAC,gBAAa,QAAQ,IAAK,GAAG,WAAW,SACtC,mBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,oBAAkB,SAAS,WAAW,IAAI,SAAY;AAAA,QACtD,mBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG,WAAW;AAAA,QAEf;AAAA,8BAAC,gBAAc,GAAG,WAAW,SAAS;AAAA,UACtC,qBAAC,eAAa,GAAG,WAAW,QAC1B;AAAA,gCAAC,cAAW,IAAI,SAAU,GAAG,WAAW,OACrC,iBACH;AAAA,YACC,SAAS,WAAW,IAAI,OACvB,oBAAC,oBAAiB,IAAI,eAAgB,GAAG,WAAW,aACjD,uBACH;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,cAAY;AAAA,gBACZ,aAAU;AAAA,gBACV,QAAQ;AAAA,gBACP,GAAG,WAAW;AAAA;AAAA,YACjB;AAAA,aACF;AAAA,UACC,SAAS,QAAQ,IAAI,OAAO,oBAAC,aAAW,GAAG,WAAW,MAAO,UAAS;AAAA,UACtE,SAAS,MAAM,IAAI,OAAO,oBAAC,eAAa,GAAG,WAAW,QAAS,kBAAO;AAAA;AAAA;AAAA,IACzE;AAAA,KACF;AAEJ;AACA,MAAM,cAAc;","names":[]}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
function ModalHeader(props) {
|
|
3
|
-
return /* @__PURE__ */ jsx("div", {
|
|
3
|
+
return /* @__PURE__ */ jsx("div", { "data-part": "header", "data-uiify-modal": "", ...props });
|
|
4
4
|
}
|
|
5
5
|
ModalHeader.displayName = "ModalHeader";
|
|
6
6
|
function ModalTitle(props) {
|
|
7
|
-
return /* @__PURE__ */ jsx("h2", {
|
|
7
|
+
return /* @__PURE__ */ jsx("h2", { "data-part": "title", "data-uiify-modal": "", ...props });
|
|
8
8
|
}
|
|
9
9
|
ModalTitle.displayName = "ModalTitle";
|
|
10
10
|
function ModalDescription(props) {
|
|
11
|
-
return /* @__PURE__ */ jsx("p", {
|
|
11
|
+
return /* @__PURE__ */ jsx("p", { "data-part": "description", "data-uiify-modal": "", ...props });
|
|
12
12
|
}
|
|
13
13
|
ModalDescription.displayName = "ModalDescription";
|
|
14
14
|
function ModalBody(props) {
|
|
15
|
-
return /* @__PURE__ */ jsx("div", {
|
|
15
|
+
return /* @__PURE__ */ jsx("div", { "data-part": "body", "data-uiify-modal": "", ...props });
|
|
16
16
|
}
|
|
17
17
|
ModalBody.displayName = "ModalBody";
|
|
18
18
|
function ModalFooter(props) {
|
|
19
|
-
return /* @__PURE__ */ jsx("div", {
|
|
19
|
+
return /* @__PURE__ */ jsx("div", { "data-part": "footer", "data-uiify-modal": "", ...props });
|
|
20
20
|
}
|
|
21
21
|
ModalFooter.displayName = "ModalFooter";
|
|
22
22
|
function ModalGrabber(props) {
|
|
23
|
-
return /* @__PURE__ */ jsx("div", {
|
|
23
|
+
return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-part": "grabber", "data-uiify-modal": "", ...props });
|
|
24
24
|
}
|
|
25
25
|
ModalGrabber.displayName = "ModalGrabber";
|
|
26
26
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modal/ModalAnatomy.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport type {\n ModalBodyProps,\n ModalDescriptionProps,\n ModalFooterProps,\n ModalGrabberProps,\n ModalHeaderProps,\n ModalTitleProps,\n} from \"./types.js\";\n\n// Kept apart from ModalParts.tsx: each `displayName` assignment is a top-level side effect, so\n// parts sharing a module with ModalTrigger/ModalContent/ModalClose would ship with them even\n// when unused. As their own module, a bundler drops them whole, because package.json declares\n// `\"sideEffects\": [\"**/*.css\"]`; widening that field would bring the unused parts back.\n\n/** Pinned top row: title, description and the close control. */\nexport function ModalHeader(props: ModalHeaderProps): ReactElement {\n return <div
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modal/ModalAnatomy.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport type {\n ModalBodyProps,\n ModalDescriptionProps,\n ModalFooterProps,\n ModalGrabberProps,\n ModalHeaderProps,\n ModalTitleProps,\n} from \"./types.js\";\n\n// Kept apart from ModalParts.tsx: each `displayName` assignment is a top-level side effect, so\n// parts sharing a module with ModalTrigger/ModalContent/ModalClose would ship with them even\n// when unused. As their own module, a bundler drops them whole, because package.json declares\n// `\"sideEffects\": [\"**/*.css\"]`; widening that field would bring the unused parts back.\n\n/** Pinned top row: title, description and the close control. */\nexport function ModalHeader(props: ModalHeaderProps): ReactElement {\n return <div data-part=\"header\" data-uiify-modal=\"\" {...props} />;\n}\nModalHeader.displayName = \"ModalHeader\";\n\n/** Accessible name of the dialog; reference its `id` from `aria-labelledby`. */\nexport function ModalTitle(props: ModalTitleProps): ReactElement {\n return <h2 data-part=\"title\" data-uiify-modal=\"\" {...props} />;\n}\nModalTitle.displayName = \"ModalTitle\";\n\n/** Supporting text; reference its `id` from `aria-describedby`. */\nexport function ModalDescription(props: ModalDescriptionProps): ReactElement {\n return <p data-part=\"description\" data-uiify-modal=\"\" {...props} />;\n}\nModalDescription.displayName = \"ModalDescription\";\n\n/** The scrolling region between header and footer. */\nexport function ModalBody(props: ModalBodyProps): ReactElement {\n return <div data-part=\"body\" data-uiify-modal=\"\" {...props} />;\n}\nModalBody.displayName = \"ModalBody\";\n\n/** Actions row pinned under the body. */\nexport function ModalFooter(props: ModalFooterProps): ReactElement {\n return <div data-part=\"footer\" data-uiify-modal=\"\" {...props} />;\n}\nModalFooter.displayName = \"ModalFooter\";\n\n/** Decorative drag handle shown on the mobile sheet; the swipe enhancement starts here. */\nexport function ModalGrabber(props: ModalGrabberProps): ReactElement {\n return <div aria-hidden=\"true\" data-part=\"grabber\" data-uiify-modal=\"\" {...props} />;\n}\nModalGrabber.displayName = \"ModalGrabber\";\n"],"mappings":"AAiBS;AADF,SAAS,YAAY,OAAuC;AACjE,SAAO,oBAAC,SAAI,aAAU,UAAS,oBAAiB,IAAI,GAAG,OAAO;AAChE;AACA,YAAY,cAAc;AAGnB,SAAS,WAAW,OAAsC;AAC/D,SAAO,oBAAC,QAAG,aAAU,SAAQ,oBAAiB,IAAI,GAAG,OAAO;AAC9D;AACA,WAAW,cAAc;AAGlB,SAAS,iBAAiB,OAA4C;AAC3E,SAAO,oBAAC,OAAE,aAAU,eAAc,oBAAiB,IAAI,GAAG,OAAO;AACnE;AACA,iBAAiB,cAAc;AAGxB,SAAS,UAAU,OAAqC;AAC7D,SAAO,oBAAC,SAAI,aAAU,QAAO,oBAAiB,IAAI,GAAG,OAAO;AAC9D;AACA,UAAU,cAAc;AAGjB,SAAS,YAAY,OAAuC;AACjE,SAAO,oBAAC,SAAI,aAAU,UAAS,oBAAiB,IAAI,GAAG,OAAO;AAChE;AACA,YAAY,cAAc;AAGnB,SAAS,aAAa,OAAwC;AACnE,SAAO,oBAAC,SAAI,eAAY,QAAO,aAAU,WAAU,oBAAiB,IAAI,GAAG,OAAO;AACpF;AACA,aAAa,cAAc;","names":[]}
|
|
@@ -27,10 +27,10 @@ function ModalContent(props) {
|
|
|
27
27
|
return /* @__PURE__ */ jsx(
|
|
28
28
|
"dialog",
|
|
29
29
|
{
|
|
30
|
-
...dialogProps,
|
|
31
30
|
...modalAppearanceAttributes({ align, backdrop, dismiss, size }),
|
|
32
31
|
"data-part": "content",
|
|
33
32
|
"data-uiify-modal": "",
|
|
33
|
+
...dialogProps,
|
|
34
34
|
children
|
|
35
35
|
}
|
|
36
36
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modal/ModalParts.tsx"],"sourcesContent":["import type { ElementType, ReactElement } from \"react\";\nimport { renderNativeInvoker } from \"@gunkin/uiify/core/render\";\nimport { modalAppearanceAttributes } from \"./attributes.js\";\nimport type { ModalCloseProps, ModalContentProps, ModalTriggerProps } from \"./types.js\";\n\nexport {\n ModalBody,\n ModalDescription,\n ModalFooter,\n ModalGrabber,\n ModalHeader,\n ModalTitle,\n} from \"./ModalAnatomy.js\";\n\n/** Native modal invoker with modal identity and trigger anatomy. */\nexport function ModalTrigger<TAs extends ElementType = \"button\">(\n props: ModalTriggerProps<TAs>,\n): ReactElement {\n const { as, target, ...consumerProps } = props as ModalTriggerProps<\"button\">;\n return renderNativeInvoker(\n as,\n \"data-uiify-modal\",\n \"trigger\",\n \"show-modal\",\n target,\n consumerProps as Record<string, unknown>,\n { button: true },\n );\n}\nModalTrigger.displayName = \"ModalTrigger\";\n\n/** Native modal dialog content with modal identity and content anatomy. */\nexport function ModalContent(props: ModalContentProps): ReactElement {\n const { align, backdrop, children, dismiss, size, ...dialogProps } = props;\n return (\n <dialog\n {...
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modal/ModalParts.tsx"],"sourcesContent":["import type { ElementType, ReactElement } from \"react\";\nimport { renderNativeInvoker } from \"@gunkin/uiify/core/render\";\nimport { modalAppearanceAttributes } from \"./attributes.js\";\nimport type { ModalCloseProps, ModalContentProps, ModalTriggerProps } from \"./types.js\";\n\nexport {\n ModalBody,\n ModalDescription,\n ModalFooter,\n ModalGrabber,\n ModalHeader,\n ModalTitle,\n} from \"./ModalAnatomy.js\";\n\n/** Native modal invoker with modal identity and trigger anatomy. */\nexport function ModalTrigger<TAs extends ElementType = \"button\">(\n props: ModalTriggerProps<TAs>,\n): ReactElement {\n const { as, target, ...consumerProps } = props as ModalTriggerProps<\"button\">;\n return renderNativeInvoker(\n as,\n \"data-uiify-modal\",\n \"trigger\",\n \"show-modal\",\n target,\n consumerProps as Record<string, unknown>,\n { button: true },\n );\n}\nModalTrigger.displayName = \"ModalTrigger\";\n\n/** Native modal dialog content with modal identity and content anatomy. */\nexport function ModalContent(props: ModalContentProps): ReactElement {\n const { align, backdrop, children, dismiss, size, ...dialogProps } = props;\n return (\n <dialog\n {...modalAppearanceAttributes({ align, backdrop, dismiss, size })}\n data-part=\"content\"\n data-uiify-modal=\"\"\n {...dialogProps}\n >\n {children}\n </dialog>\n );\n}\nModalContent.displayName = \"ModalContent\";\n\n/** Native modal close invoker. */\nexport function ModalClose<TAs extends ElementType = \"button\">(\n props: ModalCloseProps<TAs>,\n): ReactElement {\n const { as, target, ...consumerProps } = props as ModalCloseProps<\"button\">;\n return renderNativeInvoker(\n as,\n \"data-uiify-modal\",\n \"close\",\n \"request-close\",\n target,\n consumerProps as Record<string, unknown>,\n { button: true, variant: \"ghost\" },\n );\n}\nModalClose.displayName = \"ModalClose\";\n"],"mappings":"AAmCI;AAlCJ,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAG1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,SAAS,aACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,QAAQ,KAAK;AAAA,EACjB;AACF;AACA,aAAa,cAAc;AAGpB,SAAS,aAAa,OAAwC;AACnE,QAAM,EAAE,OAAO,UAAU,UAAU,SAAS,MAAM,GAAG,YAAY,IAAI;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,0BAA0B,EAAE,OAAO,UAAU,SAAS,KAAK,CAAC;AAAA,MAChE,aAAU;AAAA,MACV,oBAAiB;AAAA,MAChB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AACA,aAAa,cAAc;AAGpB,SAAS,WACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,QAAQ,MAAM,SAAS,QAAQ;AAAA,EACnC;AACF;AACA,WAAW,cAAc;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalClientContent.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalClientContent.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAwB3D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CAuG/E;yBAvGe,kBAAkB"}
|
|
@@ -89,12 +89,12 @@ function ModalClientContent(props) {
|
|
|
89
89
|
return /* @__PURE__ */ jsx(
|
|
90
90
|
"dialog",
|
|
91
91
|
{
|
|
92
|
-
...dialogProps,
|
|
93
92
|
...modalAppearanceAttributes({ align, backdrop, dismiss, size }),
|
|
94
93
|
"data-part": "content",
|
|
95
94
|
"data-uiify-modal": "",
|
|
96
|
-
ref: mergedRef,
|
|
97
95
|
suppressHydrationWarning: true,
|
|
96
|
+
...dialogProps,
|
|
97
|
+
ref: mergedRef,
|
|
98
98
|
children
|
|
99
99
|
}
|
|
100
100
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useReducer, useRef, useState } from \"react\";\nimport type { ReactElement } from \"react\";\nimport { useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport { modalAppearanceAttributes } from \"../attributes.js\";\nimport type { ModalClientContentProps } from \"../types.js\";\nfunction increment(count: number): number {\n return count + 1;\n}\n/** A dialog nested in this one would stay open (and invisible) after its parent closes. */\nfunction closeNestedDialogs(dialog: HTMLDialogElement): void {\n for (const nested of dialog.querySelectorAll<HTMLDialogElement>(\"dialog[open]\")) {\n nested.close();\n }\n}\n/**\n * Runs `done` once the dialog's own transitions have finished; at once when there are none.\n * An `infinite` animation inside (a Spinner or Skeleton) never finishes, so it is not waited on.\n */\nfunction afterMotion(dialog: HTMLDialogElement, done: () => void): void {\n requestAnimationFrame(() => {\n const running = dialog.getAnimations?.({ subtree: true }) ?? [];\n void Promise.allSettled(\n running.map((animation) =>\n animation.effect?.getComputedTiming().endTime === Infinity ? 0 : animation.finished,\n ),\n ).then(done);\n });\n}\n/**\n * Controlled/initially-open adapter over a native modal `<dialog>`.\n *\n * The browser stays the owner of modality: opening is `showModal()`, closing is\n * `close()`, and every change — invoker command, Escape, `requestClose()`,\n * `form method=\"dialog\"`, programmatic — is observed through the single native\n * `toggle` event (Chrome 132, Firefox 133, Safari 26). SSR never emits `open`;\n * `defaultOpen` and controlled `open` are applied after mount.\n */\nexport function ModalClientContent(props: ModalClientContentProps): ReactElement {\n const {\n align,\n backdrop,\n children,\n defaultOpen = false,\n dismiss,\n onOpenChange,\n onOpenChangeComplete,\n open,\n ref,\n size,\n ...dialogProps\n } = props;\n const elementRef = useRef<HTMLDialogElement | null>(null);\n const mergedRef = useMergedRefs<HTMLDialogElement>(elementRef, ref);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n // Bumped on every native toggle so the sync effect re-runs after the parent\n // has had its render: a controlling parent that rejected the change is then\n // reconciled by reverting the element.\n const [nativeVersion, recordNativeToggle] = useReducer(increment, 0);\n const controlled = open !== undefined;\n const wantOpen = controlled ? open : uncontrolledOpen;\n const wantOpenRef = useRef(wantOpen);\n wantOpenRef.current = wantOpen;\n const onOpenChangeRef = useRef(onOpenChange);\n onOpenChangeRef.current = onOpenChange;\n const onOpenChangeCompleteRef = useRef(onOpenChangeComplete);\n onOpenChangeCompleteRef.current = onOpenChangeComplete;\n // One-shot: has the first-mount reconciliation below already run?\n const reconciledRef = useRef(false);\n useEffect(() => {\n const dialog = elementRef.current;\n if (!dialog) return;\n if (!reconciledRef.current) {\n reconciledRef.current = true;\n // SSR markup is always closed. If the dialog is already open at mount,\n // that can only mean a native invoker command opened it in the window\n // between initial paint and this effect running — the `toggle` event\n // fired with no listener attached yet, and that notification is\n // otherwise lost forever. Recover it exactly like a native toggle.\n //\n // The reverse (closed at mount) is never reconciled: it's indistinguishable\n // from \"nothing happened\" versus a pre-hydration open+close cycle that\n // netted back to closed, and it's also the normal starting shape for\n // defaultOpen (open before hydration) is reconciled when the DOM catches up.\n if (dialog.open && !wantOpenRef.current) {\n if (!controlled) setUncontrolledOpen(true);\n onOpenChangeRef.current?.(true);\n // Defer enacting show/close to the next pass, once the controlling\n // parent (if any) has had a chance to react to the report above —\n // the DOM already matches what was just reported, so there is\n // nothing to enact this pass regardless.\n recordNativeToggle();\n return;\n }\n }\n if (wantOpen && !dialog.open) dialog.showModal();\n else if (!wantOpen && dialog.open) {\n closeNestedDialogs(dialog);\n dialog.close();\n }\n // `controlled` is read above (line 66) and must be a dependency; the sibling\n // `toggle`-listener effect below lists it for the same reason.\n }, [nativeVersion, wantOpen, controlled]);\n useEffect(() => {\n const dialog = elementRef.current;\n if (!dialog) return;\n let disposed = false;\n const onToggle = (event: Event): void => {\n const next = (event as ToggleEvent).newState === \"open\";\n afterMotion(dialog, () => {\n if (!disposed) onOpenChangeCompleteRef.current?.(next);\n });\n // Programmatic changes already match the desired state; only report\n // changes the browser initiated.\n if (next === wantOpenRef.current) return;\n if (!controlled) setUncontrolledOpen(next);\n onOpenChangeRef.current?.(next);\n recordNativeToggle();\n };\n dialog.addEventListener(\"toggle\", onToggle);\n return () => {\n disposed = true;\n dialog.removeEventListener(\"toggle\", onToggle);\n };\n }, [controlled]);\n return (\n <dialog\n {...modalAppearanceAttributes({ align, backdrop, dismiss, size })}\n data-part=\"content\"\n data-uiify-modal=\"\"\n // SSR markup is always closed, but the browser may have already opened this\n // dialog via a native invoker command before hydration (see the effect above,\n // which reconciles exactly that). React's hydration diff otherwise flags the\n // resulting `open` mismatch as an error; it is the documented recovery path.\n suppressHydrationWarning\n {...dialogProps}\n ref={mergedRef}\n >\n {children}\n </dialog>\n );\n}\nModalClientContent.displayName = \"ModalClientContent\";\n"],"mappings":"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","names":[]}
|