@multiplatform.one/components 7.4.1 → 7.5.0

package/dist/cjs/SortableList/SortableHandle.cjs

@@ -0,0 +1,113 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SortableHandle_exports = {};
+__export(SortableHandle_exports, {
+  SortableHandle: () => SortableHandle,
+  SortableHandleWell: () => SortableHandleWell
+});
+module.exports = __toCommonJS(SortableHandle_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_i18n = require("../shared/i18n.cjs");
+var import_t = require("../shared/t.cjs");
+var import_useSortableRows = require("./useSortableRows.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const GRIP_PX = 16;
+function SortableHandle({
+  label,
+  itemId,
+  dragging,
+  compact,
+  onPointerDown,
+  onKeyDown
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  const well = knobProps.nestedControl.px;
+  const [kb, setKb] = (0, import_react2.useState)(false);
+  const isDragging = (0, import_useSortableRows.useSortableDragging)(itemId, dragging);
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": (0, import_t.withInterp)(t("Reorder {{label}}", {
+      label
+    }), {
+      label
+    }),
+    width: well,
+    height: well,
+    minWidth: well,
+    minHeight: well,
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: isDragging ? 1 : 0.45,
+    hoverStyle: {
+      opacity: 1
+    },
+    ...{
+      tag: "button",
+      cursor: isDragging ? "grabbing" : "grab",
+      hitSlop: knobProps.nestedControl.hitSlop,
+      ...(kb ? import_theme.keyboardFocusRingProps : {}),
+      "data-sortable-handle": itemId,
+      "data-focus-ring": "2/0",
+      onPointerDown: e => onPointerDown?.(e),
+      onKeyDown: e => onKeyDown?.(e),
+      onFocus: () => setKb((0, import_theme.wasKeyboardFocus)()),
+      onBlur: () => setKb(false)
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsSixVerticalIcon, {
+      size: GRIP_PX,
+      weight: "bold"
+    })
+  });
+}
+function SortableHandleWell({
+  itemId,
+  compact
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  const well = knobProps.nestedControl.px;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    width: well,
+    height: well,
+    minWidth: well,
+    minHeight: well,
+    ...{
+      "data-sortable-well": itemId
+    }
+  });
+}

package/dist/cjs/SortableList/SortableHandle.native.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SortableHandle_exports = {};
+__export(SortableHandle_exports, {
+  SortableHandle: () => SortableHandle,
+  SortableHandleWell: () => SortableHandleWell
+});
+module.exports = __toCommonJS(SortableHandle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_i18n = require("../shared/i18n.native.js");
+var import_t = require("../shared/t.native.js");
+var import_useSortableRows = require("./useSortableRows.native.js");
+var GRIP_PX = 16;
+function SortableHandle(param) {
+  var {
+    label,
+    itemId,
+    dragging,
+    compact,
+    onPointerDown,
+    onKeyDown
+  } = param;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  var well = knobProps.nestedControl.px;
+  var [kb, setKb] = (0, import_react2.useState)(false);
+  var isDragging = (0, import_useSortableRows.useSortableDragging)(itemId, dragging);
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": (0, import_t.withInterp)(t("Reorder {{label}}", {
+      label
+    }), {
+      label
+    }),
+    width: well,
+    height: well,
+    minWidth: well,
+    minHeight: well,
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: isDragging ? 1 : 0.45,
+    hoverStyle: {
+      opacity: 1
+    },
+    ...{
+      tag: "button",
+      cursor: isDragging ? "grabbing" : "grab",
+      hitSlop: knobProps.nestedControl.hitSlop,
+      ...(kb ? import_theme.keyboardFocusRingProps : {}),
+      "data-sortable-handle": itemId,
+      "data-focus-ring": "2/0",
+      onPointerDown: function onPointerDown1(e) {
+        return onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
+      },
+      onKeyDown: function onKeyDown1(e) {
+        return onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+      },
+      onFocus: function onFocus() {
+        return setKb((0, import_theme.wasKeyboardFocus)());
+      },
+      onBlur: function onBlur() {
+        return setKb(false);
+      }
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsSixVerticalIcon, {
+      size: GRIP_PX,
+      weight: "bold"
+    })
+  });
+}
+function SortableHandleWell(param) {
+  var {
+    itemId,
+    compact
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  var well = knobProps.nestedControl.px;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    width: well,
+    height: well,
+    minWidth: well,
+    minHeight: well,
+    ...{
+      "data-sortable-well": itemId
+    }
+  });
+}
+//# sourceMappingURL=SortableHandle.native.js.map

package/dist/cjs/SortableList/SortableHandle.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SortableHandle_exports","__export","SortableHandle","SortableHandleWell","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_tamagui","import_i18n","import_t","import_useSortableRows","GRIP_PX","param","label","itemId","dragging","compact","onPointerDown","onKeyDown","t","useTranslation","knobProps","useResolvedKnobs","well","nestedControl","px","kb","setKb","useState","isDragging","useSortableDragging","document","ensureKeyboardModalityTracking","jsx","View","role","tabIndex","withInterp","width","height","minWidth","minHeight","alignItems","justifyContent","opacity","hoverStyle","tag","cursor","hitSlop","keyboardFocusRingProps","onPointerDown1","e","onKeyDown1","onFocus","wasKeyboardFocus","onBlur","children","DotsSixVerticalIcon","size","weight"],"sources":["../../../src/SortableList/SortableHandle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/SortableList/index.cjs

