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

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

@@ -0,0 +1,7 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./lib/SearchForm"));
+__export(require("./lib/themes"));

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

@@ -1,24 +1,23 @@
 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> {
+import { SearchThemeAttributes, SearchTheme } from './themes';
+export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
     /**
-     * The function called when the SearchBar form is submitted. The current input value is passed to the callback function.
+     * 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 SearchBar text input into a toggle icon. Useful for responsive layouts.
+     * If true, collapse the SearchForm text input into a toggle icon. Useful for responsive layouts.
      * @default false
      */
     isCollapsed?: boolean;
     /**
-     * The function called when the SearchBar text input changes.
+     * The function called when the SearchForm text input changes.
      */
     onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
     /**
-     * The autocomplete items of the SearchBar. This array of menu items is shown under the search bar.
+     * The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
      */
     autocompleteItems?: React.ReactElement<MenuItemProps>[];
     /**
@@ -26,73 +25,78 @@ export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes
      */
     searchTheme?: SearchTheme | SearchThemeAttributes;
     /**
-     * The placeholder text of the SearchBar text input.
+     * The placeholder text of the SearchForm text input.
      * @default Search
      */
     placeholder?: string;
     /**
-     * The initial value of the SearchBar text input.
+     * The initial value of the SearchForm text input.
      */
     initialValue?: string;
     /**
-     * If true, right-align the SearchBar. If false, the text input should grow to left-align the SearchBar.
+     * 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 SearchBar text input.
+     * The screenreader label text for the SearchForm text input.
      * @default Search
      */
     inputLabel?: string;
     /**
-     * The screenreader label text for the SearchBar submit button.
+     * The screenreader label text for the SearchForm submit button.
      * @default Search
      */
     submitAriaLabel?: string;
     /**
-     * The screenreader label text for the SearchBar clear button.
+     * 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 SearchBar.
+     * 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 SearchBar.
+     * The screenreader label text for the button to close the open SearchForm.
      * @default Cancel
      */
     closeButtonAriaLabel?: string;
     /**
-     * If true, render the SearchBar with a button to clear the text input.
+     * If true, render the SearchForm with a button to clear the text input.
      * @default true
      */
     showClearButton?: boolean;
     /**
-     * Height of the Search Bar in pixels
-     * @default: 40
+     * 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 SearchBarState {
+export interface SearchFormState {
     showForm: boolean;
     searchQuery: string;
     isFocused: boolean;
 }
-export declare class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
+export declare class SearchForm extends React.Component<SearchFormProps, SearchFormState> {
     static Theme: typeof SearchTheme;
     private inputRef;
     private openRef;
     private labelId;
-    state: Readonly<SearchBarState>;
+    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: SearchBarProps, prevState: SearchBarState): void;
+    componentDidUpdate(prevProps: SearchFormProps, prevState: SearchFormState): void;
     focusInput: () => void;
     focusOpen: () => void;
     handleFocus: () => void;
@@ -100,4 +104,4 @@ export declare class SearchBar extends React.Component<SearchBarProps, SearchBar
     handleSearchInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }
-//# sourceMappingURL=SearchBar.d.ts.map
+//# sourceMappingURL=SearchForm.d.ts.map

package/dist/commonjs/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/commonjs/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js}

@@ -53,10 +53,8 @@ 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("../shared/themes");
-var types_1 = require("../shared/types");
+var themes_1 = require("./themes");
 var chroma_js_1 = __importDefault(require("chroma-js"));
-var v4_1 = __importDefault(require("uuid/v4"));
 function getInputColors(theme, isFocused) {
     return {
         background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
@@ -71,7 +69,7 @@ function getInputColors(theme, isFocused) {
 var formCollapsedBackground = tokens_1.colors.frenchVanilla100;
 var maxWidth = 480;
 var minWidth = 120;
-var SearchForm = common_1.styled('form')({
+var StyledSearchForm = common_1.styled('form')({
     position: 'relative',
     flex: "1 1 auto",
     display: 'flex',
@@ -198,13 +196,13 @@ var SearchInput = common_1.styled(text_input_1.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 = v4_1.default();
+        _this.labelId = common_1.generateUniqueId();
         _this.state = {
             showForm: false,
             searchQuery: '',
@@ -219,13 +217,13 @@ var SearchBar = /** @class */ (function (_super) {
                 theme = _this.props.searchTheme;
             }
             else {
-                theme = themes_1.searchThemes[types_1.SearchTheme.Light];
+                theme = themes_1.searchThemes[themes_1.SearchTheme.Light];
             }
             return theme;
         };
         _this.getThemeColors = function () {
             var theme = _this.props.isCollapsed && _this.state.showForm
-                ? themes_1.searchThemes[types_1.SearchTheme.Transparent]
+                ? themes_1.searchThemes[themes_1.SearchTheme.Transparent]
                 : _this.getTheme();
             return getInputColors(theme, _this.state.isFocused);
         };
@@ -239,7 +237,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 {
@@ -281,7 +279,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) {
@@ -292,18 +290,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: 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(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: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
     };
-    SearchBar.Theme = types_1.SearchTheme;
-    return SearchBar;
+    SearchForm.Theme = themes_1.SearchTheme;
+    return SearchForm;
 }(React.Component));
