@alma-oss/spirit-web-react 4.2.1 → 4.3.0

package/components/Drawer/Drawer.cjs

@@ -160,8 +160,11 @@ const htmlReactParser = (html) => {
     return domToReact(htmlToDOM(html));
 };
 
+function hasSpiritComponent(elementTag) {
+    return typeof elementTag !== 'string' && elementTag !== null && 'spiritComponent' in elementTag;
+}
 function mergeStyleProps(ElementTag, styleProps) {
-    const isSpiritComponent = typeof ElementTag !== 'string' && !!(ElementTag === null || ElementTag === void 0 ? void 0 : ElementTag.spiritComponent);
+    const isSpiritComponent = hasSpiritComponent(ElementTag);
     const isNonNullableObject = (styleProp) => typeof styleProp === 'object' && styleProp !== null;
     const extractClassNames = (styleProp) => {
         if (typeof styleProp === 'string') {
@@ -253,8 +256,10 @@ const processProperties = (utilityKey, utilityName, propValue, prefix) => {
 };
 const isStylePropProcessable = (styleProps, stylePropKey, stylePropValue, options = { includesKey: true }) => {
     const isStylePropKeyIncluded = isKeyIncluded(styleProps, stylePropKey);
-    const isProcessable = (options.includesKey ? isStylePropKeyIncluded : !isStylePropKeyIncluded) && !isEmpty(stylePropValue);
-    return isProcessable;
+    if (options.includesKey) {
+        return isStylePropKeyIncluded && !isEmpty(stylePropValue);
+    }
+    return !isStylePropKeyIncluded;
 };
 const useStyleUtilities = (props, prefix = '', additionalProps = {}) => {
     const styleProps = Object.assign(Object.assign(Object.assign(Object.assign({}, SpacingStyleProp), DisplayStyleProps), ThemeStyleProps), additionalProps);
@@ -451,6 +456,63 @@ const useDeprecationMessage = ({ method = 'component', trigger, componentName, c
     }, []);
 };
 
+const defaultLabels = {
+    common: {
+        close: 'Close',
+        edit: 'Edit',
+        remove: 'Remove',
+    },
+    breadcrumbs: {
+        back: 'Go back',
+    },
+    fileUploader: {
+        edit: 'Edit',
+        remove: 'Remove',
+        attachments: 'Attachments',
+    },
+    pagination: {
+        next: 'Next',
+        previous: 'Previous',
+        goToPage: 'Go to page',
+    },
+    textField: {
+        password: {
+            show: 'Show password',
+            hide: 'Hide password',
+        },
+    },
+    splitButton: {
+        dropdown: 'More',
+    },
+};
+
+const replaceTranslationParams = (translation, params) => Object.entries(params).reduce((result, [paramKey, value]) => {
+    const safeParamKey = paramKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return result.replace(new RegExp(`\\{${safeParamKey}\\}`, 'g'), String(value));
+}, translation);
+
+const resolveTranslationKey = (obj, path) => {
+    const keys = path.split('.');
+    let current = obj;
+    for (const key of keys) {
+        if (typeof current === 'object' && current !== null && key in current) {
+            current = current[key];
+        }
+        else {
+            return path;
+        }
+    }
+    return typeof current === 'string' ? current : path;
+};
+
+const useI18n = () => {
+    const t = (key, params) => {
+        const translation = resolveTranslationKey(defaultLabels, key);
+        return !params ? translation : replaceTranslationParams(translation, params);
+    };
+    return { t };
+};
+
 const defaultContext$1 = undefined;
 const IconsContext = React.createContext(defaultContext$1);
 IconsContext.Provider;
@@ -540,13 +602,31 @@ function useSymmetry(componentClass, isSymmetrical) {
     };
 }
 
+const TRANSITION_FALLBACK_TIMEOUT = 300;
+
 const useDialog = (ref, isOpen) => {
+    const closeTimeoutRef = React.useRef(null);
+    const clearCloseTimeout = React.useCallback(() => {
+        if (closeTimeoutRef.current !== null) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const scheduleDialogClose = React.useCallback((dialogNode) => {
+        clearCloseTimeout();
+        closeTimeoutRef.current = setTimeout(() => {
+            if (dialogNode.open && dialogNode.close) {
+                dialogNode.close();
+            }
+        }, TRANSITION_FALLBACK_TIMEOUT);
+    }, [clearCloseTimeout]);
     const handleTransitionEnd = React.useCallback((event) => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
         if (dialogNode && event.target === dialogNode && !isOpen && dialogNode.open && dialogNode.close) {
+            clearCloseTimeout();
             dialogNode.close();
         }
-    }, [isOpen, ref]);
+    }, [isOpen, ref, clearCloseTimeout]);
     useScrollControl(ref, isOpen);
     const setOpenClass = React.useCallback((shouldAdd) => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
@@ -562,25 +642,37 @@ const useDialog = (ref, isOpen) => {
     React.useEffect(() => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
         if (dialogNode) {
-            if (isOpen && !dialogNode.open && dialogNode.showModal) {
-                dialogNode.showModal();
-                setOpenClass(true);
+            if (isOpen) {
+                clearCloseTimeout();
+                if (!dialogNode.open && dialogNode.showModal) {
+                    dialogNode.showModal();
+                    setOpenClass(true);
+                }
             }
             else if (!isOpen && dialogNode.open) {
                 setOpenClass(false);
+                scheduleDialogClose(dialogNode);
             }
         }
-    }, [isOpen, ref, setOpenClass]);
+        return () => {
+            clearCloseTimeout();
+        };
+    }, [isOpen, ref, setOpenClass, clearCloseTimeout, scheduleDialogClose]);
     const openDialog = () => {
-        if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.open) {
-            ref.current.showModal();
-            setOpenClass(true);
+        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (dialogNode) {
+            clearCloseTimeout();
+            if (!dialogNode.open && dialogNode.showModal) {
+                dialogNode.showModal();
+                setOpenClass(true);
+            }
         }
     };
     const closeDialog = () => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
         if (dialogNode && dialogNode.open) {
             setOpenClass(false);
+            scheduleDialogClose(dialogNode);
         }
     };
     return {
@@ -601,7 +693,7 @@ var __rest$c = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const Dialog = (props, ref) => {
+const _Dialog = (props, ref) => {
     const { children, isOpen, onClose, closeOnBackdropClick = true, closeOnEscapeKeyDown } = props, restProps = __rest$c(props, ["children", "isOpen", "onClose", "closeOnBackdropClick", "closeOnEscapeKeyDown"]);
     const dialogElementRef = React.useRef(ref);
     const contentElementRef = React.useRef(null);
@@ -624,10 +716,10 @@ const Dialog = (props, ref) => {
         },
     })));
 };
