@monolith-forensics/monolith-ui 1.8.1-dev.1 → 1.8.1-dev.3

package/dist/DateTimeRangePicker/DateTimeRangePicker.js

@@ -0,0 +1,363 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { autoUpdate, flip, FloatingPortal, offset, shift, useDismiss, useFloating, useInteractions, } from "@floating-ui/react";
+import moment from "moment";
+import { CalendarDaysIcon, Clock3Icon } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import styled from "styled-components";
+import { Button, Calendar, DateInput, FieldLabel, SegmentedControl } from "..";
+import { ArrowButton, ClearButton, getControlSizeTokens, StyledContent, StyledFloatContainer, } from "../core";
+const DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
+const resolveNow = (utc) => (utc ? moment.utc() : moment());
+const serializeMoment = (value, utc) => {
+    const next = utc ? value.clone().utc() : value.clone();
+    return next.toISOString();
+};
+const getDefaultPresets = (utc) => {
+    const makePreset = (label, amount, unit) => ({
+        label,
+        getRange: () => {
+            const end = resolveNow(utc);
+            const start = end.clone().subtract(amount, unit);
+            return {
+                start: serializeMoment(start, utc),
+                end: serializeMoment(end, utc),
+            };
+        },
+    });
+    return [
+        makePreset("Last 15 minutes", 15, "minutes"),
+        makePreset("Last 30 minutes", 30, "minutes"),
+        makePreset("Last 1 hour", 1, "hour"),
+        makePreset("Last 24 hours", 24, "hours"),
+        makePreset("Last 7 days", 7, "days"),
+        makePreset("Last 30 days", 30, "days"),
+    ];
+};
+const parseRangeMoment = (value, utc) => {
+    if (!value)
+        return null;
+    const parsed = utc ? moment.utc(value) : moment(value);
+    return parsed.isValid() ? parsed : null;
+};
+const momentToCalendarDate = (value, utc) => {
+    const parsed = parseRangeMoment(value, utc);
+    if (!parsed)
+        return undefined;
+    if (!utc)
+        return parsed.toDate();
+    return new Date(parsed.year(), parsed.month(), parsed.date(), parsed.hour(), parsed.minute(), parsed.second(), parsed.millisecond());
+};
+const calendarDateToMoment = (value, utc) => {
+    if (!utc)
+        return moment(value);
+    return moment.utc({
+        year: value.getFullYear(),
+        month: value.getMonth(),
+        date: value.getDate(),
+        hour: value.getHours(),
+        minute: value.getMinutes(),
+        second: value.getSeconds(),
+        millisecond: value.getMilliseconds(),
+    });
+};
+const formatDisplay = (value, format, utc) => {
+    const parsed = parseRangeMoment(value, utc);
+    if (!parsed)
+        return "";
+    return parsed.format(format);
+};
+const StyledContainer = styled.div.attrs({
+    className: "mfui-DateTimeRangePicker",
+}) `
+  width: ${({ $width }) => {
+    if ($width === undefined || $width === null)
+        return "100%";
+    return typeof $width === "number" ? `${$width}px` : $width;
+}};
+`;
+const StyledTrigger = styled.button `
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
+  width: 100%;
+  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  padding: ${({ size }) => `0 ${getControlSizeTokens(size).adornmentWidth}px 0 ${getControlSizeTokens(size).inputPaddingX}px`};
+  border-radius: 5px;
+  border: 1px solid
+    ${({ theme, variant }) => variant === "filled" || variant === "text"
+    ? "transparent"
+    : theme.palette.input.border};
+  outline: none;
+  background: ${({ theme, variant }) => variant === "text" ? "transparent" : theme.palette.input.background};
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  text-align: left;
+  cursor: pointer;
+  transition: border 0.1s ease-in-out;
+
+  &:focus-visible,
+  &:focus {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+const TriggerIcon = styled.span `
+  display: inline-flex;
+  align-items: center;
+  color: ${({ theme }) => theme.palette.text.secondary};
+
+  svg {
+    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+  }
+`;
+const TriggerText = styled.span `
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${({ theme, $empty }) => $empty ? theme.palette.input.placeholder : theme.palette.text.primary};
+`;
+const TriggerActions = styled.span `
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  height: 100%;
+`;
+const PickerPanel = styled.div `
+  display: grid;
+  grid-template-columns: 172px minmax(430px, 1fr);
+  gap: 10px;
+  width: min(720px, calc(100vw - 32px));
+
+  @media (max-width: 640px) {
+    grid-template-columns: minmax(0, 1fr);
+    width: calc(100vw - 32px);
+  }
+`;
+const PresetColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-right: 10px;
+  border-right: 1px solid ${({ theme }) => theme.palette.divider};
+
+  @media (max-width: 640px) {
+    padding-right: 0;
+    padding-bottom: 10px;
+    border-right: none;
+    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+  }
+`;
+const PanelTitle = styled.div `
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  margin-bottom: 4px;
+`;
+const PresetButton = styled.button `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: ${({ theme }) => theme.palette.text.primary};
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    background: ${({ theme }) => theme.palette.action.hover};
+    outline: none;
+  }
+`;
+const CustomColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+`;
+const InputGrid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+
+  @media (max-width: 640px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`;
+const EndpointField = styled.div `
+  min-width: 0;
+`;
+const ActiveControlRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+`;
+const CalendarShell = styled.div `
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  overflow-x: auto;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 5px;
+  background: ${({ theme }) => theme.palette.background.paper};
+`;
+const ValidationText = styled.div `
+  min-height: 16px;
+  font-size: 11px;
+  color: ${({ theme }) => theme.palette.error.main};
+`;
+const ActionRow = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+`;
+const FooterMeta = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-right: auto;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 11px;
+
+  svg {
+    width: 13px;
+    height: 13px;
+  }
+`;
+const DateTimeRangePicker = forwardRef(({ className, style, defaultValue = { start: null, end: null }, value, onChange = () => { }, label, description, placeholder = "Select date/time range", startLabel = "Start", endLabel = "End", format = DEFAULT_FORMAT, size = "sm", variant = "outlined", required = false, clearable = true, disabled = false, error, width, min, max, utc = false, presets, }, ref) => {
+    var _a, _b;
+    const isControlled = useRef(value !== undefined);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const _value = isControlled.current ? value || {} : uncontrolledValue;
+    const [isOpen, setIsOpen] = useState(false);
+    const [draftValue, setDraftValue] = useState(_value);
+    const [activeEndpoint, setActiveEndpoint] = useState("start");
+    const resolvedPresets = useMemo(() => presets || getDefaultPresets(utc), [presets, utc]);
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom-start",
+        strategy: "absolute",
+        middleware: [offset(5), flip(), shift({ padding: 8 })],
+        whileElementsMounted: autoUpdate,
+    });
+    const dismiss = useDismiss(context, {
+        outsidePress: (event) => {
+            var _a, _b, _c;
+            const target = event.target;
+            if (((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, ".mfui-DateInput")) ||
+                ((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, ".mfui-DropDownMenu")) ||
+                ((_c = target === null || target === void 0 ? void 0 : target.closest) === null || _c === void 0 ? void 0 : _c.call(target, ".Menu"))) {
+                return false;
+            }
+            return true;
+        },
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+    useEffect(() => {
+        if (isOpen) {
+            setDraftValue(_value);
+            setActiveEndpoint(_value.start ? "end" : "start");
+        }
+    }, [isOpen, _value.start, _value.end]);
+    const commitValue = useCallback((nextValue, meta) => {
+        if (!isControlled.current) {
+            setUncontrolledValue(nextValue);
+        }
+        onChange(nextValue, meta);
+    }, [onChange]);
+    const displayValue = useMemo(() => {
+        if (!_value.start && !_value.end)
+            return "";
+        const start = formatDisplay(_value.start, format, utc) || "Start";
+        const end = formatDisplay(_value.end, format, utc) || "End";
+        return `${start} - ${end}${utc ? " UTC" : ""}`;
+    }, [_value.start, _value.end, format, utc]);
+    const validationError = useMemo(() => {
+        const start = parseRangeMoment(draftValue.start, utc);
+        const end = parseRangeMoment(draftValue.end, utc);
+        if (!start || !end)
+            return "Select both a start and end timestamp.";
+        if (start.isAfter(end))
+            return "Start timestamp must be before end.";
+        if (min && start.isBefore(moment(min)))
+            return "Start is before minimum.";
+        if (max && end.isAfter(moment(max)))
+            return "End is after maximum.";
+        return "";
+    }, [draftValue.start, draftValue.end, min, max, utc]);
+    const patchDraft = (patch) => {
+        setDraftValue((prev) => (Object.assign(Object.assign({}, prev), patch)));
+    };
+    const handleClear = (event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        const emptyValue = { start: null, end: null };
+        setDraftValue(emptyValue);
+        commitValue(emptyValue, { source: "clear" });
+        setIsOpen(false);
+    };
+    const handleApply = () => {
+        if (validationError)
+            return;
+        commitValue(draftValue, { source: "apply" });
+        setIsOpen(false);
+    };
+    const handleCancel = () => {
+        setDraftValue(_value);
+        setIsOpen(false);
+    };
+    const handlePreset = (preset) => {
+        const nextValue = preset.getRange();
+        setDraftValue(nextValue);
+        commitValue(nextValue, { source: "preset", preset });
+        setIsOpen(false);
+    };
+    const handleCalendarChange = (date) => {
+        if (!date) {
+            patchDraft({ [activeEndpoint]: null });
+            return;
+        }
+        patchDraft({
+            [activeEndpoint]: serializeMoment(calendarDateToMoment(date, utc), utc),
+        });
+    };
+    const activeValue = draftValue[activeEndpoint];
+    const activeMin = activeEndpoint === "end"
+        ? ((_a = parseRangeMoment(draftValue.start, utc)) === null || _a === void 0 ? void 0 : _a.toDate()) || min
+        : min;
+    const activeMax = activeEndpoint === "start"
+        ? ((_b = parseRangeMoment(draftValue.end, utc)) === null || _b === void 0 ? void 0 : _b.toDate()) || max
+        : max;
+    return (_jsxs(StyledContainer, Object.assign({ ref: (node) => {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+            refs.setReference(node);
+        }, className: className, "$width": width }, getReferenceProps(), { children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledTrigger, { type: "button", size: size, variant: variant, disabled: disabled, style: style, "aria-haspopup": "dialog", "aria-expanded": isOpen, onClick: () => setIsOpen((prev) => !prev), children: [_jsx(TriggerIcon, { size: size, children: _jsx(CalendarDaysIcon, {}) }), _jsx(TriggerText, { "$empty": !displayValue, children: displayValue || placeholder }), _jsx(TriggerActions, { children: clearable && (_value.start || _value.end) ? (_jsx(ClearButton, { size: size, onClick: handleClear })) : (_jsx(ArrowButton, { size: size })) })] }), !disabled && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsxs(PickerPanel, { children: [_jsxs(PresetColumn, { children: [_jsx(PanelTitle, { children: "Quick ranges" }), resolvedPresets.map((preset) => (_jsx(PresetButton, { type: "button", onClick: () => handlePreset(preset), children: preset.label }, preset.label)))] }), _jsxs(CustomColumn, { children: [_jsxs(InputGrid, { children: [_jsx(EndpointField, { onClick: () => setActiveEndpoint("start"), children: _jsx(DateInput, { label: startLabel, value: draftValue.start, onChange: (next) => patchDraft({ start: next }), format: format, size: size, variant: variant, clearable: true, utc: utc, min: min, max: activeEndpoint === "start" ? activeMax : max }) }), _jsx(EndpointField, { onClick: () => setActiveEndpoint("end"), children: _jsx(DateInput, { label: endLabel, value: draftValue.end, onChange: (next) => patchDraft({ end: next }), format: format, size: size, variant: variant, clearable: true, utc: utc, min: activeEndpoint === "end" ? activeMin : min, max: max }) })] }), _jsxs(ActiveControlRow, { children: [_jsxs(PanelTitle, { children: ["Editing ", activeEndpoint === "start" ? startLabel : endLabel] }), _jsx(SegmentedControl, { data: [
+                                                        { label: startLabel, value: "start" },
+                                                        { label: endLabel, value: "end" },
+                                                    ], value: activeEndpoint, onChange: (next) => setActiveEndpoint(next), size: "xs" })] }), _jsx(CalendarShell, { children: _jsx(Calendar, { value: momentToCalendarDate(activeValue, utc), onChange: handleCalendarChange, includeTime: true, clearable: false, min: activeMin, max: activeMax }) }), _jsx(ValidationText, { children: validationError }), _jsxs(ActionRow, { children: [_jsxs(FooterMeta, { children: [_jsx(Clock3Icon, {}), utc ? "UTC" : "Local time"] }), clearable && (_jsx(Button, { type: "button", size: size, variant: "subtle", onClick: handleClear, children: "Clear" })), _jsx(Button, { type: "button", size: size, variant: "outlined", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { type: "button", size: size, variant: "contained", onClick: handleApply, disabled: Boolean(validationError), children: "Apply" })] })] })] }) }) })) }))] })));
+});
+DateTimeRangePicker.displayName = "DateTimeRangePicker";
+export default DateTimeRangePicker;

package/dist/DateTimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./DateTimeRangePicker";
+export * from "./DateTimeRangePicker";

package/dist/DateTimeRangePicker/index.js

@@ -0,0 +1,2 @@
+export { default } from "./DateTimeRangePicker";
+export * from "./DateTimeRangePicker";

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,29 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
-export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
+export const DropDownMenu = ({ data, children, defaultValue, value, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
     var _a;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    const [selected, setSelected] = useState(defaultValue || []);
+    const [internalSelected, setInternalSelected] = useState(defaultValue || []);
+    const isControlled = value !== undefined;
+    const selected = isControlled ? value || [] : internalSelected;
+    const updateSelected = (newSelected, diff) => {
+        if (!isControlled) {
+            setInternalSelected(newSelected);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
+    };
+    const isSameItem = (a, b) => isObjectArray ? (a === null || a === void 0 ? void 0 : a.value) === (b === null || b === void 0 ? void 0 : b.value) : a === b;
     const handleAddItem = (item) => {
-        setSelected((prev) => {
-            let newSelected = [...prev, item];
-            const diff = [item];
-            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
-            return newSelected;
-        });
+        if (!multiselect) {
+            updateSelected([item], [item]);
+            return;
+        }
+        const nextSelected = selected.some((selectedItem) => isSameItem(selectedItem, item))
+            ? selected
+            : [...selected, item];
+        updateSelected(nextSelected, [item]);
     };
     const handleRemoveItem = (item) => {
-        setSelected((prev) => {
-            let newSelected = prev.filter((i) => isObjectArray ? (i === null || i === void 0 ? void 0 : i.value) !== (item === null || item === void 0 ? void 0 : item.value) : i !== item);
-            const diff = [item];
-            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
-            return newSelected;
-        });
+        const newSelected = selected.filter((i) => !isSameItem(i, item));
+        updateSelected(newSelected, [item]);
+    };
+    const handleSetSelected = (newSelected, diff) => {
+        updateSelected(newSelected, diff);
     };
     const handleMenuClose = () => { };
     const handleScrollToBottom = (e) => {
         onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
+    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
 };

package/dist/DropDownMenu/components/MenuComponent.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
-import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, size as floatingSize, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { getControlSizeTokens } from "../../core";
 import { MenuContext } from "./MenuContext";
@@ -43,6 +43,11 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
             }),
             flip(),
             shift(),
+            floatingSize({
+                apply({ rects, elements }) {
+                    elements.floating.style.setProperty("--mfui-dropdown-reference-width", `${rects.reference.width}px`);
+                },
+            }),
         ],
         whileElementsMounted: autoUpdate,
     });

package/dist/DropDownMenu/components/MenuItem.d.ts

@@ -19,6 +19,7 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & {
     multiselect?: boolean;
+    $dynamicHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<unknown>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<MenuProps & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     ref?: RefObject<HTMLButtonElement>;
     children?: import("react").ReactNode | string;
@@ -38,4 +39,5 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & {
     multiselect?: boolean;
+    $dynamicHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;

package/dist/DropDownMenu/components/MenuItem.js

@@ -49,16 +49,18 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     min-height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
     width: 100%;
     min-width: 100%;
-    height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+    height: ${({ size = "sm", $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
+    box-sizing: border-box;
     position: relative;
     user-select: none;
     outline: none;
 
     border: none;
+    text-align: left;
 
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: ${({ $dynamicHeight }) => $dynamicHeight ? "normal" : "nowrap"};
+    overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "visible" : "hidden"};
+    text-overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "clip" : "ellipsis"};
 
     cursor: pointer;
     text-decoration: none;
@@ -66,7 +68,7 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     font-weight: normal;
     letter-spacing: normal;
 
-    padding: ${({ size = "sm" }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+    padding: ${({ size = "sm", $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
     &[data-disabled="true"] {
       opacity: 0.5;
@@ -74,6 +76,12 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
       pointer-events: "none";
     }
 
+    &[data-selected="true"] {
+      background-color: ${(props) => props.theme.palette.primary.main}20;
+      color: ${(props) => props.theme.palette.primary.main};
+      font-weight: 600;
+    }
+
     &:hover {
       background-color: ${(props) => props.theme.palette.action.hover};
       color: ${(props) => props.theme.palette.text.primary};
@@ -84,10 +92,15 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     }
 
     .button-label {
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      display: ${({ $dynamicHeight }) => $dynamicHeight ? "flex" : "inline-block"};
+      align-items: center;
+      justify-content: flex-start;
+      min-width: 0;
+      width: 100%;
+      text-align: left;
+      overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "visible" : "hidden"};
+      white-space: ${({ $dynamicHeight }) => $dynamicHeight ? "normal" : "nowrap"};
+      text-overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "clip" : "ellipsis"};
     }
   }
 `;

package/dist/DropDownMenu/components/MenuItemList.d.ts

@@ -7,14 +7,17 @@ export declare const MenuItemList: React.FC<{
     searchValue?: string;
     onSearch?: (value: string) => void;
     manualSearch?: boolean;
+    dynamicOptionHeight?: boolean;
     selected?: DropDownItem[];
     TooltipContent?: ComponentType<any>;
     multiselect?: boolean;
+    enableSelectAll?: boolean;
     grouped?: boolean;
     onAddNew?: (value: string) => void;
     size?: Size;
     handleAddItem: (item: DropDownItem) => void;
     handleRemoveItem: (item: DropDownItem) => void;
+    handleSetSelected: (selected: DropDownItem[], diff: DropDownItem[]) => void;
     onItemSelect?: (item: DropDownItem) => void;
     renderOption?: (item: DropDownItem) => React.ReactNode;
     onScroll?: (e: Event) => void;