@workday/canvas-kit-react 7.0.0-alpha.0-next.3 → 7.0.0-alpha.0-next.7

package/layout/lib/utils/border.ts

@@ -0,0 +1,263 @@
+import {
+  borderRadius as borderRadiusTokens,
+  CanvasBorderRadiusKeys,
+  colors as colorTokens,
+  CanvasColor,
+} from '@workday/canvas-kit-react/tokens';
+import {
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+
+import {PropertyBorder} from './types';
+
+/** style props to set the border properties */
+export type BorderShorthandStyleProps = {
+  /** sets `border` property */
+  border?: string;
+  /** sets `border-top` property */
+  borderTop?: string;
+  /** sets `border-right` property (no bidirectional support) */
+  borderRight?: string;
+  /** sets `border-bottom` property */
+  borderBottom?: string;
+  /** sets `border-left` property (no bidirectional support) */
+  borderLeft?: string;
+};
+
+/** style props to set the border color properties */
+export type BorderColorStyleProps = {
+  /** sets `border-color` property */
+  borderColor?: CanvasColor | (string & {});
+  /** sets `border-top-color` property */
+  borderTopColor?: CanvasColor | (string & {});
+  /** sets `border-right-color` property (no bidirectional support) */
+  borderRightColor?: CanvasColor | (string & {});
+  /** sets `border-bottom-color` property */
+  borderBottomColor?: CanvasColor | (string & {});
+  /** sets `border-left-color` property (no bidirectional support) */
+  borderLeftColor?: CanvasColor | (string & {});
+};
+
+/** style props to set the border radius properties */
+export type BorderRadiusStyleProps = {
+  /** sets `border-radius` property */
+  borderRadius?: CanvasBorderRadiusKeys | number | (string & {});
+  /** sets `border-top-left-radius` property */
+  borderTopLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
+  /** sets `border-top-right-radius` property */
+  borderTopRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
+  /** sets `border-bottom-left-radius` property */
+  borderBottomLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
+  /** sets `border-bottom-right-radius` property */
+  borderBottomRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
+};
+
+/** style props to set the border style properties */
+export type BorderLineStyleProps = {
+  /** sets `border-style` property */
+  borderStyle?: PropertyBorder;
+  /** sets `border-top-style` property */
+  borderTopStyle?: PropertyBorder;
+  /** sets `border-right-style` property (no bidirectional support) */
+  borderRightStyle?: PropertyBorder;
+  /** sets `border-bottom-style` property */
+  borderBottomStyle?: PropertyBorder;
+  /** sets `border-left-style` property (no bidirectional support) */
+  borderLeftStyle?: PropertyBorder;
+};
+
+/** style props to set the border width properties */
+export type BorderWidthStyleProps = {
+  /** sets `border-width` property */
+  borderWidth?: string | number;
+  /** sets `border-top-width` property */
+  borderTopWidth?: string | number;
+  /** sets `border-right-width` property (no bidirectional support) */
+  borderRightWidth?: string | number;
+  /** sets `border-bottom-width` property */
+  borderBottomWidth?: string | number;
+  /** sets `border-left-width` property (no bidirectional support) */
+  borderLeftWidth?: string | number;
+};
+
+export type BorderLogicalStyleProps = {
+  /** sets `border-left` property (bidirectional support) */
+  borderInlineStart?: string;
+  /** sets `border-left-color` property (bidirectional support) */
+  borderInlineStartColor?: CanvasColor | (string & {});
+  /** sets `border-left-style` property (bidirectional support) */
+  borderInlineStartStyle?: PropertyBorder;
+  /** sets `border-left-width` property (bidirectional support) */
+  borderInlineStartWidth?: string | number;
+  /** sets `border-right` property (bidirectional support) */
+  borderInlineEnd?: string;
+  /** sets `border-right-color` property (bidirectional support) */
+  borderInlineEndColor?: CanvasColor | (string & {});
+  /** sets `border-right-style` property (bidirectional support) */
+  borderInlineEndStyle?: PropertyBorder;
+  /** sets `border-right-width` property (bidirectional support) */
+  borderInlineEndWidth?: string | number;
+};
+
+/** a collection style props for border properties */
+export type BorderStyleProps = BorderShorthandStyleProps &
+  BorderColorStyleProps &
+  BorderRadiusStyleProps &
+  BorderLineStyleProps &
+  BorderWidthStyleProps &
+  BorderLogicalStyleProps;
+
+// border logical prop handlers
+const borderInlineStart = (isRTL: boolean) => (isRTL ? 'borderRight' : 'borderLeft');
+const borderInlineEnd = (isRTL: boolean) => (isRTL ? 'borderLeft' : 'borderRight');
+const borderInlineStartColor = (isRTL: boolean) => (isRTL ? 'borderRightColor' : 'borderLeftColor');
+const borderInlineEndColor = (isRTL: boolean) => (isRTL ? 'borderLeftColor' : 'borderRightColor');
+const borderInlineStartStyle = (isRTL: boolean) => (isRTL ? 'borderRightStyle' : 'borderLeftStyle');
+const borderInlineEndStyle = (isRTL: boolean) => (isRTL ? 'borderLeftStyle' : 'borderRightStyle');
+const borderInlineStartWidth = (isRTL: boolean) => (isRTL ? 'borderRightWidth' : 'borderLeftWidth');
+const borderInlineEndWidth = (isRTL: boolean) => (isRTL ? 'borderLeftWidth' : 'borderRightWidth');
+
+const borderShorthandProps = {
+  border: 'border',
+  borderTop: 'borderTop',
+  borderRight: 'borderRight',
+  borderBottom: 'borderBottom',
+  borderLeft: 'borderLeft',
+  borderInlineStart,
+  borderInlineEnd,
+};
+
+const borderColors = {
+  borderColor: 'borderColor',
+  borderTopColor: 'borderTopColor',
+  borderRightColor: 'borderRightColor',
+  borderBottomColor: 'borderBottomColor',
+  borderLeftColor: 'borderLeftColor',
+  borderInlineStartColor,
+  borderInlineEndColor,
+};
+
+const borderRadii = {
+  borderRadius: 'borderRadius',
+  borderTopLeftRadius: 'borderTopLeftRadius',
+  borderTopRightRadius: 'borderTopRightRadius',
+  borderBottomLeftRadius: 'borderBottomLeftRadius',
+  borderBottomRightRadius: 'borderBottomRightRadius',
+};
+
+const borderStyles = {
+  borderStyle: 'borderStyle',
+  borderTopStyle: 'borderTopStyle',
+  borderRightStyle: 'borderRightStyle',
+  borderBottomStyle: 'borderBottomStyle',
+  borderLeftStyle: 'borderLeftStyle',
+  borderInlineStartStyle,
+  borderInlineEndStyle,
+};
+
+const borderWidths = {
+  borderWidth: 'borderWidth',
+  borderTopWidth: 'borderTopWidth',
+  borderRightWidth: 'borderRightWidth',
+  borderBottomWidth: 'borderBottomWidth',
+  borderLeftWidth: 'borderLeftWidth',
+  borderInlineStartWidth,
+  borderInlineEndWidth,
+};
+
+/**
+ * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
+ * If no `BorderStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `border` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
+ * );
+ *
+ */
+export function border<P extends BorderStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
+  // border will always be used within the context of a component, but eslint doesn't know that
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const {canvas} = useTheme(props.theme);
+  const isRTL = canvas.direction === ContentDirection.RTL;
+  const styles = {};
+  for (const key in props) {
+    if (props.hasOwnProperty(key)) {
+      if (key in borderShorthandProps) {
+        const value = props[key as keyof BorderShorthandStyleProps];
+        let attr: string;
+        if (key === 'borderInlineStart') {
+          attr = borderInlineStart(isRTL);
+        } else if (key === 'borderInlineEnd') {
+          attr = borderInlineEnd(isRTL);
+        } else {
+          attr = borderShorthandProps[key as keyof BorderShorthandStyleProps];
+        }
+        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+        styles[attr] = value;
+        continue;
+      }
+
+      if (key in borderColors) {
+        const propValue = props[key as keyof BorderColorStyleProps] as CanvasColor | string;
+        const value = colorTokens[propValue as CanvasColor] || propValue;
+        let attr: string;
+        if (key === 'borderInlineStartColor') {
+          attr = borderInlineStartColor(isRTL);
+        } else if (key === 'borderInlineEndColor') {
+          attr = borderInlineEndColor(isRTL);
+        } else {
+          attr = borderColors[key as keyof BorderColorStyleProps];
+        }
+        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+        styles[attr] = value;
+        continue;
+      }
+
+      if (key in borderRadii) {
+        const propValue = props[key as keyof BorderRadiusStyleProps] as
+          | CanvasBorderRadiusKeys
+          | number
+          | string;
+        const value = borderRadiusTokens[propValue as CanvasBorderRadiusKeys] || propValue;
+        const attr = borderRadii[key as keyof BorderRadiusStyleProps];
+        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+        styles[attr] = value;
+        continue;
+      }
+
+      if (key in borderStyles) {
+        const value = props[key as keyof BorderLineStyleProps];
+        let attr: string;
+        if (key === 'borderInlineStartStyle') {
+          attr = borderInlineStartStyle(isRTL);
+        } else if (key === 'borderInlineEndStyle') {
+          attr = borderInlineEndStyle(isRTL);
+        } else {
+          attr = borderStyles[key as keyof BorderLineStyleProps];
+        }
+        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+        styles[attr] = value;
+        continue;
+      }
+
+      if (key in borderWidths) {
+        const value = props[key as keyof BorderWidthStyleProps];
+        let attr: string;
+        if (key === 'borderInlineStartWidth') {
+          attr = borderInlineStartWidth(isRTL);
+        } else if (key === 'borderInlineEndWidth') {
+          attr = borderInlineEndWidth(isRTL);
+        } else {
+          attr = borderWidths[key as keyof BorderWidthStyleProps];
+        }
+        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+        styles[attr] = value;
+      }
+    }
+  }
+  return styles;
+}

