@mieweb/ui 0.6.1-dev.159 → 0.6.1-dev.165

package/dist/chunk-7ZVTLTJF.js

@@ -0,0 +1,109 @@
+import * as React2 from 'react';
+
+// src/hooks/useLiveAnnouncement.ts
+function useLiveAnnouncement() {
+  const [message, setMessage] = React2.useState("");
+  const timerRef = React2.useRef(
+    void 0
+  );
+  const announce = React2.useCallback((next) => {
+    setMessage("");
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setMessage(next), 50);
+  }, []);
+  React2.useEffect(
+    () => () => {
+      if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  return [message, announce];
+}
+function reorderIds(ids, draggedId, targetId, after) {
+  if (draggedId === targetId) return ids;
+  if (!ids.includes(draggedId)) return ids;
+  const without = ids.filter((i) => i !== draggedId);
+  const idx = without.indexOf(targetId);
+  if (idx === -1) return ids;
+  without.splice(after ? idx + 1 : idx, 0, draggedId);
+  return without;
+}
+function useDragReorder({
+  ids,
+  onReorder,
+  canDropOn
+}) {
+  const [draggingId, setDraggingId] = React2.useState(null);
+  const draggingRef = React2.useRef(null);
+  const [over, setOver] = React2.useState(null);
+  const enabled = Boolean(onReorder);
+  const reset = React2.useCallback(() => {
+    draggingRef.current = null;
+    setDraggingId(null);
+    setOver(null);
+  }, []);
+  const rowProps = React2.useCallback(
+    (id) => {
+      if (!enabled) return {};
+      return {
+        draggable: true,
+        // WebKit (iPadOS Safari, incl. remote-pointer sessions) starts a text
+        // selection instead of a drag when the drag source contains selectable
+        // text — suppress selection and explicitly mark the row as the drag
+        // element so press-drag reliably initiates drag-and-drop.
+        style: {
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          WebkitUserDrag: "element"
+        },
+        onDragStart: (e) => {
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", id);
+          draggingRef.current = id;
+          setDraggingId(id);
+        },
+        onDragEnd: reset,
+        onDragOver: (e) => {
+          const dragged = draggingRef.current;
+          if (!dragged || dragged === id || canDropOn && !canDropOn(dragged, id)) {
+            setOver(null);
+            return;
+          }
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          const r = e.currentTarget.getBoundingClientRect();
+          const after = e.clientY > r.top + r.height / 2;
+          setOver(
+            (prev) => prev?.id === id && prev.after === after ? prev : { id, after }
+          );
+        },
+        onDragLeave: () => {
+          setOver((prev) => prev?.id === id ? null : prev);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          const dragged = draggingRef.current ?? e.dataTransfer.getData("text/plain");
+          reset();
+          if (!dragged || dragged === id) return;
+          if (canDropOn && !canDropOn(dragged, id)) return;
+          const r = e.currentTarget.getBoundingClientRect();
+          const after = e.clientY > r.top + r.height / 2;
+          onReorder?.(reorderIds(ids, dragged, id, after));
+        }
+      };
+    },
+    [enabled, ids, onReorder, canDropOn, reset]
+  );
+  return { enabled, draggingId, over, rowProps };
+}
+function dragIndicatorClasses(drag, id) {
+  return [
+    drag.draggingId === id ? "opacity-40" : "",
+    drag.over?.id === id && !drag.over.after ? "shadow-[inset_0_2px_0_0_var(--color-primary-500,#3b82f6)]" : "",
+    drag.over?.id === id && drag.over.after ? "shadow-[inset_0_-2px_0_0_var(--color-primary-500,#3b82f6)]" : ""
+  ].filter(Boolean).join(" ");
+}
+
+export { dragIndicatorClasses, reorderIds, useDragReorder, useLiveAnnouncement };
+//# sourceMappingURL=chunk-7ZVTLTJF.js.map
+//# sourceMappingURL=chunk-7ZVTLTJF.js.map

package/dist/chunk-7ZVTLTJF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useLiveAnnouncement.ts","../src/hooks/useDragReorder.ts"],"names":["React"],"mappings":"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","file":"chunk-7ZVTLTJF.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * State for an `aria-live` region that re-announces even when the same\n * message is emitted twice in a row. Setting identical React state bails out\n * (and identical DOM text isn't a mutation), so screen readers would stay\n * silent for repeated actions like \"moved down\" — this clears the region\n * first, then sets the message a tick later.\n *\n * @example\n * ```tsx\n * const [announcement, announce] = useLiveAnnouncement();\n * // announce('Item moved down');\n * // <div aria-live=\"polite\" className=\"sr-only\">{announcement}</div>\n * ```\n */\nexport function useLiveAnnouncement(): [string, (message: string) => void] {\n  const [message, setMessage] = React.useState('');\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n    undefined\n  );\n\n  const announce = React.useCallback((next: string) => {\n    setMessage('');\n    if (timerRef.current !== undefined) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(() => setMessage(next), 50);\n  }, []);\n\n  React.useEffect(\n    () => () => {\n      if (timerRef.current !== undefined) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  return [message, announce];\n}\n","'use client';\n\nimport * as React from 'react';\n\n/** Insert `draggedId` before/after `targetId` in `ids`. */\nexport function reorderIds(\n  ids: string[],\n  draggedId: string,\n  targetId: string,\n  after: boolean\n): string[] {\n  if (draggedId === targetId) return ids;\n  // Ignore drags that originate outside this list (stale payloads would\n  // otherwise be inserted as unknown ids).\n  if (!ids.includes(draggedId)) return ids;\n  const without = ids.filter((i) => i !== draggedId);\n  const idx = without.indexOf(targetId);\n  if (idx === -1) return ids;\n  without.splice(after ? idx + 1 : idx, 0, draggedId);\n  return without;\n}\n\nexport interface UseDragReorderOptions {\n  /** Current flat order of item ids (props order) */\n  ids: string[];\n  /** Called with the full new id order after a drop. Omit to disable dragging. */\n  onReorder?: (ids: string[]) => void;\n  /** Restrict drops, e.g. to the same status group */\n  canDropOn?: (draggedId: string, targetId: string) => boolean;\n}\n\nexport interface DragOverState {\n  id: string;\n  /** Drop indicator position relative to the hovered row */\n  after: boolean;\n}\n\nexport interface UseDragReorderReturn {\n  /** Whether drag reordering is active (onReorder provided) */\n  enabled: boolean;\n  /** Id currently being dragged, if any */\n  draggingId: string | null;\n  /** Row currently hovered as a drop target */\n  over: DragOverState | null;\n  /** Spread onto each row element (must be keyed by a stable id) */\n  rowProps: (id: string) => React.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * HTML5 drag-and-drop list reordering. Rows spread `rowProps(id)`; on drop the\n * hook computes the full new id order and reports it via `onReorder` — the\n * consumer persists it (e.g. on the encounter/patient object) and feeds the\n * list back in props order.\n *\n * Drag-and-drop is a pointer-only affordance: pair it with a keyboard\n * alternative (e.g. move buttons / Alt+Arrow keys) for accessibility.\n *\n * @example\n * ```tsx\n * const drag = useDragReorder({ ids: items.map((i) => i.id), onReorder });\n * // <li {...drag.rowProps(item.id)} className={cn(dragIndicatorClasses(drag, item.id))}>\n * ```\n */\nexport function useDragReorder({\n  ids,\n  onReorder,\n  canDropOn,\n}: UseDragReorderOptions): UseDragReorderReturn {\n  const [draggingId, setDraggingId] = React.useState<string | null>(null);\n  // dragover can fire before the dragstart state update is visible, so the\n  // authoritative dragged id lives in a ref (set synchronously)\n  const draggingRef = React.useRef<string | null>(null);\n  const [over, setOver] = React.useState<DragOverState | null>(null);\n  const enabled = Boolean(onReorder);\n\n  const reset = React.useCallback(() => {\n    draggingRef.current = null;\n    setDraggingId(null);\n    setOver(null);\n  }, []);\n\n  const rowProps = React.useCallback(\n    (id: string): React.HTMLAttributes<HTMLElement> => {\n      if (!enabled) return {};\n      return {\n        draggable: true,\n        // WebKit (iPadOS Safari, incl. remote-pointer sessions) starts a text\n        // selection instead of a drag when the drag source contains selectable\n        // text — suppress selection and explicitly mark the row as the drag\n        // element so press-drag reliably initiates drag-and-drop.\n        style: {\n          userSelect: 'none',\n          WebkitUserSelect: 'none',\n          WebkitUserDrag: 'element',\n        } as React.CSSProperties,\n        onDragStart: (e) => {\n          e.dataTransfer.effectAllowed = 'move';\n          e.dataTransfer.setData('text/plain', id);\n          draggingRef.current = id;\n          setDraggingId(id);\n        },\n        onDragEnd: reset,\n        onDragOver: (e) => {\n          const dragged = draggingRef.current;\n          if (\n            !dragged ||\n            dragged === id ||\n            (canDropOn && !canDropOn(dragged, id))\n          ) {\n            // hovering an invalid target: clear any stale indicator\n            setOver(null);\n            return;\n          }\n          e.preventDefault();\n          e.dataTransfer.dropEffect = 'move';\n          const r = e.currentTarget.getBoundingClientRect();\n          const after = e.clientY > r.top + r.height / 2;\n          setOver((prev) =>\n            prev?.id === id && prev.after === after ? prev : { id, after }\n          );\n        },\n        onDragLeave: () => {\n          setOver((prev) => (prev?.id === id ? null : prev));\n        },\n        onDrop: (e) => {\n          e.preventDefault();\n          const dragged =\n            draggingRef.current ?? e.dataTransfer.getData('text/plain');\n          reset();\n          if (!dragged || dragged === id) return;\n          if (canDropOn && !canDropOn(dragged, id)) return;\n          const r = e.currentTarget.getBoundingClientRect();\n          const after = e.clientY > r.top + r.height / 2;\n          onReorder?.(reorderIds(ids, dragged, id, after));\n        },\n      };\n    },\n    [enabled, ids, onReorder, canDropOn, reset]\n  );\n\n  return { enabled, draggingId, over, rowProps };\n}\n\n/** Tailwind classes for the drag state of a row: drop indicator + dragging dim. */\nexport function dragIndicatorClasses(\n  drag: Pick<UseDragReorderReturn, 'draggingId' | 'over'>,\n  id: string\n): string {\n  return [\n    drag.draggingId === id ? 'opacity-40' : '',\n    drag.over?.id === id && !drag.over.after\n      ? 'shadow-[inset_0_2px_0_0_var(--color-primary-500,#3b82f6)]'\n      : '',\n    drag.over?.id === id && drag.over.after\n      ? 'shadow-[inset_0_-2px_0_0_var(--color-primary-500,#3b82f6)]'\n      : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n"]}

package/dist/{chunk-KX4NWZIR.cjs → chunk-CDMWZBDD.cjs}

@@ -752,7 +752,7 @@ function DateSeparator({ label, className }) {
         {
           className: chunkOR5DRJCW_cjs.cn(
             "rounded-full px-3 py-1 text-xs font-medium",
-            "bg-neutral-100 text-neutral-500",
+            "bg-neutral-100 text-neutral-600",
             "dark:bg-neutral-800 dark:text-neutral-400"
           ),
           children: label
@@ -2013,5 +2013,5 @@ exports.useMessageScroll = useMessageScroll;
 exports.useMessages = useMessages;
 exports.useReadReceipts = useReadReceipts;
 exports.useTypingIndicator = useTypingIndicator;
-//# sourceMappingURL=chunk-KX4NWZIR.cjs.map
-//# sourceMappingURL=chunk-KX4NWZIR.cjs.map
+//# sourceMappingURL=chunk-CDMWZBDD.cjs.map
+//# sourceMappingURL=chunk-CDMWZBDD.cjs.map