@adecore/ui 0.31.12 → 0.32.0

package/dist/ColorWheelPicker.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
 import { ChevronDown } from 'lucide-react';
-import { ColorSwatch } from './ColorSwatch.js';
-import { Icon } from './Icon.js';
-import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.js';
+import { ColorSwatch } from "./ColorSwatch.js";
+import { Icon } from "./Icon.js";
+import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./popover/parts.js";
 import { triggerClassName } from './select-shared.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SWATCH_SIZE = 24;
 /* The outer ring stands this far from the middle, further when its swatches would not keep a gap between them otherwise. */
 const MIN_RADIUS = 97;
@@ -13,24 +14,31 @@ const MIN_GAP = 8;
 const EDGE = 7;
 /* Every swatch's top left corner in whole pixels, the rings evenly apart from the outer one to the middle, and the size of the wheel. */
 function layout(rings, center) {
-    const outer = rings[0]?.length ?? 0;
-    const radius = Math.max(MIN_RADIUS, outer > 1 ? Math.ceil((SWATCH_SIZE + MIN_GAP) / (2 * Math.sin(Math.PI / outer))) : 0);
-    const size = 2 * (radius + SWATCH_SIZE / 2 + EDGE);
-    const middle = (size - SWATCH_SIZE) / 2;
-    const spot = (id, turn, distance) => {
-        const angle = turn * 2 * Math.PI - Math.PI / 2;
-        return { id, left: Math.round(middle + distance * Math.cos(angle)), top: Math.round(middle + distance * Math.sin(angle)) };
+  const outer = rings[0]?.length ?? 0;
+  const radius = Math.max(MIN_RADIUS, outer > 1 ? Math.ceil((SWATCH_SIZE + MIN_GAP) / (2 * Math.sin(Math.PI / outer))) : 0);
+  const size = 2 * (radius + SWATCH_SIZE / 2 + EDGE);
+  const middle = (size - SWATCH_SIZE) / 2;
+  const spot = (id, turn, distance) => {
+    const angle = turn * 2 * Math.PI - Math.PI / 2;
+    return {
+      id,
+      left: Math.round(middle + distance * Math.cos(angle)),
+      top: Math.round(middle + distance * Math.sin(angle))
     };
-    const spots = rings.flatMap((ring, depth) => ring.map((id, i) => spot(id, i / ring.length, (radius * (rings.length - depth)) / rings.length)));
-    return { size, spots: center === undefined ? spots : [...spots, spot(center, 0, 0)] };
+  };
+  const spots = rings.flatMap((ring, depth) => ring.map((id, i) => spot(id, i / ring.length, radius * (rings.length - depth) / rings.length)));
+  return {
+    size,
+    spots: center === undefined ? spots : [...spots, spot(center, 0, 0)]
+  };
 }
 const STEPS = {
-    ArrowRight: (index, count) => (index + 1) % count,
-    ArrowDown: (index, count) => (index + 1) % count,
-    ArrowLeft: (index, count) => (index - 1 + count) % count,
-    ArrowUp: (index, count) => (index - 1 + count) % count,
-    Home: () => 0,
-    End: (_, count) => count - 1
+  ArrowRight: (index, count) => (index + 1) % count,
+  ArrowDown: (index, count) => (index + 1) % count,
+  ArrowLeft: (index, count) => (index - 1 + count) % count,
+  ArrowUp: (index, count) => (index - 1 + count) % count,
+  Home: () => 0,
+  End: (_, count) => count - 1
 };
 /*
  * A color picked from a wheel behind a trigger that holds the one in use and lines up with a select.
@@ -39,59 +47,285 @@ const STEPS = {
  * tooltip. The wheel is one tab stop: the arrows walk it in its order and only Enter, Space or a click
  * picks. Every preview ends with null, after a pick as well as on closing without one or on going away while open.
  */
-export function ColorWheelPicker({ value, onValueChange, onPreviewChange, label, rings, center, colorOf, labelOf, disabled, align = 'start', className, ref }) {
-    const labelId = useId();
-    const valueId = useId();
-    const [open, setOpen] = useState(false);
-    const [looking, setLooking] = useState(null);
-    const [focused, setFocused] = useState(null);
-    const wheel = useRef(null);
-    const { size, spots } = layout(rings, center);
-    const tabStop = spots.find((spot) => spot.id === (focused ?? value))?.id ?? spots[0]?.id;
-    // Read by the cleanup below, which runs after the state and the props of its render are gone.
-    const preview = useRef({ looking: false, onPreviewChange });
-    useEffect(() => {
-        preview.current.onPreviewChange = onPreviewChange;
-    });
-    const look = (id) => {
-        setLooking(id);
-        preview.current.looking = id !== null;
-        onPreviewChange?.(id);
+export function ColorWheelPicker(t0) {
+  const $ = _c(37);
+  const {
+    value,
+    onValueChange,
+    onPreviewChange,
+    label,
+    rings,
+    center,
+    colorOf,
+    labelOf,
+    disabled,
+    align: t1,
+    className,
+    ref
+  } = t0;
+  const align = t1 === undefined ? "start" : t1;
+  const labelId = useId();
+  const valueId = useId();
+  const [open, setOpen] = useState(false);
+  const [looking, setLooking] = useState(null);
+  const [focused, setFocused] = useState(null);
+  const wheel = useRef(null);
+  const {
+    size,
+    spots
+  } = layout(rings, center);
+  const tabStop = spots.find(spot => spot.id === (focused ?? value))?.id ?? spots[0]?.id;
+  let t2;
+  if ($[0] !== onPreviewChange) {
+    t2 = {
+      looking: false,
+      onPreviewChange
     };
-    // A picker taken away while a color is previewed (its dialog closed under it) gets no close of its
-    // popover, so it ends the preview itself rather than leave the caller showing a color nobody picked.
-    useEffect(() => () => {
-        if (preview.current.looking) {
-            preview.current.onPreviewChange?.(null);
-        }
-    }, []);
-    const close = () => {
-        setOpen(false);
-        setFocused(null);
-        look(null);
+    $[0] = onPreviewChange;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const preview = useRef(t2);
+  let t3;
+  if ($[2] !== onPreviewChange) {
+    t3 = () => {
+      preview.current.onPreviewChange = onPreviewChange;
     };
-    const step = (event) => {
-        const next = STEPS[event.key];
-        const swatches = [...(wheel.current?.querySelectorAll('[role="radio"]') ?? [])];
-        const index = swatches.indexOf(event.target);
-        if (next === undefined || index < 0) {
-            return;
-        }
-        event.preventDefault();
-        swatches[next(index, swatches.length)]?.focus();
+    $[2] = onPreviewChange;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  useEffect(t3);
+  const look = id => {
+    setLooking(id);
+    preview.current.looking = id !== null;
+    onPreviewChange?.(id);
+  };
+  let t4;
+  let t5;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => () => {
+      if (preview.current.looking) {
+        preview.current.onPreviewChange?.(null);
+      }
     };
-    return (_jsxs(PopoverRoot, { open: open, onOpenChange: (next) => {
-            if (next) {
-                setOpen(true);
-            }
-            else {
+    t5 = [];
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t4 = $[4];
+    t5 = $[5];
+  }
+  useEffect(t4, t5);
+  const close = () => {
+    setOpen(false);
+    setFocused(null);
+    look(null);
+  };
+  let t6;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = event => {
+      const next = STEPS[event.key];
+      const swatches = [...(wheel.current?.querySelectorAll("[role=\"radio\"]") ?? [])];
+      const index = swatches.indexOf(event.target);
+      if (next === undefined || index < 0) {
+        return;
+      }
+      event.preventDefault();
+      swatches[next(index, swatches.length)]?.focus();
+    };
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const step = t6;
+  let t7;
+  if ($[7] !== label || $[8] !== labelId) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      id: labelId,
+      hidden: true,
+      children: label
+    });
+    $[7] = label;
+    $[8] = labelId;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  const t8 = `${labelId} ${valueId}`;
+  let t9;
+  if ($[10] !== className) {
+    t9 = triggerClassName("md", "outlined", className);
+    $[10] = className;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  let t10;
+  if ($[12] !== colorOf || $[13] !== value) {
+    t10 = colorOf(value);
+    $[12] = colorOf;
+    $[13] = value;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  let t11;
+  if ($[15] !== t10) {
+    t11 = /*#__PURE__*/_jsx("span", {
+      className: "h-3.5 w-3.5 shrink-0 rounded-full",
+      style: {
+        background: t10
+      },
+      "aria-hidden": true
+    });
+    $[15] = t10;
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  let t12;
+  if ($[17] !== labelOf || $[18] !== value) {
+    t12 = labelOf(value);
+    $[17] = labelOf;
+    $[18] = value;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== t12 || $[21] !== valueId) {
+    t13 = /*#__PURE__*/_jsx("span", {
+      id: valueId,
+      className: "truncate",
+      children: t12
+    });
+    $[20] = t12;
+    $[21] = valueId;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  let t14;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = /*#__PURE__*/_jsx("span", {
+      className: "ml-auto flex shrink-0 pl-1",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ChevronDown,
+        size: 14
+      })
+    });
+    $[23] = t14;
+  } else {
+    t14 = $[23];
+  }
+  let t15;
+  if ($[24] !== disabled || $[25] !== ref || $[26] !== t11 || $[27] !== t13 || $[28] !== t8 || $[29] !== t9) {
+    t15 = /*#__PURE__*/_jsxs(PopoverTrigger, {
+      ref: ref,
+      disabled: disabled,
+      "aria-labelledby": t8,
+      className: t9,
+      children: [t11, t13, t14]
+    });
+    $[24] = disabled;
+    $[25] = ref;
+    $[26] = t11;
+    $[27] = t13;
+    $[28] = t8;
+    $[29] = t9;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  let t16;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = () => wheel.current?.querySelector("[aria-checked=\"true\"]") ?? false;
+    $[31] = t16;
+  } else {
+    t16 = $[31];
+  }
+  const t18 = looking ?? value;
+  let t19;
+  if ($[32] !== labelOf || $[33] !== t18) {
+    t19 = labelOf(t18);
+    $[32] = labelOf;
+    $[33] = t18;
+    $[34] = t19;
+  } else {
+    t19 = $[34];
+  }
+  let t20;
+  if ($[35] !== t19) {
+    t20 = /*#__PURE__*/_jsx("span", {
+      className: "text-xs text-text-muted",
+      children: t19
+    });
+    $[35] = t19;
+    $[36] = t20;
+  } else {
+    t20 = $[36];
+  }
+  return /*#__PURE__*/_jsxs(PopoverRoot, {
+    open: open,
+    onOpenChange: next_0 => {
+      if (next_0) {
+        setOpen(true);
+      } else {
+        close();
+      }
+    },
+    children: [t7, t15, /*#__PURE__*/_jsx(PopoverPopup, {
+      align: align,
+      initialFocus: t16,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "flex flex-col items-center gap-3 p-3",
+        children: [/*#__PURE__*/_jsx("div", {
+          ref: wheel,
+          role: "radiogroup",
+          "aria-label": label,
+          className: "relative",
+          style: {
+            width: size,
+            height: size
+          },
+          onPointerLeave: () => look(null),
+          onKeyDown: step,
+          children: spots.map(t17 => {
+            const {
+              id: id_0,
+              left,
+              top
+            } = t17;
+            return /*#__PURE__*/_jsx(ColorSwatch, {
+              role: "radio",
+              "aria-checked": value === id_0,
+              "aria-label": labelOf(id_0),
+              tabIndex: id_0 === tabStop ? 0 : -1,
+              color: colorOf(id_0),
+              picked: value === id_0,
+              tick: false,
+              on: "popup",
+              className: "absolute",
+              style: {
+                left,
+                top
+              },
+              onPointerEnter: () => look(id_0),
+              onFocus: () => {
+                setFocused(id_0);
+                look(id_0);
+              },
+              onClick: () => {
+                onValueChange(id_0);
                 close();
-            }
-        }, children: [_jsx("span", { id: labelId, hidden: true, children: label }), _jsxs(PopoverTrigger, { ref: ref, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, className: triggerClassName('md', 'outlined', className), children: [_jsx("span", { className: "h-3.5 w-3.5 shrink-0 rounded-full", style: { background: colorOf(value) }, "aria-hidden": true }), _jsx("span", { id: valueId, className: "truncate", children: labelOf(value) }), _jsx("span", { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(PopoverPopup, { align: align, initialFocus: () => wheel.current?.querySelector('[aria-checked="true"]') ?? false, children: _jsxs("div", { className: "flex flex-col items-center gap-3 p-3", children: [_jsx("div", { ref: wheel, role: "radiogroup", "aria-label": label, className: "relative", style: { width: size, height: size }, onPointerLeave: () => look(null), onKeyDown: step, children: spots.map(({ id, left, top }) => (_jsx(ColorSwatch, { role: "radio", "aria-checked": value === id, "aria-label": labelOf(id), tabIndex: id === tabStop ? 0 : -1, color: colorOf(id), picked: value === id, tick: false, on: "popup", className: "absolute", style: { left, top }, onPointerEnter: () => look(id), onFocus: () => {
-                                    setFocused(id);
-                                    look(id);
-                                }, onClick: () => {
-                                    onValueChange(id);
-                                    close();
-                                } }, id))) }), _jsx("span", { className: "text-xs text-text-muted", children: labelOf(looking ?? value) })] }) })] }));
-}
+              }
+            }, id_0);
+          })
+        }), t20]
+      })
+    })]
+  });
+}

package/dist/ColumnResizeHandle.js

@@ -1,12 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
 const PLACEMENT = {
-    left: 'inset-y-0 right-0 w-2 cursor-col-resize',
-    right: 'inset-y-0 left-0 w-2 cursor-col-resize',
-    top: 'inset-x-0 bottom-0 h-2 cursor-row-resize',
-    bottom: 'inset-x-0 top-0 h-2 cursor-row-resize'
+  left: 'inset-y-0 right-0 w-2 cursor-col-resize',
+  right: 'inset-y-0 left-0 w-2 cursor-col-resize',
+  top: 'inset-x-0 bottom-0 h-2 cursor-row-resize',
+  bottom: 'inset-x-0 top-0 h-2 cursor-row-resize'
 };
 /* An invisible strip over the free edge of a column, so the column needs `relative` and draws its own border. */
-export function ColumnResizeHandle({ from, onPointerDown, className, style, ref }) {
-    return _jsx("div", { ref: ref, className: clsx('absolute z-10', PLACEMENT[from], className), style: style, onPointerDown: onPointerDown });
-}
+export function ColumnResizeHandle(t0) {
+  const $ = _c(8);
+  const {
+    from,
+    onPointerDown,
+    className,
+    style,
+    ref
+  } = t0;
+  const t1 = PLACEMENT[from];
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = clsx("absolute z-10", t1, className);
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== onPointerDown || $[4] !== ref || $[5] !== style || $[6] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: t2,
+      style: style,
+      onPointerDown: onPointerDown
+    });
+    $[3] = onPointerDown;
+    $[4] = ref;
+    $[5] = style;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}

package/dist/DisabledReason.js

@@ -1,12 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tooltip } from './Tooltip.js';
+import { c as _c } from "react/compiler-runtime";
+import { Tooltip } from "./Tooltip.js";
 /*
  * Why a row cannot be picked, in a tooltip beside it rather than in the row itself: a sentence in a menu
  * row sets the width of the whole menu. A row with nothing in its way is handed through untouched.
  */
-export function DisabledReason({ reason, children }) {
-    if (reason === null) {
-        return children;
-    }
-    return (_jsx(Tooltip, { label: reason, side: "right", children: children }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DisabledReason(t0) {
+  const $ = _c(3);
+  const {
+    reason,
+    children
+  } = t0;
+  if (reason === null) {
+    return children;
+  }
+  let t1;
+  if ($[0] !== children || $[1] !== reason) {
+    t1 = /*#__PURE__*/_jsx(Tooltip, {
+      label: reason,
+      side: "right",
+      children: children
+    });
+    $[0] = children;
+    $[1] = reason;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}