package/layout/lib/utils/color.ts

@@ -0,0 +1,62 @@
+import {colors as colorTokens, CanvasColor} from '@workday/canvas-kit-react/tokens';
+
+export type ColorTokens = typeof colorTokens;
+
+/** style props to for color properties */
+export type ColorStyleProps = {
+  /** sets `background` property */
+  background?: CanvasColor | (string & {});
+  /** sets `background-color` property */
+  backgroundColor?: CanvasColor | (string & {});
+  /** sets `background-image` property */
+  backgroundImage?: string;
+  /** sets `color` property */
+  color?: CanvasColor | (string & {});
+};
+
+const getBackground = (value: CanvasColor | string) => ({
+  background: colorTokens[value] || value,
+});
+
+const getBackgroundColor = (value: CanvasColor | string) => ({
+  backgroundColor: colorTokens[value] || value,
+});
+
+const getBackgroundImage = (value: string) => ({
+  backgroundImage: value,
+});
+
+const getColor = (value: CanvasColor | string) => ({
+  color: colorTokens[value] || value,
+});
+
+const colorProps = {
+  background: getBackground,
+  backgroundColor: getBackgroundColor,
+  backgroundImage: getBackgroundImage,
+  color: getColor,
+};
+
+/**
+ * A style prop function that takes components props and returns color styles from canvas token values.
+ * If no `ColorStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `color` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
+ * );
+ *
+ */
+export function color<P extends ColorStyleProps>(props: P) {
+  let styles = {};
+  for (const key in props) {
+    if (key in colorProps) {
+      const value = props[key as keyof ColorStyleProps] as CanvasColor | string;
+      const colorFn = colorProps[key as keyof ColorStyleProps];
+      const style = colorFn(value);
+      styles = {...styles, ...style};
+    }
+  }
+  return styles;
+}