-exports.SearchBar = SearchBar;
+exports.SearchForm = SearchForm;

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

@@ -0,0 +1,41 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@workday/canvas-kit-react/common");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var SearchTheme;
+(function (SearchTheme) {
+    SearchTheme[SearchTheme["Light"] = 0] = "Light";
+    SearchTheme[SearchTheme["Dark"] = 1] = "Dark";
+    SearchTheme[SearchTheme["Transparent"] = 2] = "Transparent";
+})(SearchTheme = exports.SearchTheme || (exports.SearchTheme = {}));
+exports.searchThemes = (_a = {},
+    _a[SearchTheme.Transparent] = {
+        background: 'rgba(0, 0, 0, 0)',
+        backgroundFocus: 'rgba(0, 0, 0, 0)',
+        color: tokens_1.colors.blackPepper300,
+        colorFocus: tokens_1.colors.blackPepper300,
+        placeholderColor: tokens_1.colors.licorice300,
+        placeholderColorFocus: tokens_1.colors.licorice300,
+        boxShadow: 'none',
+        boxShadowFocus: 'none',
+    },
+    _a[SearchTheme.Light] = {
+        background: tokens_1.colors.soap200,
+        backgroundFocus: tokens_1.colors.soap200,
+        backgroundHover: tokens_1.colors.soap300,
+        color: tokens_1.colors.blackPepper300,
+        placeholderColor: tokens_1.colors.licorice300,
+        boxShadow: 'none',
+        boxShadowFocus: common_1.focusRing().boxShadow,
+    },
+    _a[SearchTheme.Dark] = {
+        background: 'rgba(0, 0, 0, 0.2)',
+        backgroundFocus: tokens_1.colors.frenchVanilla100,
+        color: tokens_1.colors.frenchVanilla100,
+        colorFocus: tokens_1.colors.blackPepper300,
+        placeholderColor: tokens_1.colors.frenchVanilla100,
+        placeholderColorFocus: tokens_1.colors.licorice300,
+        boxShadow: 'none',
+    },
+    _a);

package/dist/es6/combobox/lib/AutocompleteList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAajG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/es6/combobox/lib/AutocompleteList.js

@@ -19,9 +19,8 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 import React, { Fragment, useState } from 'react';
 import styled from '@emotion/styled';
 import { space } from '@workday/canvas-kit-react/tokens';
-import { accessibleHide } from '@workday/canvas-kit-react/common';
+import { accessibleHide, generateUniqueId } from '@workday/canvas-kit-react/common';
 import { getOptionId, listBoxIdPart, getTextFromElement } from './Combobox';
