@workday/canvas-kit-react 8.5.0-339-next.0 → 8.5.0-342-next.2

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

@@ -7,7 +7,38 @@ export interface BannerProps extends ExtractProps<typeof Flex, never> {
      */
     children?: React.ReactNode;
 }
-export declare const Banner: import("../../common").ElementComponentM<"button", BannerProps & Partial<{
+/**
+ * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
+ * a `BannerModel` and sharing it with its subcomponents using React context.
+ *
+ * ```tsx
+ * <Banner
+ * 	isSticky={true}
+ * 	hasError={true}
+ * 	id='custom-banner-id'
+ * 	onClick={() => console.log('clicked banner')}
+ * >
+ *   {Child components}
+ * </Banner>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBannerModel({
+ *   isSticky: true,
+ *   hasError: true,
+ *   id: 'custom-banner-id',
+ * });
+ *
+ * return (
+ *   <Banner onClick={() => console.log('clicked banner')} model={model}>
+ *     {Child components}
+ *   </Banner>
+ * );
+ * ```
+ */
+export declare const Banner: import("@workday/canvas-kit-react/common").ElementComponentM<"button", BannerProps & Partial<{
     hasError: boolean;
     isSticky: boolean;
     id: string;
@@ -19,7 +50,15 @@ export declare const Banner: import("../../common").ElementComponentM<"button",
     };
     events: {};
 }> & {
-    Icon: import("../../common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
+    /**
+     * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
+     * exclamationCircleIcon when the model's hasError is true.
+     *
+     * ```tsx
+     * <Banner.Icon />
+     * ```
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
         state: {
             id: string;
             hasError: boolean;
@@ -27,7 +66,15 @@ export declare const Banner: import("../../common").ElementComponentM<"button",
         };
         events: {};
     }>;
-    Label: import("../../common").ElementComponentM<"div", import("./BannerLabel").BannerLabelProps, {
+    /**
+     * `Banner.Label` is a styled {@link Flex}. This component will get an id that will be used for
+     * the aria-describedby on the top level `<button>`.
+     *
+     * ```tsx
+     * <Banner.Label>3 Warnings</Banner.Label>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./BannerLabel").BannerLabelProps, {
         state: {
             id: string;
             hasError: boolean;
@@ -35,7 +82,16 @@ export declare const Banner: import("../../common").ElementComponentM<"button",
         };
         events: {};
     }>;
-    ActionText: import("../../common").ElementComponentM<"span", import("./BannerActionText").BannerActionTextProps, {
+    /**
+     * `Banner.ActionText` is a styled {@link Box}. This component will get an id that will be used
+     * for the aria-labelledby on the top level `<button>`. This component will be visually hidden
+     * when the model's `isSticky` prop is set to true.
+     *
+     * ```tsx
+     * <Banner.ActionText>Custom call to action</Banner.ActionText>
+     * ```
+     */
+    ActionText: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./BannerActionText").BannerActionTextProps, {
         state: {
             id: string;
             hasError: boolean;

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":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAKf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CA4CL,CAAC"}

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

@@ -34,13 +34,69 @@ var BannerIcon_1 = require("./BannerIcon");
 var BannerLabel_1 = require("./BannerLabel");
 var BannerActionText_1 = require("./BannerActionText");
 var styles = __assign({ cursor: 'pointer', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }, common_1.hideMouseFocus);
+/**
+ * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
+ * a `BannerModel` and sharing it with its subcomponents using React context.
+ *
+ * ```tsx
+ * <Banner
+ * 	isSticky={true}
+ * 	hasError={true}
+ * 	id='custom-banner-id'
+ * 	onClick={() => console.log('clicked banner')}
+ * >
+ *   {Child components}
+ * </Banner>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBannerModel({
+ *   isSticky: true,
+ *   hasError: true,
+ *   id: 'custom-banner-id',
+ * });
+ *
+ * return (
+ *   <Banner onClick={() => console.log('clicked banner')} model={model}>
+ *     {Child components}
+ *   </Banner>
+ * );
+ * ```
+ */
 exports.Banner = common_1.createContainer('button')({
     displayName: 'Banner',
     modelHook: hooks_1.useBannerModel,
     elemPropsHook: hooks_1.useBanner,
     subComponents: {
+        /**
+         * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
+         * exclamationCircleIcon when the model's hasError is true.
+         *
+         * ```tsx
+         * <Banner.Icon />
+         * ```
+         */
         Icon: BannerIcon_1.BannerIcon,
+        /**
+         * `Banner.Label` is a styled {@link Flex}. This component will get an id that will be used for
+         * the aria-describedby on the top level `<button>`.
+         *
+         * ```tsx
+         * <Banner.Label>3 Warnings</Banner.Label>
+         * ```
+         */
         Label: BannerLabel_1.BannerLabel,
+        /**
+         * `Banner.ActionText` is a styled {@link Box}. This component will get an id that will be used
+         * for the aria-labelledby on the top level `<button>`. This component will be visually hidden
+         * when the model's `isSticky` prop is set to true.
+         *
+         * ```tsx
+         * <Banner.ActionText>Custom call to action</Banner.ActionText>
+         * ```
+         */
         ActionText: BannerActionText_1.BannerActionText,
     },
 })(function (_a, Element, model) {

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

@@ -8,7 +8,7 @@ export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
      */
     children?: React.ReactNode;
 }
-export declare const BannerActionText: import("../../common").ElementComponentM<"span", BannerActionTextProps, {
+export declare const BannerActionText: import("@workday/canvas-kit-react/common").ElementComponentM<"span", BannerActionTextProps, {
     state: {
         id: string;
         hasError: boolean;

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

@@ -4,11 +4,10 @@ import { CanvasSystemIcon } from '@workday/design-assets-types';
 export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
     /**
      * Icon to show next to label
-     * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
      */
     icon?: CanvasSystemIcon;
 }
-export declare const BannerIcon: import("../../common").ElementComponentM<"span", BannerIconProps, {
+export declare const BannerIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", BannerIconProps, {
     state: {
         id: string;
         hasError: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAMD,eAAO,MAAM,UAAU;;;;;;;EAQrB,CAAC"}
+{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAMD,eAAO,MAAM,UAAU;;;;;;;EAQrB,CAAC"}

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

@@ -7,7 +7,7 @@ export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
      */
     children: React.ReactNode;
 }
-export declare const BannerLabel: import("../../common").ElementComponentM<"div", BannerLabelProps, {
+export declare const BannerLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"div", BannerLabelProps, {
     state: {
         id: string;
         hasError: boolean;

package/dist/commonjs/banner/lib/hooks/useBanner.d.ts

@@ -9,7 +9,7 @@ export declare const useBanner: <P extends {}, R>(model: {
         isSticky: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     'aria-describedby': string;
     'aria-labelledby': string;
 } & P & (R extends HTMLOrSVGElement ? {

package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts

@@ -9,7 +9,7 @@ export declare const useBannerActionText: <P extends {}, R>(model: {
         isSticky: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     id: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts

@@ -9,7 +9,7 @@ export declare const useBannerIcon: <P extends {}, R>(model: {
         isSticky: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     icon: import("@workday/design-assets-types").CanvasSystemIcon;
     color: string | undefined;
     colorHover: string | undefined;

package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts

@@ -9,7 +9,7 @@ export declare const useBannerLabel: <P extends {}, R>(model: {
         isSticky: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     id: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts

@@ -41,7 +41,7 @@ export declare const useBannerModel: (<TT_Special_Generic>(config?: (Partial<{
         isSticky: boolean;
     };
     events: {};
-}) & import("../../../common").ModelExtras<{
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
     /**
      * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
      * will be `exclamationCircleIcon`, and a themed error color will be applied.