@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.9.0

package/dist/TagBox/TagBox.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
 import { useFloating, flip, offset, autoUpdate, FloatingPortal, } from "@floating-ui/react";
-import { useCallback, useEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { Input, Tooltip, FieldLabel, Pill, Loader } from "..";
 import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, getControlSizeTokens, } from "../core";
 const StyledInputContainer = styled.div `
@@ -29,7 +29,17 @@ const StyledInputContainer = styled.div `
   pointer-events: all;
   outline: none;
 
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "6px 12px"
+            : size === "lg"
+                ? "7px 14px"
+                : size === "xl"
+                    ? "8px 16px"
+                    : "4px 10px"};
 
   border-radius: 5px;
   transition: border 0.1s ease-in-out;
@@ -48,13 +58,33 @@ const StyledInputContainer = styled.div `
 }};
   font-weight: 500;
   color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ size }) => size === "xs"
+    ? "12px"
+    : size === "sm"
+        ? "14px"
+        : size === "md"
+            ? "16px"
+            : size === "lg"
+                ? "18px"
+                : size === "xl"
+                    ? "20px"
+                    : "12px"};
 
   width: 100%;
-  min-height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  min-height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "26px"};
 
   &[data-button-right="true"] {
-    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+    padding-right: 36px;
   }
 
   background-color: ${({ theme, variant }) => {
@@ -169,8 +199,17 @@ const GroupTitle = styled((_a) => {
 
   color: ${(props) => props.theme.palette.text.secondary};
 
-  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
 
   .group-label {
     white-space: nowrap;
@@ -181,7 +220,17 @@ const GroupTitle = styled((_a) => {
 
     font-weight: 500;
 
-    font-size: ${({ size }) => `${getControlSizeTokens(size).menuGroupFontSize}px`};
+    font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
   }
 
   .group-line {
@@ -192,7 +241,7 @@ const GroupTitle = styled((_a) => {
 const PillContainer = styled.div `
   display: flex;
   align-items: center;
-  gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
+  gap: 5px;
   flex-wrap: wrap;
   flex-grow: 1;
 