-import uuid from 'uuid/v4';
 var Autocomplete = styled('ul')({
     margin: 0,
     maxHeight: 200,
@@ -32,7 +31,7 @@ var Autocomplete = styled('ul')({
 var AccessibleHide = styled('span')(accessibleHide);
 var AutocompleteList = function (_a) {
     var autocompleteItems = _a.autocompleteItems, comboboxId = _a.comboboxId, selectedIndex = _a.selectedIndex, handleAutocompleteClick = _a.handleAutocompleteClick, labelId = _a.labelId, showGroupText = _a.showGroupText;
-    var randomComponentId = useState(function () { return uuid(); })[0]; // https://codesandbox.io/s/p2ndq
+    var randomComponentId = useState(generateUniqueId)[0]; // https://codesandbox.io/s/p2ndq
     var componentId = comboboxId || randomComponentId;
     var listBoxProps = {
         role: 'listbox',

package/dist/es6/combobox/lib/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAAC,cAAc,EAA+B,MAAM,kCAAkC,CAAC;AAE9F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAMpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA8DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/es6/combobox/lib/Combobox.js

@@ -22,12 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
 import { jsx, keyframes } from '@emotion/core';
-import { useForkRef, styled, useIsRTL } from '@workday/canvas-kit-react/common';
+import { useForkRef, styled, useIsRTL, useUniqueId, } from '@workday/canvas-kit-react/common';
 import { space, commonColors, borderRadius } from '@workday/canvas-kit-react/tokens';
 import { Card } from '@workday/canvas-kit-react/card';
 import { IconButton } from '@workday/canvas-kit-react/button';
 import { xSmallIcon } from '@workday/canvas-system-icons-web';
-import uuid from 'uuid/v4';
 import flatten from 'lodash.flatten';
 import AutocompleteList from './AutocompleteList';
 import Status from './Status';
@@ -65,6 +64,7 @@ var MenuContainer = styled(Card)({
     minWidth: 0,
     animation: fadeInKeyframes + " 200ms ease-out",
     maxHeight: 200,
+    overflow: 'hidden',
 });
 var ResetButton = styled(IconButton)({
     width: space.l,
@@ -133,8 +133,8 @@ var Combobox = function (_a) {
     // to satisfy TS.
     var elementRef = useForkRef(children.ref, inputRef);
     var comboboxRef = useRef(null);
-    var randomComponentId = React.useState(function () { return uuid(); })[0]; // https://codesandbox.io/s/p2ndq
-    var randomLabelId = React.useState(function () { return uuid(); })[0];
+    var randomComponentId = useUniqueId();
+    var randomLabelId = useUniqueId();
     var componentId = id || randomComponentId;
     var formLabelId = labelId || randomLabelId;
     var _l = useState(false), showGroupText = _l[0], setShowGroupText = _l[1];

package/dist/es6/common/lib/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBASd,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBAYd,CAAC"}

package/dist/es6/common/lib/Box.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
-import { createComponent } from '@workday/canvas-kit-react/common';
+import { createComponent, useConstant } from '@workday/canvas-kit-react/common';
 // style props
 import { border } from './utils/border';
 import { color } from './utils/color';
@@ -36,7 +36,12 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
 var shouldForwardProp = function (prop) {
     return isPropValid(prop) && !omittedProps.includes(prop);
 };
-var StyledBox = styled('div', { shouldForwardProp: shouldForwardProp })({
+// Meant to be used with elements. The `shouldForwardProps` will remove all style props
+var StyledBoxElement = styled('div', { shouldForwardProp: shouldForwardProp })({
+    boxSizing: 'border-box',
+}, border, color, depth, flexItem, layout, position, space);
+// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
+var StyledBoxComponent = styled('div')({
     boxSizing: 'border-box',
 }, border, color, depth, flexItem, layout, position, space);
 /**
@@ -60,6 +65,9 @@ export var Box = createComponent('div')({
     displayName: 'Box',
     Component: function (_a, ref, Element) {
         var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
+        var BoxComponent = useConstant(function () {
+            return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
+        });
+        return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
     },
 });

package/dist/es6/common/lib/theming/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useThemeRTL';
+export * from './useThemedRing';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/common/lib/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/dist/es6/common/lib/theming/index.js

@@ -1 +1,2 @@
 export * from './useThemeRTL';
+export * from './useThemedRing';

package/dist/es6/common/lib/theming/useThemedRing.d.ts

@@ -0,0 +1,11 @@
+import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+import { CSSProperties } from '@workday/canvas-kit-react/tokens';
+declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface ContrastColors {
+    outer?: string;
+    inner?: string;
+}
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
+export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
+export {};
+//# sourceMappingURL=useThemedRing.d.ts.map

package/dist/es6/common/lib/theming/useThemedRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}

package/dist/es6/common/lib/theming/useThemedRing.js

@@ -0,0 +1,59 @@
+import { useThemeRTL } from './useThemeRTL';
+import { colors, inputColors, statusColors } from '@workday/canvas-kit-react/tokens';
+import chroma from 'chroma-js';
+var isAccessible = function (foreground, background) {
+    if (background === void 0) { background = colors.frenchVanilla100; }
+    return chroma.contrast(foreground, background) >= 3;
+};
+var getPaletteColorsFromTheme = function (palette, fallbackColors) {
+    return {
+        outer: isAccessible(palette.main)
+            ? palette.main
+            : isAccessible(palette.darkest)
+                ? palette.darkest
+                : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
+        inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
+    };
+};
+export function getPaletteColors(type, theme) {
+    var palette = theme.canvas.palette[type];
+    switch (type) {
+        case 'error': {
+            return getPaletteColorsFromTheme(palette, { outer: inputColors.error.border });
+        }
+        case 'alert': {
+            return getPaletteColorsFromTheme(palette, { outer: colors.cantaloupe600 });
+        }
+        case 'success': {
+            return getPaletteColorsFromTheme(palette, {
+                outer: colors.greenApple600,
+                // The theme default for success.main is set to the darkest GreenApple
+                // For our default ring, we need to override it so the inner ring is a bit lighter
+                inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
+            });
+        }
+        default: {
+            return getPaletteColorsFromTheme(palette);
+        }
+    }
+}
+export var useThemedRing = function (type) {
+    var _a = useThemeRTL(), themeRTL = _a.themeRTL, theme = _a.theme;
+    var paletteColors = getPaletteColors(type, theme);
+    if (!((paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.outer) || (paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.inner))) {
+        return {};
+    }
+    var errorBoxShadow = "inset 0 0 0 " + (paletteColors.outer === paletteColors.inner ? 1 : 2) + "px " + paletteColors.inner;
+    return themeRTL({
+        borderColor: paletteColors.outer,
+        transition: '100ms box-shadow',
+        boxShadow: errorBoxShadow,
+        '&:hover, &:disabled': {
+            borderColor: paletteColors.outer,
+        },
+        '&:focus:not([disabled])': {
+            borderColor: paletteColors.outer,
+            boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder),
+        },
+    });
+};

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

@@ -1,8 +1,8 @@
-import Header from './lib/Header';
-import GlobalHeader from './lib/GlobalHeader';
-export default Header;
-export { Header };
-export { GlobalHeader };
+import DeprecatedHeader from './lib/Header';
+import DeprecatedGlobalHeader from './lib/GlobalHeader';
+export default DeprecatedHeader;
+export { DeprecatedHeader };
+export { DeprecatedGlobalHeader };
 export * from './lib/parts';
 export * from './lib/shared/themes';
 export * from './lib/shared/types';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,OAAO,EAAC,YAAY,EAAC,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,cAAc,CAAC;AAC5C,OAAO,sBAAsB,MAAM,oBAAoB,CAAC;AAExD,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAC,gBAAgB,EAAC,CAAC;AAC1B,OAAO,EAAC,sBAAsB,EAAC,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/es6/header/index.js

@@ -1,8 +1,8 @@
-import Header from './lib/Header';
-import GlobalHeader from './lib/GlobalHeader';
-export default Header;
-export { Header };
-export { GlobalHeader };
+import DeprecatedHeader from './lib/Header';
+import DeprecatedGlobalHeader from './lib/GlobalHeader';
+export default DeprecatedHeader;
+export { DeprecatedHeader };
+export { DeprecatedGlobalHeader };
 export * from './lib/parts';
 export * from './lib/shared/themes';
 export * from './lib/shared/types';

package/dist/es6/header/lib/GlobalHeader.d.ts

@@ -19,11 +19,20 @@ export interface GlobalHeaderProps {
      */
     isCollapsed?: boolean;
     /**
-     * The React element to render in the left slot of the GlobalHeader. This is typically a SearchBar component.
+     * The React element to render in the left slot of the GlobalHeader. This is typically a SearchForm component.
      */
     leftSlot?: React.ReactElement;
 }
-export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
+/**
+ * ### Deprecated Global Header
+ *
+ * As of Canvas Kit v6, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
+export default class DeprecatedGlobalHeader extends React.Component<GlobalHeaderProps> {
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 //# sourceMappingURL=GlobalHeader.d.ts.map

package/dist/es6/header/lib/GlobalHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACnE,MAAM;CAwBd"}
+{"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACpF,iBAAiB;IASV,MAAM;CAwBd"}