@cmdniels/uikit 1.5.0 → 1.5.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.
|
@@ -26,6 +26,7 @@ export interface SortableRootContextValue<T> {
|
|
|
26
26
|
setActiveId: (id: UniqueIdentifier | null) => void;
|
|
27
27
|
getItemValue: (item: T) => UniqueIdentifier;
|
|
28
28
|
flatCursor: boolean;
|
|
29
|
+
disabled: boolean;
|
|
29
30
|
}
|
|
30
31
|
export default function Sortable<T>(props: DndContextProps & (T extends object ? {
|
|
31
32
|
/**
|
|
@@ -49,4 +50,5 @@ export default function Sortable<T>(props: DndContextProps & (T extends object ?
|
|
|
49
50
|
strategy?: SortableContextProps["strategy"];
|
|
50
51
|
orientation?: "vertical" | "horizontal" | "mixed";
|
|
51
52
|
flatCursor?: boolean;
|
|
53
|
+
disabled?: boolean;
|
|
52
54
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -34,7 +34,7 @@ export const orientationConfig = {
|
|
|
34
34
|
},
|
|
35
35
|
};
|
|
36
36
|
export default function Sortable(props) {
|
|
37
|
-
const { value, onValueChange, collisionDetection, modifiers, strategy, onMove, orientation = "vertical", flatCursor = false, getItemValue: getItemValueProp, accessibility, onDragStart: onDragStartProp, onDragEnd: onDragEndProp, onDragCancel: onDragCancelProp } = props, sortableProps = __rest(props, ["value", "onValueChange", "collisionDetection", "modifiers", "strategy", "onMove", "orientation", "flatCursor", "getItemValue", "accessibility", "onDragStart", "onDragEnd", "onDragCancel"]);
|
|
37
|
+
const { value, onValueChange, collisionDetection, modifiers, strategy, onMove, orientation = "vertical", flatCursor = false, disabled = false, getItemValue: getItemValueProp, accessibility, onDragStart: onDragStartProp, onDragEnd: onDragEndProp, onDragCancel: onDragCancelProp } = props, sortableProps = __rest(props, ["value", "onValueChange", "collisionDetection", "modifiers", "strategy", "onMove", "orientation", "flatCursor", "disabled", "getItemValue", "accessibility", "onDragStart", "onDragEnd", "onDragCancel"]);
|
|
38
38
|
const id = useId();
|
|
39
39
|
const [activeId, setActiveId] = useState(null);
|
|
40
40
|
const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, {
|
|
@@ -140,7 +140,22 @@ export default function Sortable(props) {
|
|
|
140
140
|
setActiveId,
|
|
141
141
|
getItemValue,
|
|
142
142
|
flatCursor,
|
|
143
|
-
|
|
143
|
+
disabled,
|
|
144
|
+
}), [
|
|
145
|
+
id,
|
|
146
|
+
items,
|
|
147
|
+
modifiers,
|
|
148
|
+
strategy,
|
|
149
|
+
config.modifiers,
|
|
150
|
+
config.strategy,
|
|
151
|
+
activeId,
|
|
152
|
+
getItemValue,
|
|
153
|
+
flatCursor,
|
|
154
|
+
disabled,
|
|
155
|
+
]);
|
|
156
|
+
if (disabled) {
|
|
157
|
+
return (_jsx(SortableRootContext.Provider, { value: contextValue, children: sortableProps.children }));
|
|
158
|
+
}
|
|
144
159
|
return (_jsx(SortableRootContext.Provider, { value: contextValue, children: _jsx(DndContext, Object.assign({ collisionDetection: collisionDetection !== null && collisionDetection !== void 0 ? collisionDetection : config.collisionDetection, modifiers: modifiers !== null && modifiers !== void 0 ? modifiers : config.modifiers, sensors: sensors }, sortableProps, { id: id, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragCancel: onDragCancel, accessibility: Object.assign({ announcements,
|
|
145
160
|
screenReaderInstructions }, accessibility) })) }));
|
|
146
161
|
}
|
|
@@ -32,12 +32,13 @@ export default function SortableItem(props) {
|
|
|
32
32
|
}
|
|
33
33
|
const context = useSortableContext();
|
|
34
34
|
const id = useId();
|
|
35
|
+
const isDisabled = disabled !== null && disabled !== void 0 ? disabled : context.disabled;
|
|
35
36
|
const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
|
|
36
37
|
id: value,
|
|
37
|
-
disabled,
|
|
38
|
+
disabled: isDisabled,
|
|
38
39
|
});
|
|
39
40
|
const composedRef = useComposedRefs(ref, (node) => {
|
|
40
|
-
if (
|
|
41
|
+
if (isDisabled) {
|
|
41
42
|
return;
|
|
42
43
|
}
|
|
43
44
|
setNodeRef(node);
|
|
@@ -52,15 +53,14 @@ export default function SortableItem(props) {
|
|
|
52
53
|
listeners,
|
|
53
54
|
setActivatorNodeRef,
|
|
54
55
|
isDragging,
|
|
55
|
-
disabled,
|
|
56
|
-
}), [id, attributes, listeners, setActivatorNodeRef, isDragging,
|
|
57
|
-
const mergedProps = Object.assign(Object.assign(Object.assign(Object.assign({ id, "data-disabled":
|
|
58
|
-
"touch-none select-none": asHandle,
|
|
59
|
-
"cursor-default": context.flatCursor,
|
|
60
|
-
"data-dragging:cursor-grabbing": !context.flatCursor,
|
|
61
|
-
"cursor-grab": !isDragging && asHandle && !context.flatCursor,
|
|
56
|
+
disabled: isDisabled,
|
|
57
|
+
}), [id, attributes, listeners, setActivatorNodeRef, isDragging, isDisabled]);
|
|
58
|
+
const mergedProps = Object.assign(Object.assign(Object.assign(Object.assign({ id, "data-disabled": isDisabled, "data-dragging": isDragging ? "" : undefined, "data-slot": "sortable-item" }, itemProps), (asHandle && !isDisabled ? attributes : {})), (asHandle && !isDisabled ? listeners : {})), { ref: composedRef, style: composedStyle, className: cn("focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 focus-visible:outline-hidden dark:focus-visible:ring-neutral-300", {
|
|
59
|
+
"touch-none select-none": asHandle && !isDisabled,
|
|
60
|
+
"cursor-default": context.flatCursor || isDisabled,
|
|
61
|
+
"data-dragging:cursor-grabbing": !context.flatCursor && !isDisabled,
|
|
62
|
+
"cursor-grab": !isDragging && asHandle && !context.flatCursor && !isDisabled,
|
|
62
63
|
"opacity-50": isDragging,
|
|
63
|
-
"pointer-events-none opacity-50": disabled,
|
|
64
64
|
}, className) });
|
|
65
65
|
const element = render ? cloneElement(render, mergedProps) : _jsx("div", Object.assign({}, mergedProps));
|
|
66
66
|
return _jsx(SortableItemContext.Provider, { value: itemContext, children: element });
|
|
@@ -22,7 +22,7 @@ export default function SortableItemHandle(props) {
|
|
|
22
22
|
const itemContext = useSortableItemContext();
|
|
23
23
|
const isDisabled = disabled !== null && disabled !== void 0 ? disabled : itemContext.disabled;
|
|
24
24
|
const composedRef = useComposedRefs(itemHandleProps.ref, (node) => {
|
|
25
|
-
if (
|
|
25
|
+
if (isDisabled) {
|
|
26
26
|
return;
|
|
27
27
|
}
|
|
28
28
|
itemContext.setActivatorNodeRef(node);
|