@wix/design-system/dist/esm/Box/Box.js

@wix/design-system

import React, { forwardRef, useEffect } from 'react';
import { st, classes, vars } from './Box.st.css.js';
import { stVars as colorsStVars } from '../Foundation/stylable/colors.st.css.js';
import { filterObject } from '../utils/filterObject';
import deprecationLog from '../utils/deprecationLog';
import { formatSpacingValue, getSpacingValues, } from './utils/formatSpacingValues';
import { getSizeValues } from './utils/formatSizeValues';
import { DIRECTION } from './Box.constants';
const getColorStyles = (props) => {
    const styles = {};
    for (const propName in props) {
        const propValue = props[propName];
        if (propValue) {
            styles[propName] = colorsStVars[propValue] || propValue;
        }
    }
    return styles;
};
const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, children, className, align, verticalAlign, dataHook, gap, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, minWidth, maxWidth, width, minHeight, maxHeight, height, color, backgroundColor, border, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, style, role, ariaLabel, 'data-hook': dataHookByKebabCase, ...nativeStyles }, ref) => {
    useEffect(() => {
        if (typeof dataHookByKebabCase !== 'undefined') {
            deprecationLog('<Box/> - prop "data-hook" is deprecated and will be removed in next major release, please use "dataHook" instead.');
        }
    }, [dataHookByKebabCase]);
    const rootClassNames = st(classes.root, {
        inline,
        direction,
        alignItems: align,
        justifyContent: verticalAlign,
    }, className);
    const rootStyles = {
        ...style,
        ...getSpacingValues({
            padding,
            paddingTop,
            paddingRight,
            paddingBottom,
            paddingLeft,
            margin,
            marginTop,
            marginRight,
            marginBottom,
            marginLeft,
        }),
        ...getSizeValues({
            minWidth,
            maxWidth,
            width,
            minHeight,
            maxHeight,
            height,
        }),
        border,
        ...getColorStyles({
            color,
            backgroundColor,
            borderColor,
            borderTopColor,
            borderRightColor,
            borderBottomColor,
            borderLeftColor,
        }),
        [vars['gap']]: formatSpacingValue(gap) || 0,
        ...nativeStyles,
    };
    const rootStylesFiltered = filterObject(rootStyles, (_key, value) => typeof value !== 'undefined');
    const tabIndex = role && ['button', 'link'].includes(role) ? 0 : undefined;
    return (React.createElement("div", { "aria-label": ariaLabel, role: role, tabIndex: tabIndex, "data-hook": dataHook, className: rootClassNames, style: rootStylesFiltered, ref: ref }, children));
});
Box.displayName = 'Box';
export default Box;
//# sourceMappingURL=Box.js.map