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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandableIcon = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useExpandableModel_1 = require("./useExpandableModel");
+exports.useExpandableIcon = common_1.createElemPropsHook(useExpandableModel_1.useExpandableModel)(({ state }) => {
+    return {
+        visible: state.visibility !== 'hidden',
+    };
+});

package/dist/commonjs/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/commonjs/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/commonjs/expandable/lib/hooks/useExpandableModel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandableModel = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const disclosure_1 = require("@workday/canvas-kit-react/disclosure");
+/**
+ * The `ExpandableModel` extends the `DisclosureModel`
+ */
+exports.useExpandableModel = common_1.createModelHook({
+    defaultConfig: {
+        ...disclosure_1.useDisclosureModel.defaultConfig,
+    },
+})(config => {
+    const disclosure = disclosure_1.useDisclosureModel(config);
+    const state = {
+        ...disclosure.state,
+    };
+    const events = {
+        ...disclosure.events,
+    };
+    return { state, events };
+});

package/dist/commonjs/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/commonjs/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/commonjs/expandable/lib/hooks/useExpandableTarget.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandableTarget = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+const useExpandableModel_1 = require("./useExpandableModel");
+exports.useExpandableTarget = common_1.createElemPropsHook(useExpandableModel_1.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/commonjs/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/commonjs/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/commonjs/index.js

@@ -11,6 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./combobox"), exports);
-__exportStar(require("./common"), exports);
-__exportStar(require("./drawer"), exports);
+__exportStar(require("./expandable"), exports);
 __exportStar(require("./search-form"), exports);

package/dist/commonjs/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/commonjs/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/commonjs/search-form/lib/SearchForm.js

@@ -1,28 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -42,32 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchForm = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var button_1 = require("@workday/canvas-kit-react/button");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var form_field_1 = require("@workday/canvas-kit-react/form-field");
-var combobox_1 = require("@workday/canvas-kit-labs-react/combobox");
-var text_input_1 = require("@workday/canvas-kit-react/text-input");
-var themes_1 = require("./themes");
-var chroma_js_1 = __importDefault(require("chroma-js"));
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const form_field_1 = require("@workday/canvas-kit-react/form-field");
+const combobox_1 = require("@workday/canvas-kit-labs-react/combobox");
+const text_input_1 = require("@workday/canvas-kit-react/text-input");
+const themes_1 = require("./themes");
+const chroma_js_1 = __importDefault(require("chroma-js"));
 function getInputColors(theme, isFocused) {
     return {
         background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
@@ -79,19 +44,18 @@ function getInputColors(theme, isFocused) {
         boxShadow: isFocused && theme.boxShadowFocus ? theme.boxShadowFocus : theme.boxShadow,
     };
 }
-var formCollapsedBackground = tokens_1.colors.frenchVanilla100;
-var maxWidth = 480;
-var minWidth = 120;
-var StyledSearchForm = common_1.styled('form')({
+const formCollapsedBackground = tokens_1.colors.frenchVanilla100;
+const maxWidth = 480;
+const minWidth = 120;
+const StyledSearchForm = common_1.styled('form')({
     position: 'relative',
-    flex: "1 1 auto",
+    flexGrow: 1,
     display: 'flex',
     alignItems: 'center',
     marginLeft: tokens_1.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,
@@ -107,35 +71,30 @@ var StyledSearchForm = common_1.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 = common_1.styled('div')({
-    position: "relative",
+const SearchContainer = common_1.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,
-    });
-});
-var SearchCombobox = common_1.styled(combobox_1.Combobox)({
-    width: "100%",
+}, ({ height }) => ({
+    minHeight: height,
+}));
+const SearchCombobox = common_1.styled(combobox_1.Combobox)({
+    width: `100%`,
 });
-var SearchIcon = common_1.styled(button_1.TertiaryButton)(function (_a) {
-    var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
+const SearchIcon = common_1.styled(button_1.TertiaryButton)(({ isCollapsed, isHidden }) => {
     return {
-        position: "absolute",
-        margin: isCollapsed ? "auto " + tokens_1.space.xxs : "auto " + tokens_1.space.xxxs,
+        position: `absolute`,
+        margin: isCollapsed ? `auto ${tokens_1.space.xxs}` : `auto ${tokens_1.space.xxxs}`,
         top: 0,
         bottom: 0,
         left: 0,
@@ -144,19 +103,25 @@ var SearchIcon = common_1.styled(button_1.TertiaryButton)(function (_a) {
         display: isHidden ? 'none' : 'flex',
     };
 });
-var CloseButton = common_1.styled(button_1.TertiaryButton)(function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
-    var collapseStyles = isCollapsed && showForm
+const CloseButton = common_1.styled(button_1.TertiaryButton)(({ isCollapsed, showForm }) => {
+    const collapseStyles = isCollapsed && showForm
         ? {
             display: 'inline-block',
         }
         : {
             display: 'none',
         };
-    return __assign({ position: "absolute", top: 0, bottom: 0, right: 0, margin: "auto " + tokens_1.space.xxs, zIndex: 3 }, collapseStyles);
+    return {
+        position: `absolute`,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        margin: `auto ${tokens_1.space.xxs}`,
+        zIndex: 3,
+        ...collapseStyles,
+    };
 });
-var SearchField = common_1.styled(form_field_1.FormField)(function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm, grow = _a.grow, height = _a.height;
+const SearchField = common_1.styled(form_field_1.FormField)(({ isCollapsed, showForm, grow, height }) => {
     return {
         display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
         width: '100%',
@@ -168,17 +133,15 @@ var SearchField = common_1.styled(form_field_1.FormField)(function (_a) {
         },
     };
 });
-var SearchInput = common_1.styled(text_input_1.TextInput)(function (_a) {
-    var isCollapsed = _a.isCollapsed, inputColors = _a.inputColors, grow = _a.grow, height = _a.height;
-    var collapseStyles = isCollapsed
+const SearchInput = common_1.styled(text_input_1.TextInput)(({ isCollapsed, inputColors, grow, height }) => {
+    const collapseStyles = isCollapsed
         ? {
             fontSize: '20px',
-            lineHeight: '20px',
             paddingLeft: tokens_1.spaceNumbers.xl + tokens_1.spaceNumbers.s,
             paddingRight: tokens_1.spaceNumbers.xl + tokens_1.spaceNumbers.s,
             maxWidth: 'none',
             minWidth: 0,
-            backgroundColor: "rgba(0, 0, 0, 0)",
+            backgroundColor: `rgba(0, 0, 0, 0)`,
             height: height,
         }
         : {
@@ -189,11 +152,22 @@ var SearchInput = common_1.styled(text_input_1.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,
@@ -201,93 +175,93 @@ var SearchInput = common_1.styled(text_input_1.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 = common_1.generateUniqueId();
-        _this.state = {
+class SearchForm extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.inputRef = React.createRef();
+        this.openRef = React.createRef();
+        this.defaultLabelId = common_1.generateUniqueId();
+        this.state = {
             showForm: false,
             searchQuery: '',
             isFocused: false,
         };
-        _this.getTheme = function () {
-            var theme;
-            if (typeof _this.props.searchTheme === 'number') {
-                theme = themes_1.searchThemes[_this.props.searchTheme];
+        this.getTheme = () => {
+            let theme;
+            if (typeof this.props.searchTheme === 'number') {
+                theme = themes_1.searchThemes[this.props.searchTheme];
             }
-            else if (_this.props.searchTheme) {
-                theme = _this.props.searchTheme;
+            else if (this.props.searchTheme) {
+                theme = this.props.searchTheme;
             }
             else {
                 theme = themes_1.searchThemes[themes_1.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
                 ? themes_1.searchThemes[themes_1.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_js_1.default(background).get('lab.l') < 70;
+            const isDarkBackground = chroma_js_1.default(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();
@@ -296,19 +270,18 @@ 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: canvas_system_icons_web_1.searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
                 React.createElement(SearchIcon, { "aria-label": openButtonAriaLabel, icon: canvas_system_icons_web_1.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: form_field_1.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: form_field_1.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: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
-    };
-    SearchForm.Theme = themes_1.SearchTheme;
-    return SearchForm;
-}(React.Component));
+    }
+}
 exports.SearchForm = SearchForm;
+SearchForm.Theme = themes_1.SearchTheme;