@workday/canvas-kit-labs-react 5.3.17 → 5.4.0-next.1

package/dist/es6/header/lib/shared/types.d.ts

@@ -1,20 +1,15 @@
-export declare enum HeaderTheme {
+export declare enum DeprecatedHeaderTheme {
     White = 0,
     Blue = 1,
     Transparent = 2
 }
-export declare enum HeaderVariant {
+export declare enum DeprecatedHeaderVariant {
     Dub = 0,
     Full = 1,
     Global = 2
 }
-export declare enum HeaderHeight {
+export declare enum DeprecatedHeaderHeight {
     Small = "64px",
     Large = "80px"
 }
-export declare enum SearchTheme {
-    Light = 0,
-    Dark = 1,
-    Transparent = 2
-}
 //# sourceMappingURL=types.d.ts.map

package/dist/es6/header/lib/shared/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../header/lib/shared/types.tsx"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AAED,oBAAY,aAAa;IACvB,GAAG,IAAA;IACH,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,oBAAY,YAAY;IACtB,KAAK,SAAS;IACd,KAAK,SAAS;CACf;AAED,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../header/lib/shared/types.tsx"],"names":[],"mappings":"AAAA,oBAAY,qBAAqB;IAC/B,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AAED,oBAAY,uBAAuB;IACjC,GAAG,IAAA;IACH,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,oBAAY,sBAAsB;IAChC,KAAK,SAAS;IACd,KAAK,SAAS;CACf"}

package/dist/es6/header/lib/shared/types.js

@@ -1,23 +1,17 @@
-export var HeaderTheme;
-(function (HeaderTheme) {
-    HeaderTheme[HeaderTheme["White"] = 0] = "White";
-    HeaderTheme[HeaderTheme["Blue"] = 1] = "Blue";
-    HeaderTheme[HeaderTheme["Transparent"] = 2] = "Transparent";
-})(HeaderTheme || (HeaderTheme = {}));
-export var HeaderVariant;
-(function (HeaderVariant) {
-    HeaderVariant[HeaderVariant["Dub"] = 0] = "Dub";
-    HeaderVariant[HeaderVariant["Full"] = 1] = "Full";
-    HeaderVariant[HeaderVariant["Global"] = 2] = "Global";
-})(HeaderVariant || (HeaderVariant = {}));
-export var HeaderHeight;
-(function (HeaderHeight) {
-    HeaderHeight["Small"] = "64px";
-    HeaderHeight["Large"] = "80px";
-})(HeaderHeight || (HeaderHeight = {}));
-export var SearchTheme;
-(function (SearchTheme) {
-    SearchTheme[SearchTheme["Light"] = 0] = "Light";
-    SearchTheme[SearchTheme["Dark"] = 1] = "Dark";
-    SearchTheme[SearchTheme["Transparent"] = 2] = "Transparent";
-})(SearchTheme || (SearchTheme = {}));
+export var DeprecatedHeaderTheme;
+(function (DeprecatedHeaderTheme) {
+    DeprecatedHeaderTheme[DeprecatedHeaderTheme["White"] = 0] = "White";
+    DeprecatedHeaderTheme[DeprecatedHeaderTheme["Blue"] = 1] = "Blue";
+    DeprecatedHeaderTheme[DeprecatedHeaderTheme["Transparent"] = 2] = "Transparent";
+})(DeprecatedHeaderTheme || (DeprecatedHeaderTheme = {}));
+export var DeprecatedHeaderVariant;
+(function (DeprecatedHeaderVariant) {
+    DeprecatedHeaderVariant[DeprecatedHeaderVariant["Dub"] = 0] = "Dub";
+    DeprecatedHeaderVariant[DeprecatedHeaderVariant["Full"] = 1] = "Full";
+    DeprecatedHeaderVariant[DeprecatedHeaderVariant["Global"] = 2] = "Global";
+})(DeprecatedHeaderVariant || (DeprecatedHeaderVariant = {}));
+export var DeprecatedHeaderHeight;
+(function (DeprecatedHeaderHeight) {
+    DeprecatedHeaderHeight["Small"] = "64px";
+    DeprecatedHeaderHeight["Large"] = "80px";
+})(DeprecatedHeaderHeight || (DeprecatedHeaderHeight = {}));

package/dist/es6/index.d.ts

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

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

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

package/dist/es6/index.js

@@ -3,3 +3,4 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
+export * from './search-form';

package/dist/es6/layout/lib/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CA+BhB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CAiChB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC"}

package/dist/es6/layout/lib/Stack.js

@@ -45,7 +45,7 @@ export var Stack = createComponent('div')({
         var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = _a.spacing, _c = _a.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, elemProps = __rest(_a, ["children", "flexDirection", "spacing", "shouldWrapChildren"]);
         var validChildren = getValidChildren(children);
         return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: flexDirection, spacing: spacing }, elemProps), shouldWrapChildren
-            ? validChildren.map(function (child) { return React.createElement(StackItem, null, child); })
+            ? validChildren.map(function (child, index) { return (React.createElement(StackItem, { key: child.props.id || index }, child)); })
             : validChildren));
     },
     subComponents: {

package/dist/es6/layout/lib/utils/getValidChildren.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>[];
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[];
 //# sourceMappingURL=getValidChildren.d.ts.map

package/dist/es6/layout/lib/utils/getValidChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getValidChildren.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/getValidChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,oNAIzD"}
+{"version":3,"file":"getValidChildren.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/getValidChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,oJAIzD"}

package/dist/es6/search-form/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/SearchForm';
+export * from './lib/themes';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/search-form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../search-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/dist/es6/search-form/index.js

@@ -0,0 +1,2 @@
+export * from './lib/SearchForm';
+export * from './lib/themes';

package/{ts3.5/dist/commonjs/header/lib/parts/SearchBar.d.ts → dist/es6/search-form/lib/SearchForm.d.ts}

@@ -1,103 +1,107 @@
-import * as React from 'react';
-import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
-import { SearchThemeAttributes } from '../shared/themes';
-import { SearchTheme } from '../shared/types';
-export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
-    /**
-     * The function called when the SearchBar form is submitted. The current input value is passed to the callback function.
-     */
-    onSubmit: React.FormEventHandler<HTMLFormElement>;
-    /**
-     * If true, collapse the SearchBar text input into a toggle icon. Useful for responsive layouts.
-     * @default false
-     */
-    isCollapsed?: boolean;
-    /**
-     * The function called when the SearchBar text input changes.
-     */
-    onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The autocomplete items of the SearchBar. This array of menu items is shown under the search bar.
-     */
-    autocompleteItems?: React.ReactElement<MenuItemProps>[];
-    /**
-     * The theme of the header the search input is being rendered in.
-     */
-    searchTheme?: SearchTheme | SearchThemeAttributes;
-    /**
-     * The placeholder text of the SearchBar text input.
-     * @default Search
-     */
-    placeholder?: string;
-    /**
-     * The initial value of the SearchBar text input.
-     */
-    initialValue?: string;
-    /**
-     * If true, right-align the SearchBar. If false, the text input should grow to left-align the SearchBar.
-     * @default false
-     */
-    rightAlign?: boolean;
-    /**
-     * The screenreader label text for the SearchBar text input.
-     * @default Search
-     */
-    inputLabel?: string;
-    /**
-     * The screenreader label text for the SearchBar submit button.
-     * @default Search
-     */
-    submitAriaLabel?: string;
-    /**
-     * The screenreader label text for the SearchBar clear button.
-     * @default Reset Search Form
-     */
-    clearButtonAriaLabel?: string;
-    /**
-     * The screenreader label text for the button to open the collapsed SearchBar.
-     * @default Open Search
-     */
-    openButtonAriaLabel?: string;
-    /**
-     * The screenreader label text for the button to close the open SearchBar.
-     * @default Cancel
-     */
-    closeButtonAriaLabel?: string;
-    /**
-     * If true, render the SearchBar with a button to clear the text input.
-     * @default true
-     */
-    showClearButton?: boolean;
-    /**
-     * Height of the Search Bar in pixels
-     * @default: 40
-     */
-    height?: number;
-}
-export interface SearchBarState {
-    showForm: boolean;
-    searchQuery: string;
-    isFocused: boolean;
-}
-export declare class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
-    static Theme: typeof SearchTheme;
-    private inputRef;
-    private openRef;
-    private labelId;
-    state: Readonly<SearchBarState>;
-    private getTheme;
-    private getThemeColors;
-    getIconButtonType: () => "circle" | "square" | "inverse" | "squareFilled" | "plain" | "circleFilled" | "inverseFilled" | undefined;
-    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-    openCollapsedSearch: () => void;
-    closeCollapsedSearch: () => void;
-    componentDidUpdate(prevProps: SearchBarProps, prevState: SearchBarState): void;
-    focusInput: () => void;
-    focusOpen: () => void;
-    handleFocus: () => void;
-    handleBlur: () => void;
-    handleSearchInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
-}
-//# sourceMappingURL=SearchBar.d.ts.map
+import * as React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
+import { SearchThemeAttributes, SearchTheme } from './themes';
+export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
+    /**
+     * The function called when the SearchForm form is submitted. The current input value is passed to the callback function.
+     */
+    onSubmit: React.FormEventHandler<HTMLFormElement>;
+    /**
+     * If true, collapse the SearchForm text input into a toggle icon. Useful for responsive layouts.
+     * @default false
+     */
+    isCollapsed?: boolean;
+    /**
+     * The function called when the SearchForm text input changes.
+     */
+    onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
+     */
+    autocompleteItems?: React.ReactElement<MenuItemProps>[];
+    /**
+     * The theme of the header the search input is being rendered in.
+     */
+    searchTheme?: SearchTheme | SearchThemeAttributes;
+    /**
+     * The placeholder text of the SearchForm text input.
+     * @default Search
+     */
+    placeholder?: string;
+    /**
+     * The initial value of the SearchForm text input.
+     */
+    initialValue?: string;
+    /**
+     * If true, right-align the SearchForm. If false, the text input should grow to left-align the SearchForm.
+     * @default false
+     */
+    rightAlign?: boolean;
+    /**
+     * The screenreader label text for the SearchForm text input.
+     * @default Search
+     */
+    inputLabel?: string;
+    /**
+     * The screenreader label text for the SearchForm submit button.
+     * @default Search
+     */
+    submitAriaLabel?: string;
+    /**
+     * The screenreader label text for the SearchForm clear button.
+     * @default Reset Search Form
+     */
+    clearButtonAriaLabel?: string;
+    /**
+     * The screenreader label text for the button to open the collapsed SearchForm.
+     * @default Open Search
+     */
+    openButtonAriaLabel?: string;
+    /**
+     * The screenreader label text for the button to close the open SearchForm.
+     * @default Cancel
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * If true, render the SearchForm with a button to clear the text input.
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Height of the Search Form in pixels
+     * @default 40
+     */
+    height?: number;
+    /**
+     * If true, allow onSubmit being called when input value is empty.
+     * @default false
+     */
+    allowEmptyStringSearch?: boolean;
+}
+export interface SearchFormState {
+    showForm: boolean;
+    searchQuery: string;
+    isFocused: boolean;
+}
+export declare class SearchForm extends React.Component<SearchFormProps, SearchFormState> {
+    static Theme: typeof SearchTheme;
+    private inputRef;
+    private openRef;
+    private labelId;
+    state: Readonly<SearchFormState>;
+    private getTheme;
+    private getThemeColors;
+    getIconButtonType: () => "circle" | "square" | "inverse" | "squareFilled" | "plain" | "circleFilled" | "inverseFilled" | undefined;
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    openCollapsedSearch: () => void;
+    closeCollapsedSearch: () => void;
+    componentDidUpdate(prevProps: SearchFormProps, prevState: SearchFormState): void;
+    focusInput: () => void;
+    focusOpen: () => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleSearchInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=SearchForm.d.ts.map

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

@@ -0,0 +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;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,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;AAuMD,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,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;IAEF,MAAM;CAoGP"}

package/dist/es6/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js}

