se-design 1.0.75 → 1.0.76-dev2

package/dist/index38.js

@@ -1,75 +1,288 @@
-import e from "react";
-import { useStableId as A } from "./index192.js";
-import { mergeIds as P } from "./index193.js";
-import { getA11yNameAttributes as _ } from "./index71.js";
+import a, { forwardRef as de, useState as I, useRef as V, useCallback as H, useEffect as B, useImperativeHandle as ve } from "react";
+import { Popover as we } from "./index19.js";
+import { Icon as Ee } from "./index6.js";
+import { Checkbox as ke } from "./index23.js";
+import { Button as G } from "./index4.js";
+import "./index72.js";
+import { useCombobox as be } from "./index68.js";
+import { useStableId as Ce } from "./index199.js";
 /* empty css         */
-function z({
-  value: l,
-  onChange: m,
-  onBlur: u,
-  onFocus: p,
-  disabled: n,
-  maxLength: a,
-  tag: v,
-  error: t,
-  errorMessage: i,
-  label: r,
-  placeholder: E,
-  style: N,
-  inputStyle: b,
-  automationId: f = "",
-  id: $,
-  ariaLabel: h,
-  ariaLabelledBy: I,
-  ariaDescribedBy: y,
-  ...F
-}) {
-  const w = v || "input", o = A($, "se-input"), s = `${o}-error`, d = `${o}-count`, B = P(t && i ? s : void 0, a ? d : void 0, y), C = _({
-    ariaLabel: h,
-    ariaLabelledBy: I,
-    ariaDescribedBy: B
-  }), g = {
-    ...F,
-    id: o,
-    value: l,
-    onChange: (c) => {
-      const x = c.target.value;
-      m(x);
-    },
-    onBlur: u,
-    onFocus: (c) => {
-      p?.(c);
-    },
-    disabled: n,
-    className: `${t ? "input-container-error" : "input-container-default"} ${n ? "input-container-disabled" : ""}`,
-    maxLength: a ?? void 0,
-    placeholder: E,
-    style: b,
-    "aria-invalid": t ? "true" : void 0,
-    ...C
-  };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: "input-main-container",
-    style: N,
-    "data-automation-id": f
-  }, r && /* @__PURE__ */ e.createElement("label", {
-    className: `label-container ${n ? "label-container-disabled" : ""}`,
-    htmlFor: o
-  }, r), /* @__PURE__ */ e.createElement(w, g), (t || a) && /* @__PURE__ */ e.createElement("div", {
-    className: `${t ? "error-and-max-word" : "max-word-container"} ${n ? "disabled" : ""}`
-  }, t && i && /* @__PURE__ */ e.createElement("div", {
-    key: i,
-    id: s,
-    className: "error-message",
-    role: "alert"
-  }, i), a && /* @__PURE__ */ e.createElement("div", {
-    id: d,
-    className: "max-word",
-    "aria-live": "polite",
-    "aria-atomic": "true"
-  }, /* @__PURE__ */ e.createElement("span", null, l?.length + "/" + a))));
+function g() {
+  return g = Object.assign ? Object.assign.bind() : function(v) {
+    for (var i = 1; i < arguments.length; i++) {
+      var E = arguments[i];
+      for (var k in E) ({}).hasOwnProperty.call(E, k) && (v[k] = E[k]);
+    }
+    return v;
+  }, g.apply(null, arguments);
 }
