@hexure/ui 1.13.15 → 1.13.17

package/dist/esm/index.js

@@ -736,14 +736,11 @@ const MoreMenu = (_a) => {
 };
 
 const MenuWrapper = styled.div `
-  position: relative;
+  position: relative; // Ensure this is relative
   display: inline-block;
 `;
 const StyledMoreMenu = styled(MoreMenu) `
-  position: fixed;
-  top: ${props => props.$top};
-  left: ${props => props.$left};
-  position: fixed;
+  position: absolute; // Changed from fixed to absolute
   top: ${props => props.$top};
   left: ${props => props.$left};
   width: ${props => props.$menuWidth};
@@ -776,44 +773,44 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
         if (showMenu && menuWrapperRef.current) {
             const wrapperRect = menuWrapperRef.current.getBoundingClientRect();
             const menuWidthInt = parseInt(menuWidth, 10);
-            let top = wrapperRect.top;
-            let left = wrapperRect.left;
+            let top = 0;
+            let left = 0;
             switch (position) {
                 case 'top':
-                    top = wrapperRect.top - 142; // Menu above the wrapper
-                    left = wrapperRect.left;
+                    top = -142; // Menu above the wrapper
+                    left = 0;
                     break;
                 case 'bottom':
-                    top = wrapperRect.bottom; // Menu below the wrapper
-                    left = wrapperRect.left;
+                    top = wrapperRect.height; // Menu below the wrapper
+                    left = 0;
                     break;
                 case 'left':
-                    top = wrapperRect.top;
-                    left = wrapperRect.left - menuWidthInt; // Menu to the left of the wrapper
+                    top = 0;
+                    left = -menuWidthInt; // Menu to the left of the wrapper
                     break;
                 case 'right':
-                    top = wrapperRect.top;
-                    left = wrapperRect.right; // Menu to the right of the wrapper
+                    top = 0;
+                    left = wrapperRect.width; // Menu to the right of the wrapper
                     break;
                 case 'bottomLeft':
-                    top = wrapperRect.bottom;
-                    left = wrapperRect.right - menuWidthInt;
+                    top = wrapperRect.height;
+                    left = wrapperRect.width - menuWidthInt;
                     break;
                 case 'bottomRight':
-                    top = wrapperRect.bottom;
-                    left = wrapperRect.left;
+                    top = wrapperRect.height;
+                    left = 0;
                     break;
                 case 'topRight':
-                    top = wrapperRect.top - 142;
-                    left = wrapperRect.right - 24;
+                    top = -142;
+                    left = wrapperRect.width - 24;
                     break;
                 case 'topLeft':
-                    top = wrapperRect.top - 142;
-                    left = wrapperRect.left - 188;
+                    top = -142;
+                    left = -188;
                     break;
                 default:
-                    top = wrapperRect.bottom;
-                    left = wrapperRect.left;
+                    top = wrapperRect.height;
+                    left = 0;
                     break;
             }
             setMenuPosition({ top: `${top}px`, left: `${left}px` });
@@ -1072,38 +1069,36 @@ const SearchInput$1 = styled.input `
   white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder, readOnly, invalid, searchable = false, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
     const [searchTerm, setSearchTerm] = useState('');
+    const [value, setValue] = useState(propValue || '');
+    // Update the value when the prop changes
+    useEffect(() => {
+        setValue(propValue || '');
+    }, [propValue]);
     const handleSearch = (event) => {
         setSearchTerm(event.target.value);
     };
-    const filteredOptions = options === null || options === void 0 ? void 0 : options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); });
-    const filteredOptionGroups = optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })));
+    const handleChange = (event) => {
+        setValue(event.target.value);
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    const filteredOptions = searchable
+        ? options === null || options === void 0 ? void 0 : options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); })
+        : options;
+    const filteredOptionGroups = searchable
+        ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
+        : optionGroups;
     return (React.createElement(Wrapper$a, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
-        searchable && (React.createElement(SearchInput$1, Object.assign({ onChange: handleSearch, placeholder: '--Select-One-', type: 'text', value: searchTerm }, accessibleProps))),
-        searchable ? (React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
-            placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
+        searchable && (React.createElement(SearchInput$1, Object.assign({ onChange: handleSearch, placeholder: placeholder, type: 'text', value: searchTerm }, accessibleProps))),
+        React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: handleChange, placeholder: placeholder, value: value }, accessibleProps),
+            placeholder && !value && (React.createElement("option", { disabled: true, value: '' }, placeholder)),
             filteredOptionGroups &&
-                filteredOptionGroups.map((group, i) => {
-                    return (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => {
-                        return (option.label && (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)));
-                    })));
-                }),
+                filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))))),
             filteredOptions &&
-                filteredOptions.map((option, i) => {
-                    return (option.label && (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)));
-                }))) : (React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
-            placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
-            optionGroups &&
-                optionGroups.map((group, i) => {
-                    return (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => {
-                        return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
-                    })));
-                }),
-            options &&
-                options.map((option, i) => {
-                    return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
-                }))),
+                filteredOptions.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
         React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
 };
 
@@ -1738,7 +1733,7 @@ const SuggestedValues = styled.div `
   position: absolute;
   right: -1px;
   top: 39px;
-  z-index: 10;
+  z-index: 9999;
   max-height: 220px;
   overflow: auto;
 `;
@@ -2075,8 +2070,11 @@ const ButtonBar = styled.div `
   justify-self: flex-end;
   box-sizing: border-box;
 `;
+const ButtonContainer = styled.div `
+  margin: 0 10px;
+`;
 const Modal = (_a) => {
-    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
+    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
     useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -2096,15 +2094,24 @@ const Modal = (_a) => {
                     React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiClose, size: '24px' }))),
             steps ? React.createElement(ProgressBar, { steps: steps }) : null,
             React.createElement(ContentWrapper, null, children),
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
-                tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
+            primaryButton || secondaryButton || tertiaryButton || quarternaryButton ? (React.createElement(ButtonBar, null,
+                tertiaryButton || quarternaryButton ? (React.createElement("div", { style: {
+                        marginRight: 'auto',
+                        paddingRight: 40,
+                        display: 'flex',
+                        alignItems: 'center',
+                    } },
+                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
+                    quarternaryButton ? (React.createElement(ButtonContainer, null,
+                        React.createElement(Button, Object.assign({}, quarternaryButton, { format: quarternaryButton.format || 'secondary' })))) : null)) : null,
                 primaryButton || secondaryButton ? (React.createElement("div", { style: {
                         marginLeft: 'auto',
                         paddingLeft: 40,
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
+                    secondaryButton ? (React.createElement(ButtonContainer, null,
+                        React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' })))) : null,
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
 };