@@ -35,16 +35,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
-import { styled } from '@workday/canvas-kit-react/common';
+import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
 import { IconButton } from '@workday/canvas-kit-react/button';
 import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
 import { FormField, FormFieldLabelPosition } from '@workday/canvas-kit-react/form-field';
 import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
-import { searchThemes } from '../shared/themes';
-import { SearchTheme } from '../shared/types';
+import { searchThemes, SearchTheme } from './themes';
 import chroma from 'chroma-js';
-import uuid from 'uuid/v4';
 function getInputColors(theme, isFocused) {
     return {
         background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
@@ -59,7 +57,7 @@ function getInputColors(theme, isFocused) {
 var formCollapsedBackground = colors.frenchVanilla100;
 var maxWidth = 480;
 var minWidth = 120;
-var SearchForm = styled('form')({
+var StyledSearchForm = styled('form')({
     position: 'relative',
     flex: "1 1 auto",
     display: 'flex',
@@ -186,13 +184,13 @@ var SearchInput = styled(TextInput)(function (_a) {
             },
         } }, collapseStyles);
 });
-var SearchBar = /** @class */ (function (_super) {
-    __extends(SearchBar, _super);
-    function SearchBar() {
+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 = uuid();
+        _this.labelId = generateUniqueId();
         _this.state = {
             showForm: false,
             searchQuery: '',
@@ -227,7 +225,7 @@ var SearchBar = /** @class */ (function (_super) {
         };
         _this.handleSubmit = function (event) {
             event.preventDefault();
-            if (_this.state.searchQuery.trim()) {
+            if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
                 _this.props.onSubmit(event);
             }
             else {
@@ -269,7 +267,7 @@ var SearchBar = /** @class */ (function (_super) {
         };
         return _this;
     }
-    SearchBar.prototype.componentDidUpdate = function (prevProps, prevState) {
+    SearchForm.prototype.componentDidUpdate = function (prevProps, prevState) {
         var showFormToggled = this.state.showForm !== prevState.showForm;
         if (showFormToggled) {
             if (this.state.showForm) {
@@ -280,18 +278,18 @@ var SearchBar = /** @class */ (function (_super) {
             }
         }
     };
-    SearchBar.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, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
-        return (React.createElement(SearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
+    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),
             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(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search" }))),
+                        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, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
     };
-    SearchBar.Theme = SearchTheme;
-    return SearchBar;
+    SearchForm.Theme = SearchTheme;
+    return SearchForm;
 }(React.Component));
-export { SearchBar };
+export { SearchForm };

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

@@ -0,0 +1,21 @@
+export declare enum SearchTheme {
+    Light = 0,
+    Dark = 1,
+    Transparent = 2
+}
+export interface SearchThemeAttributes {
+    background?: string;
+    backgroundFocus?: string;
+    backgroundHover?: string;
+    color?: string;
+    colorFocus?: string;
+    placeholderColor?: string;
+    placeholderColorFocus?: string;
+    boxShadow?: string | string[];
+    boxShadowFocus?: string | string[];
+}
+export interface SearchThemes {
+    [key: string]: SearchThemeAttributes;
+}
+export declare const searchThemes: SearchThemes;
+//# sourceMappingURL=themes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/themes.ts"],"names":[],"mappings":"AAGA,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AACD,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,YAAY;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,qBAAqB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,EAAE,YA6B1B,CAAC"}

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

@@ -0,0 +1,39 @@
+var _a;
+import { focusRing } from '@workday/canvas-kit-react/common';
+import { colors } from '@workday/canvas-kit-react/tokens';
+export var SearchTheme;
+(function (SearchTheme) {
+    SearchTheme[SearchTheme["Light"] = 0] = "Light";
+    SearchTheme[SearchTheme["Dark"] = 1] = "Dark";
+    SearchTheme[SearchTheme["Transparent"] = 2] = "Transparent";
+})(SearchTheme || (SearchTheme = {}));
+export var searchThemes = (_a = {},
+    _a[SearchTheme.Transparent] = {
+        background: 'rgba(0, 0, 0, 0)',
+        backgroundFocus: 'rgba(0, 0, 0, 0)',
+        color: colors.blackPepper300,
+        colorFocus: colors.blackPepper300,
+        placeholderColor: colors.licorice300,
+        placeholderColorFocus: colors.licorice300,
+        boxShadow: 'none',
+        boxShadowFocus: 'none',
+    },
+    _a[SearchTheme.Light] = {
+        background: colors.soap200,
+        backgroundFocus: colors.soap200,
+        backgroundHover: colors.soap300,
+        color: colors.blackPepper300,
+        placeholderColor: colors.licorice300,
+        boxShadow: 'none',
+        boxShadowFocus: focusRing().boxShadow,
+    },
+    _a[SearchTheme.Dark] = {
+        background: 'rgba(0, 0, 0, 0.2)',
+        backgroundFocus: colors.frenchVanilla100,
+        color: colors.frenchVanilla100,
+        colorFocus: colors.blackPepper300,
+        placeholderColor: colors.frenchVanilla100,
+        placeholderColorFocus: colors.licorice300,
+        boxShadow: 'none',
+    },
+    _a);