@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-5KJ7TEQ6.js

@@ -0,0 +1,305 @@
+import { useReorder } from './chunk-D2LN4I7I.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Animated, Pressable, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  list: "Sortable list",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  moveToTop: "Move to top",
+  moveToBottom: "Move to bottom",
+  moved: (label, position, count) => `Moved ${label} to position ${position} of ${count}`,
+  movedNotice: (label) => `Moved ${label}`,
+  restored: (label, position, count) => `Restored ${label} to position ${position} of ${count}`,
+  pickedUp: (label) => `Picked up ${label}`,
+  droppedInPlace: (label) => `${label} dropped where it started`,
+  rowHint: (position, count) => `Position ${position} of ${count}. Press and hold to drag, or use the actions to move it.`
+};
+var rowActions = (labels) => [
+  { name: "moveUp", label: labels.moveUp },
+  { name: "moveDown", label: labels.moveDown },
+  { name: "moveToTop", label: labels.moveToTop },
+  { name: "moveToBottom", label: labels.moveToBottom }
+];
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function Sortable({
+  items,
+  order,
+  defaultOrder,
+  onReorder,
+  onDraggingChange,
+  label: labelProp,
+  numbered = true,
+  handleIcon = "grip",
+  disabled = false,
+  density = "standard",
+  formatAnnouncement,
+  motion = "full",
+  onNotify,
+  liftedId,
+  style,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("sortable", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.list;
+  const ids = React.useMemo(() => items.map((item) => item.id), [items]);
+  const byId = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+  const isControlled = order !== void 0;
+  const [internalOrder, setInternalOrder] = React.useState(() => defaultOrder ?? ids);
+  const rawOrder = isControlled ? order : internalOrder;
+  const resolved = React.useMemo(() => {
+    const known = new Set(ids);
+    const kept = rawOrder.filter((id) => known.has(id));
+    const seen = new Set(kept);
+    return [...kept, ...ids.filter((id) => !seen.has(id))];
+  }, [ids, rawOrder]);
+  const [message, setMessage] = React.useState("");
+  const moveTo = (id, index) => {
+    const from = resolved.indexOf(id);
+    const to = clamp(index, 0, resolved.length - 1);
+    if (from < 0 || from === to) return;
+    const next = [...resolved];
+    next.splice(from, 1);
+    next.splice(to, 0, id);
+    if (!isControlled) setInternalOrder(next);
+    const detail = {
+      id,
+      label: byId.get(id)?.label ?? id,
+      from,
+      to,
+      count: next.length
+    };
+    onReorder?.(next, detail);
+    setMessage(
+      formatAnnouncement ? formatAnnouncement(detail) : labels.moved(detail.label, detail.to + 1, detail.count)
+    );
+    if (onNotify) {
+      const before = resolved;
+      onNotify({
+        text: labels.movedNotice(detail.label),
+        undo: () => {
+          if (!isControlled) setInternalOrder(before);
+          onReorder?.(before, { ...detail, from: to, to: from });
+          setMessage(labels.restored(detail.label, from + 1, detail.count));
+        }
+      });
+    }
+  };
+  const draggingRef = React.useRef(onDraggingChange);
+  draggingRef.current = onDraggingChange;
+  const reorder = useReorder({
+    motion,
+    liftHaptic: "light",
+    disabled,
+    renderGhost: (id) => {
+      const item = byId.get(id);
+      return item ? /* @__PURE__ */ jsx(
+        RowBody,
+        {
+          item,
+          index: resolved.indexOf(id),
+          numbered,
+          handleIcon,
+          density,
+          lifted: true
+        }
+      ) : null;
+    },
+    onLift: (id) => {
+      draggingRef.current?.(true);
+      setMessage(labels.pickedUp(byId.get(id)?.label ?? id));
+    },
+    onMove: ({ id, to }) => {
+      draggingRef.current?.(false);
+      moveTo(id, to);
+    },
+    onCancel: (id) => {
+      draggingRef.current?.(false);
+      setMessage(labels.droppedInPlace(byId.get(id)?.label ?? id));
+    }
+  });
+  const step = (id, to) => {
+    if (disabled) return false;
+    const from = resolved.indexOf(id);
+    const target = clamp(to, 0, resolved.length - 1);
+    if (from < 0 || target === from) return false;
+    reorder.animate(() => moveTo(id, target));
+    return true;
+  };
+  const onKey = (event, id) => {
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    const index = resolved.indexOf(id);
+    const to = event.key === "ArrowUp" ? index - 1 : event.key === "ArrowDown" ? index + 1 : event.key === "Home" ? 0 : event.key === "End" ? resolved.length - 1 : null;
+    if (to !== null && step(id, to)) event.preventDefault?.();
+  };
+  const onAction = (event, id) => {
+    const index = resolved.indexOf(id);
+    const name = event.nativeEvent.actionName;
+    if (name === "moveUp") step(id, index - 1);
+    else if (name === "moveDown") step(id, index + 1);
+    else if (name === "moveToTop") step(id, 0);
+    else if (name === "moveToBottom") step(id, resolved.length - 1);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "list",
+        accessibilityLabel: label,
+        style: [
+          styles.list,
+          density === "compact" ? styles.listCompact : null,
+          density === "comfortable" ? styles.listSpacious : null
+        ],
+        ...reorder.group("list"),
+        children: resolved.map((id, index) => {
+          const item = byId.get(id);
+          const keyProps = {
+            onKeyDown: (event) => onKey(event, id)
+          };
+          return /* @__PURE__ */ jsx(Animated.View, { role: "listitem", ...reorder.item(id, "list", index), children: /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              ...disabled ? {} : reorder.press(id),
+              disabled,
+              accessibilityRole: "button",
+              accessibilityLabel: item.label,
+              accessibilityHint: labels.rowHint(index + 1, resolved.length),
+              accessibilityState: { disabled },
+              accessibilityActions: disabled ? void 0 : rowActions(labels),
+              onAccessibilityAction: (event) => onAction(event, id),
+              style: ({ pressed }) => [styles.press, pressed && !disabled && styles.pressed],
+              ...keyProps,
+              children: /* @__PURE__ */ jsx(
+                RowBody,
+                {
+                  item,
+                  index,
+                  numbered,
+                  handleIcon,
+                  density,
+                  disabled,
+                  lifted: id === liftedId
+                }
+              )
+            }
+          ) }, id);
+        })
+      }
+    ),
+    reorder.overlay,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "status",
+        style: styles.srOnly,
+        accessibilityLabel: message,
+        ...{ "aria-live": "polite" },
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
+      }
+    )
+  ] });
+}
+function RowBody({
+  item,
+  index,
+  numbered,
+  handleIcon,
+  density = "standard",
+  lifted = false,
+  disabled = false
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("sortable");
+  const baseMinHeight = isAndroidIdiom(theme) ? theme.layout.listRowH : theme.ctl.lg;
+  const rowMinHeight = density === "compact" ? baseMinHeight - theme.space[8] : density === "comfortable" ? baseMinHeight + theme.space[8] : baseMinHeight;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.row,
+        { minHeight: rowMinHeight },
+        lifted && styles.rowLifted,
+        disabled && styles.rowDisabled
+      ],
+      children: [
+        lifted ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.draggedLayer }) : null,
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: item.icon ?? handleIcon,
+            size: theme.icon.md,
+            color: lifted ? theme.color.accent : theme.color.text3,
+            strokeWidth: theme.icon.stroke
+          }
+        ),
+        numbered ? /* @__PURE__ */ jsx(Text, { style: styles.position, children: index + 1 }) : null,
+        /* @__PURE__ */ jsx(Text, { style: styles.label, numberOfLines: 1, children: item.label }),
+        item.meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: item.meta }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { alignSelf: "stretch" },
+  list: { gap: theme.space.s2 },
+  listCompact: { gap: theme.space.s1 },
+  listSpacious: { gap: theme.space.s3 },
+  press: { borderRadius: theme.radius.md },
+  pressed: { opacity: theme.state.pressedOpacity },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    overflow: "hidden"
+  },
+  // Lifted: an accent edge and the dragged state layer; the ghost carries the shadow.
+  rowLifted: { borderColor: theme.focus.ringColor },
+  rowDisabled: { opacity: theme.state.disabledOpacity },
+  draggedLayer: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: theme.state.dragged
+  },
+  position: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text2
+  },
+  label: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
+  },
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+
+export { Sortable };