@@ -0,0 +1,217 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SortableList_exports = {};
+__export(SortableList_exports, {
+  SortableHandle: () => import_SortableHandle2.SortableHandle,
+  SortableHandleWell: () => import_SortableHandle2.SortableHandleWell,
+  SortableList: () => SortableList,
+  SortableSessionProvider: () => import_useSortableRows2.SortableSessionProvider,
+  useSortableRows: () => import_useSortableRows2.useSortableRows
+});
+module.exports = __toCommonJS(SortableList_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_i18n = require("../shared/i18n.cjs");
+var import_kanbanDnd = require("../views/kanbanDnd.cjs");
+var import_SortableHandle = require("./SortableHandle.cjs");
+var import_useSortableRows = require("./useSortableRows.cjs");
+var import_SortableHandle2 = require("./SortableHandle.cjs");
+var import_useSortableRows2 = require("./useSortableRows.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const LIFT_SHADOW = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 10
+  },
+  shadowOpacity: 0.15,
+  shadowRadius: 20
+};
+function SortableList({
+  items,
+  getId,
+  getLabel,
+  renderItem,
+  onChange,
+  canReorder,
+  disabled,
+  readOnly,
+  disabledStyle = "keepLabel",
+  compact,
+  emptyMessage: emptyMessageProp,
+  "aria-label": ariaLabel,
+  ...stackProps
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  const emptyMessage = emptyMessageProp ?? t("No rows yet");
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  const listId = (0, import_react.useId)();
+  const containerRef = (0, import_react.useRef)(null);
+  const enabled = !disabled && !readOnly && !!onChange;
+  const [rowKb, setRowKb] = (0, import_react.useState)(null);
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
+  const sortable = (0, import_useSortableRows.useSortableRows)({
+    items,
+    getId,
+    getLabel,
+    canReorder,
+    onChange,
+    enabled,
+    containerRef
+  });
+  const onRowFocus = (0, import_react.useCallback)((id, index) => {
+    sortable.setFocusedIndex(index);
+    if ((0, import_theme.wasKeyboardFocus)()) setRowKb(id);
+  }, [sortable]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ref: containerRef,
+    ...knobProps.surface,
+    ...knobProps.borderRadiusOuter,
+    overflow: "hidden",
+    role: "list",
+    "aria-label": ariaLabel,
+    id: listId,
+    ...stackProps,
+    children: [items.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      minHeight: 88,
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: 0.5,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.body,
+        color: "$color11",
+        children: emptyMessage
+      })
+    }) : items.map((item, index) => {
+      const id = sortable.ids[index];
+      const label = sortable.labels[index];
+      const canDrag = sortable.rowEnabled(index);
+      const isSource = sortable.session?.id === id;
+      const isKbFocus = rowKb === id && !sortable.session;
+      const y = sortable.translateForIndex(index);
+      const dimWhole = !canDrag && disabledStyle === "dimWhole";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        role: "listitem",
+        tabIndex: canDrag || !enabled ? 0 : -1,
+        minHeight: import_theme.MIN_PRESS_TARGET,
+        alignItems: "center",
+        gap: "$2",
+        paddingLeft: "$2",
+        paddingRight: "$3",
+        opacity: isSource && sortable.session?.mode === "pointer" ? 0.4 : dimWhole ? 0.5 : 1,
+        backgroundColor: isSource && sortable.session?.mode === "pointer" ? "$color1" : "transparent",
+        borderWidth: isSource && sortable.session?.mode === "pointer" ? 1 : 0,
+        borderStyle: isSource && sortable.session?.mode === "pointer" ? "dashed" : "solid",
+        borderColor: "$color7",
+        y,
+        hoverStyle: {
+          backgroundColor: "$color3"
+        },
+        ...{
+          ...(isKbFocus ? import_theme.keyboardFocusRingProps : {
+            outlineWidth: 0
+          }),
+          "data-sortable-row": id,
+          "aria-disabled": canDrag ? void 0 : true,
+          onKeyDown: e => sortable.onRowKeyDown(index, e),
+          onFocus: () => onRowFocus(id, index),
+          onBlur: () => setRowKb(cur => cur === id ? null : cur)
+        },
+        children: [canDrag ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SortableHandle.SortableHandle, {
+          label,
+          itemId: id,
+          compact,
+          dragging: isSource,
+          onPointerDown: e => sortable.onHandlePointerDown(index, e),
+          onKeyDown: e => sortable.onHandleKeyDown(index, e)
+        }) : enabled ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SortableHandle.SortableHandleWell, {
+          itemId: id,
+          compact
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          flex: 1,
+          minWidth: 0,
+          alignItems: "center",
+          opacity: dimWhole ? 1 : void 0,
+          children: renderItem ? renderItem(item, index) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.body,
+            color: "$color12",
+            numberOfLines: 1,
+            flex: 1,
+            children: label
+          })
+        })]
+      }, id);
+    }), sortable.session?.mode === "keyboard" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      y: sortable.session.targetIndex * (sortable.session.size || import_theme.MIN_PRESS_TARGET),
+      minHeight: import_theme.MIN_PRESS_TARGET,
+      alignItems: "center",
+      paddingLeft: "$2",
+      paddingRight: "$3",
+      backgroundColor: "$color2",
+      ...knobProps.borderRadius,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      scale: import_kanbanDnd.LIFT_SCALE,
+      ...LIFT_SHADOW,
+      pointerEvents: "none",
+      zIndex: 5,
+      ...{
+        "data-sortable-fly": sortable.session.id
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        minHeight: import_theme.MIN_PRESS_TARGET,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SortableHandle.SortableHandle, {
+          label: sortable.session.label,
+          itemId: sortable.session.id,
+          dragging: true
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.body,
+          children: sortable.session.label
+        })]
+      })
+    }) : null, enabled ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      width: 1,
+      height: 1,
+      overflow: "hidden",
+      opacity: 0,
+      pointerEvents: "none",
+      ...sortable.liveProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        children: sortable.announcement
+      })
+    }) : null]
+  });
+}