react-asc 25.17.1 → 25.18.0

package/index.d.ts

@@ -542,7 +542,7 @@ declare class LoadingIndicatorService implements ILoadingIndicatorService {
 }
 declare const loadingIndicatorService: LoadingIndicatorService;
 
-type MenuPosition = 'right' | 'left';
+type MenuPosition = 'right' | 'left' | 'bottom' | 'top';
 
 interface IMenuProps extends React$1.DetailedHTMLProps<React$1.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     toggle?: ReactElement;

package/index.es.js

@@ -5165,8 +5165,7 @@ styleInject(css_248z$E);
 
 const FormError = (props) => {
     const { className = styles$E.isInvalid, errors = [] } = props;
-    return (jsx(Fragment$2, { children: errors &&
-            jsx("div", { className: className, children: errors.map(e => jsx("div", { children: e.message }, e.validator)) }) }));
+    return (jsx(Fragment$2, { children: errors && (jsx("div", { className: className, children: errors.map(e => (jsx("div", { children: e.message }, e.validator))) })) }));
 };
 
 const FormGroup = (props) => {
@@ -5188,7 +5187,7 @@ const FileInput = (props) => {
     const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false, ...rest } = props;
     const inputFileElement = useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [model, setModel] = useState(value);
+    const [model] = useState(value);
     const [fileList, setFileList] = useState();
     const getCssClasses = () => {
         const cssClasses = [];
@@ -5203,7 +5202,8 @@ const FileInput = (props) => {
     const handleOnDelete = () => {
         alert('coming soon');
     };
-    return (jsxs("div", { className: "d-flex align-items-start", children: [jsx(Button, { className: "flex-wrap", disabled: disabled, onClick: () => inputFileElement.current?.click(), children: children }), jsx("div", { className: "d-flex align-items-center flex-wrap ml-1", children: fileList && Array.from(fileList).map((file) => jsx(Chip, { isDeletable: deletable, onDelete: () => handleOnDelete(), children: file.name }, file.name)) }), jsx("input", { type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model, ...rest })] }));
+    return (jsxs("div", { className: "d-flex align-items-start", children: [jsx(Button, { className: "flex-wrap", disabled: disabled, onClick: () => inputFileElement.current?.click(), children: children }), jsx("div", { className: "d-flex align-items-center flex-wrap ml-1", children: fileList &&
+                    Array.from(fileList).map(file => (jsx(Chip, { isDeletable: deletable, onDelete: () => handleOnDelete(), children: file.name }, file.name))) }), jsx("input", { type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model, ...rest })] }));
 };
 
 var css_248z$D = ".Select-module_selectContainer__DHFDZ {\n  position: relative;\n}\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex;\n  flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n  flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n  cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n  color: #212529;\n  background-color: #fff;\n  border-color: #86b7fe;\n  outline: 0;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n  background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n  cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n  cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n  gap: 10px;\n  flex: 1;\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto;\n}";
@@ -5655,7 +5655,7 @@ const Column = (props) => {
     return (jsx("div", { className: getCssClasses(), ...rest, children: children }));
 };
 
-var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n  flex-shrink: 0;\n  min-width: 0;\n  max-width: 100%;\n}\n\n@media (max-width: 380px) {\n  .Row-module_row__bTIWp {\n    flex-direction: column;\n  }\n}";
+var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n  flex-shrink: 0;\n  min-width: 0;\n  max-width: 100%;\n}";
 var styles$y = {"row":"Row-module_row__bTIWp"};
 styleInject(css_248z$y);
 
