@luscii-healthtech/web-ui 58.10.2 → 58.11.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.
|
@@ -72,6 +72,50 @@ export declare const LoadingState: Story;
|
|
|
72
72
|
* and add an action only when there is one worth taking.
|
|
73
73
|
*/
|
|
74
74
|
export declare const EmptyState: Story;
|
|
75
|
+
/**
|
|
76
|
+
* ### Reorderable rows
|
|
77
|
+
*
|
|
78
|
+
* web-ui gives you the **handle**, not the dragging. `DragHandle` is the visual
|
|
79
|
+
* and keyboard affordance; the reordering itself belongs to the consumer, using
|
|
80
|
+
* whichever drag-and-drop library that app already depends on. Nothing here
|
|
81
|
+
* imports one.
|
|
82
|
+
*
|
|
83
|
+
* The layout below is the part worth copying: the handle is the **first child
|
|
84
|
+
* of the row**, before the icon, so the grab target is in a predictable place
|
|
85
|
+
* and the row content keeps its normal anatomy.
|
|
86
|
+
*
|
|
87
|
+
* To wire it up, `DragHandle` forwards its ref and spreads any remaining props
|
|
88
|
+
* onto the underlying `<button>`, which is exactly what these libraries expect:
|
|
89
|
+
*
|
|
90
|
+
* ```tsx
|
|
91
|
+
* // dnd-kit — the shape most of our apps use today
|
|
92
|
+
* const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform } =
|
|
93
|
+
* useSortable({ id: item.id });
|
|
94
|
+
*
|
|
95
|
+
* <UnorderedList.Item ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform) }}>
|
|
96
|
+
* <UnorderedList.Padding>
|
|
97
|
+
* <Stack axis="x" _gap="l" align="center" width="full">
|
|
98
|
+
* <DragHandle
|
|
99
|
+
* ref={setActivatorNodeRef}
|
|
100
|
+
* grabbing={activeId === item.id}
|
|
101
|
+
* {...attributes}
|
|
102
|
+
* {...listeners}
|
|
103
|
+
* />
|
|
104
|
+
* …row content…
|
|
105
|
+
* </Stack>
|
|
106
|
+
* </UnorderedList.Padding>
|
|
107
|
+
* </UnorderedList.Item>
|
|
108
|
+
* ```
|
|
109
|
+
*
|
|
110
|
+
* `grabbing` is yours to drive — pass `true` for the row currently being
|
|
111
|
+
* dragged and the handle switches to the grabbing cursor and background. The
|
|
112
|
+
* second row below is rendered in that state so you can see the difference.
|
|
113
|
+
*
|
|
114
|
+
* Keyboard and screen-reader support comes from your library, not from the
|
|
115
|
+
* handle: give the button an accessible name (`aria-label`) and let the library
|
|
116
|
+
* own announcements and key handling.
|
|
117
|
+
*/
|
|
118
|
+
export declare const ReorderableList: Story;
|
|
75
119
|
/**
|
|
76
120
|
* Combine multiple patterns: title, icons, accessories, and interactivity.
|
|
77
121
|
* This shows the full flexibility of the compositional approach.
|