@strapi/design-system 1.4.2 → 1.5.0

package/dist/Combobox/Combobox.js

@@ -1,310 +1,259 @@
-var Le = Object.defineProperty, we = Object.defineProperties;
-var $e = Object.getOwnPropertyDescriptors;
-var w = Object.getOwnPropertySymbols;
-var J = Object.prototype.hasOwnProperty, Q = Object.prototype.propertyIsEnumerable;
-var G = (o, i, a) => i in o ? Le(o, i, { enumerable: !0, configurable: !0, writable: !0, value: a }) : o[i] = a, B = (o, i) => {
-  for (var a in i || (i = {}))
-    J.call(i, a) && G(o, a, i[a]);
-  if (w)
-    for (var a of w(i))
-      Q.call(i, a) && G(o, a, i[a]);
-  return o;
-}, D = (o, i) => we(o, $e(i));
-var X = (o, i) => {
-  var a = {};
-  for (var p in o)
-    J.call(o, p) && i.indexOf(p) < 0 && (a[p] = o[p]);
-  if (o != null && w)
-    for (var p of w(o))
-      i.indexOf(p) < 0 && Q.call(o, p) && (a[p] = o[p]);
-  return a;
-};
-import r, { useState as k, useRef as y, useEffect as Y, useLayoutEffect as Re, Children as Z, cloneElement as Se } from "react";
+import o, { useState as y, useRef as E, useEffect as U, useLayoutEffect as Ee, Children as _, cloneElement as xe } from "react";
 import e from "prop-types";