@@ -5684,7 +5684,7 @@ const Row = ({ children, direction, className, ...rest }) => {
 };
 
 const DaySelect = (props) => {
-    const { className, day = new Date().getDate(), month = new Date().getMonth(), year = new Date().getFullYear(), disabled, id, name, onChange } = props;
+    const { className, day = new Date().getDate(), month = new Date().getMonth(), year = new Date().getFullYear(), disabled, id, name, onChange, } = props;
     useEffect(() => {
         init();
     }, [month, year]);
@@ -5711,7 +5711,20 @@ const DaySelect = (props) => {
 };
 
 const MonthSelect = (props) => {
-    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const months = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ];
     const { className, value = new Date().getMonth(), id, name, disabled, onChange } = props;
     const [newValue, setNewValue] = useState(value);
     const [monthOptions, setMonthOptions] = useState();
@@ -5826,7 +5839,7 @@ var styles$v = {"expansionPanelContent":"ExpansionPanelContent-module_expansionP
 styleInject(css_248z$v);
 
 const ExpansionPanelContent = ({ children }) => {
-    return (jsx("div", { className: styles$v.expansionPanelContent, children: children }));
+    return jsx("div", { className: styles$v.expansionPanelContent, children: children });
 };
 
 var css_248z$u = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n  cursor: pointer;\n  background-color: var(--highlight);\n}";
@@ -5930,7 +5943,7 @@ const MenuBody = (props) => {
                             },
                         },
                     },
-                ]
+                ],
             });
             setPopperInstance(popperInstance);
         }
@@ -5951,7 +5964,7 @@ const MenuBody = (props) => {
     useOnDestroy(() => {
         popperInstance?.destroy();
     });
-    return (jsxs(Portal$1, { className: 'menu-root', children: [jsx("div", { ref: menuBodyRef, className: getCssClasses(), children: jsx(List, { children: children }) }), jsx(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })] }));
+    return (jsxs(Portal$1, { className: "menu-root", children: [jsx("div", { ref: menuBodyRef, className: getCssClasses(), children: jsx(List, { children: children }) }), jsx(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })] }));
 };
 
 const Menu = (props) => {
@@ -5966,8 +5979,7 @@ const Menu = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return (jsxs("div", { ref: menuContainer, className: getCssClasses(), ...rest, children: [jsx("div", { ref: toggleContainerRef, children: toggle }), open &&
-                jsx(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop, children: children })] }));
+    return (jsxs("div", { ref: menuContainer, className: getCssClasses(), ...rest, children: [jsx("div", { className: "d-inline", ref: toggleContainerRef, children: toggle }), open && (jsx(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop, children: children }))] }));
 };
 
 const MenuItem = (props) => {
@@ -6001,7 +6013,7 @@ var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n
 var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
 styleInject(css_248z$o);
 
-const ModalBody = ({ children }) => (jsx("div", { className: styles$o.modalBody, children: children }));
+const ModalBody = ({ children }) => jsx("div", { className: styles$o.modalBody, children: children });
 
 var css_248z$n = ".ModalFooter-module_modalFooter__SNm-f {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-bottom-right-radius: calc(0.3rem - 1px);\n  border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f.ModalFooter-module_shadow__z29Cy {\n  box-shadow: var(--shadow);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n  margin: 0.25rem;\n}";
 var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f","shadow":"ModalFooter-module_shadow__z29Cy"};
@@ -6576,7 +6588,7 @@ const StepperActions = (props) => {
 
 const StepPanel = (props) => {
     const { children } = props;
-    return (jsx("div", { className: "steppanel", children: children }));
+    return jsx("div", { className: "steppanel", children: children });
 };
 
 var css_248z$a = ".StepConnector-module_stepConnector__A7A-7 {\n  flex: 1 1 auto;\n  flex-shrink: 0;\n  min-width: 20px;\n}\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n  display: block;\n  border-color: var(--secondary);\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n  border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n  border-top-style: solid;\n  border-top-width: 1px;\n}";
@@ -7001,7 +7013,7 @@ var TIMEMODE;
     TIMEMODE[TIMEMODE["MILLISECONDS"] = 3] = "MILLISECONDS";
 })(TIMEMODE || (TIMEMODE = {}));
 const TimeSelect = (props) => {
-    const { className, value = new Date(), disabled, showHours = true, showMinutes = true, showSeconds = false, showMilliSeconds = false, onChange } = props;
+    const { className, value = new Date(), disabled, showHours = true, showMinutes = true, showSeconds = false, showMilliSeconds = false, onChange, } = props;
     const [currDate, setCurrDate] = useState(value);
     const getCssClasses = () => {
         const cssClasses = [];
@@ -7021,11 +7033,7 @@ const TimeSelect = (props) => {
         setCurrDate(newDate);
         onChange && onChange(newDate);
     };
-    return (jsxs(Row, { className: getCssClasses(), children: [showHours &&
-                jsxs(Column, { children: [jsx(FormLabel, { children: "Hours" }), jsx(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.HOUR) })] }), showMinutes &&
-                jsxs(Column, { children: [jsx(FormLabel, { children: "Minutes" }), jsx(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.MINUTE) })] }), showSeconds &&
-                jsxs(Column, { children: [jsx(FormLabel, { children: "Seconds" }), jsx(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.SECONDS) })] }), showMilliSeconds &&
-                jsxs(Column, { children: [jsx(FormLabel, { children: "Milliseconds" }), jsx(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.MILLISECONDS) })] })] }));
+    return (jsxs(Row, { className: getCssClasses(), children: [showHours && (jsxs(Column, { children: [jsx(FormLabel, { children: "Hours" }), jsx(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.HOUR) })] })), showMinutes && (jsxs(Column, { children: [jsx(FormLabel, { children: "Minutes" }), jsx(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.MINUTE) })] })), showSeconds && (jsxs(Column, { children: [jsx(FormLabel, { children: "Seconds" }), jsx(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.SECONDS) })] })), showMilliSeconds && (jsxs(Column, { children: [jsx(FormLabel, { children: "Milliseconds" }), jsx(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: (e) => handleOnChange(e, TIMEMODE.MILLISECONDS) })] }))] }));
 };
 
 var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px;\n}\n.TreeView-module_treeView__VVj-4 ul {\n  padding-left: 48px !important;\n}";

