@workday/canvas-kit-react 6.0.0-alpha.0-next.31 → 6.0.0-alpha.0-next.37

package/common/lib/utils/components.ts

@@ -132,6 +132,7 @@ export type ElementComponent<T extends React.ElementType, P> = {
   ): JSX.Element;
   (props: PropsWithAs<P, T>): JSX.Element;
   displayName?: string;
+  as<E extends React.ElementType>(as: E): ElementComponent<E, P>;
 };
 
 export type Component<P> = {
@@ -233,6 +234,11 @@ export const createComponent = <
   });
   ReturnedComponent.displayName = displayName;
 
+  // The `any`s are here because `ElementComponent` takes care of the `as` type and the
+  // `ReturnComponent` type is overridden
+  (ReturnedComponent as any).as = (as: any) =>
+    createComponent(as)({displayName, Component, subComponents});
+
   // Cast as `any`. We have already specified the return type. Be careful making changes to this
   // file due to this `any` `ReturnedComponent` is a `React.ForwardRefExoticComponent`, but we want
   // it to be either an `Component` or `ElementComponent`
@@ -278,7 +284,7 @@ export const createHook = <M extends Model<any, any>, PO extends {}, PI extends
 ): BehaviorHook<M, PO> => {
   return (model, elemProps, ref) => {
     const props = mergeProps(fn(model, ref, elemProps || ({} as any)), elemProps || ({} as any));
-    if (!props.hasOwnProperty('ref')) {
+    if (!props.hasOwnProperty('ref') && ref) {
       // This is the weird "incoming ref isn't in props, but outgoing ref is in props" thing
       props.ref = ref;
     }
@@ -286,11 +292,32 @@ export const createHook = <M extends Model<any, any>, PO extends {}, PI extends
   };
 };
 
-export type BehaviorHook<M extends Model<any, any>, O extends {}> = <P extends {}, R>(
-  model: M,
-  elemProps?: P,
-  ref?: React.Ref<R>
-) => O & P & (R extends HTMLOrSVGElement ? {ref: React.Ref<R>} : {});
+export const subModelHook = <M extends Model<any, any>, SM extends Model<any, any>, O extends {}>(
+  fn: (model: M) => SM,
+  hook: BehaviorHook<SM, O>
+): BehaviorHook<M, O> => {
+  return (model: M, props: any, ref: React.Ref<any>) => {
+    return hook(fn(model), props, ref);
+  };
+};
+
+// Typescript function parameters are contravariant while return types are covariant. This is a
+// problem when someone hands us a model that correctly extends `Model<any, any>`, but adds extra
+// properties to the model. So `M extends Model<any, any>`. But the `BehaviorHook` is the return
+// type which will reverse the direction which is no longer true: `Model<any, any> extends M`. In
+// order to avoid this issue, we use the `bivarianceHack` found in ReactJS type definitions. This
+// hack forces Typescript to treat `M` as a bivariant allowing extension to go either direction.
+// Normally this would be less type safe, but we're using a generic `M` as a placeholder so there
+// isn't a real issue. Not 100% this is a bug, but the "hack" is a bit messy.
+// https://www.stephanboyer.com/post/132/what-are-covariance-and-contravariance
+// https://stackoverflow.com/questions/52667959/what-is-the-purpose-of-bivariancehack-in-typescript-types/52668133
+export type BehaviorHook<M extends Model<any, any>, O extends {}> = {
+  bivarianceHack<P extends {}, R>(
+    model: M,
+    elemProps?: P,
+    ref?: React.Ref<R>
+  ): O & P & (R extends HTMLOrSVGElement ? {ref: React.Ref<R>} : {});
+}['bivarianceHack'];
 
 function setRef<T>(ref: React.Ref<T> | undefined, value: T): void {
   if (ref) {
@@ -327,7 +354,7 @@ function setRef<T>(ref: React.Ref<T> | undefined, value: T): void {
  *   return <div ref={elementRef}/>
  * })
  */
-export function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void {
+export function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): React.RefCallback<T> {
   return (value: T) => {
     setRef(ref1, value);
     setRef(ref2, value);
@@ -410,9 +437,9 @@ export function useModelContext<T>(context: React.Context<T>, model?: T): T {
  *   return <div id="foo" {...props}>{children}</div>
  * })
  */
-export function composeHooks<M extends Model<any, any>, O1 extends {}, P extends {}, O2 extends {}>(
-  hook1: (model: M, props: P, ref: React.Ref<any>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<any>) => O2
+export function composeHooks<M extends Model<any, any>, O1 extends {}, O2 extends {}>(
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>
 ): BehaviorHook<M, O1 & O2>;
 
 export function composeHooks<
@@ -423,9 +450,9 @@ export function composeHooks<
   O2 extends {},
   O3 extends {}
 >(
-  hook1: (model: M, props: P, ref: React.Ref<R>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<R>) => O2,
-  hook3: (model: M, props: P, ref: React.Ref<R>) => O3
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>,
+  hook3: BehaviorHook<M, O3>
 ): BehaviorHook<M, O1 & O2 & O3>;
 export function composeHooks<
   M extends Model<any, any>,
@@ -436,10 +463,10 @@ export function composeHooks<
   O3 extends {},
   O4 extends {}
 >(
-  hook1: (model: M, props: P, ref: React.Ref<R>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<R>) => O2,
-  hook3: (model: M, props: P, ref: React.Ref<R>) => O3,
-  hook4: (model: M, props: P, ref: React.Ref<R>) => O4
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>,
+  hook3: BehaviorHook<M, O3>,
+  hook4: BehaviorHook<M, O4>
 ): BehaviorHook<M, O1 & O2 & O3 & O4>;
 export function composeHooks<
   M extends Model<any, any>,
@@ -451,11 +478,11 @@ export function composeHooks<
   O4 extends {},
   O5 extends {}
 >(
-  hook1: (model: M, props: P, ref: React.Ref<R>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<R>) => O2,
-  hook3: (model: M, props: P, ref: React.Ref<R>) => O3,
-  hook4: (model: M, props: P, ref: React.Ref<R>) => O4,
-  hook5: (model: M, props: P, ref: React.Ref<R>) => O5
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>,
+  hook3: BehaviorHook<M, O3>,
+  hook4: BehaviorHook<M, O4>,
+  hook5: BehaviorHook<M, O5>
 ): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
 export function composeHooks<M extends Model<any, any>, R, P extends {}, O extends {}>(
   ...hooks: ((model: M, props: P, ref: React.Ref<R>) => O)[]
@@ -465,7 +492,7 @@ export function composeHooks<M extends Model<any, any>, R, P extends {}, O exten
       return hook(model, props, props.ref || ref);
     }, props);
 
-    if (!returnProps.hasOwnProperty('ref')) {
+    if (!returnProps.hasOwnProperty('ref') && ref) {
       // This is the weird "incoming ref isn't in props, but outgoing ref is in props" thing
       returnProps.ref = ref;
     }

package/common/lib/utils/index.ts

@@ -11,4 +11,5 @@ export * from './components';
 export * from './models';
 export * from './elements';
 export * from './useWindowSize';
+export * from './useResizeObserver';
 export * from './StaticStates';

package/common/lib/utils/mergeProps.ts

@@ -39,6 +39,10 @@ export function mergeProps<T extends object, S extends object>(
         typeof targetProps[key] === 'function'
       ) {
         // we don't support removing callbacks via `undefined`, so do nothing here
+      } else if (key === 'ref' && sourceProps.hasOwnProperty('ref')) {
+        // refs should never be overridden. This doesn't happen normally, but happens with hook
+        // composition
+        (returnProps as any).ref = (returnProps as any).ref || (sourceProps as any).ref;
       } else {
         // @ts-ignore TS has more object constraint complaints that aren't useful here
         returnProps[key] = sourceProps[key];

package/common/lib/utils/useConstant.ts

@@ -0,0 +1,18 @@
+import {useRef} from 'react';
+
+/**
+ * Get a constant value in React, only running the callback function once.  `React.useMemo` does not
+ * guarantee that a function will only be run once.
+ *
+ * @example
+ * const value = useConstant(generateUniqueId)
+ */
+export function useConstant<T>(fn: () => T): T {
+  const ref = useRef<T>();
+
+  if (!ref.current) {
+    ref.current = fn();
+  }
+
+  return ref.current;
+}

package/common/lib/utils/useResizeObserver.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import useResizeObserverOriginal from 'use-resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
+
+if (typeof window !== 'undefined' && !(window as any).ResizeObserver) {
+  (window as any).ResizeObserver = ResizeObserver;
+}
+
+// `useResizeObserver` contains this fix in 8.0.0:
+// https://github.com/ZeeCoder/use-resize-observer/commit/bd0f3c8597bac0d853b88cf585256aac1bd4f554
+// v8.0.0 requires TS4.2. So we'll manually patch until we're ready for TS4.2+
+export const useResizeObserver: typeof useResizeObserverOriginal = (params = {}) => {
+  const widthRef = React.useRef<number | undefined>();
+  const heightRef = React.useRef<number | undefined>();
+  const onResize = params.onResize
+    ? (data: {width: number | undefined; height: number | undefined}) => {
+        if (widthRef.current !== data.width || heightRef.current !== data.height) {
+          widthRef.current = data.width;
+          heightRef.current = data.height;
+          params.onResize!(data);
+        }
+      }
+    : undefined;
+  return useResizeObserverOriginal({...params, onResize});
+};
+
+// When the dependency is moved up to v8.0.0, remove the above function and export below instead
+// export {useResizeObserver};

package/common/lib/utils/useUniqueId.ts

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import uuid from 'uuid/v4';
 
-export const generateUniqueId = () => uuid().replace(/^[0-9]*/gi, '');
+import {useConstant} from './useConstant';
+
+export const generateUniqueId = () => uuid().replace(/^[0-9\-]*/gi, '');
 
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
@@ -9,7 +10,7 @@ export const generateUniqueId = () => uuid().replace(/^[0-9]*/gi, '');
  */
 export const useUniqueId = (id?: string) => {
   // https://codesandbox.io/s/react-functional-component-ids-p2ndq
-  const [generatedId] = React.useState(generateUniqueId);
+  const generatedId = useConstant(generateUniqueId);
   return id || generatedId;
 };
 

package/dist/commonjs/banner/index.d.ts

@@ -1,5 +1,3 @@
-import Banner from './lib/Banner';
-export default Banner;
-export { Banner };
 export * from './lib/Banner';
+export * from './lib/hooks/';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/dist/commonjs/banner/index.js

@@ -2,11 +2,6 @@
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var Banner_1 = __importDefault(require("./lib/Banner"));
-exports.Banner = Banner_1.default;
-exports.default = Banner_1.default;
 __export(require("./lib/Banner"));
+__export(require("./lib/hooks/"));

package/dist/commonjs/banner/lib/Banner.d.ts

@@ -1,38 +1,22 @@
 import * as React from 'react';
-import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-export declare enum BannerVariant {
-    Full = 0,
-    Sticky = 1
-}
-export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The function called when the Banner is clicked.
-     */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * The label of the Banner.
-     */
-    label?: React.ReactNode;
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel, BannerModelConfig } from './hooks';
+export declare const BannerModelContext: React.Context<import("../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>>;
+export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
     /**
-     * The variant of the Banner. Accepts `Full` or `Sticky`.
-     * @default BannerVariant.Full
+     * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
      */
-    variant?: BannerVariant;
-    /**
-     * The type of error associated with the Banner (if applicable).
-     * @default ErrorType.Alert
-     */
-    error?: ErrorType;
-    /**
-     * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
-     * @default 'View All'
-     */
-    actionText?: string;
-}
-declare class Banner extends React.Component<BannerProps> {
-    static Variant: typeof BannerVariant;
-    static ErrorType: typeof ErrorType;
-    render(): JSX.Element;
+    children?: React.ReactNode;
 }
-export default Banner;
+export declare const Banner: import("../../common").ElementComponent<"button", BannerProps> & {
+    Icon: import("../../common").ElementComponent<"span", import("./BannerIcon").BannerIconProps>;
+    Label: import("../../common").ElementComponent<"div", import("./BannerLabel").BannerLabelProps>;
+    ActionText: import("../../common").ElementComponent<"span", import("./BannerActionText").BannerActionTextProps>;
+};
 //# sourceMappingURL=Banner.d.ts.map

package/dist/commonjs/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,SAAS,EAAqB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEzF,oBAAY,aAAa;IACvB,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC3F;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAoDD,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IAC/C,MAAM,CAAC,OAAO,uBAAiB;IAC/B,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CA8Bd;AAKD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,uCAAuC,CAAC;AAE3D,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAA8C,MAAM,SAAS,CAAC;AAMpG,eAAO,MAAM,kBAAkB;;;;OAA8C,CAAC;AAE9E,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;CAqDjB,CAAC"}

package/dist/commonjs/banner/lib/Banner.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -42,63 +29,51 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
 var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var common_1 = require("@workday/canvas-kit-react/common");
-var BannerVariant;
-(function (BannerVariant) {
-    BannerVariant[BannerVariant["Full"] = 0] = "Full";
-    BannerVariant[BannerVariant["Sticky"] = 1] = "Sticky";
-})(BannerVariant = exports.BannerVariant || (exports.BannerVariant = {}));
-var BannerWrapper = common_1.styled('button')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium, backgroundColor: tokens_1.colors.cantaloupe400, boxSizing: 'border-box', color: tokens_1.colors.blackPepper400, padding: tokens_1.space.xxs + " " + tokens_1.space.s, textAlign: 'left', border: 0, display: 'flex', alignItems: 'center', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })), '&:hover': {
-        cursor: 'pointer',
-    } }), function (_a) {
-    var error = _a.error, variant = _a.variant;
-    return ({
-        backgroundColor: error === common_1.ErrorType.Error ? tokens_1.colors.cinnamon500 : tokens_1.colors.cantaloupe400,
-        color: error === common_1.ErrorType.Error ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
-        borderRadius: variant === BannerVariant.Sticky ? tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m : tokens_1.borderRadius.m,
-        width: variant === BannerVariant.Sticky ? '222px' : '328px',
-        '&:hover': {
-            backgroundColor: error === common_1.ErrorType.Error ? tokens_1.colors.cinnamon600 : tokens_1.colors.cantaloupe500,
-        },
-    });
-});
-var BannerIcon = common_1.styled(icon_1.SystemIcon)({
-    marginRight: tokens_1.space.xs,
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var hooks_1 = require("./hooks");
+var BannerIcon_1 = require("./BannerIcon");
+var BannerLabel_1 = require("./BannerLabel");
+var BannerActionText_1 = require("./BannerActionText");
+exports.BannerModelContext = React.createContext({});
+// Remove color from our type since it is set on the Flex style attribute
+var _a = tokens_1.type.levels.subtext.large, _color = _a.color, typeLevelsSubtextLarge = __rest(_a, ["color"]);
+var styles = __assign(__assign(__assign({}, typeLevelsSubtextLarge), { cursor: 'pointer', fontWeight: tokens_1.type.properties.fontWeights.medium, textAlign: 'left', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }), common_1.hideMouseFocus);
+exports.Banner = common_1.createComponent('button')({
+    displayName: 'Banner',
+    Component: function (_a, ref, Element) {
+        var _b;
+        var children = _a.children, model = _a.model, props = __rest(_a, ["children", "model"]);
+        var hasError = props.hasError, isSticky = props.isSticky, id = props.id, elemProps = __rest(props, ["hasError", "isSticky", "id"]);
+        var value = common_1.useDefaultModel(model, { hasError: hasError, isSticky: isSticky, id: id }, hooks_1.useBannerModel);
+        var palette = hooks_1.useThemedPalette(hasError ? 'error' : 'alert');
+        var themedBackgroundStyles = {
+            '&:hover': {
+                backgroundColor: palette.hover,
+            },
+        };
+        var isRTL = common_1.useIsRTL();
+        var borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
+        var borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
+        var borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
+        var borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
+        var borderStyleProps = (_b = {},
+            _b[borderBottomLeftRadius] = tokens_1.borderRadius.m,
+            _b[borderTopLeftRadius] = tokens_1.borderRadius.m,
+            _b[borderBottomRightRadius] = isSticky ? 0 : tokens_1.borderRadius.m,
+            _b[borderTopRightRadius] = isSticky ? 0 : tokens_1.borderRadius.m,
+            _b);
+        var bannerProps = hooks_1.useBanner(value, elemProps, ref);
+        return (core_1.jsx(exports.BannerModelContext.Provider, { value: value },
+            core_1.jsx(layout_1.Flex, __assign({ as: Element, width: isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: tokens_1.space.xxs + " " + tokens_1.space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, bannerProps), children)));
+    },
+    subComponents: {
+        Icon: BannerIcon_1.BannerIcon,
+        Label: BannerLabel_1.BannerLabel,
+        ActionText: BannerActionText_1.BannerActionText,
+    },
 });
-var BannerLabel = common_1.styled('div')({
-    flex: 1,
-});
-var BannerViewAll = common_1.styled('span')({
-    textDecoration: 'underline',
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        display: variant === BannerVariant.Sticky ? 'none' : undefined,
-    });
-});
-var Banner = /** @class */ (function (_super) {
-    __extends(Banner, _super);
-    function Banner() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Banner.prototype.render = function () {
-        var _a = this.props, _b = _a.actionText, actionText = _b === void 0 ? 'View All' : _b, _c = _a.variant, variant = _c === void 0 ? BannerVariant.Full : _c, _d = _a.error, error = _d === void 0 ? common_1.ErrorType.Alert : _d, label = _a.label, onClick = _a.onClick, props = __rest(_a, ["actionText", "variant", "error", "label", "onClick"]);
-        var bannerIcon = error === common_1.ErrorType.Error ? canvas_system_icons_web_1.exclamationCircleIcon : canvas_system_icons_web_1.exclamationTriangleIcon;
-        var iconColor = error === common_1.ErrorType.Error ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400;
-        var iconSize = 24;
-        return (React.createElement(BannerWrapper, __assign({ "aria-label": actionText + ': ' + label, role: "button", variant: variant, tabIndex: 0, onClick: onClick, error: error }, props),
-            React.createElement(BannerIcon, { icon: bannerIcon, color: iconColor, colorHover: iconColor, size: iconSize }),
-            React.createElement(BannerLabel, null, label),
-            React.createElement(BannerViewAll, { variant: variant }, actionText)));
-    };
-    Banner.Variant = BannerVariant;
-    Banner.ErrorType = common_1.ErrorType;
-    return Banner;
-}(React.Component));
-Banner.Variant = BannerVariant;
-Banner.ErrorType = common_1.ErrorType;
-exports.default = Banner;

package/dist/commonjs/banner/lib/BannerActionText.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { BannerModel } from './hooks';
+export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner action.
+     * @default 'View All'
+     */
+    children?: React.ReactNode;
+}
+export declare const BannerActionText: import("../../common").ElementComponent<"span", BannerActionTextProps>;
+//# sourceMappingURL=BannerActionText.d.ts.map

