@linzjs/step-ag-grid 17.0.7 → 17.2.0

package/dist/src/react-menu3/components/ControlledMenu.d.ts

@@ -1,6 +1,6 @@
 import { ForwardedRef, MutableRefObject } from "react";
 import { ControlledMenuProps } from "../types";
-export declare const ControlledMenuFr: ({ "aria-label": ariaLabel, className, containerProps, initialMounted, unmountOnClose, transition, transitionTimeout, boundingBoxRef, boundingBoxPadding, reposition, submenuOpenDelay, submenuCloseDelay, skipOpen, viewScroll, portal, theming, onItemClick, onClose, saveButtonRef, closeMenuExclusionClassName, ...restProps }: ControlledMenuProps & {
+export declare const ControlledMenuFr: ({ "aria-label": ariaLabel, className, containerProps, initialMounted, unmountOnClose, transition, transitionTimeout, boundingBoxRef, boundingBoxPadding, reposition, submenuOpenDelay, submenuCloseDelay, skipOpen, viewScroll, portal, theming, onItemClick, onClose, saveButtonRef, ...restProps }: ControlledMenuProps & {
     saveButtonRef?: MutableRefObject<HTMLButtonElement | null> | undefined;
 }, externalRef: ForwardedRef<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element | null;
 export declare const ControlledMenu: import("react").ForwardRefExoticComponent<Omit<ControlledMenuProps & {

package/dist/src/react-menu3/types.d.ts

@@ -397,9 +397,5 @@ export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
      * Event fired when menu is about to close.
      */
     onClose?: EventHandler<MenuCloseEvent>;
-    /**
-     * When clicking outside the menu to close, anything with this class will not cause a close.
-     */
-    closeMenuExclusionClassName?: string;
 }
 export {};

package/dist/step-ag-grid.cjs.js

@@ -1709,7 +1709,7 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
                 }, ref: arrowRef })), jsxRuntime.jsx(MenuListContext.Provider, { value: listContext, children: jsxRuntime.jsx(MenuListItemContext.Provider, { value: itemContext, children: jsxRuntime.jsx(HoverItemContext.Provider, { value: hoverItem, children: children }) }) })] }));
 };
 
-const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps, initialMounted, unmountOnClose, transition, transitionTimeout, boundingBoxRef, boundingBoxPadding, reposition = "auto", submenuOpenDelay = 300, submenuCloseDelay = 150, skipOpen, viewScroll = "initial", portal, theming, onItemClick, onClose, saveButtonRef, closeMenuExclusionClassName, ...restProps }, externalRef) => {
+const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps, initialMounted, unmountOnClose, transition, transitionTimeout, boundingBoxRef, boundingBoxPadding, reposition = "auto", submenuOpenDelay = 300, submenuCloseDelay = 150, skipOpen, viewScroll = "initial", portal, theming, onItemClick, onClose, saveButtonRef, ...restProps }, externalRef) => {
     const containerRef = React.useRef();
     const scrollNodesRef = React.useRef({});
     const { anchorRef, state } = restProps;
@@ -1736,8 +1736,7 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
         reposition,
         viewScroll,
     ]);