package/index.js

@@ -5167,8 +5167,7 @@ styleInject(css_248z$E);
 
 const FormError = (props) => {
     const { className = styles$E.isInvalid, errors = [] } = props;
-    return (jsxRuntime.jsx(React.Fragment, { children: errors &&
-            jsxRuntime.jsx("div", { className: className, children: errors.map(e => jsxRuntime.jsx("div", { children: e.message }, e.validator)) }) }));
+    return (jsxRuntime.jsx(React.Fragment, { children: errors && (jsxRuntime.jsx("div", { className: className, children: errors.map(e => (jsxRuntime.jsx("div", { children: e.message }, e.validator))) })) }));
 };
 
 const FormGroup = (props) => {
@@ -5190,7 +5189,7 @@ const FileInput = (props) => {
     const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false, ...rest } = props;
     const inputFileElement = React.useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [model, setModel] = React.useState(value);
+    const [model] = React.useState(value);
     const [fileList, setFileList] = React.useState();
     const getCssClasses = () => {
         const cssClasses = [];
@@ -5205,7 +5204,8 @@ const FileInput = (props) => {
     const handleOnDelete = () => {
         alert('coming soon');
     };
-    return (jsxRuntime.jsxs("div", { className: "d-flex align-items-start", children: [jsxRuntime.jsx(Button, { className: "flex-wrap", disabled: disabled, onClick: () => inputFileElement.current?.click(), children: children }), jsxRuntime.jsx("div", { className: "d-flex align-items-center flex-wrap ml-1", children: fileList && Array.from(fileList).map((file) => jsxRuntime.jsx(Chip, { isDeletable: deletable, onDelete: () => handleOnDelete(), children: file.name }, file.name)) }), jsxRuntime.jsx("input", { type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model, ...rest })] }));
+    return (jsxRuntime.jsxs("div", { className: "d-flex align-items-start", children: [jsxRuntime.jsx(Button, { className: "flex-wrap", disabled: disabled, onClick: () => inputFileElement.current?.click(), children: children }), jsxRuntime.jsx("div", { className: "d-flex align-items-center flex-wrap ml-1", children: fileList &&
+                    Array.from(fileList).map(file => (jsxRuntime.jsx(Chip, { isDeletable: deletable, onDelete: () => handleOnDelete(), children: file.name }, file.name))) }), jsxRuntime.jsx("input", { type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model, ...rest })] }));
 };
 
 var css_248z$D = ".Select-module_selectContainer__DHFDZ {\n  position: relative;\n}\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex;\n  flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n  flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n  cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n  color: #212529;\n  background-color: #fff;\n  border-color: #86b7fe;\n  outline: 0;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n  background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n  cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n  cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n  gap: 10px;\n  flex: 1;\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto;\n}";
@@ -5657,7 +5657,7 @@ const Column = (props) => {
     return (jsxRuntime.jsx("div", { className: getCssClasses(), ...rest, children: children }));
 };
 
-var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n  flex-shrink: 0;\n  min-width: 0;\n  max-width: 100%;\n}\n\n@media (max-width: 380px) {\n  .Row-module_row__bTIWp {\n    flex-direction: column;\n  }\n}";
+var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n  flex-shrink: 0;\n  min-width: 0;\n  max-width: 100%;\n}";
 var styles$y = {"row":"Row-module_row__bTIWp"};
 styleInject(css_248z$y);
 
