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

package/dist/es6/expandable/lib/Expandable.d.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface ExpandableProps extends ExtractProps<typeof Flex, never> {
+    /**
+     * The children of the `Expandable` container. This should contain `Expandable.Target` and
+     * `Expandable.Container`
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
+ * `DisclosureModel` for its subcomponents. Alternatively, a model may be passed in using the
+ * hoisted model pattern.
+ */
+export declare const Expandable: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ExpandableProps & Partial<{
+    id: string;
+    initialVisibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+}> & {
+    onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => void) | undefined;
+    onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => void) | undefined;
+} & {
+    shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => boolean) | undefined;
+    shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => boolean) | undefined;
+}, {
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}> & {
+    /**
+     * `Expandable.Target` creates a heading and a button. The heading is a semantic heading to
+     * describe the associated content. The button provides users the ability to toggle the
+     * associated content.
+     *
+     * As according to the [W3 disclosure
+     * specification](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure), the button has
+     * `aria-expanded` and `aria-controls` attributes set by default
+     *
+     * This component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an
+     * `Expandable.Title`.
+     */
+    Target: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./ExpandableTarget").ExpandableTargetProps, {
+        state: {
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    /**
+     * `Expandable.Title` styles the target text that describes the content.
+     */
+    Title: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ExpandableTitle").ExpandableTitleProps>;
+    /**
+     * `Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an
+     * `iconPosition` prop to determine which chevron icon to use.
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./ExpandableIcon").ExpandableIconProps, {
+        state: {
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    /**
+     * `Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative
+     * image.
+     */
+    Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./ExpandableAvatar").ExpandableAvatarProps>;
+    /**
+     * `Expandable.Content` holds the content that will be conditionally expanded and collapsed. It
+     * has an `id` to ensure the `Expandable.Target` properly set it to the `aria-controls`
+     * attribute.
+     */
+    Content: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ExpandableContent").ExpandableContentProps, {
+        state: {
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+};
+//# sourceMappingURL=Expandable.d.ts.map

package/dist/es6/expandable/lib/Expandable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/Expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAStD,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACvE;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAInB;;;;;;;;;;;OAWG;;;;;;;;;;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;;;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;CAOL,CAAC"}

package/dist/es6/expandable/lib/Expandable.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { ExpandableContent } from './ExpandableContent';
+import { ExpandableTarget } from './ExpandableTarget';
+import { ExpandableIcon } from './ExpandableIcon';
+import { ExpandableTitle } from './ExpandableTitle';
+import { ExpandableAvatar } from './ExpandableAvatar';
+import { useExpandableModel } from './hooks/useExpandableModel';
+/**
+ * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
+ * `DisclosureModel` for its subcomponents. Alternatively, a model may be passed in using the
+ * hoisted model pattern.
+ */
+export const Expandable = createContainer('div')({
+    displayName: 'Expandable',
+    modelHook: useExpandableModel,
+    subComponents: {
+        /**
+         * `Expandable.Target` creates a heading and a button. The heading is a semantic heading to
+         * describe the associated content. The button provides users the ability to toggle the
+         * associated content.
+         *
+         * As according to the [W3 disclosure
+         * specification](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure), the button has
+         * `aria-expanded` and `aria-controls` attributes set by default
+         *
+         * This component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an
+         * `Expandable.Title`.
+         */
+        Target: ExpandableTarget,
+        /**
+         * `Expandable.Title` styles the target text that describes the content.
+         */
+        Title: ExpandableTitle,
+        /**
+         * `Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an
+         * `iconPosition` prop to determine which chevron icon to use.
+         */
+        Icon: ExpandableIcon,
+        /**
+         * `Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative
+         * image.
+         */
+        Avatar: ExpandableAvatar,
+        /**
+         * `Expandable.Content` holds the content that will be conditionally expanded and collapsed. It
+         * has an `id` to ensure the `Expandable.Target` properly set it to the `aria-controls`
+         * attribute.
+         */
+        Content: ExpandableContent,
+    },
+})(({ children, ...elementProps }, Element) => (React.createElement(Flex, Object.assign({ as: Element, flexDirection: 'column', padding: 'xxs' }, elementProps), children)));

package/dist/es6/expandable/lib/ExpandableAvatar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Avatar } from '@workday/canvas-kit-react/avatar';
+export interface ExpandableAvatarProps extends Omit<ExtractProps<typeof Avatar, never>, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> {
+}
+export declare const ExpandableAvatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", ExpandableAvatarProps>;
+//# sourceMappingURL=ExpandableAvatar.d.ts.map

package/dist/es6/expandable/lib/ExpandableAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableAvatar.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AACnG,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAGxD,MAAM,WAAW,qBACf,SAAQ,IAAI,CACV,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAClC,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CACpD;CAAG;AAUN,eAAO,MAAM,gBAAgB,8FAK3B,CAAC"}

package/dist/es6/expandable/lib/ExpandableAvatar.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+import { Avatar } from '@workday/canvas-kit-react/avatar';
+import { space } from '@workday/canvas-kit-react/tokens';
+const StyledAvatar = styled(Avatar)({
+    marginRight: space.xxs,
+    flexShrink: 0,
+});
+// When the component is created, it needs to be a button element to match AvatarProps.
+// Once Avatar becomes a `createComponent` we can default the element type to a `div`
+// and the types should be properly extracted
+export const ExpandableAvatar = createComponent('button')({
+    displayName: 'Expandable.Avatar',
+    Component: ({ altText, ...elemProps }, ref) => {
+        return React.createElement(StyledAvatar, Object.assign({ altText: undefined, as: "div", ref: ref, size: 32 }, elemProps));
+    },
+});

package/dist/es6/expandable/lib/ExpandableContent.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+export interface ExpandableContentProps extends ExtractProps<typeof Box, never> {
+    /**
+     * The children of the `Expandable.Content` whose visibility is controlled by the associated
+     * `Expandable.Target`
+     */
+    children?: React.ReactNode;
+}
+export declare const ExpandableContent: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ExpandableContentProps, {
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
+//# sourceMappingURL=ExpandableContent.d.ts.map

package/dist/es6/expandable/lib/ExpandableContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableContent.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,GAAG,EAAC,MAAM,kCAAkC,CAAC;AAKrD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC7E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;EAc5B,CAAC"}

package/dist/es6/expandable/lib/ExpandableContent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { space } from '@workday/canvas-kit-react/tokens';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+import { useExpandableContent } from './hooks/useExpandableContent';
+import { useExpandableModel } from './hooks/useExpandableModel';
+export const ExpandableContent = createSubcomponent('div')({
+    modelHook: useExpandableModel,
+    elemPropsHook: useExpandableContent,
+})(({ children, ...elementProps }, Element) => {
+    return (React.createElement(Box, Object.assign({ as: Element, background: "none", padding: `${space.s} ${space.xxs} ${space.xxs}` }, elementProps), children));
+});

package/dist/es6/expandable/lib/ExpandableIcon.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { IconPositions } from '@workday/canvas-kit-react/button';
+export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+    /**
+     * Icon to display from `@workday/canvas-accent-icons-web`
+     * @default chevronUpIcon
+     */
+    icon?: CanvasSystemIcon;
+    /**
+     * Button icon positions can either be `start` or `end`.
+     * If no value is provided, it defaults to `start`.
+     * @default 'start'
+     */
+    iconPosition?: IconPositions;
+}
+export declare const ExpandableIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", ExpandableIconProps, {
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
+//# sourceMappingURL=ExpandableIcon.d.ts.map

package/dist/es6/expandable/lib/ExpandableIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableIcon.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAK/D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC/F;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAwBD,eAAO,MAAM,cAAc;;;;;;;;;EAqB1B,CAAC"}

package/dist/es6/expandable/lib/ExpandableIcon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { chevronUpIcon, chevronDownIcon } from '@workday/canvas-system-icons-web';
+import { useExpandableIcon } from './hooks/useExpandableIcon';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { colors, space } from '@workday/canvas-kit-react/tokens';
+import { useExpandableModel } from './hooks/useExpandableModel';
+const StyledEndIcon = styled(SystemIcon)({
+    marginLeft: 'auto',
+}, ({ visible }) => ({
+    transform: !visible ? 'rotate(-180deg)' : undefined,
+    padding: !visible
+        ? `${space.xxxs} ${space.xs} ${space.xxxs} ${space.xxxs}`
+        : `${space.xxxs} ${space.xxxs} ${space.xxxs} ${space.xs}`,
+}));
+const StyledStartIcon = styled(SystemIcon)({
+    margin: `0 ${space.xxs} 0 0`,
+    padding: space.xxxs,
+}, ({ visible }) => ({
+    transform: !visible ? 'rotate(-90deg)' : undefined,
+}));
+export const ExpandableIcon = createSubcomponent('span')({
+    modelHook: useExpandableModel,
+    elemPropsHook: useExpandableIcon,
+})(({ icon, visible, iconPosition = 'start', ...elementProps }, Element) => iconPosition === 'end' ? (React.createElement(StyledEndIcon, Object.assign({ as: Element, fill: colors.licorice200, icon: icon || chevronUpIcon, visible: visible }, elementProps))) : (React.createElement(StyledStartIcon, Object.assign({ as: Element, fill: colors.licorice200, icon: icon || chevronDownIcon, visible: visible }, elementProps))));

package/dist/es6/expandable/lib/ExpandableTarget.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface ExpandableTargetProps extends ExtractProps<typeof Flex, never> {
+    /**
+     * Children of the `Expandable.Target`. Should contain `Target.Title`, an optional `Target.Avatar`
+     * and `Target.Icon` with an `iconPosition` prop that takes a value of either `start` or `end`.
+     * `Target.Icon` with `start` is meant to be placed before the `Target.Title` and `Target.Icon`
+     * `end` should be placed after.
+     */
+    children: React.ReactNode;
+    /**
+     * This specifies the semantic heading level that will wrap the `Expandable.Target`'s button. If not
+     * defined, then nothing will wrap the button.
+     */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export declare const ExpandableTarget: import("@workday/canvas-kit-react/common").ElementComponentM<"button", ExpandableTargetProps, {
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }; /**
+     * Children of the `Expandable.Target`. Should contain `Target.Title`, an optional `Target.Avatar`
+     * and `Target.Icon` with an `iconPosition` prop that takes a value of either `start` or `end`.
+     * `Target.Icon` with `start` is meant to be placed before the `Target.Title` and `Target.Icon`
+     * `end` should be placed after.
+     */
+    events: {
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
+//# sourceMappingURL=ExpandableTarget.d.ts.map

package/dist/es6/expandable/lib/ExpandableTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableTarget.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC7E;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACxD;AAiBD,eAAO,MAAM,gBAAgB;;;;OA7B3B;;;;;OAKG;;;;;EA4CH,CAAC"}

package/dist/es6/expandable/lib/ExpandableTarget.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createSubcomponent, focusRing, hideMouseFocus, styled, } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { colors } from '@workday/canvas-kit-react/tokens';
+import { useExpandableTarget } from './hooks/useExpandableTarget';
+import { useExpandableModel } from './hooks/useExpandableModel';
+const StyledButton = styled(Flex.as('button'))({
+    cursor: 'pointer',
+    '&:focus': {
+        ...focusRing(),
+    },
+    '&:hover': {
+        background: colors.soap300,
+    },
+    ...hideMouseFocus,
+});
+const Heading = styled('h1')({
+    margin: 0,
+});
+export const ExpandableTarget = createSubcomponent('button')({
+    modelHook: useExpandableModel,
+    elemPropsHook: useExpandableTarget,
+})(({ children, headingLevel, ...elementProps }, Element) => {
+    const button = (React.createElement(StyledButton, Object.assign({ as: Element, background: "none", border: "none", borderRadius: "m", flexDirection: "row", padding: "xxs", width: "100%" }, elementProps), children));
+    return !!headingLevel ? React.createElement(Heading, { as: headingLevel }, button) : button;
+});

package/dist/es6/expandable/lib/ExpandableTitle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+export interface ExpandableTitleProps extends ExtractProps<typeof Box, never> {
+    /**
+     * Children of the `Expandable.Title`. This should contain a string for the title
+     */
+    children: React.ReactNode;
+}
+export declare const ExpandableTitle: import("@workday/canvas-kit-react/common").ElementComponent<"div", ExpandableTitleProps>;
+//# sourceMappingURL=ExpandableTitle.d.ts.map

package/dist/es6/expandable/lib/ExpandableTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableTitle.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,GAAG,EAAC,MAAM,kCAAkC,CAAC;AAGrD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,0FAkB1B,CAAC"}

package/dist/es6/expandable/lib/ExpandableTitle.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+import { colors, space, type } from '@workday/canvas-kit-react/tokens';
+export const ExpandableTitle = createComponent('div')({
+    displayName: 'Expandable.Title',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Box, Object.assign({ as: Element, ref: ref }, type.levels.body.medium, { fontWeight: type.properties.fontWeights.bold, color: colors.blackPepper400, padding: `2px ${space.zero} 2px`, textAlign: "left" }, elemProps), children));
+    },
+});

