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

package/components/Pagination/Pagination.cjs

@@ -158,8 +158,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') {
@@ -249,8 +252,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);
@@ -339,11 +344,11 @@ const useClick = (isDisabled, onClick) => React.useCallback((event) => {
 }, [isDisabled, onClick]);
 
 const useDeprecationMessage = ({ method = 'component', trigger, componentName, componentProps, propertyProps, customText, }) => {
-    let message;
-    let hasProps;
     const messageBase = `Deprecation warning (${componentName}):`;
     React.useEffect(() => {
         const isExecutable = trigger && componentName && process.env.NODE_ENV === 'development';
+        let message;
+        let hasProps;
         switch (method) {
             case 'property':
                 if (propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.delete) {
@@ -378,6 +383,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 = undefined;
 const IconsContext = React.createContext(defaultContext);
 IconsContext.Provider;
@@ -392,6 +454,43 @@ const useIcon = (name) => {
     return '';
 };
 
+const SYMMETRICAL_CLASS_SUFFIX = '--symmetrical';
+const NON_SYMMETRICAL_CLASS_SUFFIX = '--asymmetrical';
+function getSymmetryClassNamesReducer(componentClass, isSymmetrical) {
+    return (acc, breakpoint) => {
+        if (breakpoint in isSymmetrical) {
+            const value = isSymmetrical[breakpoint];
+            const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `--${breakpoint}`;
+            if (value) {
+                return {
+                    classes: [...acc.classes, `${componentClass}${infix}${SYMMETRICAL_CLASS_SUFFIX}`],
+                    wasSymmetrical: true,
+                };
+            }
+            if (acc.wasSymmetrical) {
+                return {
+                    classes: [...acc.classes, `${componentClass}${infix}${NON_SYMMETRICAL_CLASS_SUFFIX}`],
+                    wasSymmetrical: acc.wasSymmetrical,
+                };
+            }
+        }
+        return acc;
+    };
+}
+function useSymmetry(componentClass, isSymmetrical) {
+    if (typeof isSymmetrical !== 'object' || isSymmetrical === null) {
+        return {
+            isSymmetricalActive: isSymmetrical === true,
+            symmetricalClassName: isSymmetrical ? `${componentClass}${SYMMETRICAL_CLASS_SUFFIX}` : '',
+        };
+    }
+    const { classes } = Object.keys(spiritDesignTokens.breakpoints).reduce(getSymmetryClassNamesReducer(componentClass, isSymmetrical), { classes: [], wasSymmetrical: false });
+    return {
+        isSymmetricalActive: Object.values(isSymmetrical).includes(true),
+        symmetricalClassName: classes.join(' '),
+    };
+}
+
 const usePaginationStyleProps = (props) => {
     const paginationRootClass = useClassNamePrefix('Pagination');
     const paginationItemClass = `${paginationRootClass}__item`;
@@ -464,16 +563,16 @@ function useButtonStyleProps(props) {
     const buttonBlockClass = `${buttonClass}--block`;
     const buttonDisabledClass = `${buttonClass}--disabled`;
     const buttonLoadingClass = `${buttonClass}--loading`;
-    const buttonSymmetricalClass = `${buttonClass}--symmetrical`;
-    if (isBlock && isSymmetrical) {
+    const { isSymmetricalActive, symmetricalClassName } = useSymmetry(buttonClass, isSymmetrical);
+    if (isBlock && isSymmetricalActive) {
         warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
     }
+    const shouldApplyBlock = () => isBlock && !isSymmetricalActive;
     const classProps = classNames(buttonClass, getButtonColorClassname(buttonClass, color), getButtonSizeClassname(buttonClass, size), {
-        [buttonBlockClass]: isBlock && !isSymmetrical,
+        [buttonBlockClass]: shouldApplyBlock(),
         [buttonDisabledClass]: isDisabled || isLoading,
         [buttonLoadingClass]: isLoading,
-        [buttonSymmetricalClass]: isSymmetrical && !isBlock,
-    });
+    }, symmetricalClassName);
     return {
         classProps,
         props: restProps,
@@ -565,6 +664,7 @@ const _Icon = (props, ref) => {
 };
 const Icon = React.forwardRef(_Icon);
 Icon.spiritComponent = 'Icon';
+Icon.displayName = 'Icon';
 
 var __rest$b = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -620,17 +720,19 @@ const defaultProps$1 = {
 const _Button = (props, ref) => {
     const propsWithContext = usePropsContext();
     const propsWithDefaults = Object.assign(Object.assign(Object.assign({}, defaultProps$1), props), propsWithContext);
-    const { elementType: ElementTag = defaultProps$1.elementType, children } = propsWithDefaults, restProps = __rest$a(propsWithDefaults, ["elementType", "children"]);
+    const { elementType = defaultProps$1.elementType, children } = propsWithDefaults, restProps = __rest$a(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;
@@ -672,16 +774,16 @@ function useButtonLinkStyleProps(props) {
     const buttonBlockClass = `${buttonClass}--block`;
     const buttonDisabledClass = `${buttonClass}--disabled`;
     const buttonLoadingClass = `${buttonClass}--loading`;
-    const buttonSymmetricalClass = `${buttonClass}--symmetrical`;
-    if (isBlock && isSymmetrical) {
+    const { isSymmetricalActive, symmetricalClassName } = useSymmetry(buttonClass, isSymmetrical);
+    if (isBlock && isSymmetricalActive) {
         warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
     }
+    const shouldApplyBlock = () => isBlock && !isSymmetricalActive;
     const classProps = classNames(buttonClass, getButtonLinkColorClassname(buttonClass, color), getButtonLinkSizeClassname(buttonClass, size), {
-        [buttonBlockClass]: isBlock && !isSymmetrical,
+        [buttonBlockClass]: shouldApplyBlock(),
         [buttonDisabledClass]: isDisabled || isLoading,
         [buttonLoadingClass]: isLoading,
-        [buttonSymmetricalClass]: isSymmetrical && !isBlock,
-    });
+    }, symmetricalClassName);
     return {
         classProps,
         props: restProps,
@@ -710,17 +812,19 @@ const defaultProps = {
 };
 const _ButtonLink = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
-    const { elementType: ElementTag = defaultProps.elementType, children } = propsWithDefaults, restProps = __rest$8(propsWithDefaults, ["elementType", "children"]);
+    const { elementType = defaultProps.elementType, children } = propsWithDefaults, restProps = __rest$8(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$7 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -762,10 +866,6 @@ const VisuallyHidden = (props) => {
 };
 VisuallyHidden.spiritComponent = 'VisuallyHidden';
 
-const PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL = 'Previous';
-const PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL = 'Next';
-const PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX = 'Go to page';
-
 var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -778,19 +878,20 @@ var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationButtonLink = (props, ref) => {
-    const _a = props, { direction, accessibilityLabel = direction === 'previous'
-        ? PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL
-        : PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL } = _a, restProps = __rest$5(_a, ["direction", "accessibilityLabel"]);
+    const { t } = useI18n();
+    const _a = props, { direction, accessibilityLabel } = _a, restProps = __rest$5(_a, ["direction", "accessibilityLabel"]);
+    const directionLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : (direction === 'previous' ? t('pagination.previous') : t('pagination.next'));
     const iconType = {
         previous: 'chevron-left',
         next: 'chevron-right',
     };
     return (React.createElement(ButtonLink, Object.assign({ color: "secondary", isSymmetrical: true }, restProps, { ref: ref }),
         React.createElement(Icon, { name: iconType[direction] }),
-        React.createElement(VisuallyHidden, null, accessibilityLabel)));
+        React.createElement(VisuallyHidden, null, directionLabel)));
 };
 const PaginationButtonLink = React.forwardRef(_PaginationButtonLink);
 PaginationButtonLink.spiritComponent = 'PaginationButtonLink';
+PaginationButtonLink.displayName = 'PaginationButtonLink';
 
 var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -823,17 +924,20 @@ var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationLink = (props, ref) => {
-    const { elementType: ElementTag = 'a', accessibilityLabel, isCurrent, pageNumber } = props, restProps = __rest$3(props, ["elementType", "accessibilityLabel", "isCurrent", "pageNumber"]);
-    const visuallyHiddenLabel = accessibilityLabel || `${PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX} ${pageNumber}`;
+    const { t } = useI18n();
+    const { elementType = 'a', accessibilityLabel, isCurrent, pageNumber } = props, restProps = __rest$3(props, ["elementType", "accessibilityLabel", "isCurrent", "pageNumber"]);
+    const visuallyHiddenLabel = accessibilityLabel || `${t('pagination.goToPage')} ${pageNumber}`;
+    const Component = elementType;
     const { classProps } = usePaginationStyleProps({ isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, (isCurrent && { 'aria-current': 'page' }), otherProps, mergedStyleProps, { ref: ref }),
         React.createElement(VisuallyHidden, null, visuallyHiddenLabel),
         React.createElement("span", { "aria-hidden": "true" }, pageNumber)));
 };
 const PaginationLink = React.forwardRef(_PaginationLink);
 PaginationLink.spiritComponent = 'PaginationLink';
+PaginationLink.displayName = 'PaginationLink';
 
 var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -847,11 +951,14 @@ var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationLinkNext = (_a, ref) => {
-    var { accessibilityLabel = PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL } = _a, restProps = __rest$2(_a, ["accessibilityLabel"]);
-    return React.createElement(PaginationButtonLink, Object.assign({ direction: "next", accessibilityLabel: accessibilityLabel }, restProps, { ref: ref }));
+    var { accessibilityLabel } = _a, restProps = __rest$2(_a, ["accessibilityLabel"]);
+    const { t } = useI18n();
+    const nextLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : t('pagination.next');
+    return React.createElement(PaginationButtonLink, Object.assign({ direction: "next", accessibilityLabel: nextLabel }, restProps, { ref: ref }));
 };
 const PaginationLinkNext = React.forwardRef(_PaginationLinkNext);
 PaginationLinkNext.spiritComponent = 'PaginationLinkNext';
+PaginationLinkNext.displayName = 'PaginationLinkNext';
 
 var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -865,11 +972,14 @@ var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationLinkPrevious = (_a, ref) => {
-    var { accessibilityLabel = PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL } = _a, restProps = __rest$1(_a, ["accessibilityLabel"]);
-    return React.createElement(PaginationButtonLink, Object.assign({ direction: "previous", accessibilityLabel: accessibilityLabel }, restProps, { ref: ref }));
+    var { accessibilityLabel } = _a, restProps = __rest$1(_a, ["accessibilityLabel"]);
+    const { t } = useI18n();
+    const previousLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : t('pagination.previous');
+    return React.createElement(PaginationButtonLink, Object.assign({ direction: "previous", accessibilityLabel: previousLabel }, restProps, { ref: ref }));
 };
 const PaginationLinkPrevious = React.forwardRef(_PaginationLinkPrevious);
 PaginationLinkPrevious.spiritComponent = 'PaginationLinkPrevious';
+PaginationLinkPrevious.displayName = 'PaginationLinkPrevious';
 
 const usePagination = ({ totalPages, onChange, defaultPage, visiblePages }) => {
     const [currentPage, setCurrentPage] = React.useState(defaultPage <= 0 || defaultPage > totalPages ? 1 : (defaultPage !== null && defaultPage !== void 0 ? defaultPage : 1));
@@ -916,7 +1026,11 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledPagination = (props) => {
-    const { accessibilityLabel = PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX, accessibilityLabelPrevious = PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL, accessibilityLabelNext = PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL, defaultPage = 1, onChange, totalPages = 0, visiblePages = 5 } = props, rest = __rest(props, ["accessibilityLabel", "accessibilityLabelPrevious", "accessibilityLabelNext", "defaultPage", "onChange", "totalPages", "visiblePages"]);
+    const { t } = useI18n();
+    const { accessibilityLabel, accessibilityLabelPrevious, accessibilityLabelNext, defaultPage = 1, onChange, totalPages = 0, visiblePages = 5 } = props, rest = __rest(props, ["accessibilityLabel", "accessibilityLabelPrevious", "accessibilityLabelNext", "defaultPage", "onChange", "totalPages", "visiblePages"]);
+    const resolvedAccessibilityLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : t('pagination.goToPage');
+    const resolvedAccessibilityLabelPrevious = accessibilityLabelPrevious !== null && accessibilityLabelPrevious !== void 0 ? accessibilityLabelPrevious : t('pagination.previous');
+    const resolvedAccessibilityLabelNext = accessibilityLabelNext !== null && accessibilityLabelNext !== void 0 ? accessibilityLabelNext : t('pagination.next');
     const { currentPage, pages, handlePageChange } = usePagination({
         defaultPage,
         onChange,
@@ -924,25 +1038,22 @@ const UncontrolledPagination = (props) => {
         visiblePages,
     });
     return (React.createElement(Pagination, Object.assign({}, rest),
-        currentPage !== 1 && (React.createElement(PaginationLinkPrevious, { accessibilityLabel: accessibilityLabelPrevious, onClick: (event) => {
+        currentPage !== 1 && (React.createElement(PaginationLinkPrevious, { accessibilityLabel: resolvedAccessibilityLabelPrevious, onClick: (event) => {
                 event.preventDefault();
                 handlePageChange(currentPage - 1);
             } })), pages === null || pages === void 0 ? void 0 :
         pages.map((pageNumber) => (React.createElement(PaginationItem, { key: pageNumber },
-            React.createElement(PaginationLink, { accessibilityLabel: `${accessibilityLabel} ${pageNumber}`, href: "#", isCurrent: currentPage === pageNumber, pageNumber: pageNumber, onClick: (event) => {
+            React.createElement(PaginationLink, { accessibilityLabel: `${resolvedAccessibilityLabel} ${pageNumber}`, href: "#", isCurrent: currentPage === pageNumber, pageNumber: pageNumber, onClick: (event) => {
                     event.preventDefault();
                     handlePageChange(pageNumber);
                 } })))),
-        currentPage !== totalPages && (React.createElement(PaginationLinkNext, { accessibilityLabel: accessibilityLabelNext, onClick: (event) => {
+        currentPage !== totalPages && (React.createElement(PaginationLinkNext, { accessibilityLabel: resolvedAccessibilityLabelNext, onClick: (event) => {
                 event.preventDefault();
                 handlePageChange(currentPage + 1);
             } }))));
 };
 UncontrolledPagination.spiritComponent = 'UncontrolledPagination';
 
-exports.PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX = PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX;
-exports.PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL = PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL;
-exports.PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL = PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL;
 exports.Pagination = Pagination;
 exports.PaginationButtonLink = PaginationButtonLink;
 exports.PaginationItem = PaginationItem;