react-science 0.21.2 → 0.22.0

package/lib/app-data/state/appState.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppStateProvider = exports.useAppSettings = exports.useAppView = exports.useAppData = exports.useAppDispatch = exports.useAppState = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const immer_1 = __importDefault(require("immer"));
+const immer_1 = require("immer");
 const react_1 = require("react");
 const index_1 = require("./data/index");
 const index_2 = require("./producers/index");
@@ -51,7 +48,7 @@ function useAppSettings() {
     return useAppState().settings;
 }
 exports.useAppSettings = useAppSettings;
-const appReducer = (0, immer_1.default)(index_2.appStateProducer);
+const appReducer = (0, immer_1.produce)(index_2.appStateProducer);
 function AppStateProvider(props) {
     const [appState, appDispatch] = (0, react_1.useReducer)(appReducer, null, getEmptyAppState);
     return ((0, jsx_runtime_1.jsx)(appDispatchContext.Provider, { value: appDispatch, children: (0, jsx_runtime_1.jsx)(appStateContext.Provider, { value: appState, children: props.children }) }));

package/lib/components/dropdown-menu/DropdownMenu.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@headlessui/react");
 const react_2 = require("react");
 const useModifiedPopper_1 = require("../hooks/useModifiedPopper");
@@ -17,23 +13,21 @@ const useContextMenuPlacement_1 = require("./useContextMenuPlacement");
 function DropdownMenu(props) {
     const { trigger, ...otherProps } = props;
     if (trigger === 'contextMenu') {
-        return (0, jsx_runtime_1.jsx)(DropdownContextMenu, { ...otherProps });
+        return (0, jsx_runtime_1.jsx)(DropdownContextMenu, { ...props });
     }
     return ((0, jsx_runtime_1.jsx)(DropdownClickMenu, { ...otherProps, children: props.children }));
 }
 exports.DropdownMenu = DropdownMenu;
-const HandleMenuContextDiv = styled_1.default.div `
-  display: contents;
-`;
 function DropdownContextMenu(props) {
-    const { children, onSelect, ...otherProps } = props;
-    const { isPopperElementOpen, closePopperElement, handleContextMenu, setPopperElement, styles, attributes, } = (0, useContextMenuPlacement_1.useContextMenuPlacement)(otherProps.placement || 'right-start');
+    const { children, onSelect, as: Wrapper = 'div', placement = 'right-start', options, ...otherProps } = props;
+    const { isPopperElementOpen, closePopperElement, handleContextMenu, setPopperElement, styles, attributes, } = (0, useContextMenuPlacement_1.useContextMenuPlacement)(placement);
     const ref = (0, react_2.useRef)(null);
     (0, useOnClickOutside_1.useOnClickOutside)(ref, closePopperElement);
-    return ((0, jsx_runtime_1.jsxs)(HandleMenuContextDiv, { onContextMenu: handleContextMenu, children: [isPopperElementOpen && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: (0, jsx_runtime_1.jsx)(react_1.Menu, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { itemsStatic: true, onSelect: (selected) => {
-                                    closePopperElement();
-                                    onSelect(selected);
-                                }, ...otherProps }) }) }) }) })), children] }));
+    const { style = {}, ...otherWrapperProps } = otherProps;
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { style: { ...(!props?.as && { display: 'contents' }), ...style }, ...otherWrapperProps, onContextMenu: handleContextMenu, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPopperElementOpen && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: (0, jsx_runtime_1.jsx)(react_1.Menu, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { itemsStatic: true, onSelect: (selected) => {
+                                        closePopperElement();
+                                        onSelect(selected);
+                                    }, options: options }) }) }) }) })), children] }) }));
 }
 function DropdownClickMenu(props) {
     const { placement = 'bottom-start', onSelect, ...otherProps } = props;

package/lib/components/modal/ConfirmModal.js

@@ -42,7 +42,7 @@ const ConfirmModalFooter = styled_1.default.div `
 `;
 function ConfirmModal(props) {
     const { isOpen, saveText = 'Save', cancelText = 'Cancel', headerColor, maxWidth, onRequestClose, onCancel = onRequestClose, onConfirm, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, } = props;
-    const { ref, onClick } = (0, useDialog_1.useDialog)({
+    const dialogProps = (0, useDialog_1.useDialog)({
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
@@ -51,7 +51,7 @@ function ConfirmModal(props) {
     if (!isOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(ConfirmModalDialog, { ref: ref, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(ConfirmModalContents, { headerColor: headerColor, style: { maxWidth }, children: [(0, jsx_runtime_1.jsx)(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), (0, jsx_runtime_1.jsxs)(ConfirmModalFooter, { children: [(0, jsx_runtime_1.jsx)(__1.Button, { onClick: onConfirm, backgroundColor: {
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(ConfirmModalDialog, { ...dialogProps, children: (0, jsx_runtime_1.jsxs)(ConfirmModalContents, { headerColor: headerColor, style: { maxWidth }, children: [(0, jsx_runtime_1.jsx)(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), (0, jsx_runtime_1.jsxs)(ConfirmModalFooter, { children: [(0, jsx_runtime_1.jsx)(__1.Button, { onClick: onConfirm, backgroundColor: {
                                     basic: 'hsla(243deg, 75%, 58%, 1)',
                                     hover: 'hsla(245deg, 58%, 50%, 1)',
                                 }, color: { basic: 'white' }, children: saveText }), (0, jsx_runtime_1.jsx)(__1.Button, { onClick: onCancel, backgroundColor: {

package/lib/components/modal/Modal.js

@@ -44,7 +44,7 @@ const ModalFooterStyled = styled_1.default.div `
 `;
 function Modal(props) {
     const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, width, maxWidth, height, } = props;
-    const { ref, onClick } = (0, useDialog_1.useDialog)({
+    const dialogProps = (0, useDialog_1.useDialog)({
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
@@ -53,7 +53,7 @@ function Modal(props) {
     if (!isOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(DialogRoot, { ref: ref, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(DialogContents, { style: {
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(DialogRoot, { ...dialogProps, children: (0, jsx_runtime_1.jsxs)(DialogContents, { style: {
                     maxWidth,
                     height: height || 'max-content',
                     width: width || '100%',

package/lib/components/modal/useDialog.js

@@ -2,28 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialog = void 0;
 const react_1 = require("react");
+const react_kbs_1 = require("react-kbs");
 function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }) {
-    const ref = (0, react_1.useRef)(null);
+    (0, react_kbs_1.useKbsDisableGlobal)(isOpen);
+    const dialogRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        function onEsc(event) {
-            event.preventDefault();
-            if (requestCloseOnEsc && onRequestClose) {
-                onRequestClose();
-            }
-        }
-        const dialog = ref.current;
-        if (dialog) {
-            dialog.addEventListener('cancel', onEsc);
-            return () => dialog.removeEventListener('cancel', onEsc);
-        }
-    }, [onRequestClose, requestCloseOnEsc]);
-    (0, react_1.useEffect)(() => {
-        const dialog = ref.current;
+        const dialog = dialogRef.current;
         if (dialog && isOpen) {
             dialog.showModal();
             return () => dialog.close();
         }
     }, [isOpen]);
+    const onCancel = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        if (requestCloseOnEsc && onRequestClose) {
+            onRequestClose();
+        }
+    }, [onRequestClose, requestCloseOnEsc]);
     const onClick = (0, react_1.useCallback)((event) => {
         // Since the dialog has no size of itself, this condition is only
         // `true` when we click on the backdrop.
@@ -31,6 +26,6 @@ function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onReques
             onRequestClose?.();
         }
     }, [requestCloseOnBackdrop, onRequestClose]);
-    return { ref, onClick };
+    return { ref: dialogRef, onClick, onCancel };
 }
 exports.useDialog = useDialog;

package/lib-esm/app-data/state/appState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import produce from 'immer';
+import { produce } from 'immer';
 import { createContext, useContext, useReducer, } from 'react';
 import { getEmptyAppData } from './data/index';
 import { appStateProducer } from './producers/index';

package/lib-esm/app-data/state/appState.js.map

@@ -1 +1 @@
-{"version":3,"file":"appState.js","sourceRoot":"","sources":["../../../src/app-data/state/appState.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,OAAO,CAAC;AAC5B,OAAO,EACL,aAAa,EAGb,UAAU,EACV,UAAU,GACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAAW,eAAe,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAW,MAAM,cAAc,CAAC;AAaxD,SAAS,gBAAgB;IACvB,OAAO;QACL,IAAI,EAAE;YACJ,SAAS,EAAE,KAAK;SACjB;QACD,IAAI,EAAE,eAAe,EAAE;QACvB,IAAI,EAAE,eAAe,EAAE;QACvB,QAAQ,EAAE,mBAAmB,EAAE;KAChC,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,aAAa,CAAkB,IAAI,CAAC,CAAC;AAE7D,MAAM,UAAU,WAAW;IACzB,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC7C,IAAI,CAAC,QAAQ,EAAE;QACb,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAID,MAAM,kBAAkB,GAAG,aAAa,CAAqB,IAAI,CAAC,CAAC;AAEnE,MAAM,UAAU,cAAc;IAC5B,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACnD,IAAI,CAAC,WAAW,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;KAC3E;IACD,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,WAAW,EAAE,CAAC,IAAI,CAAC;AAC5B,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,WAAW,EAAE,CAAC,IAAI,CAAC;AAC5B,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,WAAW,EAAE,CAAC,QAAQ,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAE7C,MAAM,UAAU,gBAAgB,CAAC,KAA8B;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,CACxC,UAAU,EACV,IAAI,EACJ,gBAAgB,CACjB,CAAC;IACF,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC7C,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACtC,KAAK,CAAC,QAAQ,GACU,GACC,CAC/B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"appState.js","sourceRoot":"","sources":["../../../src/app-data/state/appState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EACL,aAAa,EAGb,UAAU,EACV,UAAU,GACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAAW,eAAe,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAW,MAAM,cAAc,CAAC;AAaxD,SAAS,gBAAgB;IACvB,OAAO;QACL,IAAI,EAAE;YACJ,SAAS,EAAE,KAAK;SACjB;QACD,IAAI,EAAE,eAAe,EAAE;QACvB,IAAI,EAAE,eAAe,EAAE;QACvB,QAAQ,EAAE,mBAAmB,EAAE;KAChC,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,aAAa,CAAkB,IAAI,CAAC,CAAC;AAE7D,MAAM,UAAU,WAAW;IACzB,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC7C,IAAI,CAAC,QAAQ,EAAE;QACb,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAID,MAAM,kBAAkB,GAAG,aAAa,CAAqB,IAAI,CAAC,CAAC;AAEnE,MAAM,UAAU,cAAc;IAC5B,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACnD,IAAI,CAAC,WAAW,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;KAC3E;IACD,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,WAAW,EAAE,CAAC,IAAI,CAAC;AAC5B,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,WAAW,EAAE,CAAC,IAAI,CAAC;AAC5B,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,WAAW,EAAE,CAAC,QAAQ,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAE7C,MAAM,UAAU,gBAAgB,CAAC,KAA8B;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,CACxC,UAAU,EACV,IAAI,EACJ,gBAAgB,CACjB,CAAC;IACF,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC7C,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACtC,KAAK,CAAC,QAAQ,GACU,GACC,CAC/B,CAAC;AACJ,CAAC"}

package/lib-esm/components/dropdown-menu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import type { Placement } from '@popperjs/core';
-import { ReactNode } from 'react';
+import { ReactNode, ElementType, ComponentProps } from 'react';
 import { MenuOption, MenuOptions } from './MenuItems';
 interface DropdownMenuBaseProps<T> {
     /**
@@ -9,6 +9,7 @@ interface DropdownMenuBaseProps<T> {
     options: MenuOptions<T>;
     onSelect: (selected: MenuOption<T>) => void;
 }
+type ElementProps<E = unknown> = E extends ElementType ? ComponentProps<E> : never;
 interface DropdownMenuClickProps<T> extends DropdownMenuBaseProps<T> {
     /**
      * Node to be inside the Button
@@ -16,11 +17,12 @@ interface DropdownMenuClickProps<T> extends DropdownMenuBaseProps<T> {
     children: ReactNode;
     trigger: 'click';
 }
-interface DropdownMenuContextProps<T> extends DropdownMenuBaseProps<T> {
+interface DropdownMenuContextProps<T, E> extends DropdownMenuBaseProps<T> {
     trigger: 'contextMenu';
     children: ReactNode;
+    as?: E;
 }
-export type DropdownMenuProps<T> = DropdownMenuContextProps<T> | DropdownMenuClickProps<T>;
-export declare function DropdownMenu<T>(props: DropdownMenuProps<T>): JSX.Element;
+export type DropdownMenuProps<T, E> = DropdownMenuContextProps<T, E> | DropdownMenuClickProps<T>;
+export declare function DropdownMenu<T = unknown, E extends ElementType = 'div'>(props: DropdownMenuProps<T, E> & Omit<ElementProps<E>, keyof DropdownMenuProps<T, E>>): JSX.Element;
 export {};
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/lib-esm/components/dropdown-menu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAO1C,OAAO,EAAa,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGjE,UAAU,qBAAqB,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC7C;AAED,UAAU,sBAAsB,CAAC,CAAC,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IAClE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,wBAAwB,CAAC,CAAC,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACpE,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAC3B,wBAAwB,CAAC,CAAC,CAAC,GAC3B,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAE9B,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,eAU1D"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAU,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvE,OAAO,EAAa,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGjE,UAAU,qBAAqB,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC7C;AAED,KAAK,YAAY,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,SAAS,WAAW,GAClD,cAAc,CAAC,CAAC,CAAC,GACjB,KAAK,CAAC;AAEV,UAAU,sBAAsB,CAAC,CAAC,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IAClE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACvE,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,CAAC,CAAC;CACR;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,IAC9B,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC9B,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAE9B,wBAAgB,YAAY,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,SAAS,WAAW,GAAG,KAAK,EACrE,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAUvD"}

package/lib-esm/components/dropdown-menu/DropdownMenu.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu } from '@headlessui/react';
 import { useRef } from 'react';
 import { useModifiedPopper } from '../hooks/useModifiedPopper';
@@ -11,22 +10,20 @@ import { useContextMenuPlacement } from './useContextMenuPlacement';
 export function DropdownMenu(props) {
     const { trigger, ...otherProps } = props;
     if (trigger === 'contextMenu') {
-        return _jsx(DropdownContextMenu, { ...otherProps });
+        return _jsx(DropdownContextMenu, { ...props });
     }
     return (_jsx(DropdownClickMenu, { ...otherProps, children: props.children }));
 }
-const HandleMenuContextDiv = styled.div `
-  display: contents;
-`;
 function DropdownContextMenu(props) {
-    const { children, onSelect, ...otherProps } = props;
-    const { isPopperElementOpen, closePopperElement, handleContextMenu, setPopperElement, styles, attributes, } = useContextMenuPlacement(otherProps.placement || 'right-start');
+    const { children, onSelect, as: Wrapper = 'div', placement = 'right-start', options, ...otherProps } = props;
+    const { isPopperElementOpen, closePopperElement, handleContextMenu, setPopperElement, styles, attributes, } = useContextMenuPlacement(placement);
     const ref = useRef(null);
     useOnClickOutside(ref, closePopperElement);
-    return (_jsxs(HandleMenuContextDiv, { onContextMenu: handleContextMenu, children: [isPopperElementOpen && (_jsx(Portal, { children: _jsx("div", { ref: ref, children: _jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx(Menu, { children: _jsx(MenuItems, { itemsStatic: true, onSelect: (selected) => {
-                                    closePopperElement();
-                                    onSelect(selected);
-                                }, ...otherProps }) }) }) }) })), children] }));
+    const { style = {}, ...otherWrapperProps } = otherProps;
+    return (_jsx(Wrapper, { style: { ...(!props?.as && { display: 'contents' }), ...style }, ...otherWrapperProps, onContextMenu: handleContextMenu, children: _jsxs(_Fragment, { children: [isPopperElementOpen && (_jsx(Portal, { children: _jsx("div", { ref: ref, children: _jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx(Menu, { children: _jsx(MenuItems, { itemsStatic: true, onSelect: (selected) => {
+                                        closePopperElement();
+                                        onSelect(selected);
+                                    }, options: options }) }) }) }) })), children] }) }));
 }
 function DropdownClickMenu(props) {
     const { placement = 'bottom-start', onSelect, ...otherProps } = props;

package/lib-esm/components/dropdown-menu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../src/components/dropdown-menu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../src/components/dropdown-menu/DropdownMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAa,MAAM,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAA2B,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAkCpE,MAAM,UAAU,YAAY,CAC1B,KACsD;IAEtD,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEzC,IAAI,OAAO,KAAK,aAAa,EAAE;QAC7B,OAAO,KAAC,mBAAmB,OAAW,KAAK,GAAI,CAAC;KACjD;IACD,OAAO,CACL,KAAC,iBAAiB,OAAK,UAAU,YAAG,KAAK,CAAC,QAAQ,GAAqB,CACxE,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAC1B,KACsD;IAEtD,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,GAAG,aAAa,EACzB,OAAO,EACP,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,EACJ,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,EACN,UAAU,GACX,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAEvC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,iBAAiB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IAE3C,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,iBAAiB,EAAE,GAAG,UAA6B,CAAC;IAE3E,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,KAC3D,iBAAiB,EACrB,aAAa,EAAE,iBAAiB,YAEhC,8BACG,mBAAmB,IAAI,CACtB,KAAC,MAAM,cACL,cAAK,GAAG,EAAE,GAAG,YACX,cACE,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,KAChB,UAAU,CAAC,MAAM,YAErB,KAAC,IAAI,cACH,KAAC,SAAS,IACR,WAAW,QACX,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;wCACrB,kBAAkB,EAAE,CAAC;wCACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;oCACrB,CAAC,EACD,OAAO,EAAE,OAAO,GAChB,GACG,GACH,GACF,GACC,CACV,EAEA,QAAQ,IACR,GACK,CACX,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CACxB,KAAyE;IAEzE,MAAM,EAAE,SAAS,GAAG,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEtE,MAAM,CAAC,QAAQ,EAAE,AAAD,EAAG,UAAU,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEzD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAEnC,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,GAC1D,iBAAiB,CAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEjE,OAAO,CACL,MAAC,IAAI,eACH,KAAC,IAAI,CAAC,MAAM,IAAC,GAAG,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,YACnD,KAAK,CAAC,QAAQ,GACH,EACb,QAAQ,IAAI,CACX,KAAC,MAAM,cACL,cAAK,GAAG,EAAE,GAAG,YACX,cAAK,GAAG,EAAE,gBAAgB,KAAM,WAAW,YACzC,KAAC,SAAS,IACR,WAAW,QACX,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;gCACrB,UAAU,EAAE,CAAC;gCACb,QAAQ,CAAC,QAAQ,CAAC,CAAC;4BACrB,CAAC,KACG,UAAU,GACd,GACE,GACF,GACC,CACV,IACI,CACR,CAAC;AACJ,CAAC"}

package/lib-esm/components/modal/ConfirmModal.js

@@ -36,7 +36,7 @@ const ConfirmModalFooter = styled.div `
 `;
 export function ConfirmModal(props) {
     const { isOpen, saveText = 'Save', cancelText = 'Cancel', headerColor, maxWidth, onRequestClose, onCancel = onRequestClose, onConfirm, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, } = props;
-    const { ref, onClick } = useDialog({
+    const dialogProps = useDialog({
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
@@ -45,7 +45,7 @@ export function ConfirmModal(props) {
     if (!isOpen) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(ConfirmModalDialog, { ref: ref, onClick: onClick, children: _jsxs(ConfirmModalContents, { headerColor: headerColor, style: { maxWidth }, children: [_jsx(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), _jsxs(ConfirmModalFooter, { children: [_jsx(Button, { onClick: onConfirm, backgroundColor: {
+    return (_jsx(Portal, { children: _jsx(ConfirmModalDialog, { ...dialogProps, children: _jsxs(ConfirmModalContents, { headerColor: headerColor, style: { maxWidth }, children: [_jsx(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), _jsxs(ConfirmModalFooter, { children: [_jsx(Button, { onClick: onConfirm, backgroundColor: {
                                     basic: 'hsla(243deg, 75%, 58%, 1)',
                                     hover: 'hsla(245deg, 58%, 50%, 1)',
                                 }, color: { basic: 'white' }, children: saveText }), _jsx(Button, { onClick: onCancel, backgroundColor: {

package/lib-esm/components/modal/ConfirmModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgBxC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;CAMvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAErC;;;;;;;;;;2BAUyB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;CAC1D,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAyB;WACzD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;;;CAG1C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMpC,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,QAAQ,EACrB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YAC5C,MAAC,oBAAoB,IAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,aACjE,KAAC,wBAAwB,IAAC,WAAW,EAAE,WAAW,YAC/C,QAAQ,GACgB,EAE3B,MAAC,kBAAkB,eACjB,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE;oCACf,KAAK,EAAE,2BAA2B;oCAClC,KAAK,EAAE,2BAA2B;iCACnC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,GACF,EACT,KAAC,MAAM,IACL,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE;oCACf,KAAK,EAAE,yBAAyB;oCAChC,KAAK,EAAE,yBAAyB;iCACjC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,UAAU,GACJ,IACU,IACA,GACJ,GACd,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgBxC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;CAMvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAErC;;;;;;;;;;2BAUyB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;CAC1D,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAyB;WACzD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;;;CAG1C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMpC,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,QAAQ,EACrB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,SAAS,CAAC;QAC5B,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,kBAAkB,OAAK,WAAW,YACjC,MAAC,oBAAoB,IAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,aACjE,KAAC,wBAAwB,IAAC,WAAW,EAAE,WAAW,YAC/C,QAAQ,GACgB,EAE3B,MAAC,kBAAkB,eACjB,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE;oCACf,KAAK,EAAE,2BAA2B;oCAClC,KAAK,EAAE,2BAA2B;iCACnC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,GACF,EACT,KAAC,MAAM,IACL,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE;oCACf,KAAK,EAAE,yBAAyB;oCAChC,KAAK,EAAE,yBAAyB;iCACjC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,UAAU,GACJ,IACU,IACA,GACJ,GACd,CACV,CAAC;AACJ,CAAC"}

package/lib-esm/components/modal/Modal.js

@@ -38,7 +38,7 @@ const ModalFooterStyled = styled.div `
 `;
 export function Modal(props) {
     const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, width, maxWidth, height, } = props;
-    const { ref, onClick } = useDialog({
+    const dialogProps = useDialog({
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
@@ -47,7 +47,7 @@ export function Modal(props) {
     if (!isOpen) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DialogRoot, { ref: ref, onClick: onClick, children: _jsxs(DialogContents, { style: {
+    return (_jsx(Portal, { children: _jsx(DialogRoot, { ...dialogProps, children: _jsxs(DialogContents, { style: {
                     maxWidth,
                     height: height || 'max-content',
                     width: width || '100%',

package/lib-esm/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAcxC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAShC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,MAAM,EACN,cAAc,EACd,cAAc,GAAG,IAAI,EACrB,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YACpC,MAAC,cAAc,IACb,KAAK,EAAE;oBACL,QAAQ;oBACR,MAAM,EAAE,MAAM,IAAI,aAAa;oBAC/B,KAAK,EAAE,KAAK,IAAI,MAAM;iBACvB,aAEA,QAAQ,EACR,cAAc,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,cAAc,GAAI,IACjD,GACN,GACN,CACV,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,SAAS,SAAS,CAAC,KAA8B;IAC5D,OAAO,KAAC,eAAe,cAAE,KAAK,CAAC,QAAQ,GAAmB,CAAC;AAC7D,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAcxC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAShC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,MAAM,EACN,cAAc,EACd,cAAc,GAAG,IAAI,EACrB,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,SAAS,CAAC;QAC5B,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,UAAU,OAAK,WAAW,YACzB,MAAC,cAAc,IACb,KAAK,EAAE;oBACL,QAAQ;oBACR,MAAM,EAAE,MAAM,IAAI,aAAa;oBAC/B,KAAK,EAAE,KAAK,IAAI,MAAM;iBACvB,aAEA,QAAQ,EACR,cAAc,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,cAAc,GAAI,IACjD,GACN,GACN,CACV,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,SAAS,SAAS,CAAC,KAA8B;IAC5D,OAAO,KAAC,eAAe,cAAE,KAAK,CAAC,QAAQ,GAAmB,CAAC;AAC7D,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC"}

package/lib-esm/components/modal/useDialog.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
+import { MouseEventHandler, ReactEventHandler } from 'react';
 export declare function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }: {
     isOpen: boolean;
     requestCloseOnEsc: boolean;
     requestCloseOnBackdrop: boolean;
     onRequestClose?: () => void;
 }): {
-    ref: React.RefObject<HTMLDialogElement>;
-    onClick: (event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void;
+    ref: import("react").RefObject<HTMLDialogElement>;
+    onClick: MouseEventHandler<HTMLDialogElement>;
+    onCancel: ReactEventHandler<HTMLDialogElement>;
 };
 //# sourceMappingURL=useDialog.d.ts.map

package/lib-esm/components/modal/useDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GACf,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,sBAAsB,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;;qBA0BW,gBAAgB,CAAC,iBAAiB,EAAE,UAAU,CAAC;EAW1D"}
+{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAGf,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GACf,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,sBAAsB,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;;;;EAmCA"}

package/lib-esm/components/modal/useDialog.js

@@ -1,26 +1,21 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, } from 'react';
+import { useKbsDisableGlobal } from 'react-kbs';
 export function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }) {
-    const ref = useRef(null);
+    useKbsDisableGlobal(isOpen);
+    const dialogRef = useRef(null);
     useEffect(() => {
-        function onEsc(event) {
-            event.preventDefault();
-            if (requestCloseOnEsc && onRequestClose) {
-                onRequestClose();
-            }
-        }
-        const dialog = ref.current;
-        if (dialog) {
-            dialog.addEventListener('cancel', onEsc);
-            return () => dialog.removeEventListener('cancel', onEsc);
-        }
-    }, [onRequestClose, requestCloseOnEsc]);
-    useEffect(() => {
-        const dialog = ref.current;
+        const dialog = dialogRef.current;
         if (dialog && isOpen) {
             dialog.showModal();
             return () => dialog.close();
         }
     }, [isOpen]);
+    const onCancel = useCallback((event) => {
+        event.preventDefault();
+        if (requestCloseOnEsc && onRequestClose) {
+            onRequestClose();
+        }
+    }, [onRequestClose, requestCloseOnEsc]);
     const onClick = useCallback((event) => {
         // Since the dialog has no size of itself, this condition is only
         // `true` when we click on the backdrop.
@@ -28,6 +23,6 @@ export function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, o
             onRequestClose?.();
         }
     }, [requestCloseOnBackdrop, onRequestClose]);
-    return { ref, onClick };
+    return { ref: dialogRef, onClick, onCancel };
 }
 //# sourceMappingURL=useDialog.js.map

package/lib-esm/components/modal/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.js","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GAMf;IACC,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,KAAK,CAAC,KAAY;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,iBAAiB,IAAI,cAAc,EAAE;gBACvC,cAAc,EAAE,CAAC;aAClB;QACH,CAAC;QACD,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;QAC3B,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YACzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;SAC1D;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;QAC3B,IAAI,MAAM,IAAI,MAAM,EAAE;YACpB,MAAM,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAsD,EAAE,EAAE;QACzD,iEAAiE;QACjE,wCAAwC;QACxC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,IAAI,sBAAsB,EAAE;YAClE,cAAc,EAAE,EAAE,CAAC;SACpB;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,cAAc,CAAC,CACzC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC;AAC1B,CAAC"}
+{"version":3,"file":"useDialog.js","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,SAAS,EACT,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GAMf;IACC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,MAAM,IAAI,MAAM,EAAE;YACpB,MAAM,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,iBAAiB,IAAI,cAAc,EAAE;YACvC,cAAc,EAAE,CAAC;SAClB;IACH,CAAC,EACD,CAAC,cAAc,EAAE,iBAAiB,CAAC,CACpC,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAK,EAAE,EAAE;QACR,iEAAiE;QACjE,wCAAwC;QACxC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,IAAI,sBAAsB,EAAE;YAClE,cAAc,EAAE,EAAE,CAAC;SACpB;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,cAAc,CAAC,CACzC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;AAC/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.21.2",
+  "version": "0.22.0",
   "description": "React components to build analysis UI",
   "exports": {
     "./app": {
@@ -50,7 +50,7 @@
     "test-only": "vitest run --coverage "
   },
   "volta": {
-    "node": "18.15.0"
+    "node": "18.16.0"
   },
   "overrides": {
     "react": "^18.2.0",
@@ -63,64 +63,64 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@headlessui/react": "^1.7.13",
-    "@lukeed/uuid": "^2.0.0",
-    "@popperjs/core": "^2.11.6",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-table": "^8.8.0",
+    "@headlessui/react": "^1.7.14",
+    "@lukeed/uuid": "^2.0.1",
+    "@popperjs/core": "^2.11.7",
+    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-table": "^8.8.5",
     "biologic-converter": "^0.6.0",
-    "cheminfo-types": "^1.4.0",
+    "cheminfo-types": "^1.7.0",
     "d3-scale-chromatic": "^3.0.0",
-    "filelist-utils": "^1.8.0",
-    "immer": "^9.0.21",
+    "filelist-utils": "^1.8.1",
+    "immer": "^10.0.1",
     "jcampconverter": "^9.1.0",
     "lodash": "^4.17.21",
-    "ml-gsd": "^12.1.2",
+    "ml-gsd": "^12.1.3",
     "ml-peak-shape-generator": "^4.1.2",
-    "ml-signal-processing": "^1.0.2",
-    "ml-spectra-processing": "^12.0.0",
-    "ms-spectrum": "^2.3.0",
+    "ml-signal-processing": "^1.0.3",
+    "ml-spectra-processing": "^12.3.0",
+    "ms-spectrum": "^2.3.1",
     "netcdfjs": "^2.0.2",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.2",
+    "react-error-boundary": "^4.0.4",
     "react-icons": "^4.8.0",
     "react-inspector": "^6.0.1",
     "react-kbs": "^2.1.1",
     "react-plot": "^1.4.2",
     "react-popper": "^2.3.0",
     "react-shadow": "^20.0.0",
-    "spc-parser": "^0.7.1",
+    "spc-parser": "^0.7.2",
     "tinycolor2": "^1.6.0",
     "use-resize-observer": "^9.1.0",
     "wdf-parser": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "@ladle/react": "^2.10.2",
-    "@playwright/experimental-ct-react": "^1.32.0",
-    "@playwright/test": "^1.32.0",
+    "@ladle/react": "^2.12.3",
+    "@playwright/experimental-ct-react": "^1.33.0",
+    "@playwright/test": "^1.33.0",
     "@types/babel__core": "^7.20.0",
     "@types/d3-scale-chromatic": "^3.0.0",
-    "@types/lodash": "^4.14.191",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/lodash": "^4.14.194",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@types/react-inspector": "^4.0.2",
-    "@vitejs/plugin-react": "^3.1.0",
-    "@vitest/coverage-c8": "^0.29.7",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-c8": "^0.30.1",
     "cheminfo-font": "^1.9.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.36.0",
-    "eslint-config-zakodium": "^7.1.0",
-    "prettier": "^2.8.6",
+    "eslint": "^8.39.0",
+    "eslint-config-zakodium": "^7.2.0",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ocl": "^5.0.0",
-    "rimraf": "^4.4.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vitest": "^0.29.7"
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.3",
+    "vitest": "^0.30.1"
   },
   "repository": {
     "type": "git",

package/src/app-data/state/appState.tsx

@@ -1,4 +1,4 @@
-import produce from 'immer';
+import { produce } from 'immer';
 import {
   createContext,
   Dispatch,

package/src/components/dropdown-menu/DropdownMenu.tsx

@@ -1,7 +1,6 @@
-import styled from '@emotion/styled';
 import { Menu } from '@headlessui/react';
 import type { Placement } from '@popperjs/core';
-import { ReactNode, useRef } from 'react';
+import { ReactNode, useRef, ElementType, ComponentProps } from 'react';
 
 import { useModifiedPopper } from '../hooks/useModifiedPopper';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
@@ -21,6 +20,10 @@ interface DropdownMenuBaseProps<T> {
   onSelect: (selected: MenuOption<T>) => void;
 }
 
+type ElementProps<E = unknown> = E extends ElementType
+  ? ComponentProps<E>
+  : never;
+
 interface DropdownMenuClickProps<T> extends DropdownMenuBaseProps<T> {
   /**
    * Node to be inside the Button
@@ -29,33 +32,42 @@ interface DropdownMenuClickProps<T> extends DropdownMenuBaseProps<T> {
   trigger: 'click';
 }
 
-interface DropdownMenuContextProps<T> extends DropdownMenuBaseProps<T> {
+interface DropdownMenuContextProps<T, E> extends DropdownMenuBaseProps<T> {
   trigger: 'contextMenu';
   children: ReactNode;
+  as?: E;
 }
 
-export type DropdownMenuProps<T> =
-  | DropdownMenuContextProps<T>
+export type DropdownMenuProps<T, E> =
+  | DropdownMenuContextProps<T, E>
   | DropdownMenuClickProps<T>;
 
-export function DropdownMenu<T>(props: DropdownMenuProps<T>) {
+export function DropdownMenu<T = unknown, E extends ElementType = 'div'>(
+  props: DropdownMenuProps<T, E> &
+    Omit<ElementProps<E>, keyof DropdownMenuProps<T, E>>,
+) {
   const { trigger, ...otherProps } = props;
 
   if (trigger === 'contextMenu') {
-    return <DropdownContextMenu {...otherProps} />;
+    return <DropdownContextMenu<T, E> {...props} />;
   }
-
   return (
     <DropdownClickMenu {...otherProps}>{props.children}</DropdownClickMenu>
   );
 }
 
-const HandleMenuContextDiv = styled.div`
-  display: contents;
-`;
-
-function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
-  const { children, onSelect, ...otherProps } = props;
+function DropdownContextMenu<T, E extends ElementType = 'div'>(
+  props: Omit<DropdownMenuContextProps<T, E>, 'trigger'> &
+    Omit<ElementProps<E>, keyof DropdownMenuProps<T, E>>,
+) {
+  const {
+    children,
+    onSelect,
+    as: Wrapper = 'div',
+    placement = 'right-start',
+    options,
+    ...otherProps
+  } = props;
 
   const {
     isPopperElementOpen,
@@ -64,43 +76,51 @@ function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
     setPopperElement,
     styles,
     attributes,
-  } = useContextMenuPlacement(otherProps.placement || 'right-start');
+  } = useContextMenuPlacement(placement);
 
   const ref = useRef<HTMLDivElement>(null);
   useOnClickOutside(ref, closePopperElement);
 
+  const { style = {}, ...otherWrapperProps } = otherProps as ElementProps<E>;
+
   return (
-    <HandleMenuContextDiv onContextMenu={handleContextMenu}>
-      {isPopperElementOpen && (
-        <Portal>
-          <div ref={ref}>
-            <div
-              ref={setPopperElement}
-              style={styles.popper}
-              {...attributes.popper}
-            >
-              <Menu>
-                <MenuItems
-                  itemsStatic
-                  onSelect={(selected) => {
-                    closePopperElement();
-                    onSelect(selected);
-                  }}
-                  {...otherProps}
-                />
-              </Menu>
+    <Wrapper
+      style={{ ...(!props?.as && { display: 'contents' }), ...style }}
+      {...otherWrapperProps}
+      onContextMenu={handleContextMenu}
+    >
+      <>
+        {isPopperElementOpen && (
+          <Portal>
+            <div ref={ref}>
+              <div
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <Menu>
+                  <MenuItems
+                    itemsStatic
+                    onSelect={(selected) => {
+                      closePopperElement();
+                      onSelect(selected);
+                    }}
+                    options={options}
+                  />
+                </Menu>
+              </div>
             </div>
-          </div>
-        </Portal>
-      )}
+          </Portal>
+        )}
 
-      {children}
-    </HandleMenuContextDiv>
+        {children}
+      </>
+    </Wrapper>
   );
 }
 
-function DropdownClickMenu<T>(
-  props: Omit<DropdownMenuProps<T>, 'trigger'> & { children: ReactNode },
+function DropdownClickMenu<T, E>(
+  props: Omit<DropdownMenuProps<T, E>, 'trigger'> & { children: ReactNode },
 ) {
   const { placement = 'bottom-start', onSelect, ...otherProps } = props;
 

package/src/components/modal/ConfirmModal.tsx

@@ -72,7 +72,7 @@ export function ConfirmModal(props: ConfirmModalProps) {
     children,
   } = props;
 
-  const { ref, onClick } = useDialog({
+  const dialogProps = useDialog({
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
@@ -85,7 +85,7 @@ export function ConfirmModal(props: ConfirmModalProps) {
 
   return (
     <Portal>
-      <ConfirmModalDialog ref={ref} onClick={onClick}>
+      <ConfirmModalDialog {...dialogProps}>
         <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
           <ConfirmModalChildrenRoot headerColor={headerColor}>
             {children}

package/src/components/modal/Modal.tsx

@@ -69,7 +69,7 @@ export function Modal(props: ModalProps) {
     height,
   } = props;
 
-  const { ref, onClick } = useDialog({
+  const dialogProps = useDialog({
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
@@ -82,7 +82,7 @@ export function Modal(props: ModalProps) {
 
   return (
     <Portal>
-      <DialogRoot ref={ref} onClick={onClick}>
+      <DialogRoot {...dialogProps}>
         <DialogContents
           style={{
             maxWidth,

package/src/components/modal/useDialog.ts

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  MouseEventHandler,
+  ReactEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+import { useKbsDisableGlobal } from 'react-kbs';
 
 export function useDialog({
   isOpen,
@@ -11,32 +18,30 @@ export function useDialog({
   requestCloseOnBackdrop: boolean;
   onRequestClose?: () => void;
 }) {
-  const ref = useRef<HTMLDialogElement>(null);
+  useKbsDisableGlobal(isOpen);
 
-  useEffect(() => {
-    function onEsc(event: Event) {
-      event.preventDefault();
-      if (requestCloseOnEsc && onRequestClose) {
-        onRequestClose();
-      }
-    }
-    const dialog = ref.current;
-    if (dialog) {
-      dialog.addEventListener('cancel', onEsc);
-      return () => dialog.removeEventListener('cancel', onEsc);
-    }
-  }, [onRequestClose, requestCloseOnEsc]);
+  const dialogRef = useRef<HTMLDialogElement>(null);
 
   useEffect(() => {
-    const dialog = ref.current;
+    const dialog = dialogRef.current;
     if (dialog && isOpen) {
       dialog.showModal();
       return () => dialog.close();
     }
   }, [isOpen]);
 
-  const onClick = useCallback(
-    (event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => {
+  const onCancel = useCallback<ReactEventHandler<HTMLDialogElement>>(
+    (event) => {
+      event.preventDefault();
+      if (requestCloseOnEsc && onRequestClose) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose, requestCloseOnEsc],
+  );
+
+  const onClick = useCallback<MouseEventHandler<HTMLDialogElement>>(
+    (event) => {
       // Since the dialog has no size of itself, this condition is only
       // `true` when we click on the backdrop.
       if (event.target === event.currentTarget && requestCloseOnBackdrop) {
@@ -46,5 +51,5 @@ export function useDialog({
     [requestCloseOnBackdrop, onRequestClose],
   );
 
-  return { ref, onClick };
+  return { ref: dialogRef, onClick, onCancel };
 }