@proyecto-viviana/solidaria-components 0.7.0-rc.0 → 0.7.0-rc.2
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 +58 -32
- package/dist/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar.js +6 -2
- package/dist/ActionBar.js.map +1 -1
- package/dist/ActionBar.jsx +6 -2
- package/dist/ActionBar.jsx.map +1 -1
- package/dist/ActionGroup.d.ts.map +1 -1
- package/dist/ActionGroup.js +6 -2
- package/dist/ActionGroup.js.map +1 -1
- package/dist/ActionGroup.jsx +6 -2
- package/dist/ActionGroup.jsx.map +1 -1
- package/dist/Alert.d.ts.map +1 -1
- package/dist/Alert.js +5 -10
- package/dist/Alert.js.map +1 -1
- package/dist/Alert.jsx +2 -2
- package/dist/Alert.jsx.map +1 -1
- package/dist/Autocomplete.js +1 -1
- package/dist/Autocomplete.js.map +1 -1
- package/dist/Autocomplete.jsx +1 -1
- package/dist/Autocomplete.jsx.map +1 -1
- package/dist/Breadcrumbs.d.ts +8 -2
- package/dist/Breadcrumbs.d.ts.map +1 -1
- package/dist/Breadcrumbs.js +96 -15
- package/dist/Breadcrumbs.js.map +1 -1
- package/dist/Breadcrumbs.jsx +90 -15
- package/dist/Breadcrumbs.jsx.map +1 -1
- package/dist/Button.d.ts.map +1 -1
- package/dist/Button.js +25 -13
- package/dist/Button.js.map +1 -1
- package/dist/Button.jsx +25 -13
- package/dist/Button.jsx.map +1 -1
- package/dist/Calendar.d.ts +8 -0
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/Calendar.js +70 -33
- package/dist/Calendar.js.map +1 -1
- package/dist/Calendar.jsx +57 -24
- package/dist/Calendar.jsx.map +1 -1
- package/dist/Checkbox.d.ts +1 -12
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/Checkbox.js +242 -183
- package/dist/Checkbox.js.map +1 -1
- package/dist/Checkbox.jsx +109 -67
- package/dist/Checkbox.jsx.map +1 -1
- package/dist/Collection.d.ts +124 -4
- package/dist/Collection.d.ts.map +1 -1
- package/dist/Collection.js +139 -14
- package/dist/Collection.js.map +1 -1
- package/dist/Collection.jsx +125 -14
- package/dist/Collection.jsx.map +1 -1
- package/dist/Color.d.ts +8 -567
- package/dist/Color.d.ts.map +1 -1
- package/dist/Color.js +8 -1955
- package/dist/Color.jsx +8 -1460
- package/dist/ColorArea.d.ts +104 -0
- package/dist/ColorArea.d.ts.map +1 -0
- package/dist/ColorArea.js +394 -0
- package/dist/ColorArea.js.map +1 -0
- package/dist/ColorArea.jsx +298 -0
- package/dist/ColorArea.jsx.map +1 -0
- package/dist/ColorEditor.d.ts.map +1 -1
- package/dist/ColorEditor.js +4 -5
- package/dist/ColorEditor.js.map +1 -1
- package/dist/ColorEditor.jsx +8 -5
- package/dist/ColorEditor.jsx.map +1 -1
- package/dist/ColorField.d.ts +89 -0
- package/dist/ColorField.d.ts.map +1 -0
- package/dist/ColorField.js +403 -0
- package/dist/ColorField.js.map +1 -0
- package/dist/ColorField.jsx +288 -0
- package/dist/ColorField.jsx.map +1 -0
- package/dist/ColorPicker.d.ts +33 -0
- package/dist/ColorPicker.d.ts.map +1 -0
- package/dist/ColorPicker.js +90 -0
- package/dist/ColorPicker.js.map +1 -0
- package/dist/ColorPicker.jsx +71 -0
- package/dist/ColorPicker.jsx.map +1 -0
- package/dist/ColorSlider.d.ts +145 -0
- package/dist/ColorSlider.d.ts.map +1 -0
- package/dist/ColorSlider.js +456 -0
- package/dist/ColorSlider.js.map +1 -0
- package/dist/ColorSlider.jsx +331 -0
- package/dist/ColorSlider.jsx.map +1 -0
- package/dist/ColorSwatch.d.ts +37 -0
- package/dist/ColorSwatch.d.ts.map +1 -0
- package/dist/ColorSwatch.js +105 -0
- package/dist/ColorSwatch.js.map +1 -0
- package/dist/ColorSwatch.jsx +88 -0
- package/dist/ColorSwatch.jsx.map +1 -0
- package/dist/ColorSwatchPicker.d.ts +82 -0
- package/dist/ColorSwatchPicker.d.ts.map +1 -0
- package/dist/ColorSwatchPicker.js +372 -0
- package/dist/ColorSwatchPicker.js.map +1 -0
- package/dist/ColorSwatchPicker.jsx +322 -0
- package/dist/ColorSwatchPicker.jsx.map +1 -0
- package/dist/ColorThumb.d.ts +16 -0
- package/dist/ColorThumb.d.ts.map +1 -0
- package/dist/ColorThumb.js +14 -0
- package/dist/ColorThumb.jsx +14 -0
- package/dist/ColorWheel.d.ts +103 -0
- package/dist/ColorWheel.d.ts.map +1 -0
- package/dist/ColorWheel.js +324 -0
- package/dist/ColorWheel.js.map +1 -0
- package/dist/ColorWheel.jsx +236 -0
- package/dist/ColorWheel.jsx.map +1 -0
- package/dist/ComboBox.d.ts +37 -22
- package/dist/ComboBox.d.ts.map +1 -1
- package/dist/ComboBox.js +82 -53
- package/dist/ComboBox.js.map +1 -1
- package/dist/ComboBox.jsx +61 -34
- package/dist/ComboBox.jsx.map +1 -1
- package/dist/ContextualHelpTrigger.d.ts.map +1 -1
- package/dist/ContextualHelpTrigger.js +3 -15
- package/dist/ContextualHelpTrigger.js.map +1 -1
- package/dist/ContextualHelpTrigger.jsx +3 -15
- package/dist/ContextualHelpTrigger.jsx.map +1 -1
- package/dist/DateField.d.ts +13 -2
- package/dist/DateField.d.ts.map +1 -1
- package/dist/DateField2.js +89 -26
- package/dist/DateField2.js.map +1 -1
- package/dist/DateField2.jsx +76 -27
- package/dist/DateField2.jsx.map +1 -1
- package/dist/DatePicker.d.ts +6 -27
- package/dist/DatePicker.d.ts.map +1 -1
- package/dist/DatePicker.js +1 -0
- package/dist/DatePicker.jsx +1 -0
- package/dist/DatePicker2.js +424 -171
- package/dist/DatePicker2.js.map +1 -1
- package/dist/DatePicker2.jsx +260 -55
- package/dist/DatePicker2.jsx.map +1 -1
- package/dist/Dialog.d.ts +3 -17
- package/dist/Dialog.d.ts.map +1 -1
- package/dist/Dialog.js +162 -272
- package/dist/Dialog.js.map +1 -1
- package/dist/Dialog.jsx +123 -119
- package/dist/Dialog.jsx.map +1 -1
- package/dist/Disclosure.d.ts.map +1 -1
- package/dist/Disclosure.js +81 -36
- package/dist/Disclosure.js.map +1 -1
- package/dist/Disclosure.jsx +50 -11
- package/dist/Disclosure.jsx.map +1 -1
- package/dist/DragAndDrop.d.ts.map +1 -1
- package/dist/DragAndDrop.js +9 -3
- package/dist/DragAndDrop.js.map +1 -1
- package/dist/DragAndDrop.jsx +9 -3
- package/dist/DragAndDrop.jsx.map +1 -1
- package/dist/DropZone.d.ts +8 -1
- package/dist/DropZone.d.ts.map +1 -1
- package/dist/DropZone.js +90 -70
- package/dist/DropZone.js.map +1 -1
- package/dist/DropZone.jsx +35 -11
- package/dist/DropZone.jsx.map +1 -1
- package/dist/FieldError.d.ts.map +1 -1
- package/dist/FieldError.js +6 -2
- package/dist/FieldError.js.map +1 -1
- package/dist/FieldError.jsx +6 -2
- package/dist/FieldError.jsx.map +1 -1
- package/dist/FileTrigger.d.ts.map +1 -1
- package/dist/FileTrigger.js +45 -11
- package/dist/FileTrigger.js.map +1 -1
- package/dist/FileTrigger.jsx +35 -2
- package/dist/FileTrigger.jsx.map +1 -1
- package/dist/Focusable.d.ts.map +1 -1
- package/dist/Focusable.js.map +1 -1
- package/dist/Focusable.jsx.map +1 -1
- package/dist/Form.d.ts.map +1 -1
- package/dist/Form.js +16 -3
- package/dist/Form.js.map +1 -1
- package/dist/Form.jsx +16 -3
- package/dist/Form.jsx.map +1 -1
- package/dist/GridList.d.ts +60 -27
- package/dist/GridList.d.ts.map +1 -1
- package/dist/GridList.js +179 -57
- package/dist/GridList.js.map +1 -1
- package/dist/GridList.jsx +165 -54
- package/dist/GridList.jsx.map +1 -1
- package/dist/Heading.d.ts +15 -0
- package/dist/Heading.d.ts.map +1 -0
- package/dist/Heading.js +55 -0
- package/dist/Heading.js.map +1 -0
- package/dist/Heading.jsx +40 -0
- package/dist/Heading.jsx.map +1 -0
- package/dist/Icon.d.ts.map +1 -1
- package/dist/Icon.js +21 -4
- package/dist/Icon.js.map +1 -1
- package/dist/Icon.jsx +12 -4
- package/dist/Icon.jsx.map +1 -1
- package/dist/Link.d.ts +2 -0
- package/dist/Link.d.ts.map +1 -1
- package/dist/Link.js +29 -16
- package/dist/Link.js.map +1 -1
- package/dist/Link.jsx +29 -16
- package/dist/Link.jsx.map +1 -1
- package/dist/ListBox.d.ts +46 -21
- package/dist/ListBox.d.ts.map +1 -1
- package/dist/ListBox.js +392 -234
- package/dist/ListBox.js.map +1 -1
- package/dist/ListBox.jsx +239 -120
- package/dist/ListBox.jsx.map +1 -1
- package/dist/Menu.d.ts +13 -5
- package/dist/Menu.d.ts.map +1 -1
- package/dist/Menu.js +502 -288
- package/dist/Menu.js.map +1 -1
- package/dist/Menu.jsx +329 -141
- package/dist/Menu.jsx.map +1 -1
- package/dist/Meter.d.ts.map +1 -1
- package/dist/Meter.js +6 -2
- package/dist/Meter.js.map +1 -1
- package/dist/Meter.jsx +6 -2
- package/dist/Meter.jsx.map +1 -1
- package/dist/Modal.d.ts.map +1 -1
- package/dist/Modal.js +24 -32
- package/dist/Modal.js.map +1 -1
- package/dist/Modal.jsx +20 -31
- package/dist/Modal.jsx.map +1 -1
- package/dist/NumberField.d.ts +2 -2
- package/dist/NumberField.d.ts.map +1 -1
- package/dist/NumberField.js +189 -84
- package/dist/NumberField.js.map +1 -1
- package/dist/NumberField.jsx +112 -29
- package/dist/NumberField.jsx.map +1 -1
- package/dist/Popover.d.ts +6 -0
- package/dist/Popover.d.ts.map +1 -1
- package/dist/Popover.js +49 -34
- package/dist/Popover.js.map +1 -1
- package/dist/Popover.jsx +49 -34
- package/dist/Popover.jsx.map +1 -1
- package/dist/Pressable.d.ts.map +1 -1
- package/dist/Pressable.js.map +1 -1
- package/dist/Pressable.jsx.map +1 -1
- package/dist/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar.js +25 -8
- package/dist/ProgressBar.js.map +1 -1
- package/dist/ProgressBar.jsx +20 -6
- package/dist/ProgressBar.jsx.map +1 -1
- package/dist/RadioGroup.d.ts +2 -13
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/RadioGroup.js +192 -180
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioGroup.jsx +116 -78
- package/dist/RadioGroup.jsx.map +1 -1
- package/dist/RangeCalendar.d.ts +8 -0
- package/dist/RangeCalendar.d.ts.map +1 -1
- package/dist/RangeCalendar.js +60 -22
- package/dist/RangeCalendar.js.map +1 -1
- package/dist/RangeCalendar.jsx +49 -20
- package/dist/RangeCalendar.jsx.map +1 -1
- package/dist/RouterProvider.d.ts +18 -64
- package/dist/RouterProvider.d.ts.map +1 -1
- package/dist/RouterProvider.js +2 -107
- package/dist/RouterProvider.jsx +2 -101
- package/dist/SearchField.d.ts +1 -1
- package/dist/SearchField.d.ts.map +1 -1
- package/dist/SearchField.js +50 -34
- package/dist/SearchField.js.map +1 -1
- package/dist/SearchField.jsx +51 -30
- package/dist/SearchField.jsx.map +1 -1
- package/dist/Select.d.ts +69 -27
- package/dist/Select.d.ts.map +1 -1
- package/dist/Select.js +238 -179
- package/dist/Select.js.map +1 -1
- package/dist/Select.jsx +149 -130
- package/dist/Select.jsx.map +1 -1
- package/dist/SelectionIndicator.d.ts.map +1 -1
- package/dist/SelectionIndicator.js +6 -2
- package/dist/SelectionIndicator.js.map +1 -1
- package/dist/SelectionIndicator.jsx +6 -2
- package/dist/SelectionIndicator.jsx.map +1 -1
- package/dist/Separator.d.ts +2 -2
- package/dist/Separator.d.ts.map +1 -1
- package/dist/Separator.js +4 -8
- package/dist/Separator.js.map +1 -1
- package/dist/Separator.jsx +4 -8
- package/dist/Separator.jsx.map +1 -1
- package/dist/SharedElementTransition.d.ts.map +1 -1
- package/dist/SharedElementTransition.js +6 -2
- package/dist/SharedElementTransition.js.map +1 -1
- package/dist/SharedElementTransition.jsx +6 -2
- package/dist/SharedElementTransition.jsx.map +1 -1
- package/dist/Slider.d.ts +23 -18
- package/dist/Slider.d.ts.map +1 -1
- package/dist/Slider.js +230 -131
- package/dist/Slider.js.map +1 -1
- package/dist/Slider.jsx +175 -86
- package/dist/Slider.jsx.map +1 -1
- package/dist/StepList.d.ts +1 -1
- package/dist/StepList.d.ts.map +1 -1
- package/dist/StepList.js +32 -26
- package/dist/StepList.js.map +1 -1
- package/dist/StepList.jsx +18 -12
- package/dist/StepList.jsx.map +1 -1
- package/dist/Switch.d.ts +15 -2
- package/dist/Switch.d.ts.map +1 -1
- package/dist/Switch.js +76 -29
- package/dist/Switch.js.map +1 -1
- package/dist/Switch.jsx +65 -29
- package/dist/Switch.jsx.map +1 -1
- package/dist/Table.d.ts +19 -1
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +382 -143
- package/dist/Table.js.map +1 -1
- package/dist/Table.jsx +286 -52
- package/dist/Table.jsx.map +1 -1
- package/dist/Tabs.d.ts.map +1 -1
- package/dist/Tabs.js +122 -71
- package/dist/Tabs.js.map +1 -1
- package/dist/Tabs.jsx +68 -15
- package/dist/Tabs.jsx.map +1 -1
- package/dist/TagGroup.d.ts +28 -11
- package/dist/TagGroup.d.ts.map +1 -1
- package/dist/TagGroup.js +273 -64
- package/dist/TagGroup.js.map +1 -1
- package/dist/TagGroup.jsx +201 -39
- package/dist/TagGroup.jsx.map +1 -1
- package/dist/Text.d.ts.map +1 -1
- package/dist/Text.js +14 -1
- package/dist/Text.js.map +1 -1
- package/dist/Text.jsx +11 -1
- package/dist/Text.jsx.map +1 -1
- package/dist/TextField.d.ts +1 -1
- package/dist/TextField.d.ts.map +1 -1
- package/dist/TextField.js +25 -22
- package/dist/TextField.js.map +1 -1
- package/dist/TextField.jsx +25 -22
- package/dist/TextField.jsx.map +1 -1
- package/dist/TimeField.d.ts +1 -1
- package/dist/TimeField.d.ts.map +1 -1
- package/dist/TimeField.js +42 -8
- package/dist/TimeField.js.map +1 -1
- package/dist/TimeField.jsx +42 -8
- package/dist/TimeField.jsx.map +1 -1
- package/dist/Toast.d.ts +17 -1
- package/dist/Toast.d.ts.map +1 -1
- package/dist/Toast.js +121 -54
- package/dist/Toast.js.map +1 -1
- package/dist/Toast.jsx +71 -18
- package/dist/Toast.jsx.map +1 -1
- package/dist/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton.js +28 -8
- package/dist/ToggleButton.js.map +1 -1
- package/dist/ToggleButton.jsx +22 -6
- package/dist/ToggleButton.jsx.map +1 -1
- package/dist/ToggleButtonGroup.d.ts.map +1 -1
- package/dist/ToggleButtonGroup.js +6 -2
- package/dist/ToggleButtonGroup.js.map +1 -1
- package/dist/ToggleButtonGroup.jsx +6 -2
- package/dist/ToggleButtonGroup.jsx.map +1 -1
- package/dist/TokenField.d.ts +4 -2
- package/dist/TokenField.d.ts.map +1 -1
- package/dist/TokenField.js +124 -39
- package/dist/TokenField.js.map +1 -1
- package/dist/TokenField.jsx +122 -35
- package/dist/TokenField.jsx.map +1 -1
- package/dist/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar.js +2 -6
- package/dist/Toolbar.js.map +1 -1
- package/dist/Toolbar.jsx +2 -6
- package/dist/Toolbar.jsx.map +1 -1
- package/dist/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip.js +30 -13
- package/dist/Tooltip.js.map +1 -1
- package/dist/Tooltip.jsx +30 -13
- package/dist/Tooltip.jsx.map +1 -1
- package/dist/Tree.d.ts +77 -28
- package/dist/Tree.d.ts.map +1 -1
- package/dist/Tree.js +669 -288
- package/dist/Tree.js.map +1 -1
- package/dist/Tree.jsx +355 -132
- package/dist/Tree.jsx.map +1 -1
- package/dist/Virtualizer.d.ts +2 -1
- package/dist/Virtualizer.d.ts.map +1 -1
- package/dist/Virtualizer2.js +63 -8
- package/dist/Virtualizer2.js.map +1 -1
- package/dist/Virtualizer2.jsx +63 -4
- package/dist/Virtualizer2.jsx.map +1 -1
- package/dist/VisuallyHidden.d.ts.map +1 -1
- package/dist/VisuallyHidden.js +3 -1
- package/dist/VisuallyHidden.js.map +1 -1
- package/dist/VisuallyHidden.jsx +3 -1
- package/dist/VisuallyHidden.jsx.map +1 -1
- package/dist/calendarHeadingTitle.d.ts +14 -0
- package/dist/calendarHeadingTitle.d.ts.map +1 -0
- package/dist/calendarHeadingTitle.js +23 -0
- package/dist/calendarHeadingTitle.js.map +1 -0
- package/dist/calendarHeadingTitle.jsx +23 -0
- package/dist/calendarHeadingTitle.jsx.map +1 -0
- package/dist/contexts.d.ts +6 -1
- package/dist/contexts.d.ts.map +1 -1
- package/dist/contexts.js +6 -1
- package/dist/contexts.js.map +1 -1
- package/dist/contexts.jsx +6 -1
- package/dist/contexts.jsx.map +1 -1
- package/dist/fileTriggerContext.d.ts +5 -0
- package/dist/fileTriggerContext.d.ts.map +1 -0
- package/dist/fileTriggerContext.js +7 -0
- package/dist/fileTriggerContext.js.map +1 -0
- package/dist/fileTriggerContext.jsx +7 -0
- package/dist/fileTriggerContext.jsx.map +1 -0
- package/dist/index.d.ts +17 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +20 -11
- package/dist/index.jsx +20 -11
- package/dist/loadMoreSentinel.d.ts +7 -0
- package/dist/loadMoreSentinel.d.ts.map +1 -0
- package/dist/loadMoreSentinel.js +30 -0
- package/dist/loadMoreSentinel.js.map +1 -0
- package/dist/loadMoreSentinel.jsx +30 -0
- package/dist/loadMoreSentinel.jsx.map +1 -0
- package/dist/slots.d.ts +35 -0
- package/dist/slots.d.ts.map +1 -0
- package/dist/slots.js +66 -0
- package/dist/slots.js.map +1 -0
- package/dist/slots.jsx +66 -0
- package/dist/slots.jsx.map +1 -0
- package/dist/staticSelectCollection.d.ts +2 -0
- package/dist/staticSelectCollection.d.ts.map +1 -0
- package/dist/staticSelectCollection.js +2 -0
- package/dist/staticSelectCollection.jsx +2 -0
- package/dist/useDragAndDrop.d.ts +2 -0
- package/dist/useDragAndDrop.d.ts.map +1 -1
- package/dist/useDragAndDrop2.js.map +1 -1
- package/dist/useDragAndDrop2.jsx.map +1 -1
- package/dist/utils.d.ts +21 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +48 -24
- package/dist/utils.js.map +1 -1
- package/dist/utils.jsx +39 -9
- package/dist/utils.jsx.map +1 -1
- package/dist/virtualizer/Layout.d.ts +3 -2
- package/dist/virtualizer/Layout.d.ts.map +1 -1
- package/dist/virtualizer/Layout.js.map +1 -1
- package/dist/virtualizer/Layout.jsx.map +1 -1
- package/package.json +63 -3
- package/src/ActionBar.tsx +6 -2
- package/src/ActionGroup.tsx +6 -3
- package/src/Alert.tsx +2 -3
- package/src/Autocomplete.tsx +1 -1
- package/src/Breadcrumbs.tsx +122 -15
- package/src/Button.tsx +39 -16
- package/src/Calendar.tsx +88 -27
- package/src/Checkbox.tsx +150 -124
- package/src/Collection.tsx +270 -17
- package/src/Color.tsx +8 -2632
- package/src/ColorArea.tsx +491 -0
- package/src/ColorEditor.tsx +4 -8
- package/src/ColorField.tsx +479 -0
- package/src/ColorPicker.tsx +130 -0
- package/src/ColorSlider.tsx +574 -0
- package/src/ColorSwatch.tsx +133 -0
- package/src/ColorSwatchPicker.tsx +631 -0
- package/src/ColorThumb.tsx +19 -0
- package/src/ColorWheel.tsx +410 -0
- package/src/ComboBox.tsx +127 -80
- package/src/ContextualHelpTrigger.tsx +4 -26
- package/src/DateField.tsx +123 -38
- package/src/DatePicker.tsx +379 -42
- package/src/Dialog.tsx +183 -174
- package/src/Disclosure.tsx +74 -21
- package/src/DragAndDrop.tsx +14 -3
- package/src/DropZone.tsx +60 -35
- package/src/FieldError.tsx +6 -2
- package/src/FileTrigger.tsx +54 -2
- package/src/Focusable.tsx +1 -6
- package/src/Form.tsx +23 -3
- package/src/GridList.tsx +270 -82
- package/src/Heading.tsx +59 -0
- package/src/HiddenDateInput.tsx +1 -1
- package/src/Icon.tsx +17 -4
- package/src/Link.tsx +43 -16
- package/src/ListBox.tsx +423 -195
- package/src/Menu.tsx +533 -266
- package/src/Meter.tsx +6 -2
- package/src/Modal.tsx +24 -50
- package/src/NumberField.tsx +137 -33
- package/src/Popover.tsx +70 -44
- package/src/Pressable.tsx +1 -6
- package/src/ProgressBar.tsx +23 -5
- package/src/RadioGroup.tsx +198 -171
- package/src/RangeCalendar.tsx +80 -23
- package/src/RouterProvider.tsx +22 -214
- package/src/SearchField.tsx +69 -31
- package/src/Select.tsx +352 -276
- package/src/SelectionIndicator.tsx +6 -2
- package/src/Separator.tsx +5 -13
- package/src/SharedElementTransition.tsx +6 -2
- package/src/Slider.tsx +268 -110
- package/src/StepList.tsx +25 -10
- package/src/Switch.tsx +101 -29
- package/src/Table.tsx +482 -149
- package/src/Tabs.tsx +90 -21
- package/src/TagGroup.tsx +343 -61
- package/src/Text.tsx +16 -1
- package/src/TextField.tsx +32 -23
- package/src/TimeField.tsx +64 -9
- package/src/Toast.tsx +110 -20
- package/src/ToggleButton.tsx +36 -6
- package/src/ToggleButtonGroup.tsx +6 -2
- package/src/TokenField.tsx +189 -54
- package/src/Toolbar.tsx +2 -8
- package/src/Tooltip.tsx +37 -17
- package/src/Tree.tsx +750 -266
- package/src/Virtualizer.tsx +106 -15
- package/src/VisuallyHidden.tsx +3 -1
- package/src/calendarHeadingTitle.ts +37 -0
- package/src/contexts.ts +10 -1
- package/src/fileTriggerContext.ts +8 -0
- package/src/index.ts +66 -11
- package/src/loadMoreSentinel.ts +31 -0
- package/src/slots.tsx +103 -0
- package/src/staticSelectCollection.tsx +25 -0
- package/src/useDragAndDrop.ts +5 -1
- package/src/utils.tsx +74 -8
- package/src/virtualizer/Layout.ts +3 -2
- package/dist/Color.js.map +0 -1
- package/dist/Color.jsx.map +0 -1
- package/dist/RouterProvider.js.map +0 -1
- package/dist/RouterProvider.jsx.map +0 -1
package/README.md
CHANGED
|
@@ -1,40 +1,39 @@
|
|
|
1
1
|
# @proyecto-viviana/solidaria-components
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
A Solid port of Adobe's React Aria Components: accessible components with no
|
|
4
|
+
styling. Each one ships the markup, the ARIA, and the interaction; you supply
|
|
5
|
+
every class.
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
Use this when you want to own the look completely. If you want components that
|
|
8
|
+
already look like something, use a styled sibling instead.
|
|
8
9
|
|
|
9
10
|
## Install
|
|
10
11
|
|
|
12
|
+
Requires **Solid 2**. `solid-js` and `@solidjs/web` are peer dependencies, at
|
|
13
|
+
`>=2.0.0-rc.9 <3`.
|
|
14
|
+
|
|
11
15
|
```bash
|
|
12
|
-
npm install @proyecto-viviana/solidaria-components solid-js
|
|
16
|
+
npm install @proyecto-viviana/solidaria-components@rc solid-js@next @solidjs/web@next
|
|
13
17
|
```
|
|
14
18
|
|
|
15
|
-
|
|
19
|
+
The release candidate is on the `rc` tag. The `latest` tag is the Solid 1
|
|
20
|
+
line.
|
|
16
21
|
|
|
17
|
-
|
|
18
|
-
import { Button } from "@proyecto-viviana/solidaria-components";
|
|
22
|
+
## Example
|
|
19
23
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
Components are headless. Style them with classes, data attributes, and render
|
|
26
|
-
props.
|
|
24
|
+
Style with classes, data attributes, or a render-prop child. Render-prop
|
|
25
|
+
fields are plain booleans, not accessors — read `isPressed`, do not call it.
|
|
27
26
|
|
|
28
27
|
```tsx
|
|
29
28
|
import { Button } from "@proyecto-viviana/solidaria-components";
|
|
30
29
|
|
|
31
|
-
export function
|
|
30
|
+
export function SaveButton(props: { onSave: () => void }) {
|
|
32
31
|
return (
|
|
33
|
-
<Button class="button">
|
|
34
|
-
{(
|
|
32
|
+
<Button class="button" onPress={props.onSave}>
|
|
33
|
+
{(render) => (
|
|
35
34
|
<span
|
|
36
|
-
data-pressed={isPressed
|
|
37
|
-
data-focus-visible={isFocusVisible
|
|
35
|
+
data-pressed={render.isPressed || undefined}
|
|
36
|
+
data-focus-visible={render.isFocusVisible || undefined}
|
|
38
37
|
>
|
|
39
38
|
Save
|
|
40
39
|
</span>
|
|
@@ -44,25 +43,52 @@ export function ToolbarButton() {
|
|
|
44
43
|
}
|
|
45
44
|
```
|
|
46
45
|
|
|
47
|
-
##
|
|
46
|
+
## In the chain
|
|
47
|
+
|
|
48
|
+
```text
|
|
49
|
+
solid-stately
|
|
50
|
+
↓
|
|
51
|
+
solidaria
|
|
52
|
+
↓
|
|
53
|
+
solidaria-components ← you are here
|
|
54
|
+
↓
|
|
55
|
+
solid-spectrum · @proyecto-viviana/ui · kumo · geist
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
It depends on `@proyecto-viviana/solidaria` and
|
|
59
|
+
`@proyecto-viviana/solid-stately`. Every styled package in the family is built
|
|
60
|
+
on this one.
|
|
48
61
|
|
|
49
|
-
|
|
50
|
-
ticketed pending RAC names (`scripts/rac-export-gap-pending.json`). Unlisted
|
|
51
|
-
missing names fail. Extra Solid exports are local API; document intentional
|
|
52
|
-
additions in changesets.
|
|
62
|
+
## Status
|
|
53
63
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
64
|
+
Published, and part of a port that is not finished. An export is a floor, not
|
|
65
|
+
proof that a component matches upstream.
|
|
66
|
+
[`src/index.ts`](src/index.ts) is the only source of truth for the public
|
|
67
|
+
surface — this file does not list exports, and no README carries a count.
|
|
57
68
|
|
|
58
|
-
|
|
69
|
+
What this release candidate is known to get wrong is listed under
|
|
70
|
+
[known gaps](https://github.com/proyecto-viviana/ui#known-gaps-in-this-release-candidate).
|
|
71
|
+
|
|
72
|
+
## Evidence
|
|
59
73
|
|
|
60
74
|
```bash
|
|
61
75
|
vp run guard:rac-parity
|
|
62
76
|
vp run guard:rac-export-gap
|
|
63
77
|
vp run --filter @proyecto-viviana/solidaria-components build
|
|
64
|
-
vp test
|
|
78
|
+
vp run test:run
|
|
65
79
|
```
|
|
66
80
|
|
|
67
|
-
|
|
68
|
-
|
|
81
|
+
`guard:rac-export-gap` allows only the ticketed pending upstream names in
|
|
82
|
+
`scripts/rac-export-gap-pending.json`; an unlisted missing name fails. Extra
|
|
83
|
+
Solid exports are our own API and are declared in a changeset. What "ported"
|
|
84
|
+
means here is [the evidence bar](https://github.com/proyecto-viviana/ui/blob/main/.claude/current/certification.md).
|
|
85
|
+
|
|
86
|
+
## Links
|
|
87
|
+
|
|
88
|
+
- Documentation: <https://ui.proyectoviviana.org>
|
|
89
|
+
- Repository: <https://github.com/proyecto-viviana/ui>
|
|
90
|
+
|
|
91
|
+
## License
|
|
92
|
+
|
|
93
|
+
MIT AND Apache-2.0. Our work is MIT; the port of Adobe's React Aria Components
|
|
94
|
+
keeps Apache-2.0. Both licenses and the project `NOTICE` ship in this package.
|
package/dist/ActionBar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../src/ActionBar.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AAEjB,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,CAAC;AAWzE,MAAM,WAAW,oBAAoB;IACnC,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,iBAAiB,EAAE,MAAM,GAAG,KAAK,CAAC;CACnC;AAED,MAAM,WAAW,cACf,SACE,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC,EACzF,SAAS;IACX,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACnC,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,mCAAmC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAClD,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC9C,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IACjE,wEAAwE;IACxE,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,iBAAiB,EAAE,MAAM,MAAM,GAAG,KAAK,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,0DAAoD,CAAC;AAElF,wBAAgB,mBAAmB,IAAI,qBAAqB,GAAG,IAAI,CAElE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../src/ActionBar.tsx"],"names":[],"mappings":"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"}
|
package/dist/ActionBar.js
CHANGED
|
@@ -90,8 +90,12 @@ function ActionBar(props) {
|
|
|
90
90
|
};
|
|
91
91
|
const renderProps = useRenderProps({
|
|
92
92
|
children: void 0,
|
|
93
|
-
class
|
|
94
|
-
|
|
93
|
+
get class() {
|
|
94
|
+
return local.class;
|
|
95
|
+
},
|
|
96
|
+
get style() {
|
|
97
|
+
return local.style;
|
|
98
|
+
},
|
|
95
99
|
defaultClassName: "solidaria-ActionBar"
|
|
96
100
|
}, () => ({
|
|
97
101
|
isOpen: isOpen(),
|
package/dist/ActionBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBar.js","names":["<Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>","<ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>","ref={(el) => assignRef(local.ref, el)}","onKeyDown={handleKeyDown}","{local.children}","<div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>","{props.children}","style={{ position: \"relative\", ...props.style }}","<div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>","{text()}","<span class={props.class}>{text()}</span>","class={props.class}","<button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ActionBar.js","names":["<Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>","<ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>","ref={(el) => assignRef(local.ref, el)}","onKeyDown={handleKeyDown}","{local.children}","<div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>","{props.children}","style={{ position: \"relative\", ...props.style }}","<div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>","{text()}","<span class={props.class}>{text()}</span>","class={props.class}","<button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":"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"}
|
package/dist/ActionBar.jsx
CHANGED
|
@@ -85,8 +85,12 @@ function ActionBar(props) {
|
|
|
85
85
|
};
|
|
86
86
|
const renderProps = useRenderProps({
|
|
87
87
|
children: void 0,
|
|
88
|
-
class
|
|
89
|
-
|
|
88
|
+
get class() {
|
|
89
|
+
return local.class;
|
|
90
|
+
},
|
|
91
|
+
get style() {
|
|
92
|
+
return local.style;
|
|
93
|
+
},
|
|
90
94
|
defaultClassName: "solidaria-ActionBar"
|
|
91
95
|
}, () => ({
|
|
92
96
|
isOpen: isOpen(),
|
package/dist/ActionBar.jsx.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBar.jsx","names":["assignRef"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAASA,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AA2CA,MAAa,mBAAmB,cAA4C,IAAI;AAEhF,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAID,MAAM,oBAAoB,iBAAiB,MAAM,qBAAqB,CAAC;CACvE,MAAM,eAAe,kBAAkB,MAAM;CAW7C,IAAI,UAAU;CACd,oBACS;EAAE,MAAM,OAAO;EAAG,SAAS,MAAM;CAAwB,KAC/D,EAAE,MAAM,cAAc;EACrB,IAAI,QAAQ,CAAC,WAAW,SACtB,SAAS,OAAO;EAElB,UAAU;CACZ,CACF;CAEA,MAAM,iBAAuE,MAAM;EACjF,MAAM,YAAY,MAAM;EAGxB,YAAY,CAAC;EACb,IAAI,EAAE,kBACJ;EAGF,IAAI,EAAE,QAAQ,YAAY,OAAO,GAAG;GAClC,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,MAAM,mBAAmB;EAC3B;CACF;CAEA,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO;EACL,QAAQ,OAAO;EACf,mBAAmB,kBAAkB;CACvC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,MAAM,eAAe,kBAAyC;EAC5D;EACA,kBAAkB,MAAM;EACxB,UAAU,MAAM;CAClB,EAAE;CAEF,OACE,CAAC,KAAK,MAAM,OAAO,GAAG;MACpB,CAAC,iBAAiB,OAAO,aAAa,GAAG;QACvC,CAAC,QACK,iBAAiB,GACrB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,WAAW,SAAS,OAAO,CAAC,GAC5B,WAAW,eACX,MAAM,OAAOA,YAAU,MAAM,KAAK,EAAE,GACrC;WACE,MAAM,SAAS;QAClB,EAAE,IAAI;MACR,EAAE,iBAAiB;IACrB,EAAE;AAEN;;;;AAUA,SAAgB,mBAAmB,OAA6C;CAC9E,OACE,CAAC,IACC,OAAO,MAAM,SAAS,gCACtB,OAAO;EAAE,UAAU;EAAY,GAAG,MAAM;CAAM,GAC/C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;AASA,SAAgB,wBAAwB,OAAkD;CACxF,MAAM,MAAM,oBAAoB;CAEhC,MAAM,aAAa;EACjB,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,QAAQ,IAAI,kBAAkB;EACpC,IAAI,UAAU,OAAO,OAAO;EAC5B,IAAI,UAAU,GAAG,OAAO;EACxB,OAAO,GAAG,MAAM;CAClB;CAEA,OAAO,CAAC,KAAK,OAAO,MAAM,QAAQ,KAAK,EAAE,EAAE;AAC7C;;;;AAWA,SAAgB,qBAAqB,OAA+C;CAClF,MAAM,MAAM,oBAAoB;CAEhC,OACE,CAAC,OACC,cACA,YAAY,MAAM,iBAAiB,mBACnC,OAAO,MAAM,OACb,eAAe,KAAK,mBAAmB,GACxC;OACE,MAAM,YAAY,IAAS;IAC9B,EAAE;AAEN"}
|
|
1
|
+
{"version":3,"file":"ActionBar.jsx","names":["assignRef"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAASA,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AA2CA,MAAa,mBAAmB,cAA4C,IAAI;AAEhF,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAID,MAAM,oBAAoB,iBAAiB,MAAM,qBAAqB,CAAC;CACvE,MAAM,eAAe,kBAAkB,MAAM;CAW7C,IAAI,UAAU;CACd,oBACS;EAAE,MAAM,OAAO;EAAG,SAAS,MAAM;CAAwB,KAC/D,EAAE,MAAM,cAAc;EACrB,IAAI,QAAQ,CAAC,WAAW,SACtB,SAAS,OAAO;EAElB,UAAU;CACZ,CACF;CAEA,MAAM,iBAAuE,MAAM;EACjF,MAAM,YAAY,MAAM;EAGxB,YAAY,CAAC;EACb,IAAI,EAAE,kBACJ;EAGF,IAAI,EAAE,QAAQ,YAAY,OAAO,GAAG;GAClC,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,MAAM,mBAAmB;EAC3B;CACF;CAEA,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,kBAAkB;CACpB,UACO;EACL,QAAQ,OAAO;EACf,mBAAmB,kBAAkB;CACvC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,MAAM,eAAe,kBAAyC;EAC5D;EACA,kBAAkB,MAAM;EACxB,UAAU,MAAM;CAClB,EAAE;CAEF,OACE,CAAC,KAAK,MAAM,OAAO,GAAG;MACpB,CAAC,iBAAiB,OAAO,aAAa,GAAG;QACvC,CAAC,QACK,iBAAiB,GACrB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,WAAW,SAAS,OAAO,CAAC,GAC5B,WAAW,eACX,MAAM,OAAOA,YAAU,MAAM,KAAK,EAAE,GACrC;WACE,MAAM,SAAS;QAClB,EAAE,IAAI;MACR,EAAE,iBAAiB;IACrB,EAAE;AAEN;;;;AAUA,SAAgB,mBAAmB,OAA6C;CAC9E,OACE,CAAC,IACC,OAAO,MAAM,SAAS,gCACtB,OAAO;EAAE,UAAU;EAAY,GAAG,MAAM;CAAM,GAC/C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;AASA,SAAgB,wBAAwB,OAAkD;CACxF,MAAM,MAAM,oBAAoB;CAEhC,MAAM,aAAa;EACjB,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,QAAQ,IAAI,kBAAkB;EACpC,IAAI,UAAU,OAAO,OAAO;EAC5B,IAAI,UAAU,GAAG,OAAO;EACxB,OAAO,GAAG,MAAM;CAClB;CAEA,OAAO,CAAC,KAAK,OAAO,MAAM,QAAQ,KAAK,EAAE,EAAE;AAC7C;;;;AAWA,SAAgB,qBAAqB,OAA+C;CAClF,MAAM,MAAM,oBAAoB;CAEhC,OACE,CAAC,OACC,cACA,YAAY,MAAM,iBAAiB,mBACnC,OAAO,MAAM,OACb,eAAe,KAAK,mBAAmB,GACxC;OACE,MAAM,YAAY,IAAS;IAC9B,EAAE;AAEN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../src/ActionGroup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../src/ActionGroup.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAMxC,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,CAAE,SAAQ,SAAS;IAC9F,qCAAqC;IACrC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5E,mCAAmC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;IACpD,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe;IAClF,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6EAAsD,CAAC;AACtF,eAAO,MAAM,uBAAuB,+DAAyD,CAAC;AAE9F,wBAAgB,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EACrE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,GAAG,CAAC,OAAO,CA8Hb;AAiDD,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE"}
|
package/dist/ActionGroup.js
CHANGED
|
@@ -96,8 +96,12 @@ function ActionGroup(props) {
|
|
|
96
96
|
const orientation = () => local.orientation ?? "horizontal";
|
|
97
97
|
const renderProps = useRenderProps({
|
|
98
98
|
children: void 0,
|
|
99
|
-
class
|
|
100
|
-
|
|
99
|
+
get class() {
|
|
100
|
+
return local.class;
|
|
101
|
+
},
|
|
102
|
+
get style() {
|
|
103
|
+
return local.style;
|
|
104
|
+
},
|
|
101
105
|
defaultClassName: "solidaria-ActionGroup"
|
|
102
106
|
}, () => ({
|
|
103
107
|
orientation: orientation(),
|
package/dist/ActionGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionGroup.js","names":["<ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>","value={{ state: state as ListState<ActionGroupItem> }}","<ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>","value={state as ListState<ActionGroupItem>}","ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}","<For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>","<ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />","state={state as ListState<ActionGroupItem>}","<div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>","{props.renderChild(props.item, renderProps())}","<button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>"],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ActionGroup.js","names":["<ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>","value={{ state: state as ListState<ActionGroupItem> }}","<ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>","value={state as ListState<ActionGroupItem>}","ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}","<For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>","<ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />","state={state as ListState<ActionGroupItem>}","<div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>","{props.renderChild(props.item, renderProps())}","<button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>"],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}
|
package/dist/ActionGroup.jsx
CHANGED
|
@@ -93,8 +93,12 @@ function ActionGroup(props) {
|
|
|
93
93
|
const orientation = () => local.orientation ?? "horizontal";
|
|
94
94
|
const renderProps = useRenderProps({
|
|
95
95
|
children: void 0,
|
|
96
|
-
class
|
|
97
|
-
|
|
96
|
+
get class() {
|
|
97
|
+
return local.class;
|
|
98
|
+
},
|
|
99
|
+
get style() {
|
|
100
|
+
return local.style;
|
|
101
|
+
},
|
|
98
102
|
defaultClassName: "solidaria-ActionGroup"
|
|
99
103
|
}, () => ({
|
|
100
104
|
orientation: orientation(),
|
package/dist/ActionGroup.jsx.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionGroup.jsx","names":[],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ActionGroup.jsx","names":[],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}
|
package/dist/Alert.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../src/Alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../src/Alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,OAAO,EAAE,YAAY,CAAC;IACtB,0CAA0C;IAC1C,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,gCAAgC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC1C,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,YAAY,CAAC;IAC5B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,sDAAgD,CAAC;AAE1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAyDpD;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;CAAG;AAEhF;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAU9E"}
|
package/dist/Alert.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { dataAttr, filterDOMProps } from "./utils.js";
|
|
1
|
+
import { dataAttr, evaluateRenderChildren, filterDOMProps } from "./utils.js";
|
|
2
2
|
import { Button } from "./Button.js";
|
|
3
|
-
import { createComponent, getNextElement, insert,
|
|
3
|
+
import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, scope, spread, template } from "@solidjs/web";
|
|
4
4
|
import { createContext, createMemo, useContext } from "solid-js";
|
|
5
5
|
import { splitProps } from "@proyecto-viviana/solidaria/utils";
|
|
6
6
|
//#region src/Alert.tsx
|
|
@@ -79,14 +79,9 @@ function Alert(props) {
|
|
|
79
79
|
return dataAttr(isDismissible());
|
|
80
80
|
}
|
|
81
81
|
}], true);
|
|
82
|
-
insert(_el$, scope((
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
});
|
|
86
|
-
return () => {
|
|
87
|
-
return _c$() ? local.children(renderValues()) : local.children;
|
|
88
|
-
};
|
|
89
|
-
})()));
|
|
82
|
+
insert(_el$, scope(() => {
|
|
83
|
+
return evaluateRenderChildren(local.children, renderValues());
|
|
84
|
+
}));
|
|
90
85
|
runHydrationEvents();
|
|
91
86
|
return _el$;
|
|
92
87
|
}
|
package/dist/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","names":["<AlertContext value={contextValue}>\n <div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {
|
|
1
|
+
{"version":3,"file":"Alert.js","names":["<AlertContext value={contextValue}>\n <div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {evaluateRenderChildren(local.children, renderValues())}\n </div>\n </AlertContext>","value={contextValue}","role=\"alert\"","{evaluateRenderChildren(local.children, renderValues())}","<div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {evaluateRenderChildren(local.children, renderValues())}\n </div>","<Button\n {...props}\n aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n onPress={() => context?.onDismiss?.()}\n />","onPress={() => context?.onDismiss?.()}"],"sources":["../src/Alert.tsx"],"sourcesContent":["/**\n * Alert component for solidaria-components\n *\n * Minimal headless Alert that owns ARIA semantics (role=\"alert\")\n * and provides render props for styling. The UI layer consumes this\n * for styling/composition only.\n *\n * This is a local Solid component. The pinned React Aria Components source\n * has no Alert counterpart.\n */\n\nimport { createContext, createMemo, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n filterDOMProps,\n dataAttr,\n evaluateRenderChildren,\n} from \"./utils\";\nimport { Button, type ButtonProps } from \"./Button\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertRenderProps {\n /** The variant of the alert. */\n variant: AlertVariant;\n /** Whether the alert can be dismissed. */\n isDismissible: boolean;\n}\n\nexport interface AlertProps extends SlotProps {\n /** The variant of the alert. */\n variant?: AlertVariant;\n /** Whether the alert can be dismissed. */\n isDismissible?: boolean;\n /** Handler called when the alert is dismissed. */\n onDismiss?: () => void;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<AlertRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<AlertRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<AlertRenderProps>;\n /** The id of the element. */\n id?: string;\n}\n\nexport interface AlertContextValue {\n variant: () => AlertVariant;\n isDismissible: () => boolean;\n onDismiss?: () => void;\n}\n\nexport const AlertContext = createContext<AlertContextValue | null>(null);\n\n/**\n * An alert displays a brief, important message in a way that\n * attracts the user's attention without interrupting their task.\n *\n * This is a headless component that provides the ARIA `role=\"alert\"`\n * semantics and render props for styling.\n *\n * @example\n * ```tsx\n * <Alert variant=\"error\" isDismissible onDismiss={() => setVisible(false)}>\n * {({ variant }) => <span>Something went wrong ({variant})</span>}\n * </Alert>\n * ```\n */\nexport function Alert(props: AlertProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"variant\",\n \"isDismissible\",\n \"onDismiss\",\n ]);\n\n const variant = () => local.variant ?? \"info\";\n const isDismissible = () => !!local.isDismissible;\n\n const renderValues = createMemo<AlertRenderProps>(() => ({\n variant: variant(),\n isDismissible: isDismissible(),\n }));\n\n // Resolve class and style manually. We intentionally avoid useRenderProps()\n // because it destructures children eagerly, which would create child\n // components (e.g. AlertDismissButton) BEFORE the AlertContext.Provider\n // is in scope, breaking context for sub-components.\n const computedClass = createMemo(() => {\n const cls = local.class;\n return typeof cls === \"function\" ? cls(renderValues()) : (cls ?? \"solidaria-Alert\");\n });\n\n const computedStyle = createMemo(() => {\n const s = local.style;\n return typeof s === \"function\" ? s(renderValues()) : s;\n });\n\n const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n const contextValue: AlertContextValue = {\n variant,\n isDismissible,\n onDismiss: local.onDismiss,\n };\n\n // Children are accessed lazily inside the Provider scope (via local.children\n // in JSX) so sub-components like AlertDismissButton can read AlertContext.\n return (\n <AlertContext value={contextValue}>\n <div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {evaluateRenderChildren(local.children, renderValues())}\n </div>\n </AlertContext>\n );\n}\n\nexport interface AlertDismissButtonProps extends Omit<ButtonProps, \"onPress\"> {}\n\n/**\n * A dismiss button for use inside an Alert.\n * Uses the headless Button for full keyboard/a11y support.\n *\n * @example\n * ```tsx\n * <Alert isDismissible onDismiss={handleDismiss}>\n * <span>Alert content</span>\n * <AlertDismissButton aria-label=\"Dismiss\">X</AlertDismissButton>\n * </Alert>\n * ```\n */\nexport function AlertDismissButton(props: AlertDismissButtonProps): JSX.Element {\n const context = useContext(AlertContext);\n\n return (\n <Button\n {...props}\n aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n onPress={() => context?.onDismiss?.()}\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,MAAa,eAAe,cAAwC,IAAI;;;;;;;;;;;;;;;AAgBxE,SAAgB,MAAM,OAAgC;CACpD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,sBAAsB,CAAC,CAAC,MAAM;CAEpC,MAAM,eAAe,kBAAoC;EACvD,SAAS,QAAQ;EACjB,eAAe,cAAc;CAC/B,EAAE;CAMF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,OAAO,OAAO,QAAQ,aAAa,IAAI,aAAa,CAAC,IAAK,OAAO;CACnE,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,IAAI,MAAM;EAChB,OAAO,OAAO,MAAM,aAAa,EAAE,aAAa,CAAC,IAAI;CACvD,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC;CAExE,MAAM,eAAkC;EACtC;EACA;EACA,WAAW,MAAM;CACnB;CAIA,OACEA,gBAAAA,cAAAA;EAAcC,OAAO;EAArB,IAAA,WAAA;GACE,IAAA,OAAA,eAAA,MASK;GARC,OAAA,MAAA,CAAA,UAAA;IACJC,MAAAA;IACA,IAAA,UAAA;KAAO,OAAA,cAAc;IAAC;IACtB,IAAA,QAAA;KAAO,OAAA,cAAc;IAAC;IACtB,IAAA,iBAAA;KAAc,OAAA,QAAQ;IAAC;IACvB,IAAA,qBAAA;KAAkB,OAAA,SAAS,cAAc,CAAC;IAAC;;GAN7C,OAAA,MAQEC,YAAAA;IAAC,OAAA,uBAAuB,MAAM,UAAU,aAAa,CAAC;GAAC,CAAA,CACpD;GATL,mBASK;GAVP,OACEC;EAUY;;AAElB;;;;;;;;;;;;;AAgBA,SAAgB,mBAAmB,OAA6C;CAC9E,MAAM,UAAU,WAAW,YAAY;CAEvC,OACEC,gBAAAA,QAAAA,WACM,OADN;EAEE,IAAA,eAAA;GAAY,OAAA,MAAM,iBAAiB;EAAS;EAC5CC,eAAe,SAAS,YAAY;CACrC,CAAA,CAAA;AAEL"}
|
package/dist/Alert.jsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { dataAttr, filterDOMProps } from "./utils.jsx";
|
|
1
|
+
import { dataAttr, evaluateRenderChildren, filterDOMProps } from "./utils.jsx";
|
|
2
2
|
import { Button } from "./Button.jsx";
|
|
3
3
|
import { createContext, createMemo, useContext } from "solid-js";
|
|
4
4
|
import { splitProps } from "@proyecto-viviana/solidaria/utils";
|
|
@@ -60,7 +60,7 @@ function Alert(props) {
|
|
|
60
60
|
};
|
|
61
61
|
return <AlertContext value={contextValue}>
|
|
62
62
|
<div {...domProps()} role="alert" class={computedClass()} style={computedStyle()} data-variant={variant()} data-dismissible={dataAttr(isDismissible())}>
|
|
63
|
-
{
|
|
63
|
+
{evaluateRenderChildren(local.children, renderValues())}
|
|
64
64
|
</div>
|
|
65
65
|
</AlertContext>;
|
|
66
66
|
}
|