@adecore/ui 0.31.11 → 0.32.0

package/dist/SectionLabel.js

@@ -1,3 +1,4 @@
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 /* A label takes the line height of the row it sits in, which is why the size carries `/[inherit]`. */
@@ -6,11 +7,64 @@ const SECTION_LABEL = 'text-xs/[inherit] font-medium text-text-faint';
  * The small label above a group of rows outside a popup: a sidebar's groups, a palette's sections,
  * the name of a field. Always sentence case. A `<span>` unless `render` makes it a heading or a label.
  */
-export function SectionLabel({ render, className, ref, ...props }) {
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'span',
-        props: { ...props, className: clsx(SECTION_LABEL, className) }
-    });
-}
+export function SectionLabel(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx(SECTION_LABEL, className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
+}

package/dist/SegmentBar.js

@@ -1,45 +1,206 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { mergeRefs } from './merge-refs.js';
-import { Tooltip } from './Tooltip.js';
+import { Tooltip } from "./Tooltip.js";
 import { useMeasuredWidth } from './useMeasuredWidth.js';
 /* A whole split into parts, each as wide as it lasts, so they compare at a glance. A part starts exactly at its
    place; the gap between two parts that touch comes out of the one before. */
-export function SegmentBar({ parts, range, size = 'md', onSelect, label, className, ref }) {
-    const [measure, width] = useMeasuredWidth();
-    const rootRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
-    const labels = useRef([]);
-    const [cut, setCut] = useState([]);
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SegmentBar(t0) {
+  const $ = _c(38);
+  const {
+    parts,
+    range,
+    size: t1,
+    onSelect,
+    label,
+    className,
+    ref
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  const [measure, width] = useMeasuredWidth();
+  let t2;
+  if ($[0] !== measure || $[1] !== ref) {
+    t2 = mergeRefs(ref, measure);
+    $[0] = measure;
+    $[1] = ref;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const rootRef = t2;
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [];
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const labels = useRef(t3);
+  let t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = [];
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const [cut, setCut] = useState(t4);
+  let from_0;
+  let span;
+  let t5;
+  let to;
+  if ($[5] !== parts || $[6] !== range) {
     let end = 0;
     const placed = parts.map((part, index) => {
-        const from = part.start ?? end;
-        end = from + Math.max(0, part.value);
-        return { part, index, from, to: end };
+      const from = part.start ?? end;
+      end = from + Math.max(0, part.value);
+      return {
+        part,
+        index,
+        from,
+        to: end
+      };
+    });
+    [from_0, to] = range ?? [0, end];
+    span = to - from_0;
+    t5 = span > 0 ? placed.filter(placement => placement.to > from_0 && placement.from < to) : [];
+    $[5] = parts;
+    $[6] = range;
+    $[7] = from_0;
+    $[8] = span;
+    $[9] = t5;
+    $[10] = to;
+  } else {
+    from_0 = $[7];
+    span = $[8];
+    t5 = $[9];
+    to = $[10];
+  }
+  const visible = t5;
+  const hidden = onSelect === undefined && !parts.some(_temp);
+  let t6;
+  if ($[11] !== visible.length) {
+    t6 = () => {
+      const next = labels.current.slice(0, visible.length).map(_temp2);
+      setCut(current => current.length === next.length && current.every((value, i) => value === next[i]) ? current : next);
+    };
+    $[11] = visible.length;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== from_0 || $[14] !== parts || $[15] !== size || $[16] !== to || $[17] !== visible.length || $[18] !== width) {
+    t7 = [width, parts, from_0, to, size, visible.length];
+    $[13] = from_0;
+    $[14] = parts;
+    $[15] = size;
+    $[16] = to;
+    $[17] = visible.length;
+    $[18] = width;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  useEffect(t6, t7);
+  const t8 = hidden ? undefined : label;
+  const t9 = hidden ? true : undefined;
+  const t10 = size === "sm" ? "h-1.5" : "h-7";
+  let t11;
+  if ($[20] !== className || $[21] !== t10) {
+    t11 = clsx("relative min-w-0", t10, className);
+    $[20] = className;
+    $[21] = t10;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  let t12;
+  if ($[23] !== cut || $[24] !== from_0 || $[25] !== onSelect || $[26] !== size || $[27] !== span || $[28] !== to || $[29] !== visible || $[30] !== width) {
+    t12 = visible.map((t13, i_0) => {
+      const {
+        part: part_1,
+        index: index_0,
+        from: partFrom,
+        to: partTo
+      } = t13;
+      const left = (Math.max(partFrom, from_0) - from_0) / span;
+      const right = (Math.min(partTo, to) - from_0) / span;
+      const next_0 = visible[i_0 + 1];
+      const touches = next_0 !== undefined && (next_0.from - partTo) / span * width < 1;
+      const fill = clsx("flex size-full min-w-0 items-center", size === "sm" ? "rounded-full" : "rounded-sm px-1.5 text-left text-xs", part_1.current && (size === "sm" ? "bg-accent" : "bg-accent-soft text-text"), !part_1.current && part_1.color === undefined && "bg-surface-active", !part_1.current && size === "md" && "text-text-muted", onSelect !== undefined && "cursor-pointer hover:opacity-80");
+      const text = /*#__PURE__*/_jsx("span", {
+        ref: element_0 => {
+          labels.current[i_0] = element_0;
+        },
+        className: size === "sm" ? "sr-only" : "min-w-0 truncate",
+        children: part_1.label
+      });
+      const look = {
+        className: fill,
+        style: {
+          backgroundColor: part_1.color
+        },
+        "aria-current": part_1.current ? true : undefined
+      };
+      const body = onSelect === undefined ? /*#__PURE__*/_jsx("span", {
+        ...look,
+        children: text
+      }) : /*#__PURE__*/_jsx("button", {
+        type: "button",
+        ...look,
+        onClick: () => onSelect(index_0),
+        children: text
+      });
+      return /*#__PURE__*/_jsx("li", {
+        className: clsx("absolute inset-y-0 focus-within:z-10", touches && "pr-0.5"),
+        style: {
+          left: `${left * 100}%`,
+          width: `${(right - left) * 100}%`
+        },
+        children: part_1.label === undefined ? body : /*#__PURE__*/_jsx(Tooltip, {
+          label: part_1.label,
+          disabled: size === "md" && !cut[i_0],
+          children: body
+        })
+      }, index_0);
     });
-    const [from, to] = range ?? [0, end];
-    const span = to - from;
-    const visible = span > 0 ? placed.filter((placement) => placement.to > from && placement.from < to) : [];
-    // Parts without a name say nothing a screen reader could use; the element around the bar names it, as a meter does.
-    // Parts a person can press stay reachable, since a hidden list must not hold focusable buttons.
-    const hidden = onSelect === undefined && !parts.some((part) => part.label !== undefined);
-    // A label that stops fitting after a resize or a new range gets its tooltip.
-    useEffect(() => {
-        const next = labels.current.slice(0, visible.length).map((element) => element !== null && element.scrollWidth > element.clientWidth);
-        setCut((current) => (current.length === next.length && current.every((value, i) => value === next[i]) ? current : next));
-    }, [width, parts, from, to, size, visible.length]);
-    return (_jsx("ol", { ref: rootRef, "aria-label": hidden ? undefined : label, "aria-hidden": hidden ? true : undefined, className: clsx('relative min-w-0', size === 'sm' ? 'h-1.5' : 'h-7', className), children: visible.map(({ part, index, from: partFrom, to: partTo }, i) => {
-            const left = (Math.max(partFrom, from) - from) / span;
-            const right = (Math.min(partTo, to) - from) / span;
-            const next = visible[i + 1];
-            // Less than a pixel apart they touch, whatever rounding the caller's starts carry.
-            const touches = next !== undefined && ((next.from - partTo) / span) * width < 1;
-            const fill = clsx('flex size-full min-w-0 items-center', size === 'sm' ? 'rounded-full' : 'rounded-sm px-1.5 text-left text-xs', part.current && (size === 'sm' ? 'bg-accent' : 'bg-accent-soft text-text'), !part.current && part.color === undefined && 'bg-surface-active', !part.current && size === 'md' && 'text-text-muted', onSelect !== undefined && 'cursor-pointer hover:opacity-80');
-            const text = (_jsx("span", { ref: (element) => {
-                    labels.current[i] = element;
-                }, className: size === 'sm' ? 'sr-only' : 'min-w-0 truncate', children: part.label }));
-            const look = { className: fill, style: { backgroundColor: part.color }, 'aria-current': part.current ? true : undefined };
-            const body = onSelect === undefined ? (_jsx("span", { ...look, children: text })) : (_jsx("button", { type: "button", ...look, onClick: () => onSelect(index), children: text }));
-            return (_jsx("li", { className: clsx('absolute inset-y-0 focus-within:z-10', touches && 'pr-0.5'), style: { left: `${left * 100}%`, width: `${(right - left) * 100}%` }, children: part.label === undefined ? (body) : (_jsx(Tooltip, { label: part.label, disabled: size === 'md' && !cut[i], children: body })) }, index));
-        }) }));
+    $[23] = cut;
+    $[24] = from_0;
+    $[25] = onSelect;
+    $[26] = size;
+    $[27] = span;
+    $[28] = to;
+    $[29] = visible;
+    $[30] = width;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  let t13;
+  if ($[32] !== rootRef || $[33] !== t11 || $[34] !== t12 || $[35] !== t8 || $[36] !== t9) {
+    t13 = /*#__PURE__*/_jsx("ol", {
+      ref: rootRef,
+      "aria-label": t8,
+      "aria-hidden": t9,
+      className: t11,
+      children: t12
+    });
+    $[32] = rootRef;
+    $[33] = t11;
+    $[34] = t12;
+    $[35] = t8;
+    $[36] = t9;
+    $[37] = t13;
+  } else {
+    t13 = $[37];
+  }
+  return t13;
+}
+function _temp2(element) {
+  return element !== null && element.scrollWidth > element.clientWidth;
 }
+function _temp(part_0) {
+  return part_0.label !== undefined;
+}

package/dist/Segmented.js

@@ -1,29 +1,136 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { Icon } from './Icon.js';
-const STEPS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+import { Icon } from "./Icon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STEPS = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1
+};
 /*
  * One of a few options side by side in one sunken track, the picked one lifted out of it. A radio
  * group: one tab stop, and the arrows pick and focus the next option, around the ends.
  */
-export function Segmented({ value, onValueChange, options, label, disabled, orientation = 'horizontal', className, ref }) {
-    const vertical = orientation === 'vertical';
-    const picked = options.findIndex((option) => option.id === value);
-    const stop = picked === -1 ? 0 : picked;
-    function move(event, index) {
-        const next = event.key in STEPS
-            ? (index + STEPS[event.key] + options.length) % options.length
-            : event.key === 'Home'
-                ? 0
-                : event.key === 'End'
-                    ? options.length - 1
-                    : null;
-        if (next === null) {
-            return;
-        }
-        event.preventDefault();
-        onValueChange(options[next].id);
-        event.currentTarget.parentElement?.querySelectorAll('[role="radio"]')[next]?.focus();
+export function Segmented(t0) {
+  const $ = _c(30);
+  const {
+    value,
+    onValueChange,
+    options,
+    label,
+    disabled,
+    orientation: t1,
+    className,
+    ref
+  } = t0;
+  const orientation = t1 === undefined ? "horizontal" : t1;
+  const vertical = orientation === "vertical";
+  let t2;
+  if ($[0] !== options || $[1] !== value) {
+    let t3;
+    if ($[3] !== value) {
+      t3 = option => option.id === value;
+      $[3] = value;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    t2 = options.findIndex(t3);
+    $[0] = options;
+    $[1] = value;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const picked = t2;
+  const stop = picked === -1 ? 0 : picked;
+  let t3;
+  if ($[5] !== onValueChange || $[6] !== options) {
+    t3 = function move(event, index) {
+      const next = event.key in STEPS ? (index + STEPS[event.key] + options.length) % options.length : event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : null;
+      if (next === null) {
+        return;
+      }
+      event.preventDefault();
+      onValueChange(options[next].id);
+      event.currentTarget.parentElement?.querySelectorAll("[role=\"radio\"]")[next]?.focus();
+    };
+    $[5] = onValueChange;
+    $[6] = options;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const move = t3;
+  const t4 = vertical ? "w-full flex-col items-stretch gap-0.5" : "min-h-8 w-fit items-center";
+  let t5;
+  if ($[8] !== className || $[9] !== t4) {
+    t5 = clsx("flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium", t4, className);
+    $[8] = className;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const t6 = vertical ? "vertical" : undefined;
+  let t7;
+  if ($[11] !== disabled || $[12] !== move || $[13] !== onValueChange || $[14] !== options || $[15] !== stop || $[16] !== value) {
+    let t8;
+    if ($[18] !== disabled || $[19] !== move || $[20] !== onValueChange || $[21] !== stop || $[22] !== value) {
+      t8 = (option_0, index_0) => /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": value === option_0.id,
+        tabIndex: index_0 === stop ? 0 : -1,
+        disabled: disabled,
+        className: clsx("flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50", value === option_0.id ? "bg-surface-raised text-text shadow-raised" : "text-text-muted hover:text-text"),
+        onClick: () => onValueChange(option_0.id),
+        onKeyDown: event_0 => move(event_0, index_0),
+        children: [option_0.icon && /*#__PURE__*/_jsx(Icon, {
+          icon: option_0.icon,
+          size: 14,
+          className: "shrink-0"
+        }), option_0.label]
+      }, option_0.id);
+      $[18] = disabled;
+      $[19] = move;
+      $[20] = onValueChange;
+      $[21] = stop;
+      $[22] = value;
+      $[23] = t8;
+    } else {
+      t8 = $[23];
     }
-    return (_jsx("div", { ref: ref, className: clsx('flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', vertical ? 'w-full flex-col items-stretch gap-0.5' : 'min-h-8 w-fit items-center', className), role: "radiogroup", "aria-label": label, "aria-orientation": vertical ? 'vertical' : undefined, children: options.map((option, index) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === option.id, tabIndex: index === stop ? 0 : -1, disabled: disabled, className: clsx('flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50', value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'), onClick: () => onValueChange(option.id), onKeyDown: (event) => move(event, index), children: [option.icon && _jsx(Icon, { icon: option.icon, size: 14, className: "shrink-0" }), option.label] }, option.id))) }));
-}
+    t7 = options.map(t8);
+    $[11] = disabled;
+    $[12] = move;
+    $[13] = onValueChange;
+    $[14] = options;
+    $[15] = stop;
+    $[16] = value;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[24] !== label || $[25] !== ref || $[26] !== t5 || $[27] !== t6 || $[28] !== t7) {
+    t8 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: t5,
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-orientation": t6,
+      children: t7
+    });
+    $[24] = label;
+    $[25] = ref;
+    $[26] = t5;
+    $[27] = t6;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  return t8;
+}