@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar.js +175 -0
- package/dist/ActionBar.js.map +1 -0
- package/dist/ActionBar.jsx +119 -0
- package/dist/ActionBar.jsx.map +1 -0
- package/dist/ActionGroup.d.ts.map +1 -1
- package/dist/ActionGroup.js +179 -0
- package/dist/ActionGroup.js.map +1 -0
- package/dist/ActionGroup.jsx +129 -0
- package/dist/ActionGroup.jsx.map +1 -0
- package/dist/Alert.js +111 -0
- package/dist/Alert.js.map +1 -0
- package/dist/Alert.jsx +82 -0
- package/dist/Alert.jsx.map +1 -0
- package/dist/Autocomplete.d.ts +2 -2
- package/dist/Autocomplete.d.ts.map +1 -1
- package/dist/Autocomplete.js +130 -0
- package/dist/Autocomplete.js.map +1 -0
- package/dist/Autocomplete.jsx +116 -0
- package/dist/Autocomplete.jsx.map +1 -0
- package/dist/Breadcrumbs.d.ts.map +1 -1
- package/dist/Breadcrumbs.js +333 -0
- package/dist/Breadcrumbs.js.map +1 -0
- package/dist/Breadcrumbs.jsx +261 -0
- package/dist/Breadcrumbs.jsx.map +1 -0
- package/dist/Button.d.ts.map +1 -1
- package/dist/Button.js +348 -0
- package/dist/Button.js.map +1 -0
- package/dist/Button.jsx +314 -0
- package/dist/Button.jsx.map +1 -0
- package/dist/Calendar.d.ts +4 -4
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/Calendar.js +573 -0
- package/dist/Calendar.js.map +1 -0
- package/dist/Calendar.jsx +342 -0
- package/dist/Calendar.jsx.map +1 -0
- package/dist/CalendarPicker.d.ts +33 -0
- package/dist/CalendarPicker.d.ts.map +1 -0
- package/dist/CalendarPicker.js +44 -0
- package/dist/CalendarPicker.js.map +1 -0
- package/dist/CalendarPicker.jsx +44 -0
- package/dist/CalendarPicker.jsx.map +1 -0
- package/dist/Checkbox.d.ts +83 -4
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/Checkbox.js +923 -0
- package/dist/Checkbox.js.map +1 -0
- package/dist/Checkbox.jsx +707 -0
- package/dist/Checkbox.jsx.map +1 -0
- package/dist/Collection.d.ts.map +1 -1
- package/dist/Collection.js +202 -0
- package/dist/Collection.js.map +1 -0
- package/dist/Collection.jsx +152 -0
- package/dist/Collection.jsx.map +1 -0
- package/dist/Color.d.ts.map +1 -1
- package/dist/Color.js +1717 -0
- package/dist/Color.js.map +1 -0
- package/dist/Color.jsx +1340 -0
- package/dist/Color.jsx.map +1 -0
- package/dist/ColorEditor.js +208 -0
- package/dist/ColorEditor.js.map +1 -0
- package/dist/ColorEditor.jsx +120 -0
- package/dist/ColorEditor.jsx.map +1 -0
- package/dist/ComboBox.d.ts +8 -4
- package/dist/ComboBox.d.ts.map +1 -1
- package/dist/ComboBox.js +1000 -0
- package/dist/ComboBox.js.map +1 -0
- package/dist/ComboBox.jsx +724 -0
- package/dist/ComboBox.jsx.map +1 -0
- package/dist/ContextualHelpTrigger.js +146 -0
- package/dist/ContextualHelpTrigger.js.map +1 -0
- package/dist/ContextualHelpTrigger.jsx +109 -0
- package/dist/ContextualHelpTrigger.jsx.map +1 -0
- package/dist/DateField.d.ts +14 -5
- package/dist/DateField.d.ts.map +1 -1
- package/dist/DateField.js +4 -0
- package/dist/DateField.jsx +4 -0
- package/dist/DateField2.js +502 -0
- package/dist/DateField2.js.map +1 -0
- package/dist/DateField2.jsx +354 -0
- package/dist/DateField2.jsx.map +1 -0
- package/dist/DatePicker.d.ts +46 -7
- package/dist/DatePicker.d.ts.map +1 -1
- package/dist/DatePicker.js +7 -0
- package/dist/DatePicker.jsx +7 -0
- package/dist/DatePicker2.js +1171 -0
- package/dist/DatePicker2.js.map +1 -0
- package/dist/DatePicker2.jsx +820 -0
- package/dist/DatePicker2.jsx.map +1 -0
- package/dist/DateRangePickerContext.d.ts +2 -0
- package/dist/DateRangePickerContext.d.ts.map +1 -1
- package/dist/Dialog.d.ts.map +1 -1
- package/dist/Dialog.js +337 -0
- package/dist/Dialog.js.map +1 -0
- package/dist/Dialog.jsx +192 -0
- package/dist/Dialog.jsx.map +1 -0
- package/dist/Disclosure.d.ts.map +1 -1
- package/dist/Disclosure.js +331 -0
- package/dist/Disclosure.js.map +1 -0
- package/dist/Disclosure.jsx +230 -0
- package/dist/Disclosure.jsx.map +1 -0
- package/dist/DragAndDrop.d.ts.map +1 -1
- package/dist/DragAndDrop.js +176 -0
- package/dist/DragAndDrop.js.map +1 -0
- package/dist/DragAndDrop.jsx +160 -0
- package/dist/DragAndDrop.jsx.map +1 -0
- package/dist/DropZone.d.ts.map +1 -1
- package/dist/DropZone.js +189 -0
- package/dist/DropZone.js.map +1 -0
- package/dist/DropZone.jsx +144 -0
- package/dist/DropZone.jsx.map +1 -0
- package/dist/FieldError.js +66 -0
- package/dist/FieldError.js.map +1 -0
- package/dist/FieldError.jsx +47 -0
- package/dist/FieldError.jsx.map +1 -0
- package/dist/FileTrigger.js +79 -0
- package/dist/FileTrigger.js.map +1 -0
- package/dist/FileTrigger.jsx +49 -0
- package/dist/FileTrigger.jsx.map +1 -0
- package/dist/Focusable.js +70 -0
- package/dist/Focusable.js.map +1 -0
- package/dist/Focusable.jsx +69 -0
- package/dist/Focusable.jsx.map +1 -0
- package/dist/Form.js +99 -0
- package/dist/Form.js.map +1 -0
- package/dist/Form.jsx +73 -0
- package/dist/Form.jsx.map +1 -0
- package/dist/GridList.d.ts +34 -2
- package/dist/GridList.d.ts.map +1 -1
- package/dist/GridList.js +723 -0
- package/dist/GridList.js.map +1 -0
- package/dist/GridList.jsx +552 -0
- package/dist/GridList.jsx.map +1 -0
- package/dist/Icon.d.ts.map +1 -1
- package/dist/Icon.js +127 -0
- package/dist/Icon.js.map +1 -0
- package/dist/Icon.jsx +72 -0
- package/dist/Icon.jsx.map +1 -0
- package/dist/Keyboard.js +30 -0
- package/dist/Keyboard.js.map +1 -0
- package/dist/Keyboard.jsx +24 -0
- package/dist/Keyboard.jsx.map +1 -0
- package/dist/Landmark.js +134 -0
- package/dist/Landmark.js.map +1 -0
- package/dist/Landmark.jsx +118 -0
- package/dist/Landmark.jsx.map +1 -0
- package/dist/Link.d.ts.map +1 -1
- package/dist/Link.js +219 -0
- package/dist/Link.js.map +1 -0
- package/dist/Link.jsx +189 -0
- package/dist/Link.jsx.map +1 -0
- package/dist/ListBox.d.ts +2 -2
- package/dist/ListBox.d.ts.map +1 -1
- package/dist/ListBox.js +831 -0
- package/dist/ListBox.js.map +1 -0
- package/dist/ListBox.jsx +644 -0
- package/dist/ListBox.jsx.map +1 -0
- package/dist/Menu.d.ts +27 -9
- package/dist/Menu.d.ts.map +1 -1
- package/dist/Menu.js +1254 -0
- package/dist/Menu.js.map +1 -0
- package/dist/Menu.jsx +1042 -0
- package/dist/Menu.jsx.map +1 -0
- package/dist/Meter.d.ts.map +1 -1
- package/dist/Meter.js +123 -0
- package/dist/Meter.js.map +1 -0
- package/dist/Meter.jsx +107 -0
- package/dist/Meter.jsx.map +1 -0
- package/dist/Modal.d.ts.map +1 -1
- package/dist/Modal.js +382 -0
- package/dist/Modal.js.map +1 -0
- package/dist/Modal.jsx +314 -0
- package/dist/Modal.jsx.map +1 -0
- package/dist/NumberField.d.ts +3 -3
- package/dist/NumberField.d.ts.map +1 -1
- package/dist/NumberField.js +573 -0
- package/dist/NumberField.js.map +1 -0
- package/dist/NumberField.jsx +443 -0
- package/dist/NumberField.jsx.map +1 -0
- package/dist/Popover.d.ts +10 -2
- package/dist/Popover.d.ts.map +1 -1
- package/dist/Popover.js +471 -0
- package/dist/Popover.js.map +1 -0
- package/dist/Popover.jsx +354 -0
- package/dist/Popover.jsx.map +1 -0
- package/dist/Pressable.js +69 -0
- package/dist/Pressable.js.map +1 -0
- package/dist/Pressable.jsx +68 -0
- package/dist/Pressable.jsx.map +1 -0
- package/dist/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar.js +130 -0
- package/dist/ProgressBar.js.map +1 -0
- package/dist/ProgressBar.jsx +114 -0
- package/dist/ProgressBar.jsx.map +1 -0
- package/dist/RadioGroup.d.ts +82 -4
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/RadioGroup.js +931 -0
- package/dist/RadioGroup.js.map +1 -0
- package/dist/RadioGroup.jsx +681 -0
- package/dist/RadioGroup.jsx.map +1 -0
- package/dist/RangeCalendar.d.ts.map +1 -1
- package/dist/RangeCalendar.js +546 -0
- package/dist/RangeCalendar.js.map +1 -0
- package/dist/RangeCalendar.jsx +323 -0
- package/dist/RangeCalendar.jsx.map +1 -0
- package/dist/RouterProvider.js +118 -0
- package/dist/RouterProvider.js.map +1 -0
- package/dist/RouterProvider.jsx +112 -0
- package/dist/RouterProvider.jsx.map +1 -0
- package/dist/SearchField.d.ts +2 -2
- package/dist/SearchField.d.ts.map +1 -1
- package/dist/SearchField.js +667 -0
- package/dist/SearchField.js.map +1 -0
- package/dist/SearchField.jsx +550 -0
- package/dist/SearchField.jsx.map +1 -0
- package/dist/Select.d.ts +7 -0
- package/dist/Select.d.ts.map +1 -1
- package/dist/Select.js +1044 -0
- package/dist/Select.js.map +1 -0
- package/dist/Select.jsx +759 -0
- package/dist/Select.jsx.map +1 -0
- package/dist/SelectionIndicator.d.ts.map +1 -1
- package/dist/SelectionIndicator.js +86 -0
- package/dist/SelectionIndicator.js.map +1 -0
- package/dist/SelectionIndicator.jsx +50 -0
- package/dist/SelectionIndicator.jsx.map +1 -0
- package/dist/Separator.js +97 -0
- package/dist/Separator.js.map +1 -0
- package/dist/Separator.jsx +85 -0
- package/dist/Separator.jsx.map +1 -0
- package/dist/SharedElementTransition.d.ts.map +1 -1
- package/dist/SharedElementTransition.js +167 -0
- package/dist/SharedElementTransition.js.map +1 -0
- package/dist/SharedElementTransition.jsx +140 -0
- package/dist/SharedElementTransition.jsx.map +1 -0
- package/dist/Slider.d.ts +33 -1
- package/dist/Slider.d.ts.map +1 -1
- package/dist/Slider.js +515 -0
- package/dist/Slider.js.map +1 -0
- package/dist/Slider.jsx +403 -0
- package/dist/Slider.jsx.map +1 -0
- package/dist/StepList.d.ts.map +1 -1
- package/dist/StepList.js +191 -0
- package/dist/StepList.js.map +1 -0
- package/dist/StepList.jsx +136 -0
- package/dist/StepList.jsx.map +1 -0
- package/dist/Switch.d.ts +65 -2
- package/dist/Switch.d.ts.map +1 -1
- package/dist/Switch.js +534 -0
- package/dist/Switch.js.map +1 -0
- package/dist/Switch.jsx +393 -0
- package/dist/Switch.jsx.map +1 -0
- package/dist/Table.d.ts +50 -0
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +1766 -0
- package/dist/Table.js.map +1 -0
- package/dist/Table.jsx +1355 -0
- package/dist/Table.jsx.map +1 -0
- package/dist/Tabs.d.ts +0 -4
- package/dist/Tabs.d.ts.map +1 -1
- package/dist/Tabs.js +598 -0
- package/dist/Tabs.js.map +1 -0
- package/dist/Tabs.jsx +367 -0
- package/dist/Tabs.jsx.map +1 -0
- package/dist/TagGroup.d.ts +3 -1
- package/dist/TagGroup.d.ts.map +1 -1
- package/dist/TagGroup.js +382 -0
- package/dist/TagGroup.js.map +1 -0
- package/dist/TagGroup.jsx +273 -0
- package/dist/TagGroup.jsx.map +1 -0
- package/dist/Text.d.ts +18 -6
- package/dist/Text.d.ts.map +1 -1
- package/dist/Text.js +42 -0
- package/dist/Text.js.map +1 -0
- package/dist/Text.jsx +35 -0
- package/dist/Text.jsx.map +1 -0
- package/dist/TextField.d.ts +6 -6
- package/dist/TextField.d.ts.map +1 -1
- package/dist/TextField.js +439 -0
- package/dist/TextField.js.map +1 -0
- package/dist/TextField.jsx +406 -0
- package/dist/TextField.jsx.map +1 -0
- package/dist/TimeField.d.ts +17 -53
- package/dist/TimeField.d.ts.map +1 -1
- package/dist/TimeField.js +278 -0
- package/dist/TimeField.js.map +1 -0
- package/dist/TimeField.jsx +218 -0
- package/dist/TimeField.jsx.map +1 -0
- package/dist/Toast.d.ts +14 -0
- package/dist/Toast.d.ts.map +1 -1
- package/dist/Toast.js +551 -0
- package/dist/Toast.js.map +1 -0
- package/dist/Toast.jsx +361 -0
- package/dist/Toast.jsx.map +1 -0
- package/dist/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton.js +123 -0
- package/dist/ToggleButton.js.map +1 -0
- package/dist/ToggleButton.jsx +88 -0
- package/dist/ToggleButton.jsx.map +1 -0
- package/dist/ToggleButtonGroup.d.ts.map +1 -1
- package/dist/ToggleButtonGroup.js +114 -0
- package/dist/ToggleButtonGroup.js.map +1 -0
- package/dist/ToggleButtonGroup.jsx +85 -0
- package/dist/ToggleButtonGroup.jsx.map +1 -0
- package/dist/Toolbar.js +112 -0
- package/dist/Toolbar.js.map +1 -0
- package/dist/Toolbar.jsx +92 -0
- package/dist/Toolbar.jsx.map +1 -0
- package/dist/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip.js +539 -0
- package/dist/Tooltip.js.map +1 -0
- package/dist/Tooltip.jsx +465 -0
- package/dist/Tooltip.jsx.map +1 -0
- package/dist/Tree.d.ts +14 -2
- package/dist/Tree.d.ts.map +1 -1
- package/dist/Tree.js +1424 -0
- package/dist/Tree.js.map +1 -0
- package/dist/Tree.jsx +1172 -0
- package/dist/Tree.jsx.map +1 -0
- package/dist/Virtualizer.d.ts +16 -2
- package/dist/Virtualizer.d.ts.map +1 -1
- package/dist/Virtualizer.js +2 -0
- package/dist/Virtualizer.jsx +2 -0
- package/dist/Virtualizer2.js +751 -0
- package/dist/Virtualizer2.js.map +1 -0
- package/dist/Virtualizer2.jsx +730 -0
- package/dist/Virtualizer2.jsx.map +1 -0
- package/dist/VirtualizerLayouts.d.ts +18 -0
- package/dist/VirtualizerLayouts.d.ts.map +1 -1
- package/dist/VisuallyHidden.js +42 -0
- package/dist/VisuallyHidden.js.map +1 -0
- package/dist/VisuallyHidden.jsx +35 -0
- package/dist/VisuallyHidden.jsx.map +1 -0
- package/dist/contexts.js +33 -0
- package/dist/contexts.js.map +1 -0
- package/dist/contexts.jsx +33 -0
- package/dist/contexts.jsx.map +1 -0
- package/dist/index.d.ts +9 -9
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +69 -23932
- package/dist/index.jsx +69 -18337
- package/dist/useDragAndDrop.d.ts +0 -8
- package/dist/useDragAndDrop.d.ts.map +1 -1
- package/dist/useDragAndDrop.js +2 -0
- package/dist/useDragAndDrop.jsx +2 -0
- package/dist/useDragAndDrop2.js +399 -0
- package/dist/useDragAndDrop2.js.map +1 -0
- package/dist/useDragAndDrop2.jsx +399 -0
- package/dist/useDragAndDrop2.jsx.map +1 -0
- package/dist/utils.d.ts +84 -11
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +285 -0
- package/dist/utils.js.map +1 -0
- package/dist/utils.jsx +277 -0
- package/dist/utils.jsx.map +1 -0
- package/dist/virtualizer/Layout.js +144 -0
- package/dist/virtualizer/Layout.js.map +1 -0
- package/dist/virtualizer/Layout.jsx +144 -0
- package/dist/virtualizer/Layout.jsx.map +1 -0
- package/package.json +395 -4
- package/src/ActionBar.tsx +10 -12
- package/src/ActionGroup.tsx +5 -3
- package/src/Autocomplete.tsx +14 -9
- package/src/Breadcrumbs.tsx +58 -39
- package/src/Button.tsx +22 -2
- package/src/Calendar.tsx +57 -11
- package/src/CalendarPicker.tsx +73 -0
- package/src/Checkbox.tsx +539 -3
- package/src/Collection.tsx +9 -3
- package/src/Color.tsx +84 -41
- package/src/ComboBox.tsx +97 -21
- package/src/DateField.tsx +304 -53
- package/src/DatePicker.tsx +402 -62
- package/src/DateRangePickerContext.tsx +2 -0
- package/src/Dialog.tsx +13 -5
- package/src/Disclosure.tsx +7 -1
- package/src/DragAndDrop.tsx +3 -1
- package/src/DropZone.tsx +3 -1
- package/src/GridList.tsx +133 -26
- package/src/Icon.tsx +3 -1
- package/src/Link.tsx +3 -1
- package/src/ListBox.tsx +354 -25
- package/src/Menu.tsx +252 -128
- package/src/Meter.tsx +3 -1
- package/src/Modal.tsx +120 -56
- package/src/NumberField.tsx +51 -8
- package/src/Popover.tsx +68 -17
- package/src/ProgressBar.tsx +3 -1
- package/src/RadioGroup.tsx +468 -4
- package/src/RangeCalendar.tsx +123 -2
- package/src/SearchField.tsx +80 -4
- package/src/Select.tsx +122 -26
- package/src/SelectionIndicator.tsx +3 -1
- package/src/SharedElementTransition.tsx +95 -37
- package/src/Slider.tsx +159 -13
- package/src/StepList.tsx +0 -7
- package/src/Switch.tsx +395 -2
- package/src/Table.tsx +428 -99
- package/src/Tabs.tsx +17 -45
- package/src/TagGroup.tsx +29 -7
- package/src/Text.tsx +31 -10
- package/src/TextField.tsx +44 -6
- package/src/TimeField.tsx +127 -192
- package/src/Toast.tsx +79 -14
- package/src/ToggleButton.tsx +3 -1
- package/src/ToggleButtonGroup.tsx +3 -1
- package/src/Tooltip.tsx +3 -1
- package/src/Tree.tsx +91 -13
- package/src/Virtualizer.tsx +180 -31
- package/src/VirtualizerLayouts.ts +45 -10
- package/src/index.ts +51 -8
- package/src/useDragAndDrop.ts +8 -10
- package/src/utils.tsx +246 -30
- package/dist/HiddenTimeInput.d.ts +0 -25
- package/dist/HiddenTimeInput.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/index.jsx.map +0 -1
- package/src/HiddenTimeInput.tsx +0 -133
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
|
|
2
|
+
import { createAutocomplete } from "@proyecto-viviana/solidaria";
|
|
3
|
+
import { createAutocompleteState } from "@proyecto-viviana/solid-stately";
|
|
4
|
+
//#region src/Autocomplete.tsx
|
|
5
|
+
/**
|
|
6
|
+
* Autocomplete component for solidaria-components
|
|
7
|
+
*
|
|
8
|
+
* Provides autocomplete functionality by wrapping a text input
|
|
9
|
+
* with a filterable collection (ListBox/Menu).
|
|
10
|
+
*
|
|
11
|
+
* Port of react-aria-components/src/Autocomplete.tsx
|
|
12
|
+
*/
|
|
13
|
+
const AutocompleteContext = createContext(null);
|
|
14
|
+
const AutocompleteStateContext = createContext(null);
|
|
15
|
+
const AutocompleteCollectionContext = createContext(null);
|
|
16
|
+
/**
|
|
17
|
+
* Hook to consume autocomplete input context.
|
|
18
|
+
* Use this in your input component (TextField/SearchField) to get the autocomplete props.
|
|
19
|
+
*/
|
|
20
|
+
function useAutocompleteInput() {
|
|
21
|
+
return useContext(AutocompleteContext);
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Hook to consume autocomplete state context.
|
|
25
|
+
*/
|
|
26
|
+
function useAutocompleteState() {
|
|
27
|
+
return useContext(AutocompleteStateContext);
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Hook to consume autocomplete collection context.
|
|
31
|
+
* Use this in your collection component (ListBox/Menu) to get the autocomplete props.
|
|
32
|
+
*/
|
|
33
|
+
function useAutocompleteCollection() {
|
|
34
|
+
return useContext(AutocompleteCollectionContext);
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* An autocomplete allows users to search or filter a list of suggestions.
|
|
38
|
+
* It wraps a text input and a collection component (ListBox or Menu),
|
|
39
|
+
* providing keyboard navigation and filtering capabilities.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* // Basic usage with SearchField and ListBox
|
|
44
|
+
* <Autocomplete
|
|
45
|
+
* filter={(textValue, inputValue) =>
|
|
46
|
+
* textValue.toLowerCase().includes(inputValue.toLowerCase())
|
|
47
|
+
* }
|
|
48
|
+
* >
|
|
49
|
+
* <SearchField aria-label="Search">
|
|
50
|
+
* <Input />
|
|
51
|
+
* </SearchField>
|
|
52
|
+
* <ListBox aria-label="Suggestions">
|
|
53
|
+
* <ListBoxItem>Option 1</ListBoxItem>
|
|
54
|
+
* <ListBoxItem>Option 2</ListBoxItem>
|
|
55
|
+
* <ListBoxItem>Option 3</ListBoxItem>
|
|
56
|
+
* </ListBox>
|
|
57
|
+
* </Autocomplete>
|
|
58
|
+
*
|
|
59
|
+
* // Controlled input value
|
|
60
|
+
* const [value, setValue] = createSignal('');
|
|
61
|
+
* <Autocomplete
|
|
62
|
+
* inputValue={value()}
|
|
63
|
+
* onInputChange={setValue}
|
|
64
|
+
* filter={(textValue, inputValue) =>
|
|
65
|
+
* textValue.toLowerCase().includes(inputValue.toLowerCase())
|
|
66
|
+
* }
|
|
67
|
+
* >
|
|
68
|
+
* {/* ... *\/}
|
|
69
|
+
* </Autocomplete>
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
function Autocomplete(props) {
|
|
73
|
+
const [stateProps, ariaProps, local] = splitProps(props, [
|
|
74
|
+
"inputValue",
|
|
75
|
+
"defaultInputValue",
|
|
76
|
+
"onInputChange"
|
|
77
|
+
], [
|
|
78
|
+
"filter",
|
|
79
|
+
"disableAutoFocusFirst",
|
|
80
|
+
"disableVirtualFocus",
|
|
81
|
+
"collectionId",
|
|
82
|
+
"collectionAriaLabel"
|
|
83
|
+
]);
|
|
84
|
+
const state = createAutocompleteState(stateProps);
|
|
85
|
+
const [inputRef, setInputRef] = createSignal();
|
|
86
|
+
const [collectionRef, setCollectionRef] = createSignal();
|
|
87
|
+
const autocomplete = createAutocomplete({
|
|
88
|
+
...ariaProps,
|
|
89
|
+
inputRef,
|
|
90
|
+
collectionRef
|
|
91
|
+
}, state);
|
|
92
|
+
const inputContextValue = createMemo(() => ({
|
|
93
|
+
inputProps: autocomplete.inputProps,
|
|
94
|
+
inputRef: (el) => {
|
|
95
|
+
setInputRef(el);
|
|
96
|
+
}
|
|
97
|
+
}));
|
|
98
|
+
const collectionContextValue = createMemo(() => ({
|
|
99
|
+
collectionProps: autocomplete.collectionProps,
|
|
100
|
+
collectionRef: (el) => {
|
|
101
|
+
setCollectionRef(el);
|
|
102
|
+
},
|
|
103
|
+
filter: autocomplete.filter
|
|
104
|
+
}));
|
|
105
|
+
return <AutocompleteStateContext.Provider value={state}>
|
|
106
|
+
<AutocompleteContext.Provider value={inputContextValue()}>
|
|
107
|
+
<AutocompleteCollectionContext.Provider value={collectionContextValue()}>
|
|
108
|
+
{props.children}
|
|
109
|
+
</AutocompleteCollectionContext.Provider>
|
|
110
|
+
</AutocompleteContext.Provider>
|
|
111
|
+
</AutocompleteStateContext.Provider>;
|
|
112
|
+
}
|
|
113
|
+
//#endregion
|
|
114
|
+
export { Autocomplete, AutocompleteCollectionContext, AutocompleteContext, AutocompleteStateContext, useAutocompleteCollection, useAutocompleteInput, useAutocompleteState };
|
|
115
|
+
|
|
116
|
+
//# sourceMappingURL=Autocomplete.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Autocomplete.jsx","names":[],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/**\n * Autocomplete component for solidaria-components\n *\n * Provides autocomplete functionality by wrapping a text input\n * with a filterable collection (ListBox/Menu).\n *\n * Port of react-aria-components/src/Autocomplete.tsx\n */\n\nimport {\n type JSX,\n type ParentProps,\n createContext,\n useContext,\n createMemo,\n splitProps,\n createSignal,\n} from \"solid-js\";\nimport {\n createAutocomplete,\n type AriaAutocompleteOptions,\n type AutocompleteInputProps,\n type CollectionOptions,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createAutocompleteState,\n type AutocompleteState,\n type AutocompleteStateOptions,\n type CollectionNode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { type SlotProps } from \"./utils\";\n\nexport interface AutocompleteProps<T = unknown>\n extends\n Omit<AutocompleteStateOptions, \"children\">,\n Omit<AriaAutocompleteOptions<T>, \"inputRef\" | \"collectionRef\">,\n ParentProps,\n SlotProps {}\n\nexport interface AutocompleteContextValue {\n inputProps: AutocompleteInputProps;\n inputRef: (el: HTMLInputElement) => void;\n}\n\nexport interface AutocompleteCollectionContextValue {\n collectionProps: CollectionOptions;\n collectionRef: (el: HTMLElement) => void;\n filter?: (nodeTextValue: string, node: CollectionNode<unknown>) => boolean;\n}\n\nexport const AutocompleteContext = createContext<AutocompleteContextValue | null>(null);\nexport const AutocompleteStateContext = createContext<AutocompleteState | null>(null);\nexport const AutocompleteCollectionContext =\n createContext<AutocompleteCollectionContextValue | null>(null);\n\n/**\n * Hook to consume autocomplete input context.\n * Use this in your input component (TextField/SearchField) to get the autocomplete props.\n */\nexport function useAutocompleteInput() {\n return useContext(AutocompleteContext);\n}\n\n/**\n * Hook to consume autocomplete state context.\n */\nexport function useAutocompleteState() {\n return useContext(AutocompleteStateContext);\n}\n\n/**\n * Hook to consume autocomplete collection context.\n * Use this in your collection component (ListBox/Menu) to get the autocomplete props.\n */\nexport function useAutocompleteCollection() {\n return useContext(AutocompleteCollectionContext);\n}\n\n/**\n * An autocomplete allows users to search or filter a list of suggestions.\n * It wraps a text input and a collection component (ListBox or Menu),\n * providing keyboard navigation and filtering capabilities.\n *\n * @example\n * ```tsx\n * // Basic usage with SearchField and ListBox\n * <Autocomplete\n * filter={(textValue, inputValue) =>\n * textValue.toLowerCase().includes(inputValue.toLowerCase())\n * }\n * >\n * <SearchField aria-label=\"Search\">\n * <Input />\n * </SearchField>\n * <ListBox aria-label=\"Suggestions\">\n * <ListBoxItem>Option 1</ListBoxItem>\n * <ListBoxItem>Option 2</ListBoxItem>\n * <ListBoxItem>Option 3</ListBoxItem>\n * </ListBox>\n * </Autocomplete>\n *\n * // Controlled input value\n * const [value, setValue] = createSignal('');\n * <Autocomplete\n * inputValue={value()}\n * onInputChange={setValue}\n * filter={(textValue, inputValue) =>\n * textValue.toLowerCase().includes(inputValue.toLowerCase())\n * }\n * >\n * {/* ... *\\/}\n * </Autocomplete>\n * ```\n */\nexport function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Element {\n const [stateProps, ariaProps, local] = splitProps(\n props,\n [\"inputValue\", \"defaultInputValue\", \"onInputChange\"],\n [\n \"filter\",\n \"disableAutoFocusFirst\",\n \"disableVirtualFocus\",\n \"collectionId\",\n \"collectionAriaLabel\",\n ],\n );\n\n const state = createAutocompleteState(stateProps);\n\n // Refs are signals so createAutocomplete's effects (the beforeinput listener\n // and the reverse-path focusin listener that mirrors aria-activedescendant)\n // bind reactively once the input/collection elements actually mount.\n const [inputRef, setInputRef] = createSignal<HTMLInputElement>();\n const [collectionRef, setCollectionRef] = createSignal<HTMLElement>();\n\n // Create autocomplete aria\n const autocomplete = createAutocomplete<T>(\n {\n ...ariaProps,\n inputRef,\n collectionRef,\n },\n state,\n );\n\n // Input context value\n const inputContextValue = createMemo<AutocompleteContextValue>(() => ({\n inputProps: autocomplete.inputProps,\n inputRef: (el: HTMLInputElement) => {\n setInputRef(el);\n },\n }));\n\n // Collection context value\n const collectionContextValue = createMemo<AutocompleteCollectionContextValue>(() => ({\n collectionProps: autocomplete.collectionProps,\n collectionRef: (el: HTMLElement) => {\n setCollectionRef(el);\n },\n filter: autocomplete.filter as\n | ((nodeTextValue: string, node: CollectionNode<unknown>) => boolean)\n | undefined,\n }));\n\n return (\n <AutocompleteStateContext.Provider value={state}>\n <AutocompleteContext.Provider value={inputContextValue()}>\n <AutocompleteCollectionContext.Provider value={collectionContextValue()}>\n {props.children}\n </AutocompleteCollectionContext.Provider>\n </AutocompleteContext.Provider>\n </AutocompleteStateContext.Provider>\n );\n}\n"],"mappings":";;;;;;;;;;;;AAkDA,MAAa,sBAAsB,cAA+C,IAAI;AACtF,MAAa,2BAA2B,cAAwC,IAAI;AACpF,MAAa,gCACX,cAAyD,IAAI;;;;;AAM/D,SAAgB,uBAAuB;CACrC,OAAO,WAAW,mBAAmB;AACvC;;;;AAKA,SAAgB,uBAAuB;CACrC,OAAO,WAAW,wBAAwB;AAC5C;;;;;AAMA,SAAgB,4BAA4B;CAC1C,OAAO,WAAW,6BAA6B;AACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,aAA0B,OAA0C;CAClF,MAAM,CAAC,YAAY,WAAW,SAAS,WACrC,OACA;EAAC;EAAc;EAAqB;CAAe,GACnD;EACE;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,QAAQ,wBAAwB,UAAU;CAKhD,MAAM,CAAC,UAAU,eAAe,aAA+B;CAC/D,MAAM,CAAC,eAAe,oBAAoB,aAA0B;CAGpE,MAAM,eAAe,mBACnB;EACE,GAAG;EACH;EACA;CACF,GACA,KACF;CAGA,MAAM,oBAAoB,kBAA4C;EACpE,YAAY,aAAa;EACzB,WAAW,OAAyB;GAClC,YAAY,EAAE;EAChB;CACF,EAAE;CAGF,MAAM,yBAAyB,kBAAsD;EACnF,iBAAiB,aAAa;EAC9B,gBAAgB,OAAoB;GAClC,iBAAiB,EAAE;EACrB;EACA,QAAQ,aAAa;CAGvB,EAAE;CAEF,OACE,CAAC,yBAAyB,SAAS,OAAO,OAAO;MAC/C,CAAC,oBAAoB,SAAS,OAAO,kBAAkB,GAAG;QACxD,CAAC,8BAA8B,SAAS,OAAO,uBAAuB,GAAG;WACtE,MAAM,SAAS;QAClB,EAAE,8BAA8B,SAAS;MAC3C,EAAE,oBAAoB,SAAS;IACjC,EAAE,yBAAyB;AAE/B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../src/Breadcrumbs.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../src/Breadcrumbs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
import { filterDOMProps, useRenderProps } from "./utils.js";
|
|
2
|
+
import { Dynamic, createComponent, getNextElement, insert, memo, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
|
|
3
|
+
import { For, Show, children, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
|
|
4
|
+
import { createBreadcrumbItem, createBreadcrumbs, createFocusRing, createHover, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
|
|
5
|
+
//#region src/Breadcrumbs.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Breadcrumbs component for solidaria-components
|
|
8
|
+
*
|
|
9
|
+
* A pre-wired headless breadcrumbs component that combines aria hooks.
|
|
10
|
+
* Port of react-aria-components Breadcrumbs.
|
|
11
|
+
*/
|
|
12
|
+
var _tmpl$ = /*#__PURE__*/ template(`<ol>`), _tmpl$2 = /*#__PURE__*/ template(`<li style=display:flex;align-items:center>`);
|
|
13
|
+
function assignRef(ref, el) {
|
|
14
|
+
if (!ref) return;
|
|
15
|
+
if (typeof ref === "function") ref(el);
|
|
16
|
+
else ref.current = el;
|
|
17
|
+
}
|
|
18
|
+
const BreadcrumbsContext = createContext(null);
|
|
19
|
+
const BreadcrumbItemContext = createContext(null);
|
|
20
|
+
function defaultItemKey(item, index) {
|
|
21
|
+
const maybeItem = item;
|
|
22
|
+
return maybeItem.key ?? maybeItem.id ?? index;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Breadcrumbs show hierarchy and navigational context for a user's location within an application.
|
|
26
|
+
*/
|
|
27
|
+
function Breadcrumbs(props) {
|
|
28
|
+
const [local, ariaProps, rest] = splitProps(props, [
|
|
29
|
+
"children",
|
|
30
|
+
"class",
|
|
31
|
+
"style",
|
|
32
|
+
"slot",
|
|
33
|
+
"items",
|
|
34
|
+
"getKey",
|
|
35
|
+
"isDisabled",
|
|
36
|
+
"onAction",
|
|
37
|
+
"ref"
|
|
38
|
+
], [
|
|
39
|
+
"aria-label",
|
|
40
|
+
"aria-labelledby",
|
|
41
|
+
"aria-describedby",
|
|
42
|
+
"aria-details"
|
|
43
|
+
]);
|
|
44
|
+
const isDisabled = () => local.isDisabled ?? false;
|
|
45
|
+
const items = () => local.items ?? [];
|
|
46
|
+
const hasCollectionItems = () => local.items !== void 0;
|
|
47
|
+
const getItemKey = (item, index) => local.getKey?.(item) ?? defaultItemKey(item, index);
|
|
48
|
+
const [staticItemCount, setStaticItemCount] = createSignal(0);
|
|
49
|
+
let nextStaticIndex = 0;
|
|
50
|
+
const resetStaticItems = () => {
|
|
51
|
+
nextStaticIndex = 0;
|
|
52
|
+
setStaticItemCount(0);
|
|
53
|
+
};
|
|
54
|
+
const registerStaticItem = () => {
|
|
55
|
+
const index = nextStaticIndex;
|
|
56
|
+
nextStaticIndex += 1;
|
|
57
|
+
return index;
|
|
58
|
+
};
|
|
59
|
+
const { navProps } = createBreadcrumbs({
|
|
60
|
+
get "aria-label"() {
|
|
61
|
+
return ariaProps["aria-label"];
|
|
62
|
+
},
|
|
63
|
+
get "aria-labelledby"() {
|
|
64
|
+
return ariaProps["aria-labelledby"];
|
|
65
|
+
},
|
|
66
|
+
get "aria-describedby"() {
|
|
67
|
+
return ariaProps["aria-describedby"];
|
|
68
|
+
},
|
|
69
|
+
get isDisabled() {
|
|
70
|
+
return isDisabled();
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
const renderValues = createMemo(() => ({ isDisabled: isDisabled() }));
|
|
74
|
+
const renderProps = useRenderProps({
|
|
75
|
+
class: local.class,
|
|
76
|
+
style: local.style,
|
|
77
|
+
defaultClassName: "solidaria-Breadcrumbs"
|
|
78
|
+
}, renderValues);
|
|
79
|
+
const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
|
|
80
|
+
return createComponent(BreadcrumbsContext.Provider, {
|
|
81
|
+
get value() {
|
|
82
|
+
return {
|
|
83
|
+
isDisabled,
|
|
84
|
+
onAction: local.onAction,
|
|
85
|
+
registerStaticItem,
|
|
86
|
+
staticItemCount,
|
|
87
|
+
resetStaticItems,
|
|
88
|
+
setStaticItemCount
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
get children() {
|
|
92
|
+
var _el$ = getNextElement(_tmpl$);
|
|
93
|
+
use((element) => assignRef(local.ref, element), _el$);
|
|
94
|
+
spread(_el$, mergeProps(navProps, domProps, {
|
|
95
|
+
get ["class"]() {
|
|
96
|
+
return renderProps.class();
|
|
97
|
+
},
|
|
98
|
+
get style() {
|
|
99
|
+
return renderProps.style();
|
|
100
|
+
},
|
|
101
|
+
get ["data-disabled"]() {
|
|
102
|
+
return isDisabled() || void 0;
|
|
103
|
+
}
|
|
104
|
+
}), false, true);
|
|
105
|
+
insert(_el$, createComponent(Show, {
|
|
106
|
+
get when() {
|
|
107
|
+
return hasCollectionItems();
|
|
108
|
+
},
|
|
109
|
+
get fallback() {
|
|
110
|
+
return createComponent(StaticBreadcrumbItems, { get children() {
|
|
111
|
+
return local.children;
|
|
112
|
+
} });
|
|
113
|
+
},
|
|
114
|
+
get children() {
|
|
115
|
+
return createComponent(For, {
|
|
116
|
+
get each() {
|
|
117
|
+
return items();
|
|
118
|
+
},
|
|
119
|
+
children: (item, index) => {
|
|
120
|
+
const itemKey = getItemKey(item, index());
|
|
121
|
+
const isLast = () => index() === items().length - 1;
|
|
122
|
+
const renderItem = local.children;
|
|
123
|
+
return (() => {
|
|
124
|
+
var _el$2 = getNextElement(_tmpl$2);
|
|
125
|
+
insert(_el$2, createComponent(BreadcrumbItemContext.Provider, {
|
|
126
|
+
value: {
|
|
127
|
+
itemKey,
|
|
128
|
+
isLast
|
|
129
|
+
},
|
|
130
|
+
get children() {
|
|
131
|
+
return renderItem?.(item);
|
|
132
|
+
}
|
|
133
|
+
}));
|
|
134
|
+
return _el$2;
|
|
135
|
+
})();
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}));
|
|
140
|
+
runHydrationEvents();
|
|
141
|
+
return _el$;
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
function StaticBreadcrumbItems(props) {
|
|
146
|
+
const context = useContext(BreadcrumbsContext);
|
|
147
|
+
const staticChildren = children(() => props.children);
|
|
148
|
+
const childArray = createMemo(() => {
|
|
149
|
+
context?.resetStaticItems?.();
|
|
150
|
+
const array = staticChildren.toArray();
|
|
151
|
+
context?.setStaticItemCount?.(array.length);
|
|
152
|
+
return array;
|
|
153
|
+
});
|
|
154
|
+
return createComponent(For, {
|
|
155
|
+
get each() {
|
|
156
|
+
return childArray();
|
|
157
|
+
},
|
|
158
|
+
children: (child) => (() => {
|
|
159
|
+
var _el$3 = getNextElement(_tmpl$2);
|
|
160
|
+
insert(_el$3, child);
|
|
161
|
+
return _el$3;
|
|
162
|
+
})()
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
/**
|
|
166
|
+
* A BreadcrumbItem represents an individual breadcrumb in the navigation trail.
|
|
167
|
+
*/
|
|
168
|
+
function BreadcrumbItem(props) {
|
|
169
|
+
const [local, ariaProps] = splitProps(props, [
|
|
170
|
+
"class",
|
|
171
|
+
"style",
|
|
172
|
+
"slot",
|
|
173
|
+
"isDisabled",
|
|
174
|
+
"ref"
|
|
175
|
+
]);
|
|
176
|
+
const context = useContext(BreadcrumbsContext);
|
|
177
|
+
const itemContext = useContext(BreadcrumbItemContext);
|
|
178
|
+
const staticIndex = itemContext ? null : context?.registerStaticItem?.();
|
|
179
|
+
const isDisabled = () => local.isDisabled ?? context?.isDisabled() ?? false;
|
|
180
|
+
const isCurrent = () => ariaProps.isCurrent ?? itemContext?.isLast() ?? (staticIndex !== null && staticIndex !== void 0 && context?.staticItemCount !== void 0 && staticIndex === context.staticItemCount() - 1);
|
|
181
|
+
const itemKey = () => itemContext?.itemKey ?? ariaProps.id ?? null;
|
|
182
|
+
const elementType = () => ariaProps.elementType ?? (ariaProps.href && !isDisabled() && !isCurrent() ? "a" : "span");
|
|
183
|
+
const linkElementType = () => isCurrent() ? "a" : elementType();
|
|
184
|
+
const handlePress = (e) => {
|
|
185
|
+
ariaProps.onPress?.(e);
|
|
186
|
+
const key = itemKey();
|
|
187
|
+
if (key !== null && !isCurrent() && !isDisabled()) context?.onAction?.(key);
|
|
188
|
+
};
|
|
189
|
+
const itemAria = createBreadcrumbItem({
|
|
190
|
+
get id() {
|
|
191
|
+
return ariaProps.id;
|
|
192
|
+
},
|
|
193
|
+
get isCurrent() {
|
|
194
|
+
return isCurrent();
|
|
195
|
+
},
|
|
196
|
+
get isDisabled() {
|
|
197
|
+
return isDisabled();
|
|
198
|
+
},
|
|
199
|
+
get href() {
|
|
200
|
+
return ariaProps.href;
|
|
201
|
+
},
|
|
202
|
+
get target() {
|
|
203
|
+
return ariaProps.target;
|
|
204
|
+
},
|
|
205
|
+
get rel() {
|
|
206
|
+
return ariaProps.rel;
|
|
207
|
+
},
|
|
208
|
+
get elementType() {
|
|
209
|
+
return linkElementType();
|
|
210
|
+
},
|
|
211
|
+
get onPress() {
|
|
212
|
+
return handlePress;
|
|
213
|
+
},
|
|
214
|
+
get onPressStart() {
|
|
215
|
+
return ariaProps.onPressStart;
|
|
216
|
+
},
|
|
217
|
+
get onPressEnd() {
|
|
218
|
+
return ariaProps.onPressEnd;
|
|
219
|
+
},
|
|
220
|
+
get onClick() {
|
|
221
|
+
return ariaProps.onClick;
|
|
222
|
+
},
|
|
223
|
+
get onFocus() {
|
|
224
|
+
return ariaProps.onFocus;
|
|
225
|
+
},
|
|
226
|
+
get onBlur() {
|
|
227
|
+
return ariaProps.onBlur;
|
|
228
|
+
},
|
|
229
|
+
get onFocusChange() {
|
|
230
|
+
return ariaProps.onFocusChange;
|
|
231
|
+
},
|
|
232
|
+
get onKeyDown() {
|
|
233
|
+
return ariaProps.onKeyDown;
|
|
234
|
+
},
|
|
235
|
+
get onKeyUp() {
|
|
236
|
+
return ariaProps.onKeyUp;
|
|
237
|
+
},
|
|
238
|
+
get autoFocus() {
|
|
239
|
+
return ariaProps.autoFocus;
|
|
240
|
+
},
|
|
241
|
+
get "aria-label"() {
|
|
242
|
+
return ariaProps["aria-label"];
|
|
243
|
+
},
|
|
244
|
+
get "aria-labelledby"() {
|
|
245
|
+
return ariaProps["aria-labelledby"];
|
|
246
|
+
},
|
|
247
|
+
get "aria-describedby"() {
|
|
248
|
+
return ariaProps["aria-describedby"];
|
|
249
|
+
},
|
|
250
|
+
get "aria-details"() {
|
|
251
|
+
return ariaProps["aria-details"];
|
|
252
|
+
},
|
|
253
|
+
get "aria-current"() {
|
|
254
|
+
return ariaProps["aria-current"];
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
|
+
const isPressed = itemAria.isPressed;
|
|
258
|
+
const { isFocused, isFocusVisible, focusProps } = createFocusRing();
|
|
259
|
+
const { isHovered, hoverProps } = createHover({ get isDisabled() {
|
|
260
|
+
return isDisabled();
|
|
261
|
+
} });
|
|
262
|
+
const mergedItemProps = createMemo(() => mergeProps$2(itemAria.itemProps, focusProps, hoverProps));
|
|
263
|
+
const renderValues = createMemo(() => ({
|
|
264
|
+
isCurrent: isCurrent(),
|
|
265
|
+
isDisabled: isDisabled(),
|
|
266
|
+
isPressed: isPressed(),
|
|
267
|
+
isFocused: isFocused(),
|
|
268
|
+
isFocusVisible: isFocusVisible(),
|
|
269
|
+
isHovered: isHovered()
|
|
270
|
+
}));
|
|
271
|
+
const renderProps = useRenderProps({
|
|
272
|
+
get children() {
|
|
273
|
+
return props.children;
|
|
274
|
+
},
|
|
275
|
+
class: local.class,
|
|
276
|
+
style: local.style,
|
|
277
|
+
defaultClassName: "solidaria-BreadcrumbItem"
|
|
278
|
+
}, renderValues);
|
|
279
|
+
const mergedStyle = () => {
|
|
280
|
+
const userStyle = renderProps.style();
|
|
281
|
+
const baseStyle = {
|
|
282
|
+
display: "inline-flex",
|
|
283
|
+
"align-items": "center"
|
|
284
|
+
};
|
|
285
|
+
return userStyle ? {
|
|
286
|
+
...baseStyle,
|
|
287
|
+
...userStyle
|
|
288
|
+
} : baseStyle;
|
|
289
|
+
};
|
|
290
|
+
return createComponent(Dynamic, mergeProps({ get component() {
|
|
291
|
+
return elementType();
|
|
292
|
+
} }, mergedItemProps, {
|
|
293
|
+
ref: (element) => assignRef(local.ref, element),
|
|
294
|
+
get ["aria-current"]() {
|
|
295
|
+
return memo(() => !!isCurrent())() ? ariaProps["aria-current"] ?? "page" : void 0;
|
|
296
|
+
},
|
|
297
|
+
get ["aria-disabled"]() {
|
|
298
|
+
return isDisabled() || isCurrent() || void 0;
|
|
299
|
+
},
|
|
300
|
+
get ["class"]() {
|
|
301
|
+
return renderProps.class();
|
|
302
|
+
},
|
|
303
|
+
get style() {
|
|
304
|
+
return mergedStyle();
|
|
305
|
+
},
|
|
306
|
+
get ["data-current"]() {
|
|
307
|
+
return isCurrent() || void 0;
|
|
308
|
+
},
|
|
309
|
+
get ["data-disabled"]() {
|
|
310
|
+
return isDisabled() || void 0;
|
|
311
|
+
},
|
|
312
|
+
get ["data-pressed"]() {
|
|
313
|
+
return isPressed() || void 0;
|
|
314
|
+
},
|
|
315
|
+
get ["data-focused"]() {
|
|
316
|
+
return isFocused() || void 0;
|
|
317
|
+
},
|
|
318
|
+
get ["data-focus-visible"]() {
|
|
319
|
+
return isFocusVisible() || void 0;
|
|
320
|
+
},
|
|
321
|
+
get ["data-hovered"]() {
|
|
322
|
+
return isHovered() || void 0;
|
|
323
|
+
},
|
|
324
|
+
get children() {
|
|
325
|
+
return renderProps.renderChildren();
|
|
326
|
+
}
|
|
327
|
+
}));
|
|
328
|
+
}
|
|
329
|
+
Breadcrumbs.Item = BreadcrumbItem;
|
|
330
|
+
//#endregion
|
|
331
|
+
export { BreadcrumbItem, BreadcrumbItemContext, Breadcrumbs, BreadcrumbsContext };
|
|
332
|
+
|
|
333
|
+
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","names":["Accessor","JSX","createContext","createMemo","createSignal","children","resolveChildren","splitProps","useContext","For","Show","Dynamic","createBreadcrumbs","createBreadcrumbItem","createFocusRing","createHover","mergeProps","AriaBreadcrumbsProps","AriaBreadcrumbItemProps","PressEvent","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","RefLike","el","T","current","assignRef","ref","BreadcrumbsRenderProps","isDisabled","BreadcrumbsProps","Omit","items","getKey","item","onAction","key","Element","class","style","HTMLElement","BreadcrumbItemRenderProps","isCurrent","isPressed","isFocused","isFocusVisible","isHovered","BreadcrumbItemProps","BreadcrumbsContextValue","registerStaticItem","staticItemCount","resetStaticItems","setStaticItemCount","count","BreadcrumbsContext","BreadcrumbItemContextValue","itemKey","isLast","BreadcrumbItemContext","defaultItemKey","index","maybeItem","id","Breadcrumbs","props","local","ariaProps","rest","hasCollectionItems","undefined","getItemKey","nextStaticIndex","navProps","aria-label","aria-labelledby","aria-describedby","renderValues","renderProps","defaultClassName","domProps","Record","global","_$createComponent","Provider","value","_el$","_$getNextElement","_tmpl$","_$use","element","_$spread","_$mergeProps","data-disabled","_$insert","when","fallback","StaticBreadcrumbItems","each","length","renderItem","_el$2","_tmpl$2","_$runHydrationEvents","context","staticChildren","childArray","array","toArray","child","_el$3","BreadcrumbItem","itemContext","staticIndex","elementType","href","linkElementType","handlePress","e","onPress","itemAria","target","rel","onPressStart","onPressEnd","onClick","onFocus","onBlur","onFocusChange","onKeyDown","onKeyUp","autoFocus","aria-details","aria-current","focusProps","hoverProps","mergedItemProps","itemProps","mergedStyle","userStyle","baseStyle","display","component","_$memo","aria-disabled","data-current","data-pressed","data-focused","data-focus-visible","data-hovered","renderChildren","Item"],"sources":["../src/Breadcrumbs.tsx"],"sourcesContent":["/**\n * Breadcrumbs component for solidaria-components\n *\n * A pre-wired headless breadcrumbs component that combines aria hooks.\n * Port of react-aria-components Breadcrumbs.\n */\n\nimport {\n type Accessor,\n type JSX,\n createContext,\n createMemo,\n createSignal,\n children as resolveChildren,\n splitProps,\n useContext,\n For,\n Show,\n} from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport {\n createBreadcrumbs,\n createBreadcrumbItem,\n createFocusRing,\n createHover,\n mergeProps,\n type AriaBreadcrumbsProps,\n type AriaBreadcrumbItemProps,\n type PressEvent,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\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) {\n return;\n }\n\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface BreadcrumbsRenderProps {\n /** Whether the breadcrumbs are disabled. */\n isDisabled: boolean;\n}\n\nexport interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps, \"isDisabled\">, SlotProps {\n /** The items to render in the breadcrumbs. */\n items?: T[];\n /** Function to get the key from an item. */\n getKey?: (item: T) => string | number;\n /** Whether the breadcrumbs are disabled. */\n isDisabled?: boolean;\n /** Handler called when a breadcrumb item is activated. */\n onAction?: (key: string | number) => void;\n /** The children of the component, or a render function for collection items. */\n children?: JSX.Element | ((item: T) => JSX.Element);\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<BreadcrumbsRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<BreadcrumbsRenderProps>;\n /** Ref for the navigation element. */\n ref?: RefLike<HTMLElement>;\n}\n\nexport interface BreadcrumbItemRenderProps {\n /** Whether this is the current/last item. */\n isCurrent: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is pressed. */\n isPressed: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n /** Whether the item has visible focus ring. */\n isFocusVisible: boolean;\n /** Whether the item is hovered. */\n isHovered: boolean;\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<AriaBreadcrumbItemProps, \"isDisabled\">, SlotProps {\n /** The children of the breadcrumb item. */\n children?: RenderChildren<BreadcrumbItemRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<BreadcrumbItemRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<BreadcrumbItemRenderProps>;\n /** Whether this item is disabled. */\n isDisabled?: boolean;\n /** Ref for the breadcrumb item element. */\n ref?: RefLike<HTMLElement>;\n}\n\ninterface BreadcrumbsContextValue {\n isDisabled: Accessor<boolean>;\n onAction?: (key: string | number) => void;\n registerStaticItem?: () => number;\n staticItemCount?: Accessor<number>;\n resetStaticItems?: () => void;\n setStaticItemCount?: (count: number) => void;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContextValue | null>(null);\n\ninterface BreadcrumbItemContextValue {\n itemKey: string | number | null;\n isLast: Accessor<boolean>;\n}\n\nexport const BreadcrumbItemContext = createContext<BreadcrumbItemContextValue | null>(null);\n\nfunction defaultItemKey(item: unknown, index: number): string | number {\n const maybeItem = item as { key?: string | number; id?: string | number };\n return maybeItem.key ?? maybeItem.id ?? index;\n}\n\n/**\n * Breadcrumbs show hierarchy and navigational context for a user's location within an application.\n */\nexport function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {\n const [local, ariaProps, rest] = splitProps(\n props,\n [\"children\", \"class\", \"style\", \"slot\", \"items\", \"getKey\", \"isDisabled\", \"onAction\", \"ref\"],\n [\"aria-label\", \"aria-labelledby\", \"aria-describedby\", \"aria-details\"],\n );\n\n const isDisabled = () => local.isDisabled ?? false;\n const items = () => local.items ?? [];\n const hasCollectionItems = () => local.items !== undefined;\n const getItemKey = (item: T, index: number): string | number =>\n local.getKey?.(item) ?? defaultItemKey(item, index);\n const [staticItemCount, setStaticItemCount] = createSignal(0);\n let nextStaticIndex = 0;\n const resetStaticItems = () => {\n nextStaticIndex = 0;\n setStaticItemCount(0);\n };\n const registerStaticItem = () => {\n const index = nextStaticIndex;\n nextStaticIndex += 1;\n return index;\n };\n\n const { navProps } = createBreadcrumbs({\n get \"aria-label\"() {\n return ariaProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaProps[\"aria-labelledby\"];\n },\n get \"aria-describedby\"() {\n return ariaProps[\"aria-describedby\"];\n },\n get isDisabled() {\n return isDisabled();\n },\n });\n\n const renderValues = createMemo<BreadcrumbsRenderProps>(() => ({\n isDisabled: isDisabled(),\n }));\n\n const renderProps = useRenderProps(\n {\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-Breadcrumbs\",\n },\n renderValues,\n );\n\n const domProps = createMemo(() =>\n filterDOMProps(rest as Record<string, unknown>, { global: true }),\n );\n return (\n <BreadcrumbsContext.Provider\n value={{\n isDisabled,\n onAction: local.onAction,\n registerStaticItem,\n staticItemCount,\n resetStaticItems,\n setStaticItemCount,\n }}\n >\n {/*\n Faithful to react-aria-components Breadcrumbs: the accessible name (navProps'\n aria-label) sits directly on the <ol> (role=\"list\"), with NO wrapping <nav>\n landmark (react-spectrum/packages/react-aria-components/src/Breadcrumbs.tsx\n renders `<dom.ol {...mergeProps(DOMProps, navProps)} style={props.style}>`).\n The <ol> carries ONLY the consumer's class/style — no hard-coded inline\n layout reset. An inline reset would beat the styled layer's class (inline\n wins over class), which is exactly what broke S2 parity: the solid-spectrum\n `wrapperStyles` class supplies display:flex / list-style:none / padding:0 /\n marginStart and deliberately leaves align-items at its `normal` default, so\n a hard-coded inline `align-items:center` + `margin:0` clobbered the\n wrapper's margin and diverged from S2 (whose <ol> has neither).\n */}\n <ol\n {...navProps}\n {...domProps()}\n ref={(element) => assignRef(local.ref, element)}\n class={renderProps.class()}\n style={renderProps.style()}\n data-disabled={isDisabled() || undefined}\n >\n <Show\n when={hasCollectionItems()}\n fallback={\n <StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>\n }\n >\n <For each={items()}>\n {(item, index) => {\n const itemKey = getItemKey(item, index());\n const isLast = () => index() === items().length - 1;\n const renderItem = local.children as ((item: T) => JSX.Element) | undefined;\n\n return (\n <li style={{ display: \"flex\", \"align-items\": \"center\" }}>\n <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>\n {renderItem?.(item)}\n </BreadcrumbItemContext.Provider>\n </li>\n );\n }}\n </For>\n </Show>\n </ol>\n </BreadcrumbsContext.Provider>\n );\n}\n\nfunction StaticBreadcrumbItems(props: { children?: JSX.Element }): JSX.Element {\n const context = useContext(BreadcrumbsContext);\n const staticChildren = resolveChildren(() => props.children);\n const childArray = createMemo(() => {\n context?.resetStaticItems?.();\n const array = staticChildren.toArray();\n context?.setStaticItemCount?.(array.length);\n return array;\n });\n\n return (\n <For each={childArray()}>\n {(child) => <li style={{ display: \"flex\", \"align-items\": \"center\" }}>{child}</li>}\n </For>\n );\n}\n\n/**\n * A BreadcrumbItem represents an individual breadcrumb in the navigation trail.\n */\nexport function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {\n const [local, ariaProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"isDisabled\", \"ref\"]);\n\n const context = useContext(BreadcrumbsContext);\n const itemContext = useContext(BreadcrumbItemContext);\n const staticIndex = itemContext ? null : context?.registerStaticItem?.();\n const isDisabled = () => local.isDisabled ?? context?.isDisabled() ?? false;\n const isCurrent = () =>\n ariaProps.isCurrent ??\n itemContext?.isLast() ??\n (staticIndex !== null &&\n staticIndex !== undefined &&\n context?.staticItemCount !== undefined &&\n staticIndex === context.staticItemCount() - 1);\n const itemKey = () => itemContext?.itemKey ?? ariaProps.id ?? null;\n\n // Mirror react-aria-components' Link: render an <a> only when there is an\n // href on an enabled, non-current item; otherwise fall back to a <span\n // role=\"link\"> (via createLink). A styled layer may force the element type\n // (S2 renders the current item as a plain <div>), which takes precedence.\n const elementType = () =>\n ariaProps.elementType ?? (ariaProps.href && !isDisabled() && !isCurrent() ? \"a\" : \"span\");\n // The current breadcrumb is the current page and is non-interactive: S2\n // renders it as a plain element with no link role. createLink only omits\n // role=\"link\" for an <a>, so treat the current item as an \"a\" purely for the\n // role decision while still rendering the resolved element type above.\n const linkElementType = () => (isCurrent() ? \"a\" : elementType());\n\n const handlePress = (e: PressEvent) => {\n ariaProps.onPress?.(e);\n const key = itemKey();\n if (key !== null && !isCurrent() && !isDisabled()) {\n context?.onAction?.(key);\n }\n };\n\n const itemAria = createBreadcrumbItem({\n get id() {\n return ariaProps.id;\n },\n get isCurrent() {\n return isCurrent();\n },\n get isDisabled() {\n return isDisabled();\n },\n get href() {\n return ariaProps.href;\n },\n get target() {\n return ariaProps.target;\n },\n get rel() {\n return ariaProps.rel;\n },\n get elementType() {\n return linkElementType();\n },\n get onPress() {\n return handlePress;\n },\n get onPressStart() {\n return ariaProps.onPressStart;\n },\n get onPressEnd() {\n return ariaProps.onPressEnd;\n },\n get onClick() {\n return ariaProps.onClick;\n },\n get onFocus() {\n return ariaProps.onFocus;\n },\n get onBlur() {\n return ariaProps.onBlur;\n },\n get onFocusChange() {\n return ariaProps.onFocusChange;\n },\n get onKeyDown() {\n return ariaProps.onKeyDown;\n },\n get onKeyUp() {\n return ariaProps.onKeyUp;\n },\n get autoFocus() {\n return ariaProps.autoFocus;\n },\n get \"aria-label\"() {\n return ariaProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaProps[\"aria-labelledby\"];\n },\n get \"aria-describedby\"() {\n return ariaProps[\"aria-describedby\"];\n },\n get \"aria-details\"() {\n return ariaProps[\"aria-details\"];\n },\n get \"aria-current\"() {\n return ariaProps[\"aria-current\"];\n },\n });\n\n const isPressed = itemAria.isPressed;\n const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n const { isHovered, hoverProps } = createHover({\n get isDisabled() {\n return isDisabled();\n },\n });\n // Read itemAria.itemProps fresh inside the memo (do NOT destructure it above):\n // the reactive getter re-runs createBreadcrumbItem → createLink each time this\n // memo re-evaluates, so role/tabIndex track elementType once isCurrent settles.\n const mergedItemProps = createMemo(() =>\n mergeProps(\n itemAria.itemProps as Record<string, unknown>,\n focusProps as Record<string, unknown>,\n hoverProps as Record<string, unknown>,\n ),\n );\n\n const renderValues = createMemo<BreadcrumbItemRenderProps>(() => ({\n isCurrent: isCurrent(),\n isDisabled: isDisabled(),\n isPressed: isPressed(),\n isFocused: isFocused(),\n isFocusVisible: isFocusVisible(),\n isHovered: isHovered(),\n }));\n\n const renderProps = useRenderProps(\n {\n get children() {\n return props.children;\n },\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-BreadcrumbItem\",\n },\n renderValues,\n );\n\n const mergedStyle = () => {\n const userStyle = renderProps.style();\n const baseStyle = { display: \"inline-flex\", \"align-items\": \"center\" };\n return userStyle ? { ...baseStyle, ...userStyle } : baseStyle;\n };\n\n return (\n <Dynamic\n component={elementType()}\n {...mergedItemProps()}\n ref={(element: HTMLElement) => assignRef(local.ref, element)}\n aria-current={isCurrent() ? (ariaProps[\"aria-current\"] ?? \"page\") : undefined}\n aria-disabled={isDisabled() || isCurrent() || undefined}\n class={renderProps.class()}\n style={mergedStyle()}\n data-current={isCurrent() || undefined}\n data-disabled={isDisabled() || undefined}\n data-pressed={isPressed() || undefined}\n data-focused={isFocused() || undefined}\n data-focus-visible={isFocusVisible() || undefined}\n data-hovered={isHovered() || undefined}\n >\n {renderProps.renderChildren()}\n </Dynamic>\n );\n}\n\nBreadcrumbs.Item = BreadcrumbItem;\n"],"mappings":"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"}
|