@namroodinc/liquid-editorial 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Modal/style.css +1 -0
- package/dist/components/SortableList/index.cjs +1 -1
- package/dist/components/SortableList/index.cjs.map +1 -1
- package/dist/components/SortableList/index.d.cts +4 -3
- package/dist/components/SortableList/index.d.cts.map +1 -1
- package/dist/components/SortableList/index.d.ts +4 -3
- package/dist/components/SortableList/index.d.ts.map +1 -1
- package/dist/components/SortableList/index.js +55 -48
- package/dist/components/SortableList/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@dnd-kit/core"),i=require("@dnd-kit/modifiers"),a=require("@dnd-kit/sortable"),o=require("@dnd-kit/utilities");var
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@dnd-kit/core"),i=require("@dnd-kit/modifiers"),a=require("@dnd-kit/sortable"),o=require("@dnd-kit/utilities");function s(e){return(0,t.isValidElement)(e)&&typeof e.props.id==`string`}var c=(0,t.forwardRef)(function({items:o,onReorder:c,renderDragOverlay:l,className:u,children:d,...f},p){let m=(0,t.useId)(),[h,g]=(0,t.useState)(null),[_,v]=(0,t.useState)(o),[y,b]=(0,t.useState)(o);o!==y&&o.join(`\0`)!==y.join(`\0`)&&(b(o),v(o));let x=(0,r.useSensors)((0,r.useSensor)(r.PointerSensor,{activationConstraint:{distance:4}}),(0,r.useSensor)(r.KeyboardSensor,{coordinateGetter:a.sortableKeyboardCoordinates})),S=(0,t.useCallback)(e=>{g(String(e.active.id))},[]),C=(0,t.useCallback)(e=>{g(null);let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=_.indexOf(String(t.id)),i=_.indexOf(String(n.id));if(r<0||i<0)return;let o=(0,a.arrayMove)(_,r,i);v(o),c?.(o)},[_,c]),w=t.Children.toArray(d),T=new Map(w.filter(s).map(e=>[e.props.id,e])),E=[..._.flatMap(e=>T.get(e)??[]),...w.filter(e=>!s(e)||!_.includes(e.props.id))],D=h?T.get(h):void 0;return(0,n.jsxs)(r.DndContext,{id:`ds-sortable-list-${m}`,sensors:x,collisionDetection:r.closestCenter,modifiers:[i.restrictToVerticalAxis],onDragStart:S,onDragEnd:C,onDragCancel:()=>g(null),children:[(0,n.jsx)(a.SortableContext,{items:_,strategy:a.verticalListSortingStrategy,children:(0,n.jsx)(`ul`,{ref:p,className:[`ds-sortable-list`,u].filter(Boolean).join(` `),...f,children:E})}),(0,n.jsx)(r.DragOverlay,{children:h?(0,n.jsxs)(`div`,{className:`ds-sortable-item`,"data-overlay":!0,children:[(0,n.jsx)(`span`,{className:`ds-sortable-item__handle`,"aria-hidden":`true`,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:l?l(h):D?.props.children})]}):null})]})}),l=(0,t.forwardRef)(function({id:t,label:r,action:i,className:s,children:c,...l},u){let{attributes:d,listeners:f,setNodeRef:p,transform:m,transition:h,isDragging:g}=(0,a.useSortable)({id:t});return(0,n.jsxs)(`li`,{ref:e=>{p(e),typeof u==`function`?u(e):u&&(u.current=e)},style:{transform:o.CSS.Translate.toString(m),transition:h},className:[`ds-sortable-item`,s].filter(Boolean).join(` `),"data-dragging":g||void 0,...l,children:[(0,n.jsx)(`button`,{type:`button`,className:`ds-sortable-item__handle`,"aria-label":r?`Move ${r}`:`Move item`,...d,...f,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:c}),i&&(0,n.jsx)(`div`,{className:`ds-sortable-item__action`,children:i})]})});exports.SortableList=c,exports.SortableListItem=l;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","useCallback","arrayMove","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","DragOverlay","Icon","useSortable","CSS","require_Icon","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_modifiers","_dnd_kit_sortable","_dnd_kit_utilities","SortableList","rest","dndId","activeId","setActiveId","sensors","handleStart","event","handleEnd","over","active","from","items","to","onReorder","className","renderDragOverlay","SortableListItem","setNodeRef","node","ref","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useId,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport {\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n useSensor,\n useSensors,\n type DragEndEvent,\n type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n SortableContext,\n arrayMove,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n /** Item ids in render order. */\n items: string[];\n /** Fired with the whole list in its new order. Apply it to your own state. */\n onReorder?: (items: string[]) => void;\n /** Rendered inside the drag overlay while a row is in the air. */\n renderDragOverlay?: (id: string) => ReactNode;\n children?: ReactNode;\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left; the list owns dragging only, the\n * data stays yours: react to `onReorder`.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n const dndId = useId();\n const [activeId, setActiveId] = useState<string | null>(null);\n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n );\n\n const handleStart = useCallback((event: DragStartEvent) => {\n setActiveId(String(event.active.id));\n }, []);\n\n const handleEnd = useCallback(\n (event: DragEndEvent) => {\n setActiveId(null);\n const { active, over } = event;\n if (!over || active.id === over.id) return;\n const from = items.indexOf(String(active.id));\n const to = items.indexOf(String(over.id));\n if (from < 0 || to < 0) return;\n onReorder?.(arrayMove(items, from, to));\n },\n [items, onReorder],\n );\n\n return (\n <DndContext\n id={`ds-sortable-list-${dndId}`}\n sensors={sensors}\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis]}\n onDragStart={handleStart}\n onDragEnd={handleEnd}\n onDragCancel={() => setActiveId(null)}\n >\n <SortableContext items={items} strategy={verticalListSortingStrategy}>\n <ul\n ref={ref}\n className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {children}\n </ul>\n </SortableContext>\n <DragOverlay>\n {activeId ? (\n <div className=\"ds-sortable-item\" data-overlay>\n <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n <Icon name=\"grip-vertical\" />\n </span>\n <div className=\"ds-sortable-item__content\">{renderDragOverlay?.(activeId)}</div>\n </div>\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n id: string;\n /** Accessible name announced when the row is picked up. */\n label?: string;\n /** A control at the end of the row, e.g. a menu or a delete button. */\n action?: ReactNode;\n children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id,\n });\n\n return (\n <li\n ref={(node) => {\n setNodeRef(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n style={{ transform: CSS.Translate.toString(transform), transition }}\n className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n data-dragging={isDragging || undefined}\n {...rest}\n >\n <button\n type=\"button\"\n className=\"ds-sortable-item__handle\"\n aria-label={label ? `Move ${label}` : \"Move item\"}\n {...attributes}\n {...listeners}\n >\n <Icon name=\"grip-vertical\" />\n </button>\n <div className=\"ds-sortable-item__content\">{children}</div>\n {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n </li>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["isValidElement","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","useCallback","arrayMove","Children","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","DragOverlay","Icon","useSortable","CSS","require_Icon","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_modifiers","_dnd_kit_sortable","_dnd_kit_utilities","isItem","child","SortableList","rest","dndId","activeId","setActiveId","order","setOrder","items","prevItems","setPrevItems","sensors","handleStart","event","handleEnd","over","active","from","to","next","onReorder","childArray","children","rows","ordered","id","activeRow","className","renderDragOverlay","SortableListItem","setNodeRef","node","ref","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useState,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport {\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n useSensor,\n useSensors,\n type DragEndEvent,\n type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n SortableContext,\n arrayMove,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n /** Item ids in render order. */\n items: string[];\n /** Fired with the whole list in its new order. Apply it to your own state. */\n onReorder?: (items: string[]) => void;\n /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n renderDragOverlay?: (id: string) => ReactNode;\n children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n const dndId = useId();\n const [activeId, setActiveId] = useState<string | null>(null);\n const [order, setOrder] = useState(items);\n const [prevItems, setPrevItems] = useState(items);\n if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n setPrevItems(items);\n setOrder(items);\n }\n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n );\n\n const handleStart = useCallback((event: DragStartEvent) => {\n setActiveId(String(event.active.id));\n }, []);\n\n const handleEnd = useCallback(\n (event: DragEndEvent) => {\n setActiveId(null);\n const { active, over } = event;\n if (!over || active.id === over.id) return;\n const from = order.indexOf(String(active.id));\n const to = order.indexOf(String(over.id));\n if (from < 0 || to < 0) return;\n const next = arrayMove(order, from, to);\n setOrder(next);\n onReorder?.(next);\n },\n [order, onReorder],\n );\n\n // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n const childArray = Children.toArray(children);\n const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n const ordered = [\n ...order.flatMap((id) => rows.get(id) ?? []),\n ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n ];\n const activeRow = activeId ? rows.get(activeId) : undefined;\n\n return (\n <DndContext\n id={`ds-sortable-list-${dndId}`}\n sensors={sensors}\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis]}\n onDragStart={handleStart}\n onDragEnd={handleEnd}\n onDragCancel={() => setActiveId(null)}\n >\n <SortableContext items={order} strategy={verticalListSortingStrategy}>\n <ul\n ref={ref}\n className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {ordered}\n </ul>\n </SortableContext>\n <DragOverlay>\n {activeId ? (\n <div className=\"ds-sortable-item\" data-overlay>\n <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n <Icon name=\"grip-vertical\" />\n </span>\n <div className=\"ds-sortable-item__content\">\n {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n </div>\n </div>\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n id: string;\n /** Accessible name announced when the row is picked up. */\n label?: string;\n /** A control at the end of the row, e.g. a menu or a delete button. */\n action?: ReactNode;\n children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id,\n });\n\n return (\n <li\n ref={(node) => {\n setNodeRef(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n style={{ transform: CSS.Translate.toString(transform), transition }}\n className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n data-dragging={isDragging || undefined}\n {...rest}\n >\n <button\n type=\"button\"\n className=\"ds-sortable-item__handle\"\n aria-label={label ? `Move ${label}` : \"Move item\"}\n {...attributes}\n {...listeners}\n >\n <Icon name=\"grip-vertical\" />\n </button>\n <div className=\"ds-sortable-item__content\">{children}</div>\n {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n </li>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -4,14 +4,15 @@ export interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>
|
|
|
4
4
|
items: string[];
|
|
5
5
|
/** Fired with the whole list in its new order. Apply it to your own state. */
|
|
6
6
|
onReorder?: (items: string[]) => void;
|
|
7
|
-
/** Rendered inside the drag overlay while a row is in the air. */
|
|
7
|
+
/** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */
|
|
8
8
|
renderDragOverlay?: (id: string) => ReactNode;
|
|
9
9
|
children?: ReactNode;
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* A single vertical list you can re-order — the board's mechanics without the
|
|
13
|
-
* lanes. Each row carries a grip on the left
|
|
14
|
-
*
|
|
13
|
+
* lanes. Each row carries a grip on the left. The list keeps the dropped order
|
|
14
|
+
* itself, so it works on its own; pass `onReorder` to mirror it into your data.
|
|
15
|
+
* A new `items` value from the parent always wins.
|
|
15
16
|
*/
|
|
16
17
|
export declare const SortableList: import("react").ForwardRefExoticComponent<SortableListProps & import("react").RefAttributes<HTMLUListElement>>;
|
|
17
18
|
export interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}
|
|
@@ -4,14 +4,15 @@ export interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>
|
|
|
4
4
|
items: string[];
|
|
5
5
|
/** Fired with the whole list in its new order. Apply it to your own state. */
|
|
6
6
|
onReorder?: (items: string[]) => void;
|
|
7
|
-
/** Rendered inside the drag overlay while a row is in the air. */
|
|
7
|
+
/** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */
|
|
8
8
|
renderDragOverlay?: (id: string) => ReactNode;
|
|
9
9
|
children?: ReactNode;
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* A single vertical list you can re-order — the board's mechanics without the
|
|
13
|
-
* lanes. Each row carries a grip on the left
|
|
14
|
-
*
|
|
13
|
+
* lanes. Each row carries a grip on the left. The list keeps the dropped order
|
|
14
|
+
* itself, so it works on its own; pass `onReorder` to mirror it into your data.
|
|
15
|
+
* A new `items` value from the parent always wins.
|
|
15
16
|
*/
|
|
16
17
|
export declare const SortableList: import("react").ForwardRefExoticComponent<SortableListProps & import("react").RefAttributes<HTMLUListElement>>;
|
|
17
18
|
export interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}
|
|
@@ -1,78 +1,85 @@
|
|
|
1
1
|
import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
|
|
2
|
-
import {
|
|
3
|
-
import { jsx as
|
|
4
|
-
import { DndContext as
|
|
5
|
-
import { restrictToVerticalAxis as
|
|
6
|
-
import { SortableContext as
|
|
7
|
-
import { CSS as
|
|
2
|
+
import { Children as t, forwardRef as n, isValidElement as r, useCallback as i, useId as a, useState as o } from "react";
|
|
3
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
4
|
+
import { DndContext as l, DragOverlay as u, KeyboardSensor as d, PointerSensor as f, closestCenter as p, useSensor as m, useSensors as h } from "@dnd-kit/core";
|
|
5
|
+
import { restrictToVerticalAxis as g } from "@dnd-kit/modifiers";
|
|
6
|
+
import { SortableContext as _, arrayMove as v, sortableKeyboardCoordinates as y, useSortable as b, verticalListSortingStrategy as x } from "@dnd-kit/sortable";
|
|
7
|
+
import { CSS as S } from "@dnd-kit/utilities";
|
|
8
8
|
//#region src/components/SortableList/index.tsx
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
id
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
9
|
+
function C(e) {
|
|
10
|
+
return r(e) && typeof e.props.id == "string";
|
|
11
|
+
}
|
|
12
|
+
var w = n(function({ items: n, onReorder: r, renderDragOverlay: b, className: S, children: w, ...T }, E) {
|
|
13
|
+
let D = a(), [O, k] = o(null), [A, j] = o(n), [M, N] = o(n);
|
|
14
|
+
n !== M && n.join("\0") !== M.join("\0") && (N(n), j(n));
|
|
15
|
+
let P = h(m(f, { activationConstraint: { distance: 4 } }), m(d, { coordinateGetter: y })), F = i((e) => {
|
|
16
|
+
k(String(e.active.id));
|
|
17
|
+
}, []), I = i((e) => {
|
|
18
|
+
k(null);
|
|
19
|
+
let { active: t, over: n } = e;
|
|
20
|
+
if (!n || t.id === n.id) return;
|
|
21
|
+
let i = A.indexOf(String(t.id)), a = A.indexOf(String(n.id));
|
|
22
|
+
if (i < 0 || a < 0) return;
|
|
23
|
+
let o = v(A, i, a);
|
|
24
|
+
j(o), r?.(o);
|
|
25
|
+
}, [A, r]), L = t.toArray(w), R = new Map(L.filter(C).map((e) => [e.props.id, e])), z = [...A.flatMap((e) => R.get(e) ?? []), ...L.filter((e) => !C(e) || !A.includes(e.props.id))], B = O ? R.get(O) : void 0;
|
|
26
|
+
return /* @__PURE__ */ c(l, {
|
|
27
|
+
id: `ds-sortable-list-${D}`,
|
|
28
|
+
sensors: P,
|
|
29
|
+
collisionDetection: p,
|
|
30
|
+
modifiers: [g],
|
|
31
|
+
onDragStart: F,
|
|
32
|
+
onDragEnd: I,
|
|
33
|
+
onDragCancel: () => k(null),
|
|
34
|
+
children: [/* @__PURE__ */ s(_, {
|
|
35
|
+
items: A,
|
|
36
|
+
strategy: x,
|
|
37
|
+
children: /* @__PURE__ */ s("ul", {
|
|
38
|
+
ref: E,
|
|
39
|
+
className: ["ds-sortable-list", S].filter(Boolean).join(" "),
|
|
40
|
+
...T,
|
|
41
|
+
children: z
|
|
35
42
|
})
|
|
36
|
-
}), /* @__PURE__ */
|
|
43
|
+
}), /* @__PURE__ */ s(u, { children: O ? /* @__PURE__ */ c("div", {
|
|
37
44
|
className: "ds-sortable-item",
|
|
38
45
|
"data-overlay": !0,
|
|
39
|
-
children: [/* @__PURE__ */
|
|
46
|
+
children: [/* @__PURE__ */ s("span", {
|
|
40
47
|
className: "ds-sortable-item__handle",
|
|
41
48
|
"aria-hidden": "true",
|
|
42
|
-
children: /* @__PURE__ */
|
|
43
|
-
}), /* @__PURE__ */
|
|
49
|
+
children: /* @__PURE__ */ s(e, { name: "grip-vertical" })
|
|
50
|
+
}), /* @__PURE__ */ s("div", {
|
|
44
51
|
className: "ds-sortable-item__content",
|
|
45
|
-
children: b
|
|
52
|
+
children: b ? b(O) : B?.props.children
|
|
46
53
|
})]
|
|
47
54
|
}) : null })]
|
|
48
55
|
});
|
|
49
|
-
}),
|
|
50
|
-
let { attributes: u, listeners: d, setNodeRef: f, transform: p, transition: m, isDragging: h } =
|
|
51
|
-
return /* @__PURE__ */
|
|
56
|
+
}), T = n(function({ id: t, label: n, action: r, className: i, children: a, ...o }, l) {
|
|
57
|
+
let { attributes: u, listeners: d, setNodeRef: f, transform: p, transition: m, isDragging: h } = b({ id: t });
|
|
58
|
+
return /* @__PURE__ */ c("li", {
|
|
52
59
|
ref: (e) => {
|
|
53
60
|
f(e), typeof l == "function" ? l(e) : l && (l.current = e);
|
|
54
61
|
},
|
|
55
62
|
style: {
|
|
56
|
-
transform:
|
|
63
|
+
transform: S.Translate.toString(p),
|
|
57
64
|
transition: m
|
|
58
65
|
},
|
|
59
66
|
className: ["ds-sortable-item", i].filter(Boolean).join(" "),
|
|
60
67
|
"data-dragging": h || void 0,
|
|
61
|
-
...
|
|
68
|
+
...o,
|
|
62
69
|
children: [
|
|
63
|
-
/* @__PURE__ */
|
|
70
|
+
/* @__PURE__ */ s("button", {
|
|
64
71
|
type: "button",
|
|
65
72
|
className: "ds-sortable-item__handle",
|
|
66
73
|
"aria-label": n ? `Move ${n}` : "Move item",
|
|
67
74
|
...u,
|
|
68
75
|
...d,
|
|
69
|
-
children: /* @__PURE__ */
|
|
76
|
+
children: /* @__PURE__ */ s(e, { name: "grip-vertical" })
|
|
70
77
|
}),
|
|
71
|
-
/* @__PURE__ */
|
|
78
|
+
/* @__PURE__ */ s("div", {
|
|
72
79
|
className: "ds-sortable-item__content",
|
|
73
|
-
children:
|
|
80
|
+
children: a
|
|
74
81
|
}),
|
|
75
|
-
r && /* @__PURE__ */
|
|
82
|
+
r && /* @__PURE__ */ s("div", {
|
|
76
83
|
className: "ds-sortable-item__action",
|
|
77
84
|
children: r
|
|
78
85
|
})
|
|
@@ -80,6 +87,6 @@ var x = t(function({ items: t, onReorder: v, renderDragOverlay: b, className: x,
|
|
|
80
87
|
});
|
|
81
88
|
});
|
|
82
89
|
//#endregion
|
|
83
|
-
export {
|
|
90
|
+
export { w as SortableList, T as SortableListItem };
|
|
84
91
|
|
|
85
92
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Icon","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","
|
|
1
|
+
{"version":3,"file":"index.js","names":["Icon","isItem","isValidElement","child","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","order","setOrder","items","prevItems","setPrevItems","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","to","next","arrayMove","onReorder","childArray","Children","children","rows","ordered","id","activeRow","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","className","DragOverlay","renderDragOverlay","SortableListItem","useSortable","setNodeRef","node","ref","CSS","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useState,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport {\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n useSensor,\n useSensors,\n type DragEndEvent,\n type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n SortableContext,\n arrayMove,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n /** Item ids in render order. */\n items: string[];\n /** Fired with the whole list in its new order. Apply it to your own state. */\n onReorder?: (items: string[]) => void;\n /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n renderDragOverlay?: (id: string) => ReactNode;\n children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n const dndId = useId();\n const [activeId, setActiveId] = useState<string | null>(null);\n const [order, setOrder] = useState(items);\n const [prevItems, setPrevItems] = useState(items);\n if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n setPrevItems(items);\n setOrder(items);\n }\n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n );\n\n const handleStart = useCallback((event: DragStartEvent) => {\n setActiveId(String(event.active.id));\n }, []);\n\n const handleEnd = useCallback(\n (event: DragEndEvent) => {\n setActiveId(null);\n const { active, over } = event;\n if (!over || active.id === over.id) return;\n const from = order.indexOf(String(active.id));\n const to = order.indexOf(String(over.id));\n if (from < 0 || to < 0) return;\n const next = arrayMove(order, from, to);\n setOrder(next);\n onReorder?.(next);\n },\n [order, onReorder],\n );\n\n // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n const childArray = Children.toArray(children);\n const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n const ordered = [\n ...order.flatMap((id) => rows.get(id) ?? []),\n ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n ];\n const activeRow = activeId ? rows.get(activeId) : undefined;\n\n return (\n <DndContext\n id={`ds-sortable-list-${dndId}`}\n sensors={sensors}\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis]}\n onDragStart={handleStart}\n onDragEnd={handleEnd}\n onDragCancel={() => setActiveId(null)}\n >\n <SortableContext items={order} strategy={verticalListSortingStrategy}>\n <ul\n ref={ref}\n className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n {...rest}\n >\n {ordered}\n </ul>\n </SortableContext>\n <DragOverlay>\n {activeId ? (\n <div className=\"ds-sortable-item\" data-overlay>\n <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n <Icon name=\"grip-vertical\" />\n </span>\n <div className=\"ds-sortable-item__content\">\n {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n </div>\n </div>\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n id: string;\n /** Accessible name announced when the row is picked up. */\n label?: string;\n /** A control at the end of the row, e.g. a menu or a delete button. */\n action?: ReactNode;\n children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id,\n });\n\n return (\n <li\n ref={(node) => {\n setNodeRef(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n style={{ transform: CSS.Translate.toString(transform), transition }}\n className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n data-dragging={isDragging || undefined}\n {...rest}\n >\n <button\n type=\"button\"\n className=\"ds-sortable-item__handle\"\n aria-label={label ? `Move ${label}` : \"Move item\"}\n {...attributes}\n {...listeners}\n >\n <Icon name=\"grip-vertical\" />\n </button>\n <div className=\"ds-sortable-item__content\">{children}</div>\n {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n </li>\n );\n },\n);\n"],"mappings":"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"}
|