@monolith-forensics/monolith-ui 1.1.67 → 1.1.68

package/dist/SelectBox/types.d.ts

@@ -11,12 +11,8 @@ export interface SelectBoxProps {
     data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;
-    onChange?: (value: any, item: any) => void;
-    onSearch?: (value: string) => void;
-    searchFn?: (value: string) => void;
-    onScroll?: (e: any) => void;
     loading?: boolean;
-    onItemAdded?: (item: any) => void;
+    grouped?: boolean;
     size?: Size;
     variant?: Variant;
     width?: string | number | null;
@@ -28,14 +24,18 @@ export interface SelectBoxProps {
     required?: boolean;
     error?: string;
     openOnFocus?: boolean;
-    renderOption?: (item: Option | string) => React.ReactNode;
     actionComponent?: JSX.Element;
     focused?: boolean;
-    grouped?: boolean;
-    OptionTooltip?: React.FC<{
-        data: any;
-    }>;
     DropDownProps?: any;
     debounceTime?: number;
     sort?: boolean;
+    renderOption?: (item: Option | string) => React.ReactNode;
+    OptionTooltip?: (props: {
+        data: any;
+    }) => JSX.Element;
+    onChange?: (value: any, item: any) => void;
+    onScroll?: (e: any) => void;
+    onSearch?: (value: string) => void;
+    searchFn?: (value: string) => void;
+    onItemAdded?: (item: any) => void;
 }

package/dist/TagBox/TagBox.d.ts

@@ -1,39 +1,3 @@
-import { ReactNode } from "react";
-import { Variant, Size } from "../core";
-type Option = {
-    label: string;
-    value: any;
-    group?: string;
-    data?: any;
-};
-interface TagBoxProps {
-    className?: string;
-    data?: Option[] | string[];
-    placeholder?: string;
-    arrow?: boolean;
-    defaultValue?: Option[];
-    grouped?: boolean;
-    searchFn?: (value: string) => void;
-    onChange?: (value: any[]) => void;
-    onScroll?: () => void;
-    onSearch?: (value: string) => void;
-    onItemAdded?: (value: any) => void;
-    size?: Size;
-    variant?: Variant;
-    width?: string;
-    allowCustomValue?: boolean;
-    searchable?: boolean;
-    clearable?: boolean;
-    openOnFocus?: boolean;
-    label?: string;
-    description?: string;
-    required?: boolean;
-    error?: string;
-    loading?: boolean;
-    renderOption?: (item: Option | string) => ReactNode;
-    TooltipContent?: (props: {
-        data: any;
-    }) => JSX.Element;
-}
-declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, renderOption, TooltipContent, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+import { TagBoxProps } from "./types";
+declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TagBox;

package/dist/TagBox/TagBox.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import styled from "styled-components";
 import { useFloating, flip, offset, autoUpdate } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Input, Tooltip, FieldLabel, Pill } from "..";
+import { Input, Tooltip, FieldLabel, Pill, Loader } from "..";
 import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
 const StyledInputContainer = styled.div `
   position: relative;
@@ -284,7 +284,15 @@ const StyledItem = styled.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 `;
-const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], 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, renderOption, TooltipContent, }) => {
+const EmptyComponent = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  font-size: 1 rem;
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], 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, renderOption, OptionTooltip, }) => {
     var _a, _b, _c, _d, _e, _f;
     const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
     const [isOpen, setIsOpen] = useState(false);
@@ -312,8 +320,12 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
             const bValue = b.group;
             return aValue.localeCompare(bValue);
         }
-        // return current sort order
-        return 0;
+        if (!sort)
+            return 0;
+        // Secondary sort by label/value to ensure consistent ordering
+        const aLabel = isObjectArray ? a.label : a;
+        const bLabel = isObjectArray ? b.label : b;
+        return aLabel.localeCompare(bLabel);
     });
     const groupedItems = grouped
         ? filteredItems.reduce((acc, item) => {
@@ -560,27 +572,27 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                             e.preventDefault();
                             e.stopPropagation();
                             toggleOpen();
-                        } })) : null] }), isOpen && (_jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsx(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: !loading && grouped
-                        ? groups.map((group) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                    return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                handleItemClick(item);
-                                            }, "data-highlighted": isObjectArray
-                                                ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
-                                                    item.value
-                                                : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
-                                })] }, group.label)))
-                        : filteredItems.map((item, index) => {
-                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        handleItemClick(item);
-                                    }, "data-highlighted": isObjectArray
-                                        ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
-                                            item.value
-                                        : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
-                        }) }) }))] }));
+                        } })) : null] }), isOpen && (_jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsxs(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: [loading && _jsx(Loader, {}), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && 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": isObjectArray
+                                                    ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                                        item.value
+                                                    : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, 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": isObjectArray
+                                            ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                                item.value
+                                            : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                            })] }) }))] }));
 }) `
   position: relative;
   cursor: pointer;

package/dist/TagBox/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./TagBox";
+export type { TagBoxProps, Option as TagboxOption } from "./types";

package/dist/TagBox/types.d.ts

@@ -0,0 +1,40 @@
+import { Size, Variant } from "../core";
+export type Option = {
+    label: string;
+    value: any;
+    group?: string;
+    data?: any;
+};
+export interface TagBoxProps {
+    className?: string;
+    defaultValue?: Option[];
+    data?: Option[] | string[];
+    placeholder?: string;
+    arrow?: boolean;
+    loading?: boolean;
+    grouped?: boolean;
+    size?: Size;
+    variant?: Variant;
+    width?: string | number | null;
+    allowCustomValue?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    error?: string;
+    openOnFocus?: boolean;
+    focused?: boolean;
+    DropDownProps?: any;
+    debounceTime?: number;
+    sort?: boolean;
+    renderOption?: (item: Option | string) => React.ReactNode;
+    OptionTooltip?: (props: {
+        data: any;
+    }) => JSX.Element;
+    onChange?: (value: any[]) => void;
+    onScroll?: () => void;
+    onSearch?: (value: string) => void;
+    searchFn?: (value: string) => void;
+    onItemAdded?: (value: any) => void;
+}

package/dist/TagBox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
 export { default as TagBox } from "./TagBox";
+export type { TagBoxProps, TagboxOption } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";
 export { default as Modal } from "./Modal";
 export { default as Flyout } from "./Flyout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.67",
+  "version": "1.1.68",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",