@workday/canvas-kit-preview-react 7.1.4 → 7.2.0-427-next.2

package/dist/es6/side-panel/lib/hooks.js

@@ -1,51 +1,70 @@
 import * as React from 'react';
+export const SidePanelContext = React.createContext({
+    state: 'expanded',
+    origin: 'left',
+});
 import { useUniqueId } from '@workday/canvas-kit-react/common';
-export var useSidePanel = function (config) {
-    var _a = React.useState(false), touched = _a[0], setTouched = _a[1];
-    var configParams = config
+/**
+ *
+ * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
+ * configuration object:
+ *
+ * ```tsx
+ * import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+ *
+ * const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
+ *   initialExpanded: false,
+ *   panelId: 'custom-panel-id',
+ *   labelId: 'custom-label-id',
+ * });
+ * ```
+ */
+export const useSidePanel = (config) => {
+    const [touched, setTouched] = React.useState(false);
+    const configParams = config
         ? config
         : {
             initialExpanded: true,
             panelId: undefined,
             labelId: undefined,
         };
-    var _b = configParams.initialExpanded, initialExpanded = _b === void 0 ? true : _b, panelIdParam = configParams.panelId, labelIdParam = configParams.labelId;
-    var _c = React.useState(initialExpanded), expanded = _c[0], setExpanded = _c[1];
-    var panelId = useUniqueId(panelIdParam);
-    var labelId = useUniqueId(labelIdParam);
+    const { initialExpanded = true, panelId: panelIdParam, labelId: labelIdParam } = configParams;
+    const [expanded, setExpanded] = React.useState(initialExpanded);
+    const panelId = useUniqueId(panelIdParam);
+    const labelId = useUniqueId(labelIdParam);
     // This prevents keyframes animations from rendering prematurely
-    var handleSetTouched = function () {
+    const handleSetTouched = () => {
         if (touched === false) {
             setTouched(true);
         }
     };
-    var handleClick = function () {
+    const handleClick = () => {
         handleSetExpanded(!expanded);
     };
-    var handleSetExpanded = function (newExpandedState) {
+    const handleSetExpanded = (newExpandedState) => {
         handleSetTouched();
         setExpanded(newExpandedState);
     };
-    var panelProps = {
+    const panelProps = {
         expanded: expanded,
         id: panelId,
         'aria-labelledby': labelId,
-        touched: touched,
+        touched,
     };
-    var labelProps = {
+    const labelProps = {
         id: labelId,
     };
-    var controlProps = {
+    const controlProps = {
         'aria-controls': panelId,
         'aria-expanded': expanded,
         'aria-labelledby': labelId,
         onClick: handleClick,
     };
     return {
-        expanded: expanded,
+        expanded,
         setExpanded: handleSetExpanded,
-        panelProps: panelProps,
-        labelProps: labelProps,
-        controlProps: controlProps,
+        panelProps,
+        labelProps,
+        controlProps,
     };
 };

package/dist/es6/status-indicator/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/StatusIndicator';
+export * from './lib/hooks/useStatusIndicatorModel';
+export { useStatusIndicatorIcon } from './lib/StatusIndicatorIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/status-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAC,sBAAsB,EAAC,MAAM,2BAA2B,CAAC"}

package/dist/es6/status-indicator/index.js

@@ -0,0 +1,3 @@
+export * from './lib/StatusIndicator';
+export * from './lib/hooks/useStatusIndicatorModel';
+export { useStatusIndicatorIcon } from './lib/StatusIndicatorIcon';

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
+    /**
+     * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
+     */
+    children: React.ReactNode;
+}
+export declare const useStatusIndicator: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}, {
+    opacity: string | undefined;
+    color: string;
+    background: string;
+}>;
+/**
+ * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
+ * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ *
+ * ```tsx
+ * <StatusIndicator emphasis="low" variant="blue">
+ *   {Child components}
+ * </StatusIndicator>
+ * ```
+ */
+export declare const StatusIndicator: import("@workday/canvas-kit-react/common").ElementComponentM<"div", StatusIndicatorProps & Partial<{
+    emphasis: import("./hooks").StatusIndicatorEmphasis;
+    variant: import("./hooks").StatusIndicatorVariant;
+}> & {} & {}, {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}> & {
+    /**
+     * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
+     * contents exceed the component's maximum width.
+     *
+     * ```tsx
+     * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./StatusIndicatorLabel").StatusIndicatorLabelProps>;
+    /**
+     * `StatusIndicator.Icon` renders {@link SystemIcon} under the hood. It's used as a decorative
+     * element to visually support the {@link StatusIndicatorLabel StatusIndicator.Label} text.
+     *
+     * ```tsx
+     * <StatusIndicator.Icon icon={uploadCloudIcon} />
+     * ```
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./StatusIndicatorIcon").StatusIndicatorIconProps, {
+        state: {
+            emphasis: import("./hooks").StatusIndicatorEmphasis;
+            variant: import("./hooks").StatusIndicatorVariant;
+        };
+        events: {};
+    }>;
+};
+//# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;EAO7B,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;IAKxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;;;;;;;CAmBL,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { StatusIndicatorIcon, statusIndicatorColors } from './StatusIndicatorIcon';
+import { StatusIndicatorLabel } from './StatusIndicatorLabel';
+import { useStatusIndicatorModel } from './hooks';
+export const useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(({ state }) => {
+    const colors = statusIndicatorColors[state.variant][state.emphasis];
+    return {
+        opacity: state.variant === 'transparent' ? '0.85' : undefined,
+        color: colors.text,
+        background: colors.background,
+    };
+});
+/**
+ * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
+ * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ *
+ * ```tsx
+ * <StatusIndicator emphasis="low" variant="blue">
+ *   {Child components}
+ * </StatusIndicator>
+ * ```
+ */
+export const StatusIndicator = createContainer('div')({
+    displayName: 'StatusIndicator',
+    modelHook: useStatusIndicatorModel,
+    elemPropsHook: useStatusIndicator,
+    subComponents: {
+        /**
+         * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
+         * contents exceed the component's maximum width.
+         *
+         * ```tsx
+         * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
+         * ```
+         */
+        Label: StatusIndicatorLabel,
+        /**
+         * `StatusIndicator.Icon` renders {@link SystemIcon} under the hood. It's used as a decorative
+         * element to visually support the {@link StatusIndicatorLabel StatusIndicator.Label} text.
+         *
+         * ```tsx
+         * <StatusIndicator.Icon icon={uploadCloudIcon} />
+         * ```
+         */
+        Icon: StatusIndicatorIcon,
+    },
+})(({ children, ...elemProps }, Element, model) => {
+    return (React.createElement(Flex, Object.assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
+});

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts

@@ -0,0 +1,83 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface StatusIndicatorIconProps extends SystemIconProps {
+}
+export declare const statusIndicatorColors: {
+    gray: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    orange: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    blue: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    green: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    red: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    transparent: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+};
+export declare const useStatusIndicatorIcon: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}, {
+    color: string;
+    colorHover: string;
+}>;
+export declare const StatusIndicatorIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", StatusIndicatorIconProps, {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=StatusIndicatorIcon.d.ts.map

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;EAMjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { createElemPropsHook, createSubcomponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { useStatusIndicatorModel } from './hooks';
+import { colors } from '@workday/canvas-kit-react/tokens';
+export const statusIndicatorColors = {
+    gray: {
+        high: {
+            text: colors.frenchVanilla100,
+            background: colors.licorice300,
+        },
+        low: {
+            text: colors.licorice400,
+            background: colors.soap300,
+        },
+    },
+    orange: {
+        high: {
+            text: colors.licorice500,
+            background: colors.cantaloupe400,
+        },
+        low: {
+            text: colors.toastedMarshmallow600,
+            background: colors.cantaloupe100,
+        },
+    },
+    blue: {
+        high: {
+            text: colors.frenchVanilla100,
+            background: colors.blueberry400,
+        },
+        low: {
+            text: colors.blueberry500,
+            background: colors.blueberry100,
+        },
+    },
+    green: {
+        high: {
+            text: colors.frenchVanilla100,
+            background: colors.greenApple600,
+        },
+        low: {
+            text: colors.greenApple600,
+            background: colors.greenApple100,
+        },
+    },
+    red: {
+        high: {
+            text: colors.frenchVanilla100,
+            background: colors.cinnamon500,
+        },
+        low: {
+            text: colors.cinnamon600,
+            background: colors.cinnamon100,
+        },
+    },
+    transparent: {
+        high: {
+            text: colors.frenchVanilla100,
+            background: colors.blackPepper600,
+        },
+        low: {
+            text: colors.frenchVanilla100,
+            background: colors.blackPepper600,
+        },
+    },
+};
+export const useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(({ state }) => {
+    const colors = statusIndicatorColors[state.variant][state.emphasis];
+    return {
+        color: colors.text,
+        colorHover: colors.background,
+    };
+});
+export const StatusIndicatorIcon = createSubcomponent('span')({
+    modelHook: useStatusIndicatorModel,
+    elemPropsHook: useStatusIndicatorIcon,
+})((elemProps, Element, model) => {
+    return React.createElement(SystemIcon, Object.assign({ as: Element, size: 20, role: "img" }, elemProps));
+});

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from '@workday/canvas-kit-react/text';
+export interface StatusIndicatorLabelProps extends TextProps {
+}
+export declare const StatusIndicatorLabel: import("@workday/canvas-kit-react/common").ElementComponent<"span", StatusIndicatorLabelProps>;
+//# sourceMappingURL=StatusIndicatorLabel.d.ts.map

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAE/D,eAAO,MAAM,oBAAoB,gGAoB/B,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Text } from '@workday/canvas-kit-react/text';
+export const StatusIndicatorLabel = createComponent('span')({
+    displayName: 'StatusIndicator.Label',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Text, Object.assign({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", typeLevel: "subtext.large", fontWeight: "bold", textTransform: "capitalize", ref: ref, color: "inherit", as: Element }, elemProps), children));
+    },
+});

package/dist/es6/status-indicator/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useStatusIndicatorModel';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/status-indicator/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../status-indicator/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/dist/es6/status-indicator/lib/hooks/index.js

@@ -0,0 +1 @@
+export * from './useStatusIndicatorModel';

package/dist/es6/status-indicator/lib/hooks/useStatusIndicatorModel.d.ts

@@ -0,0 +1,75 @@
+export declare type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
+export declare type StatusIndicatorEmphasis = 'high' | 'low';
+export declare const useStatusIndicatorModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+    emphasis: StatusIndicatorEmphasis;
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: StatusIndicatorVariant;
+}> & {} & {}) | undefined) => {
+    state: {
+        /**
+         * Defines the emphasis of the `StatusIndicator`.
+         * `high` emphasis will create more contrast between the background and text colors.
+         * `low` emphasis will create less contrast between the background and text colors.
+         * @default 'low'
+         */
+        emphasis: StatusIndicatorEmphasis;
+        /**
+         * Defines the color of the `StatusIndicator`.
+         * @default 'gray'
+         */
+        variant: StatusIndicatorVariant;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+    emphasis: StatusIndicatorEmphasis;
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: StatusIndicatorVariant;
+}, {}, {
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+    emphasis: StatusIndicatorEmphasis;
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: StatusIndicatorVariant;
+}, {}, {
+    state: {
+        /**
+         * Defines the emphasis of the `StatusIndicator`.
+         * `high` emphasis will create more contrast between the background and text colors.
+         * `low` emphasis will create less contrast between the background and text colors.
+         * @default 'low'
+         */
+        emphasis: StatusIndicatorEmphasis;
+        /**
+         * Defines the color of the `StatusIndicator`.
+         * @default 'gray'
+         */
+        variant: StatusIndicatorVariant;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useStatusIndicatorModel.d.ts.map

package/dist/es6/status-indicator/lib/hooks/useStatusIndicatorModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStatusIndicatorModel.d.ts","sourceRoot":"","sources":["../../../../../status-indicator/lib/hooks/useStatusIndicatorModel.tsx"],"names":[],"mappings":"AAEA,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa,CAAC;AAElG,oBAAY,uBAAuB,GAAG,MAAM,GAAG,KAAK,CAAC;AAErD,eAAO,MAAM,uBAAuB;IAEhC;;;;;OAKG;;IAGH;;;OAGG;;;;QAXH;;;;;WAKG;;QAGH;;;WAGG;;;;;IAXH;;;;;OAKG;;IAGH;;;OAGG;;;IAXH;;;;;OAKG;;IAGH;;;OAGG;;;;QAXH;;;;;WAKG;;QAGH;;;WAGG;;;;EASL,CAAC"}

package/dist/es6/status-indicator/lib/hooks/useStatusIndicatorModel.js

@@ -0,0 +1,22 @@
+import { createModelHook } from '@workday/canvas-kit-react/common';
+export const useStatusIndicatorModel = createModelHook({
+    defaultConfig: {
+        /**
+         * Defines the emphasis of the `StatusIndicator`.
+         * `high` emphasis will create more contrast between the background and text colors.
+         * `low` emphasis will create less contrast between the background and text colors.
+         * @default 'low'
+         */
+        emphasis: 'low',
+        /**
+         * Defines the color of the `StatusIndicator`.
+         * @default 'gray'
+         */
+        variant: 'gray',
+    },
+})(config => {
+    const state = {
+        ...config,
+    };
+    return { state, events: {} };
+});

package/dist/es6/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/Table';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../table/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/es6/table/index.js

@@ -0,0 +1 @@
+export * from './lib/Table';