+const Dialog = React.forwardRef(_Dialog);
 Dialog.spiritComponent = 'Dialog';
-var Dialog$1 = React.forwardRef(Dialog);
+Dialog.displayName = 'Dialog';
 
-const DRAWER_CLOSE_BUTTON_LABEL_DEFAULT = 'Close';
 const DRAWER_ALIGNMENT_DEFAULT = AlignmentX.RIGHT;
 
 const defaultContext = {
@@ -685,7 +777,7 @@ const Drawer = (props) => {
     };
     useLastActiveFocus(isOpen);
     return (React.createElement(DrawerProvider, { value: contextValue },
-        React.createElement(Dialog$1, Object.assign({}, otherProps, styleProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.root, styleProps.className) }), children)));
+        React.createElement(Dialog, Object.assign({}, otherProps, styleProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.root, styleProps.className) }), children)));
 };
 Drawer.spiritComponent = 'Drawer';
 
@@ -827,6 +919,7 @@ const _Icon = (props, ref) => {
 };
 const Icon = React.forwardRef(_Icon);
 Icon.spiritComponent = 'Icon';
+Icon.displayName = 'Icon';
 
 var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -882,17 +975,19 @@ const defaultProps$2 = {
 const _Button = (props, ref) => {
     const propsWithContext = usePropsContext();
     const propsWithDefaults = Object.assign(Object.assign(Object.assign({}, defaultProps$2), props), propsWithContext);
-    const { elementType: ElementTag = defaultProps$2.elementType, children } = propsWithDefaults, restProps = __rest$6(propsWithDefaults, ["elementType", "children"]);
+    const { elementType = defaultProps$2.elementType, children } = propsWithDefaults, restProps = __rest$6(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { buttonProps } = useButtonProps(restProps);
     const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, buttonProps, { ref: ref }, mergedStyleProps),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, buttonProps, { ref: ref }, mergedStyleProps),
         children,
         restProps.isLoading && React.createElement(Spinner, null)));
 };
 const Button = React.forwardRef(_Button);
 Button.spiritComponent = 'Button';
