@bikdotai/bik-component-library 0.0.830-beta.2 → 0.0.830-beta.4

package/dist/esm/components/dropdown/ChipInput.js

@@ -1,16 +1,16 @@
-import { jsxDEV as e, Fragment as x } from "react/jsx-dev-runtime";
-import { useState as l, useEffect as y } from "react";
-import I from "../../utils/StringUtils.js";
+import { jsxDEV as e, Fragment as y } from "react/jsx-dev-runtime";
+import { useState as l, useEffect as I } from "react";
+import D from "../../utils/StringUtils.js";
 import { COLORS as a } from "../../constants/Theme.js";
-import D from "../../assets/icons/chevronDown.svg.js";
-import W from "../../assets/icons/cross.svg.js";
-import U from "../../assets/icons/errorInfo.svg.js";
-import { InputFooter as O } from "../input/Input.styled.js";
+import W from "../../assets/icons/chevronDown.svg.js";
+import U from "../../assets/icons/cross.svg.js";
+import O from "../../assets/icons/errorInfo.svg.js";
+import { InputFooter as S } from "../input/Input.styled.js";
 import { BodyCaption as d } from "../TypographyStyle.js";
-import { ChipInputWrapper as S } from "./Common.styled.js";
-import { Tag as L } from "../tag/Tag.js";
-import { Tooltip as E } from "../tooltips/Tooltip.js";
-const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
+import { ChipInputWrapper as L } from "./Common.styled.js";
+import { Tag as E } from "../tag/Tag.js";
+import { Tooltip as R } from "../tooltips/Tooltip.js";
+const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
   chips: r,
   onDeleteChip: c,
   containerStyle: h = {},
@@ -18,29 +18,30 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
   isDropdownOpened: k,
   placeholder: b = "Select..",
   errorMessage: m = "",
