@megha-ui/react 1.3.130 → 1.3.131
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.
|
@@ -8,7 +8,7 @@ import Text from "../text";
|
|
|
8
8
|
import Button from "../button";
|
|
9
9
|
import { HiChevronDown } from "react-icons/hi";
|
|
10
10
|
import { FaChevronDown, FaChevronUp } from "react-icons/fa";
|
|
11
|
-
const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelAlignment = "vertical", labelFontSize, labelFontWeight, labelMarginBottom, labelClass, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight, border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, onMenuOpen, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = true, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
|
|
11
|
+
const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelAlignment = "vertical", labelFontSize, labelFontWeight, labelMarginBottom, labelClass, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight, border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, onMenuOpen, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = true, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, collapseAllGroups = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
|
|
12
12
|
var _a, _b, _c;
|
|
13
13
|
const { density } = useDensity();
|
|
14
14
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -27,7 +27,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
27
27
|
left: 0,
|
|
28
28
|
top: "100%",
|
|
29
29
|
});
|
|
30
|
-
const [collapsed, setCollapsed] = useState(
|
|
30
|
+
const [collapsed, setCollapsed] = useState([]);
|
|
31
31
|
const [height, setHeight] = useState(0);
|
|
32
32
|
const getLayoutBoundaryParent = (element) => {
|
|
33
33
|
if (!element)
|
|
@@ -224,6 +224,13 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
224
224
|
setGroupedOptions(grouped);
|
|
225
225
|
}
|
|
226
226
|
}, [searchTerm, options, isSort, isGrouping]);
|
|
227
|
+
useEffect(() => {
|
|
228
|
+
if (!isGrouping)
|
|
229
|
+
return;
|
|
230
|
+
if (collapseAllGroups && groupedOptions.length > 0) {
|
|
231
|
+
setCollapsed(groupedOptions.map((group) => group.groupedValue));
|
|
232
|
+
}
|
|
233
|
+
}, [collapseAllGroups, groupedOptions, isGrouping]);
|
|
227
234
|
const handleSelect = (value, isDisabled) => {
|
|
228
235
|
if (isDisabled)
|
|
229
236
|
return;
|
|
@@ -449,22 +456,22 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
449
456
|
display: "flex",
|
|
450
457
|
alignItems: "center",
|
|
451
458
|
gap: "0.5rem",
|
|
452
|
-
}, onClick: () => setCollapsed(
|
|
453
|
-
?
|
|
454
|
-
: groupOption.groupedValue), children: [_jsx("div", { className: "flex items-center justify-center", style: {
|
|
459
|
+
}, onClick: () => setCollapsed((prev) => prev.includes(groupOption.groupedValue)
|
|
460
|
+
? prev.filter((item) => item !== groupOption.groupedValue)
|
|
461
|
+
: [...prev, groupOption.groupedValue]), children: [_jsx("div", { className: "flex items-center justify-center", style: {
|
|
455
462
|
background: "rgb(222, 222, 222)",
|
|
456
463
|
borderRadius: "0.25rem",
|
|
457
464
|
cursor: "pointer",
|
|
458
465
|
flexGrow: 0,
|
|
459
466
|
flexShrink: 0,
|
|
460
467
|
padding: "0.25rem",
|
|
461
|
-
}, children: collapsed
|
|
468
|
+
}, children: collapsed.includes(groupOption.groupedValue) ? (_jsx(FaChevronUp, { style: {
|
|
462
469
|
height: "0.85rem",
|
|
463
470
|
width: "0.85rem",
|
|
464
471
|
} })) : (_jsx(FaChevronDown, { style: {
|
|
465
472
|
height: "0.85rem",
|
|
466
473
|
width: "0.85rem",
|
|
467
|
-
} })) }), _jsx("span", { children: groupOption.groupedValue })] }), collapsed
|
|
474
|
+
} })) }), _jsx("span", { children: groupOption.groupedValue })] }), collapsed.includes(groupOption.groupedValue) ? null : (_jsx(_Fragment, { children: groupOption.options.map((option, index) => {
|
|
468
475
|
let prevOptions = groupedOptions.filter((item, index) => index < gIndex);
|
|
469
476
|
prevOptions = [
|
|
470
477
|
...prevOptions.map((item) => item.options),
|
package/package.json
CHANGED