@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/dist/es6/layout/lib/utils/layout.js

@@ -1,39 +1,78 @@
-var 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',
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var layoutStyleFnConfigs = [
+    {
+        name: 'display',
+        properties: ['display'],
+        system: 'none',
+    },
+    {
+        name: 'height',
+        properties: ['height'],
+        system: 'space',
+    },
+    {
+        name: 'listStyle',
+        properties: ['listStyle'],
+        system: 'none',
+    },
+    {
+        name: 'maxHeight',
+        properties: ['maxHeight'],
+        system: 'space',
+    },
+    {
+        name: 'maxWidth',
+        properties: ['maxWidth'],
+        system: 'space',
+    },
+    {
+        name: 'minHeight',
+        properties: ['minHeight'],
+        system: 'space',
+    },
+    {
+        name: 'minWidth',
+        properties: ['minWidth'],
+        system: 'space',
+    },
+    {
+        name: 'overflow',
+        properties: ['overflow'],
+        system: 'none',
+    },
+    {
+        name: 'overflowX',
+        properties: ['overflowX'],
+        system: 'none',
+    },
+    {
+        name: 'overflowY',
+        properties: ['overflowY'],
+        system: 'none',
+    },
+    {
+        name: 'verticalAlign',
+        properties: ['verticalAlign'],
+        system: 'none',
+    },
+    {
+        name: 'width',
+        properties: ['width'],
+        system: 'space',
+    },
+];
+export var layoutStyleFns = buildStyleFns(layoutStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns layout styles.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const LayoutExample = () => (
  *   <Box display="inline-block" height="50%">
- *     Hello, positions!
+ *     Hello, layout!
  *   </Box>
  * );
- *
+ * ```
  */
-export function layout(props) {
-    var styles = {};
-    for (var key in props) {
-        if (key in layoutProps) {
-            var attr = layoutProps[key];
-            var 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;
-}
+export var layout = buildStylePropFn(layoutStyleFns);

package/dist/es6/layout/lib/utils/other.d.ts

@@ -1,5 +1,49 @@
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+/** style props to for other CSS properties */
 export declare type OtherStyleProps = {
-    animation?: string;
+    /** sets [CSS animation property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) */
+    animation?: Property.Animation;
+    /** sets [CSS appearance property](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) */
+    appearance?: Property.Appearance;
+    /** sets [CSS box-sizing property](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) */
+    boxSizing?: Property.BoxSizing;
+    /** sets [CSS content property](https://developer.mozilla.org/en-US/docs/Web/CSS/content) */
+    content?: Property.Content;
+    /** sets [CSS cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) */
+    cursor?: Property.Cursor;
+    /** sets [CSS fill property](https://developer.mozilla.org/en-US/docs/Web/CSS/fill) */
+    fill?: Property.Fill;
+    /** sets [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) */
+    float?: Property.Float;
+    /** sets [CSS object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) */
+    objectFit?: Property.ObjectFit;
+    /** sets [CSS object-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) */
+    objectPosition?: Property.ObjectPosition;
+    /** sets [CSS opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) */
+    opacity?: Property.Opacity;
+    /** sets [CSS outline property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline) */
+    outline?: Property.Outline;
+    /** sets [CSS outline-offset property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset) */
+    outlineOffset?: Property.OutlineOffset;
+    /** sets [CSS overflow-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) */
+    overflowWrap?: Property.OverflowWrap;
+    /** sets [CSS pointer-events property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) */
+    pointerEvents?: Property.PointerEvents;
+    /** sets [CSS resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) */
+    resize?: Property.Resize;
+    /** sets [CSS stroke property](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke) */
+    stroke?: Property.Stroke;
+    /** sets [CSS transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) */
+    transform?: Property.Transform;
+    /** sets [CSS transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) */
+    transition?: Property.Transition;
+    /** sets [CSS user-select property](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) */
+    userSelect?: Property.UserSelect;
+    /** sets [CSS visibility property](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) */
+    visibility?: Property.Visibility;
 };
-export declare function other<P extends OtherStyleProps>(props: P): {};
+export declare const otherStyleFnConfigs: StyleFnConfig[];
+export declare const otherStyleFns: import("./buildStyleFns").StyleFns;
+export declare const other: (props: OtherStyleProps) => {};
 //# sourceMappingURL=other.d.ts.map

package/dist/es6/layout/lib/utils/other.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"other.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/other.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MASxD"}
+{"version":3,"file":"other.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/other.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE/E,8CAA8C;AAC9C,oBAAY,eAAe,GAAG;IAC5B,gGAAgG;IAChG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,kGAAkG;IAClG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,0FAA0F;IAC1F,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,sFAAsF;IACtF,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,mFAAmF;IACnF,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,0FAA0F;IAC1F,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,gGAAgG;IAChG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,kGAAkG;IAClG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kGAAkG;IAClG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAgG9C,CAAC;AAEF,eAAO,MAAM,aAAa,oCAAqC,CAAC;AAEhE,eAAO,MAAM,KAAK,gCAAmD,CAAC"}

package/dist/es6/layout/lib/utils/other.js

@@ -1,15 +1,100 @@
-var otherProps = {
-    animation: function (value) {
-        return { animation: value };
-    },
-};
-export function other(props) {
-    for (var key in props) {
-        if (key in otherProps) {
-            var value = props[key];
-            var styleFn = otherProps[key];
-            return styleFn(value);
-        }
-    }
-    return {};
-}
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var otherStyleFnConfigs = [
+    {
+        name: 'animation',
+        properties: ['animation'],
+        system: 'none',
+    },
+    {
+        name: 'appearance',
+        properties: ['appearance'],
+        system: 'none',
+    },
+    {
+        name: 'boxSizing',
+        properties: ['boxSizing'],
+        system: 'none',
+    },
+    {
+        name: 'content',
+        properties: ['content'],
+        system: 'none',
+    },
+    {
+        name: 'cursor',
+        properties: ['cursor'],
+        system: 'none',
+    },
+    {
+        name: 'fill',
+        properties: ['fill'],
+        system: 'none',
+    },
+    {
+        name: 'float',
+        properties: ['float'],
+        system: 'none',
+    },
+    {
+        name: 'objectFit',
+        properties: ['objectFit'],
+        system: 'none',
+    },
+    {
+        name: 'objectPosition',
+        properties: ['objectPosition'],
+        system: 'none',
+    },
+    {
+        name: 'outline',
+        properties: ['outline'],
+        system: 'none',
+    },
+    {
+        name: 'outlineOffset',
+        properties: ['outlineOffset'],
+        system: 'none',
+    },
+    {
+        name: 'overflowWrap',
+        properties: ['overflowWrap'],
+        system: 'none',
+    },
+    {
+        name: 'pointerEvents',
+        properties: ['pointerEvents'],
+        system: 'none',
+    },
+    {
+        name: 'resize',
+        properties: ['resize'],
+        system: 'none',
+    },
+    {
+        name: 'stroke',
+        properties: ['stroke'],
+        system: 'none',
+    },
+    {
+        name: 'transform',
+        properties: ['transform'],
+        system: 'none',
+    },
+    {
+        name: 'transition',
+        properties: ['transition'],
+        system: 'none',
+    },
+    {
+        name: 'userSelect',
+        properties: ['userSelect'],
+        system: 'none',
+    },
+    {
+        name: 'visibility',
+        properties: ['visibility'],
+        system: 'none',
+    },
+];
+export var otherStyleFns = buildStyleFns(otherStyleFnConfigs);
+export var other = buildStylePropFn(otherStyleFns);

package/dist/es6/layout/lib/utils/position.d.ts

@@ -1,41 +1,58 @@
-import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
 import { Property } from 'csstype';
-/** style props to for standard position properties */
-export declare type PositionStandardProps = {
-    /** sets `position` property  */
+import { StyleFnConfig } from './buildStyleFns';
+/** style props to for CSS position properties */
+export declare type PositionStyleProps = {
+    /**
+     * - sets [CSS position property](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+     * */
     position?: Property.Position;
-    /** sets `zIndex` property  */
+    /**
+     * - sets [CSS z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
+     * */
     zIndex?: Property.ZIndex;
-    /** sets `top` property  */
+    /**
+     * - sets [CSS top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top)
+     * */
     top?: number | string;
-    /** sets `right` property (no bidirectional support) */
+    /**
+     * - sets [CSS right property](https://developer.mozilla.org/en-US/docs/Web/CSS/right)
+     * - no bidirectional support
+     * */
     right?: number | string;
-    /** sets `bottom` property  */
+    /**
+     * - sets [CSS bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)
+     * */
     bottom?: number | string;
-    /** sets `left` property (no bidirectional support)  */
+    /**
+     * - sets [CSS left property](https://developer.mozilla.org/en-US/docs/Web/CSS/left)
+     * - no bidirectional support
+     * */
     left?: number | string;
-};
-export declare type PositionLogicalProps = {
-    /** sets `left` property (bidirectional support)  */
+    /**
+     * - sets [CSS inset-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start)
+     * - bidirectional support
+     * */
     insetInlineStart?: number | string;
-    /** sets `right` property (bidirectional support) */
+    /**
+     * - sets [CSS inset-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end)
+     * - bidirectional support
+     * */
     insetInlineEnd?: number | string;
 };
-export declare type PositionStyleProps = PositionStandardProps & PositionLogicalProps;
+export declare const positionStyleFnConfigs: StyleFnConfig[];
+export declare const positionStyleFns: import("./buildStyleFns").StyleFns;
 /**
- * A style prop function that takes components props and returns position styles.
+ * A style prop function that takes component 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 declare function position<P extends PositionStyleProps & {
-    theme?: PartialEmotionCanvasTheme;
-}>(props: P): {};
+export declare const position: (props: PositionStyleProps) => {};
 //# sourceMappingURL=position.d.ts.map

package/dist/es6/layout/lib/utils/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/position.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAE1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,sDAAsD;AACtD,oBAAY,qBAAqB,GAAG;IAClC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC,CAAC;AA0BF,oBAAY,kBAAkB,GAAG,qBAAqB,GAAG,oBAAoB,CAAC;AAE9E;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,GAAG;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,EACzF,KAAK,EAAE,CAAC,MAyBT"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/position.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE/E,iDAAiD;AACjD,oBAAY,kBAAkB,GAAG;IAC/B;;SAEK;IACL,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B;;SAEK;IACL,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB;;SAEK;IACL,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;;SAGK;IACL,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;SAGK;IACL,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;SAGK;IACL,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC;;;SAGK;IACL,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,aAAa,EAyCjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,oCAAwC,CAAC;AACtE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,mCAAyD,CAAC"}

package/dist/es6/layout/lib/utils/position.js

@@ -1,74 +1,58 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
-var getInsetInlineStartStyle = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'right' : 'left';
-    return _a = {}, _a[attr] = value, _a;
-};
-var getInsetInlineEndStyle = function (value, isRTL) {
-    var _a;
-    if (isRTL === void 0) { isRTL = false; }
-    var attr = isRTL ? 'left' : 'right';
-    return _a = {}, _a[attr] = value, _a;
-};
-var standardPositionProps = {
-    position: 'position',
-    zIndex: 'zIndex',
-    top: 'top',
-    right: 'right',
-    bottom: 'bottom',
-    left: 'left',
-};
-var logicalPositionProps = {
-    insetInlineStart: getInsetInlineStartStyle,
-    insetInlineEnd: getInsetInlineEndStyle,
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var positionStyleFnConfigs = [
+    {
+        name: 'position',
+        properties: ['position'],
+        system: 'none',
+    },
+    {
+        name: 'zIndex',
+        properties: ['zIndex'],
+        system: 'none',
+    },
+    {
+        name: 'top',
+        properties: ['top'],
+        system: 'none',
+    },
+    {
+        name: 'right',
+        properties: ['right'],
+        system: 'none',
+    },
+    {
+        name: 'bottom',
+        properties: ['bottom'],
+        system: 'none',
+    },
+    {
+        name: 'left',
+        properties: ['left'],
+        system: 'none',
+    },
+    {
+        name: 'insetInlineStart',
+        properties: ['insetInlineStart'],
+        system: 'none',
+    },
+    {
+        name: 'insetInlineEnd',
+        properties: ['insetInlineEnd'],
+        system: 'none',
+    },
+];
+export var positionStyleFns = buildStyleFns(positionStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns position styles.
+ * A style prop function that takes component 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(props) {
-    // 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
-    var canvas = useTheme(props.theme).canvas;
-    var styles = {};
-    for (var key in props) {
-        if (key in props) {
-            if (key in standardPositionProps) {
-                var value = props[key];
-                var attr = standardPositionProps[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;
-                continue;
-            }
-            if (key in logicalPositionProps) {
-                var value = props[key];
-                var styleFn = logicalPositionProps[key];
-                var isRTL = canvas.direction === ContentDirection.RTL;
-                var style = styleFn(value, isRTL);
-                styles = __assign(__assign({}, styles), style);
-            }
-        }
-    }
-    return styles;
-}
+export var position = buildStylePropFn(positionStyleFns);