package/layout/lib/utils/depth.ts

@@ -0,0 +1,37 @@
+import {depth as depthTokens} from '@workday/canvas-kit-react/tokens';
+
+export type DepthTokens = typeof depthTokens;
+export type DepthTokenKeys = keyof DepthTokens;
+export type DepthTokenValues = DepthTokens[keyof DepthTokens];
+
+/** style props to for depth styles */
+export type DepthStyleProps = {
+  /** sets depth styles (box-shadow & border) */
+  depth?: DepthTokenKeys;
+};
+
+const depthProps = {
+  depth: (token: DepthTokenKeys) => depthTokens[token],
+};
+
+/**
+ * A style prop function that takes components props and returns depth styles from canvas token values.
+ * If no `DepthStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll mostly likely use `depth` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box depth={3}>Hello, box shadows!</Box>
+ * );
+ *
+ */
+export function depth<P extends DepthStyleProps>(props: P): DepthTokenValues {
+  for (const key in props) {
+    if (key in depthProps) {
+      const token = props[key as keyof DepthStyleProps] as DepthTokenKeys;
+      const depthFn = depthProps[key as keyof DepthStyleProps];
+      return depthFn(token);
+    }
+  }
+  return {} as DepthTokenValues;
+}

package/layout/lib/utils/flex.ts