+Button.displayName = 'Button';
 
 const useButtonLinkProps = (props) => {
     const { elementType, isDisabled, isLoading, onClick, href, target, rel } = props;
@@ -972,17 +1067,19 @@ const defaultProps$1 = {
 };
 const _ButtonLink = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$1), props);
-    const { elementType: ElementTag = defaultProps$1.elementType, children } = propsWithDefaults, restProps = __rest$4(propsWithDefaults, ["elementType", "children"]);
+    const { elementType = defaultProps$1.elementType, children } = propsWithDefaults, restProps = __rest$4(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { buttonLinkProps } = useButtonLinkProps(propsWithDefaults);
     const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, buttonLinkProps, mergedStyleProps, { ref: ref }),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, buttonLinkProps, mergedStyleProps, { ref: ref }),
         children,
         restProps.isLoading && React.createElement(Spinner, null)));
 };
 const ButtonLink = React.forwardRef(_ButtonLink);
 ButtonLink.spiritComponent = 'ButtonLink';
+ButtonLink.displayName = 'ButtonLink';
 
 var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1038,18 +1135,19 @@ var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
 const defaultProps = {
     color: ComponentButtonColors.TERTIARY,
     iconBoxSize: DEFAULT_BOX_SIZE,
-    label: DRAWER_CLOSE_BUTTON_LABEL_DEFAULT,
     size: Sizes.MEDIUM,
 };
 const DrawerCloseButton = (props) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
     const { color, iconBoxSize, label, size } = propsWithDefaults, restProps = __rest$1(propsWithDefaults, ["color", "iconBoxSize", "label", "size"]);
+    const { t } = useI18n();
+    const closeLabel = label !== null && label !== void 0 ? label : t('common.close');
     const { id, isOpen, onClose } = useDrawerContext();
     const { classProps } = useDrawerStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement(Button, Object.assign({}, otherProps, { "aria-expanded": isOpen, "aria-controls": id, onClick: onClose, color: color, size: size, UNSAFE_className: classNames(classProps.closeButton, styleProps.className), UNSAFE_style: styleProps.style, isSymmetrical: true }),
         React.createElement(Icon, { name: "close", boxSize: iconBoxSize }),
-        React.createElement(VisuallyHidden, null, label)));
+        React.createElement(VisuallyHidden, null, closeLabel)));
 };
 DrawerCloseButton.spiritComponent = 'DrawerCloseButton';
 
@@ -1065,15 +1163,17 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _DrawerPanel = (props, ref) => {
-    const { elementType: ElementTag = 'div', children } = props, restProps = __rest(props, ["elementType", "children"]);
+    const { elementType = 'div', children } = props, restProps = __rest(props, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps } = useDrawerStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.panel, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.panel, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }),
         React.createElement("div", { className: classProps.content }, children)));
 };
 const DrawerPanel = React.forwardRef(_DrawerPanel);
 DrawerPanel.spiritComponent = 'DrawerPanel';
+DrawerPanel.displayName = 'DrawerPanel';
 
 exports.Drawer = Drawer;
 exports.DrawerCloseButton = DrawerCloseButton;