@workday/canvas-kit-labs-react 5.3.0-next.3 → 5.3.0-next.32

package/{header/lib/parts/SearchBar.tsx → search-form/lib/SearchForm.tsx}

@@ -1,34 +1,32 @@
 import * as React from 'react';
 import {CSSObject} from '@emotion/core';
 import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
-import {GrowthBehavior, styled} from '@workday/canvas-kit-react/common';
+import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
 import {IconButton, IconButtonProps} 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 {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
-import {SearchThemeAttributes, searchThemes} from '../shared/themes';
-import {SearchTheme} from '../shared/types';
+import {SearchThemeAttributes, searchThemes, SearchTheme} from './themes';
 import chroma from 'chroma-js';
-import uuid from 'uuid/v4';
 
-export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
+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>[];
   /**
@@ -36,57 +34,57 @@ 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;
 }
 
-export interface SearchBarState {
+export interface SearchFormState {
   showForm: boolean;
   searchQuery: string;
   isFocused: boolean;
@@ -110,8 +108,8 @@ const formCollapsedBackground = colors.frenchVanilla100;
 const maxWidth = 480;
 const minWidth = 120;
 
-const SearchForm = styled('form')<
-  Pick<SearchBarProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchBarState, 'showForm'>
+const StyledSearchForm = styled('form')<
+  Pick<SearchFormProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchFormState, 'showForm'>
 >(
   {
     position: 'relative',
@@ -148,7 +146,7 @@ const SearchForm = styled('form')<
   }
 );
 
-const SearchContainer = styled('div')<Pick<SearchBarProps, 'height'>>(
+const SearchContainer = styled('div')<Pick<SearchFormProps, 'height'>>(
   {
     position: `relative`,
     display: 'flex',
@@ -166,7 +164,7 @@ const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
-const SearchIcon = styled(IconButton)<Pick<SearchBarProps, 'isCollapsed'> & {isHidden: boolean}>(
+const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
   ({isCollapsed, isHidden}) => {
     const collapsedSize = 40;
     const size = 32;
@@ -199,7 +197,7 @@ const SearchIcon = styled(IconButton)<Pick<SearchBarProps, 'isCollapsed'> & {isH
 );
 
 const CloseButton = styled(IconButton)<
-  Pick<SearchBarProps, 'isCollapsed'> & Pick<SearchBarState, 'showForm'>
+  Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
 >(({isCollapsed, showForm}) => {
   const collapseStyles: CSSObject =
     isCollapsed && showForm
@@ -222,7 +220,7 @@ const CloseButton = styled(IconButton)<
 });
 
 const SearchField = styled(FormField)<
-  Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchBarState, 'showForm'>
+  Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchFormState, 'showForm'>
 >(({isCollapsed, showForm, grow, height}) => {
   return {
     display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
@@ -237,7 +235,7 @@ const SearchField = styled(FormField)<
 });
 
 const SearchInput = styled(TextInput)<
-  Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & {
+  Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & {
     inputColors: ReturnType<typeof getInputColors>;
   }
 >(({isCollapsed, inputColors, grow, height}) => {
@@ -289,14 +287,14 @@ const SearchInput = styled(TextInput)<
   };
 });
 
-export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
+export class SearchForm extends React.Component<SearchFormProps, SearchFormState> {
   static Theme = SearchTheme;
 
   private inputRef = React.createRef<HTMLInputElement>();
   private openRef = React.createRef<HTMLButtonElement>();
-  private labelId = uuid();
+  private labelId = generateUniqueId();
 
-  state: Readonly<SearchBarState> = {
+  state: Readonly<SearchFormState> = {
     showForm: false,
     searchQuery: '',
     isFocused: false,
@@ -352,7 +350,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     }
   };
 
-  componentDidUpdate(prevProps: SearchBarProps, prevState: SearchBarState) {
+  componentDidUpdate(prevProps: SearchFormProps, prevState: SearchFormState) {
     const showFormToggled = this.state.showForm !== prevState.showForm;
     if (showFormToggled) {
       if (this.state.showForm) {
@@ -413,7 +411,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     } = this.props;
 
     return (
-      <SearchForm
+      <StyledSearchForm
         role="search"
         action="."
         rightAlign={rightAlign}
@@ -473,6 +471,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
                 inputColors={this.getThemeColors()}
                 height={height}
                 name="search"
+                autoComplete="off"
               />
             </SearchCombobox>
           </SearchField>
@@ -486,7 +485,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
             type="button"
           />
         </SearchContainer>
-      </SearchForm>
+      </StyledSearchForm>
     );
   }
 }

package/search-form/lib/themes.ts

@@ -0,0 +1,54 @@
+import {focusRing} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export enum SearchTheme {
+  Light,
+  Dark,
+  Transparent,
+}
+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 const searchThemes: SearchThemes = {
+  [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',
+  },
+  [SearchTheme.Light]: {
+    background: colors.soap200,
+    backgroundFocus: colors.soap200,
+    backgroundHover: colors.soap300,
+    color: colors.blackPepper300,
+    placeholderColor: colors.licorice300,
+    boxShadow: 'none',
+    boxShadowFocus: focusRing().boxShadow,
+  },
+  [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',
+  },
+};

package/search-form/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/commonjs/search-form",
+  "module": "../dist/es6/search-form",
+  "sideEffects": false
+}

package/ts3.5/dist/commonjs/common/lib/theming/index.d.ts

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

package/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/header/lib/Header.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HeaderTheme, HeaderVariant } from './shared/types';
+import { DeprecatedHeaderTheme, DeprecatedHeaderVariant } from './shared/types';
 export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The custom menu toggle node of the Header. This React node replaces the default menu toggle.
@@ -7,14 +7,14 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     menuToggle?: React.ReactNode;
     /**
      * The theme of the Header. Accepts `White`, `Blue`, or `Transparent`.
-     * @default HeaderTheme.White
+     * @default DeprecatedHeaderTheme.White
      */
-    themeColor?: HeaderTheme;
+    themeColor?: DeprecatedHeaderTheme;
     /**
      * The variant of the Header. Accepts `Dub` (small) or `Full` (large).
-     * @default HeaderVariant.Dub
+     * @default DeprecatedHeaderVariant.Dub
      */
-    variant?: HeaderVariant;
+    variant?: DeprecatedHeaderVariant;
     /**
      * The text of the Header title. Not used if `brand` is provided.
      */
@@ -37,7 +37,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onMenuClick?: (e: React.MouseEvent) => void;
     /**
-     * The React element to render in the left slot of the Header. This is typically a SearchBar component.
+     * The React element to render in the left slot of the Header. This is typically a SearchForm component.
      */
     leftSlot?: React.ReactElement;
     /**
@@ -46,9 +46,18 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     isCollapsed?: boolean;
 }
+/**
+ * ### Deprecated 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 Header extends React.Component<HeaderProps, {}> {
-    static Theme: typeof HeaderTheme;
-    static Variant: typeof HeaderVariant;
+    static Theme: typeof DeprecatedHeaderTheme;
+    static Variant: typeof DeprecatedHeaderVariant;
+    componentDidMount(): void;
     /**
      * Helper that recursively maps ReactNodes to their theme-based equivalent.
      * Any children that are included in a Header may need to undergo transformation

package/ts3.5/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { HeaderTheme } from '../shared/types';
+import { DeprecatedHeaderTheme } from '../shared/types';
 export declare type DubTitleProps = {
     /**
      * The theme of the DubLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
-     * @default HeaderTheme.White
+     * @default DeprecatedHeaderTheme.White
      */
-    themeColor?: HeaderTheme;
+    themeColor?: DeprecatedHeaderTheme;
     /**
      * The text of the DubLogoTitle. Not used if `brand` is provided.
      */
@@ -15,7 +15,16 @@ export declare type DubTitleProps = {
      */
     bgColor?: string;
 };
-export declare class DubLogoTitle extends React.Component<DubTitleProps> {
+/**
+ * ### Deprecated Dub Logo Title
+ *
+ * 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 declare class DeprecatedDubLogoTitle extends React.Component<DubTitleProps> {
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 //# sourceMappingURL=DubLogoTitle.d.ts.map

package/ts3.5/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { HeaderTheme, HeaderVariant } from '../shared/types';
+import { DeprecatedHeaderTheme, DeprecatedHeaderVariant } from '../shared/types';
 export declare type WorkdayLogoTitleProps = {
     /**
      * The theme of the WorkdayLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
-     * @default HeaderTheme.White
+     * @default DeprecatedHeaderTheme.White
      */
-    themeColor?: HeaderTheme;
+    themeColor?: DeprecatedHeaderTheme;
     /**
      * The text of the WorkdayLogoTitle. Not used if `brand` is provided.
      * @default ''
@@ -14,9 +14,18 @@ export declare type WorkdayLogoTitleProps = {
     /**
      * The variant of the WorkdayLogoTitle.
      */
-    variant?: HeaderVariant;
+    variant?: DeprecatedHeaderVariant;
 };
-export declare class WorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
+/**
+ * ### Deprecated Workday Logo Title
+ *
+ * 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 declare class DeprecatedWorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 //# sourceMappingURL=WorkdayLogoTitle.d.ts.map

package/ts3.5/dist/commonjs/header/lib/parts/index.d.ts

@@ -1,4 +1,3 @@
-export { DubLogoTitle } from './DubLogoTitle';
-export { SearchBar, SearchBarProps } from './SearchBar';
-export { WorkdayLogoTitle } from './WorkdayLogoTitle';
+export { DeprecatedDubLogoTitle } from './DubLogoTitle';
+export { DeprecatedWorkdayLogoTitle } from './WorkdayLogoTitle';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/header/lib/shared/themes.d.ts

@@ -1,5 +1,13 @@
 import { CSSProperties } from '@workday/canvas-kit-react/tokens';
-export interface ThemeAttributes {
+/**
+ * ### Deprecated Header Theme Attributes Interface
+ *
+ * As of Canvas Kit v6, this type interface is being soft-deprecated along with the rest of the labs/header package.
+ * 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 interface DeprecatedHeaderThemeAttributes {
     color: string;
     background: string;
     depth: CSSProperties;
@@ -12,23 +20,24 @@ export interface ThemeAttributes {
     currentLinkColor: string;
     chipColor: string;
 }
-export interface Themes {
-    [key: string]: ThemeAttributes;
+/**
+ * ### Deprecated Header Themes Interface
+ *
+ * As of Canvas Kit v6, this type interface is being soft-deprecated along with the rest of the labs/header package.
+ * 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 interface DeprecatedHeaderThemes {
+    [key: string]: DeprecatedHeaderThemeAttributes;
 }
-export declare const themes: Themes;
-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;
+/**
+ * ### Deprecated Header Themes
+ *
+ * As of Canvas Kit v6, this theme object is being soft-deprecated along with the rest of the labs/header package.
+ * 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 declare const deprecatedHeaderThemes: DeprecatedHeaderThemes;
 //# sourceMappingURL=themes.d.ts.map

package/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/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/ts3.5/dist/commonjs/search-form/index.d.ts

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