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

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
-import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
 import { SearchTheme, SearchThemeAttributes } from './themes';
 export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
     /**
@@ -20,7 +19,7 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
     /**
      * The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
      */
-    autocompleteItems?: React.ReactElement<MenuItemProps>[];
+    autocompleteItems?: React.ReactElement<any>[];
     /**
      * The theme of the header the search input is being rendered in.
      */
@@ -79,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;
@@ -89,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,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,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,aAAa,CAAC,EAAE,CAAC;IACxD;;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;AAsLD,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',
-    flex: "1 1 auto",
+    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,35 +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,
-        height: height,
-    });
+}, ({ height }) => ({
+    minHeight: height,
+}));
+const SearchCombobox = styled(Combobox)({
+    width: `100%`,
 });
-var 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,
@@ -119,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%',
@@ -143,17 +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',
-            lineHeight: '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,
         }
         : {
@@ -164,11 +127,22 @@ var SearchInput = styled(TextInput)(function (_a) {
             backgroundColor: inputColors.background,
             height: height,
         };
-    return __assign({ fontSize: '14px', lineHeight: '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,
@@ -176,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();
@@ -271,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/{drawer → expandable}/LICENSE

@@ -43,7 +43,8 @@ While redistributing the Work or Derivative Works thereof, You may choose to off
 
 END OF TERMS AND CONDITIONS
 
-©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+©2021 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

package/expandable/README.md

@@ -0,0 +1,11 @@
+# Canvas Kit Expandable Container
+
+<a href="https://github.com/Workday/canvas-kit/tree/master/modules/labs-react/README.md">
+  <img src="https://img.shields.io/badge/LABS-alpha-orange" alt="LABS: Alpha" />
+</a>  This component is work in progress and currently in prerelease.
+
+## Usage
+
+View the
+[documentation for Expandable](https://workday.github.io/canvas-kit/?path=/docs/labs-expandable-react--avatar)
+on Storybook.

package/expandable/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/Expandable';
+export * from './lib/hooks';

package/expandable/lib/Expandable.tsx

@@ -0,0 +1,68 @@
+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 {useExpandableModel} from './hooks/useExpandableModel';
+
+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 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,
+  },
+})<ExpandableProps>(({children, ...elementProps}, Element) => (
+  <Flex as={Element} flexDirection={'column'} padding={'xxs'} {...elementProps}>
+    {children}
+  </Flex>
+));

package/expandable/lib/ExpandableAvatar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {createComponent, ExtractProps, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export interface ExpandableAvatarProps
+  extends Omit<
+    ExtractProps<typeof Avatar, never>,
+    keyof React.ButtonHTMLAttributes<HTMLButtonElement>
+  > {}
+
+const StyledAvatar = styled(Avatar)<StyledType>({
+  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}: ExpandableAvatarProps, ref) => {
+    return <StyledAvatar altText={undefined} as="div" ref={ref} size={32} {...elemProps} />;
+  },
+});

package/expandable/lib/ExpandableContent.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {space} from '@workday/canvas-kit-react/tokens';
+import {createSubcomponent, ExtractProps} 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 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 const ExpandableContent = createSubcomponent('div')({
+  modelHook: useExpandableModel,
+  elemPropsHook: useExpandableContent,
+})<ExpandableContentProps>(({children, ...elementProps}, Element) => {
+  return (
+    <Box
+      as={Element}
+      background="none"
+      padding={`${space.s} ${space.xxs} ${space.xxs}`}
+      {...elementProps}
+    >
+      {children}
+    </Box>
+  );
+});