@@ -206,27 +255,35 @@ const StyledInnerContainer = styled.div `
   width: 100%;
 
   &[data-button-right="true"] {
-    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+    padding-right: 30px;
   }
 `;
 const StyledItem = styled.div `
   line-height: 1;
   color: ${(props) => props.theme.palette.text.primary};
   border-radius: 3px;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
-  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
-  height: ${({ size, $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
+  min-height: 25px;
+  padding: 7px 10px;
   position: relative;
   user-select: none;
   outline: none;
 
   cursor: pointer;
 
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
-  padding: ${({ size, $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+  font-family: "Arial", sans-serif;
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
 
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};
@@ -249,6 +306,43 @@ const StyledItem = styled.div `
     pointer-events: none;
   }
 `;
+const SelectAllItem = styled.button `
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight + 4}px`};
+  padding: 0 ${({ size }) => `${getControlSizeTokens(size).menuItemPaddingX}px`};
+  margin-bottom: 4px;
+  border: 0;
+  border-bottom: 1px solid ${(props) => props.theme.palette.divider};
+  background-color: ${(props) => props.theme.palette.input.background};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  color: ${(props) => props.theme.palette.text.primary};
+  text-align: left;
+  appearance: none;
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    outline: 2px solid ${(props) => props.theme.palette.primary.main};
+    outline-offset: -2px;
+  }
+`;
 const EmptyComponent = styled.div `
   display: flex;
   align-items: center;
@@ -284,7 +378,7 @@ const resolveValues = (value, data) => {
     }
     return resolvedValues;
 };
-const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, disabled = false, dynamicOptionHeight, renderOption, renderTag, OptionTooltip, DropDownProps = {}, }) => {
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, enableSelectAll = false, maxDisplayed, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, disabled = false, renderOption, renderTag, OptionTooltip, DropDownProps = {}, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
     const isControlled = value !== undefined;
@@ -292,15 +386,19 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
      * Resolve the options to a consistent format
      * also remove duplicates
      */
-    const resolvedOptions = Array.from(new Map(data
+    const resolvedOptions = useMemo(() => Array.from(new Map(data
         .map((item) => ({
-        value: isObjectArray ? item.value : item,
-        label: isObjectArray ? item.label : item,
+        value: isObjectArray
+            ? item.value
+            : item,
+        label: isObjectArray
+            ? item.label
+            : item,
         group: isObjectArray ? item.group : undefined,
         disabled: isObjectArray ? item.disabled : undefined,
         data: isObjectArray ? item.data : undefined,
     }))
-        .map((item) => [item.value, item])).values());
+        .map((item) => [item.value, item])).values()), [data, isObjectArray]);
     /**
      * Get the correct option if the default value is a string
      * otherwise, use the default value as is
@@ -374,6 +472,36 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         }))
             .sort((a, b) => a.label.localeCompare(b.label))
         : [];
+    const selectableMatchingItems = useMemo(() => resolvedOptions
+        .concat(customItems)
+        .filter((item) => !item.disabled)
+        .filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase())), [resolvedOptions, customItems, searchValue]);
+    const selectedValueKeys = useMemo(() => new Set(_value.map((v) => v.value)), [_value]);
+    const selectedMatchingCount = selectableMatchingItems.filter((item) => selectedValueKeys.has(item.value)).length;
+    const allMatchingSelected = selectableMatchingItems.length > 0 &&
+        selectedMatchingCount === selectableMatchingItems.length;
+    const handleToggleSelectAll = useCallback(() => {
+        if (selectableMatchingItems.length === 0)
+            return;
+        if (allMatchingSelected) {
+            const matchingKeys = new Set(selectableMatchingItems.map((i) => i.value));
+            const next = _value.filter((v) => !matchingKeys.has(v.value));
+            !isControlled && setValueState(next);
+            onChange === null || onChange === void 0 ? void 0 : onChange(next.map((v) => v.value), next);
+            return;
+        }
+        const toAdd = selectableMatchingItems.filter((item) => !selectedValueKeys.has(item.value));
+        const next = [..._value, ...toAdd];
+        !isControlled && setValueState(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next.map((v) => v.value), next);
+    }, [
+        selectableMatchingItems,
+        allMatchingSelected,
+        selectedValueKeys,
+        _value,
+        isControlled,
+        onChange,
+    ]);
     const { refs, floatingStyles, update } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
@@ -396,7 +524,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         });
     };
     const handleClear = (e) => {
-        e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.preventDefault();
         if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
             inputRef.current.value = "";
         onChange === null || onChange === void 0 ? void 0 : onChange([]);
@@ -462,18 +590,24 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         customItems,
     ]);
     const handleKeyDown = (e) => {
-        var _a, _b;
+        var _a, _b, _c;
         const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        // When focus is inside the floating dropdown (e.g., on the Select All
+        // button), let that element handle its own activation rather than the
+        // container-level routing meant for the input.
+        const target = e.target;
+        const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
+        const focusInsideDropdown = !!floatingElement && floatingElement.contains(target);
         // Escape key
         if (e.key === "Escape") {
-            const reference = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+            const reference = (_c = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _c === void 0 ? void 0 : _c.current;
             reference === null || reference === void 0 ? void 0 : reference.blur();
             setSearchValue("");
             update();
             setIsOpen(false);
         }
         // Enter key
-        if (e.key === "Enter") {
+        if (e.key === "Enter" && !focusInsideDropdown) {
             if (preSelected) {
                 handleItemClick(preSelected);
                 setPreSelected(undefined);
@@ -497,13 +631,15 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
             // setIsOpen(false);
         }
         // Backspace key
-        if (e.key === "Backspace" && currentInputValue === "") {
+        if (e.key === "Backspace" &&
+            currentInputValue === "" &&
+            !focusInsideDropdown) {
             const newItems = _value === null || _value === void 0 ? void 0 : _value.slice(0, _value.length - 1);
             !isControlled && setValueState(newItems);
             onChange === null || onChange === void 0 ? void 0 : onChange(newItems.map((v) => v.value), newItems);
         }
         // Arrow down
-        if (e.key === "ArrowDown") {
+        if (e.key === "ArrowDown" && !focusInsideDropdown) {
             e.preventDefault();
             setPreSelected((prev) => {
                 let newItem = filteredItems[0]; // Loop back to the first item
@@ -521,7 +657,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
             });
         }
         // Arrow up
-        if (e.key === "ArrowUp") {
+        if (e.key === "ArrowUp" && !focusInsideDropdown) {
             e.preventDefault();
             setPreSelected((prev) => {
                 let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
@@ -541,9 +677,15 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                 return newItem;
             });
         }
-        // Tab key
+        // Tab key — close when the user is tabbing out of the dropdown itself,
+        // or when no focusable element exists inside it. Otherwise leave it open
+        // so FloatingPortal's preserveTabOrder can route focus to the Select All
+        // button.
         if (e.key === "Tab") {
-            setIsOpen(false);
+            const hasFocusableContent = enableSelectAll && selectableMatchingItems.length > 0;
+            if (focusInsideDropdown || !hasFocusableContent) {
+                setIsOpen(false);
+            }
         }
     };
     // handle scroll item into view
@@ -585,7 +727,14 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     return (_jsxs("div", { className: className + " mfTagBox", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
                     setIsOpen(true);
                     handleFocus();
-                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: 0, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [_value === null || _value === void 0 ? void 0 : _value.map((item, index) => (_jsx(Pill, { size: size, onRemove: () => handleRemoveItem(item), children: (renderTag === null || renderTag === void 0 ? void 0 : renderTag(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index))), (searchable || allowCustomValue || (_value === null || _value === void 0 ? void 0 : _value.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: 0, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [(() => {
+                                    const shouldTruncate = maxDisplayed != null && _value.length > maxDisplayed;
+                                    const displayedItems = shouldTruncate
+                                        ? _value.slice(0, maxDisplayed)
+                                        : _value;
+                                    const overflowCount = _value.length - displayedItems.length;
+                                    return (_jsxs(_Fragment, { children: [displayedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderTag === null || renderTag === void 0 ? void 0 : renderTag(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index))), overflowCount > 0 && (_jsxs(Pill, { size: "xs", showRemoveIcon: false, children: ["+", overflowCount, " more..."] }))] }));
+                                })(), (searchable || allowCustomValue || (_value === null || _value === void 0 ? void 0 : _value.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
                                         if (searchFn !== undefined) {
                                             searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
                                         }
@@ -594,10 +743,10 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                                         }
                                         update();
                                     }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue), "data-disabled": disabled }))] }) }), clearable &&
-                        (((_f = _value === null || _value === void 0 ? void 0 : _value.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { size: size, onClick: handleClear, onMouseDown: (e) => {
+                        (((_f = _value === null || _value === void 0 ? void 0 : _value.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        } })) : arrow ? (_jsx(ArrowButton, { size: size, onClick: (e) => {
+                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
                             e.preventDefault();
                         }, onMouseDown: (e) => {
                             e.preventDefault();
@@ -612,23 +761,32 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                             maxHeight: DropDownProps.autoHeight
                                 ? (dropDownHeight || 250) - 10
                                 : "",
-                        }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
-                                    ? groups.map((group) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
-                                                            e.preventDefault();
-                                                            e.stopPropagation();
-                                                            handleItemClick(item);
-                                                        }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
-                                                                ? item
-                                                                : item === null || item === void 0 ? void 0 : item.label })) }, index) }, index));
-                                            })] }, group.label)))
-                                    : filteredItems.map((item, index) => {
-                                        return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                    handleItemClick(item);
-                                                }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
-                                    }) }))] })) }) }))] }));
+                        }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading &&
+                                filteredItems.length === 0 &&
+                                !(enableSelectAll && selectableMatchingItems.length > 0) && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [enableSelectAll && selectableMatchingItems.length > 0 && (_jsx(SelectAllItem, { type: "button", size: size, onMouseDown: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                        }, onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            handleToggleSelectAll();
+                                        }, children: allMatchingSelected ? "Deselect all" : "Select all" })), grouped
+                                        ? groups.map((group) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                                    return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                                                e.preventDefault();
+                                                                e.stopPropagation();
+                                                                handleItemClick(item);
+                                                            }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
+                                                                    ? item
+                                                                    : item === null || item === void 0 ? void 0 : item.label })) }, index) }, index));
+                                                })] }, group.label)))
+                                        : filteredItems.map((item, index) => {
+                                            return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        handleItemClick(item);
+                                                    }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
+                                        })] }))] })) }) }))] }));
 }) `
   position: relative;
   cursor: pointer;

