@megha-ui/react 1.2.362 → 1.2.364
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef, useState } from "react";
|
|
3
3
|
import { useDensity } from "../../context/DensityContext";
|
|
4
4
|
import Checkbox from "../checkbox";
|
|
@@ -7,6 +7,7 @@ import Block from "../block";
|
|
|
7
7
|
import Text from "../text";
|
|
8
8
|
import Button from "../button";
|
|
9
9
|
import { HiChevronDown } from "react-icons/hi";
|
|
10
|
+
import { IoChevronDownCircleOutline } from "react-icons/io5";
|
|
10
11
|
const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight = "12rem", border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, }) => {
|
|
11
12
|
var _a, _b;
|
|
12
13
|
const { density } = useDensity();
|
|
@@ -24,6 +25,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
24
25
|
left: 0,
|
|
25
26
|
top: "100%",
|
|
26
27
|
});
|
|
28
|
+
const [collapsed, setCollapsed] = useState("");
|
|
27
29
|
const calculateAutoPosition = () => {
|
|
28
30
|
if (!wrapperRef.current)
|
|
29
31
|
return;
|
|
@@ -364,38 +366,64 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
364
366
|
display: "flex",
|
|
365
367
|
alignItems: "start",
|
|
366
368
|
width: "100%",
|
|
367
|
-
}, children: _jsxs("span", { style: { marginLeft: "0.5rem" }, children: ["+ Create ", searchTerm] }) })] }, String(searchTerm))) : groupedOptions.length > 0 ? (groupedOptions.map((groupOption, gIndex) => (_jsxs("div", { children: [
|
|
369
|
+
}, children: _jsxs("span", { style: { marginLeft: "0.5rem" }, children: ["+ Create ", searchTerm] }) })] }, String(searchTerm))) : groupedOptions.length > 0 ? (groupedOptions.map((groupOption, gIndex) => (_jsxs("div", { children: [_jsxs("div", { style: {
|
|
368
370
|
padding: "0.25rem 0 0.25rem 1rem",
|
|
369
371
|
backgroundColor: "var(--row-bg)",
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
372
|
+
display: "flex",
|
|
373
|
+
alignItems: "center",
|
|
374
|
+
justifyContent: "space-between",
|
|
375
|
+
}, children: [_jsx("span", { children: groupOption.groupedValue }), _jsx("span", { children: collapsed === groupOption.groupedValue ? (_jsx(IoChevronDownCircleOutline, { style: {
|
|
376
|
+
transition: "transform 0.2s ease",
|
|
377
|
+
transform: "rotate(180deg)",
|
|
378
|
+
marginLeft: "auto",
|
|
379
|
+
cursor: "pointer",
|
|
380
|
+
}, onClick: () => {
|
|
381
|
+
if (collapsed === groupOption.groupedValue) {
|
|
382
|
+
setCollapsed("");
|
|
383
|
+
}
|
|
384
|
+
else {
|
|
385
|
+
setCollapsed(groupOption.groupedValue);
|
|
386
|
+
}
|
|
387
|
+
} })) : (_jsx(IoChevronDownCircleOutline, { style: {
|
|
388
|
+
transition: "transform 0.2s ease",
|
|
389
|
+
marginLeft: "auto",
|
|
390
|
+
cursor: "pointer",
|
|
391
|
+
}, onClick: () => {
|
|
392
|
+
if (collapsed === groupOption.groupedValue) {
|
|
393
|
+
setCollapsed("");
|
|
394
|
+
}
|
|
395
|
+
else {
|
|
396
|
+
setCollapsed(groupOption.groupedValue);
|
|
397
|
+
}
|
|
398
|
+
} })) })] }), collapsed === groupOption.groupedValue ? null : (_jsx(_Fragment, { children: groupOption.options.map((option, index) => {
|
|
399
|
+
let prevOptions = groupedOptions.filter((item, index) => index < gIndex);
|
|
400
|
+
prevOptions = [
|
|
401
|
+
...prevOptions.map((item) => item.options),
|
|
402
|
+
];
|
|
403
|
+
prevOptions = prevOptions.flatMap((item) => item);
|
|
404
|
+
const refIndex = gIndex > 0 ? prevOptions.length + index : index;
|
|
405
|
+
return (_jsxs("li", { ref: (el) => {
|
|
406
|
+
optionRefs.current[refIndex] = el;
|
|
407
|
+
}, id: `${refIndex}`, onClick: (e) => onSelectChange
|
|
408
|
+
? handleItemSelect(option, option.disabled || false)
|
|
409
|
+
: 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
|
|
410
|
+
? listItemHoverStyle
|
|
411
|
+
: {})), (option.disabled ? listItemDisabledStyle : {})), (refIndex !== highlightIndex &&
|
|
412
|
+
!isMultiple &&
|
|
413
|
+
intermediateValues.includes(option.value)
|
|
414
|
+
? selectedItemStyle
|
|
415
|
+
: {})), { wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between", padding: "0.75rem 1rem 0.75rem 2.5rem" }), onMouseEnter: (e) => {
|
|
416
|
+
if (!option.disabled) {
|
|
417
|
+
setHighlightIndex(refIndex);
|
|
418
|
+
}
|
|
419
|
+
}, children: [isMultiple && (_jsx("div", { style: { marginRight: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues.includes(option.value), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) })), _jsxs("div", { style: {
|
|
420
|
+
display: "flex",
|
|
421
|
+
alignItems: "start",
|
|
422
|
+
width: "100%",
|
|
423
|
+
}, children: [option.icon &&
|
|
424
|
+
option.isDelete &&
|
|
425
|
+
!option.isDelete && _jsx("span", { children: option.icon }), _jsx("span", { style: { margin: "0 0.5rem" }, children: option.label })] }), option.icon && option.isDelete && option.icon] }, String(option.value)));
|
|
426
|
+
}) }))] }, gIndex)))) : (filteredOptions.map((option, index) => (_jsxs("li", { ref: (el) => {
|
|
399
427
|
optionRefs.current[index] = el;
|
|
400
428
|
}, onClick: (e) => onSelectChange
|
|
401
429
|
? handleItemSelect(option, option.disabled || false)
|
package/package.json
CHANGED