@megha-ui/react 1.2.243 → 1.2.245

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.
Files changed (3) hide show
  1. package/dist/components/IconDropDown/index.d.ts +2 -0
  2. package/dist/components/IconDropDown/index.js +51 -3
  3. package/package.json +1 -1
package/dist/components/IconDropDown/index.d.ts CHANGED
@@ -7,6 +7,7 @@ type DropdownOption = {
7
7
  onDelete?: () => void;
8
8
  style?: React.CSSProperties;
9
9
  value: number | string;
10
+ group?: string;
10
11
  };
11
12
  type IconDropdownProps = {
12
13
  asteriskColor?: string;
@@ -51,6 +52,7 @@ type IconDropdownProps = {
51
52
  withValue?: boolean;
52
53
  autoPosition?: boolean;
53
54
  isSort?: boolean;
55
+ isGrouping?: boolean;
54
56
  isLoading?: boolean;
55
57
  };
56
58
  declare const IconDropdown: React.FC<IconDropdownProps>;
package/dist/components/IconDropDown/index.js CHANGED
@@ -5,7 +5,7 @@ import { HiChevronDown } from "react-icons/hi";
5
5
  import Block from "../block";
6
6
  import Loader from "../loader";
7
7
  import Text from "../text";
8
- const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, disabled = false, DropDownIcon, dropdownListBG, dropdownListWidth, isClear, maxDropdownHeight = "200px", menuFrom = "left", onChange, onMenuClose, options, searchBorderColor = "#2377ba", searchEnabled = true, selectedDisplay, selectedValues, style, Tooltip, withTooltip = false, withValue, labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isSort = true, marginTop, marginRight, marginBottom, marginLeft, width, label, required, border, isLoading = false }) => {
8
+ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, disabled = false, DropDownIcon, dropdownListBG, dropdownListWidth, isClear, maxDropdownHeight = "200px", menuFrom = "left", onChange, onMenuClose, options, searchBorderColor = "#2377ba", searchEnabled = true, selectedDisplay, selectedValues, style, Tooltip, withTooltip = false, withValue, labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isSort = true, marginTop, marginRight, marginBottom, marginLeft, width, label, required, border, isLoading = false, isGrouping = false, }) => {
9
9
  var _a, _b;
10
10
  const { density } = useDensity();
11
11
  const [isOpen, setIsOpen] = useState(false);
@@ -16,6 +16,7 @@ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, dis
16
16
  const searchInputRef = useRef(null);
17
17
  const optionRefs = useRef([]);
18
18
  const [highlightIndex, setHighlightIndex] = useState(0);
19
+ const [groupedOptions, setGroupedOptions] = useState([]);
19
20
  const [clickStyle, setClickStyle] = useState({
20
21
  left: 0,
21
22
  top: "100%",
@@ -134,6 +135,25 @@ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, dis
134
135
  .sort((a, b) => (a.label > b.label ? 1 : -1))
135
136
  .filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
136
137
  : options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
138
+ const grouped = [];
139
+ if (isGrouping) {
140
+ const groups = [...new Set(options.map((opt) => opt.group))];
141
+ if (groups.length > 0) {
142
+ groups.forEach((group) => {
143
+ if (group) {
144
+ const filteredOptions = options.filter((item) => item.group === group);
145
+ grouped.push({ groupedValue: group, options: filteredOptions });
146
+ }
147
+ });
148
+ }
149
+ else {
150
+ grouped.push({
151
+ groupedValue: "",
152
+ options: [..._options],
153
+ });
154
+ }
155
+ setGroupedOptions(grouped);
156
+ }
137
157
  setFilteredOptions(_options);
138
158
  }, [searchTerm, options, isSort]);
139
159
  const handleSelect = (value, isDisabled) => {
@@ -235,14 +255,42 @@ const IconDropdown = ({ className, ClearIcon, clearId, closeOnSelect = true, dis
235
255
  }, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: {
236
256
  color: "var(--form-border-color, #dbdfe9)",
237
257
  fontSize: "1rem",
238
- }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid var(--divider, #f5f5f5)", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
258
+ }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: isGrouping ? "max-content" : dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid var(--divider, #f5f5f5)", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
239
259
  width: "100%",
240
260
  padding: "0.5rem",
241
261
  boxSizing: "border-box",
242
262
  border: "1px solid",
243
263
  borderColor: searchBorderColor,
244
264
  borderRadius: 4,
245
- } }) })), _jsx("div", { style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: isLoading ? (_jsxs(Block, { as: "div", className: "flex items-center justify-between", children: [_jsx(Text, { as: "span", children: "Loading options" }), _jsx(Loader, { size: 12 })] })) : (filteredOptions.map((option, index) => (_jsxs("li", { ref: (el) => {
265
+ } }) })), _jsx("div", { style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: isLoading ? (_jsxs(Block, { as: "div", className: "flex items-center justify-between", children: [_jsx(Text, { as: "span", children: "Loading options" }), _jsx(Loader, { size: 12 })] })) : groupedOptions.length > 0 ? (groupedOptions.map((groupOption, gIndex) => (_jsxs("div", { children: [_jsx("div", { style: {
266
+ padding: "0.25rem 0 0.25rem 1rem",
267
+ backgroundColor: "#dddddd",
268
+ }, children: groupOption.groupedValue }), groupOption.options.map((option, index) => {
269
+ let prevOptions = groupedOptions.filter((item, index) => index < gIndex);
270
+ prevOptions = [
271
+ ...prevOptions.map((item) => item.options),
272
+ ];
273
+ prevOptions = prevOptions.flatMap((item) => item);
274
+ const refIndex = gIndex > 0 ? prevOptions.length + index : index;
275
+ return (_jsxs("li", { ref: (el) => {
276
+ optionRefs.current[refIndex] = el;
277
+ }, id: `${refIndex}`, onClick: () => handleSelect(option.value, option.disabled || false), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (refIndex === highlightIndex
278
+ ? listItemHoverStyle
279
+ : {})), (option.disabled ? listItemDisabledStyle : {})), (refIndex !== highlightIndex &&
280
+ selectedValues.includes(option.value)
281
+ ? selectedItemStyle
282
+ : {})), { wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between", padding: "0.75rem 1rem 0.75rem 2.5rem" }), onMouseEnter: (e) => {
283
+ if (!option.disabled) {
284
+ setHighlightIndex(refIndex);
285
+ }
286
+ }, children: [_jsxs("div", { style: {
287
+ display: "flex",
288
+ alignItems: "start",
289
+ width: "100%",
290
+ }, children: [option.icon &&
291
+ option.isDelete &&
292
+ !option.isDelete && (_jsx("span", { style: { margin: "0 0.5rem" }, children: option.icon })), _jsx("span", { children: option.label })] }), option.icon && option.isDelete && option.icon] }, String(option.value)));
293
+ })] }, gIndex)))) : (filteredOptions.map((option, index) => (_jsxs("li", { ref: (el) => {
246
294
  optionRefs.current[index] = el;
247
295
  }, onClick: () => handleSelect(option.value, option.disabled || false), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (index === highlightIndex ? listItemHoverStyle : {})), (option.disabled ? listItemDisabledStyle : {})), (index !== highlightIndex &&
248
296
  selectedValues.includes(option.value)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.2.243",
3
+ "version": "1.2.245",
4
4
  "description": "A collection of reusable UI components for React applications, built with TypeScript.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",