@adecore/ui 0.31.11 → 0.32.0

package/dist/Select.js

@@ -1,33 +1,324 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Icon } from './Icon.js';
-import { MENU_LABEL } from './menu/parts.js';
+import { Icon } from "./Icon.js";
+import { MENU_LABEL } from "./menu/parts.js";
 import { renderPositioner } from './popup-layer.js';
-import { RowContent } from './select-row.js';
+import { RowContent } from "./select-row.js";
 import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
-import { SelectSearch } from './SelectSearch.js';
-function Row({ item, picked }) {
-    return (_jsx(BaseSelect.Item, { className: rowClassName(item), value: item.value, label: item.label, disabled: item.disabled, children: _jsx(RowContent, { item: item, picked: picked, text: _jsx(BaseSelect.ItemText, { children: item.label }) }) }));
+import { SelectSearch } from "./SelectSearch.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Row(t0) {
+  const $ = _c(14);
+  const {
+    item,
+    picked
+  } = t0;
+  let t1;
+  if ($[0] !== item) {
+    t1 = rowClassName(item);
+    $[0] = item;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== item.label) {
+    t2 = /*#__PURE__*/_jsx(BaseSelect.ItemText, {
+      children: item.label
+    });
+    $[2] = item.label;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== item || $[5] !== picked || $[6] !== t2) {
+    t3 = /*#__PURE__*/_jsx(RowContent, {
+      item: item,
+      picked: picked,
+      text: t2
+    });
+    $[4] = item;
+    $[5] = picked;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== item.disabled || $[9] !== item.label || $[10] !== item.value || $[11] !== t1 || $[12] !== t3) {
+    t4 = /*#__PURE__*/_jsx(BaseSelect.Item, {
+      className: t1,
+      value: item.value,
+      label: item.label,
+      disabled: item.disabled,
+      children: t3
+    });
+    $[8] = item.disabled;
+    $[9] = item.label;
+    $[10] = item.value;
+    $[11] = t1;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
 }
 /* The one select. A Base UI `Select` in the popup style the menus use, so a settings field and a
    picker in a toolbar read the same. Base UI brings the keyboard along (arrows,
    Home and End, typeahead, Enter, Escape), which a hand-rolled listbox would have to repeat.
    A long list can ask for a search field, which swaps in a combobox with the same trigger and rows. */
 export function Select(props) {
-    const { searchable, items } = props;
-    const count = items.length > 0 && isGroup(items[0]) ? items.reduce((sum, group) => sum + group.items.length, 0) : items.length;
-    const search = searchable === true || (typeof searchable === 'number' && count >= searchable);
-    return search ? _jsx(SelectSearch, { ...props }) : _jsx(PlainSelect, { ...props });
+  const $ = _c(5);
+  const {
+    searchable,
+    items
+  } = props;
+  let t0;
+  if ($[0] !== items) {
+    t0 = items.length > 0 && isGroup(items[0]) ? items.reduce(_temp, 0) : items.length;
+    $[0] = items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const count = t0;
+  const search = searchable === true || typeof searchable === "number" && count >= searchable;
+  let t1;
+  if ($[2] !== props || $[3] !== search) {
+    t1 = search ? /*#__PURE__*/_jsx(SelectSearch, {
+      ...props
+    }) : /*#__PURE__*/_jsx(PlainSelect, {
+      ...props
+    });
+    $[2] = props;
+    $[3] = search;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+function _temp(sum, group) {
+  return sum + group.items.length;
+}
+function PlainSelect(t0) {
+  const $ = _c(46);
+  const {
+    value,
+    onValueChange,
+    items,
+    label,
+    placeholder,
+    size: t1,
+    variant: t2,
+    disabled,
+    align: t3,
+    truncateValue: t4,
+    className,
+    ref
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  const variant = t2 === undefined ? "outlined" : t2;
+  const align = t3 === undefined ? "start" : t3;
+  const truncateValue = t4 === undefined ? true : t4;
+  const {
+    t
+  } = useTranslation("ui");
+  const groups = items.length > 0 && isGroup(items[0]) ? items : null;
+  let t5;
+  if ($[0] !== groups || $[1] !== items) {
+    t5 = groups ? groups.flatMap(_temp2) : items;
+    $[0] = groups;
+    $[1] = items;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const flat = t5;
+  let t6;
+  if ($[3] !== flat || $[4] !== value) {
+    t6 = flat.find(item => item.value === value) ?? null;
+    $[3] = flat;
+    $[4] = value;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  const selected = t6;
+  let t7;
+  if ($[6] !== flat) {
+    t7 = flat.map(_temp3);
+    $[6] = flat;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== onValueChange) {
+    t8 = next => onValueChange(next);
+    $[8] = onValueChange;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== className || $[11] !== size || $[12] !== variant) {
+    t9 = triggerClassName(size, variant, className);
+    $[10] = className;
+    $[11] = size;
+    $[12] = variant;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  const t10 = selected?.icon;
+  const t11 = truncateValue && "truncate";
+  let t12;
+  if ($[14] !== t11) {
+    t12 = clsx(t11);
+    $[14] = t11;
+    $[15] = t12;
+  } else {
+    t12 = $[15];
+  }
+  let t13;
+  if ($[16] !== placeholder || $[17] !== selected?.label || $[18] !== t) {
+    t13 = () => selected?.label ?? placeholder ?? t("action.select");
+    $[16] = placeholder;
+    $[17] = selected?.label;
+    $[18] = t;
+    $[19] = t13;
+  } else {
+    t13 = $[19];
+  }
+  let t14;
+  if ($[20] !== t12 || $[21] !== t13) {
+    t14 = /*#__PURE__*/_jsx(BaseSelect.Value, {
+      className: t12,
+      children: t13
+    });
+    $[20] = t12;
+    $[21] = t13;
+    $[22] = t14;
+  } else {
+    t14 = $[22];
+  }
+  let t15;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /*#__PURE__*/_jsx(BaseSelect.Icon, {
+      className: "ml-auto flex shrink-0 pl-1",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ChevronDown,
+        size: 14
+      })
+    });
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== label || $[25] !== ref || $[26] !== t10 || $[27] !== t14 || $[28] !== t9) {
+    t16 = /*#__PURE__*/_jsxs(BaseSelect.Trigger, {
+      ref: ref,
+      "aria-label": label,
+      className: t9,
+      children: [t10, t14, t15]
+    });
+    $[24] = label;
+    $[25] = ref;
+    $[26] = t10;
+    $[27] = t14;
+    $[28] = t9;
+    $[29] = t16;
+  } else {
+    t16 = $[29];
+  }
+  let t17;
+  if ($[30] !== flat || $[31] !== groups || $[32] !== value) {
+    t17 = groups ? groups.map(group_0 => /*#__PURE__*/_jsxs(BaseSelect.Group, {
+      children: [/*#__PURE__*/_jsx(BaseSelect.GroupLabel, {
+        className: MENU_LABEL,
+        children: group_0.label
+      }), group_0.items.map(item_1 => /*#__PURE__*/_jsx(Row, {
+        item: item_1,
+        picked: item_1.value === value
+      }, item_1.value))]
+    }, group_0.label)) : flat.map(item_2 => /*#__PURE__*/_jsx(Row, {
+      item: item_2,
+      picked: item_2.value === value
+    }, item_2.value));
+    $[30] = flat;
+    $[31] = groups;
+    $[32] = value;
+    $[33] = t17;
+  } else {
+    t17 = $[33];
+  }
+  let t18;
+  if ($[34] !== t17) {
+    t18 = /*#__PURE__*/_jsx(BaseSelect.Popup, {
+      className: "menu-popup",
+      children: /*#__PURE__*/_jsx(BaseSelect.List, {
+        className: "max-h-80 overflow-auto",
+        children: t17
+      })
+    });
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  let t19;
+  if ($[36] !== align || $[37] !== t18) {
+    t19 = /*#__PURE__*/_jsx(BaseSelect.Portal, {
+      children: /*#__PURE__*/_jsx(BaseSelect.Positioner, {
+        className: "popup-positioner",
+        render: renderPositioner,
+        side: "bottom",
+        align: align,
+        sideOffset: 6,
+        alignItemWithTrigger: false,
+        children: t18
+      })
+    });
+    $[36] = align;
+    $[37] = t18;
+    $[38] = t19;
+  } else {
+    t19 = $[38];
+  }
+  let t20;
+  if ($[39] !== disabled || $[40] !== t16 || $[41] !== t19 || $[42] !== t7 || $[43] !== t8 || $[44] !== value) {
+    t20 = /*#__PURE__*/_jsxs(BaseSelect.Root, {
+      items: t7,
+      value: value,
+      disabled: disabled,
+      onValueChange: t8,
+      children: [t16, t19]
+    });
+    $[39] = disabled;
+    $[40] = t16;
+    $[41] = t19;
+    $[42] = t7;
+    $[43] = t8;
+    $[44] = value;
+    $[45] = t20;
+  } else {
+    t20 = $[45];
+  }
+  return t20;
 }
-function PlainSelect({ value, onValueChange, items, label, placeholder, size = 'md', variant = 'outlined', disabled, align = 'start', truncateValue = true, className, ref }) {
-    const { t } = useTranslation('ui');
-    const groups = items.length > 0 && isGroup(items[0]) ? items : null;
-    const flat = groups ? groups.flatMap((group) => group.items) : items;
-    const selected = flat.find((item) => item.value === value) ?? null;
-    return (_jsxs(BaseSelect.Root, { items: flat.map((item) => ({ value: item.value, label: item.label })), value: value, disabled: disabled, onValueChange: (next) => onValueChange(next), children: [_jsxs(BaseSelect.Trigger, { ref: ref, "aria-label": label, className: triggerClassName(size, variant, className), children: [selected?.icon, _jsx(BaseSelect.Value, { className: clsx(truncateValue && 'truncate'), children: () => selected?.label ?? placeholder ?? t('action.select') }), _jsx(BaseSelect.Icon, { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "menu-popup", children: _jsx(BaseSelect.List, { className: "max-h-80 overflow-auto", children: groups
-                                ? groups.map((group) => (_jsxs(BaseSelect.Group, { children: [_jsx(BaseSelect.GroupLabel, { className: MENU_LABEL, children: group.label }), group.items.map((item) => (_jsx(Row, { item: item, picked: item.value === value }, item.value)))] }, group.label)))
-                                : flat.map((item) => _jsx(Row, { item: item, picked: item.value === value }, item.value)) }) }) }) })] }));
+function _temp3(item_0) {
+  return {
+    value: item_0.value,
+    label: item_0.label
+  };
 }
+function _temp2(group) {
+  return group.items;
+}