@@ -0,0 +1,65 @@
+import {
+  PropertyAlignItems,
+  PropertyAlignContent,
+  PropertyJustifyItems,
+  PropertyJustifyContent,
+  PropertyFlexWrap,
+  PropertyFlexDirection,
+} from './types';
+
+/** style props to for flexbox container properties */
+export type FlexStyleProps = {
+  /** sets `align-items` property */
+  alignItems?: PropertyAlignItems;
+  /** sets `align-content` property */
+  alignContent?: PropertyAlignContent;
+  /**
+   * sets `display` property
+   * @default 'flex'
+   * */
+  display?: 'flex' | 'inline-flex';
+  /** sets `justify-items` property */
+  justifyItems?: PropertyJustifyItems;
+  /** sets `justify-content` property */
+  justifyContent?: PropertyJustifyContent;
+  /** sets `flex-wrap` property */
+  flexWrap?: PropertyFlexWrap;
+  /** sets `flex-direction` property */
+  flexDirection?: PropertyFlexDirection;
+};
+
+const flexProps = {
+  alignContent: 'alignContent',
+  alignItems: 'alignItems',
+  display: 'display',
+  flexDirection: 'flexDirection',
+  flexWrap: 'flexWrap',
+  justifyContent: 'justifyContent',
+  justifyItems: 'justifyItems',
+};
+
+/**
+ * A style prop function that takes component props and returns flexbox styles.
+ * If no `FlexStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `flex` with low-level, styled components
+ * const FlexExample = () => (
+ *   <Flex justifyContent="center" alignItems="center">
+ *     Hello, flex!
+ *   </Flex>
+ * );
+ *
+ */
+export function flex<P extends FlexStyleProps>(props: P) {
+  const styles = {};
+  for (const key in props) {
+    if (key in flexProps) {
+      const attr = flexProps[key as keyof FlexStyleProps];
+      const value = props[key];
+      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+      styles[attr] = value;
+    }
+  }
+  return styles;
+}

package/layout/lib/utils/flexItem.ts

@@ -0,0 +1,56 @@
+import {PropertyJustifySelf, PropertyAlignSelf, PropertyOrder} from './types';
+
+/** style props to for flexbox item properties */
+export type FlexItemStyleProps = {
+  /** sets `flex` property */
+  flex?: number | string;
+  /** sets `flex-grow` property */
+  flexGrow?: number | string;
+  /** sets `flex-shrink` property */
+  flexShrink?: number | string;
+  /** sets `flex-basis` property */
+  flexBasis?: number | string;
+  /** sets `justify-self` property */
+  justifySelf?: PropertyJustifySelf;
+  /** sets `align-self` property */
+  alignSelf?: PropertyAlignSelf;
+  /** sets `order` property */
+  order?: PropertyOrder;
+};
+
+/** style props to for flexbox item properties */
+const flexItemProps = {
+  flex: 'flex',
+  flexGrow: 'flexGrow',
+  flexShrink: 'flexShrink',
+  flexBasis: 'flexBasis',
+  justifySelf: 'justifySelf',
+  alignSelf: 'alignSelf',
+  order: 'order',
+};
+
+/**
+ * A style prop function that takes component props and returns flexbox item styles.
+ * If no `FlexItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `flexItem` with low-level, styled components
+ * const FlexItemExample = () => (
+ *   <Box flex={1} flexBasis="auto" alignSelf={center}>
+ *     Hello, flex item!
+ *   </Box>
+ * );
+ *
+ */
+export function flexItem<P extends FlexItemStyleProps>(props: P) {
+  const styles = {};
+  for (const key in props) {
+    if (key in flexItemProps) {
+      const attr = flexItemProps[key as keyof FlexItemStyleProps];
+      const value = props[key];
+      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+      styles[attr] = value;
+    }
+  }
+  return styles;
+}

package/layout/lib/utils/getValidChildren.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export function getValidChildren(children: React.ReactNode) {
+  return React.Children.toArray(children).filter(child =>
+    React.isValidElement(child)
+  ) as React.ReactElement[];
+}

package/layout/lib/utils/layout.ts