@@ -5686,7 +5686,7 @@ const Row = ({ children, direction, className, ...rest }) => {
 };
 
 const DaySelect = (props) => {
-    const { className, day = new Date().getDate(), month = new Date().getMonth(), year = new Date().getFullYear(), disabled, id, name, onChange } = props;
+    const { className, day = new Date().getDate(), month = new Date().getMonth(), year = new Date().getFullYear(), disabled, id, name, onChange, } = props;
     React.useEffect(() => {
         init();
     }, [month, year]);
@@ -5713,7 +5713,20 @@ const DaySelect = (props) => {
 };
 
 const MonthSelect = (props) => {
-    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const months = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ];
     const { className, value = new Date().getMonth(), id, name, disabled, onChange } = props;
     const [newValue, setNewValue] = React.useState(value);
     const [monthOptions, setMonthOptions] = React.useState();
@@ -5828,7 +5841,7 @@ var styles$v = {"expansionPanelContent":"ExpansionPanelContent-module_expansionP
 styleInject(css_248z$v);
 
 const ExpansionPanelContent = ({ children }) => {
-    return (jsxRuntime.jsx("div", { className: styles$v.expansionPanelContent, children: children }));
+    return jsxRuntime.jsx("div", { className: styles$v.expansionPanelContent, children: children });
 };
 
 var css_248z$u = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n  cursor: pointer;\n  background-color: var(--highlight);\n}";
@@ -5932,7 +5945,7 @@ const MenuBody = (props) => {
                             },
                         },
                     },
-                ]
+                ],
             });
             setPopperInstance(popperInstance);
         }
