@workday/canvas-kit-labs-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -1,17 +1,15 @@
-export declare const useExpandableTarget: <P extends {}, R>(model: {
+export declare const useExpandableTarget: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         id: string;
-        visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, {
     'aria-controls': string;
     'aria-expanded': boolean;
     onClick: (event: React.MouseEvent) => void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useExpandableTarget.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useExpandableTarget.d.ts","sourceRoot":"","sources":["../../../../../expandable/lib/hooks/useExpandableTarget.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;qBAIX,gBAAgB;;;OAQnC,CAAC"}
+{"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

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

package/dist/es6/index.d.ts

@@ -1,7 +1,4 @@
 export * from './combobox';
-export * from './common';
-export * from './drawer';
 export * from './expandable';
 export * from './search-form';
-export * from './toast';
 //# 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,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,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,6 +1,3 @@
 export * from './combobox';
-export * from './common';
-export * from './drawer';
 export * from './expandable';
 export * from './search-form';
-export * from './toast';

package/dist/es6/search-form/lib/SearchForm.d.ts

@@ -78,6 +78,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
      * @default false
      */
     allowEmptyStringSearch?: boolean;
+    /**
+     * Sets the `id` for the label
+     * @default unique identifier
+     */
+    labelId?: string;
 }
 export interface SearchFormState {
     showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
     static Theme: typeof SearchTheme;
     private inputRef;
     private openRef;
-    private labelId;
+    private defaultLabelId;
     state: Readonly<SearchFormState>;
     private getTheme;
     private getThemeColors;

package/dist/es6/search-form/lib/SearchForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAmLD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,mBAAmB,CAAC,SAAS,CAAC,CAOpD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAmGP"}
+{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAmLD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,cAAc,CAAsB;IAE5C,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,mBAAmB,CAAC,SAAS,CAAC,CAOpD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAoGP"}

package/dist/es6/search-form/lib/SearchForm.js

@@ -1,38 +1,3 @@
-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 (Object.prototype.hasOwnProperty.call(b, 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++) {
-            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;
-};
 import * as React from 'react';
 import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
 import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
@@ -54,19 +19,18 @@ function getInputColors(theme, isFocused) {
         boxShadow: isFocused && theme.boxShadowFocus ? theme.boxShadowFocus : theme.boxShadow,
     };
 }
-var formCollapsedBackground = colors.frenchVanilla100;
-var maxWidth = 480;
-var minWidth = 120;
-var StyledSearchForm = styled('form')({
+const formCollapsedBackground = colors.frenchVanilla100;
+const maxWidth = 480;
+const minWidth = 120;
+const StyledSearchForm = styled('form')({
     position: 'relative',
     flexGrow: 1,
     display: 'flex',
     alignItems: 'center',
     marginLeft: space.m,
     minWidth: minWidth,
-}, function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm, rightAlign = _a.rightAlign, grow = _a.grow;
-    var collapseStyles = isCollapsed
+}, ({ isCollapsed, showForm, rightAlign, grow }) => {
+    const collapseStyles = isCollapsed
         ? {
             top: 0,
             right: 0,
@@ -82,34 +46,30 @@ var StyledSearchForm = styled('form')({
             zIndex: 1,
         }
         : {};
-    var rightAlignStyles = rightAlign
+    const rightAlignStyles = rightAlign
         ? {
             textAlign: 'right',
             maxWidth: grow ? '100%' : maxWidth,
         }
         : {};
-    return __assign(__assign({}, rightAlignStyles), collapseStyles);
+    return { ...rightAlignStyles, ...collapseStyles };
 });
-var SearchContainer = styled('div')({
-    position: "relative",
+const SearchContainer = styled('div')({
+    position: `relative`,
     display: 'flex',
     alignItems: 'center',
-    width: "100%",
+    width: `100%`,
     textAlign: 'left',
-}, function (_a) {
-    var height = _a.height;
-    return ({
-        minHeight: height,
-    });
-});
-var SearchCombobox = styled(Combobox)({
-    width: "100%",
+}, ({ height }) => ({
+    minHeight: height,
+}));
+const SearchCombobox = styled(Combobox)({
+    width: `100%`,
 });
-var SearchIcon = styled(TertiaryButton)(function (_a) {
-    var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
+const SearchIcon = styled(TertiaryButton)(({ isCollapsed, isHidden }) => {
     return {
-        position: "absolute",
-        margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs,
+        position: `absolute`,
+        margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
         top: 0,
         bottom: 0,
         left: 0,
@@ -118,19 +78,25 @@ var SearchIcon = styled(TertiaryButton)(function (_a) {
         display: isHidden ? 'none' : 'flex',
     };
 });
-var CloseButton = styled(TertiaryButton)(function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
-    var collapseStyles = isCollapsed && showForm
+const CloseButton = styled(TertiaryButton)(({ isCollapsed, showForm }) => {
+    const collapseStyles = isCollapsed && showForm
         ? {
             display: 'inline-block',
         }
         : {
             display: 'none',
         };
-    return __assign({ position: "absolute", top: 0, bottom: 0, right: 0, margin: "auto " + space.xxs, zIndex: 3 }, collapseStyles);
+    return {
+        position: `absolute`,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        margin: `auto ${space.xxs}`,
+        zIndex: 3,
+        ...collapseStyles,
+    };
 });
-var SearchField = styled(FormField)(function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm, grow = _a.grow, height = _a.height;
+const SearchField = styled(FormField)(({ isCollapsed, showForm, grow, height }) => {
     return {
         display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
         width: '100%',
@@ -142,16 +108,15 @@ var SearchField = styled(FormField)(function (_a) {
         },
     };
 });
-var SearchInput = styled(TextInput)(function (_a) {
-    var isCollapsed = _a.isCollapsed, inputColors = _a.inputColors, grow = _a.grow, height = _a.height;
-    var collapseStyles = isCollapsed
+const SearchInput = styled(TextInput)(({ isCollapsed, inputColors, grow, height }) => {
+    const collapseStyles = isCollapsed
         ? {
             fontSize: '20px',
             paddingLeft: spaceNumbers.xl + spaceNumbers.s,
             paddingRight: spaceNumbers.xl + spaceNumbers.s,
             maxWidth: 'none',
             minWidth: 0,
-            backgroundColor: "rgba(0, 0, 0, 0)",
+            backgroundColor: `rgba(0, 0, 0, 0)`,
             height: height,
         }
         : {
@@ -162,11 +127,22 @@ var SearchInput = styled(TextInput)(function (_a) {
             backgroundColor: inputColors.background,
             height: height,
         };
-    return __assign({ fontSize: '14px', boxShadow: inputColors.boxShadow, color: inputColors.color, border: 'none', WebkitAppearance: 'none', transition: 'background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms', zIndex: 2, width: '100%', '&::-webkit-search-cancel-button': {
+    return {
+        fontSize: '14px',
+        boxShadow: inputColors.boxShadow,
+        color: inputColors.color,
+        border: 'none',
+        WebkitAppearance: 'none',
+        transition: 'background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms',
+        zIndex: 2,
+        width: '100%',
+        '&::-webkit-search-cancel-button': {
             display: 'none',
-        }, '&::placeholder': {
+        },
+        '&::placeholder': {
             color: inputColors.placeholderColor,
-        }, '&:not([disabled])': {
+        },
+        '&:not([disabled])': {
             '&:focus, &:active': {
                 outline: 'none',
                 boxShadow: inputColors.boxShadow,
@@ -174,93 +150,93 @@ var SearchInput = styled(TextInput)(function (_a) {
             '&:hover': {
                 backgroundColor: inputColors.backgroundHover,
             },
-        } }, collapseStyles);
+        },
+        ...collapseStyles,
+    };
 });
-var SearchForm = /** @class */ (function (_super) {
-    __extends(SearchForm, _super);
-    function SearchForm() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.inputRef = React.createRef();
-        _this.openRef = React.createRef();
-        _this.labelId = generateUniqueId();
-        _this.state = {
+export class SearchForm extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.inputRef = React.createRef();
+        this.openRef = React.createRef();
+        this.defaultLabelId = generateUniqueId();
+        this.state = {
             showForm: false,
             searchQuery: '',
             isFocused: false,
         };
-        _this.getTheme = function () {
-            var theme;
-            if (typeof _this.props.searchTheme === 'number') {
-                theme = searchThemes[_this.props.searchTheme];
+        this.getTheme = () => {
+            let theme;
+            if (typeof this.props.searchTheme === 'number') {
+                theme = searchThemes[this.props.searchTheme];
             }
-            else if (_this.props.searchTheme) {
-                theme = _this.props.searchTheme;
+            else if (this.props.searchTheme) {
+                theme = this.props.searchTheme;
             }
             else {
                 theme = searchThemes[SearchTheme.Light];
             }
             return theme;
         };
-        _this.getThemeColors = function () {
-            var theme = _this.props.isCollapsed && _this.state.showForm
+        this.getThemeColors = () => {
+            const theme = this.props.isCollapsed && this.state.showForm
                 ? searchThemes[SearchTheme.Transparent]
-                : _this.getTheme();
-            return getInputColors(theme, _this.state.isFocused);
+                : this.getTheme();
+            return getInputColors(theme, this.state.isFocused);
         };
-        _this.getIconButtonType = function () {
-            var background = _this.getThemeColors().background || "#fff";
-            if (_this.props.isCollapsed && _this.state.showForm) {
+        this.getIconButtonType = () => {
+            let background = this.getThemeColors().background || `#fff`;
+            if (this.props.isCollapsed && this.state.showForm) {
                 background = formCollapsedBackground;
             }
-            var isDarkBackground = chroma(background).get('lab.l') < 70;
+            const isDarkBackground = chroma(background).get('lab.l') < 70;
             return isDarkBackground ? 'inverse' : undefined;
         };
-        _this.handleSubmit = function (event) {
+        this.handleSubmit = (event) => {
             event.preventDefault();
-            if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
-                _this.props.onSubmit(event);
+            if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
+                this.props.onSubmit(event);
             }
             else {
-                _this.focusInput();
+                this.focusInput();
             }
         };
-        _this.openCollapsedSearch = function () {
-            if (_this.props.isCollapsed && !_this.state.showForm) {
-                _this.setState({ showForm: true });
+        this.openCollapsedSearch = () => {
+            if (this.props.isCollapsed && !this.state.showForm) {
+                this.setState({ showForm: true });
             }
         };
-        _this.closeCollapsedSearch = function () {
-            if (_this.props.isCollapsed && _this.state.showForm) {
-                _this.setState({ showForm: false });
+        this.closeCollapsedSearch = () => {
+            if (this.props.isCollapsed && this.state.showForm) {
+                this.setState({ showForm: false });
             }
         };
-        _this.focusInput = function () {
-            if (_this.inputRef.current) {
-                _this.inputRef.current.focus();
+        this.focusInput = () => {
+            if (this.inputRef.current) {
+                this.inputRef.current.focus();
             }
         };
-        _this.focusOpen = function () {
-            if (_this.openRef.current) {
-                _this.openRef.current.focus();
+        this.focusOpen = () => {
+            if (this.openRef.current) {
+                this.openRef.current.focus();
             }
         };
-        _this.handleFocus = function () {
-            _this.setState({ isFocused: true });
+        this.handleFocus = () => {
+            this.setState({ isFocused: true });
         };
-        _this.handleBlur = function () {
-            _this.setState({ isFocused: false });
+        this.handleBlur = () => {
+            this.setState({ isFocused: false });
         };
-        _this.handleSearchInputChange = function (event) {
+        this.handleSearchInputChange = (event) => {
             event.preventDefault();
-            _this.setState({ searchQuery: event.target.value });
-            if (_this.props.onInputChange) {
-                _this.props.onInputChange(event);
+            this.setState({ searchQuery: event.target.value });
+            if (this.props.onInputChange) {
+                this.props.onInputChange(event);
             }
         };
-        return _this;
     }
-    SearchForm.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var showFormToggled = this.state.showForm !== prevState.showForm;
+    componentDidUpdate(prevProps, prevState) {
+        const showFormToggled = this.state.showForm !== prevState.showForm;
         if (showFormToggled) {
             if (this.state.showForm) {
                 this.focusInput();
@@ -269,19 +245,17 @@ var SearchForm = /** @class */ (function (_super) {
                 this.focusOpen();
             }
         }
-    };
-    SearchForm.prototype.render = function () {
-        var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, _k = _a.allowEmptyStringSearch, allowEmptyStringSearch = _k === void 0 ? false : _k, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign", "allowEmptyStringSearch"]);
-        return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
+    }
+    render() {
+        const { clearButtonAriaLabel = 'Reset Search Form', placeholder = 'Search', inputLabel = 'Search', submitAriaLabel = 'Search', openButtonAriaLabel = 'Open Search', closeButtonAriaLabel = 'Cancel', labelId = this.defaultLabelId, showClearButton = true, height = 40, grow, onSubmit, isCollapsed, onInputChange, autocompleteItems, initialValue, searchTheme, rightAlign, allowEmptyStringSearch = false, ...elemProps } = this.props;
+        return (React.createElement(StyledSearchForm, Object.assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
             React.createElement(SearchContainer, { height: height },
                 React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
                 React.createElement(SearchIcon, { "aria-label": openButtonAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), onClick: this.openCollapsedSearch, ref: this.openRef, type: "button", isHidden: !isCollapsed || (!!isCollapsed && this.state.showForm) }),
-                React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
-                    React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
+                React.createElement(SearchField, { grow: grow, id: labelId, inputId: `input-${labelId}`, label: inputLabel, labelPosition: FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
+                    React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: labelId },
                         React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
                 React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
-    };
-    SearchForm.Theme = SearchTheme;
-    return SearchForm;
-}(React.Component));
-export { SearchForm };
+    }
+}
+SearchForm.Theme = SearchTheme;

package/dist/es6/search-form/lib/themes.js

@@ -1,4 +1,3 @@
-var _a;
 import { focusRing } from '@workday/canvas-kit-react/common';
 import { colors } from '@workday/canvas-kit-react/tokens';
 export var SearchTheme;
@@ -7,8 +6,8 @@ export var SearchTheme;
     SearchTheme[SearchTheme["Dark"] = 1] = "Dark";
     SearchTheme[SearchTheme["Transparent"] = 2] = "Transparent";
 })(SearchTheme || (SearchTheme = {}));
-export var searchThemes = (_a = {},
-    _a[SearchTheme.Transparent] = {
+export const searchThemes = {
+    [SearchTheme.Transparent]: {
         background: 'rgba(0, 0, 0, 0)',
         backgroundFocus: 'rgba(0, 0, 0, 0)',
         color: colors.blackPepper300,
@@ -18,7 +17,7 @@ export var searchThemes = (_a = {},
         boxShadow: 'none',
         boxShadowFocus: 'none',
     },
-    _a[SearchTheme.Light] = {
+    [SearchTheme.Light]: {
         background: colors.soap200,
         backgroundFocus: colors.soap200,
         backgroundHover: colors.soap300,
@@ -27,7 +26,7 @@ export var searchThemes = (_a = {},
         boxShadow: 'none',
         boxShadowFocus: focusRing().boxShadow,
     },
-    _a[SearchTheme.Dark] = {
+    [SearchTheme.Dark]: {
         background: 'rgba(0, 0, 0, 0.2)',
         backgroundFocus: colors.frenchVanilla100,
         color: colors.frenchVanilla100,
@@ -36,4 +35,4 @@ export var searchThemes = (_a = {},
         placeholderColorFocus: colors.licorice300,
         boxShadow: 'none',
     },
-    _a);
+};

package/expandable/lib/Expandable.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} 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 {Flex} from '@workday/canvas-kit-react/layout';
-import {useExpandableModel} from './useExpandableModel';
+import {useExpandableModel} from './hooks/useExpandableModel';
 
 export interface ExpandableProps extends ExtractProps<typeof Flex, never> {
   /**
@@ -18,14 +18,48 @@ export interface ExpandableProps extends ExtractProps<typeof Flex, never> {
   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 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,
-    Content: ExpandableContent,
+    /**
+     * `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,
-    Title: ExpandableTitle,
+    /**
+     * `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,
   },
 })<ExpandableProps>(({children, ...elementProps}, Element) => (
   <Flex as={Element} flexDirection={'column'} padding={'xxs'} {...elementProps}>

package/expandable/lib/ExpandableContent.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import {space} from '@workday/canvas-kit-react/tokens';
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
 import {useExpandableContent} from './hooks/useExpandableContent';
-import {Box} from '@workday/canvas-kit-react/layout';
-import {useExpandableModel} from './useExpandableModel';
+import {useExpandableModel} from './hooks/useExpandableModel';
 
-export interface ExpandableContentProps {
+export interface ExpandableContentProps extends ExtractProps<typeof Box, never> {
   /**
    * The children of the `Expandable.Content` whose visibility is controlled by the associated
    * `Expandable.Target`

package/expandable/lib/ExpandableIcon.tsx

@@ -12,7 +12,8 @@ import {useExpandableIcon} from './hooks/useExpandableIcon';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {IconPositions} from '@workday/canvas-kit-react/button';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {useExpandableModel} from './useExpandableModel';
+
+import {useExpandableModel} from './hooks/useExpandableModel';
 
 export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
   /**

package/expandable/lib/ExpandableTarget.tsx

@@ -8,11 +8,11 @@ import {
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-
-import {useExpandableTarget} from './hooks/useExpandableTarget';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {colors} from '@workday/canvas-kit-react/tokens';
-import {useExpandableModel} from './useExpandableModel';
+
+import {useExpandableTarget} from './hooks/useExpandableTarget';
+import {useExpandableModel} from './hooks/useExpandableModel';
 
 export interface ExpandableTargetProps extends ExtractProps<typeof Flex, never> {
   /**