se-design 1.0.2 → 1.0.8-5.dev.0

package/dist/index23.js

@@ -1,195 +1,90 @@
-import t, { useState as h, useRef as X, useEffect as A } from "react";
-import { Popover as G } from "./index17.js";
-import { Icon as B } from "./index5.js";
-import { Checkbox as H } from "./index21.js";
-import { Button as P } from "./index3.js";
-import { InputWithIcon as Y } from "./index50.js";
-const ae = (o) => {
-  const [i, M] = h(!1), [p, w] = h(""), [a, m] = h(() => o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : []), y = X(null), {
-    selectBy: s = "",
-    optionsUniqueBy: c = "",
-    displaySelected: O = !1,
-    dropDownOptions: g,
-    defaultText: d = "Select",
-    iconColor: S = "var(--color-gray-700)",
-    disabled: u = !1,
-    dropdownClassName: U = "",
-    hasError: E = !1,
-    errorMessage: j = "",
-    customDropdownContent: C = null,
-    isBorderless: L = !1,
-    shouldShowSearch: D = !1,
-    searchPlaceholder: R = "Search...",
-    searchResultEmptyMessage: N = "No results found"
-  } = o;
-  A(() => {
-    const e = o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : [];
-    m(e);
-  }, [o?.defaultSelectedValue]), A(() => {
-    i || w("");
-  }, [i]);
-  const v = o?.type === "multi-select", k = () => p.trim() ? (g || []).filter((e) => (e?.[s]?.toString().toLowerCase() || "").includes(p.toLowerCase())) : g || [], V = (e) => {
-    m([e]), y.current?.togglePopover(), o?.onOptionClick?.(e);
-  }, T = (e) => v ? d : e?.[s] || d, q = () => {
-    m([]);
-  }, $ = (e, l = !1) => {
-    if (o?.renderOptionChip)
-      return o?.renderOptionChip(e, l);
-    if (v && a?.length > 0) {
-      const r = a[0]?.[s] || "", n = a.length - 1;
-      return /* @__PURE__ */ t.createElement("div", {
-        className: "option-chip flex items-center w-full"
-      }, /* @__PURE__ */ t.createElement("div", {
-        className: `${n > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${d}: ${r}`), n > 0 && /* @__PURE__ */ t.createElement("div", {
-        className: "flex-shrink-0"
-      }, "+", n));
+import s, { useState as j, useEffect as B } from "react";
+import { useStableId as K } from "./index205.js";
+import { getA11yNameAttributes as L } from "./index81.js";
+import "./index72.js";
+import { mergeIds as q } from "./index206.js";
+/* empty css         */
+function h() {
+  return h = Object.assign ? Object.assign.bind() : function(l) {
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
+      for (var e in r) ({}).hasOwnProperty.call(r, e) && (l[e] = r[e]);
     }
-    return /* @__PURE__ */ t.createElement("p", {
-      className: "option-chip flex flex-1 items-center justify-between"
-    }, T(e));
-  }, I = () => /* @__PURE__ */ t.createElement("div", {
-    className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-  }, /* @__PURE__ */ t.createElement(Y, {
-    leftIcon: {
-      name: "search",
-      position: "left",
-      style: {
-        color: "var(--color-gray-500)"
-      }
-    },
-    value: p,
-    onChange: (e) => w(e),
-    placeholder: R,
-    style: {
-      margin: 0,
-      gap: 0
-    },
-    inputStyle: {
-      width: "100%",
-      border: "none",
-      outline: "none"
+    return l;
+  }, h.apply(null, arguments);
+}
+const Q = ({
+  className: l = "",
+  automationId: i = "",
+  defaultChecked: r = !1,
+  checked: e,
+  disabled: n = !1,
+  onChange: x,
+  checkMarkType: c = "",
+  label: u = "",
+  disabledLabel: g = "",
+  containerAutomationId: E = "",
+  ariaLabel: y,
+  ariaLabelledBy: C,
+  ariaDescribedBy: N,
+  ariaControls: I,
+  tabIndex: k,
+  ariaHidden: w = !1
+}) => {
+  const o = e !== void 0, [t, m] = j(o ? e : r);
+  B(() => {
+    m(o ? e : r);
+  }, [e, r]);
+  const A = (a) => {
+    n || (o || m((b) => !b), x?.(o ? !e : !t, a));
+  }, $ = (a) => {
+    if (!n && (a.key === "Enter" || a.key === " ")) {
+      a.preventDefault(), a.stopPropagation();
+      const b = o ? !e : !t;
+      o || m(b);
+      const d = a.currentTarget.closest("label")?.querySelector("input");
+      d && x?.(b, {
+        target: d,
+        currentTarget: d
+      });
     }
-  })), z = (e, l) => {
-    const r = e[s], n = a[0]?.[s] || d, b = c?.length ? e[c] == a[0]?.[c] : !0, f = O && r === n && b;
-    return /* @__PURE__ */ t.createElement("div", {
-      key: `$drop-option-${crypto.randomUUID()}`,
-      className: `option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${f ? "selected" : ""}`,
-      onClick: () => V(e),
-      onKeyDown: (x) => {
-        (x.key === "Enter" || x.key === " ") && (x.preventDefault(), V(e));
-      },
-      role: "option",
-      "aria-selected": f,
-      tabIndex: 0,
-      "data-automation-id": `dropdown-option-${e?.automationId || l}`
-    }, $({
-      ...e,
-      isOptionSelected: f
-    }, !1), f && /* @__PURE__ */ t.createElement(B, {
-      name: "checkmark",
-      stroke: S
-    }));
-  }, J = () => {
-    const e = k();
-    return /* @__PURE__ */ t.createElement("div", {
-      className: "dropdown-content dropdown-options",
-      role: "listbox",
-      "aria-label": "Dropdown options"
-    }, D && I(), /* @__PURE__ */ t.createElement("div", {
-      className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((l, r) => z(l, r)) : /* @__PURE__ */ t.createElement("div", {
-      className: "px-3 py-4 text-center text-[var(--color-gray-500)] text-sm",
-      role: "status",
-      "aria-live": "polite"
-    }, N)));
-  }, Q = (e, l) => {
-    let r = [];
-    e ? r = [...a, l] : r = a?.filter((n) => n[c] !== l[c]), m(r);
-  }, W = () => {
-    y.current?.togglePopover(), o?.onApply?.(a);
-  }, _ = (e) => {
-    const l = a.some((r) => r[c] === e[c]);
-    return /* @__PURE__ */ t.createElement("div", {
-      key: `$drop-option-${crypto.randomUUID()}`,
-      className: "option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between"
-    }, /* @__PURE__ */ t.createElement(H, {
-      automationId: "checkbox",
-      className: "checkbox",
-      defaultChecked: l,
-      onChange: (r) => Q(r, e),
-      label: e?.label
-    }));
-  }, F = () => {
-    const e = k();
-    return /* @__PURE__ */ t.createElement("div", {
-      className: "dropdown-content dropdown-options",
-      role: "listbox",
-      "aria-label": "Multi-select dropdown options",
-      "aria-multiselectable": "true"
-    }, D && I(), /* @__PURE__ */ t.createElement("div", {
-      className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((l) => _(l)) : /* @__PURE__ */ t.createElement("div", {
-      className: "px-3 py-4 text-center text-[var(--color-gray-500)] text-sm",
-      role: "status",
-      "aria-live": "polite"
-    }, N)), /* @__PURE__ */ t.createElement("div", {
-      className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]"
-    }, /* @__PURE__ */ t.createElement(P, {
-      label: "Clear",
-      type: "link",
-      size: "sm",
-      onClick: q
-    }), /* @__PURE__ */ t.createElement(P, {
-      label: "Apply",
-      type: "primary",
-      size: "sm",
-      onClick: W
-    })));
-  }, K = () => {
-    const e = i ? "border-[var(--color-blue-500)]" : u ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", l = E ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${L ? "border-0" : `border rounded-md ${l || e}`} flex items-center ${U}`, n = a[0]?.[s] || d, b = o?.label ? `${o.label}: ${n}` : `Select option, currently selected: ${n}`;
-    return /* @__PURE__ */ t.createElement("div", {
-      className: r,
-      role: "combobox",
-      "aria-expanded": i,
-      "aria-haspopup": "listbox",
-      "aria-label": b,
-      "aria-disabled": u
-    }, /* @__PURE__ */ t.createElement("div", {
-      className: "flex-1 min-w-0",
-      "data-automation-id": o?.dropDownSelectAutomationId || "selected-dropdown-value"
-    }, $(a[0], !0)), /* @__PURE__ */ t.createElement("div", {
-      className: "flex-shrink-0 ml-2",
-      "aria-hidden": "true"
-    }, /* @__PURE__ */ t.createElement(B, {
-      name: "chevron",
-      rotation: i ? "180" : "0",
-      className: "transition-transform",
-      stroke: S
-    })));
-  };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: `se-design-dropdown-container${o?.className ? ` ${o?.className}` : ""}`,
-    style: o?.style
-  }, o?.label && /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
-  }, o?.label), /* @__PURE__ */ t.createElement("div", {
-    style: o?.style,
-    className: `${u ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, /* @__PURE__ */ t.createElement(G, {
-    ref: y,
-    renderPopoverContents: C || (v ? F : J),
-    contentWidth: "full",
-    renderPopoverSrcElement: K,
-    onPopoverToggle: (e) => M(e),
-    disabled: u,
-    automationId: o?.dropDownSrcAutomationId,
-    popoverContentAutomationId: o?.dropDownContentAutomationId
-  })), E && /* @__PURE__ */ t.createElement("div", {
-    className: "text-[var(--color-red-500)] text-sm"
-  }, j));
+  }, D = () => n ? t && c === "tick" ? "disabled-tick" : t && c === "minus-checkbox" ? "disabled-minus-checkbox" : t && !c ? "disabled-tick" : "disabled-default" : c === "minus-checkbox" && t ? "minus-checkbox" : t ? "checked" : "unchecked", O = () => n ? "checkbox-label-disabled" : "checkbox-label", p = () => n && g ? g : u, f = K(void 0, "checkbox-input"), v = u ? `${f}-label` : void 0, S = L({
+    ariaLabelledBy: q(v, C),
+    ariaLabel: y,
+    ariaDescribedBy: N
+  }), _ = () => c === "minus-checkbox" && t ? "mixed" : t ? "true" : "false";
+  return /* @__PURE__ */ s.createElement("div", {
+    className: "se-design-checkbox-ctn",
+    "aria-hidden": w ? "true" : void 0
+  }, /* @__PURE__ */ s.createElement("label", h({
+    role: "checkbox",
+    htmlFor: f,
+    className: `se-design-checkbox ${l} ${D()}`,
+    "data-automation-id": E || "checkbox-container",
+    tabIndex: k !== void 0 ? k : n ? -1 : 0,
+    "aria-checked": _(),
+    "aria-disabled": n ? "true" : "false",
+    "aria-controls": I
+  }, S, {
+    onKeyDown: $
+  }), /* @__PURE__ */ s.createElement("input", {
+    id: f,
+    type: "checkbox",
+    checked: t,
+    onChange: A,
+    disabled: n,
+    tabIndex: -1,
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ s.createElement("span", {
+    className: "checkbox-item",
+    "data-automation-id": i
+  }), p()?.length > 0 && /* @__PURE__ */ s.createElement("span", {
+    id: v,
+    className: O(),
+    "data-automation-id": i || (u ? `checkbox-label-${u}` : "checkbox-label")
+  }, p())));
 };
 export {
-  ae as Dropdown
+  Q as Checkbox
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { InputWithIcon } from '../InputWithIcon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue | DropdownValue[];\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue, srcOption: boolean) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n  customDropdownContent?: () => React.ReactNode;\n  isBorderless?: boolean;\n  dropDownSrcAutomationId?: string;\n  dropDownSelectAutomationId?: string;\n  dropDownContentAutomationId?: string;\n  shouldShowSearch?: boolean;\n  searchPlaceholder?: string;\n  searchResultEmptyMessage?: string;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = '',\n    customDropdownContent = null,\n    isBorderless = false,\n    shouldShowSearch = false,\n    searchPlaceholder = 'Search...',\n    searchResultEmptyMessage = 'No results found'\n  } = props;\n\n  useEffect(() => {\n    const newValues = props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : [];\n    setSelectedDropDownValues(newValues);\n  }, [props?.defaultSelectedValue]);\n\n  useEffect(() => {\n    if (!isDropDownOpen) {\n      setSearchQuery('');\n    }\n  }, [isDropDownOpen]);\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  const getFilteredOptions = () => {\n    if (!searchQuery.trim()) {\n      return dropDownOptions || [];\n    }\n    return (dropDownOptions || []).filter((option) => {\n      const optionValue = option?.[selectBy]?.toString().toLowerCase() || '';\n      return optionValue.includes(searchQuery.toLowerCase());\n    });\n  };\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n  };\n\n  const optionChip = (option: DropdownValue, srcOption: boolean = false) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option, srcOption);\n    }\n\n    if (isMultiSelect && selectedDropDownValues?.length > 0) {\n      const firstSelectedLabel = selectedDropDownValues[0]?.[selectBy] || '';\n      const remainingCount = selectedDropDownValues.length - 1;\n\n      // For multiple selections: text takes remaining space, count takes minimum space needed\n      return (\n        <div className={`option-chip flex items-center w-full`}>\n          <div\n            className={`${remainingCount > 0 ? 'w-full' : 'flex-1'} truncate`}\n          >{`${defaultText}: ${firstSelectedLabel}`}</div>\n          {remainingCount > 0 && <div className=\"flex-shrink-0\">+{remainingCount}</div>}\n        </div>\n      );\n    }\n\n    return <p className={`option-chip flex flex-1 items-center justify-between`}>{getSelectedDropDownValue(option)}</p>;\n  };\n\n  const renderSearchBar = () => {\n    return (\n      <div className=\" w-full relative flex items-center border-b border-[var(--color-gray-300)]\">\n        <InputWithIcon\n          leftIcon={{ name: 'search', position: 'left', style: { color: 'var(--color-gray-500)' } }}\n          value={searchQuery}\n          onChange={(value) => setSearchQuery(value)}\n          placeholder={searchPlaceholder}\n          style={{ margin: 0, gap: 0 }}\n          inputStyle={{ width: '100%', border: 'none', outline: 'none' }}\n        />\n      </div>\n    );\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue, index: number) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className={`option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${\n          isOptionSelected ? 'selected' : ''\n        }`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleDropDownOptionClick(dropDownOption);\n          }\n        }}\n        role=\"option\"\n        aria-selected={isOptionSelected}\n        tabIndex={0}\n        data-automation-id={`dropdown-option-${dropDownOption?.automationId || index}`}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected }, false)}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Dropdown options\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption, index) => dropDownOptionJsx(dropDownOption, index))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValues: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValues = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValues = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValues);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Multi-select dropdown options\" aria-multiselectable=\"true\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen\n      ? 'border-[var(--color-blue-500)]'\n      : disabled\n      ? 'border-[var(--color-gray-300)]'\n      : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${\n      isBorderless ? 'border-0' : `border rounded-md ${errorBorderColor ? errorBorderColor : borderColor}`\n    } flex items-center ${dropdownClassName}`;\n    const selectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const ariaLabel = props?.label ? `${props.label}: ${selectedValue}` : `Select option, currently selected: ${selectedValue}`;\n\n    return (\n      <div \n        className={dropDownSelectClass}\n        role=\"combobox\"\n        aria-expanded={isDropDownOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n      >\n        <div\n          className=\"flex-1 min-w-0\"\n          data-automation-id={props?.dropDownSelectAutomationId || 'selected-dropdown-value'}\n        >\n          {optionChip(selectedDropDownValues[0], true)}\n        </div>\n        <div className=\"flex-shrink-0 ml-2\" aria-hidden=\"true\">\n          <Icon\n            name={'chevron'}\n            rotation={isDropDownOpen ? '180' : '0'}\n            className={`transition-transform`}\n            stroke={iconColor}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={\n            customDropdownContent\n              ? customDropdownContent\n              : isMultiSelect\n              ? renderMultiSelectDropdownContents\n              : renderDropdownContents\n          }\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n          automationId={props?.dropDownSrcAutomationId}\n          popoverContentAutomationId={props?.dropDownContentAutomationId}\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","InputWithIcon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","searchQuery","setSearchQuery","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","customDropdownContent","isBorderless","shouldShowSearch","searchPlaceholder","searchResultEmptyMessage","newValues","isMultiSelect","type","getFilteredOptions","trim","filter","option","toString","toLowerCase","includes","handleDropDownOptionClick","dropDownOption","current","togglePopover","onOptionClick","getSelectedDropDownValue","clearSelectedDropDownValues","optionChip","srcOption","renderOptionChip","length","firstSelectedLabel","remainingCount","React","createElement","className","renderSearchBar","leftIcon","name","position","style","color","value","onChange","placeholder","margin","gap","inputStyle","width","border","outline","dropDownOptionJsx","index","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","crypto","randomUUID","onClick","onKeyDown","e","preventDefault","role","tabIndex","automationId","stroke","renderDropdownContents","filteredOptions","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValues","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","defaultChecked","label","renderMultiSelectDropdownContents","size","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","selectedValue","ariaLabel","dropDownSelectAutomationId","rotation","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","dropDownSrcAutomationId","popoverContentAutomationId","dropDownContentAutomationId"],"mappings":"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"}
+{"version":3,"file":"index23.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { mergeIds } from '../../utils/mergeIds';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  /**\n   * Controlled checked value. When provided, the checkbox is controlled by the parent\n   * and its visual state always reflects this prop. Use `onChange` to update the parent state.\n   */\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  /**\n   * Explicit accessible name for the checkbox.\n   * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this checkbox (for screen reader association).\n   * Typically used when checkbox is part of a larger labelled context.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this checkbox (provides additional context).\n   * Often used for help text or instructions.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * ID of the element controlled by this checkbox (e.g. an expandable region).\n   */\n  ariaControls?: string;\n  /**\n   * Override the default tabIndex. Pass -1 when the checkbox is used as a\n   * visual-only indicator inside a composite widget (e.g. listbox option).\n   */\n  tabIndex?: number;\n  /**\n   * When true, sets aria-hidden=\"true\" on the checkbox container so the\n   * checkbox role and state are hidden from assistive technology. Use when\n   * the checkbox is purely visual (e.g. inside a role=\"option\" that already\n   * conveys selection state via aria-selected).\n   */\n  ariaHidden?: boolean;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  checked,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ariaControls,\n  tabIndex: tabIndexProp,\n  ariaHidden = false\n}) => {\n  const isControlled = checked !== undefined;\n  const [isChecked, setIsChecked] = useState(isControlled ? checked : defaultChecked);\n\n  useEffect(() => {\n    if (isControlled) {\n      setIsChecked(checked!);\n    } else {\n      setIsChecked(defaultChecked);\n    }\n  }, [checked, defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    if (!isControlled) {\n      setIsChecked((prev) => !prev);\n    }\n    onChange?.(isControlled ? !checked : !isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = isControlled ? !checked : !isChecked;\n      if (!isControlled) {\n        setIsChecked(newChecked);\n      }\n\n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return 'minus-checkbox';\n    return isChecked ? 'checked' : 'unchecked';\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n\n  // Generate stable IDs (persists across renders)\n  const inputId = useStableId(undefined, 'checkbox-input');\n  const labelId = label ? `${inputId}-label` : undefined;\n\n  const a11yNameAttributes = getA11yNameAttributes({\n    ariaLabelledBy: mergeIds(labelId, ariaLabelledBy),\n    ariaLabel,\n    ariaDescribedBy\n  });\n\n  // Determine aria-checked value: \"mixed\" for indeterminate, \"true\" for checked, \"false\" for unchecked\n  const getAriaChecked = () => {\n    if (checkMarkType === 'minus-checkbox' && isChecked) {\n      return 'mixed'; // Indeterminate/half-checked state\n    }\n    return isChecked ? 'true' : 'false';\n  };\n\n  return (\n    <div className=\"se-design-checkbox-ctn\" aria-hidden={ariaHidden ? 'true' : undefined}>\n      <label\n        role=\"checkbox\"\n        htmlFor={inputId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={tabIndexProp !== undefined ? tabIndexProp : disabled ? -1 : 0}\n        aria-checked={getAriaChecked()}\n        aria-disabled={disabled ? 'true' : 'false'}\n        aria-controls={ariaControls}\n        {...a11yNameAttributes}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && (\n          <span\n            id={labelId}\n            className={getLabelClassName()}\n            data-automation-id={automationId || (label ? `checkbox-label-${label}` : 'checkbox-label')}\n          >\n            {getLabelText()}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","checked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaControls","tabIndex","tabIndexProp","ariaHidden","isControlled","undefined","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","labelId","a11yNameAttributes","getA11yNameAttributes","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","onKeyDown","id","type","length"],"mappings":"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"}