@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -272
- package/dist/ActionBar.d.ts +21 -13
- package/dist/ActionBar.d.ts.map +1 -1
- package/dist/ActionGroup.d.ts +8 -8
- package/dist/ActionGroup.d.ts.map +1 -1
- package/dist/Alert.d.ts +5 -5
- package/dist/Alert.d.ts.map +1 -1
- package/dist/Autocomplete.d.ts +5 -5
- package/dist/Autocomplete.d.ts.map +1 -1
- package/dist/Breadcrumbs.d.ts +18 -7
- package/dist/Breadcrumbs.d.ts.map +1 -1
- package/dist/Button.d.ts +24 -5
- package/dist/Button.d.ts.map +1 -1
- package/dist/Calendar.d.ts +38 -7
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/Checkbox.d.ts +32 -7
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/Collection.d.ts +19 -14
- package/dist/Collection.d.ts.map +1 -1
- package/dist/Color.d.ts +103 -14
- package/dist/Color.d.ts.map +1 -1
- package/dist/ColorEditor.d.ts +6 -6
- package/dist/ColorEditor.d.ts.map +1 -1
- package/dist/ComboBox.d.ts +85 -19
- package/dist/ComboBox.d.ts.map +1 -1
- package/dist/ContextualHelpTrigger.d.ts +2 -2
- package/dist/ContextualHelpTrigger.d.ts.map +1 -1
- package/dist/DateField.d.ts +8 -6
- package/dist/DateField.d.ts.map +1 -1
- package/dist/DatePicker.d.ts +53 -22
- package/dist/DatePicker.d.ts.map +1 -1
- package/dist/DateRangePickerContext.d.ts +30 -0
- package/dist/DateRangePickerContext.d.ts.map +1 -0
- package/dist/Dialog.d.ts +5 -5
- package/dist/Dialog.d.ts.map +1 -1
- package/dist/Disclosure.d.ts +23 -5
- package/dist/Disclosure.d.ts.map +1 -1
- package/dist/DragAndDrop.d.ts +6 -6
- package/dist/DragAndDrop.d.ts.map +1 -1
- package/dist/DragPreview.d.ts +2 -2
- package/dist/DragPreview.d.ts.map +1 -1
- package/dist/DropZone.d.ts +4 -4
- package/dist/DropZone.d.ts.map +1 -1
- package/dist/FieldError.d.ts +9 -5
- package/dist/FieldError.d.ts.map +1 -1
- package/dist/FileTrigger.d.ts +3 -3
- package/dist/FileTrigger.d.ts.map +1 -1
- package/dist/Focusable.d.ts +2 -2
- package/dist/Focusable.d.ts.map +1 -1
- package/dist/Form.d.ts +18 -4
- package/dist/Form.d.ts.map +1 -1
- package/dist/GridList.d.ts +32 -12
- package/dist/GridList.d.ts.map +1 -1
- package/dist/HiddenDateInput.d.ts +26 -0
- package/dist/HiddenDateInput.d.ts.map +1 -0
- package/dist/HiddenTimeInput.d.ts +25 -0
- package/dist/HiddenTimeInput.d.ts.map +1 -0
- package/dist/Icon.d.ts +5 -5
- package/dist/Icon.d.ts.map +1 -1
- package/dist/Keyboard.d.ts +1 -1
- package/dist/Landmark.d.ts +3 -3
- package/dist/Landmark.d.ts.map +1 -1
- package/dist/Link.d.ts +10 -4
- package/dist/Link.d.ts.map +1 -1
- package/dist/ListBox.d.ts +32 -12
- package/dist/ListBox.d.ts.map +1 -1
- package/dist/ListDropTargetDelegate.d.ts +6 -6
- package/dist/ListDropTargetDelegate.d.ts.map +1 -1
- package/dist/Menu.d.ts +65 -14
- package/dist/Menu.d.ts.map +1 -1
- package/dist/Meter.d.ts +3 -3
- package/dist/Meter.d.ts.map +1 -1
- package/dist/Modal.d.ts +5 -5
- package/dist/Modal.d.ts.map +1 -1
- package/dist/NumberField.d.ts +8 -12
- package/dist/NumberField.d.ts.map +1 -1
- package/dist/Popover.d.ts +28 -5
- package/dist/Popover.d.ts.map +1 -1
- package/dist/Pressable.d.ts +2 -2
- package/dist/Pressable.d.ts.map +1 -1
- package/dist/ProgressBar.d.ts +5 -3
- package/dist/ProgressBar.d.ts.map +1 -1
- package/dist/RadioGroup.d.ts +43 -9
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/RangeCalendar.d.ts +34 -7
- package/dist/RangeCalendar.d.ts.map +1 -1
- package/dist/RouterProvider.d.ts +2 -2
- package/dist/RouterProvider.d.ts.map +1 -1
- package/dist/SearchField.d.ts +23 -20
- package/dist/SearchField.d.ts.map +1 -1
- package/dist/Select.d.ts +41 -11
- package/dist/Select.d.ts.map +1 -1
- package/dist/SelectionIndicator.d.ts +3 -3
- package/dist/SelectionIndicator.d.ts.map +1 -1
- package/dist/Separator.d.ts +9 -3
- package/dist/Separator.d.ts.map +1 -1
- package/dist/SharedElementTransition.d.ts +6 -4
- package/dist/SharedElementTransition.d.ts.map +1 -1
- package/dist/Slider.d.ts +12 -8
- package/dist/Slider.d.ts.map +1 -1
- package/dist/StepList.d.ts +90 -0
- package/dist/StepList.d.ts.map +1 -0
- package/dist/Switch.d.ts +11 -5
- package/dist/Switch.d.ts.map +1 -1
- package/dist/Table.d.ts +187 -23
- package/dist/Table.d.ts.map +1 -1
- package/dist/Tabs.d.ts +45 -9
- package/dist/Tabs.d.ts.map +1 -1
- package/dist/TagGroup.d.ts +12 -10
- package/dist/TagGroup.d.ts.map +1 -1
- package/dist/Text.d.ts +2 -2
- package/dist/TextField.d.ts +15 -11
- package/dist/TextField.d.ts.map +1 -1
- package/dist/TimeField.d.ts +6 -6
- package/dist/TimeField.d.ts.map +1 -1
- package/dist/Toast.d.ts +29 -14
- package/dist/Toast.d.ts.map +1 -1
- package/dist/ToggleButton.d.ts +11 -5
- package/dist/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButtonGroup.d.ts +7 -7
- package/dist/ToggleButtonGroup.d.ts.map +1 -1
- package/dist/Toolbar.d.ts +7 -3
- package/dist/Toolbar.d.ts.map +1 -1
- package/dist/Tooltip.d.ts +50 -8
- package/dist/Tooltip.d.ts.map +1 -1
- package/dist/Tree.d.ts +66 -17
- package/dist/Tree.d.ts.map +1 -1
- package/dist/Virtualizer.d.ts +12 -12
- package/dist/Virtualizer.d.ts.map +1 -1
- package/dist/VirtualizerLayouts.d.ts +2 -2
- package/dist/VirtualizerLayouts.d.ts.map +1 -1
- package/dist/VisuallyHidden.d.ts +1 -1
- package/dist/VisuallyHidden.d.ts.map +1 -1
- package/dist/contexts.d.ts +5 -1
- package/dist/contexts.d.ts.map +1 -1
- package/dist/index.d.ts +73 -71
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +23247 -18564
- package/dist/index.js.map +1 -1
- package/dist/index.jsx +18110 -0
- package/dist/index.jsx.map +1 -0
- package/dist/useDragAndDrop.d.ts +13 -13
- package/dist/useDragAndDrop.d.ts.map +1 -1
- package/dist/utils.d.ts +2 -2
- package/dist/utils.d.ts.map +1 -1
- package/dist/virtualizer/Layout.d.ts +1 -1
- package/dist/virtualizer/Layout.d.ts.map +1 -1
- package/package.json +31 -32
- package/src/ActionBar.tsx +75 -72
- package/src/ActionGroup.tsx +53 -61
- package/src/Alert.tsx +17 -42
- package/src/Autocomplete.tsx +39 -44
- package/src/Breadcrumbs.tsx +149 -80
- package/src/Button.tsx +267 -70
- package/src/Calendar.tsx +218 -138
- package/src/Checkbox.tsx +413 -121
- package/src/Collection.tsx +67 -58
- package/src/Color.tsx +803 -380
- package/src/ColorEditor.tsx +131 -149
- package/src/ComboBox.tsx +414 -249
- package/src/ContextualHelpTrigger.tsx +86 -74
- package/src/DateField.tsx +185 -91
- package/src/DatePicker.tsx +524 -213
- package/src/DateRangePickerContext.tsx +44 -0
- package/src/Dialog.tsx +156 -118
- package/src/Disclosure.tsx +127 -80
- package/src/DragAndDrop.tsx +60 -54
- package/src/DragPreview.tsx +13 -11
- package/src/DropZone.tsx +42 -22
- package/src/FieldError.tsx +45 -23
- package/src/FileTrigger.tsx +19 -19
- package/src/Focusable.tsx +21 -24
- package/src/Form.tsx +71 -16
- package/src/GridList.tsx +273 -197
- package/src/HiddenDateInput.tsx +153 -0
- package/src/HiddenTimeInput.tsx +133 -0
- package/src/Icon.tsx +22 -43
- package/src/Keyboard.tsx +3 -3
- package/src/Landmark.tsx +37 -63
- package/src/Link.tsx +125 -75
- package/src/ListBox.tsx +332 -233
- package/src/ListDropTargetDelegate.ts +81 -80
- package/src/Menu.tsx +1023 -274
- package/src/Meter.tsx +38 -56
- package/src/Modal.tsx +243 -175
- package/src/NumberField.tsx +139 -143
- package/src/Popover.tsx +386 -233
- package/src/Pressable.tsx +21 -21
- package/src/ProgressBar.tsx +48 -57
- package/src/RadioGroup.tsx +524 -122
- package/src/RangeCalendar.tsx +157 -90
- package/src/RouterProvider.tsx +30 -47
- package/src/SearchField.tsx +362 -143
- package/src/Select.tsx +656 -233
- package/src/SelectionIndicator.tsx +18 -15
- package/src/Separator.tsx +47 -49
- package/src/SharedElementTransition.tsx +103 -97
- package/src/Slider.tsx +138 -98
- package/src/StepList.tsx +272 -0
- package/src/Switch.tsx +93 -46
- package/src/Table.tsx +1308 -342
- package/src/Tabs.tsx +324 -103
- package/src/TagGroup.tsx +139 -126
- package/src/Text.tsx +3 -3
- package/src/TextField.tsx +389 -79
- package/src/TimeField.tsx +136 -76
- package/src/Toast.tsx +209 -157
- package/src/ToggleButton.tsx +47 -37
- package/src/ToggleButtonGroup.tsx +39 -34
- package/src/Toolbar.tsx +54 -69
- package/src/Tooltip.tsx +387 -119
- package/src/Tree.tsx +651 -368
- package/src/Virtualizer.tsx +208 -180
- package/src/VirtualizerLayouts.ts +45 -30
- package/src/VisuallyHidden.tsx +19 -19
- package/src/contexts.ts +29 -37
- package/src/index.ts +110 -195
- package/src/useDragAndDrop.ts +87 -71
- package/src/utils.tsx +40 -55
- package/src/virtualizer/Layout.ts +14 -22
- package/dist/index.ssr.js +0 -16996
- package/dist/index.ssr.js.map +0 -1
package/dist/useDragAndDrop.d.ts
CHANGED
|
@@ -4,26 +4,26 @@
|
|
|
4
4
|
* Mirrors RAC's `useDragAndDrop` shape while delegating to Solid
|
|
5
5
|
* state and aria primitives.
|
|
6
6
|
*/
|
|
7
|
-
import type { Accessor, JSX } from
|
|
8
|
-
import { DragPreview } from
|
|
9
|
-
import { ListDropTargetDelegate } from
|
|
10
|
-
import { type DraggableCollectionOptions, type DraggableCollectionAria, type DraggableItemOptions, type DraggableItemAria, type DroppableCollectionOptions, type DroppableCollectionAria, type DroppableItemOptions, type DroppableItemAria, type DropTargetDelegate as AriaDropTargetDelegate } from
|
|
11
|
-
import { type DragItem, type DragPreviewRenderer, type DraggableCollectionProps, type DraggableCollectionState, type DraggableCollectionStateOptions, type DropTarget, type DroppableCollectionProps, type DroppableCollectionState, type DroppableCollectionStateOptions } from
|
|
12
|
-
interface DraggableCollectionStateOpts<T = object> extends Omit<DraggableCollectionStateOptions<T>,
|
|
7
|
+
import type { Accessor, JSX } from "solid-js";
|
|
8
|
+
import { DragPreview } from "./DragPreview";
|
|
9
|
+
import { ListDropTargetDelegate } from "./ListDropTargetDelegate";
|
|
10
|
+
import { type DraggableCollectionOptions, type DraggableCollectionAria, type DraggableItemOptions, type DraggableItemAria, type DroppableCollectionOptions, type DroppableCollectionAria, type DroppableItemOptions, type DroppableItemAria, type DropTargetDelegate as AriaDropTargetDelegate } from "@proyecto-viviana/solidaria";
|
|
11
|
+
import { type DragItem, type DragPreviewRenderer, type DraggableCollectionProps, type DraggableCollectionState, type DraggableCollectionStateOptions, type DropTarget, type DroppableCollectionProps, type DroppableCollectionState, type DroppableCollectionStateOptions } from "@proyecto-viviana/solid-stately";
|
|
12
|
+
interface DraggableCollectionStateOpts<T = object> extends Omit<DraggableCollectionStateOptions<T>, "getItems"> {
|
|
13
13
|
items?: T[];
|
|
14
14
|
}
|
|
15
15
|
interface DragHooks<T = object> {
|
|
16
16
|
useDraggableCollectionState?: (props: DraggableCollectionStateOpts<T>) => DraggableCollectionState;
|
|
17
|
-
useDraggableCollection?: (props: Omit<DraggableCollectionOptions,
|
|
17
|
+
useDraggableCollection?: (props: Omit<DraggableCollectionOptions, "ref">, state: DraggableCollectionState, ref: Accessor<HTMLElement | null>) => DraggableCollectionAria;
|
|
18
18
|
useDraggableItem?: (props: DraggableItemOptions, state: DraggableCollectionState) => DraggableItemAria;
|
|
19
19
|
DragPreview?: typeof DragPreview;
|
|
20
|
-
renderDragPreview?: DragAndDropOptions<T>[
|
|
20
|
+
renderDragPreview?: DragAndDropOptions<T>["renderDragPreview"];
|
|
21
21
|
isVirtualDragging?: () => boolean;
|
|
22
22
|
}
|
|
23
23
|
interface DropHooks {
|
|
24
24
|
useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState;
|
|
25
|
-
useDroppableCollection?: (props: Omit<DroppableCollectionOptions,
|
|
26
|
-
useDroppableItem?: (options: Omit<DroppableItemOptions,
|
|
25
|
+
useDroppableCollection?: (props: Omit<DroppableCollectionOptions, "ref">, state: DroppableCollectionState, ref: Accessor<HTMLElement | null>) => DroppableCollectionAria;
|
|
26
|
+
useDroppableItem?: (options: Omit<DroppableItemOptions, "ref">, state: DroppableCollectionState, ref: Accessor<HTMLElement | null>) => DroppableItemAria;
|
|
27
27
|
useDropIndicator?: (props: {
|
|
28
28
|
target: DropTarget;
|
|
29
29
|
}, state: DroppableCollectionState, ref: Accessor<HTMLElement | null>) => {
|
|
@@ -40,15 +40,15 @@ export interface DragAndDrop<T = object> {
|
|
|
40
40
|
/** Drag and drop hooks for the collection element. */
|
|
41
41
|
dragAndDropHooks: DragAndDropHooks<T>;
|
|
42
42
|
}
|
|
43
|
-
export interface DragAndDropOptions<T = object> extends Partial<Omit<DraggableCollectionProps<T>,
|
|
43
|
+
export interface DragAndDropOptions<T = object> extends Partial<Omit<DraggableCollectionProps<T>, "preview">>, Partial<DroppableCollectionProps> {
|
|
44
44
|
/**
|
|
45
45
|
* Optional keyboard delegate forwarded to the collection droppable hook.
|
|
46
46
|
*/
|
|
47
|
-
keyboardDelegate?: DroppableCollectionOptions[
|
|
47
|
+
keyboardDelegate?: DroppableCollectionOptions["keyboardDelegate"];
|
|
48
48
|
/**
|
|
49
49
|
* Optional keydown handler composed with collection droppable keyboard behavior.
|
|
50
50
|
*/
|
|
51
|
-
onKeyDown?: DroppableCollectionOptions[
|
|
51
|
+
onKeyDown?: DroppableCollectionOptions["onKeyDown"];
|
|
52
52
|
/**
|
|
53
53
|
* A function that returns the items being dragged.
|
|
54
54
|
* If omitted, draggable hooks are not added.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDragAndDrop.d.ts","sourceRoot":"","sources":["../src/useDragAndDrop.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAOL,KAAK,0BAA0B,EAC/B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,EAC/B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,IAAI,sBAAsB,EAClD,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACpC,KAAK,UAAU,EACf,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,iCAAiC,CAAC;AAEzC,UAAU,4BAA4B,CAAC,CAAC,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"useDragAndDrop.d.ts","sourceRoot":"","sources":["../src/useDragAndDrop.ts"],"names":[],"mappings":"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"}
|
package/dist/utils.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Utility functions for solidaria-components
|
|
3
3
|
* Port of react-aria-components/src/utils.tsx
|
|
4
4
|
*/
|
|
5
|
-
import { type JSX, type Accessor, type FlowComponent, type ParentComponent, createContext } from
|
|
5
|
+
import { type JSX, type Accessor, type FlowComponent, type ParentComponent, createContext } from "solid-js";
|
|
6
6
|
/**
|
|
7
7
|
* Render props pattern - children can be a function that receives state
|
|
8
8
|
*/
|
|
@@ -90,7 +90,7 @@ export declare const Provider: ParentComponent<{
|
|
|
90
90
|
/**
|
|
91
91
|
* Converts boolean state values to data attributes
|
|
92
92
|
*/
|
|
93
|
-
export declare function dataAttr(value: boolean | undefined):
|
|
93
|
+
export declare function dataAttr(value: boolean | undefined): "" | undefined;
|
|
94
94
|
/**
|
|
95
95
|
* Creates data attributes from render props
|
|
96
96
|
*/
|
package/dist/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,KAAK,GAAG,EACR,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,aAAa,EAMd,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,KAAK,GAAG,EACR,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,aAAa,EAMd,MAAM,UAAU,CAAC;AAGlB;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,GAAG,CAAC,aAAa,CAAC,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,yGAAyG;IACzG,KAAK,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAC/B,wGAAwG;IACxG,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,gDAAgD;IAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxB,gDAAgD;IAChD,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC/C;;;;;;;;;OASG;IACH,cAAc,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAClC,mFAAmF;IACnF,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IACxC,uCAAuC;IACvC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,EACzD,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAClB,iBAAiB,CAAC,CAAC,CAAC,CAiCtB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EACjD,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACpC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,GACvC,eAAe,CAAC,CAAC,CAAC,CAQpB;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEvC;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,0CAErC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,OAAO,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAClD,CAAC,GAAG,IAAI,CAEV;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAS,MAAM,EAAE,IAAI,EACzD,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,IAAI,EACT,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GACtC,CAAC,MAAM,EAAE,IAAI,CAAC,CAGhB;AAED,eAAO,MAAM,QAAQ,EAAE,eAAe,CAAC;IACrC,MAAM,EAAE,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;CACrE,CAEA,CAAC;AAEF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,EAAE,GAAG,SAAS,CAEnE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,EACzF,MAAM,EAAE,CAAC,GACR,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAYpC;AAMD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAUnF;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvE,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAO,GACjC,CAAC,CAqCH;AAED,MAAM,WAAW,eAAe;IAC9B,gDAAgD;IAChD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,eAAe,CAmBrD,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,IAAI,QAAQ,CAAC,OAAO,CAAC,CAiBjD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/virtualizer/Layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,OAAO;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,CAAC;CACnB;AAED,qBAAa,KAAK;
|
|
1
|
+
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/virtualizer/Layout.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,55 +1,54 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proyecto-viviana/solidaria-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Pre-wired headless components for SolidJS - port of react-aria-components",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"accessibility",
|
|
7
|
+
"aria",
|
|
8
|
+
"components",
|
|
9
|
+
"headless",
|
|
10
|
+
"solid",
|
|
11
|
+
"solidjs"
|
|
12
|
+
],
|
|
13
|
+
"license": "MIT",
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "git+https://github.com/proyecto-viviana/ui.git",
|
|
17
|
+
"directory": "packages/solidaria-components"
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"src"
|
|
22
|
+
],
|
|
5
23
|
"type": "module",
|
|
24
|
+
"sideEffects": false,
|
|
6
25
|
"main": "./dist/index.js",
|
|
7
26
|
"module": "./dist/index.js",
|
|
8
27
|
"types": "./dist/index.d.ts",
|
|
9
28
|
"exports": {
|
|
10
29
|
".": {
|
|
11
30
|
"types": "./dist/index.d.ts",
|
|
12
|
-
"solid": "./
|
|
31
|
+
"solid": "./dist/index.jsx",
|
|
13
32
|
"import": "./dist/index.js",
|
|
14
33
|
"default": "./dist/index.js"
|
|
15
34
|
}
|
|
16
35
|
},
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"src"
|
|
20
|
-
],
|
|
21
|
-
"sideEffects": false,
|
|
22
|
-
"scripts": {
|
|
23
|
-
"build": "tsup && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
|
|
24
|
-
"dev": "tsup --watch",
|
|
25
|
-
"prepublishOnly": "echo 'Use the root Changesets npm release workflow'"
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
26
38
|
},
|
|
27
39
|
"dependencies": {
|
|
28
40
|
"@internationalized/date": "^3.8.0",
|
|
29
|
-
"@proyecto-viviana/solidaria": "
|
|
30
|
-
"@proyecto-viviana/solid-stately": "
|
|
31
|
-
},
|
|
32
|
-
"peerDependencies": {
|
|
33
|
-
"solid-js": "^1.9.0"
|
|
41
|
+
"@proyecto-viviana/solidaria": "0.3.0",
|
|
42
|
+
"@proyecto-viviana/solid-stately": "0.3.0"
|
|
34
43
|
},
|
|
35
44
|
"devDependencies": {
|
|
36
45
|
"solid-js": "^1.9.11"
|
|
37
46
|
},
|
|
38
|
-
"
|
|
39
|
-
"solid"
|
|
40
|
-
"solidjs",
|
|
41
|
-
"accessibility",
|
|
42
|
-
"aria",
|
|
43
|
-
"headless",
|
|
44
|
-
"components"
|
|
45
|
-
],
|
|
46
|
-
"license": "MIT",
|
|
47
|
-
"repository": {
|
|
48
|
-
"type": "git",
|
|
49
|
-
"url": "git+https://github.com/proyecto-viviana/proyecto-viviana.git",
|
|
50
|
-
"directory": "packages/solidaria-components"
|
|
47
|
+
"peerDependencies": {
|
|
48
|
+
"solid-js": "^1.9.0"
|
|
51
49
|
},
|
|
52
|
-
"
|
|
53
|
-
"
|
|
50
|
+
"scripts": {
|
|
51
|
+
"build": "rm -rf dist && tsdown && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
|
|
52
|
+
"dev": "tsup --watch"
|
|
54
53
|
}
|
|
55
|
-
}
|
|
54
|
+
}
|
package/src/ActionBar.tsx
CHANGED
|
@@ -17,33 +17,43 @@ import {
|
|
|
17
17
|
createEffect,
|
|
18
18
|
splitProps,
|
|
19
19
|
useContext,
|
|
20
|
-
} from
|
|
21
|
-
import { announce, createToolbar } from
|
|
22
|
-
import type { Key } from
|
|
20
|
+
} from "solid-js";
|
|
21
|
+
import { announce, createToolbar } from "@proyecto-viviana/solidaria";
|
|
22
|
+
import type { Key } from "@proyecto-viviana/solid-stately";
|
|
23
23
|
import {
|
|
24
24
|
type ClassNameOrFunction,
|
|
25
25
|
type StyleOrFunction,
|
|
26
26
|
type SlotProps,
|
|
27
27
|
useRenderProps,
|
|
28
28
|
filterDOMProps,
|
|
29
|
-
} from
|
|
29
|
+
} from "./utils";
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
|
|
32
|
+
|
|
33
|
+
function assignRef<T>(ref: RefLike<T>, el: T): void {
|
|
34
|
+
if (!ref) return;
|
|
35
|
+
if (typeof ref === "function") {
|
|
36
|
+
ref(el);
|
|
37
|
+
} else {
|
|
38
|
+
ref.current = el;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
34
41
|
|
|
35
42
|
export interface ActionBarRenderProps {
|
|
36
43
|
/** Whether the action bar is visible. */
|
|
37
44
|
isOpen: boolean;
|
|
38
45
|
/** The number of selected items. */
|
|
39
|
-
selectedItemCount: number |
|
|
46
|
+
selectedItemCount: number | "all";
|
|
40
47
|
}
|
|
41
48
|
|
|
42
|
-
export interface ActionBarProps
|
|
43
|
-
|
|
44
|
-
|
|
49
|
+
export interface ActionBarProps
|
|
50
|
+
extends
|
|
51
|
+
Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children" | "ref" | "slot">,
|
|
52
|
+
SlotProps {
|
|
53
|
+
/** The number of selected items. ActionBar is hidden when 0. @default 0 */
|
|
54
|
+
selectedItemCount?: number | "all";
|
|
45
55
|
/** Callback when the clear button is pressed. */
|
|
46
|
-
onClearSelection
|
|
56
|
+
onClearSelection?: () => void;
|
|
47
57
|
/** Callback when an action is triggered. */
|
|
48
58
|
onAction?: (key: Key) => void;
|
|
49
59
|
/** The action buttons to display. */
|
|
@@ -53,20 +63,20 @@ export interface ActionBarProps extends SlotProps {
|
|
|
53
63
|
/** Inline style for the container. */
|
|
54
64
|
style?: StyleOrFunction<ActionBarRenderProps>;
|
|
55
65
|
/** Accessible label for the action bar. @default 'Actions' */
|
|
56
|
-
|
|
66
|
+
"aria-label"?: string;
|
|
57
67
|
/** Identifies the element (or elements) that labels the action bar. */
|
|
58
|
-
|
|
68
|
+
"aria-labelledby"?: string;
|
|
59
69
|
/** Optional keydown handler on the action bar element. */
|
|
60
70
|
onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;
|
|
71
|
+
/** Screen reader announcement when the action bar becomes available. */
|
|
72
|
+
actionsAvailableMessage?: string;
|
|
73
|
+
/** Ref for the underlying action bar element. */
|
|
74
|
+
ref?: RefLike<HTMLDivElement>;
|
|
61
75
|
}
|
|
62
76
|
|
|
63
|
-
// ============================================
|
|
64
|
-
// CONTEXT
|
|
65
|
-
// ============================================
|
|
66
|
-
|
|
67
77
|
export interface ActionBarContextValue {
|
|
68
|
-
selectedItemCount: () => number |
|
|
69
|
-
onClearSelection
|
|
78
|
+
selectedItemCount: () => number | "all";
|
|
79
|
+
onClearSelection?: () => void;
|
|
70
80
|
onAction?: (key: Key) => void;
|
|
71
81
|
}
|
|
72
82
|
|
|
@@ -76,58 +86,60 @@ export function useActionBarContext(): ActionBarContextValue | null {
|
|
|
76
86
|
return useContext(ActionBarContext);
|
|
77
87
|
}
|
|
78
88
|
|
|
79
|
-
// ============================================
|
|
80
|
-
// ACTIONBAR COMPONENT
|
|
81
|
-
// ============================================
|
|
82
|
-
|
|
83
89
|
export function ActionBar(props: ActionBarProps): JSX.Element {
|
|
84
90
|
const [local, domProps] = splitProps(props, [
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
91
|
+
"selectedItemCount",
|
|
92
|
+
"onClearSelection",
|
|
93
|
+
"onAction",
|
|
94
|
+
"children",
|
|
95
|
+
"class",
|
|
96
|
+
"style",
|
|
97
|
+
"slot",
|
|
98
|
+
"aria-label",
|
|
99
|
+
"aria-labelledby",
|
|
100
|
+
"onKeyDown",
|
|
101
|
+
"actionsAvailableMessage",
|
|
102
|
+
"ref",
|
|
95
103
|
]);
|
|
96
104
|
|
|
97
|
-
const
|
|
105
|
+
const selectedItemCount = () => local.selectedItemCount ?? 0;
|
|
106
|
+
const isOpen = () => selectedItemCount() !== 0;
|
|
98
107
|
|
|
99
108
|
const { toolbarProps } = createToolbar({
|
|
100
|
-
orientation:
|
|
101
|
-
get
|
|
102
|
-
return local[
|
|
109
|
+
orientation: "horizontal",
|
|
110
|
+
get "aria-label"() {
|
|
111
|
+
return local["aria-label"] ?? (local["aria-labelledby"] ? undefined : "Actions");
|
|
103
112
|
},
|
|
104
|
-
get
|
|
105
|
-
return local[
|
|
113
|
+
get "aria-labelledby"() {
|
|
114
|
+
return local["aria-labelledby"];
|
|
106
115
|
},
|
|
107
116
|
});
|
|
108
117
|
|
|
109
118
|
let wasOpen = false;
|
|
110
|
-
// Announce only when transitioning from closed -> open.
|
|
111
119
|
createEffect(() => {
|
|
112
120
|
const open = isOpen();
|
|
113
121
|
if (open && !wasOpen) {
|
|
114
|
-
|
|
122
|
+
const message = local.actionsAvailableMessage ?? "Actions available.";
|
|
123
|
+
if (message) {
|
|
124
|
+
announce(message);
|
|
125
|
+
}
|
|
115
126
|
}
|
|
116
127
|
wasOpen = open;
|
|
117
128
|
});
|
|
118
129
|
|
|
119
|
-
// Escape key to clear selection
|
|
120
130
|
const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {
|
|
121
|
-
const onKeyDown = local.onKeyDown as
|
|
131
|
+
const onKeyDown = local.onKeyDown as
|
|
132
|
+
| JSX.EventHandler<HTMLDivElement, KeyboardEvent>
|
|
133
|
+
| undefined;
|
|
122
134
|
onKeyDown?.(e);
|
|
123
135
|
if (e.defaultPrevented) {
|
|
124
136
|
return;
|
|
125
137
|
}
|
|
126
138
|
|
|
127
|
-
if (e.key ===
|
|
139
|
+
if (e.key === "Escape" && isOpen()) {
|
|
128
140
|
e.preventDefault();
|
|
129
141
|
e.stopPropagation();
|
|
130
|
-
local.onClearSelection();
|
|
142
|
+
local.onClearSelection?.();
|
|
131
143
|
}
|
|
132
144
|
};
|
|
133
145
|
|
|
@@ -136,18 +148,20 @@ export function ActionBar(props: ActionBarProps): JSX.Element {
|
|
|
136
148
|
children: undefined,
|
|
137
149
|
class: local.class,
|
|
138
150
|
style: local.style,
|
|
139
|
-
defaultClassName:
|
|
151
|
+
defaultClassName: "solidaria-ActionBar",
|
|
140
152
|
},
|
|
141
153
|
() => ({
|
|
142
154
|
isOpen: isOpen(),
|
|
143
|
-
selectedItemCount:
|
|
144
|
-
})
|
|
155
|
+
selectedItemCount: selectedItemCount(),
|
|
156
|
+
}),
|
|
145
157
|
);
|
|
146
158
|
|
|
147
|
-
const filteredDOMProps = createMemo(() =>
|
|
159
|
+
const filteredDOMProps = createMemo(() =>
|
|
160
|
+
filterDOMProps(domProps as Record<string, unknown>, { global: true }),
|
|
161
|
+
);
|
|
148
162
|
|
|
149
163
|
const contextValue = createMemo<ActionBarContextValue>(() => ({
|
|
150
|
-
selectedItemCount
|
|
164
|
+
selectedItemCount,
|
|
151
165
|
onClearSelection: local.onClearSelection,
|
|
152
166
|
onAction: local.onAction,
|
|
153
167
|
}));
|
|
@@ -163,6 +177,7 @@ export function ActionBar(props: ActionBarProps): JSX.Element {
|
|
|
163
177
|
slot={local.slot}
|
|
164
178
|
data-open={isOpen() || undefined}
|
|
165
179
|
onKeyDown={handleKeyDown}
|
|
180
|
+
ref={(el) => assignRef(local.ref, el)}
|
|
166
181
|
>
|
|
167
182
|
{local.children}
|
|
168
183
|
</div>
|
|
@@ -171,10 +186,6 @@ export function ActionBar(props: ActionBarProps): JSX.Element {
|
|
|
171
186
|
);
|
|
172
187
|
}
|
|
173
188
|
|
|
174
|
-
// ============================================
|
|
175
|
-
// ACTIONBAR CONTAINER
|
|
176
|
-
// ============================================
|
|
177
|
-
|
|
178
189
|
export interface ActionBarContainerProps extends ParentProps {
|
|
179
190
|
class?: string;
|
|
180
191
|
style?: JSX.CSSProperties;
|
|
@@ -186,18 +197,14 @@ export interface ActionBarContainerProps extends ParentProps {
|
|
|
186
197
|
export function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {
|
|
187
198
|
return (
|
|
188
199
|
<div
|
|
189
|
-
class={props.class ??
|
|
190
|
-
style={{ position:
|
|
200
|
+
class={props.class ?? "solidaria-ActionBarContainer"}
|
|
201
|
+
style={{ position: "relative", ...props.style }}
|
|
191
202
|
>
|
|
192
203
|
{props.children}
|
|
193
204
|
</div>
|
|
194
205
|
);
|
|
195
206
|
}
|
|
196
207
|
|
|
197
|
-
// ============================================
|
|
198
|
-
// SELECTION COUNT
|
|
199
|
-
// ============================================
|
|
200
|
-
|
|
201
208
|
export interface ActionBarSelectionCountProps {
|
|
202
209
|
class?: string;
|
|
203
210
|
}
|
|
@@ -209,24 +216,20 @@ export function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JS
|
|
|
209
216
|
const ctx = useActionBarContext();
|
|
210
217
|
|
|
211
218
|
const text = () => {
|
|
212
|
-
if (!ctx) return
|
|
219
|
+
if (!ctx) return "";
|
|
213
220
|
const count = ctx.selectedItemCount();
|
|
214
|
-
if (count ===
|
|
215
|
-
if (count === 0) return
|
|
221
|
+
if (count === "all") return "All selected";
|
|
222
|
+
if (count === 0) return "None selected";
|
|
216
223
|
return `${count} selected`;
|
|
217
224
|
};
|
|
218
225
|
|
|
219
226
|
return <span class={props.class}>{text()}</span>;
|
|
220
227
|
}
|
|
221
228
|
|
|
222
|
-
// ============================================
|
|
223
|
-
// CLEAR BUTTON
|
|
224
|
-
// ============================================
|
|
225
|
-
|
|
226
229
|
export interface ActionBarClearButtonProps {
|
|
227
230
|
class?: string;
|
|
228
231
|
children?: JSX.Element;
|
|
229
|
-
|
|
232
|
+
"aria-label"?: string;
|
|
230
233
|
}
|
|
231
234
|
|
|
232
235
|
/**
|
|
@@ -238,11 +241,11 @@ export function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Elem
|
|
|
238
241
|
return (
|
|
239
242
|
<button
|
|
240
243
|
type="button"
|
|
241
|
-
aria-label={props[
|
|
244
|
+
aria-label={props["aria-label"] ?? "Clear selection"}
|
|
242
245
|
class={props.class}
|
|
243
|
-
onClick={() => ctx?.onClearSelection()}
|
|
246
|
+
onClick={() => ctx?.onClearSelection?.()}
|
|
244
247
|
>
|
|
245
|
-
{props.children ??
|
|
248
|
+
{props.children ?? "\u2715"}
|
|
246
249
|
</button>
|
|
247
250
|
);
|
|
248
251
|
}
|