package/dist/commonjs/banner/lib/BannerActionText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerActionText.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerActionText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAI1D,OAAO,EAAC,WAAW,EAAsB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,gBAAgB,wEAqB3B,CAAC"}

package/dist/commonjs/banner/lib/BannerActionText.js

@@ -0,0 +1,42 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
+var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var Banner_1 = require("./Banner");
+var hooks_1 = require("./hooks");
+var styles = {
+    textDecoration: 'underline',
+};
+exports.BannerActionText = common_1.createComponent('span')({
+    displayName: 'Banner.ActionTextText',
+    Component: function (_a, ref, Element) {
+        var _b = _a.children, children = _b === void 0 ? 'View All' : _b, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
+        var localModel = common_1.useModelContext(Banner_1.BannerModelContext, model);
+        var props = hooks_1.useBannerActionText(localModel, elemProps, ref);
+        return (core_1.jsx(common_2.Box, __assign({ display: localModel.state.isSticky ? 'none' : 'inline', as: Element, css: [styles] }, props), children));
+    },
+});

package/dist/commonjs/banner/lib/BannerIcon.d.ts

@@ -0,0 +1,14 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { BannerModel } from './hooks';
+export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+    model?: BannerModel;
+    /**
+     * Icon to show next to label
+     * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
+     */
+    icon?: CanvasSystemIcon;
+}
+export declare const BannerIcon: import("../../common").ElementComponent<"span", BannerIconProps>;
+//# sourceMappingURL=BannerIcon.d.ts.map

