@strapi/design-system 1.6.6 → 1.7.0-alpha.1

package/dist/Combobox/Combobox.js

@@ -1,287 +1,357 @@
-import o, { useState as y, useRef as C, useEffect as _, useLayoutEffect as xe, Children as j, cloneElement as ye } from "react";
-import { Cross as Ie, CarretDown as Oe } from "@strapi/icons";
-import e from "prop-types";
-import { ComboboxOption as ke } from "./ComboboxOption.js";
-import { MainRow as Me, InputContainer as $e, ValueContainer as we, Input as Le } from "./components.js";
-import { filterOptions as q, maintainScrollVisibility as De, getActionFromKey as Re, MenuActions as b, getUpdatedIndex as R } from "./utils.js";
-import { Box as Be } from "../Box/Box.js";
-import { Field as Fe } from "../Field/Field.js";
-import { FieldLabel as Se } from "../Field/FieldLabel.js";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import * as a from "react";
+import { Cross as re, CarretDown as oe } from "@strapi/icons";
+import { Combobox as t } from "@strapi/ui-primitives";
+import l from "styled-components";
+import { Box as B } from "../Box/Box.js";
+import { Field as te } from "../Field/Field.js";
+import { FieldLabel as ne } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as Te } from "../Field/FieldHint.js";
-import { FieldError as Ae } from "../Field/FieldError.js";
+import { FieldHint as le } from "../Field/FieldHint.js";
+import { FieldError as ie } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as B } from "../Flex/Flex.js";
-import { KeyboardKeys as Pe } from "../helpers/keyboardKeys.js";
-import { useId as Ve } from "../hooks/useId.js";
-import { Loader as Ke } from "../Loader/Loader.js";
-import { Popover as Ne } from "../Popover/Popover.js";
-import { IconBox as He, CaretBox as Ue } from "../Select/components.js";
-import { Typography as z } from "../Typography/Typography.js";
-import { VisuallyHidden as _e } from "../VisuallyHidden/VisuallyHidden.js";
-const I = ({
-  children: s,
-  clearLabel: G,
-  creatable: h,
-  createMessage: J,
-  disabled: c,
-  error: O,
-  hasMoreItems: Q,
-  hint: $,
-  id: X,
-  label: E,
-  labelAction: Y,
-  loading: w,
-  loadingMessage: Z,
-  noOptionsMessage: ee,
-  onChange: F,
-  onClear: S,
-  onCreateOption: te,
-  onInputChange: T,
-  onLoadMore: oe,
-  placeholder: ne,
-  required: A,
-  value: d,
-  ...re
+import { Flex as $ } from "../Flex/Flex.js";
+import { useControllableState as ae } from "../hooks/useControllableState.js";
+import { useId as se } from "../hooks/useId.js";
+import { useIntersection as de } from "../hooks/useIntersection.js";
+import { Loader as ce } from "../Loader/Loader.js";
+import "../themes/lightTheme/index.js";
+import "../themes/darkTheme/index.js";
+import "lodash";
+import { inputFocusStyle as ue } from "../themes/utils.js";
+import { Typography as p } from "../Typography/Typography.js";
+const he = ({
+  children: e,
+  clearLabel: n = "clear",
+  creatable: s = !1,
+  createMessage: m = (b) => `Create "${b}"`,
+  disabled: d = !1,
+  error: c,
+  hasMoreItems: O = !1,
+  hint: j,
+  id: E,
+  label: P,
+  labelAction: q,
+  loading: f = !1,
+  loadingMessage: D = "Loading content...",
+  noOptionsMessage: H = () => "No results found",
+  onChange: C,
+  onClear: g,
+  onCreateOption: w,
+  onInputChange: I,
+  onLoadMore: v,
+  placeholder: N = "Select or enter a value",
+  required: V = !1,
+  defaultTextValue: W,
+  textValue: z,
+  value: L
 }) => {
-  const ae = () => s.find((t) => t.props?.value.toLowerCase() === d.toLowerCase()).props?.children, [i, P] = y(0), [ie, le] = y(null), [l, V] = y(s), [u, se] = y(!1), [r, k] = y(""), v = C(), M = C(!1), x = C(), K = C(), ce = C(), N = C(!0), a = Ve(X), pe = `${a}-label`;
-  if (!E && !re["aria-label"])
-    throw new Error('The Combobox component needs a "label" or an "aria-label" props');
-  _(() => {
-    V(q(s, r));
-  }, [r, s]), _(() => {
-    u && v.current && De(v.current);
-  }, [i, u]), xe(() => {
-    N.current && (N.current = !1);
-  }, [d]);
-  const de = u ? `${a}-${i}` : "", H = () => {
-    F(null), k("");
-  }, fe = (t) => {
-    T && T(t);
-    const n = x.current.value;
-    V(q(s, n)), P(0), le(null), r !== n && k(n), u || f(!0, !1);
-  }, ue = (t) => {
-    const { key: n } = t, p = h && r ? l.length : l.length - 1, g = Re(n, u);
-    switch (d && !r && n === Pe.BACKSPACE && H(), g) {
-      case b.Next: {
-        if (i === p) {
-          m(0);
-          break;
-        }
-        m(R(i, p, g));
-        break;
-      }
-      case b.Previous: {
-        if (i === 0) {
-          m(p);
-          break;
-        }
-        m(R(i, p, g));
-        break;
-      }
-      case b.Last:
-      case b.First: {
-        if (i === p) {
-          m(0);
-          break;
-        }
-        m(R(i, p, g));
-        break;
-      }
-      case b.CloseSelect:
-        t.preventDefault(), L(i);
-        break;
-      case b.Close:
-        t.preventDefault(), f(!1);
-        break;
-      case b.Open:
-        f(!0);
-        break;
-    }
-  }, me = (t) => {
-    if (t.preventDefault(), d && !M.current && k(""), M.current) {
-      M.current = !1;
-      return;
+  const [b, U] = a.useState(!1), [i, y] = ae({
+    prop: z,
+    defaultProp: W
+  }), [A, R] = a.useState(""), k = a.useRef(null), T = a.useRef(null), G = a.useRef(null), u = se(E), J = (o) => {
+    g && !d && (y(""), R(""), g(o), T.current.focus());
+  }, K = (o) => {
+    U(o);
+  }, Q = (o) => {
+    y(o);
+  }, X = (o) => {
+    R(o);
+  }, Y = (o) => {
+    I && I(o);
+  }, Z = (o) => {
+    C && C(o);
+  }, F = `intersection-${u}`, _ = (o) => {
+    v && O && !f && v(o);
+  }, S = () => {
+    w && i && w(i);
+  };
+  de(k, _, {
+    selectorToWatch: `#${F}`,
+    skipWhen: !b
+  });
+  const M = `${u}-hint`, ee = `${u}-error`;
+  return r(te, {
+    hint: j,
+    error: c,
+    id: u,
+    required: V,
+    children: h($, {
+      direction: "column",
+      alignItems: "stretch",
+      gap: 1,
+      children: [r(ne, {
+        action: q,
+        children: P
+      }), h(t.Root, {
+        autocomplete: s ? "list" : "both",
+        onOpenChange: K,
+        onTextValueChange: Q,
+        textValue: i,
+        allowCustomValue: !0,
+        disabled: d,
+        required: V,
+        value: L,
+        onValueChange: Z,
+        filterValue: A,
+        onFilterValueChange: X,
+        children: [h(me, {
+          $hasError: Boolean(c),
+          children: [r(fe, {
+            placeholder: N,
+            id: u,
+            "aria-invalid": Boolean(c),
+            "aria-labelledby": `${M} ${ee}`,
+            onChange: Y,
+            ref: T
+          }), h($, {
+            as: "span",
+            gap: 3,
+            children: [i && g ? r(pe, {
+              as: "button",
+              hasRadius: !0,
+              background: "transparent",
+              type: "button",
+              onClick: J,
+              "aria-disabled": d,
+              "aria-label": n,
+              title: n,
+              ref: G,
+              children: r(re, {})
+            }) : null, r(ge, {
+              children: r(oe, {})
+            })]
+          })]
+        }), r(t.Portal, {
+          children: r(be, {
+            sideOffset: 4,
+            children: h($e, {
+              ref: k,
+              children: [e, s ? r(t.CreateItem, {
+                onPointerUp: S,
+                onClick: S,
+                asChild: !0,
+                children: r(x, {
+                  children: r(p, {
+                    children: m(i ?? "")
+                  })
+                })
+              }) : null, !s && !f ? r(t.NoValueFound, {
+                asChild: !0,
+                children: r(x, {
+                  $hasHover: !1,
+                  children: r(p, {
+                    children: H(i ?? "")
+                  })
+                })
+              }) : null, f ? r($, {
+                justifyContent: "center",
+                alignItems: "center",
+                paddingTop: 2,
+                paddingBottom: 2,
+                children: r(ce, {
+                  small: !0,
+                  children: D
+                })
+              }) : null, r(B, {
+                id: F,
+                width: "100%",
+                height: "1px"
+              })]
+            })
+          })
+        })]
+      }), r(le, {}), r(ie, {})]
+    })
+  });
+}, ze = (e) => r(he, {
+  ...e,
+  creatable: !0
+}), pe = l(B)`
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({
+  theme: e
+}) => e.colors.neutral600};
+  }
+`, me = l(t.Trigger)`
+  position: relative;
+  border: 1px solid ${({
+  theme: e,
+  $hasError: n
+}) => n ? e.colors.danger600 : e.colors.neutral200};
+  padding-right: ${({
+  theme: e
+}) => e.spaces[3]};
+  padding-left: ${({
+  theme: e
+}) => e.spaces[3]};
+  border-radius: ${({
+  theme: e
+}) => e.borderRadius};
+  background: ${({
+  theme: e
+}) => e.colors.neutral0};
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({
+  theme: e
+}) => e.spaces[4]};
+
+  &[data-disabled] {
+    color: ${({
+  theme: e
+}) => e.colors.neutral600};
+    background: ${({
+  theme: e
+}) => e.colors.neutral150};
+    cursor: not-allowed;
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({
+  theme: e,
+  $hasError: n
+}) => ue()({
+  theme: e,
+  hasError: n
+})};
+`, fe = l(t.TextInput)`
+  width: 100%;
+  font-size: ${14 / 16}rem;
+  color: ${({
+  theme: e
+}) => e.colors.neutral800};
+  min-height: ${40 / 16}rem;
+  border: none;
+  background-color: transparent;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`, ge = l(t.Icon)`
+  & > svg {
+    width: ${6 / 16}rem;
+
+    & > path {
+      fill: ${({
+  theme: e
+}) => e.colors.neutral600};
     }
-    f(!1, !1);
-  }, m = (t) => {
-    P(t);
-  }, be = (t) => {
-    m(t), L(t);
-  }, U = () => {
-    M.current = !0;
-  }, L = (t) => {
-    const n = l[t];
-    if (k(""), n) {
-      F(n.props.value), f(!1);
-      return;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`, be = l(t.Content)`
+  background: ${({
+  theme: e
+}) => e.colors.neutral0};
+  box-shadow: ${({
+  theme: e
+}) => e.shadows.filterShadow};
+  border: 1px solid ${({
+  theme: e
+}) => e.colors.neutral150};
+  border-radius: ${({
+  theme: e
+}) => e.borderRadius};
+  width: var(--radix-combobox-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+`, $e = l(t.Viewport)`
+  padding: ${({
+  theme: e
+}) => e.spaces[1]};
+`, Le = a.forwardRef(({
+  children: e,
+  value: n,
+  disabled: s,
+  textValue: m,
+  ...d
+}, c) => r(t.ComboboxItem, {
+  asChild: !0,
+  value: n,
+  disabled: s,
+  textValue: m,
+  children: r(x, {
+    ref: c,
+    ...d,
+    children: r(t.ItemText, {
+      asChild: !0,
+      children: r(p, {
+        children: e
+      })
+    })
+  })
+})), x = l.div`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  padding: ${({
+  theme: e
+}) => e.spaces[2]} ${({
+  theme: e
+}) => e.spaces[4]};
+  background-color: ${({
+  theme: e
+}) => e.colors.neutral0};
+  border-radius: ${({
+  theme: e
+}) => e.borderRadius};
+
+  &[data-selected] {
+    background-color: ${({
+  theme: e
+}) => e.colors.primary100};
+
+    ${p} {
+      color: ${({
+  theme: e
+}) => e.colors.primary600};
+      font-weight: bold;
     }
-    h && (te(r), f(!1));
-  }, f = (t, n = !0) => {
-    se(t), n && x.current.focus();
-  }, ge = j.toArray(l).map((t, n) => {
-    const p = i === n;
-    return ye(t, {
-      id: `${a}-${n}`,
-      "aria-selected": ie === n,
-      "aria-posinset": n + 1,
-      "aria-setsize": j.toArray(l).length,
-      ref(g) {
-        p && (v.current = g);
-      },
-      onClick: () => be(n),
-      onMouseDown: U,
-      isSelected: p
-    });
-  }), Ce = () => {
-    x.current.focus(), S && S(), H();
-  }, he = () => {
-    x.current.focus(), f(!0);
-  }, Ee = () => {
-    const t = l.findIndex((n) => n.props?.children === r);
-    return r && t === -1;
-  }, ve = (t) => {
-    t.preventDefault(), f(t, !0);
-  };
-  let D;
-  return O ? D = `${a}-error` : $ && (D = `${a}-hint`), /* @__PURE__ */ o.createElement(Fe, { hint: $, error: O, id: a, required: A }, /* @__PURE__ */ o.createElement(_e, { "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions text" }, d), /* @__PURE__ */ o.createElement(B, { direction: "column", alignItems: "stretch", gap: E || $ || O ? 1 : 0 }, E && /* @__PURE__ */ o.createElement(Se, { action: Y }, E), /* @__PURE__ */ o.createElement(Me, { ref: K, $disabled: c, hasError: O }, /* @__PURE__ */ o.createElement($e, { wrap: "wrap" }, !r && d && /* @__PURE__ */ o.createElement(we, { id: `${a}-selected-value` }, /* @__PURE__ */ o.createElement(z, null, ae())), /* @__PURE__ */ o.createElement(
-    Le,
-    {
-      "aria-activedescendant": de,
-      "aria-autocomplete": "list",
-      "aria-controls": `${a}-listbox`,
-      "aria-disabled": c,
-      "aria-expanded": u,
-      "aria-haspopup": "listbox",
-      "aria-describedby": D,
-      autoComplete: "off",
-      autoCorrect: "off",
-      id: a,
-      onBlur: c ? void 0 : me,
-      onClick: c ? void 0 : ve,
-      onInput: c ? void 0 : fe,
-      onKeyDown: c ? void 0 : ue,
-      placeholder: d ? "" : ne,
-      readOnly: c,
-      ref: x,
-      required: A,
-      role: "combobox",
-      spellCheck: "off",
-      type: "text",
-      value: r
+  }
+
+  &:hover,
+  &[data-highlighted] {
+    outline: none;
+    background-color: ${({
+  theme: e,
+  $hasHover: n = !0
+}) => n ? e.colors.primary100 : e.colors.neutral0};
+  }
+
+  &[data-highlighted] {
+    ${p} {
+      color: ${({
+  theme: e
+}) => e.colors.primary600};
+      font-weight: bold;
     }
-  )), /* @__PURE__ */ o.createElement(B, null, (d || r) && /* @__PURE__ */ o.createElement(
-    He,
-    {
-      id: `${a}-clear`,
-      "aria-label": G,
-      disabled: c,
-      paddingLeft: 3,
-      as: "button",
-      onClick: Ce,
-      type: "button"
-    },
-    /* @__PURE__ */ o.createElement(Ie, null)
-  ), /* @__PURE__ */ o.createElement(
-    Ue,
-    {
-      disabled: c,
-      paddingLeft: 3,
-      "aria-hidden": !0,
-      as: "button",
-      onClick: he,
-      tabIndex: -1,
-      type: "button"
-    },
-    /* @__PURE__ */ o.createElement(Oe, null)
-  ))), /* @__PURE__ */ o.createElement(Te, null), /* @__PURE__ */ o.createElement(Ae, null)), u && /* @__PURE__ */ o.createElement(
-    Ne,
-    {
-      id: `${a}-popover`,
-      source: K,
-      spacing: 4,
-      fullWidth: !0,
-      intersectionId: `${a}-listbox-popover-intersection`,
-      onReachEnd: Q && !w ? oe : void 0
-    },
-    /* @__PURE__ */ o.createElement(
-      "div",
-      {
-        role: "listbox",
-        ref: ce,
-        id: `${a}-listbox`,
-        "aria-labelledby": E ? pe : void 0
-      },
-      (Boolean(l.length) || h) && /* @__PURE__ */ o.createElement(o.Fragment, null, ge, Ee() && h && /* @__PURE__ */ o.createElement(
-        ke,
-        {
-          isSelected: i === l.length,
-          ref: (t) => {
-            i === l.length && (v.current = t);
-          },
-          onMouseDown: U,
-          onClick: () => L(),
-          taindex: 0
-        },
-        J(r)
-      )),
-      !l.length && !h && !w && /* @__PURE__ */ o.createElement(Be, { paddingLeft: 4, paddingRight: 4, paddingTop: 2, paddingBottom: 2, ref: v }, /* @__PURE__ */ o.createElement(z, { textColor: "neutral800" }, ee(r))),
-      w && /* @__PURE__ */ o.createElement(B, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2 }, /* @__PURE__ */ o.createElement(Ke, { small: !0 }, Z))
-    )
-  ));
-}, W = (s) => /* @__PURE__ */ o.createElement(I, { ...s, creatable: !0 });
-I.defaultProps = {
-  "aria-label": void 0,
-  clearLabel: "clear",
-  creatable: !1,
-  createMessage: (s) => `Create "${s}"`,
-  disabled: !1,
-  error: void 0,
-  hasMoreItems: !1,
-  hint: void 0,
-  id: void 0,
-  label: void 0,
-  loading: !1,
-  loadingMessage: "Loading content...",
-  noOptionsMessage: () => "No results found",
-  onClear: void 0,
-  onCreateOption: void 0,
-  onInputChange: void 0,
-  onLoadMore: void 0,
-  placeholder: "Select or enter a value",
-  value: void 0
-};
-W.defaultProps = I.defaultProps;
-I.propTypes = {
-  "aria-label": e.string,
-  children: e.oneOfType([e.arrayOf(e.node), e.node]),
-  clearLabel: e.string,
-  creatable: e.bool,
-  createMessage: e.func,
-  disabled: e.bool,
-  error: e.string,
-  hasMoreItems: e.bool,
-  id: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  label: e.string,
-  labelAction: e.element,
-  loading: e.bool,
-  loadingMessage: e.string,
-  noOptionsMessage: e.func,
-  onChange: e.func.isRequired,
-  onClear: e.func,
-  onCreateOption: e.func,
-  onInputChange: e.func,
-  onLoadMore: e.func,
-  placeholder: e.string,
-  value: e.string
-};
-W.propTypes = {
-  ...I.propTypes,
-  onCreateOption: e.func.isRequired
-};
+  }
+`;
 export {
-  I as Combobox,
-  W as CreatableCombobox
+  he as Combobox,
+  ze as CreatableCombobox,
+  Le as Option,
+  x as OptionBox
 };

package/dist/Combobox/ComboboxList.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("prop-types"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=r(t),o=({options:e})=>e;o.propTypes={options:s.default.array.isRequired};exports.ComboboxList=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=({options:t})=>e.jsx(e.Fragment,{children:t});exports.ComboboxList=o;

package/dist/Combobox/ComboboxList.js

@@ -1,8 +1,9 @@
-import r from "prop-types";
-const p = ({ options: o }) => o;
-p.propTypes = {
-  options: r.array.isRequired
-};
+import { jsx as r, Fragment as t } from "react/jsx-runtime";
+const m = ({
+  options: o
+}) => r(t, {
+  children: o
+});
 export {
-  p as ComboboxList
+  m as ComboboxList
 };

package/dist/Combobox/ComboboxOption.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("prop-types"),i=require("./components.cjs"),s=require("../Typography/Typography.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(i.OptionBox,{hasRadius:!0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,role:"option",background:"neutral0",isSelected:e,ref:l,...u},r.default.createElement(s.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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./Combobox.cjs"),e=o.Option;exports.ComboboxOption=e;