-  showLabelsOnMoreHover: v = !1
+  showLabelsOnMoreHover: v = !1,
+  placeholderColor: f
 }) => {
-  const [f, N] = l(), [p, w] = l(0), [u, C] = l([]);
-  return y(() => {
+  const [N, w] = l(), [p, C] = l(0), [u, g] = l([]);
+  return I(() => {
     if (!r) return;
     let n = 0;
-    const o = R(r);
+    const o = A(r);
     let t = r.filter((i) => (n += i.label.length, n <= o));
-    t.length === 0 && r.length > 0 && (t = [r[0]]), N(t);
-    const g = r.filter((i) => !t.includes(i)).map((i) => i.label);
-    C(g), w(r.length - t.length);
-  }, [r]), /* @__PURE__ */ e(x, { children: [
-    /* @__PURE__ */ e(S, { style: { ...h }, error: !!m, children: [
+    t.length === 0 && r.length > 0 && (t = [r[0]]), w(t);
+    const x = r.filter((i) => !t.includes(i)).map((i) => i.label);
+    g(x), C(r.length - t.length);
+  }, [r]), /* @__PURE__ */ e(y, { children: [
+    /* @__PURE__ */ e(L, { style: { ...h }, error: !!m, children: [
       /* @__PURE__ */ e("div", { className: "chips-container", children: [
-        f?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
-          L,
+        N?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
+          E,
           {
-            tagText: I.truncateText(
+            tagText: D.truncateText(
               n.selectedLabel || n.label,
               40
             ),
             TrailingIcon: () => /* @__PURE__ */ e(
-              W,
+              U,
               {
                 width: 12,
                 height: 12,
@@ -53,7 +54,7 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
               !1,
               {
                 fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                lineNumber: 77,
+                lineNumber: 79,
                 columnNumber: 10
               },
               void 0
@@ -64,13 +65,13 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
           !1,
           {
             fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-            lineNumber: 71,
+            lineNumber: 73,
             columnNumber: 8
           },
           void 0
         ) }, o, !1, {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-          lineNumber: 70,
+          lineNumber: 72,
           columnNumber: 7
         }, void 0)),
         !!p && /* @__PURE__ */ e(
@@ -82,7 +83,7 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
               pointerEvents: "auto"
             },
             children: /* @__PURE__ */ e(
-              E,
+              R,
               {
                 body: "",
                 placement: "bottom",
@@ -96,18 +97,18 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
                   !1,
                   {
                     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                    lineNumber: 106,
+                    lineNumber: 108,
                     columnNumber: 13
                   },
                   void 0
                 )) }, void 0, !1, {
                   fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                  lineNumber: 104,
+                  lineNumber: 106,
                   columnNumber: 11
                 }, void 0) : void 0,
                 children: /* @__PURE__ */ e(d, { color: a.content.placeholder, children: `+${p} more` }, void 0, !1, {
                   fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                  lineNumber: 117,
+                  lineNumber: 119,
                   columnNumber: 9
                 }, void 0)
               },
@@ -115,7 +116,7 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
               !1,
               {
                 fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                lineNumber: 99,
+                lineNumber: 101,
                 columnNumber: 8
               },
               void 0
@@ -125,23 +126,33 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
           !1,
           {
             fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-            lineNumber: 92,
+            lineNumber: 94,
             columnNumber: 7
           },
           void 0
         ),
-        r.length === 0 && /* @__PURE__ */ e("div", { style: { color: a.content.placeholder }, children: b }, void 0, !1, {
-          fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-          lineNumber: 125,
-          columnNumber: 7
-        }, void 0)
+        r.length === 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            style: { color: f ?? a.content.placeholder },
+            children: b
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
+            lineNumber: 127,
+            columnNumber: 7
+          },
+          void 0
+        )
       ] }, void 0, !0, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 68,
+        lineNumber: 70,
         columnNumber: 5
       }, void 0),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        D,
+        W,
         {
           style: {
             transform: k ? "rotate(180deg)" : "rotate(0deg)"
@@ -154,39 +165,39 @@ const R = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, K = ({
         !1,
         {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-          lineNumber: 132,
+          lineNumber: 136,
           columnNumber: 6
         },
         void 0
       ) }, void 0, !1, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 131,
+        lineNumber: 135,
         columnNumber: 5
       }, void 0)
     ] }, void 0, !0, {
       fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-      lineNumber: 67,
+      lineNumber: 69,
       columnNumber: 4
     }, void 0),
-    !!m && /* @__PURE__ */ e(O, { invalid: !0, children: [
-      !!m && /* @__PURE__ */ e(U, { width: 16, height: 16 }, void 0, !1, {
+    !!m && /* @__PURE__ */ e(S, { invalid: !0, children: [
+      !!m && /* @__PURE__ */ e(O, { width: 16, height: 16 }, void 0, !1, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 148,
+        lineNumber: 152,
         columnNumber: 25
       }, void 0),
       m
     ] }, void 0, !0, {
       fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-      lineNumber: 147,
+      lineNumber: 151,
       columnNumber: 5
     }, void 0)
   ] }, void 0, !0, {
     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-    lineNumber: 66,
+    lineNumber: 68,
     columnNumber: 3
   }, void 0);
 };
 export {
-  K as default
+  P as default
 };
 //# sourceMappingURL=ChipInput.js.map

package/dist/esm/components/dropdown/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' | 'small' | 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel || chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel || chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxDEV","Fragment","ChipInputWrapper","chip","index","Tag","StringUtils","CrossIcon","this","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}
+{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' | 'small' | 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n\tplaceholderColor?: string;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n\tplaceholderColor,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel || chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel || chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ color: placeholderColor ?? COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","placeholderColor","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxDEV","Fragment","ChipInputWrapper","chip","index","Tag","StringUtils","CrossIcon","this","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -4,6 +4,8 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small' | 'x-small';
     disabled?: boolean;
+    /** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. */
+    solidDisabled?: boolean;
     noErrorHint?: boolean;
     buttonWidth?: string;
     placeHolderHeight?: string;

package/dist/esm/components/dropdown/Dropdown.js

@@ -1,138 +1,140 @@
-import { jsxDEV as i, Fragment as g } from "react/jsx-dev-runtime";
-import { useState as f, useRef as _, useEffect as y } from "react";
-import { COLORS as t, BASE_COLORS as q } from "../../constants/Theme.js";
-import G from "../../assets/icons/chevronDown.svg.js";
-import { InputStyleContext as J } from "../input/context/InputStyleProvider.js";
-import K from "./ChipInput.js";
-import { DropdownPopover as Q } from "./DropdownPopover/index.js";
-import { getSelectedOptionsAsText as X } from "./OpenedDropdown/utils/iterationOnOptions.js";
-import { Input as Y } from "../input/Input.js";
-function W() {
+import { jsxDEV as t, Fragment as y } from "react/jsx-dev-runtime";
+import { useState as k, useRef as q, useEffect as W } from "react";
+import { COLORS as o, BASE_COLORS as G } from "../../constants/Theme.js";
+import J from "../../assets/icons/chevronDown.svg.js";
+import { InputStyleContext as K } from "../input/context/InputStyleProvider.js";
+import Q from "./ChipInput.js";
+import { DropdownPopover as X } from "./DropdownPopover/index.js";
+import { getSelectedOptionsAsText as Y } from "./OpenedDropdown/utils/iterationOnOptions.js";
+import { Input as Z } from "../input/Input.js";
+function S() {
 }
-const Z = ({
-  placeHolder: s,
-  size: D,
-  onSelect: S,
-  defaultOptions: a,
-  disabled: v,
-  noErrorHint: I,
-  placeHolderHeight: k,
-  showPlaceholderWhenSelected: C = !1,
-  inputStyle: U = {},
-  inputType: b = "default",
-  onDeleteChip: E,
-  truncatedText: O,
-  showLeadingIconInPlaceholder: M = !1,
-  showTrailingIconPlaceholder: A = !1,
-  showLabelsOnMoreHover: R = !1,
-  value: d,
-  showSelected: c = !1,
-  onDropdownVisbilityChange: T,
+const $ = ({
+  placeHolder: d,
+  size: C,
+  onSelect: I,
+  defaultOptions: l,
+  disabled: i,
+  solidDisabled: s,
+  noErrorHint: D,
+  placeHolderHeight: b,
+  showPlaceholderWhenSelected: U = !1,
+  inputStyle: E = {},
+  inputType: w = "default",
+  onDeleteChip: O,
+  truncatedText: M,
+  showLeadingIconInPlaceholder: A = !1,
+  showTrailingIconPlaceholder: R = !1,
+  showLabelsOnMoreHover: T = !1,
+  value: m,
+  showSelected: p = !1,
+  onDropdownVisbilityChange: V,
   ...e
 }) => {
-  const [u, V] = f(!1), [w, x] = f(!1), o = D ?? "default", L = _(), [n, l] = f(
-    a ?? []
+  const [h, L] = k(!1), [x, N] = k(!1), n = C ?? "default", z = q(), [a, c] = k(
+    l ?? []
   );
-  function z(r) {
-    Array.isArray(r) ? l([...r]) : l([r]), S?.(r);
+  function F(r) {
+    Array.isArray(r) ? c([...r]) : c([r]), I?.(r);
   }
-  y(() => {
+  W(() => {
     const r = [];
-    e?.options?.forEach((m) => {
-      m.options ? m.options.forEach((h) => {
-        h.selected && r.push({
-          ...h,
-          label: h.label
+    e?.options?.forEach((u) => {
+      u.options ? u.options.forEach((v) => {
+        v.selected && r.push({
+          ...v,
+          label: v.label
         });
-      }) : m.selected && r.push(m);
-    }), l([...r]);
-  }, [e.options]), y(() => {
-    a && l([...a]);
-  }, [a]);
-  const F = X(n), j = C ? s : F ?? s ?? "Select an option", p = e.buttonWidth, N = p ?? e.width ?? "100%", B = e.dropdownWidth ?? N;
-  return /* @__PURE__ */ i(g, { children: /* @__PURE__ */ i(
-    J.Provider,
+      }) : u.selected && r.push(u);
+    }), c([...r]);
+  }, [e.options]), W(() => {
+    l && c([...l]);
+  }, [l]);
+  const j = Y(a), B = U ? d : j ?? d ?? "Select an option", f = e.buttonWidth, g = f ?? e.width ?? "100%", _ = e.dropdownWidth ?? g;
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(
+    K.Provider,
     {
       value: {
         InputWrapper: {
-          height: k || (o === "x-small" ? 24 : o === "small" ? 32 : 48),
-          width: N,
-          ...p ? { maxWidth: p } : {},
+          height: b || (n === "x-small" ? 24 : n === "small" ? 32 : 48),
+          width: g,
+          ...f ? { maxWidth: f } : {},
           zIndex: 1,
           cursor: "pointer",
-          padding: o === "x-small" ? "4px 8px" : "6px 8px",
-          backgroundColor: e.version === "3.0" ? u || w ? t.surface.hovered : t.surface.standard : c && d !== void 0 ? q.positive[100] : w ? t.background.inactive : t.surface.standard,
+          padding: n === "x-small" ? "4px 8px" : "6px 8px",
+          backgroundColor: i && s ? o.background.base : e.version === "3.0" ? h || x ? o.surface.hovered : o.surface.standard : p && m !== void 0 ? G.positive[100] : x ? o.background.inactive : o.surface.standard,
           transition: "background-color 0.3s ease",
-          ...U
+          ...E
         },
         input: {
           minHeight: "100%",
           maxWidth: "100%",
-          color: c && d !== void 0 ? t.content.positive : "inherit"
+          color: i && s ? o.content.secondary : p && m !== void 0 ? o.content.positive : "inherit"
         }
       },
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ t(
         "div",
         {
-          onMouseEnter: () => x(!0),
-          onMouseLeave: () => x(!1),
+          onMouseEnter: () => N(!0),
+          onMouseLeave: () => N(!1),
           style: e.width ? { width: e.width } : void 0,
-          children: /* @__PURE__ */ i(
-            Q,
+          children: /* @__PURE__ */ t(
+            X,
             {
               "data-test": e["data-test"],
-              ref: L,
-              onSelect: z,
-              disabled: v,
+              ref: z,
+              onSelect: F,
+              disabled: i,
               ...e,
               onDropdownVisbilityChange: (r) => {
-                V(r), T?.(r);
+                L(r), V?.(r);
               },
-              width: B,
+              width: _,
               children: [
-                b == "default" && /* @__PURE__ */ i(
-                  Y,
+                w == "default" && /* @__PURE__ */ t(
+                  Z,
                   {
                     version: e.version,
-                    noErrorHint: I,
-                    state: v ? "disabled" : "none",
-                    value: d === void 0 ? j : d,
+                    noErrorHint: D,
+                    state: i ? "disabled" : "none",
+                    solidDisabled: s,
+                    value: m === void 0 ? B : m,
                     errorMessage: e.error,
-                    variant: o,
-                    placeholder: s ?? "Select an option",
-                    onChangeText: W,
-                    leftIcon: M && n[0]?.leadingIcon ? {
-                      icon: () => /* @__PURE__ */ i(g, { children: n[0]?.leadingIcon }, void 0, !1, {
+                    variant: n,
+                    placeholder: d ?? "Select an option",
+                    onChangeText: S,
+                    leftIcon: A && a[0]?.leadingIcon ? {
+                      icon: () => /* @__PURE__ */ t(y, { children: a[0]?.leadingIcon }, void 0, !1, {
                         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-                        lineNumber: 203,
+                        lineNumber: 211,
                         columnNumber: 25
                       }, void 0)
                     } : void 0,
                     rightIcon: {
-                      icon: () => /* @__PURE__ */ i(
+                      icon: () => /* @__PURE__ */ t(
                         "div",
                         {
                           style: {
                             display: "flex"
                           },
                           children: [
-                            A && n[0]?.trailingIcon,
-                            /* @__PURE__ */ i(
-                              G,
+                            R && a[0]?.trailingIcon,
+                            /* @__PURE__ */ t(
+                              J,
                               {
                                 style: {
-                                  transform: u ? "rotate(180deg)" : "rotate(0deg)"
+                                  transform: h ? "rotate(180deg)" : "rotate(0deg)"
                                 },
-                                onClick: W,
-                                width: o === "x-small" ? 16 : o === "small" ? 20 : 24,
-                                height: o === "x-small" ? 16 : o === "small" ? 20 : 24,
-                                color: c ? t.content.positive : t.content.primary
+                                onClick: S,
+                                width: n === "x-small" ? 16 : n === "small" ? 20 : 24,
+                                height: n === "x-small" ? 16 : n === "small" ? 20 : 24,
+                                color: p ? o.content.positive : o.content.primary
                               },
                               void 0,
                               !1,
                               {
                                 fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-                                lineNumber: 216,
+                                lineNumber: 224,
                                 columnNumber: 12
                               },
                               void 0
@@ -143,45 +145,50 @@ const Z = ({
                         !0,
                         {
                           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-                          lineNumber: 209,
+                          lineNumber: 217,
                           columnNumber: 11
                         },
                         void 0
                       )
                     },
-                    truncateText: O ?? !0
+                    truncateText: M ?? !0
                   },
                   void 0,
                   !1,
                   {
                     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-                    lineNumber: 191,
+                    lineNumber: 198,
                     columnNumber: 8
                   },
                   void 0
                 ),
-                b == "chip" && /* @__PURE__ */ i(
-                  K,
+                w == "chip" && /* @__PURE__ */ t(
+                  Q,
                   {
-                    placeholder: s ?? "Select options",
-                    chips: n,
+                    placeholder: d ?? "Select options",
+                    placeholderColor: i && s ? o.content.secondary : void 0,
+                    chips: a,
                     onDeleteChip: (r) => {
-                      E?.(r);
+                      O?.(r);
                     },
                     errorMessage: e.error,
-                    isDropdownOpened: u,
-                    sizeToUse: o,
+                    isDropdownOpened: h,
+                    sizeToUse: n,
                     containerStyle: {
                       width: e.width ?? "100%",
-                      cursor: "pointer"
+                      cursor: "pointer",
+                      ...i && s ? {
+                        backgroundColor: o.background.base,
+                        pointerEvents: "none"
+                      } : {}
                     },
-                    showLabelsOnMoreHover: R
+                    showLabelsOnMoreHover: T
                   },
                   void 0,
                   !1,
                   {
                     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-                    lineNumber: 250,
+                    lineNumber: 258,
                     columnNumber: 8
                   },
                   void 0
@@ -192,7 +199,7 @@ const Z = ({
             !0,
             {
               fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-              lineNumber: 172,
+              lineNumber: 179,
               columnNumber: 6
             },
             void 0
@@ -202,7 +209,7 @@ const Z = ({
         !1,
         {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-          lineNumber: 163,
+          lineNumber: 170,
           columnNumber: 5
         },
         void 0
@@ -212,18 +219,18 @@ const Z = ({
     !1,
     {
       fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-      lineNumber: 125,
+      lineNumber: 128,
       columnNumber: 4
     },
     void 0
   ) }, void 0, !1, {
     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/Dropdown.tsx",
-    lineNumber: 124,
+    lineNumber: 127,
     columnNumber: 3
   }, void 0);
 };
-Z.displayName = "Dropdown";
+$.displayName = "Dropdown";
 export {
-  Z as Dropdown
+  $ as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map