package/dist/es6/expandable/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useExpandableContent';
+export * from './useExpandableIcon';
+export * from './useExpandableModel';
+export * from './useExpandableTarget';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/expandable/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../expandable/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}

package/dist/es6/expandable/lib/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useExpandableContent';
+export * from './useExpandableIcon';
+export * from './useExpandableModel';
+export * from './useExpandableTarget';

package/dist/es6/expandable/lib/hooks/useExpandableContent.d.ts

@@ -0,0 +1,18 @@
+export declare const useExpandableContent: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, {
+    style: {
+        display?: undefined;
+    } | {
+        display: string;
+    };
+    id: string;
+}>;
+//# sourceMappingURL=useExpandableContent.d.ts.map

package/dist/es6/expandable/lib/hooks/useExpandableContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandableContent.d.ts","sourceRoot":"","sources":["../../../../../expandable/lib/hooks/useExpandableContent.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;EAK/B,CAAC"}

package/dist/es6/expandable/lib/hooks/useExpandableContent.js

@@ -0,0 +1,8 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useExpandableModel } from './useExpandableModel';
+export const useExpandableContent = createElemPropsHook(useExpandableModel)(({ state }) => {
+    return {
+        style: state.visibility !== 'hidden' ? {} : { display: 'none' },
+        id: state.id,
+    };
+});