package/dist/TagBox/types.d.ts

@@ -22,6 +22,19 @@ export interface TagBoxProps {
     allowCustomValue?: boolean;
     searchable?: boolean;
     clearable?: boolean;
+    /**
+     * Adds a sticky "Select all" / "Deselect all" button at the top of the
+     * dropdown. The button operates on the currently visible (search-filtered,
+     * non-disabled) options — not the full dataset. When a search filter is
+     * active, only items matching the filter are toggled.
+     */
+    enableSelectAll?: boolean;
+    /**
+     * Maximum number of selected tags to render as Pills. When the selection
+     * exceeds this number, the overflow is summarized as a non-removable
+     * "+{count} more..." indicator. Omit to render every selected tag.
+     */
+    maxDisplayed?: number;
     label?: string;
     description?: ReactNode;
     required?: boolean;
@@ -32,7 +45,6 @@ export interface TagBoxProps {
     debounceTime?: number;
     sort?: boolean;
     disabled?: boolean;
-    dynamicOptionHeight?: boolean;
     renderOption?: (item: Option | string) => React.ReactNode;
     renderTag?: (item: Option | string) => React.ReactNode;
     OptionTooltip?: (props: {

package/dist/TextArea/TextArea.js

@@ -1,17 +1,26 @@
 import styled from "styled-components";
 import TextareaAutosize from "react-textarea-autosize";
-import { getControlSizeTokens } from "../core";
 const TextArea = styled(TextareaAutosize) `
   outline: none;
   resize: none;
-  padding: ${({ size }) => `${getControlSizeTokens(size).inputPaddingX}px`};
+  padding: 10px;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
 
   font-family: ${({ theme }) => theme.typography.fontFamily};
   color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "13px"};
 
   background-color: ${({ theme, variant }) => {
     switch (variant) {
@@ -50,13 +59,18 @@ const TextArea = styled(TextareaAutosize) `
     border: 1px solid ${(props) => props.theme.palette.primary.main};
   }
 
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
   ::placeholder {
-    font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "12px"};
   }
 `;
 export default TextArea;

package/dist/TextInput/TextInput.js

@@ -13,7 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { FieldLabel } from "..";
 import Input from "../Input/Input";
-import { getControlSizeTokens } from "../core";
 import { forwardRef, useState } from "react";
 import { Eye, EyeOff, X } from "lucide-react";
 const StyledContainer = styled.div `
@@ -36,9 +35,7 @@ const InputContainer = styled.div `
 `;
 const InputButton = styled.button `
   position: absolute;
-  right: 0;
-  width: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
-  height: 100%;
+  right: 8px;
   background: none;
   border: none;
   cursor: pointer;
@@ -61,8 +58,8 @@ const InputButton = styled.button `
   }
 
   svg {
-    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    width: 16px;
+    height: 16px;
   }
 `;
 export const TextInput = forwardRef((_a, ref) => {
@@ -80,14 +77,11 @@ export const TextInput = forwardRef((_a, ref) => {
     };
     // Enhanced features: password or clearable functionality
     const inputType = password && !passwordVisible ? "password" : type || "text";
-    const adornmentWidth = getControlSizeTokens(size).adornmentWidth;
-    const inputStyle = Object.assign(Object.assign({}, style), (password || (clearable && value)
-        ? { paddingRight: `${adornmentWidth}px` }
-        : {}));
-    return (_jsxs(StyledContainer, { className: className, colSpan: colSpan, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(InputContainer, { children: [_jsx(Input, Object.assign({ ref: ref, value: value, size: size, type: inputType, style: inputStyle }, inputProps, rest)), password ? (_jsx(InputButton, { size: size, onClick: handlePasswordToggle, onMouseDown: (e) => {
+    const inputStyle = Object.assign(Object.assign({}, style), (password || (clearable && value) ? { paddingRight: "36px" } : {}));
+    return (_jsxs(StyledContainer, { className: className, colSpan: colSpan, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(InputContainer, { children: [_jsx(Input, Object.assign({ ref: ref, value: value, size: size, type: inputType, style: inputStyle }, inputProps, rest)), password ? (_jsx(InputButton, { onClick: handlePasswordToggle, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        }, tabIndex: -1, type: "button", children: passwordVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) })) : clearable && value ? (_jsx(InputButton, { size: size, onClick: handleClear, onMouseDown: (e) => {
+                        }, tabIndex: -1, type: "button", children: passwordVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) })) : clearable && value ? (_jsx(InputButton, { onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         }, tabIndex: -1, type: "button", children: _jsx(X, {}) })) : null] })] }));

package/dist/Utilities/parseTimestamp.js

@@ -7,7 +7,6 @@ import moment from "moment";
 // When `timestamp` is empty, segment values fall back to placeholders so the
 // DateInput can still render an editable structure.
 export default function parseTimestamp(timestamp, format, utc = false) {
-    var _a;
     // Supported format tokens and how each token maps to a segment type.
     // `momentType` is used by consumers that need to know which unit the
     // segment represents in Moment's terminology.
@@ -41,7 +40,7 @@ export default function parseTimestamp(timestamp, format, utc = false) {
     // Break the format into ordered parts while keeping separators.
     // Example: "MM/DD/YYYY HH:mm" => ["MM", "/", "DD", "/", "YYYY", " ", "HH", ":", "mm"]
     function splitFormat(format) {
-        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|A|Z)/).filter((s) => s);
+        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|Z)/).filter((s) => s);
     }
     // Convert each format part into a known token descriptor.
     // Unknown parts are treated as literal separators.
@@ -58,19 +57,15 @@ export default function parseTimestamp(timestamp, format, utc = false) {
                 index: -1,
             };
     }
-    const parsedTimestamp = timestamp
-        ? utc === true
-            ? moment.utc(timestamp)
-            : moment(timestamp)
-        : null;
-    const hasValidTimestamp = (_a = parsedTimestamp === null || parsedTimestamp === void 0 ? void 0 : parsedTimestamp.isValid()) !== null && _a !== void 0 ? _a : false;
     // Build the final Segment[] in format order.
     // For date/time tokens, format the timestamp using local or UTC mode.
-    // For separators (or empty/invalid timestamps), use the placeholder as the value.
+    // For separators (or empty timestamp), use the placeholder as the value.
     const segments = splitFormat(format).map((segment, i) => {
         const { pattern, placeholder, type, momentType } = matchSegment(segment);
-        const value = hasValidTimestamp && parsedTimestamp
-            ? parsedTimestamp.format(pattern)
+        const value = timestamp
+            ? utc === true
+                ? moment.utc(timestamp).format(pattern)
+                : moment(timestamp).format(pattern)
             : placeholder;
         return {
             value,

package/dist/core/ArrowButton.d.ts

@@ -1,7 +1,5 @@
-import Size from "./Types/Size";
 interface ArrowButtonProps {
     className?: string;
-    size?: Size;
     [key: string]: React.ButtonHTMLAttributes<HTMLButtonElement> | any;
 }
 declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ArrowButtonProps, never>> & string & Omit<({ className, ...props }: ArrowButtonProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/core/ArrowButton.js

@@ -12,10 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import styled from "styled-components";
-import { DEFAULT_CONTROL_SIZE, getControlSizeTokens } from "./controlSizes";
 const ArrowIcon = styled((_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(ChevronDownIcon, { size: getControlSizeTokens(props.size).iconSize }) })));
+    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(ChevronDownIcon, { size: 16 }) })));
 }) `
   color: ${(props) => props.theme.palette.text.secondary};
   transition: transform 0.2s ease-in-out;
@@ -29,19 +28,16 @@ const ArrowIcon = styled((_a) => {
 `;
 const ArrowButton = styled((_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ArrowIcon, { size: props.size }) })));
+    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ArrowIcon, {}) })));
 }) `
   position: absolute;
   right: 0;
   height: 100%;
-  width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+  padding-inline: 10px;
   background: none;
   border: none;
   cursor: pointer;
   margin: 0;
   outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 `;
 export default ArrowButton;