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

package/components/Grid/GridItem.d.ts

@@ -3,5 +3,7 @@ import { type SpiritGridItemProps } from '../../types';
 declare const GridItem: {
     <T extends ElementType = "div">(props: SpiritGridItemProps<T>): JSX.Element;
     spiritComponent: string;
+    spiritDefaultElement: "div";
+    spiritDefaultProps: SpiritGridItemProps<"div">;
 };
 export default GridItem;

package/components/Grid/GridItem.js

@@ -22,5 +22,7 @@ const GridItem = (props) => {
     return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
 };
 GridItem.spiritComponent = 'GridItem';
+GridItem.spiritDefaultElement = 'div';
+GridItem.spiritDefaultProps = null;
 export default GridItem;
 //# sourceMappingURL=GridItem.js.map

package/components/Grid/GridItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.js","sourceRoot":"","sources":["../../../src/components/Grid/GridItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,QAAQ,GAAG,CAAgC,KAA6B,EAAe,EAAE;IAC7F,MAAM,EAAE,WAAW,EAAE,UAAU,GAAG,KAAK,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAnE,2BAA2D,CAAQ,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACzG,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IACvE,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAC;IAE5G,OAAO,CACL,oBAAC,UAAU,oBAAK,UAAU,EAAM,gBAAgB,GAC7C,QAAQ,CACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;AAEtC,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"GridItem.js","sourceRoot":"","sources":["../../../src/components/Grid/GridItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,QAAQ,GAAG,CAAgC,KAA6B,EAAe,EAAE;IAC7F,MAAM,EAAE,WAAW,EAAE,UAAU,GAAG,KAAK,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAnE,2BAA2D,CAAQ,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACzG,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IACvE,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAC;IAE5G,OAAO,CACL,oBAAC,UAAU,oBAAK,UAAU,EAAM,gBAAgB,GAC7C,QAAQ,CACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;AACtC,QAAQ,CAAC,oBAAoB,GAAG,KAAc,CAAC;AAC/C,QAAQ,CAAC,kBAAkB,GAAG,IAA6C,CAAC;AAE5E,eAAe,QAAQ,CAAC"}

package/components/Grid/useGridItemStyleProps.d.ts

@@ -3,10 +3,10 @@ import { type SpiritGridItemProps } from '../../types';
 interface GridItemCSSProperties extends CSSProperties {
     [key: string]: string | undefined | number;
 }