-import Be from "@strapi/icons/CarretDown";
-import De from "@strapi/icons/Cross";
-import { useId as Fe } from "../helpers/useId.js";
-import { filterOptions as ee, maintainScrollVisibility as Te, getActionFromKey as Ae, MenuActions as h, getUpdatedIndex as F } from "./utils.js";
-import { Flex as te } from "../Flex/Flex.js";
-import { IconBox as Pe, CaretBox as Ve } from "../Select/components.js";
-import { Popover as Ke } from "../Popover/Popover.js";
-import { Box as Ne } from "../Box/Box.js";
-import { Typography as oe } from "../Typography/Typography.js";
-import { Loader as He } from "../Loader/Loader.js";
-import { MainRow as Ue, InputContainer as _e, ValueContainer as je, Input as qe } from "./components.js";
-import { ComboboxOption as ze } from "./ComboboxOption.js";
-import { ComboboxList as We } from "./ComboboxList.js";
-import { Field as Ge } from "../Field/Field.js";
-import { FieldLabel as Je } from "../Field/FieldLabel.js";
+import ve from "@strapi/icons/CarretDown";
+import ye from "@strapi/icons/Cross";
+import { useId as Ie } from "../helpers/useId.js";
+import { filterOptions as j, maintainScrollVisibility as ke, getActionFromKey as Oe, MenuActions as b, getUpdatedIndex as $ } from "./utils.js";
+import { Flex as q } from "../Flex/Flex.js";
+import { IconBox as Me, CaretBox as Le } from "../Select/components.js";
+import { Popover as we } from "../Popover/Popover.js";
+import { Box as $e } from "../Box/Box.js";
+import { Typography as z } from "../Typography/Typography.js";
+import { Loader as Re } from "../Loader/Loader.js";
+import { MainRow as Se, InputContainer as Be, ValueContainer as De, Input as Fe } from "./components.js";
+import { ComboboxOption as Te } from "./ComboboxOption.js";
+import { ComboboxList as Ae } from "./ComboboxList.js";
+import { Field as Pe } from "../Field/Field.js";
+import { FieldLabel as Ve } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as Qe } from "../Field/FieldHint.js";
-import { FieldError as Xe } from "../Field/FieldError.js";
+import { FieldHint as Ke } from "../Field/FieldHint.js";
+import { FieldError as Ne } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Stack as Ye } from "../Stack/Stack.js";
-import { KeyboardKeys as Ze } from "../helpers/keyboardKeys.js";
-import { VisuallyHidden as et } from "../VisuallyHidden/VisuallyHidden.js";
-const O = (tt) => {
-  var N = tt, {
-    children: o,
-    clearLabel: i,
-    creatable: a,
-    createMessage: p,
-    disabled: u,
-    error: $,
-    hasMoreItems: ne,
-    hint: T,
-    label: E,
-    labelAction: ae,
-    loading: R,
-    loadingMessage: ie,
-    noOptionsMessage: le,
-    onChange: A,
-    onClear: P,
-    onCreateOption: se,
-    onInputChange: V,
-    onLoadMore: ce,
-    placeholder: pe,
-    required: K,
-    value: m
-  } = N, de = X(N, [
-    "children",
-    "clearLabel",
-    "creatable",
-    "createMessage",
-    "disabled",
-    "error",
-    "hasMoreItems",
-    "hint",
-    "label",
-    "labelAction",
-    "loading",
-    "loadingMessage",
-    "noOptionsMessage",
-    "onChange",
-    "onClear",
-    "onCreateOption",
-    "onInputChange",
-    "onLoadMore",
-    "placeholder",
-    "required",
-    "value"
-  ]);
-  const fe = () => {
-    var t;
-    return (t = o.find((n) => {
-      var l;
-      return ((l = n.props) == null ? void 0 : l.value.toLowerCase()) === m.toLowerCase();
-    }).props) == null ? void 0 : t.children;
-  }, [c, H] = k(0), [ue, me] = k(null), [f, U] = k(o), [g, be] = k(!1), [s, M] = k(""), x = y(), L = y(!1), I = y(), _ = y(), ge = y(), j = y(!0), d = Fe("combobox"), q = `${d}-label`;
-  if (!E && !de["aria-label"])
+import { Stack as He } from "../Stack/Stack.js";
+import { KeyboardKeys as Ue } from "../helpers/keyboardKeys.js";
+import { VisuallyHidden as _e } from "../VisuallyHidden/VisuallyHidden.js";
+const I = ({
+  children: s,
+  clearLabel: G,
+  creatable: x,
+  createMessage: J,
+  disabled: c,
+  error: M,
+  hasMoreItems: Q,
+  hint: R,
+  label: g,
+  labelAction: X,
+  loading: L,
+  loadingMessage: Y,
+  noOptionsMessage: Z,
+  onChange: S,
+  onClear: B,
+  onCreateOption: ee,
+  onInputChange: D,
+  onLoadMore: te,
+  placeholder: oe,
+  required: F,
+  value: d,
+  ...re
+}) => {
+  const ne = () => s.find((t) => t.props?.value.toLowerCase() === d.toLowerCase()).props?.children, [a, T] = y(0), [ae, ie] = y(null), [l, A] = y(s), [u, le] = y(!1), [n, k] = y(""), C = E(), O = E(!1), v = E(), P = E(), se = E(), V = E(!0), i = Ie("combobox"), K = `${i}-label`;
+  if (!g && !re["aria-label"])
     throw new Error('The Combobox component needs a "label" or an "aria-label" props');
-  Y(() => {
-    U(ee(o, s));
-  }, [s, o]), Y(() => {
-    g && x.current && Te(x.current);
-  }, [c, g]), Re(() => {
-    j.current && (j.current = !1);
-  }, [m]);
-  const Ce = g ? `${d}-${c}` : "", z = () => {
-    A(null), M("");
-  }, he = (t) => {
-    V && V(t);
-    const n = I.current.value;
-    U(ee(o, n)), H(0), me(null), s !== n && M(n), g || b(!0, !1);
-  }, Ee = (t) => {
-    const { key: n } = t, l = a && s ? f.length : f.length - 1, v = Ae(n, g);
-    switch (m && !s && n === Ze.BACKSPACE && z(), v) {
-      case h.Next: {
-        if (c === l) {
-          C(0);
+  U(() => {
+    A(j(s, n));
+  }, [n, s]), U(() => {
+    u && C.current && ke(C.current);
+  }, [a, u]), Ee(() => {
+    V.current && (V.current = !1);
+  }, [d]);
+  const ce = u ? `${i}-${a}` : "", N = () => {
+    S(null), k("");
+  }, pe = (t) => {
+    D && D(t);
+    const r = v.current.value;
+    A(j(s, r)), T(0), ie(null), n !== r && k(r), u || f(!0, !1);
+  }, de = (t) => {
+    const { key: r } = t, p = x && n ? l.length : l.length - 1, h = Oe(r, u);
+    switch (d && !n && r === Ue.BACKSPACE && N(), h) {
+      case b.Next: {
+        if (a === p) {
+          m(0);
           break;
         }
-        C(F(c, l, v));
+        m($(a, p, h));
         break;
       }
-      case h.Previous: {
-        if (c === 0) {
-          C(l);
+      case b.Previous: {
+        if (a === 0) {
+          m(p);
           break;
         }
-        C(F(c, l, v));
+        m($(a, p, h));
         break;
       }
-      case h.Last:
-      case h.First: {
-        if (c === l) {
-          C(0);
+      case b.Last:
+      case b.First: {
+        if (a === p) {
+          m(0);
           break;
         }
-        C(F(c, l, v));
+        m($(a, p, h));
         break;
       }
-      case h.CloseSelect:
-        t.preventDefault(), S(c);
+      case b.CloseSelect:
+        t.preventDefault(), w(a);
         break;
-      case h.Close:
-        t.preventDefault(), b(!1);
+      case b.Close:
+        t.preventDefault(), f(!1);
         break;
-      case h.Open:
-        b(!0);
+      case b.Open:
+        f(!0);
         break;
     }
-  }, xe = (t) => {
-    if (t.preventDefault(), m && !L.current && M(""), L.current) {
-      L.current = !1;
+  }, fe = (t) => {
+    if (t.preventDefault(), d && !O.current && k(""), O.current) {
+      O.current = !1;
       return;
     }
-    b(!1, !1);
-  }, C = (t) => {
-    H(t);
-  }, ve = (t) => {
-    C(t), S(t);
-  }, W = () => {
-    L.current = !0;
-  }, S = (t) => {
-    const n = f[t];
-    if (M(""), n) {
-      A(n.props.value), b(!1);
+    f(!1, !1);
+  }, m = (t) => {
+    T(t);
+  }, ue = (t) => {
+    m(t), w(t);
+  }, H = () => {
+    O.current = !0;
+  }, w = (t) => {
+    const r = l[t];
+    if (k(""), r) {
+      S(r.props.value), f(!1);
       return;
     }
-    a && (se(s), b(!1));
-  }, b = (t, n = !0) => {
-    be(t), n && I.current.focus();
-  }, ye = Z.toArray(f).map((t, n) => {
-    const l = c === n;
-    return Se(t, {
-      id: `${d}-${n}`,
-      "aria-selected": ue === n,
-      "aria-posinset": n + 1,
-      "aria-setsize": Z.toArray(f).length,
-      ref(v) {
-        l && (x.current = v);
+    x && (ee(n), f(!1));
+  }, f = (t, r = !0) => {
+    le(t), r && v.current.focus();
+  }, me = _.toArray(l).map((t, r) => {
+    const p = a === r;
+    return xe(t, {
+      id: `${i}-${r}`,
+      "aria-selected": ae === r,
+      "aria-posinset": r + 1,
+      "aria-setsize": _.toArray(l).length,
+      ref(h) {
+        p && (C.current = h);
       },
-      onClick: () => ve(n),
-      onMouseDown: W,
-      isSelected: l
+      onClick: () => ue(r),
+      onMouseDown: H,
+      isSelected: p
     });
-  }), Ie = () => {
-    I.current.focus(), P && P(), z();
-  }, ke = () => {
-    I.current.focus(), b(!0);
-  }, Oe = () => {
-    const t = f.findIndex((n) => {
-      var l;
-      return ((l = n.props) == null ? void 0 : l.children) === s;
-    });
-    return s && t === -1;
-  }, Me = (t) => {
-    t.preventDefault(), b(t, !0);
+  }), be = () => {
+    v.current.focus(), B && B(), N();
+  }, ge = () => {
+    v.current.focus(), f(!0);
+  }, Ce = () => {
+    const t = l.findIndex((r) => r.props?.children === n);
+    return n && t === -1;
+  }, he = (t) => {
+    t.preventDefault(), f(t, !0);
   };
-  return /* @__PURE__ */ r.createElement(Ge, {
-    hint: T,
-    error: $,
-    id: d,
-    required: K
-  }, /* @__PURE__ */ r.createElement(et, {
+  return /* @__PURE__ */ o.createElement(Pe, {
+    hint: R,
+    error: M,
+    id: i,
+    required: F
+  }, /* @__PURE__ */ o.createElement(_e, {
     "aria-live": "polite",
     "aria-atomic": "false",
     "aria-relevant": "additions text"
-  }, m), /* @__PURE__ */ r.createElement(Ye, {
-    spacing: E || T || $ ? 1 : 0
-  }, E && /* @__PURE__ */ r.createElement(Je, {
-    action: ae
-  }, E), /* @__PURE__ */ r.createElement(Ue, {
-    ref: _,
-    $disabled: u,
-    hasError: $
-  }, /* @__PURE__ */ r.createElement(_e, {
+  }, d), /* @__PURE__ */ o.createElement(He, {
+    spacing: g || R || M ? 1 : 0
+  }, g && /* @__PURE__ */ o.createElement(Ve, {
+    action: X
+  }, g), /* @__PURE__ */ o.createElement(Se, {
+    ref: P,
+    $disabled: c,
+    hasError: M
+  }, /* @__PURE__ */ o.createElement(Be, {
     wrap: "wrap"
-  }, !s && m && /* @__PURE__ */ r.createElement(je, {
-    id: `${d}-selected-value`
-  }, /* @__PURE__ */ r.createElement(oe, null, fe())), /* @__PURE__ */ r.createElement(qe, {
-    "aria-activedescendant": Ce,
+  }, !n && d && /* @__PURE__ */ o.createElement(De, {
+    id: `${i}-selected-value`
+  }, /* @__PURE__ */ o.createElement(z, null, ne())), /* @__PURE__ */ o.createElement(Fe, {
+    "aria-activedescendant": ce,
     "aria-autocomplete": "list",
-    "aria-controls": `${d}-listbox`,
-    "aria-disabled": u,
-    "aria-expanded": g,
+    "aria-controls": `${i}-listbox`,
+    "aria-disabled": c,
+    "aria-expanded": u,
     "aria-haspopup": "listbox",
-    "aria-labelledby": E ? q : void 0,
+    "aria-labelledby": g ? K : void 0,
     autoComplete: "off",
     autoCorrect: "off",
-    id: d,
-    onBlur: u ? void 0 : xe,
-    onClick: u ? void 0 : Me,
-    onInput: u ? void 0 : he,
-    onKeyDown: u ? void 0 : Ee,
-    placeholder: m ? "" : pe,
-    readOnly: u,
-    ref: I,
-    required: K,
+    id: i,
+    onBlur: c ? void 0 : fe,
+    onClick: c ? void 0 : he,
+    onInput: c ? void 0 : pe,
+    onKeyDown: c ? void 0 : de,
+    placeholder: d ? "" : oe,
+    readOnly: c,
+    ref: v,
+    required: F,
     role: "combobox",
     spellCheck: "off",
     type: "text",
-    value: s
-  })), /* @__PURE__ */ r.createElement(te, null, (m || s) && /* @__PURE__ */ r.createElement(Pe, {
-    id: `${d}-clear`,
-    "aria-label": i,
-    disabled: u,
+    value: n
+  })), /* @__PURE__ */ o.createElement(q, null, (d || n) && /* @__PURE__ */ o.createElement(Me, {
+    id: `${i}-clear`,
+    "aria-label": G,
+    disabled: c,
     paddingLeft: 3,
     as: "button",
-    onClick: Ie,
+    onClick: be,
     type: "button"
-  }, /* @__PURE__ */ r.createElement(De, null)), /* @__PURE__ */ r.createElement(Ve, {
-    disabled: u,
+  }, /* @__PURE__ */ o.createElement(ye, null)), /* @__PURE__ */ o.createElement(Le, {
+    disabled: c,
     paddingLeft: 3,
     "aria-hidden": !0,
     as: "button",
-    onClick: ke,
+    onClick: ge,
     tabIndex: -1,
     type: "button"
-  }, /* @__PURE__ */ r.createElement(Be, null)))), /* @__PURE__ */ r.createElement(Qe, null), /* @__PURE__ */ r.createElement(Xe, null)), g && /* @__PURE__ */ r.createElement(Ke, {
-    id: `${d}-popover`,
-    source: _,
+  }, /* @__PURE__ */ o.createElement(ve, null)))), /* @__PURE__ */ o.createElement(Ke, null), /* @__PURE__ */ o.createElement(Ne, null)), u && /* @__PURE__ */ o.createElement(we, {
+    id: `${i}-popover`,
+    source: P,
     spacing: 4,
     fullWidth: !0,
-    intersectionId: `${d}-listbox-popover-intersection`,
-    onReachEnd: ne && !R ? ce : void 0
-  }, /* @__PURE__ */ r.createElement("div", {
+    intersectionId: `${i}-listbox-popover-intersection`,
+    onReachEnd: Q && !L ? te : void 0
+  }, /* @__PURE__ */ o.createElement("div", {
     role: "listbox",
-    ref: ge,
-    id: `${d}-listbox`,
-    "aria-labelledby": E ? q : void 0
-  }, (Boolean(f.length) || a) && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(We, {
-    activeOptionRef: x,
-    options: ye
-  }), Oe() && a && /* @__PURE__ */ r.createElement(ze, {
-    isSelected: c === f.length,
+    ref: se,
+    id: `${i}-listbox`,
+    "aria-labelledby": g ? K : void 0
+  }, (Boolean(l.length) || x) && /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Ae, {
+    activeOptionRef: C,
+    options: me
+  }), Ce() && x && /* @__PURE__ */ o.createElement(Te, {
+    isSelected: a === l.length,
     ref: (t) => {
-      c === f.length && (x.current = t);
+      a === l.length && (C.current = t);
     },
-    onMouseDown: W,
-    onClick: () => S(),
+    onMouseDown: H,
+    onClick: () => w(),
     taindex: 0
-  }, p(s))), !f.length && !a && !R && /* @__PURE__ */ r.createElement(Ne, {
+  }, J(n))), !l.length && !x && !L && /* @__PURE__ */ o.createElement($e, {
     paddingLeft: 4,
     paddingRight: 4,
     paddingTop: 2,
     paddingBottom: 2,
-    ref: x
-  }, /* @__PURE__ */ r.createElement(oe, {
+    ref: C
+  }, /* @__PURE__ */ o.createElement(z, {
     textColor: "neutral800"
-  }, le(s))), R && /* @__PURE__ */ r.createElement(te, {
+  }, Z(n))), L && /* @__PURE__ */ o.createElement(q, {
     justifyContent: "center",
     alignItems: "center",
     paddingTop: 2,
     paddingBottom: 2
-  }, /* @__PURE__ */ r.createElement(He, {
+  }, /* @__PURE__ */ o.createElement(Re, {
     small: !0
-  }, ie)))));
-}, re = (o) => /* @__PURE__ */ r.createElement(O, D(B({}, o), {
+  }, Y)))));
+}, W = (s) => /* @__PURE__ */ o.createElement(I, {
+  ...s,
   creatable: !0
-}));
-O.defaultProps = {
+});
+I.defaultProps = {
   "aria-label": void 0,
   clearLabel: "clear",
   creatable: !1,
-  createMessage: (o) => `Create "${o}"`,
+  createMessage: (s) => `Create "${s}"`,
   disabled: !1,
   error: void 0,
   hasMoreItems: !1,
@@ -320,8 +269,8 @@ O.defaultProps = {
   placeholder: "Select or enter a value",
   value: void 0
 };
-re.defaultProps = O.defaultProps;
-O.propTypes = {
+W.defaultProps = I.defaultProps;
+I.propTypes = {
   "aria-label": e.string,
   children: e.oneOfType([e.arrayOf(e.node), e.node]),
   clearLabel: e.string,
@@ -344,10 +293,11 @@ O.propTypes = {
   placeholder: e.string,
   value: e.string
 };
-re.propTypes = D(B({}, O.propTypes), {
+W.propTypes = {
+  ...I.propTypes,
   onCreateOption: e.func.isRequired
-});
+};
 export {
-  O as Combobox,
-  re as CreatableCombobox
+  I as Combobox,
+  W as CreatableCombobox
 };

package/dist/Combobox/ComboboxOption.cjs

@@ -1 +1 @@
-"use strict";var b=Object.defineProperty;var a=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;var l=(e,t,o)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,s=(e,t)=>{for(var o in t||(t={}))d.call(t,o)&&l(e,o,t[o]);if(a)for(var o of a(t))i.call(t,o)&&l(e,o,t[o]);return e};var c=(e,t)=>{var o={};for(var r in e)d.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&a)for(var r of a(e))t.indexOf(r)<0&&i.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),m=require("prop-types"),T=require("../Typography/Typography.cjs"),h=require("./components.cjs"),g=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=g(y),n=g(m),p=y.forwardRef((_,r)=>{var u=_,{isSelected:e,children:t}=u,o=c(u,["isSelected","children"]);return f.default.createElement(h.OptionBox,s({hasRadius:!0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,role:"option",background:"neutral0",isSelected:e,ref:r},o),f.default.createElement(T.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},t))});p.defaultProps={isSelected:!1};p.propTypes={children:n.default.oneOfType([n.default.string,n.default.number]).isRequired,isSelected:n.default.bool};p.displayName="ComboboxOption";exports.ComboboxOption=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("prop-types"),i=require("../Typography/Typography.cjs"),s=require("./components.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=n(a),o=n(d),t=a.forwardRef(({isSelected:e,children:p,...u},l)=>r.default.createElement(s.OptionBox,{hasRadius:!0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,role:"option",background:"neutral0",isSelected:e,ref:l,...u},r.default.createElement(i.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},p)));t.defaultProps={isSelected:!1};t.propTypes={children:o.default.oneOfType([o.default.string,o.default.number]).isRequired,isSelected:o.default.bool};t.displayName="ComboboxOption";exports.ComboboxOption=t;

package/dist/Combobox/ComboboxOption.js

@@ -1,52 +1,30 @@
-var g = Object.defineProperty;
-var p = Object.getOwnPropertySymbols;
-var m = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
-var d = (o, r, e) => r in o ? g(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e, f = (o, r) => {
-  for (var e in r || (r = {}))
-    m.call(r, e) && d(o, e, r[e]);
-  if (p)
-    for (var e of p(r))
-      l.call(r, e) && d(o, e, r[e]);
-  return o;
-};
-var u = (o, r) => {
-  var e = {};
-  for (var t in o)
-    m.call(o, t) && r.indexOf(t) < 0 && (e[t] = o[t]);
-  if (o != null && p)
-    for (var t of p(o))
-      r.indexOf(t) < 0 && l.call(o, t) && (e[t] = o[t]);
-  return e;
-};
-import s, { forwardRef as b } from "react";
-import i from "prop-types";
-import { Typography as y } from "../Typography/Typography.js";
-import { OptionBox as c } from "./components.js";
-const n = b((h, t) => {
-  var a = h, { isSelected: o, children: r } = a, e = u(a, ["isSelected", "children"]);
-  return /* @__PURE__ */ s.createElement(c, f({
-    hasRadius: !0,
-    paddingLeft: 4,
-    paddingRight: 4,
-    paddingTop: 2,
-    paddingBottom: 2,
-    role: "option",
-    background: "neutral0",
-    isSelected: o,
-    ref: t
-  }, e), /* @__PURE__ */ s.createElement(y, {
-    textColor: o ? "primary600" : "neutral800",
-    fontWeight: o ? "bold" : null
-  }, r));
-});
-n.defaultProps = {
+import t, { forwardRef as a } from "react";
+import o from "prop-types";
+import { Typography as d } from "../Typography/Typography.js";
+import { OptionBox as m } from "./components.js";
+const r = a(({ isSelected: e, children: p, ...i }, n) => /* @__PURE__ */ t.createElement(m, {
+  hasRadius: !0,
+  paddingLeft: 4,
+  paddingRight: 4,
+  paddingTop: 2,
+  paddingBottom: 2,
+  role: "option",
+  background: "neutral0",
+  isSelected: e,
+  ref: n,
+  ...i
+}, /* @__PURE__ */ t.createElement(d, {
+  textColor: e ? "primary600" : "neutral800",
+  fontWeight: e ? "bold" : null
+}, p)));
+r.defaultProps = {
   isSelected: !1
 };
-n.propTypes = {
-  children: i.oneOfType([i.string, i.number]).isRequired,
-  isSelected: i.bool
+r.propTypes = {
+  children: o.oneOfType([o.string, o.number]).isRequired,
+  isSelected: o.bool
 };
-n.displayName = "ComboboxOption";
+r.displayName = "ComboboxOption";
 export {
-  n as ComboboxOption
+  r as ComboboxOption
 };

package/dist/Combobox/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("compute-scroll-into-view"),r=require("../helpers/keyboardKeys.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(a),t={Close:"Close",CloseSelect:"CloseSelect",First:"First",Last:"Last",Next:"Next",Open:"Open",PageDown:"PageDown",PageUp:"PageUp",Previous:"Previous",Select:"Select",Space:"Space",Type:"Type"},u={Close:"Close",First:"First",Last:"Last",Next:"Next",Open:"Open",Previous:"Previous",Select:"Select",UpLevel:"UpLevel"};function d(e=[],o=null,s=[]){const n=String(o!=null?o:"").toLowerCase();return n?e.filter(i=>i.props.children.toString().toLowerCase().includes(n)&&s.indexOf(i)<0):e}function p(e,o){if(!o&&e===r.KeyboardKeys.DOWN)return t.Open;if(e===r.KeyboardKeys.DOWN)return t.Next;if(e===r.KeyboardKeys.UP)return t.Previous;if(e===r.KeyboardKeys.HOME)return t.First;if(e===r.KeyboardKeys.END)return t.Last;if(e===r.KeyboardKeys.ESCAPE)return t.Close;if(e===r.KeyboardKeys.ENTER)return t.CloseSelect;if(e===r.KeyboardKeys.BACKSPACE||e===r.KeyboardKeys.CLEAR||e.length===1)return t.Type}function f(e,o,s){switch(s){case t.First:return 0;case t.Last:return o;case t.Previous:return Math.max(0,e-1);case t.Next:return Math.min(o,e+1);default:return e}}function y(e){c.default(e,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:s,top:n,left:i})=>{s.scrollTop=n,s.scrollLeft=i})}exports.MenuActions=t;exports.TreeActions=u;exports.filterOptions=d;exports.getActionFromKey=p;exports.getUpdatedIndex=f;exports.maintainScrollVisibility=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("compute-scroll-into-view"),r=require("../helpers/keyboardKeys.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=a(l),t={Close:"Close",CloseSelect:"CloseSelect",First:"First",Last:"Last",Next:"Next",Open:"Open",PageDown:"PageDown",PageUp:"PageUp",Previous:"Previous",Select:"Select",Space:"Space",Type:"Type"},u={Close:"Close",First:"First",Last:"Last",Next:"Next",Open:"Open",Previous:"Previous",Select:"Select",UpLevel:"UpLevel"};function d(e=[],o=null,s=[]){const n=String(o??"").toLowerCase();return n?e.filter(i=>i.props.children.toString().toLowerCase().includes(n)&&s.indexOf(i)<0):e}function p(e,o){if(!o&&e===r.KeyboardKeys.DOWN)return t.Open;if(e===r.KeyboardKeys.DOWN)return t.Next;if(e===r.KeyboardKeys.UP)return t.Previous;if(e===r.KeyboardKeys.HOME)return t.First;if(e===r.KeyboardKeys.END)return t.Last;if(e===r.KeyboardKeys.ESCAPE)return t.Close;if(e===r.KeyboardKeys.ENTER)return t.CloseSelect;if(e===r.KeyboardKeys.BACKSPACE||e===r.KeyboardKeys.CLEAR||e.length===1)return t.Type}function f(e,o,s){switch(s){case t.First:return 0;case t.Last:return o;case t.Previous:return Math.max(0,e-1);case t.Next:return Math.min(o,e+1);default:return e}}function y(e){c.default(e,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:s,top:n,left:i})=>{s.scrollTop=n,s.scrollLeft=i})}exports.MenuActions=t;exports.TreeActions=u;exports.filterOptions=d;exports.getActionFromKey=p;exports.getUpdatedIndex=f;exports.maintainScrollVisibility=y;