package/dist/es6/expandable/lib/hooks/useExpandableIcon.d.ts

@@ -0,0 +1,13 @@
+export declare const useExpandableIcon: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, {
+    visible: boolean;
+}>;
+//# sourceMappingURL=useExpandableIcon.d.ts.map

package/dist/es6/expandable/lib/hooks/useExpandableIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandableIcon.d.ts","sourceRoot":"","sources":["../../../../../expandable/lib/hooks/useExpandableIcon.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;;;;;;;;EAI5B,CAAC"}

package/dist/es6/expandable/lib/hooks/useExpandableIcon.js

@@ -0,0 +1,7 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useExpandableModel } from './useExpandableModel';
+export const useExpandableIcon = createElemPropsHook(useExpandableModel)(({ state }) => {
+    return {
+        visible: state.visibility !== 'hidden',
+    };
+});

package/dist/es6/expandable/lib/hooks/useExpandableModel.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The `ExpandableModel` extends the `DisclosureModel`
+ */
+export declare const useExpandableModel: (<TT_Special_Generic>(config?: (Partial<{
+    id: string;
+    initialVisibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+}> & {
+    onShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => void) | undefined;
+    onHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => void) | undefined;
+} & {
+    shouldShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => boolean) | undefined;
+    shouldHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    }) => boolean) | undefined;
+}) | undefined) => {
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    id: string;
+    initialVisibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+}, {}, {
+    id: string;
+    visibility: "hidden" | "visible";
+}, {
+    show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+}, {
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
+//# sourceMappingURL=useExpandableModel.d.ts.map

package/dist/es6/expandable/lib/hooks/useExpandableModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandableModel.d.ts","sourceRoot":"","sources":["../../../../../expandable/lib/hooks/useExpandableModel.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAa7B,CAAC"}

package/dist/es6/expandable/lib/hooks/useExpandableModel.js

@@ -0,0 +1,19 @@
+import { createModelHook } from '@workday/canvas-kit-react/common';
+import { useDisclosureModel } from '@workday/canvas-kit-react/disclosure';
+/**
+ * The `ExpandableModel` extends the `DisclosureModel`
+ */
+export const useExpandableModel = createModelHook({
+    defaultConfig: {
+        ...useDisclosureModel.defaultConfig,
+    },
+})(config => {
+    const disclosure = useDisclosureModel(config);
+    const state = {
+        ...disclosure.state,
+    };
+    const events = {
+        ...disclosure.events,
+    };
+    return { state, events };
+});

package/dist/es6/expandable/lib/hooks/useExpandableTarget.d.ts

@@ -0,0 +1,15 @@
+export declare const useExpandableTarget: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, {
+    'aria-controls': string;
+    'aria-expanded': boolean;
+    onClick: (event: React.MouseEvent) => void;
+}>;
+//# sourceMappingURL=useExpandableTarget.d.ts.map

package/dist/es6/expandable/lib/hooks/useExpandableTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandableTarget.d.ts","sourceRoot":"","sources":["../../../../../expandable/lib/hooks/useExpandableTarget.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;qBAIX,gBAAgB;EAQnC,CAAC"}

package/dist/es6/expandable/lib/hooks/useExpandableTarget.js

@@ -0,0 +1,16 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useExpandableModel } from './useExpandableModel';
+export const useExpandableTarget = createElemPropsHook(useExpandableModel)(({ state, events }) => {
+    return {
+        'aria-controls': state.id,
+        'aria-expanded': state.visibility !== 'hidden',
+        onClick: (event) => {
+            if (state.visibility !== 'hidden') {
+                events.hide(event);
+            }
+            else {
+                events.show(event);
+            }
+        },
+    };
+});

package/dist/es6/index.d.ts

@@ -1,5 +1,4 @@
 export * from './combobox';
-export * from './common';
-export * from './drawer';
+export * from './expandable';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/es6/index.js

@@ -1,4 +1,3 @@
 export * from './combobox';
-export * from './common';
-export * from './drawer';
+export * from './expandable';
 export * from './search-form';