@@ -5953,7 +5966,7 @@ const MenuBody = (props) => {
     useOnDestroy(() => {
         popperInstance?.destroy();
     });
-    return (jsxRuntime.jsxs(Portal$1, { className: 'menu-root', children: [jsxRuntime.jsx("div", { ref: menuBodyRef, className: getCssClasses(), children: jsxRuntime.jsx(List, { children: children }) }), jsxRuntime.jsx(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })] }));
+    return (jsxRuntime.jsxs(Portal$1, { className: "menu-root", children: [jsxRuntime.jsx("div", { ref: menuBodyRef, className: getCssClasses(), children: jsxRuntime.jsx(List, { children: children }) }), jsxRuntime.jsx(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })] }));
 };
 
 const Menu = (props) => {
@@ -5968,8 +5981,7 @@ const Menu = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return (jsxRuntime.jsxs("div", { ref: menuContainer, className: getCssClasses(), ...rest, children: [jsxRuntime.jsx("div", { ref: toggleContainerRef, children: toggle }), open &&
-                jsxRuntime.jsx(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop, children: children })] }));
+    return (jsxRuntime.jsxs("div", { ref: menuContainer, className: getCssClasses(), ...rest, children: [jsxRuntime.jsx("div", { className: "d-inline", ref: toggleContainerRef, children: toggle }), open && (jsxRuntime.jsx(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop, children: children }))] }));
 };
 
 const MenuItem = (props) => {
@@ -6003,7 +6015,7 @@ var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n
 var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
 styleInject(css_248z$o);
 
-const ModalBody = ({ children }) => (jsxRuntime.jsx("div", { className: styles$o.modalBody, children: children }));
+const ModalBody = ({ children }) => jsxRuntime.jsx("div", { className: styles$o.modalBody, children: children });
 
 var css_248z$n = ".ModalFooter-module_modalFooter__SNm-f {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-bottom-right-radius: calc(0.3rem - 1px);\n  border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f.ModalFooter-module_shadow__z29Cy {\n  box-shadow: var(--shadow);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n  margin: 0.25rem;\n}";
 var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f","shadow":"ModalFooter-module_shadow__z29Cy"};
@@ -6578,7 +6590,7 @@ const StepperActions = (props) => {
 
 const StepPanel = (props) => {
     const { children } = props;
-    return (jsxRuntime.jsx("div", { className: "steppanel", children: children }));
+    return jsxRuntime.jsx("div", { className: "steppanel", children: children });
 };
 
 var css_248z$a = ".StepConnector-module_stepConnector__A7A-7 {\n  flex: 1 1 auto;\n  flex-shrink: 0;\n  min-width: 20px;\n}\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n  display: block;\n  border-color: var(--secondary);\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n  border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n  border-top-style: solid;\n  border-top-width: 1px;\n}";
@@ -7003,7 +7015,7 @@ exports.TIMEMODE = void 0;
     TIMEMODE[TIMEMODE["MILLISECONDS"] = 3] = "MILLISECONDS";
 })(exports.TIMEMODE || (exports.TIMEMODE = {}));
 const TimeSelect = (props) => {
-    const { className, value = new Date(), disabled, showHours = true, showMinutes = true, showSeconds = false, showMilliSeconds = false, onChange } = props;
+    const { className, value = new Date(), disabled, showHours = true, showMinutes = true, showSeconds = false, showMilliSeconds = false, onChange, } = props;
     const [currDate, setCurrDate] = React.useState(value);
     const getCssClasses = () => {
         const cssClasses = [];
@@ -7023,11 +7035,7 @@ const TimeSelect = (props) => {
         setCurrDate(newDate);
         onChange && onChange(newDate);
     };
-    return (jsxRuntime.jsxs(Row, { className: getCssClasses(), children: [showHours &&
-                jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Hours" }), jsxRuntime.jsx(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.HOUR) })] }), showMinutes &&
-                jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Minutes" }), jsxRuntime.jsx(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.MINUTE) })] }), showSeconds &&
-                jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Seconds" }), jsxRuntime.jsx(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.SECONDS) })] }), showMilliSeconds &&
-                jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Milliseconds" }), jsxRuntime.jsx(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) })] })] }));
+    return (jsxRuntime.jsxs(Row, { className: getCssClasses(), children: [showHours && (jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Hours" }), jsxRuntime.jsx(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.HOUR) })] })), showMinutes && (jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Minutes" }), jsxRuntime.jsx(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.MINUTE) })] })), showSeconds && (jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Seconds" }), jsxRuntime.jsx(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.SECONDS) })] })), showMilliSeconds && (jsxRuntime.jsxs(Column, { children: [jsxRuntime.jsx(FormLabel, { children: "Milliseconds" }), jsxRuntime.jsx(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) })] }))] }));
 };
 
 var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px;\n}\n.TreeView-module_treeView__VVj-4 ul {\n  padding-left: 48px !important;\n}";

package/lib/components/Menu/Menu.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import type { MenuPosition } from './menu.types';
 import type { IListItemProps } from '../List';
+import type { MenuPosition } from './menu.types';
 export interface IMenuProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     toggle?: ReactElement;
     open?: boolean;

package/lib/components/Menu/MenuBody.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import type { MenuPosition } from './menu.types';
 import type { IListItemProps } from '../List';
+import type { MenuPosition } from './menu.types';
 export interface IMenuBodyProps {
     children?: ReactElement<IListItemProps> | ReactElement<IListItemProps>[];
     className?: string;

package/lib/components/Menu/menu.types.d.ts

@@ -1 +1 @@
-export type MenuPosition = 'right' | 'left';
+export type MenuPosition = 'right' | 'left' | 'bottom' | 'top';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "25.17.1",
+	"version": "25.18.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/react-asc.scss

@@ -258,6 +258,10 @@
 	display: flex !important;
 }
 
+.d-inline {
+	display: inline !important;
+}
+
 .justify-content-center {
 	justify-content: center !important;
 }