se-design 0.0.123 → 0.0.125
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/style.css +1 -1
- package/dist/components/AutoCompleteInput/index.d.ts +4 -1
- package/dist/components/Dropdown/index.d.ts +1 -1
- package/dist/components/DropdownWithInputTags/index.d.ts +1 -0
- package/dist/components/Icon/index.d.ts +1 -0
- package/dist/components/SearchBox/index.d.ts +7 -2
- package/dist/index12.js +1 -1
- package/dist/index12.js.map +1 -1
- package/dist/index17.js +19 -17
- package/dist/index17.js.map +1 -1
- package/dist/index23.js +53 -53
- package/dist/index23.js.map +1 -1
- package/dist/index36.js +113 -101
- package/dist/index36.js.map +1 -1
- package/dist/index37.js +7 -7
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +53 -53
- package/dist/index38.js.map +1 -1
- package/dist/index43.js +59 -56
- package/dist/index43.js.map +1 -1
- package/dist/index48.js +5 -5
- package/dist/index48.js.map +1 -1
- package/dist/index5.js +155 -152
- package/dist/index5.js.map +1 -1
- package/dist/index9.js +11 -10
- package/dist/index9.js.map +1 -1
- package/package.json +1 -1
package/dist/index23.js
CHANGED
@@ -1,99 +1,99 @@
|
|
1
1
|
var F = Object.defineProperty, G = Object.defineProperties;
|
2
2
|
var H = Object.getOwnPropertyDescriptors;
|
3
|
-
var
|
3
|
+
var N = Object.getOwnPropertySymbols;
|
4
4
|
var K = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
|
5
|
-
var
|
5
|
+
var s = (e, c, d) => c in e ? F(e, c, { enumerable: !0, configurable: !0, writable: !0, value: d }) : e[c] = d, w = (e, c) => {
|
6
6
|
for (var d in c || (c = {}))
|
7
|
-
K.call(c, d) &&
|
8
|
-
if (
|
9
|
-
for (var d of
|
10
|
-
L.call(c, d) &&
|
7
|
+
K.call(c, d) && s(e, d, c[d]);
|
8
|
+
if (N)
|
9
|
+
for (var d of N(c))
|
10
|
+
L.call(c, d) && s(e, d, c[d]);
|
11
11
|
return e;
|
12
|
-
},
|
13
|
-
import l, { useState as
|
12
|
+
}, V = (e, c) => G(e, H(c));
|
13
|
+
import l, { useState as $, useRef as Q, useEffect as U } from "react";
|
14
14
|
import { Popover as Y } from "./index17.js";
|
15
|
-
import { Icon as
|
15
|
+
import { Icon as A } from "./index5.js";
|
16
16
|
import { Checkbox as Z } from "./index21.js";
|
17
|
-
import { Button as
|
17
|
+
import { Button as P } from "./index3.js";
|
18
18
|
const ce = (e) => {
|
19
|
-
const [c, d] =
|
20
|
-
selectBy:
|
19
|
+
const [c, d] = $(!1), [n, u] = $(() => e != null && e.defaultSelectedValue ? Array.isArray(e == null ? void 0 : e.defaultSelectedValue) ? e == null ? void 0 : e.defaultSelectedValue : [e.defaultSelectedValue] : []), f = Q(null), {
|
20
|
+
selectBy: o = "",
|
21
21
|
optionsUniqueBy: m = "",
|
22
|
-
displaySelected:
|
23
|
-
dropDownOptions:
|
24
|
-
defaultText:
|
25
|
-
iconColor:
|
26
|
-
disabled:
|
27
|
-
dropdownClassName:
|
22
|
+
displaySelected: j = !1,
|
23
|
+
dropDownOptions: i,
|
24
|
+
defaultText: y = "Select",
|
25
|
+
iconColor: x = "var(--color-gray-700)",
|
26
|
+
disabled: v = !1,
|
27
|
+
dropdownClassName: I = "",
|
28
28
|
hasError: h = !1,
|
29
|
-
errorMessage:
|
29
|
+
errorMessage: M = ""
|
30
30
|
} = e;
|
31
31
|
U(() => {
|
32
|
-
|
32
|
+
u(e != null && e.defaultSelectedValue ? Array.isArray(e == null ? void 0 : e.defaultSelectedValue) ? e == null ? void 0 : e.defaultSelectedValue : [e.defaultSelectedValue] : []);
|
33
33
|
}, [e == null ? void 0 : e.defaultSelectedValue]);
|
34
|
-
const
|
35
|
-
var
|
36
|
-
|
37
|
-
}, R = (t) =>
|
38
|
-
|
39
|
-
},
|
34
|
+
const b = (e == null ? void 0 : e.type) === "multi-select", B = (t) => {
|
35
|
+
var a, r;
|
36
|
+
u([t]), (a = f.current) == null || a.togglePopover(), (r = e == null ? void 0 : e.onOptionClick) == null || r.call(e, t);
|
37
|
+
}, R = (t) => b ? y : (t == null ? void 0 : t[o]) || y, T = () => {
|
38
|
+
u([]);
|
39
|
+
}, C = (t) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(t) : /* @__PURE__ */ l.createElement("p", {
|
40
40
|
className: "option-chip flex flex-1 items-center justify-between"
|
41
|
-
}, R(t), " ",
|
41
|
+
}, R(t), " ", b && (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ l.createElement("span", {
|
42
42
|
className: "w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center"
|
43
|
-
},
|
44
|
-
var
|
45
|
-
const
|
43
|
+
}, n == null ? void 0 : n.length)), J = (t) => {
|
44
|
+
var E, k;
|
45
|
+
const a = t[o], r = ((E = n[0]) == null ? void 0 : E[o]) || y, g = m != null && m.length ? t[m] == ((k = n[0]) == null ? void 0 : k[m]) : !0, S = j && a === r && g;
|
46
46
|
return /* @__PURE__ */ l.createElement("div", {
|
47
|
-
key: `$drop-option-${
|
48
|
-
className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${
|
47
|
+
key: `$drop-option-${a}`,
|
48
|
+
className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${S ? "selected" : ""}`,
|
49
49
|
onClick: () => B(t)
|
50
|
-
},
|
51
|
-
isOptionSelected:
|
52
|
-
})),
|
50
|
+
}, C(V(w({}, t), {
|
51
|
+
isOptionSelected: S
|
52
|
+
})), S && /* @__PURE__ */ l.createElement(A, {
|
53
53
|
name: "checkmark",
|
54
|
-
stroke:
|
54
|
+
stroke: x
|
55
55
|
}));
|
56
56
|
}, _ = () => /* @__PURE__ */ l.createElement("div", {
|
57
57
|
className: "dropdown-content dropdown-options"
|
58
|
-
},
|
58
|
+
}, i == null ? void 0 : i.map((t) => J(t))), W = (t, a) => {
|
59
59
|
let r = [];
|
60
|
-
t ? r = [...
|
60
|
+
t ? r = [...n, a] : r = n == null ? void 0 : n.filter((g) => g[m] !== a[m]), u(r);
|
61
61
|
}, X = () => {
|
62
|
-
var t,
|
63
|
-
(t = f.current) == null || t.togglePopover(), (
|
62
|
+
var t, a;
|
63
|
+
(t = f.current) == null || t.togglePopover(), (a = e == null ? void 0 : e.onApply) == null || a.call(e, n);
|
64
64
|
}, q = (t) => {
|
65
|
-
const
|
65
|
+
const a = n.some((r) => r[m] === t[m]);
|
66
66
|
return /* @__PURE__ */ l.createElement("div", {
|
67
|
-
key: `$drop-option-${t[
|
67
|
+
key: `$drop-option-${t[o]}`,
|
68
68
|
className: "option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between"
|
69
69
|
}, /* @__PURE__ */ l.createElement(Z, {
|
70
70
|
automationId: "checkbox",
|
71
71
|
className: "checkbox",
|
72
|
-
defaultChecked:
|
72
|
+
defaultChecked: a,
|
73
73
|
onChange: (r) => W(r, t),
|
74
74
|
label: t == null ? void 0 : t.label
|
75
75
|
}));
|
76
76
|
}, z = () => /* @__PURE__ */ l.createElement("div", {
|
77
77
|
className: "dropdown-content dropdown-options"
|
78
|
-
},
|
78
|
+
}, i == null ? void 0 : i.map((t) => q(t)), /* @__PURE__ */ l.createElement("div", {
|
79
79
|
className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]"
|
80
|
-
}, /* @__PURE__ */ l.createElement(
|
80
|
+
}, /* @__PURE__ */ l.createElement(P, {
|
81
81
|
label: "Clear",
|
82
82
|
type: "link",
|
83
83
|
onClick: T
|
84
|
-
}), /* @__PURE__ */ l.createElement(
|
84
|
+
}), /* @__PURE__ */ l.createElement(P, {
|
85
85
|
label: "Apply",
|
86
86
|
type: "primary",
|
87
87
|
onClick: X
|
88
88
|
}))), D = () => {
|
89
|
-
const t = c ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-600)]",
|
89
|
+
const t = c ? "border-[var(--color-blue-500)]" : v ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", a = h ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${a || t} flex items-center ${I}`;
|
90
90
|
return /* @__PURE__ */ l.createElement("div", {
|
91
91
|
className: r
|
92
|
-
},
|
92
|
+
}, C(n[0]), /* @__PURE__ */ l.createElement(A, {
|
93
93
|
name: "chevron",
|
94
94
|
rotation: c ? "180" : "0",
|
95
95
|
className: "ml-auto transition-transform",
|
96
|
-
stroke:
|
96
|
+
stroke: x
|
97
97
|
}));
|
98
98
|
};
|
99
99
|
return /* @__PURE__ */ l.createElement("div", {
|
@@ -103,17 +103,17 @@ const ce = (e) => {
|
|
103
103
|
className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
|
104
104
|
}, e == null ? void 0 : e.label), /* @__PURE__ */ l.createElement("div", {
|
105
105
|
style: e == null ? void 0 : e.style,
|
106
|
-
className: `${
|
106
|
+
className: `${v ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
|
107
107
|
}, /* @__PURE__ */ l.createElement(Y, {
|
108
108
|
ref: f,
|
109
|
-
renderPopoverContents:
|
109
|
+
renderPopoverContents: b ? z : _,
|
110
110
|
contentWidth: "full",
|
111
111
|
renderPopoverSrcElement: D,
|
112
112
|
onPopoverToggle: (t) => d(t),
|
113
|
-
disabled:
|
113
|
+
disabled: v
|
114
114
|
})), h && /* @__PURE__ */ l.createElement("div", {
|
115
115
|
className: "text-[var(--color-red-500)] text-sm"
|
116
|
-
},
|
116
|
+
}, M));
|
117
117
|
};
|
118
118
|
export {
|
119
119
|
ce as Dropdown
|
package/dist/index23.js.map
CHANGED
@@ -1 +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';\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;\n onOptionClick?: (selectedValue: DropdownValue) => void;\n style?: React.CSSProperties;\n renderOptionChip?: (option: DropdownValue) => 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};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n props?.defaultSelectedValue ? [props.defaultSelectedValue] : []\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 } = props;\n\n useEffect(() => {\n setSelectedDropDownValues(props?.defaultSelectedValue ? [props.defaultSelectedValue] : []);\n }, [props?.defaultSelectedValue]);\n\n const isMultiSelect = props?.type === 'multi-select';\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) => {\n if (props?.renderOptionChip) {\n return props?.renderOptionChip(option);\n }\n return (\n <p className={`option-chip flex flex-1 items-center justify-between`}>\n {getSelectedDropDownValue(option)}{' '}\n {isMultiSelect && selectedDropDownValues?.length > 0 && (\n <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n {selectedDropDownValues?.length}\n </span>\n )}\n </p>\n );\n };\n\n const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\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-${optionTxt}`}\n className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n onClick={() => handleDropDownOptionClick(dropDownOption)}\n >\n {optionChip({ ...dropDownOption, isOptionSelected })}\n {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n </div>\n );\n };\n\n const renderDropdownContents = () => {\n return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n </div>\n );\n };\n\n const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n let newSelectedDropDownValue: DropdownValue[] = [];\n if (isSelected) {\n newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n } else {\n newSelectedDropDownValue = selectedDropDownValues?.filter(\n (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n );\n }\n setSelectedDropDownValues(newSelectedDropDownValue);\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-${dropDownOption[selectBy]}`}\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 return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\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\" onClick={clearSelectedDropDownValues} />\n <Button label=\"Apply\" type=\"primary\" onClick={handleApplySelectedDropDownValues} />\n </div>\n </div>\n );\n };\n\n const renderDropdownSelect = () => {\n const borderColor = isDropDownOpen ? 'border-[var(--color-blue-500)]' : '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 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n return (\n <div className={dropDownSelectClass}>\n {optionChip(selectedDropDownValues[0])}\n <Icon\n name={'chevron'}\n rotation={isDropDownOpen ? '180' : '0'}\n className={`ml-auto transition-transform`}\n stroke={iconColor}\n />\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-200)] rounded-md cursor-not-allowed' : ''}`}\n >\n <Popover\n ref={popoverRef}\n renderPopoverContents={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n contentWidth={'full'}\n renderPopoverSrcElement={renderDropdownSelect}\n onPopoverToggle={(value) => setIsDropDownOpen(value)}\n disabled={disabled}\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","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":"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"}
|
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';\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) => 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};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n const [isDropDownOpen, setIsDropDownOpen] = useState(false);\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 } = props;\n\n useEffect(() => {\n setSelectedDropDownValues(\n props?.defaultSelectedValue\n ? Array.isArray(props?.defaultSelectedValue)\n ? props?.defaultSelectedValue\n : [props.defaultSelectedValue]\n : []\n );\n }, [props?.defaultSelectedValue]);\n\n const isMultiSelect = props?.type === 'multi-select';\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) => {\n if (props?.renderOptionChip) {\n return props?.renderOptionChip(option);\n }\n return (\n <p className={`option-chip flex flex-1 items-center justify-between`}>\n {getSelectedDropDownValue(option)}{' '}\n {isMultiSelect && selectedDropDownValues?.length > 0 && (\n <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n {selectedDropDownValues?.length}\n </span>\n )}\n </p>\n );\n };\n\n const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\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-${optionTxt}`}\n className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n onClick={() => handleDropDownOptionClick(dropDownOption)}\n >\n {optionChip({ ...dropDownOption, isOptionSelected })}\n {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n </div>\n );\n };\n\n const renderDropdownContents = () => {\n return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n </div>\n );\n };\n\n const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n let newSelectedDropDownValue: DropdownValue[] = [];\n if (isSelected) {\n newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n } else {\n newSelectedDropDownValue = selectedDropDownValues?.filter(\n (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n );\n }\n setSelectedDropDownValues(newSelectedDropDownValue);\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-${dropDownOption[selectBy]}`}\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 return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\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\" onClick={clearSelectedDropDownValues} />\n <Button label=\"Apply\" type=\"primary\" 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 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n return (\n <div className={dropDownSelectClass}>\n {optionChip(selectedDropDownValues[0])}\n <Icon\n name={'chevron'}\n rotation={isDropDownOpen ? '180' : '0'}\n className={`ml-auto transition-transform`}\n stroke={iconColor}\n />\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={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n contentWidth={'full'}\n renderPopoverSrcElement={renderDropdownSelect}\n onPopoverToggle={(value) => setIsDropDownOpen(value)}\n disabled={disabled}\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","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":"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"}
|
package/dist/index36.js
CHANGED
@@ -1,22 +1,23 @@
|
|
1
|
-
import
|
2
|
-
import { Popover as
|
3
|
-
import { Icon as
|
1
|
+
import l, { forwardRef as H, useState as w, useRef as I, useEffect as P, useImperativeHandle as S } from "react";
|
2
|
+
import { Popover as j } from "./index17.js";
|
3
|
+
import { Icon as q } from "./index5.js";
|
4
4
|
/* empty css */
|
5
|
-
const
|
6
|
-
value:
|
7
|
-
onChange:
|
8
|
-
placeholder:
|
9
|
-
className:
|
10
|
-
options:
|
5
|
+
const U = /* @__PURE__ */ H(({
|
6
|
+
value: v = [],
|
7
|
+
onChange: s,
|
8
|
+
placeholder: T = "Type to search or add custom tags...",
|
9
|
+
className: R = "",
|
10
|
+
options: i = [],
|
11
11
|
renderOption: E,
|
12
|
-
onSearch:
|
13
|
-
label:
|
14
|
-
automationId:
|
15
|
-
noOptionsMessage:
|
16
|
-
allowCustomTags:
|
17
|
-
|
18
|
-
|
19
|
-
|
12
|
+
onSearch: d,
|
13
|
+
label: N,
|
14
|
+
automationId: O = "",
|
15
|
+
noOptionsMessage: k = "No options found",
|
16
|
+
allowCustomTags: h = !0,
|
17
|
+
disabled: n = !1
|
18
|
+
}, b) => {
|
19
|
+
const [u, p] = w(() => v.map((t) => {
|
20
|
+
const e = i.find((a) => a.value === t);
|
20
21
|
return e ? {
|
21
22
|
label: e.label,
|
22
23
|
value: e.value
|
@@ -24,10 +25,10 @@ const Q = /* @__PURE__ */ H(({
|
|
24
25
|
label: t,
|
25
26
|
value: t
|
26
27
|
};
|
27
|
-
})), [
|
28
|
-
|
29
|
-
|
30
|
-
const e =
|
28
|
+
})), [r, c] = w(""), [f, y] = w(i), [m, o] = w(!1), A = I(null), D = I(null);
|
29
|
+
P(() => {
|
30
|
+
p(v.map((t) => {
|
31
|
+
const e = i.find((a) => a.value === t);
|
31
32
|
return e ? {
|
32
33
|
label: e.label,
|
33
34
|
value: e.value
|
@@ -36,127 +37,138 @@ const Q = /* @__PURE__ */ H(({
|
|
36
37
|
value: t
|
37
38
|
};
|
38
39
|
}));
|
39
|
-
}, [
|
40
|
-
if (!
|
41
|
-
|
40
|
+
}, [v, i]), P(() => {
|
41
|
+
if (!r.trim())
|
42
|
+
y(i);
|
42
43
|
else {
|
43
|
-
const t =
|
44
|
-
|
44
|
+
const t = i.filter((e) => e.label.toLowerCase().includes(r.toLowerCase()) || e.value.toLowerCase().includes(r.toLowerCase()));
|
45
|
+
y(t);
|
45
46
|
}
|
46
|
-
|
47
|
-
}, [
|
48
|
-
const
|
49
|
-
|
47
|
+
d && d(r);
|
48
|
+
}, [r, i, d]);
|
49
|
+
const g = (t) => {
|
50
|
+
if (n) return;
|
51
|
+
const e = [...u];
|
50
52
|
e.some((a) => a.value === t.value) || (e.push({
|
51
53
|
label: t.label,
|
52
54
|
value: t.value
|
53
|
-
}),
|
54
|
-
}, A = (t) => {
|
55
|
-
const e = o.filter((a, B) => B !== t);
|
56
|
-
c(e), n == null || n(e.map((a) => a.value));
|
55
|
+
}), p(e), s == null || s(e.map((a) => a.value))), c(""), o(!1);
|
57
56
|
}, L = (t) => {
|
58
|
-
if (
|
59
|
-
|
60
|
-
|
61
|
-
else if (N) {
|
62
|
-
const e = [...o];
|
63
|
-
e.some((a) => a.value === l.trim()) || (e.push({
|
64
|
-
label: l.trim(),
|
65
|
-
value: l.trim()
|
66
|
-
}), c(e), n == null || n(e.map((a) => a.value))), p("");
|
67
|
-
}
|
68
|
-
i(!1);
|
69
|
-
} else if (t.key === "Backspace" && l === "" && o.length > 0) {
|
70
|
-
const e = o.slice(0, -1);
|
71
|
-
c(e), n == null || n(e.map((a) => a.value));
|
72
|
-
} else t.key === "ArrowDown" ? (t.preventDefault(), u || i(!0)) : t.key === "Escape" && (i(!1), p(""));
|
57
|
+
if (n) return;
|
58
|
+
const e = u.filter((a, B) => B !== t);
|
59
|
+
p(e), s == null || s(e.map((a) => a.value));
|
73
60
|
}, x = (t) => {
|
61
|
+
if (!n)
|
62
|
+
if (t.key === "Enter" && r.trim()) {
|
63
|
+
if (t.preventDefault(), f.length > 0)
|
64
|
+
g(f[0]);
|
65
|
+
else if (h) {
|
66
|
+
const e = [...u];
|
67
|
+
e.some((a) => a.value === r.trim()) || (e.push({
|
68
|
+
label: r.trim(),
|
69
|
+
value: r.trim()
|
70
|
+
}), p(e), s == null || s(e.map((a) => a.value))), c("");
|
71
|
+
}
|
72
|
+
o(!1);
|
73
|
+
} else if (t.key === "Backspace" && r === "" && u.length > 0) {
|
74
|
+
const e = u.slice(0, -1);
|
75
|
+
p(e), s == null || s(e.map((a) => a.value));
|
76
|
+
} else t.key === "ArrowDown" ? (t.preventDefault(), m || o(!0)) : t.key === "Escape" && (o(!1), c(""));
|
77
|
+
}, F = (t) => {
|
78
|
+
if (n) return;
|
74
79
|
const e = t.target.value;
|
75
|
-
|
76
|
-
},
|
77
|
-
(
|
78
|
-
}, V = (t) => {
|
79
|
-
var e;
|
80
|
-
t.stopPropagation(), (e = h.current) == null || e.focus(), !u && (l.trim() || r.length > 0) && i(!0);
|
80
|
+
c(e), e.trim() && !m && o(!0);
|
81
|
+
}, V = () => {
|
82
|
+
n || (r.trim() || i.length > 0) && o(!0);
|
81
83
|
}, W = (t) => {
|
84
|
+
var e;
|
85
|
+
n || (t.stopPropagation(), (e = D.current) == null || e.focus(), !m && (r.trim() || i.length > 0) && o(!0));
|
86
|
+
}, _ = (t) => {
|
87
|
+
if (n) {
|
88
|
+
t.preventDefault(), t.stopPropagation();
|
89
|
+
return;
|
90
|
+
}
|
82
91
|
t.target.closest(".input-with-tags-container") && t.stopPropagation();
|
83
|
-
},
|
84
|
-
|
92
|
+
}, $ = () => {
|
93
|
+
n || o(!m);
|
85
94
|
};
|
86
|
-
S(
|
87
|
-
toggleDropdown:
|
95
|
+
S(b, () => ({
|
96
|
+
toggleDropdown: $
|
88
97
|
}), []);
|
89
|
-
const K = (t, e) => /* @__PURE__ */
|
98
|
+
const K = (t, e, a) => /* @__PURE__ */ l.createElement("div", {
|
90
99
|
key: t.id,
|
91
100
|
className: "dropdown-with-input-tags-option",
|
92
|
-
onClick: () => e(t)
|
93
|
-
}, /* @__PURE__ */
|
101
|
+
onClick: () => !a && e(t)
|
102
|
+
}, /* @__PURE__ */ l.createElement("span", {
|
94
103
|
className: "option-label"
|
95
|
-
}, t.label), t.value !== t.label && /* @__PURE__ */
|
104
|
+
}, t.label), t.value !== t.label && /* @__PURE__ */ l.createElement("span", {
|
96
105
|
className: "option-value"
|
97
106
|
}, t.value));
|
98
|
-
return /* @__PURE__ */
|
99
|
-
className: `dropdown-with-input-tags-wrapper ${
|
100
|
-
"data-automation-id":
|
101
|
-
},
|
107
|
+
return /* @__PURE__ */ l.createElement("div", {
|
108
|
+
className: `dropdown-with-input-tags-wrapper ${R} ${n ? "disabled-wrapper" : ""}`,
|
109
|
+
"data-automation-id": O
|
110
|
+
}, N && /* @__PURE__ */ l.createElement("label", {
|
102
111
|
className: "dropdown-with-input-tags-label"
|
103
|
-
},
|
104
|
-
onClick:
|
105
|
-
}, /* @__PURE__ */
|
106
|
-
ref:
|
112
|
+
}, N), /* @__PURE__ */ l.createElement("div", {
|
113
|
+
onClick: _
|
114
|
+
}, /* @__PURE__ */ l.createElement(j, {
|
115
|
+
ref: A,
|
107
116
|
className: "dropdown-with-input-tags-popover",
|
108
117
|
contentWidth: "full",
|
109
118
|
position: "bottom-left",
|
110
|
-
isPopoverOpen:
|
111
|
-
onPopoverToggle:
|
119
|
+
isPopoverOpen: !n && m,
|
120
|
+
onPopoverToggle: n ? () => {
|
121
|
+
} : o,
|
112
122
|
renderPopoverContents: ({
|
113
123
|
closePopoverCb: t
|
114
|
-
}) => /* @__PURE__ */
|
124
|
+
}) => /* @__PURE__ */ l.createElement("div", {
|
115
125
|
className: "dropdown-with-input-tags-content"
|
116
|
-
},
|
126
|
+
}, f.length > 0 ? f.map((e) => E ? E(e, g) : K(e, g, n)) : /* @__PURE__ */ l.createElement("div", {
|
117
127
|
className: "dropdown-with-input-tags-no-options"
|
118
|
-
},
|
128
|
+
}, r.trim() ? h ? /* @__PURE__ */ l.createElement("div", {
|
119
129
|
className: "dropdown-with-input-tags-option dropdown-with-input-tags-custom-option",
|
120
130
|
onClick: () => {
|
121
|
-
|
122
|
-
e
|
123
|
-
|
124
|
-
|
125
|
-
|
131
|
+
if (n) return;
|
132
|
+
const e = [...u];
|
133
|
+
e.some((a) => a.value === r.trim()) || (e.push({
|
134
|
+
label: r.trim(),
|
135
|
+
value: r.trim()
|
136
|
+
}), p(e), s == null || s(e.map((a) => a.value))), c(""), t();
|
126
137
|
}
|
127
|
-
}, 'Add "',
|
138
|
+
}, 'Add "', r.trim(), '"') : /* @__PURE__ */ l.createElement("div", {
|
128
139
|
className: "dropdown-with-input-tags-no-options-text"
|
129
|
-
},
|
140
|
+
}, k) : /* @__PURE__ */ l.createElement("div", {
|
130
141
|
className: "dropdown-with-input-tags-no-options-text"
|
131
|
-
},
|
132
|
-
renderPopoverSrcElement: () => /* @__PURE__ */
|
142
|
+
}, k))),
|
143
|
+
renderPopoverSrcElement: () => /* @__PURE__ */ l.createElement("div", {
|
133
144
|
className: "dropdown-with-input-tags-input-container"
|
134
|
-
}, /* @__PURE__ */
|
135
|
-
className: "input-with-tags-container"
|
136
|
-
onClick:
|
137
|
-
},
|
145
|
+
}, /* @__PURE__ */ l.createElement("div", {
|
146
|
+
className: `input-with-tags-container ${n ? "disabled-input-with-tags-container" : ""}`,
|
147
|
+
onClick: W
|
148
|
+
}, u.map((t, e) => /* @__PURE__ */ l.createElement("span", {
|
138
149
|
key: e,
|
139
150
|
className: "tag-in-inputwithtags"
|
140
|
-
}, t.label, /* @__PURE__ */
|
151
|
+
}, t.label, !n && /* @__PURE__ */ l.createElement("span", {
|
141
152
|
className: "close-icon-in-inputwithtags",
|
142
153
|
onClick: (a) => {
|
143
|
-
a.stopPropagation(),
|
154
|
+
a.stopPropagation(), L(e);
|
144
155
|
}
|
145
|
-
}, /* @__PURE__ */
|
156
|
+
}, /* @__PURE__ */ l.createElement(q, {
|
146
157
|
name: "close"
|
147
|
-
})))), /* @__PURE__ */
|
148
|
-
ref:
|
158
|
+
})))), /* @__PURE__ */ l.createElement("input", {
|
159
|
+
ref: D,
|
149
160
|
type: "text",
|
150
|
-
value:
|
151
|
-
onChange:
|
152
|
-
onKeyDown:
|
153
|
-
onFocus:
|
154
|
-
placeholder:
|
155
|
-
className: "input-with-tags-input"
|
161
|
+
value: r,
|
162
|
+
onChange: F,
|
163
|
+
onKeyDown: x,
|
164
|
+
onFocus: V,
|
165
|
+
placeholder: u.length === 0 ? T : "",
|
166
|
+
className: "input-with-tags-input",
|
167
|
+
disabled: n
|
156
168
|
})))
|
157
169
|
})));
|
158
170
|
});
|
159
171
|
export {
|
160
|
-
|
172
|
+
U as DropdownWithInputTags
|
161
173
|
};
|
162
174
|
//# sourceMappingURL=index36.js.map
|
package/dist/index36.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\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?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n onSearch?: (searchTerm: string) => void;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: 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 onSearch,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return value.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 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\n useEffect(() => {\n setTags(\n value.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 }, [value, options]);\n\n useEffect(() => {\n if (!inputValue.trim()) {\n setFilteredOptions(options);\n } else {\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 }\n \n if (onSearch) {\n onSearch(inputValue);\n }\n }, [inputValue, options, onSearch]);\n\n const handleSelectOption = (option: DropdownOption) => {\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\n const handleRemoveTag = (indexToRemove: number) => {\n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n e.preventDefault();\n \n if (filteredOptions.length > 0) {\n handleSelectOption(filteredOptions[0]);\n } else if (allowCustomTags) {\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 }\n setIsDropdownOpen(false);\n } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n if (!isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n } else if (e.key === 'Escape') {\n setIsDropdownOpen(false);\n setInputValue('');\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n \n if (newValue.trim() && !isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputFocus = () => {\n if (inputValue.trim() || options.length > 0) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputContainerClick = (e: React.MouseEvent) => {\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 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 setIsDropdownOpen(!isDropdownOpen);\n };\n\n useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n const defaultRenderOption = (option: DropdownOption, onSelect: (option: DropdownOption) => void) => (\n <div\n key={option.id}\n className=\"dropdown-with-input-tags-option\"\n onClick={() => onSelect(option)}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && (\n <span className=\"option-value\">{option.value}</span>\n )}\n </div>\n );\n\n return (\n <div className={`dropdown-with-input-tags-wrapper ${className}`} data-automation-id={automationId}>\n {label && <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={isDropdownOpen}\n onPopoverToggle={setIsDropdownOpen}\n renderPopoverContents={({ closePopoverCb }) => (\n <div className=\"dropdown-with-input-tags-content\">\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option) =>\n renderOption\n ? renderOption(option, handleSelectOption)\n : defaultRenderOption(option, handleSelectOption)\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n {inputValue.trim() ? (\n allowCustomTags ? (\n <div\n className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n onClick={() => {\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 closePopoverCb();\n }}\n >\n Add \"{inputValue.trim()}\"\n </div>\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n renderPopoverSrcElement={() => (\n <div className=\"dropdown-with-input-tags-input-container\">\n <div \n className=\"input-with-tags-container\" \n onClick={handleInputContainerClick}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\">\n {tag.label}\n <span\n className=\"close-icon-in-inputwithtags\"\n onClick={(e) => {\n e.stopPropagation();\n handleRemoveTag(index);\n }}\n >\n <Icon name=\"close\" />\n </span>\n </span>\n ))}\n <input\n ref={inputRef}\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 />\n </div>\n </div>\n )}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","useEffect","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","current","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","onClick","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","renderPopoverSrcElement","Icon","name","type","onKeyDown","onFocus"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\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?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n onSearch?: (searchTerm: string) => void;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: boolean;\n disabled?: 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 onSearch,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n disabled = false,\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return value.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 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\n useEffect(() => {\n setTags(\n value.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 }, [value, options]);\n\n useEffect(() => {\n if (!inputValue.trim()) {\n setFilteredOptions(options);\n } else {\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 }\n \n if (onSearch) {\n onSearch(inputValue);\n }\n }, [inputValue, options, onSearch]);\n\n const handleSelectOption = (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\n const handleRemoveTag = (indexToRemove: number) => {\n if (disabled) return;\n \n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n if (e.key === 'Enter' && inputValue.trim()) {\n e.preventDefault();\n if (filteredOptions.length > 0) {\n handleSelectOption(filteredOptions[0]);\n } else if (allowCustomTags) {\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 }\n setIsDropdownOpen(false);\n } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n if (!isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n } else if (e.key === 'Escape') {\n setIsDropdownOpen(false);\n setInputValue('');\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n const newValue = e.target.value;\n setInputValue(newValue);\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 = (option: DropdownOption, onSelect: (option: DropdownOption) => void, disabled: boolean) => (\n <div\n key={option.id}\n className=\"dropdown-with-input-tags-option\"\n onClick={() => !disabled && onSelect(option)}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && (\n <span className=\"option-value\">{option.value}</span>\n )}\n </div>\n );\n\n return (\n <div className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`} data-automation-id={automationId}>\n {label && <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 renderPopoverContents={({ closePopoverCb }) => (\n <div className=\"dropdown-with-input-tags-content\">\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option) =>\n renderOption\n ? renderOption(option, handleSelectOption)\n : defaultRenderOption(option, handleSelectOption, disabled)\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n {inputValue.trim() ? (\n allowCustomTags ? (\n <div\n className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n onClick={() => {\n if (disabled) return;\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 closePopoverCb();\n }}\n >\n Add \"{inputValue.trim()}\"\n </div>\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )}\n </div>\n )}\n </div>\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.label}\n {!disabled && (\n <span\n className=\"close-icon-in-inputwithtags\"\n onClick={(e) => {\n e.stopPropagation();\n handleRemoveTag(index);\n }}\n >\n <Icon name=\"close\" />\n </span>\n )}\n </span>\n ))}\n <input\n ref={inputRef}\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 />\n </div>\n </div>\n )}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","disabled","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","useEffect","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","current","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","onClick","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","renderPopoverSrcElement","Icon","name","type","onKeyDown","onFocus"],"mappings":"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"}
|