@workday/canvas-kit-labs-react/dist/commonjs/common/lib/theming/useThemeRTL.js

Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useThemeRTL = void 0;
const common_1 = require("@workday/canvas-kit-react/common");
const react_1 = require("react");
const rtl_css_js_1 = __importDefault(require("rtl-css-js"));
const getDirectionalStyles = (isRTL, ...styles) => {
    return isRTL ? (0, rtl_css_js_1.default)(styles) : styles;
};
const getConvertedStyles = (styles, convertFunc) => {
    return convertFunc ? convertFunc(styles) : styles;
};
/**
 * A helpful hook for supporting bidirectional styles.
 * * Read below for more detail or [view the docs](https://github.com/Workday/canvas-kit/blob/master/modules/labs-react/common/README.md#useThemeRTL).
 *
 * @returns
 * * `themeRTL` - a function to transform bidirectional styles
 * * `theme` - the Canvas theme object (optional, provided for convenience)
 *
 * `themeRTL` allows you to support bidirectionality with a single set of styles and pass them along to a component.
 * It accepts CSS object styles and transforms CSS attributes based on the content direction set in the theme (LTR or RTL).
 *
 * @example
 * import { type } from '@workday/canvas-kit-react/tokens';
 * import { useThemeRTL } from '@workday/canvas-kit-labs-react/common';
 *
 * const ErrorText: React.FC = (props) => {
 *   const { themeRTL, theme } = useThemeRTL();
 *   // `borderLeft` will be converted to `borderRight`
 *   // when the theme direction is `RTL`.
 *   // All other styles will remain unchanged.
 *   const errorTextStyles = themeRTL({
 *     ...type.levels.subtext.medium,
 *     color: theme.canvas.palette.error.main,
 *     borderLeft: `solid 2px ${theme.canvas.palette.error.main}`,
 *   });
 *
 *   return <span css={errorTextStyles} {...props} />;
 * }
 *
 * @deprecated ⚠️ `useThemeRTL` has been deprecated and will be removed in a future major version. Now that IE11 is no longer supported, we encourage consumers to use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
 */
function useThemeRTL() {
    const theme = (0, common_1.useTheme)();
    const direction = (0, common_1.useIsRTL)(theme);
    const convertFunc = theme.canvas._styleRewriteFn;
    const themeRTL = (0, react_1.useMemo)(() => {
        return (...cssObject) => {
            const styles = getDirectionalStyles(direction, ...cssObject);
            return styles.reduce((first, second) => {
                const convertedFirst = getConvertedStyles(first, convertFunc);
                const convertedSecond = getConvertedStyles(second, convertFunc);
                return { ...convertedFirst, ...convertedSecond };
            }, {});
        };
    }, [direction, convertFunc]);
    return { themeRTL, theme };
}
exports.useThemeRTL = useThemeRTL;