@dxos/react-ui-list 0.6.12-main.ac23639

package/dist/lib/node/index.cjs

@@ -0,0 +1,328 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var node_exports = {};
+__export(node_exports, {
+  List: () => List
+});
+module.exports = __toCommonJS(node_exports);
+var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+var import_react_context = require("@radix-ui/react-context");
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_invariant = require("@dxos/invariant");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react2 = __toESM(require("react"));
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+var import_reorder_with_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
+var import_react_context2 = require("@radix-ui/react-context");
+var import_react3 = __toESM(require("react"));
+var import_react_dom2 = require("react-dom");
+var import_react_ui2 = require("@dxos/react-ui");
+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__ */ import_react2.default.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: (0, import_react_ui_theme2.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])
+  });
+};
+var LIST_NAME = "List";
+var [ListProvider, useListContext] = (0, import_react_context2.createContext)(LIST_NAME);
+var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props }) => {
+  const [items, setItems] = (0, import_react_ui2.useControlledValue)(_items);
+  const [state, setState] = (0, import_react3.useState)(idle);
+  (0, import_react3.useEffect)(() => {
+    return (0, import_adapter2.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 = (0, import_closest_edge2.extractClosestEdge)(targetData);
+        (0, import_react_dom2.flushSync)(() => {
+          setItems((0, import_reorder_with_edge.reorderWithEdge)({
+            list: items,
+            startIndex: sourceIdx,
+            indexOfTarget: targetIdx,
+            axis: "vertical",
+            closestEdgeOfTarget
+          }));
+        });
+      }
+    });
+  }, [
+    items
+  ]);
+  return /* @__PURE__ */ import_react3.default.createElement(ListProvider, {
+    isItem,
+    state,
+    setState,
+    ...props
+  }, children?.({
+    state,
+    items
+  }));
+};
+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] = (0, import_react_context.createContext)(LIST_ITEM_NAME, defaultContext);
+var ListItem = ({ children, classNames, item }) => {
+  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
+  const ref = (0, import_react.useRef)(null);
+  const dragHandleRef = (0, import_react.useRef)(null);
+  const [state, setState] = (0, import_react.useState)(idle);
+  (0, import_react.useEffect)(() => {
+    const element = ref.current;
+    (0, import_invariant.invariant)(element, void 0, {
+      F: __dxlog_file,
+      L: 89,
+      S: void 0,
+      A: [
+        "element",
+        ""
+      ]
+    });
+    return (0, import_combine.combine)(
+      //
+      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
+      //
+      (0, import_adapter.draggable)({
+        element,
+        dragHandle: dragHandleRef.current,
+        getInitialData: () => item,
+        onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
+          const rect = source.element.getBoundingClientRect();
+          (0, import_set_custom_native_drag_preview.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
+      //
+      (0, import_adapter.dropTargetForElements)({
+        element,
+        canDrop: ({ source }) => {
+          return source.element !== element && isItem(source.data);
+        },
+        getData: ({ input }) => {
+          return (0, import_closest_edge.attachClosestEdge)(item, {
+            element,
+            input,
+            allowedEdges: [
+              "top",
+              "bottom"
+            ]
+          });
+        },
+        getIsSticky: () => true,
+        onDragEnter: ({ self }) => {
+          const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
+          setState({
+            type: "is-dragging-over",
+            closestEdge
+          });
+        },
+        onDrag: ({ self }) => {
+          const closestEdge = (0, import_closest_edge.extractClosestEdge)(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__ */ import_react.default.createElement(ListItemProvider, {
+    item,
+    dragHandleRef
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    ref,
+    role: "listitem",
+    className: (0, import_react_ui_theme.mx)("flex", classNames, stateStyles[state.type])
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react.default.createElement(DropIndicator, {
+    edge: state.closestEdge
+  })));
+};
+var IconButton = /* @__PURE__ */ (0, import_react.forwardRef)(({ classNames, icon, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react.default.createElement("button", {
+    ref: forwardedRef,
+    className: (0, import_react_ui_theme.mx)("flex items-center justify-center", classNames),
+    ...props
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.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__ */ import_react.default.createElement(IconButton, {
+    icon: "ph--x--regular",
+    disabled,
+    classNames: [
+      classNames,
+      autoHide && disabled && "hidden"
+    ],
+    ...props
+  });
+};
+var ListItemDragHandle = () => {
+  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
+  return /* @__PURE__ */ import_react.default.createElement(IconButton, {
+    ref: dragHandleRef,
+    icon: "ph--dots-six--regular"
+  });
+};
+var ListItemDragPreview = ({ children }) => {
+  const { state } = useListContext("DRAG_PREVIEW");
+  return state?.type === "preview" ? /* @__PURE__ */ (0, import_react_dom.createPortal)(children({
+    item: state.item
+  }), state.container) : null;
+};
+var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ import_react.default.createElement("div", {
+  className: (0, import_react_ui_theme.mx)("flex w-full", classNames)
+}, children);
+var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ import_react.default.createElement("div", {
+  className: (0, import_react_ui_theme.mx)("flex w-full items-center", classNames),
+  ...props
+}, children);
+var List = {
+  Root: ListRoot,
+  Item: ListItem,
+  ItemDragPreview: ListItemDragPreview,
+  ItemWrapper: ListItemWrapper,
+  ItemDragHandle: ListItemDragHandle,
+  ItemDeleteButton: ListItemDeleteButton,
+  ItemTitle: ListItemTitle,
+  IconButton
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  List
+});
+//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.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": "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",
+  "names": ["import_react", "import_react_ui_theme", "import_adapter", "import_closest_edge", "import_react_context", "import_react_dom", "import_react_ui", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "React", "div", "style", "className", "mx", "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", "type", "stateStyles", "defaultContext", "LIST_ITEM_NAME", "ListItemProvider", "useListItemContext", "ListItem", "dragPreview", "setRootState", "ref", "useRef", "dragHandleRef", "element", "invariant", "combine", "draggable", "dragHandle", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "height", "x", "y", "render", "width", "undefined", "onDragStart", "dropTargetForElements", "canDrop", "getData", "input", "attachClosestEdge", "allowedEdges", "getIsSticky", "onDragEnter", "self", "closestEdge", "onDrag", "onDragLeave", "role", "IconButton", "forwardRef", "icon", "forwardedRef", "button", "Icon", "size", "ListItemDeleteButton", "autoHide", "disabled", "ListItemDragHandle", "ListItemDragPreview", "createPortal", "ListItemWrapper", "ListItemTitle", "List", "Root", "Item", "ItemDragPreview", "ItemWrapper", "ItemDragHandle", "ItemDeleteButton", "ItemTitle"]
+}

package/dist/lib/node/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/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22106},"packages/ui/react-ui-list/dist/lib/node/index.cjs":{"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":10557}}}