@monolith-forensics/monolith-ui 1.3.28 → 1.3.30

package/dist/SelectBox/SelectBox.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Input, FieldLabel, Tooltip, Loader } from "..";
@@ -9,6 +9,12 @@ import { DEFAULT_DROPDOWN_HEIGHT, DROPDOWN_OFFSET, getEmptyMessage, KEYBOARD_KEY
 import { StyledInputContainer, StyledInnerItemContainer, EmptyComponent, GroupTitle, ActionMenu, StyledItem, StyledContainer, } from "./select-box.styled-components";
 // Re-export for backward compatibility
 export { StyledInputContainer };
+const StyledInput = styled(Input) `
+  &[disabled] {
+    opacity: 1;
+    pointer-events: none;
+  }
+`;
 export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
 DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
     var _a, _b, _c, _d, _e, _f;
@@ -193,6 +199,8 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
     }, [onChange]);
     const handleKeyDown = (e) => {
         var _a;
+        if (disabled)
+            return;
         // Escape key
         if (e.key === KEYBOARD_KEYS.ESCAPE) {
             const reference = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
@@ -353,7 +361,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
     // ============================================================================
     // Render
     // ============================================================================
-    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), renderActionButton()] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
+    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: disabled ? -1 : 0, children: [_jsx(StyledInput, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, disabled: disabled, tabIndex: disabled ? -1 : 0, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), renderActionButton()] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
                         containerRef.current = ref;
                         refs.setFloating(ref);
                     }, style: floatingStyles, className: "mfFloating", children: _jsxs(StyledContent, Object.assign({ className: "mfFloatingContent", style: {

package/package.json

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