+const _e = /* @__PURE__ */ de(({
+  value: v,
+  onChange: i,
+  placeholder: E = "Type to search or add custom tags...",
+  className: k = "",
+  options: h = [],
+  renderOption: L,
+  label: _,
+  automationId: u = "",
+  noOptionsMessage: q = "No options found",
+  allowCustomTags: F = !0,
+  disabled: l = !1,
+  type: W = "select",
+  showInput: J = !0,
+  displayTagBy: K = "label",
+  isWithPortal: Q = !1
+}, X) => {
+  const j = (t) => t.map((e) => {
+    const n = h.find((o) => o.value === e);
+    return n ? {
+      label: n.label,
+      value: n.value
+    } : {
+      label: e,
+      value: e
+    };
+  }), [r, p] = I(() => j(v || [])), [s, S] = I(""), [A, Y] = I(h), [f, c] = I(!1), Z = V(null), x = V(null), R = V(!1), b = W === "multi-select-without-cta", d = W === "multi-select" || b, ee = Ce(u, "dropdown-input-tags-listbox"), N = H((t) => {
+    if (l) return;
+    const e = [...r];
+    e.some((n) => n.value === t.value) || (e.push({
+      label: t.label,
+      value: t.value
+    }), p(e), i?.(e.map((n) => n.value))), S(""), c(!1);
+  }, [l, r, i]), D = H((t, e) => {
+    let n = [];
+    t ? n = [...r, {
+      label: e.label,
+      value: e.value
+    }] : n = r.filter((o) => o.value !== e.value), p(n), b && i?.(n.map((o) => o.value));
+  }, [r, b, i]), y = "__add_custom_tag__", z = H((t) => {
+    if (!l) {
+      if (t.value === y) {
+        const e = s.trim();
+        if (!e) return;
+        const n = [...r];
+        n.some((o) => o.value === e) || (n.push({
+          label: e,
+          value: e
+        }), p(n), i?.(n.map((o) => o.value))), S(""), c(!1);
+        return;
+      }
+      if (d) {
+        const e = r.some((n) => n.value === t.value);
+        D(!e, t);
+      } else
+        N(t);
+    }
+  }, [l, d, r, s, i, D, N]), $ = A.length > 0 ? A : F && s.trim() ? [{
+    id: y,
+    label: `Add "${s.trim()}"`,
+    value: y
+  }] : [], {
+    containerProps: te,
+    inputProps: U,
+    listboxProps: ne,
+    getOptionProps: O,
+    highlightedIndex: T,
+    setHighlightedIndex: w
+  } = be({
+    items: $,
+    isOpen: f,
+    onOpenChange: c,
+    onSelect: z,
+    listboxId: ee,
+    hasItems: $.length > 0
+  });
+  B(() => {
+    if (R.current) {
+      R.current = !1;
+      return;
+    }
+    p(j(v || []));
+  }, [v, h, f]), B(() => {
+    const t = h.filter((e) => e.label.toLowerCase().includes(s.toLowerCase()) || e.value.toLowerCase().includes(s.toLowerCase()));
+    Y(t);
+  }, [s, h]);
+  const ae = (t) => {
+    if (l) return;
+    const e = r.filter((n, o) => o !== t);
+    p(e), (!d || b || d && !f) && i?.(e.map((n) => n.value));
+  }, le = (t) => {
+    if (!l) {
+      if (t.key === "Backspace" && s === "" && r.length > 0) {
+        t.preventDefault();
+        const e = r.slice(0, -1);
+        p(e), i?.(e.map((n) => n.value));
+        return;
+      }
+      if (t.key === "Enter" && s.trim() && A.length === 0 && F) {
+        t.preventDefault();
+        const e = [...r];
+        e.some((n) => n.value === s.trim()) || (e.push({
+          label: s.trim(),
+          value: s.trim()
+        }), p(e), i?.(e.map((n) => n.value))), S(""), w(-1), c(!1);
+        return;
+      }
+      U.onKeyDown(t);
+    }
+  }, re = (t) => {
+    if (l) return;
+    const e = t.target.value;
+    S(e), w(-1), e.trim() && !f && c(!0);
+  }, oe = () => {
+    l || (s.trim() || h.length > 0) && c(!0);
+  }, se = (t) => {
+    l || (t.stopPropagation(), x.current?.focus(), !f && (s.trim() || h.length > 0) && c(!0));
+  }, ie = (t) => {
+    if (l) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    t.target.closest(".input-with-tags-container") && t.stopPropagation();
+  }, ce = () => {
+    l || c(!f);
+  };
+  ve(X, () => ({
+    toggleDropdown: ce
+  }), []);
+  const ue = (t, e, n, o) => {
+    const C = r.some((P) => P.value === t.value), m = T === e, M = O(e, C);
+    return /* @__PURE__ */ a.createElement("div", g({
+      key: t.id
+    }, M, {
+      className: `dropdown-with-input-tags-option ${m ? "highlighted" : ""}`,
+      onClick: () => !o && n(t),
+      onMouseEnter: () => w(e),
+      "data-automation-id": `${u}-option-${t.id}`
+    }), /* @__PURE__ */ a.createElement("span", {
+      className: "option-label"
+    }, t.label), t.value !== t.label && /* @__PURE__ */ a.createElement("span", {
+      className: "option-value"
+    }, t.value));
+  }, pe = () => {
+    R.current = !0;
+    const t = r.map((e) => e.value);
+    i?.(t), c(!1);
+  }, me = () => {
+    p([]);
+  }, ge = (t, e) => {
+    const n = r.some((m) => m.value === t.value), o = T === e, C = O(e, n);
+    return /* @__PURE__ */ a.createElement("div", g({
+      key: t.id
+    }, C, {
+      className: `dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${o ? "highlighted" : ""}`,
+      "aria-checked": n,
+      onClick: () => !l && D(!n, t),
+      onMouseEnter: () => w(e),
+      "data-automation-id": `${u}-option-${t.id}`
+    }), /* @__PURE__ */ a.createElement("span", {
+      onClick: (m) => m.stopPropagation()
+    }, /* @__PURE__ */ a.createElement(ke, {
+      automationId: "checkbox",
+      className: "checkbox",
+      defaultChecked: n,
+      onChange: (m) => D(m, t),
+      label: t.label
+    })));
+  }, he = () => /* @__PURE__ */ a.createElement("div", {
+    className: "dropdown-with-input-tags-ctas-container"
+  }, /* @__PURE__ */ a.createElement(G, {
+    label: "Clear",
+    type: "link",
+    size: "sm",
+    onClick: me,
+    automationId: `${u}-clear-button`
+  }), /* @__PURE__ */ a.createElement(G, {
+    label: "Apply",
+    type: "primary",
+    size: "sm",
+    onClick: pe,
+    automationId: `${u}-apply-button`
+  }));
+  return /* @__PURE__ */ a.createElement("div", g({
+    className: `dropdown-with-input-tags-wrapper ${k} ${l ? "disabled-wrapper" : ""}`,
+    "data-automation-id": u
+  }, te), _ && /* @__PURE__ */ a.createElement("label", {
+    id: `${u}-label`,
+    className: "dropdown-with-input-tags-label"
+  }, _), /* @__PURE__ */ a.createElement("div", {
+    onClick: ie
+  }, /* @__PURE__ */ a.createElement(we, {
+    ref: Z,
+    className: "dropdown-with-input-tags-popover",
+    contentWidth: "full",
+    position: "bottom-left",
+    isPopoverOpen: !l && f,
+    onPopoverToggle: l ? () => {
+    } : c,
+    disableClickToggle: !0,
+    isWithPortal: Q,
+    renderPopoverContents: ({
+      closePopoverCb: t
+    }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", g({}, ne, {
+      className: "dropdown-with-input-tags-content"
+    }, d && {
+      "aria-multiselectable": "true"
+    }), $.length > 0 ? $.map((e, n) => {
+      if (e.value === y) {
+        const P = T === n, fe = O(n, !1);
+        return /* @__PURE__ */ a.createElement("div", g({
+          key: e.id
+        }, fe, {
+          className: `dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${P ? "highlighted" : ""}`,
+          onClick: () => {
+            l || (z(e), t());
+          },
+          onMouseEnter: () => w(n)
+        }), 'Add "', s.trim(), '"');
+      }
+      if (d)
+        return ge(e, n);
+      const o = r.some((P) => P.value === e.value), C = T === n, M = {
+        ...O(n, o),
+        onMouseEnter: () => w(n),
+        className: `dropdown-with-input-tags-option ${C ? "highlighted" : ""}`
+      };
+      return L ? L(e, M, N) : ue(e, n, N, l);
+    }) : /* @__PURE__ */ a.createElement("div", {
+      className: "dropdown-with-input-tags-no-options"
+    }, /* @__PURE__ */ a.createElement("div", {
+      className: "dropdown-with-input-tags-no-options-text",
+      role: "status",
+      "aria-live": "polite"
+    }, q))), d && !b && he()),
+    renderPopoverSrcElement: () => /* @__PURE__ */ a.createElement("div", {
+      className: "dropdown-with-input-tags-input-container"
+    }, /* @__PURE__ */ a.createElement("div", {
+      className: `input-with-tags-container ${l ? "disabled-input-with-tags-container" : ""}`,
+      onClick: se
+    }, r.map((t, e) => /* @__PURE__ */ a.createElement("span", {
+      key: e,
+      className: "tag-in-inputwithtags"
+    }, t[K], !l && /* @__PURE__ */ a.createElement(Ee, {
+      name: "close",
+      className: "close-icon-in-inputwithtags",
+      ariaLabel: `Remove tag ${t[K]}`,
+      onClick: () => ae(e),
+      shouldStopPropagation: !0
+    }))), (J || !r.length) && /* @__PURE__ */ a.createElement("input", g({
+      ref: x
+    }, U, {
+      type: "text",
+      value: s,
+      onChange: re,
+      onKeyDown: le,
+      onFocus: oe,
+      placeholder: r.length === 0 ? E : "",
+      className: "input-with-tags-input",
+      disabled: l,
+      "aria-label": _ || "Search and select options"
+    })))),
+    automationId: u,
+    popoverContentAutomationId: `${u}-content`
+  })));
+});
 export {
-  z as Input
+  _e as DropdownWithInputTags
 };
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' | 'textarea';\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\ntype NativeTextareaProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\n\ntype CommonInputProps = {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  tag?: InputTag;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n  automationId?: string;\n  id?: string;\n  /**\n   * Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this input.\n   * Useful for external labels outside the Input component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this input (hints, helper text, etc.).\n   * Will be merged with internal error/counter IDs.\n   */\n  ariaDescribedBy?: string;\n};\n\n/**\n * Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps | NativeTextareaProps);\n\nexport function Input({\n  value,\n  onChange,\n  onBlur,\n  onFocus,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle,\n  automationId = '',\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ...nativeProps\n}: InputProps) {\n  const Element: InputTag = tag || 'input';\n\n  const inputId = useStableId(id, 'se-input');\n  const errorId = `${inputId}-error`;\n  const countId = `${inputId}-count`;\n\n  const describedBy = mergeIds(\n    error && errorMessage ? errorId : undefined,\n    maxLength ? countId : undefined,\n    ariaDescribedBy\n  );\n\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy: describedBy\n  });\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    onFocus?.(e);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    const nextValue = e.target.value;\n    onChange(nextValue);\n  };\n\n  const inputPropsBase = {\n    ...(nativeProps as Record<string, unknown>),\n    id: inputId,\n    value,\n    onChange: handleChange,\n    onBlur,\n    onFocus: handleFocus,\n    disabled,\n    className: `${error ? 'input-container-error' : 'input-container-default'} ${\n      disabled ? 'input-container-disabled' : ''\n    }`,\n    maxLength: maxLength ?? undefined,\n    placeholder: placeholder,\n    style: inputStyle,\n    'aria-invalid': error ? 'true' : undefined,\n    ...accessibleNameProps\n  };\n\n  return (\n    <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n      {label && (\n        <label\n          className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          htmlFor={inputId}\n        >\n          {label}\n        </label>\n      )}\n      {React.createElement(Element, inputPropsBase)}\n      {(error || maxLength) &&\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n          {error && errorMessage && (\n            <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n              <span>{value?.length + '/' + maxLength}</span>\n            </div>\n          )}\n        </div>\n      }\n    </div>\n  );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;AAC/EC,YAAAA,IAAYD,EAAEE,OAAO9B;AAC3BC,MAAAA,EAAS4B,CAAS;AAAA,IAAA;AAAA,IAQlB3B,QAAAA;AAAAA,IACAC,SAfkB4B,CAACH,MAAgE;AACnFzB,MAAAA,IAAUyB,CAAC;AAAA,IAAA;AAAA,IAeXxB,UAAAA;AAAAA,IACA4B,WAAW,GAAGzB,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAamB;AAAAA,IACxBd,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASiB;AAAAA,IACjC,GAAGC;AAAAA,EAAAA;AAIHQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBrB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EACrEJ,GAAAA,KACCyB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEF,WAAW,mBAAmB5B,IAAW,6BAA6B,EAAE;AAAA,IACxE+B,SAASf;AAAAA,EAERX,GAAAA,CACI,GAERwB,gBAAAA,EAAMC,cAAcf,GAASO,CAAc,IAC1CnB,KAASF,MACT6B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAGzB,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EACjGG,GAAAA,KAASC,KACRyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK5B;AAAAA,IAAcM,IAAIO;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,KACjE7B,CACE,GAENH,KACC4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,IAAIQ;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,EAAM,GAC1EE,gBAAAA,EAAAA,cAAA,QAAA,MAAOlC,GAAOsC,SAAS,MAAMjC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}
+{"version":3,"file":"index38.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n  id: string | number;\n  label: string;\n  value: string;\n  [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n  toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n  value: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  options?: DropdownOption[];\n  renderOption?: (\n    option: DropdownOption, \n    props: { \n      id: string; \n      role: 'option'; \n      'aria-selected': boolean; \n      onMouseEnter: () => void;\n      className: string;\n    },\n    onSelect: (option: DropdownOption) => void\n  ) => React.ReactNode;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n  disabled?: boolean;\n  type?: 'select' | 'multi-select' |'multi-select-without-cta';\n  showInput?: boolean;\n  displayTagBy?: 'label' | 'value';\n  isWithPortal?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n  (\n    {\n      value,\n      onChange,\n      placeholder = \"Type to search or add custom tags...\",\n      className = '',\n      options = [],\n      renderOption,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n      disabled = false,\n      type = 'select',\n      showInput = true,\n      displayTagBy = 'label',\n      isWithPortal = false\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    // Define initValues at the top, right after props\n    const initValues = (values: string[]) => {\n      return values.map(val => {\n        const found = options.find(opt => opt.value === val);\n        return found ? { label: found.label, value: found.value } : { label: val, value: val };\n      });\n    };\n\n    // Now use it in useState\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return initValues(value || []);\n    });\n    const [inputValue, setInputValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const popoverRef = useRef<PopoverHandle>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const applyClickedRef = useRef<boolean>(false);\n    \n    const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n    const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n    // Generate stable ID for listbox\n    const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n    const handleSelectOption = useCallback(\n      (option: DropdownOption) => {\n        if (disabled) return;\n\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === option.value)) {\n          newTags.push({ label: option.label, value: option.value });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n      },\n      [disabled, tags, onChange]\n    );\n\n    const handleMultiSelectDropdownOptionClick = useCallback(\n      (isSelected: boolean, option: DropdownOption) => {\n        let newSelectedTags: { label: string; value: string }[] = [];\n        if (isSelected) {\n          newSelectedTags = [...tags, { label: option.label, value: option.value }];\n        } else {\n          newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n        }\n        setTags(newSelectedTags);\n        if (isMultiSelectWithoutCTA) {\n          onChange?.(newSelectedTags.map((tag) => tag.value));\n        }\n      },\n      [tags, isMultiSelectWithoutCTA, onChange]\n    );\n\n    const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n    const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n      if (disabled) return;\n\n      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n        const trimmed = inputValue.trim();\n        if (!trimmed) return;\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === trimmed)) {\n          newTags.push({ label: trimmed, value: trimmed });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      if (isMultiSelect) {\n        const isSelected = tags.some(tag => tag.value === option.value);\n        handleMultiSelectDropdownOptionClick(!isSelected, option);\n      } else {\n        handleSelectOption(option);\n      }\n    }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n    const effectiveItems: DropdownOption[] =\n      filteredOptions.length > 0\n        ? filteredOptions\n        : allowCustomTags && inputValue.trim()\n          ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n          : [];\n\n    // Combobox hook for keyboard navigation and ARIA\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox({\n      items: effectiveItems,\n      isOpen: isDropdownOpen,\n      onOpenChange: setIsDropdownOpen,\n      onSelect: handleSelectFromDropdown,\n      listboxId,\n      hasItems: effectiveItems.length > 0\n    });\n\n\n    useEffect(() => {\n      if (applyClickedRef.current) {\n        applyClickedRef.current = false;\n        return;\n      }\n      setTags(initValues(value || []));\n    }, [value, options, isDropdownOpen]);\n\n\n    useEffect(() => {\n      // const isInputEmpty = !inputValue.trim();\n      const filtered = options.filter(option =>\n        option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n        option.value.toLowerCase().includes(inputValue.toLowerCase())\n      );\n      setFilteredOptions(filtered);\n    }, [inputValue, options]);\n\n    const handleRemoveTag = (indexToRemove: number) => {\n      if (disabled) return;\n      \n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      \n      //in multiselect if tag removed while dorpdownopen, do not call onchange\n      if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n        onChange?.(newTags.map(tag => tag.value));\n      }\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      // Handle Backspace to remove last tag (preserve existing behavior)\n      if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        e.preventDefault();\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n        return;\n      }\n\n      // Handle Enter for custom tags when no options match\n      if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n        e.preventDefault();\n        const newTags = [...tags];\n        if (!newTags.some(tag => tag.value === inputValue.trim())) {\n          newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n          setTags(newTags);\n          onChange?.(newTags.map(tag => tag.value));\n        }\n        setInputValue('');\n        setHighlightedIndex(-1);\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n      comboboxInputProps.onKeyDown(e);\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      const newValue = e.target.value;\n      setInputValue(newValue);\n      setHighlightedIndex(-1); // Reset highlighted index when user types\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (disabled) return;\n      \n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\n      if (disabled) return;\n      \n      e.stopPropagation();\n      inputRef.current?.focus();\n      if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      \n      const target = e.target as HTMLElement;\n      const isInputArea = target.closest('.input-with-tags-container');\n      if (isInputArea) {\n        e.stopPropagation();\n      }\n    };\n\n    const toggleDropdown = () => {\n      if (disabled) return;\n      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (\n      option: DropdownOption,\n      index: number,\n      onSelect: (option: DropdownOption) => void,\n      disabled: boolean\n    ) => {\n      const isSelected = tags.some((tag) => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n          onClick={() => !disabled && onSelect(option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span className=\"option-label\">{option.label}</span>\n          {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n        </div>\n      );\n    };\n    const handleApplySelectedDropDownValues = () => {\n      applyClickedRef.current = true;\n      const newTagValues = tags.map(tag => tag.value);\n      onChange?.(newTagValues);\n      setIsDropdownOpen(false);\n    };\n\n    const clearSelectedDropDownValues = () => {\n      setTags([]);\n    };\n    const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n      const isOptionSelected = tags.some(tag => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isOptionSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n          aria-checked={isOptionSelected}\n          onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span onClick={(e) => e.stopPropagation()}>\n            <Checkbox\n              automationId=\"checkbox\"\n              className=\"checkbox\"\n              defaultChecked={isOptionSelected}\n              onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n              label={option.label}\n            />\n          </span>\n        </div>\n      );\n    };\n\n    const multiSelectRenderCTAs = () => {\n      return (\n        <div className=\"dropdown-with-input-tags-ctas-container\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n        </div>\n      );\n    };\n\n    \n\n    return (\n      <div\n        className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n        <div onClick={handlePopoverWrapperClick}>\n          <Popover\n            ref={popoverRef}\n            className=\"dropdown-with-input-tags-popover\"\n            contentWidth=\"full\"\n            position=\"bottom-left\"\n            isPopoverOpen={!disabled && isDropdownOpen}\n            onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n            disableClickToggle={true}\n            isWithPortal={isWithPortal}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <>\n                <div\n                  {...listboxProps}\n                  className=\"dropdown-with-input-tags-content\"\n                  {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n                >\n                  {effectiveItems.length > 0 ? (\n                    effectiveItems.map((option, index) => {\n                      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n                        const isHighlighted = highlightedIndex === index;\n                        const optionProps = getOptionProps(index, false);\n                        return (\n                          <div\n                            key={option.id}\n                            {...optionProps}\n                            className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n                            onClick={() => {\n                              if (disabled) return;\n                              handleSelectFromDropdown(option);\n                              closePopoverCb();\n                            }}\n                            onMouseEnter={() => setHighlightedIndex(index)}\n                          >\n                            Add \"{inputValue.trim()}\"\n                          </div>\n                        );\n                      }\n                      if (isMultiSelect) {\n                        return multiSelectRenderOption(option, index);\n                      }\n                      \n                      const isSelected = tags.some((tag) => tag.value === option.value);\n                      const isHighlighted = highlightedIndex === index;\n                      const optionProps = getOptionProps(index, isSelected);\n                      const optionPropsWithHandlers = {\n                        ...optionProps,\n                        onMouseEnter: () => setHighlightedIndex(index),\n                        className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n                      };\n                      \n                      return renderOption\n                        ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n                        : defaultRenderOption(option, index, handleSelectOption, disabled);\n                    })\n                  ) : (\n                    <div className=\"dropdown-with-input-tags-no-options\">\n                      <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n                        {noOptionsMessage}\n                      </div>\n                    </div>\n                  )}\n                </div>\n                {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n              </>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div\n                  className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag[displayTagBy]}\n                      {!disabled && (\n                        <Icon\n                          name=\"close\"\n                          className=\"close-icon-in-inputwithtags\"\n                          ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n                          onClick={() => handleRemoveTag(index)}\n                          shouldStopPropagation\n                        />\n                      )}\n                    </span>\n                  ))}\n                  {(showInput ||!tags.length) && (\n                    <input\n                      ref={inputRef}\n                      {...comboboxInputProps}\n                      type=\"text\"\n                      value={inputValue}\n                      onChange={handleInputChange}\n                      onKeyDown={handleKeyDown}\n                      onFocus={handleInputFocus}\n                      placeholder={tags.length === 0 ? placeholder : ''}\n                      className=\"input-with-tags-input\"\n                      disabled={disabled}\n                      aria-label={label || 'Search and select options'}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            automationId={automationId}\n            popoverContentAutomationId={`${automationId}-content`}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","isWithPortal","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}

package/dist/index39.js

@@ -1,87 +1,76 @@
-import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
-import { Icon as g } from "./index5.js";
-import { LabelChip as F } from "./index10.js";
-import { debounce as L } from "./index210.js";
+import e from "react";
+import { useStableId as A } from "./index199.js";
+import { mergeIds as P } from "./index200.js";
+import { getA11yNameAttributes as _ } from "./index78.js";
+import "./index72.js";
 /* empty css         */
-function z(p) {
-  const {
-    disabled: v = !1,
-    placeholder: I = "Search",
-    debounceDuration: h = 500,
-    onInputChange: c = () => {
+function G({
+  value: l,
+  onChange: m,
+  onBlur: u,
+  onFocus: p,
+  disabled: n,
+  maxLength: a,
+  tag: v,
+  error: t,
+  errorMessage: i,
+  label: r,
+  placeholder: E,
+  style: N,
+  inputStyle: b,
+  automationId: f = "",
+  id: $,
+  ariaLabel: h,
+  ariaLabelledBy: I,
+  ariaDescribedBy: y,
+  ...F
+}) {
+  const w = v || "input", o = A($, "se-input"), s = `${o}-error`, d = `${o}-count`, B = P(t && i ? s : void 0, a ? d : void 0, y), C = _({
+    ariaLabel: h,
+    ariaLabelledBy: I,
+    ariaDescribedBy: B
+  }), g = {
+    ...F,
+    id: o,
+    value: l,
+    onChange: (c) => {
+      const x = c.target.value;
+      m(x);
     },
-    onSearchClear: N = () => {
+    onBlur: u,
+    onFocus: (c) => {
+      p?.(c);
     },
-    onChipRemove: S = () => {
-    },
-    updateSearchString: o = "",
-    collapsible: f = !1,
-    width: k = "200px",
-    chips: s = [],
-    showSearchIcon: w = !0,
-    renderFilterComponent: b = null,
-    automationId: R = ""
-  } = p, [n, l] = d(""), [t, C] = d(!p?.collapsible), [i, E] = d(s || []), m = $(null);
-  r(() => {
-    t && m.current && setTimeout(() => m?.current?.focus(), 0);
-  }, [t]), r(() => {
-    o !== n && l(o);
-  }, [o]), r(() => {
-    E(s);
-  }, [s]);
-  const u = D(() => L(c, h), [c, h]);
-  r(() => () => {
-    u.cancel();
-  }, [u]);
-  const y = (e) => {
-    l(e), u(e);
-  }, B = () => {
-    l(""), c(""), N();
-  }, H = () => {
-    f && n?.trimEnd() === "" && C(!1);
-  }, _ = (e) => {
-    E(i.filter((V) => V?.id !== e?.id)), S(e);
-  }, x = i?.length > 0;
-  return /* @__PURE__ */ a.createElement("div", {
-    className: `se-search-box ${t ? "expand-box" : "shrink-box"}`,
-    style: {
-      width: k
-    },
-    "data-automation-id": R
-  }, t && /* @__PURE__ */ a.createElement("div", {
-    className: "search-box-container"
-  }, /* @__PURE__ */ a.createElement("div", {
-    className: `chips-and-search-box-container${x ? " has-chips" : ""}`
-  }, x && i?.map((e) => /* @__PURE__ */ a.createElement(F, {
-    key: e?.value,
-    label: e?.label,
-    icon: "close",
-    onIconClick: () => _(e)
-  })), /* @__PURE__ */ a.createElement("div", {
-    className: "search-input-container"
-  }, w && /* @__PURE__ */ a.createElement(g, {
-    name: "search",
-    className: "search-icon img-wrap",
-    onClick: () => f && C((e) => !e)
-  }), /* @__PURE__ */ a.createElement("input", {
-    ref: m,
-    className: "search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0",
-    id: "search_bar",
-    type: "text",
-    placeholder: I,
-    onChange: (e) => y(e.target.value),
-    value: n,
-    disabled: v,
-    onBlur: H
-  }), !!n && /* @__PURE__ */ a.createElement(g, {
-    name: "close",
-    className: "cross-icon img-wrap",
-    onClick: B
-  }))), b && /* @__PURE__ */ a.createElement("div", {
-    className: "filter-component-container"
-  }, b())));
+    disabled: n,
+    className: `${t ? "input-container-error" : "input-container-default"} ${n ? "input-container-disabled" : ""}`,
+    maxLength: a ?? void 0,
+    placeholder: E,
+    style: b,
+    "aria-invalid": t ? "true" : void 0,
+    ...C
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "input-main-container",
+    style: N,
+    "data-automation-id": f
+  }, r && /* @__PURE__ */ e.createElement("label", {
+    className: `label-container ${n ? "label-container-disabled" : ""}`,
+    htmlFor: o
+  }, r), /* @__PURE__ */ e.createElement(w, g), (t || a) && /* @__PURE__ */ e.createElement("div", {
+    className: `${t ? "error-and-max-word" : "max-word-container"} ${n ? "disabled" : ""}`
+  }, t && i && /* @__PURE__ */ e.createElement("div", {
+    key: i,
+    id: s,
+    className: "error-message",
+    role: "alert"
+  }, i), a && /* @__PURE__ */ e.createElement("div", {
+    id: d,
+    className: "max-word",
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, /* @__PURE__ */ e.createElement("span", null, l?.length + "/" + a))));
 }
 export {
-  z as SearchBox
+  G as Input
 };
 //# sourceMappingURL=index39.js.map