@@ -0,0 +1,77 @@
+import {
+  PropertyDisplay,
+  PropertyListStyle,
+  PropertyOverflow,
+  PropertyOverflowX,
+  PropertyOverflowY,
+  PropertyVerticalAlign,
+} from './types';
+
+/** style props to for layout properties */
+export type LayoutStyleProps = {
+  /** sets `display` property */
+  display?: PropertyDisplay;
+  /** sets `height` property */
+  height?: number | string;
+  /** sets `list-style property */
+  listStyle?: PropertyListStyle;
+  /** sets `max-height` property */
+  maxHeight?: number | string;
+  /** sets `max-width` property */
+  maxWidth?: number | string;
+  /** sets `min-height` property */
+  minHeight?: number | string;
+  /** sets `min-width` property */
+  minWidth?: number | string;
+  /** sets `overflow` property */
+  overflow?: PropertyOverflow;
+  /** sets `overflow-x` property */
+  overflowX?: PropertyOverflowX;
+  /** sets `overflow-y` property */
+  overflowY?: PropertyOverflowY;
+  /** sets `vertical-align` property */
+  verticalAlign?: PropertyVerticalAlign;
+  /** sets `width` property */
+  width?: number | string;
+};
+
+const layoutProps = {
+  display: 'display',
+  height: 'height',
+  listStyle: 'listStyle',
+  maxHeight: 'maxHeight',
+  maxWidth: 'maxWidth',
+  minHeight: 'minHeight',
+  minWidth: 'minWidth',
+  overflow: 'overflow',
+  overflowX: 'overflowX',
+  overflowY: 'overflowY',
+  verticalAlign: 'verticalAlign',
+  width: 'width',
+};
+
+/**
+ * A style prop function that takes components props and returns layout styles.
+ * If no `LayoutStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `layout` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box display="inline-block" height="50%">
+ *     Hello, positions!
+ *   </Box>
+ * );
+ *
+ */
+export function layout<P extends LayoutStyleProps>(props: P) {
+  const styles = {};
+  for (const key in props) {
+    if (key in layoutProps) {
+      const attr = layoutProps[key as keyof LayoutStyleProps];
+      const value = props[key];
+      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+      styles[attr] = value;
+    }
+  }
+  return styles;
+}

package/layout/lib/utils/other.ts

@@ -0,0 +1,20 @@
+export type OtherStyleProps = {
+  animation?: string;
+};
+
+const otherProps = {
+  animation: (value: string) => {
+    return {animation: value};
+  },
+};
+
+export function other<P extends OtherStyleProps>(props: P) {
+  for (const key in props) {
+    if (key in otherProps) {
+      const value = props[key as keyof OtherStyleProps] as keyof OtherStyleProps;
+      const styleFn = otherProps[key as keyof OtherStyleProps];
+      return styleFn(value);
+    }
+  }
+  return {};
+}

package/layout/lib/utils/position.ts

@@ -0,0 +1,96 @@
+import {
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {PropertyPosition, PropertyZIndex} from './types';
+
+/** style props to for standard position properties */
+export type PositionStandardProps = {
+  /** sets `position` property  */
+  position?: PropertyPosition;
+  /** sets `zIndex` property  */
+  zIndex?: PropertyZIndex;
+  /** sets `top` property  */
+  top?: number | string;
+  /** sets `right` property (no bidirectional support) */
+  right?: number | string;
+  /** sets `bottom` property  */
+  bottom?: number | string;
+  /** sets `left` property (no bidirectional support)  */
+  left?: number | string;
+};
+
+export type PositionLogicalProps = {
+  /** sets `left` property (bidirectional support)  */
+  insetInlineStart?: number | string;
+  /** sets `right` property (bidirectional support) */
+  insetInlineEnd?: number | string;
+};
+
+const getInsetInlineStartStyle = (value: number | string, isRTL = false) => {
+  const attr = isRTL ? 'right' : 'left';
+  return {[attr]: value};
+};
+
+const getInsetInlineEndStyle = (value: number | string, isRTL = false) => {
+  const attr = isRTL ? 'left' : 'right';
+  return {[attr]: value};
+};
+
+const standardPositionProps = {
+  position: 'position',
+  zIndex: 'zIndex',
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+};
+
+const logicalPositionProps = {
+  insetInlineStart: getInsetInlineStartStyle,
+  insetInlineEnd: getInsetInlineEndStyle,
+};
+
+export type PositionStyleProps = PositionStandardProps & PositionLogicalProps;
+
+/**
+ * A style prop function that takes components props and returns position styles.
+ * If no `PositionProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `position` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box position="absolute" top="50%">
+ *     Hello, positions!
+ *   </Box>
+ * );
+ *
+ */
+export function position<P extends PositionStyleProps & {theme?: PartialEmotionCanvasTheme}>(
+  props: P
+) {
+  // position will always be used within the context of a component, but eslint doesn't know that
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const {canvas} = useTheme(props.theme);
+  let styles = {};
+  for (const key in props) {
+    if (key in props) {
+      if (key in standardPositionProps) {
+        const value = props[key];
+        const attr = standardPositionProps[key as keyof PositionStandardProps];
+        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+        styles[attr] = value;
+        continue;
+      }
+      if (key in logicalPositionProps) {
+        const value = props[key as keyof PositionLogicalProps] as string | number;
+        const styleFn = logicalPositionProps[key as keyof PositionLogicalProps];
+        const isRTL = canvas.direction === ContentDirection.RTL;
+        const style = styleFn(value, isRTL);
+        styles = {...styles, ...style};
+      }
+    }
+  }
+  return styles;
+}