package/dist/commonjs/banner/lib/BannerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAEhG,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAC,WAAW,EAAgB,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAMD,eAAO,MAAM,UAAU,kEAarB,CAAC"}

package/dist/commonjs/banner/lib/BannerIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var Banner_1 = require("./Banner");
+var hooks_1 = require("./hooks");
+var styles = {
+    marginRight: tokens_1.space.xs,
+};
+exports.BannerIcon = common_1.createComponent('span')({
+    displayName: 'Banner.Icon',
+    Component: function (_a, ref) {
+        var _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.exclamationTriangleIcon : _b, model = _a.model, elemProps = __rest(_a, ["icon", "model"]);
+        var themeRTL = common_2.useThemeRTL().themeRTL;
+        var localModel = common_1.useModelContext(Banner_1.BannerModelContext, model);
+        // SystemIcon is still a class based component so we need to set ref manually.
+        var _c = hooks_1.useBannerIcon(localModel, elemProps, ref), iconRef = _c.ref, defaultIcon = _c.icon, props = __rest(_c, ["ref", "icon"]);
+        return (core_1.jsx(icon_1.SystemIcon, __assign({ icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconRef: iconRef, css: themeRTL(styles) }, props)));
+    },
+});

package/dist/commonjs/banner/lib/BannerLabel.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel } from './hooks';
+export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner.
+     */
+    children: React.ReactNode;
+}
+export declare const BannerLabel: import("../../common").ElementComponent<"div", BannerLabelProps>;
+//# sourceMappingURL=BannerLabel.d.ts.map

package/dist/commonjs/banner/lib/BannerLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerLabel.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,IAAI,EAAC,MAAM,uCAAuC,CAAC;AAG3D,OAAO,EAAC,WAAW,EAAiB,MAAM,SAAS,CAAC;AAEpD,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACxE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,kEAYtB,CAAC"}