@zeniai/web-components 3.17.3 → 3.17.4

package/dist/LabeledCreatableSingleSelectField-6_b-Ka4h.js

@@ -0,0 +1,515 @@
+import { u as N, j as i, ay as _, n as A, V as G, c as j, d as T, m as I, e as q } from "./vendor-.pnpm-B2klaOGU.js";
+import s from "@emotion/styled";
+import { a as J, S as l, e as S, he as K, y as Q, C as p, gj as U, t as R, p as X, b as Y, u as Z, aB as ee, R as u, D as r, aw as te } from "./index-CR2Dmphx.js";
+const ie = ({
+  allValues: e,
+  selectedValue: o,
+  name: n,
+  onSelectedValueChanged: a,
+  isDisabled: c,
+  placeholder: g,
+  isOptionRemovable: w = !0,
+  addIconInCreateLabel: x,
+  getLabelForId: f,
+  tagProperties: h,
+  hasError: C,
+  style: d
+}) => {
+  const $ = N(), y = je(e, f), O = J.getLocalizedStrings().dropDowns, L = y.sort((t, m) => t.label.localeCompare(m.label)), v = o != null && o ? V(o, f) : void 0, M = {
+    container: (t) => ({
+      ...t,
+      width: "100%",
+      ...d
+    }),
+    menu: (t) => ({
+      ...t,
+      backgroundColor: $.colors.grey5,
+      borderRadius: l.sp1,
+      boxShadow: `${l.sp0} 2px ${l.sp2} ${$.colors.dropShadowHover}`,
+      border: `1px solid ${$.colors.grey3}`,
+      // TODO - Add border and radius to every dropdown menu
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: `1px ${l.sp0} ${l.sp0} ${l.sp0}`,
+      overflow: "hidden"
+    }),
+    menuList: (t) => ({
+      ...t,
+      borderRadius: l.sp1
+    }),
+    input: (t, { selectProps: m }) => ({
+      ...t,
+      ":after": {
+        width: m.inputValue.length > 0 ? l.sp0 : "unset"
+      }
+    })
+  }, E = (t) => /* @__PURE__ */ i.jsxs(xe, { children: [
+    /* @__PURE__ */ i.jsx(be, { children: /* @__PURE__ */ i.jsx(Q, { fill: "currentColor", height: l.sp3, width: l.sp3 }) }),
+    /* @__PURE__ */ i.jsx(fe, { children: `${O.createOption} "${t}"` })
+  ] }), B = (t) => {
+    const { menuIsOpen: m, isFocused: k, isDisabled: z, selectProps: W } = t, { value: F } = W;
+    return /* @__PURE__ */ i.jsx(
+      se,
+      {
+        menuIsOpen: m,
+        isFocused: k,
+        isDisabled: z,
+        selectedValue: F,
+        hasError: C,
+        "data-testid": S(
+          "creatable-single-select-control",
+          n
+        ),
+        children: /* @__PURE__ */ i.jsx(j.Control, { ...t, className: "select-control", children: t.children })
+      }
+    );
+  }, H = (t) => /* @__PURE__ */ i.jsx(ye, { children: /* @__PURE__ */ i.jsxs(j.SingleValue, { ...t, children: [
+    t.selectProps.menuIsOpen === !1 && h != null && h.isTagShownForOption(t.data.value) === !0 && /* @__PURE__ */ i.jsx(we, { children: /* @__PURE__ */ i.jsx($e, { style: h.style, children: h.tagName }) }),
+    t.children
+  ] }) }), P = (t) => {
+    const { selectProps: m } = t, { placeholder: k, value: z } = m;
+    return /* @__PURE__ */ i.jsx(
+      j.Input,
+      {
+        ...t,
+        autoComplete: "new-password",
+        placeholder: z == null ? k : void 0,
+        "data-testid": S("creatable-single-select-input", n),
+        children: t.children
+      }
+    );
+  };
+  return /* @__PURE__ */ i.jsx(
+    _,
+    {
+      isMulti: !1,
+      onCreateOption: (t) => {
+        const m = K(t);
+        a(m);
+      },
+      onChange: (t) => {
+        w !== !1 && t?.value != null && v?.value === t.value ? a(void 0) : a(t?.value);
+      },
+      formatCreateLabel: (t) => x === !0 ? E(t) : `${O.otherOption} ${t}`,
+      tabSelectsValue: !1,
+      openMenuOnFocus: !0,
+      "data-testid": S("creatable-single-select", n),
+      classNamePrefix: "creatable-single-select-field",
+      createOptionPosition: "last",
+      allowCreateWhileLoading: !0,
+      controlShouldRenderValue: !0,
+      placeholder: g,
+      menuPlacement: "auto",
+      maxMenuHeight: 288,
+      defaultValue: v,
+      value: v,
+      menuShouldScrollIntoView: !1,
+      closeMenuOnSelect: !0,
+      components: {
+        Control: B,
+        Option: re,
+        Input: P,
+        SingleValue: H,
+        ValueContainer: le,
+        DropdownIndicator: ve,
+        IndicatorSeparator: Se,
+        ClearIndicator: Ce,
+        Placeholder: ne,
+        MenuList: oe
+      },
+      hideSelectedOptions: !1,
+      styles: M,
+      options: L,
+      isClearable: !0,
+      isSearchable: !0,
+      isDisabled: c != null
+    },
+    A()
+  );
+}, le = (e) => /* @__PURE__ */ i.jsx(j.ValueContainer, { ...e, className: "select-value-container", children: e.children }), oe = (e) => {
+  const { options: n, children: a, maxHeight: c, getValue: g } = e, [w] = g(), x = n.indexOf(w) * 40;
+  return /* @__PURE__ */ i.jsx(
+    G,
+    {
+      height: a.length > 7 ? c : a.length * 40,
+      width: "100%",
+      itemCount: a.length,
+      itemSize: () => 40,
+      initialScrollOffset: x,
+      children: ({ index: f, style: h }) => /* @__PURE__ */ i.jsx(ue, { style: h, children: a[f] })
+    }
+  );
+}, ne = () => null, re = (e) => {
+  const { isSelected: o, isDisabled: n, isFocused: a, data: c } = e, g = typeof c.label == "string" ? c.label : c.value;
+  return /* @__PURE__ */ i.jsx(
+    ae,
+    {
+      isFocused: a,
+      isSelected: o,
+      isDisabled: n,
+      children: /* @__PURE__ */ i.jsx(j.Option, { ...e, className: "select-option", children: /* @__PURE__ */ i.jsxs(
+        ce,
+        {
+          "data-testid": S(
+            "creatable-single-select-option",
+            g
+          ),
+          children: [
+            /* @__PURE__ */ i.jsx(he, { children: /* @__PURE__ */ i.jsx(de, { isSelected: o, isDisabled: n, children: e.label }) }),
+            o ? /* @__PURE__ */ i.jsxs(ge, { children: [
+              /* @__PURE__ */ i.jsx(me, { className: "right-tick-icon" }),
+              /* @__PURE__ */ i.jsx(pe, { className: "close-tick-icon" })
+            ] }) : null
+          ]
+        }
+      ) })
+    }
+  );
+}, se = s.div`
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  .select-control {
+    border: none;
+    height: ${l.sp6};
+    background-color: ${(e) => e.hasError === !0 ? p.importantLight : e.menuIsOpen ? e.theme.colors.background : e.theme.colors.grey5};
+    box-shadow: none;
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError === !0 ? p.importantLight : e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${l.sp0} ${l.sp3};
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: ${(e) => e.menuIsOpen === !1 ? "flex-end" : "flex-start"};
+
+    .creatable-single-select-field__single-value {
+      display: flex;
+      border-radius: ${l.sp0};
+      margin: ${l.sp0};
+      color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.primary};
+      ${R.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .creatable-single-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? l.sp0 : "100%"};
+      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
+      ${R.standardRegular.css};
+      color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.primary};
+      margin: ${l.sp0};
+      cursor: inherit;
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "right" : "initial"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`, ae = s.div`
+  border-radius: inherit;
+  .select-option {
+    ${R.smallRegular.css};
+    height: ${l.sp6};
+    padding: 9px ${l.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+    background-color: ${(e) => e.isSelected || e.isFocused ? e.theme.colors.background : e.theme.colors.grey5};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+    border-radius: inherit;
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
+      .right-tick-icon {
+        display: none;
+      }
+      .close-tick-icon {
+        display: inline-block;
+      }
+    }
+  }
+`, ce = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, de = s.label`
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
+`, he = s.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`, ue = s.div`
+  :first-of-type {
+    border-top-left-radius: ${l.sp1};
+    border-top-right-radius: ${l.sp1};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${l.sp1};
+    border-bottom-right-radius: ${l.sp1};
+  }
+`, ge = s.div`
+  display: flex;
+`, me = s(X)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, pe = s(Y)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, be = s.div`
+  display: flex;
+  width: ${l.sp3};
+  align-items: center;
+  margin-right: ${l.sp2};
+`, xe = s.div`
+  display: flex;
+  flex-direction: row;
+`, fe = s.div``, we = s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 6px;
+  margin-right: ${l.sp2};
+`, $e = s(U)`
+  color: ${p.neutralGrey5Light};
+  border-radius: ${l.sp2};
+  padding: 3px 6px;
+  margin-left: 12px;
+  letter-spacing: 0.04em;
+`, ye = s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: inherit;
+  align-items: center;
+  width: 100%;
+`, ve = () => null, Se = () => null, Ce = () => null, je = (e, o) => e.map((n) => V(n, o)), V = (e, o) => ({
+  value: e,
+  label: o !== void 0 ? o(e) : e
+}), Oe = ({
+  name: e,
+  registerOptions: o,
+  defaultValue: n,
+  placeholder: a,
+  isDisabled: c,
+  style: g,
+  addIconInCreateLabel: w,
+  isOptionRemovable: x,
+  tagProperties: f,
+  onSelectChange: h,
+  getLabelForId: C
+}) => {
+  const {
+    control: d,
+    formState: { errors: $ }
+  } = T(), y = I($, e ?? "");
+  return /* @__PURE__ */ i.jsx(
+    q,
+    {
+      name: e,
+      control: d,
+      defaultValue: n,
+      "data-testid": S("creatable-single-select-field", e),
+      rules: o,
+      render: ({ field: { value: O, onChange: L } }) => /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsx(
+        ie,
+        {
+          onSelectedValueChanged: (v) => {
+            h?.(v ?? ""), L({
+              allOptions: n.allOptions,
+              selectedOption: v
+            });
+          },
+          placeholder: a,
+          style: g,
+          isDisabled: c,
+          selectedValue: O.selectedOption,
+          allValues: n.allOptions,
+          addIconInCreateLabel: w,
+          isOptionRemovable: x,
+          getLabelForId: C,
+          tagProperties: f,
+          hasError: y,
+          name: e
+        }
+      ) })
+    }
+  );
+}, b = {
+  width: new u(343, 580, 726),
+  height: new u(r[6], r[6]),
+  controlHeight: new u(r[6], r[6]),
+  paddingTopBottom: new u(r[2], r[2]),
+  marginTop: new u(r[2], r[2]),
+  marginBottom: new u(r[2], r[2]),
+  marginRight: new u(r[2], r[2]),
+  labelMarginLeft: new u(r[3], r[4]),
+  labelMarginRight: new u(r[3], r[4]),
+  labelMarginTop: new u(r[2], r[2])
+}, Le = {
+  infoLabel: new te("extraSmallRegular", "smallRegular")
+};
+function Ie({
+  isDisabled: e,
+  label: o,
+  creatableSingleSelectField: n,
+  style: a,
+  additionalInfoLabel: c,
+  errorInfoLabel: g,
+  isOptionRemovable: w,
+  addIconInCreateLabel: x,
+  additionalInfoTextColor: f,
+  onSelectChange: h,
+  getLabelForId: C
+}) {
+  const d = Z(), {
+    formState: { errors: $ }
+  } = T(), y = I($, n.name ?? "");
+  return /* @__PURE__ */ i.jsxs(
+    ke,
+    {
+      size: d,
+      style: a,
+      isDisabled: e != null,
+      hasError: y,
+      "data-testid": S(
+        "labeled-creatable-single-select-field",
+        n.name
+      ),
+      children: [
+        /* @__PURE__ */ i.jsx(
+          ee,
+          {
+            isDisabled: e,
+            label: o.label,
+            htmlFor: n.name,
+            style: {
+              marginLeft: b.labelMarginLeft.value(d),
+              marginRight: b.labelMarginRight.value(d),
+              marginTop: b.labelMarginTop.value(d),
+              width: o.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ i.jsxs(ze, { labelWidth: o.width, children: [
+          /* @__PURE__ */ i.jsx(
+            Oe,
+            {
+              ...n,
+              isDisabled: e,
+              style: {
+                display: "flex",
+                flexGrow: 1,
+                maxWidth: o.width !== null && x === !1 ? `calc(100% - ${o.width}px)` : "auto",
+                height: b.controlHeight.value(d)
+              },
+              onSelectChange: h,
+              isOptionRemovable: w,
+              addIconInCreateLabel: x,
+              getLabelForId: C
+            }
+          ),
+          /* @__PURE__ */ i.jsx(
+            D,
+            {
+              size: d,
+              additionalInfoTextColor: f,
+              children: c
+            }
+          ),
+          y && /* @__PURE__ */ i.jsx(D, { size: d, hasError: y, children: g })
+        ] })
+      ]
+    }
+  );
+}
+const ke = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => b.width.valuePx(e.size)};
+  min-height: ${(e) => b.height.valuePx(e.size)};
+  padding-right: ${(e) => b.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => b.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => b.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .select-control {
+      background-color: ${(e) => e.hasError === !0 ? p.importantLight : e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError === !0 ? p.importantLight : e.theme.colors.background};
+    }
+  }
+`, ze = s.div`
+  display: flex;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  justify-content: flex-end;
+  flex-direction: column;
+  position: relative;
+`, D = s.label`
+  color: ${(e) => e.hasError === !0 ? p.important : e.additionalInfoTextColor != null ? e.additionalInfoTextColor : e.theme.colors.grey1};
+  width: auto;
+  ${(e) => `${Le.infoLabel.style(e.size)}`};
+  padding-right: ${l.sp3};
+  text-align: right;
+`;
+export {
+  Ie as L
+};