-    const isWithinMenu = React.useCallback((target) => hasParentClass("szh-menu--state-open", target) ||
-        (closeMenuExclusionClassName && hasParentClass(closeMenuExclusionClassName, target)), [closeMenuExclusionClassName]);
+    const isWithinMenu = React.useCallback((target) => hasParentClass("szh-menu--state-open", target), []);
     const handleScreenEventForSave = React.useCallback((ev) => {
         if (!isWithinMenu(ev.target)) {
             ev.preventDefault();
@@ -3429,7 +3428,7 @@ const useGridPopoverHook = (props) => {
                     if (event.reason === CloseReason.BLUR)
                         return;
                     triggerSave(event.reason).then();
-                }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, closeMenuExclusionClassName: "ReactModal__Content", children: [saving && ( // This is the overlay that prevents editing when the editor is saving
+                }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, children: [saving && ( // This is the overlay that prevents editing when the editor is saving
                     jsxRuntime.jsx("div", { className: "ComponentLoadingWrapper-saveOverlay" })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, "data-reason": "", onClick: (e) => {
                             let reason = e.currentTarget.getAttribute("data-reason") ?? undefined;
                             if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
@@ -3780,6 +3779,7 @@ const GridFormMultiSelect = (props) => {
     const { selectedRows, data } = useGridPopoverContext();
     const subComponentIsValidRef = React.useRef({});
     const optionsInitialising = React.useRef(false);
+    const firstInputSubComponent = React.useRef(null);
     const [filter, setFilter] = React.useState("");
     const [initialValues, setInitialValues] = React.useState("");
     const [options, setOptions] = React.useState();
@@ -3855,7 +3855,12 @@ const GridFormMultiSelect = (props) => {
     return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormMultiSelect-container", children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, { ...{ headerGroups, options, setOptions, filter, setFilter, triggerSave }, filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder })), headerGroups &&
                     (lodashEs.isEmpty(headerGroups) || !lodashEs.toPairs(headerGroups).some(([_, options]) => !lodashEs.isEmpty(options))) && (jsxRuntime.jsx(MenuItem, { className: "GridMultiSelect-noOptions", disabled: true, children: props.noOptionsMessage ?? "No Options" }, "noOptions")), headerGroups && !lodashEs.isEmpty(headerGroups) && (jsxRuntime.jsx("div", { className: "GridFormMultiSelect-options", children: headers.map((header, index) => {
                         const subOptions = headerGroups[`${header.filter}`];
-                        return (!lodashEs.isEmpty(subOptions) && (jsxRuntime.jsxs(React.Fragment, { children: [header.header && jsxRuntime.jsx(MenuHeader, { children: header.header }), subOptions.map((item, index) => item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, `div_${index}`)) : (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions }), item.checked && item.subComponent && (jsxRuntime.jsx(MenuSubComponent, { ...{ item, options, setOptions, data, triggerSave }, subComponentIsValid: subComponentIsValidRef.current }))] }, `val_${item.value}`)))] }, `group_${index}`)));
+                        return (!lodashEs.isEmpty(subOptions) && (jsxRuntime.jsxs(React.Fragment, { children: [header.header && jsxRuntime.jsx(MenuHeader, { children: header.header }), subOptions.map((item, index) => item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, `div_${index}`)) : (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions, onChecked: () => {
+                                                // Default to focus on first input in subComponent
+                                                lodashEs.defer(() => {
+                                                    firstInputSubComponent.current?.focus();
+                                                });
+                                            } }), item.checked && item.subComponent && (jsxRuntime.jsx(MenuSubComponent, { ...{ item, options, setOptions, data, triggerSave }, ref: firstInputSubComponent, subComponentIsValid: subComponentIsValidRef.current }))] }, `val_${item.value}`)))] }, `group_${index}`)));
                     }) }))] })) }));
 };
 const FilterInput = (props) => {
@@ -3944,6 +3949,7 @@ const MenuRadioItem = (props) => {
                 e.keepOpen = true;
                 toggleValue(item);
             }
+            item.checked && props.onChecked && props.onChecked();
         }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: item.checked ?? false, value: `${item.value}`, label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.warning && jsxRuntime.jsx(GridIcon, { icon: "ic_warning_outline", title: item.warning }), item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)] }), inputProps: {
                 onClick: (e) => {
                     // Click is handled by MenuItem onClick
@@ -3954,9 +3960,22 @@ const MenuRadioItem = (props) => {
                 /*Do nothing, change handled by menuItem*/
             } }) }));
 };
-const MenuSubComponent = (props) => {
+const MenuSubComponent = React.forwardRef(MenuSubComponentFr);
+function MenuSubComponentFr(props, ref) {
     const { data, item, options, setOptions, subComponentIsValid, triggerSave } = props;
-    return (jsxRuntime.jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
+    const focusableRef = React.useRef(null);
+    React.useEffect(() => {
+        if (focusableRef.current) {
+            const firstInputElement = focusableRef.current.querySelectorAll("input")[0] ?? null;
+            if (typeof ref === "function") {
+                ref(firstInputElement);
+            }
+            else if (ref) {
+                ref.current = firstInputElement;
+            }
+        }
+    }, [ref]);
+    return (jsxRuntime.jsx(FocusableItem, { className: "LuiDeprecatedForms", ref: focusableRef, children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
                 context: { options },
                 data,
                 value: item.subValue,
@@ -3969,7 +3988,7 @@ const MenuSubComponent = (props) => {
                 },
                 triggerSave,
             }, children: jsxRuntime.jsx("div", { className: "subComponent", children: item.subComponent && jsxRuntime.jsx(item.subComponent, {}) }) })) }, `${item.value}_subcomponent`));
-};
+}
 
 const GridFormMultiSelectGrid = (props) => {
     const { selectedRows } = useGridPopoverContext();