-export interface GridItemStyles<T> {
+export interface GridItemStyle<T> {
     classProps: string;
     props: T;
     styleProps: GridItemCSSProperties;
 }
-export declare function useGridItemStyleProps(props: SpiritGridItemProps<ElementType>): GridItemStyles<SpiritGridItemProps<ElementType>>;
+export declare function useGridItemStyleProps(props: SpiritGridItemProps<ElementType>): GridItemStyle<SpiritGridItemProps<ElementType>>;
 export {};

package/components/Grid/useGridItemStyleProps.js

@@ -19,17 +19,18 @@ const setGridItemStyle = (styleObject, baseVarName, propValue) => {
 export function useGridItemStyleProps(props) {
     const gridItemClass = useClassNamePrefix('GridItem');
     const gridItemStyle = {};
-    const typePropNames = Object.keys(props).filter((propName) => propName.startsWith('column') || propName.startsWith('row'));
+    const propsClone = Object.assign({}, props);
+    const typePropNames = Object.keys(propsClone).filter((propName) => propName.startsWith('column') || propName.startsWith('row'));
     typePropNames.forEach((propName) => {
         const type = propName.startsWith('column') ? 'column' : 'row';
-        if (props[propName]) {
-            setGridItemStyle(gridItemStyle, `grid-item-${type}-${propName.replace(type, '').toLowerCase()}`, props[propName]);
+        if (propsClone[propName]) {
+            setGridItemStyle(gridItemStyle, `grid-item-${type}-${propName.replace(type, '').toLowerCase()}`, propsClone[propName]);
         }
-        delete props[propName];
+        delete propsClone[propName];
     });
     return {
         classProps: gridItemClass,
-        props,
+        props: propsClone,
         styleProps: gridItemStyle,
     };
 }

package/components/Grid/useGridItemStyleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGridItemStyleProps.js","sourceRoot":"","sources":["../../../src/components/Grid/useGridItemStyleProps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAOjD,MAAM,gBAAgB,GAAG,CAAC,WAAkC,EAAE,YAAoB,EAAE,KAAyB,EAAE,EAAE;IAC9G,WAAkD,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;AAC5E,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,WAAkC,EAAE,WAAmB,EAAE,SAA2B,EAAE,EAAE;IAChH,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;;YACrC,MAAM,MAAM,GAAG,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC;YACjD,MAAM,QAAQ,GAAG,KAAK,WAAW,GAAG,MAAM,EAAE,CAAC;YAC7C,gBAAgB,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAA,SAAS,CAAC,GAAwC,CAAC,0CAAE,QAAQ,EAAE,CAAC,CAAC;QAC3G,CAAC,CAAC,CAAC;IACL,CAAC;SAAM,CAAC;QACN,MAAM,QAAQ,GAAG,KAAK,WAAW,EAAE,CAAC;QACpC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAAE,CAAC,CAAC;IACjE,CAAC;AACH,CAAC,CAAC;AAWF,MAAM,UAAU,qBAAqB,CACnC,KAAuC;IAEvC,MAAM,aAAa,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAErD,MAAM,aAAa,GAA0B,EAAE,CAAC;IAEhD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAC7C,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAC1E,CAAC;IAEF,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9D,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpB,gBAAgB,CACd,aAAa,EACb,aAAa,IAAI,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,EAAE,EAC/D,KAAK,CAAC,QAAQ,CAAqB,CACpC,CAAC;QACJ,CAAC;QAED,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,UAAU,EAAE,aAAa;QACzB,KAAK;QACL,UAAU,EAAE,aAAa;KAC1B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useGridItemStyleProps.js","sourceRoot":"","sources":["../../../src/components/Grid/useGridItemStyleProps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAOjD,MAAM,gBAAgB,GAAG,CAAC,WAAkC,EAAE,YAAoB,EAAE,KAAyB,EAAE,EAAE;IAE9G,WAAkD,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;AAC5E,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,WAAkC,EAAE,WAAmB,EAAE,SAA2B,EAAE,EAAE;IAChH,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;;YACrC,MAAM,MAAM,GAAG,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC;YACjD,MAAM,QAAQ,GAAG,KAAK,WAAW,GAAG,MAAM,EAAE,CAAC;YAC7C,gBAAgB,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAA,SAAS,CAAC,GAAwC,CAAC,0CAAE,QAAQ,EAAE,CAAC,CAAC;QAC3G,CAAC,CAAC,CAAC;IACL,CAAC;SAAM,CAAC;QACN,MAAM,QAAQ,GAAG,KAAK,WAAW,EAAE,CAAC;QACpC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAAE,CAAC,CAAC;IACjE,CAAC;AACH,CAAC,CAAC;AAWF,MAAM,UAAU,qBAAqB,CACnC,KAAuC;IAEvC,MAAM,aAAa,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAErD,MAAM,aAAa,GAA0B,EAAE,CAAC;IAGhD,MAAM,UAAU,qBAAQ,KAAK,CAAE,CAAC;IAEhC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAClD,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAC1E,CAAC;IAEF,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9D,IAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzB,gBAAgB,CACd,aAAa,EACb,aAAa,IAAI,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,EAAE,EAC/D,UAAU,CAAC,QAAQ,CAAqB,CACzC,CAAC;QACJ,CAAC;QAED,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,UAAU,EAAE,aAAa;QACzB,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,aAAa;KAC1B,CAAC;AACJ,CAAC"}

package/components/Grid/useGridStyleProps.d.ts

@@ -3,10 +3,10 @@ import { type SpiritGridProps } from '../../types';
 interface GridCSSProperties extends CSSProperties {
     [key: string]: string | undefined | number;
 }
-export interface GridStyles<T> {
+export interface GridStyle<T> {
     classProps: string;
     props: T;
     styleProps: GridCSSProperties;
 }
-export declare function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyles<SpiritGridProps<ElementType>>;
+export declare function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyle<SpiritGridProps<ElementType>>;
 export {};

package/components/Header/Header.cjs

@@ -412,11 +412,11 @@ const useClickOutside = ({ ref, callback }) => {
 };
 
 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) {
@@ -503,6 +503,43 @@ const useScrollControl = (ref, isOpen) => {
     }, [isOpen, ref]);
 };
 
+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 HEADER_COLOR_DEFAULT = 'primary';
 const HEADER_ACTIONS_COLOR_DEFAULT = 'primary';
 const HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT = 'Close';
@@ -1018,16 +1055,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,
@@ -1148,16 +1185,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,