@dxos/react-ui-list 0.6.12-main.2d19bf1

package/dist/lib/node-esm/index.mjs

@@ -0,0 +1,305 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui-list/src/components/List/ListItem.tsx
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import React3, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+import { invariant } from "@dxos/invariant";
+import { Icon } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-list/src/components/List/DropIndicator.tsx
+import React from "react";
+import { mx } from "@dxos/react-ui-theme";
+var edgeToOrientationMap = {
+  top: "horizontal",
+  bottom: "horizontal",
+  left: "vertical",
+  right: "vertical"
+};
+var orientationStyles = {
+  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
+  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
+};
+var edgeStyles = {
+  top: "top-[--line-offset] before:top-[--offset-terminal]",
+  right: "right-[--line-offset] before:right-[--offset-terminal]",
+  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
+  left: "left-[--line-offset] before:left-[--offset-terminal]"
+};
+var strokeSize = 2;
+var terminalSize = 8;
+var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+var DropIndicator = ({ edge, gap = "0px" }) => {
+  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
+  const orientation = edgeToOrientationMap[edge];
+  return /* @__PURE__ */ React.createElement("div", {
+    style: {
+      "--line-thickness": `${strokeSize}px`,
+      "--line-offset": `${lineOffset}`,
+      "--terminal-size": `${terminalSize}px`,
+      "--terminal-radius": `${terminalSize / 2}px`,
+      "--negative-terminal-size": `-${terminalSize}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
+    },
+    className: mx("absolute z-10 pointer-events-none bg-blue-700", "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute", "before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full", orientationStyles[orientation], edgeStyles[edge])
+  });
+};
+
+// packages/ui/react-ui-list/src/components/List/ListRoot.tsx
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { reorderWithEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";
+import { createContext } from "@radix-ui/react-context";
+import React2, { useEffect, useState } from "react";
+import { flushSync } from "react-dom";
+import { useControlledValue } from "@dxos/react-ui";
+var LIST_NAME = "List";
+var [ListProvider, useListContext] = createContext(LIST_NAME);
+var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props }) => {
+  const [items, setItems] = useControlledValue(_items);
+  const [state, setState] = useState(idle);
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      onDrop: ({ location, source }) => {
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+        const sourceData = source.data;
+        const targetData = target.data;
+        if (!isItem(sourceData) || !isItem(targetData)) {
+          return;
+        }
+        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);
+        const targetIdx = items.findIndex((item) => item.id === targetData.id);
+        if (targetIdx < 0 || sourceIdx < 0) {
+          return;
+        }
+        const closestEdgeOfTarget = extractClosestEdge(targetData);
+        flushSync(() => {
+          setItems(reorderWithEdge({
+            list: items,
+            startIndex: sourceIdx,
+            indexOfTarget: targetIdx,
+            axis: "vertical",
+            closestEdgeOfTarget
+          }));
+        });
+      }
+    });
+  }, [
+    items
+  ]);
+  return /* @__PURE__ */ React2.createElement(ListProvider, {
+    isItem,
+    state,
+    setState,
+    ...props
+  }, children?.({
+    state,
+    items
+  }));
+};
+
+// packages/ui/react-ui-list/src/components/List/ListItem.tsx
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
+var idle = {
+  type: "idle"
+};
+var stateStyles = {
+  "is-dragging": "opacity-50"
+};
+var defaultContext = {};
+var LIST_ITEM_NAME = "ListItem";
+var [ListItemProvider, useListItemContext] = createContext2(LIST_ITEM_NAME, defaultContext);
+var ListItem = ({ children, classNames, item }) => {
+  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
+  const ref = useRef(null);
+  const dragHandleRef = useRef(null);
+  const [state, setState] = useState2(idle);
+  useEffect2(() => {
+    const element = ref.current;
+    invariant(element, void 0, {
+      F: __dxlog_file,
+      L: 89,
+      S: void 0,
+      A: [
+        "element",
+        ""
+      ]
+    });
+    return combine(
+      //
+      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
+      //
+      draggable({
+        element,
+        dragHandle: dragHandleRef.current,
+        getInitialData: () => item,
+        onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
+          const rect = source.element.getBoundingClientRect();
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: ({ container }) => {
+              const { height } = container.getBoundingClientRect();
+              return {
+                x: 20,
+                y: height / 2
+              };
+            },
+            render: ({ container }) => {
+              container.style.width = rect.width + "px";
+              setState({
+                type: "preview",
+                container
+              });
+              setRootState({
+                type: "preview",
+                container,
+                item
+              });
+            }
+          });
+        } : void 0,
+        onDragStart: () => {
+          setState({
+            type: "is-dragging"
+          });
+          setRootState({
+            type: "is-dragging",
+            item
+          });
+        },
+        onDrop: () => {
+          setState(idle);
+          setRootState(idle);
+        }
+      }),
+      //
+      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
+      //
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => {
+          return source.element !== element && isItem(source.data);
+        },
+        getData: ({ input }) => {
+          return attachClosestEdge(item, {
+            element,
+            input,
+            allowedEdges: [
+              "top",
+              "bottom"
+            ]
+          });
+        },
+        getIsSticky: () => true,
+        onDragEnter: ({ self }) => {
+          const closestEdge = extractClosestEdge2(self.data);
+          setState({
+            type: "is-dragging-over",
+            closestEdge
+          });
+        },
+        onDrag: ({ self }) => {
+          const closestEdge = extractClosestEdge2(self.data);
+          setState((current) => {
+            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
+              return current;
+            }
+            return {
+              type: "is-dragging-over",
+              closestEdge
+            };
+          });
+        },
+        onDragLeave: () => {
+          setState(idle);
+        },
+        onDrop: () => {
+          setState(idle);
+        }
+      })
+    );
+  }, [
+    item
+  ]);
+  return /* @__PURE__ */ React3.createElement(ListItemProvider, {
+    item,
+    dragHandleRef
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    ref,
+    role: "listitem",
+    className: mx2("flex", classNames, stateStyles[state.type])
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React3.createElement(DropIndicator, {
+    edge: state.closestEdge
+  })));
+};
+var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React3.createElement("button", {
+    ref: forwardedRef,
+    className: mx2("flex items-center justify-center", classNames),
+    ...props
+  }, /* @__PURE__ */ React3.createElement(Icon, {
+    icon,
+    classNames: "cursor-pointer",
+    size: 4
+  }));
+});
+var ListItemDeleteButton = ({ autoHide = true, classNames, ...props }) => {
+  const { state } = useListContext("DELETE_BUTTON");
+  const disabled = state.type !== "idle";
+  return /* @__PURE__ */ React3.createElement(IconButton, {
+    icon: "ph--x--regular",
+    disabled,
+    classNames: [
+      classNames,
+      autoHide && disabled && "hidden"
+    ],
+    ...props
+  });
+};
+var ListItemDragHandle = () => {
+  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
+  return /* @__PURE__ */ React3.createElement(IconButton, {
+    ref: dragHandleRef,
+    icon: "ph--dots-six--regular"
+  });
+};
+var ListItemDragPreview = ({ children }) => {
+  const { state } = useListContext("DRAG_PREVIEW");
+  return state?.type === "preview" ? /* @__PURE__ */ createPortal(children({
+    item: state.item
+  }), state.container) : null;
+};
+var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React3.createElement("div", {
+  className: mx2("flex w-full", classNames)
+}, children);
+var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React3.createElement("div", {
+  className: mx2("flex w-full items-center", classNames),
+  ...props
+}, children);
+
+// packages/ui/react-ui-list/src/components/List/List.tsx
+var List = {
+  Root: ListRoot,
+  Item: ListItem,
+  ItemDragPreview: ListItemDragPreview,
+  ItemWrapper: ListItemWrapper,
+  ItemDragHandle: ListItemDragHandle,
+  ItemDeleteButton: ListItemDeleteButton,
+  ItemTitle: ListItemTitle,
+  IconButton
+};
+export {
+  List
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/node-esm/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/List/ListItem.tsx", "../../../src/components/List/DropIndicator.tsx", "../../../src/components/List/ListRoot.tsx", "../../../src/components/List/List.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, {\n  type ComponentProps,\n  type HTMLAttributes,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { invariant } from '@dxos/invariant';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\nimport { useListContext } from './ListRoot';\n\nexport type ListItemRecord = { id: string };\n\nexport type ItemState =\n  | {\n      type: 'idle';\n    }\n  | {\n      type: 'preview';\n      container: HTMLElement;\n    }\n  | {\n      type: 'is-dragging';\n    }\n  | {\n      type: 'is-dragging-over';\n      closestEdge: Edge | null;\n    };\n\nexport const idle: ItemState = { type: 'idle' };\n\nconst stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {\n  'is-dragging': 'opacity-50',\n};\n\ntype ListItemContext<T extends ListItemRecord> = {\n  item: T;\n  dragHandleRef: MutableRefObject<HTMLElement | null>;\n};\n\n/**\n * Default context defined for ListItemDragPreview, which is defined outside of ListItem.\n */\nconst defaultContext: ListItemContext<any> = {} as any;\n\nconst LIST_ITEM_NAME = 'ListItem';\n\nexport const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(\n  LIST_ITEM_NAME,\n  defaultContext,\n);\n\nexport type ListItemProps<T extends ListItemRecord> = ThemedClassName<\n  PropsWithChildren<{\n    item: T;\n  }>\n>;\n\n/**\n * Draggable list item.\n */\nexport const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {\n  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLElement | null>(null);\n  const [state, setState] = useState<ItemState>(idle);\n  useEffect(() => {\n    const element = ref.current;\n    invariant(element);\n    return combine(\n      //\n      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable\n      //\n      draggable({\n        element,\n        dragHandle: dragHandleRef.current!,\n        getInitialData: () => item,\n        onGenerateDragPreview: dragPreview\n          ? ({ nativeSetDragImage, source }) => {\n              const rect = source.element.getBoundingClientRect();\n              setCustomNativeDragPreview({\n                nativeSetDragImage,\n                getOffset: ({ container }) => {\n                  const { height } = container.getBoundingClientRect();\n                  return {\n                    x: 20,\n                    y: height / 2,\n                  };\n                },\n                render: ({ container }) => {\n                  container.style.width = rect.width + 'px';\n                  setState({ type: 'preview', container });\n                  setRootState({ type: 'preview', container, item });\n                },\n              });\n            }\n          : undefined,\n        onDragStart: () => {\n          setState({ type: 'is-dragging' });\n          setRootState({ type: 'is-dragging', item });\n        },\n        onDrop: () => {\n          setState(idle);\n          setRootState(idle);\n        },\n      }),\n\n      //\n      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements\n      //\n      dropTargetForElements({\n        element,\n        canDrop: ({ source }) => {\n          return source.element !== element && isItem(source.data);\n        },\n        getData: ({ input }) => {\n          return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });\n        },\n        getIsSticky: () => true,\n        onDragEnter: ({ self }) => {\n          const closestEdge = extractClosestEdge(self.data);\n          setState({ type: 'is-dragging-over', closestEdge });\n        },\n        onDrag: ({ self }) => {\n          const closestEdge = extractClosestEdge(self.data);\n          setState((current) => {\n            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n              return current;\n            }\n            return { type: 'is-dragging-over', closestEdge };\n          });\n        },\n        onDragLeave: () => {\n          setState(idle);\n        },\n        onDrop: () => {\n          setState(idle);\n        },\n      }),\n    );\n  }, [item]);\n\n  return (\n    <ListItemProvider item={item} dragHandleRef={dragHandleRef}>\n      <div className='relative'>\n        <div ref={ref} role='listitem' className={mx('flex', classNames, stateStyles[state.type])}>\n          {children}\n        </div>\n        {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}\n      </div>\n    </ListItemProvider>\n  );\n};\n\n//\n// List item components\n//\n\nexport type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ classNames, icon, ...props }, forwardedRef) => {\n    return (\n      <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>\n        <Icon icon={icon} classNames='cursor-pointer' size={4} />\n      </button>\n    );\n  },\n);\n\nexport const ListItemDeleteButton = ({\n  autoHide = true,\n  classNames,\n  ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n  const { state } = useListContext('DELETE_BUTTON');\n  const disabled = state.type !== 'idle';\n  return (\n    <IconButton\n      icon='ph--x--regular'\n      disabled={disabled}\n      classNames={[classNames, autoHide && disabled && 'hidden']}\n      {...props}\n    />\n  );\n};\n\nexport const ListItemDragHandle = () => {\n  const { dragHandleRef } = useListItemContext('DRAG_HANDLE');\n  return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;\n};\n\nexport const ListItemDragPreview = <T extends ListItemRecord>({\n  children,\n}: {\n  children: ({ item }: { item: T }) => ReactNode;\n}) => {\n  const { state } = useListContext('DRAG_PREVIEW');\n  return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (\n  <div className={mx('flex w-full', classNames)}>{children}</div>\n);\n\nexport const ListItemTitle = ({\n  classNames,\n  children,\n  ...props\n}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (\n  <div className={mx('flex w-full items-center', classNames)} {...props}>\n    {children}\n  </div>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';\nimport React, { type CSSProperties, type HTMLAttributes } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst edgeToOrientationMap: Record<Edge, Orientation> = {\n  top: 'horizontal',\n  bottom: 'horizontal',\n  left: 'vertical',\n  right: 'vertical',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',\n  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',\n};\n\nconst edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {\n  top: 'top-[--line-offset] before:top-[--offset-terminal]',\n  right: 'right-[--line-offset] before:right-[--offset-terminal]',\n  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',\n  left: 'left-[--line-offset] before:left-[--offset-terminal]',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\n\n/**\n * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`\n */\nexport const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {\n  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n\n  const orientation = edgeToOrientationMap[edge];\n\n  return (\n    <div\n      style={\n        {\n          '--line-thickness': `${strokeSize}px`,\n          '--line-offset': `${lineOffset}`,\n          '--terminal-size': `${terminalSize}px`,\n          '--terminal-radius': `${terminalSize / 2}px`,\n          '--negative-terminal-size': `-${terminalSize}px`,\n          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n        } as CSSProperties\n      }\n      className={mx(\n        'absolute z-10 pointer-events-none bg-blue-700',\n        \"before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute\",\n        'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',\n        orientationStyles[orientation],\n        edgeStyles[edge],\n      )}\n    ></div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type ReactNode, useEffect, useState } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { type ThemedClassName, useControlledValue } from '@dxos/react-ui';\n\nimport { type ListItemRecord, idle, type ItemState } from './ListItem';\n\ntype ListContext<T extends ListItemRecord> = {\n  isItem: (item: any) => boolean;\n  dragPreview?: boolean;\n  state: ItemState & { item?: T };\n  setState: (state: ItemState & { item?: T }) => void;\n};\n\nconst LIST_NAME = 'List';\n\nexport const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);\n\nexport type ListRendererProps<T extends ListItemRecord> = {\n  state: ListContext<T>['state'];\n  items: T[];\n};\n\nexport type ListRootProps<T extends ListItemRecord> = ThemedClassName<{\n  children?: (props: ListRendererProps<T>) => ReactNode;\n  items?: T[];\n}> &\n  Pick<ListContext<T>, 'isItem' | 'dragPreview'>;\n\nexport const ListRoot = <T extends ListItemRecord>({\n  classNames,\n  children,\n  items: _items = [],\n  isItem,\n  ...props\n}: ListRootProps<T>) => {\n  const [items, setItems] = useControlledValue<T[]>(_items);\n  const [state, setState] = useState<ListContext<T>['state']>(idle);\n  useEffect(() => {\n    return monitorForElements({\n      canMonitor: ({ source }) => isItem(source.data),\n      onDrop: ({ location, source }) => {\n        const target = location.current.dropTargets[0];\n        if (!target) {\n          return;\n        }\n\n        const sourceData = source.data;\n        const targetData = target.data;\n        if (!isItem(sourceData) || !isItem(targetData)) {\n          return;\n        }\n\n        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);\n        const targetIdx = items.findIndex((item) => item.id === targetData.id);\n        if (targetIdx < 0 || sourceIdx < 0) {\n          return;\n        }\n\n        const closestEdgeOfTarget = extractClosestEdge(targetData);\n        flushSync(() => {\n          setItems(\n            reorderWithEdge({\n              list: items,\n              startIndex: sourceIdx,\n              indexOfTarget: targetIdx,\n              axis: 'vertical',\n              closestEdgeOfTarget,\n            }),\n          );\n        });\n      },\n    });\n  }, [items]);\n\n  return <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items })}</ListProvider>;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  IconButton,\n  type IconButtonProps,\n  ListItem,\n  ListItemDeleteButton,\n  ListItemDragHandle,\n  ListItemDragPreview,\n  type ListItemProps,\n  type ListItemRecord,\n  ListItemTitle,\n  ListItemWrapper,\n} from './ListItem';\nimport { ListRoot, type ListRootProps } from './ListRoot';\n\n// TODO(burdon): Multi-select model.\n// TODO(burdon): Key nav.\n// TODO(burdon): Animation.\n// TODO(burdon): Constrain axis.\n// TODO(burdon): Tree view.\n// TODO(burdon): Fix autoscroll while dragging.\n\n/**\n * Draggable list.\n * Ref: https://github.com/atlassian/pragmatic-drag-and-drop\n * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx\n */\nexport const List = {\n  Root: ListRoot,\n  Item: ListItem,\n  ItemDragPreview: ListItemDragPreview,\n  ItemWrapper: ListItemWrapper,\n  ItemDragHandle: ListItemDragHandle,\n  ItemDeleteButton: ListItemDeleteButton,\n  ItemTitle: ListItemTitle,\n  IconButton,\n};\n\ntype ListItem = ListItemRecord;\n\nexport type { ListRootProps, ListItemProps, IconButtonProps, ListItem };\n"],
+  "mappings": ";;;AAIA,SAASA,eAAe;AACxB,SAASC,WAAWC,6BAA6B;AACjD,SAASC,kCAAkC;AAE3C,SAASC,mBAAmBC,sBAAAA,2BAA0B;AACtD,SAASC,iBAAAA,sBAAqB;AAC9B,OAAOC,UAMLC,YACAC,aAAAA,YACAC,QACAC,YAAAA,iBACK;AACP,SAASC,oBAAoB;AAE7B,SAASC,iBAAiB;AAE1B,SAASC,YAAY;AACrB,SAASC,MAAAA,WAAU;;;ACrBnB,OAAOC,WAAwD;AAE/D,SAASC,UAAU;AAInB,IAAMC,uBAAkD;EACtDC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,OAAO;AACT;AAEA,IAAMC,oBAAmF;EACvFC,YAAY;EACZC,UAAU;AACZ;AAEA,IAAMC,aAAqE;EACzEP,KAAK;EACLG,OAAO;EACPF,QAAQ;EACRC,MAAM;AACR;AAEA,IAAMM,aAAa;AACnB,IAAMC,eAAe;AACrB,IAAMC,iCAAiCF,aAAaC,gBAAgB;AAK7D,IAAME,gBAAgB,CAAC,EAAEC,MAAMC,MAAM,MAAK,MAAgC;AAC/E,QAAMC,aAAa,gBAAgBD,GAAAA,MAASL,UAAAA;AAE5C,QAAMO,cAAchB,qBAAqBa,IAAAA;AAEzC,SACE,sBAAA,cAACI,OAAAA;IACCC,OACE;MACE,oBAAoB,GAAGT,UAAAA;MACvB,iBAAiB,GAAGM,UAAAA;MACpB,mBAAmB,GAAGL,YAAAA;MACtB,qBAAqB,GAAGA,eAAe,CAAA;MACvC,4BAA4B,IAAIA,YAAAA;MAChC,qBAAqB,GAAGC,6BAAAA;IAC1B;IAEFQ,WAAWC,GACT,iDACA,wGACA,0GACAf,kBAAkBW,WAAAA,GAClBR,WAAWK,IAAAA,CAAK;;AAIxB;;;AC3DA,SAASQ,0BAA0B;AACnC,SAASC,0BAA0B;AACnC,SAASC,uBAAuB;AAChC,SAASC,qBAAqB;AAC9B,OAAOC,UAAyBC,WAAWC,gBAAgB;AAC3D,SAASC,iBAAiB;AAE1B,SAA+BC,0BAA0B;AAWzD,IAAMC,YAAY;AAEX,IAAM,CAACC,cAAcC,cAAAA,IAAkBC,cAAgCH,SAAAA;AAavE,IAAMI,WAAW,CAA2B,EACjDC,YACAC,UACAC,OAAOC,SAAS,CAAA,GAChBC,QACA,GAAGC,MAAAA,MACc;AACjB,QAAM,CAACH,OAAOI,QAAAA,IAAYC,mBAAwBJ,MAAAA;AAClD,QAAM,CAACK,OAAOC,QAAAA,IAAYC,SAAkCC,IAAAA;AAC5DC,YAAU,MAAA;AACR,WAAOC,mBAAmB;MACxBC,YAAY,CAAC,EAAEC,OAAM,MAAOX,OAAOW,OAAOC,IAAI;MAC9CC,QAAQ,CAAC,EAAEC,UAAUH,OAAM,MAAE;AAC3B,cAAMI,SAASD,SAASE,QAAQC,YAAY,CAAA;AAC5C,YAAI,CAACF,QAAQ;AACX;QACF;AAEA,cAAMG,aAAaP,OAAOC;AAC1B,cAAMO,aAAaJ,OAAOH;AAC1B,YAAI,CAACZ,OAAOkB,UAAAA,KAAe,CAAClB,OAAOmB,UAAAA,GAAa;AAC9C;QACF;AAEA,cAAMC,YAAYtB,MAAMuB,UAAU,CAACC,SAASA,KAAKC,OAAOL,WAAWK,EAAE;AACrE,cAAMC,YAAY1B,MAAMuB,UAAU,CAACC,SAASA,KAAKC,OAAOJ,WAAWI,EAAE;AACrE,YAAIC,YAAY,KAAKJ,YAAY,GAAG;AAClC;QACF;AAEA,cAAMK,sBAAsBC,mBAAmBP,UAAAA;AAC/CQ,kBAAU,MAAA;AACRzB,mBACE0B,gBAAgB;YACdC,MAAM/B;YACNgC,YAAYV;YACZW,eAAeP;YACfQ,MAAM;YACNP;UACF,CAAA,CAAA;QAEJ,CAAA;MACF;IACF,CAAA;EACF,GAAG;IAAC3B;GAAM;AAEV,SAAO,gBAAAmC,OAAA,cAACzC,cAAiB;IAAEQ;IAAQI;IAAOC;IAAU,GAAGJ;EAAM,GAAIJ,WAAW;IAAEO;IAAON;EAAM,CAAA,CAAA;AAC7F;;;;AFnCO,IAAMoC,OAAkB;EAAEC,MAAM;AAAO;AAE9C,IAAMC,cAA4F;EAChG,eAAe;AACjB;AAUA,IAAMC,iBAAuC,CAAC;AAE9C,IAAMC,iBAAiB;AAEhB,IAAM,CAACC,kBAAkBC,kBAAAA,IAAsBC,eACpDH,gBACAD,cAAAA;AAYK,IAAMK,WAAW,CAA2B,EAAEC,UAAUC,YAAYC,KAAI,MAAoB;AACjG,QAAM,EAAEC,QAAQC,aAAaC,UAAUC,aAAY,IAAKC,eAAeZ,cAAAA;AACvE,QAAMa,MAAMC,OAA8B,IAAA;AAC1C,QAAMC,gBAAgBD,OAA2B,IAAA;AACjD,QAAM,CAACE,OAAON,QAAAA,IAAYO,UAAoBrB,IAAAA;AAC9CsB,EAAAA,WAAU,MAAA;AACR,UAAMC,UAAUN,IAAIO;AACpBC,cAAUF,SAAAA,QAAAA;;;;;;;;;AACV,WAAOG;;;;MAILC,UAAU;QACRJ;QACAK,YAAYT,cAAcK;QAC1BK,gBAAgB,MAAMlB;QACtBmB,uBAAuBjB,cACnB,CAAC,EAAEkB,oBAAoBC,OAAM,MAAE;AAC7B,gBAAMC,OAAOD,OAAOT,QAAQW,sBAAqB;AACjDC,qCAA2B;YACzBJ;YACAK,WAAW,CAAC,EAAEC,UAAS,MAAE;AACvB,oBAAM,EAAEC,OAAM,IAAKD,UAAUH,sBAAqB;AAClD,qBAAO;gBACLK,GAAG;gBACHC,GAAGF,SAAS;cACd;YACF;YACAG,QAAQ,CAAC,EAAEJ,UAAS,MAAE;AACpBA,wBAAUK,MAAMC,QAAQV,KAAKU,QAAQ;AACrC7B,uBAAS;gBAAEb,MAAM;gBAAWoC;cAAU,CAAA;AACtCtB,2BAAa;gBAAEd,MAAM;gBAAWoC;gBAAW1B;cAAK,CAAA;YAClD;UACF,CAAA;QACF,IACAiC;QACJC,aAAa,MAAA;AACX/B,mBAAS;YAAEb,MAAM;UAAc,CAAA;AAC/Bc,uBAAa;YAAEd,MAAM;YAAeU;UAAK,CAAA;QAC3C;QACAmC,QAAQ,MAAA;AACNhC,mBAASd,IAAAA;AACTe,uBAAaf,IAAAA;QACf;MACF,CAAA;;;;MAKA+C,sBAAsB;QACpBxB;QACAyB,SAAS,CAAC,EAAEhB,OAAM,MAAE;AAClB,iBAAOA,OAAOT,YAAYA,WAAWX,OAAOoB,OAAOiB,IAAI;QACzD;QACAC,SAAS,CAAC,EAAEC,MAAK,MAAE;AACjB,iBAAOC,kBAAkBzC,MAAM;YAAEY;YAAS4B;YAAOE,cAAc;cAAC;cAAO;;UAAU,CAAA;QACnF;QACAC,aAAa,MAAM;QACnBC,aAAa,CAAC,EAAEC,KAAI,MAAE;AACpB,gBAAMC,cAAcC,oBAAmBF,KAAKP,IAAI;AAChDnC,mBAAS;YAAEb,MAAM;YAAoBwD;UAAY,CAAA;QACnD;QACAE,QAAQ,CAAC,EAAEH,KAAI,MAAE;AACf,gBAAMC,cAAcC,oBAAmBF,KAAKP,IAAI;AAChDnC,mBAAS,CAACU,YAAAA;AACR,gBAAIA,QAAQvB,SAAS,sBAAsBuB,QAAQiC,gBAAgBA,aAAa;AAC9E,qBAAOjC;YACT;AACA,mBAAO;cAAEvB,MAAM;cAAoBwD;YAAY;UACjD,CAAA;QACF;QACAG,aAAa,MAAA;AACX9C,mBAASd,IAAAA;QACX;QACA8C,QAAQ,MAAA;AACNhC,mBAASd,IAAAA;QACX;MACF,CAAA;IAAA;EAEJ,GAAG;IAACW;GAAK;AAET,SACE,gBAAAkD,OAAA,cAACxD,kBAAAA;IAAiBM;IAAYQ;KAC5B,gBAAA0C,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACC,OAAAA;IAAI7C;IAAU+C,MAAK;IAAWD,WAAWE,IAAG,QAAQvD,YAAYR,YAAYkB,MAAMnB,IAAI,CAAC;KACrFQ,QAAAA,GAEFW,MAAMnB,SAAS,sBAAsBmB,MAAMqC,eAAe,gBAAAI,OAAA,cAACK,eAAAA;IAAcC,MAAM/C,MAAMqC;;AAI9F;AAQO,IAAMW,aAAaC,2BACxB,CAAC,EAAE3D,YAAY4D,MAAM,GAAGC,MAAAA,GAASC,iBAAAA;AAC/B,SACE,gBAAAX,OAAA,cAACY,UAAAA;IAAOxD,KAAKuD;IAAcT,WAAWE,IAAG,oCAAoCvD,UAAAA;IAAc,GAAG6D;KAC5F,gBAAAV,OAAA,cAACa,MAAAA;IAAKJ;IAAY5D,YAAW;IAAiBiE,MAAM;;AAG1D,CAAA;AAGK,IAAMC,uBAAuB,CAAC,EACnCC,WAAW,MACXnE,YACA,GAAG6D,MAAAA,MACoD;AACvD,QAAM,EAAEnD,MAAK,IAAKJ,eAAe,eAAA;AACjC,QAAM8D,WAAW1D,MAAMnB,SAAS;AAChC,SACE,gBAAA4D,OAAA,cAACO,YAAAA;IACCE,MAAK;IACLQ;IACApE,YAAY;MAACA;MAAYmE,YAAYC,YAAY;;IAChD,GAAGP;;AAGV;AAEO,IAAMQ,qBAAqB,MAAA;AAChC,QAAM,EAAE5D,cAAa,IAAKb,mBAAmB,aAAA;AAC7C,SAAO,gBAAAuD,OAAA,cAACO,YAAAA;IAAWnD,KAAKE;IAAsBmD,MAAK;;AACrD;AAEO,IAAMU,sBAAsB,CAA2B,EAC5DvE,SAAQ,MAGT;AACC,QAAM,EAAEW,MAAK,IAAKJ,eAAe,cAAA;AACjC,SAAOI,OAAOnB,SAAS,YAAYgF,6BAAaxE,SAAS;IAAEE,MAAMS,MAAMT;EAAK,CAAA,GAAIS,MAAMiB,SAAS,IAAI;AACrG;AAEO,IAAM6C,kBAAkB,CAAC,EAAExE,YAAYD,SAAQ,MACpD,gBAAAoD,OAAA,cAACC,OAAAA;EAAIC,WAAWE,IAAG,eAAevD,UAAAA;GAAcD,QAAAA;AAG3C,IAAM0E,gBAAgB,CAAC,EAC5BzE,YACAD,UACA,GAAG8D,MAAAA,MAEH,gBAAAV,OAAA,cAACC,OAAAA;EAAIC,WAAWE,IAAG,4BAA4BvD,UAAAA;EAAc,GAAG6D;GAC7D9D,QAAAA;;;AGzME,IAAM2E,OAAO;EAClBC,MAAMC;EACNC,MAAMC;EACNC,iBAAiBC;EACjBC,aAAaC;EACbC,gBAAgBC;EAChBC,kBAAkBC;EAClBC,WAAWC;EACXC;AACF;",
+  "names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "mx", "React", "mx", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "div", "style", "className", "mx", "monitorForElements", "extractClosestEdge", "reorderWithEdge", "createContext", "React", "useEffect", "useState", "flushSync", "useControlledValue", "LIST_NAME", "ListProvider", "useListContext", "createContext", "ListRoot", "classNames", "children", "items", "_items", "isItem", "props", "setItems", "useControlledValue", "state", "setState", "useState", "idle", "useEffect", "monitorForElements", "canMonitor", "source", "data", "onDrop", "location", "target", "current", "dropTargets", "sourceData", "targetData", "sourceIdx", "findIndex", "item", "id", "targetIdx", "closestEdgeOfTarget", "extractClosestEdge", "flushSync", "reorderWithEdge", "list", "startIndex", "indexOfTarget", "axis", "React", "idle", "type", "stateStyles", "defaultContext", "LIST_ITEM_NAME", "ListItemProvider", "useListItemContext", "createContext", "ListItem", "children", "classNames", "item", "isItem", "dragPreview", "setState", "setRootState", "useListContext", "ref", "useRef", "dragHandleRef", "state", "useState", "useEffect", "element", "current", "invariant", "combine", "draggable", "dragHandle", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "source", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "height", "x", "y", "render", "style", "width", "undefined", "onDragStart", "onDrop", "dropTargetForElements", "canDrop", "data", "getData", "input", "attachClosestEdge", "allowedEdges", "getIsSticky", "onDragEnter", "self", "closestEdge", "extractClosestEdge", "onDrag", "onDragLeave", "React", "div", "className", "role", "mx", "DropIndicator", "edge", "IconButton", "forwardRef", "icon", "props", "forwardedRef", "button", "Icon", "size", "ListItemDeleteButton", "autoHide", "disabled", "ListItemDragHandle", "ListItemDragPreview", "createPortal", "ListItemWrapper", "ListItemTitle", "List", "Root", "ListRoot", "Item", "ListItem", "ItemDragPreview", "ListItemDragPreview", "ItemWrapper", "ListItemWrapper", "ItemDragHandle", "ListItemDragHandle", "ItemDeleteButton", "ListItemDeleteButton", "ItemTitle", "ListItemTitle", "IconButton"]
+}

package/dist/lib/node-esm/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytes":6988,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":8857,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24071,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":500,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22108},"packages/ui/react-ui-list/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["List"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6314},"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytesInOutput":1702},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":1927},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":10650}}}

package/dist/types/src/components/List/DropIndicator.d.ts

@@ -0,0 +1,10 @@
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import React from 'react';
+/**
+ * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
+ */
+export declare const DropIndicator: ({ edge, gap }: {
+    edge: Edge;
+    gap?: string;
+}) => React.JSX.Element;
+//# sourceMappingURL=DropIndicator.d.ts.map

package/dist/types/src/components/List/DropIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/DropIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,gDAAgD,CAAC;AAC3E,OAAO,KAAkD,MAAM,OAAO,CAAC;AA6BvE;;GAEG;AACH,eAAO,MAAM,aAAa,kBAA2B;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,sBA0BhF,CAAC"}

package/dist/types/src/components/List/List.d.ts

@@ -0,0 +1,26 @@
+import { type IconButtonProps, ListItem, type ListItemProps, type ListItemRecord } from './ListItem';
+import { type ListRootProps } from './ListRoot';
+/**
+ * Draggable list.
+ * Ref: https://github.com/atlassian/pragmatic-drag-and-drop
+ * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx
+ */
+export declare const List: {
+    Root: <T extends ListItemRecord>({ classNames, children, items: _items, isItem, ...props }: ListRootProps<T>) => import("react").JSX.Element;
+    Item: <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => import("react").JSX.Element;
+    ItemDragPreview: <T extends ListItemRecord>({ children, }: {
+        children: ({ item }: {
+            item: T;
+        }) => import("react").ReactNode;
+    }) => import("react").ReactPortal | null;
+    ItemWrapper: ({ classNames, children }: import("packages/ui/react-ui/dist/types/src").ThemedClassName<import("react").PropsWithChildren>) => import("react").JSX.Element;
+    ItemDragHandle: () => import("react").JSX.Element;
+    ItemDeleteButton: ({ autoHide, classNames, ...props }: Omit<IconButtonProps, "icon"> & {
+        autoHide?: boolean;
+    }) => import("react").JSX.Element;
+    ItemTitle: ({ classNames, children, ...props }: import("packages/ui/react-ui/dist/types/src").ThemedClassName<import("react").PropsWithChildren<import("react").ComponentProps<"div">>>) => import("react").JSX.Element;
+    IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+type ListItem = ListItemRecord;
+export type { ListRootProps, ListItemProps, IconButtonProps, ListItem };
+//# sourceMappingURL=List.d.ts.map

package/dist/types/src/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,QAAQ,EAIR,KAAK,aAAa,EAClB,KAAK,cAAc,EAGpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAS1D;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;gBAc43J,CAAC;;;;CAL74J,CAAC;AAEF,KAAK,QAAQ,GAAG,cAAc,CAAC;AAE/B,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC"}

package/dist/types/src/components/List/List.stories.d.ts

@@ -0,0 +1,13 @@
+import '@dxos-theme';
+import React from 'react';
+import { type ListRootProps } from './List';
+import { type TestItemType } from '../../testing';
+declare const _default: {
+    title: string;
+    decorators: import("@storybook/react/*").Decorator[];
+    render: ({ items, ...props }: ListRootProps<TestItemType>) => React.JSX.Element;
+};
+export default _default;
+export declare const Default: any;
+export declare const Simple: any;
+//# sourceMappingURL=List.stories.d.ts.map

package/dist/types/src/components/List/List.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;;;;kCAKrC,aAAa,CAAC,YAAY,CAAC;;AAmEpE,wBAKE;AAIF,eAAO,MAAM,OAAO,EAKf,GAAG,CAAC;AAET,eAAO,MAAM,MAAM,EAMd,GAAG,CAAC"}

package/dist/types/src/components/List/ListItem.d.ts

@@ -0,0 +1,52 @@
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import React, { type ComponentProps, type MutableRefObject, type PropsWithChildren, type ReactNode } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type ListItemRecord = {
+    id: string;
+};
+export type ItemState = {
+    type: 'idle';
+} | {
+    type: 'preview';
+    container: HTMLElement;
+} | {
+    type: 'is-dragging';
+} | {
+    type: 'is-dragging-over';
+    closestEdge: Edge | null;
+};
+export declare const idle: ItemState;
+type ListItemContext<T extends ListItemRecord> = {
+    item: T;
+    dragHandleRef: MutableRefObject<HTMLElement | null>;
+};
+export declare const ListItemProvider: {
+    (props: ListItemContext<any> & {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}, useListItemContext: (consumerName: string) => ListItemContext<any>;
+export type ListItemProps<T extends ListItemRecord> = ThemedClassName<PropsWithChildren<{
+    item: T;
+}>>;
+/**
+ * Draggable list item.
+ */
+export declare const ListItem: <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => React.JSX.Element;
+export type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & {
+    icon: string;
+};
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ListItemDeleteButton: ({ autoHide, classNames, ...props }: Omit<IconButtonProps, "icon"> & {
+    autoHide?: boolean;
+}) => React.JSX.Element;
+export declare const ListItemDragHandle: () => React.JSX.Element;
+export declare const ListItemDragPreview: <T extends ListItemRecord>({ children, }: {
+    children: ({ item }: {
+        item: T;
+    }) => ReactNode;
+}) => React.ReactPortal | null;
+export declare const ListItemWrapper: ({ classNames, children }: ThemedClassName<PropsWithChildren>) => React.JSX.Element;
+export declare const ListItemTitle: ({ classNames, children, ...props }: ThemedClassName<PropsWithChildren<ComponentProps<"div">>>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ListItem.d.ts.map

package/dist/types/src/components/List/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,uDAAuD,CAAC;AAGlF,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EAEnB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAOtD,MAAM,MAAM,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5C,MAAM,MAAM,SAAS,GACjB;IACE,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,WAAW,CAAC;CACxB,GACD;IACE,IAAI,EAAE,aAAa,CAAC;CACrB,GACD;IACE,IAAI,EAAE,kBAAkB,CAAC;IACzB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEN,eAAO,MAAM,IAAI,EAAE,SAA4B,CAAC;AAMhD,KAAK,eAAe,CAAC,CAAC,SAAS,cAAc,IAAI;IAC/C,IAAI,EAAE,CAAC,CAAC;IACR,aAAa,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC;AASF,eAAO,MAAO,gBAAgB;;wBA7DyD,SAAS;;;GA6DhE,kBAAkB,gDAGjD,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,IAAI,eAAe,CACnE,iBAAiB,CAAC;IAChB,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,CACH,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,cAAc,kCAAkC,aAAa,CAAC,CAAC,CAAC,sBA2FlG,CAAC;AAMF,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3F,eAAO,MAAM,UAAU,wGAQtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAI9B,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,sBAWxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,yBAG9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,cAAc,iBAEzD;IACD,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,KAAK,SAAS,CAAC;CAChD,6BAGA,CAAC;AAEF,eAAO,MAAM,eAAe,6BAA8B,eAAe,CAAC,iBAAiB,CAAC,sBAE3F,CAAC;AAEF,eAAO,MAAM,aAAa,uCAIvB,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,sBAI3D,CAAC"}

package/dist/types/src/components/List/ListRoot.d.ts

@@ -0,0 +1,30 @@
+import React, { type ReactNode } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type ListItemRecord, type ItemState } from './ListItem';
+type ListContext<T extends ListItemRecord> = {
+    isItem: (item: any) => boolean;
+    dragPreview?: boolean;
+    state: ItemState & {
+        item?: T;
+    };
+    setState: (state: ItemState & {
+        item?: T;
+    }) => void;
+};
+export declare const ListProvider: {
+    (props: ListContext<any> & {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}, useListContext: (consumerName: string) => ListContext<any>;
+export type ListRendererProps<T extends ListItemRecord> = {
+    state: ListContext<T>['state'];
+    items: T[];
+};
+export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
+    children?: (props: ListRendererProps<T>) => ReactNode;
+    items?: T[];
+}> & Pick<ListContext<T>, 'isItem' | 'dragPreview'>;
+export declare const ListRoot: <T extends ListItemRecord>({ classNames, children, items: _items, isItem, ...props }: ListRootProps<T>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ListRoot.d.ts.map

package/dist/types/src/components/List/ListRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListRoot.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAGnE,OAAO,EAAE,KAAK,eAAe,EAAsB,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvE,KAAK,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI;IAC3C,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CACrD,CAAC;AAIF,eAAO,MAAO,YAAY;;wBAlBoD,SAAS;;;GAkB3D,cAAc,4CAA8C,CAAC;AAEzF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,IAAI;IACxD,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,IAAI,eAAe,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;CACb,CAAC,GACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC,CAAC;AAEjD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,cAAc,6DAM9C,aAAa,CAAC,CAAC,CAAC,sBAyClB,CAAC"}

package/dist/types/src/components/List/index.d.ts

@@ -0,0 +1,2 @@
+export * from './List';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './List';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/testing.d.ts

@@ -0,0 +1,15 @@
+import { S } from '@dxos/echo-schema';
+export declare const TestItemSchema: S.Struct<{
+    id: typeof S.String;
+    name: typeof S.String;
+}>;
+export type TestItemType = S.Schema.Type<typeof TestItemSchema>;
+export declare const TestList: S.Struct<{
+    items: S.mutable<S.Array$<S.Struct<{
+        id: typeof S.String;
+        name: typeof S.String;
+    }>>>;
+}>;
+export type TestList = S.Schema.Type<typeof TestList>;
+export declare const createList: (n?: number) => TestList;
+//# sourceMappingURL=testing.d.ts.map

package/dist/types/src/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/testing.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAGtC,eAAO,MAAM,cAAc;;;EAGzB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAEhE,eAAO,MAAM,QAAQ;;;;;EAEnB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEtD,eAAO,MAAM,UAAU,kBAAa,QAQlC,CAAC"}