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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/combobox/lib/AutocompleteList.tsx +2 -3
  2. package/combobox/lib/Combobox.tsx +10 -4
  3. package/common/README.md +32 -0
  4. package/common/lib/Box.tsx +21 -4
  5. package/common/lib/theming/index.ts +1 -0
  6. package/common/lib/theming/useThemedRing.ts +82 -0
  7. package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map +1 -1
  8. package/dist/commonjs/combobox/lib/AutocompleteList.js +1 -2
  9. package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
  10. package/dist/commonjs/combobox/lib/Combobox.js +3 -3
  11. package/dist/commonjs/common/lib/Box.d.ts.map +1 -1
  12. package/dist/commonjs/common/lib/Box.js +10 -2
  13. package/dist/commonjs/common/lib/theming/index.d.ts +1 -0
  14. package/dist/commonjs/common/lib/theming/index.d.ts.map +1 -1
  15. package/dist/commonjs/common/lib/theming/index.js +1 -0
  16. package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +11 -0
  17. package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map +1 -0
  18. package/dist/commonjs/common/lib/theming/useThemedRing.js +65 -0
  19. package/dist/commonjs/header/index.d.ts +5 -5
  20. package/dist/commonjs/header/index.d.ts.map +1 -1
  21. package/dist/commonjs/header/index.js +2 -2
  22. package/dist/commonjs/header/lib/GlobalHeader.d.ts +11 -2
  23. package/dist/commonjs/header/lib/GlobalHeader.d.ts.map +1 -1
  24. package/dist/commonjs/header/lib/GlobalHeader.js +19 -8
  25. package/dist/commonjs/header/lib/Header.d.ts +17 -8
  26. package/dist/commonjs/header/lib/Header.d.ts.map +1 -1
  27. package/dist/commonjs/header/lib/Header.js +27 -14
  28. package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +13 -4
  29. package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
  30. package/dist/commonjs/header/lib/parts/DubLogoTitle.js +22 -11
  31. package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  32. package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
  33. package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.js +25 -12
  34. package/dist/commonjs/header/lib/parts/index.d.ts +2 -3
  35. package/dist/commonjs/header/lib/parts/index.d.ts.map +1 -1
  36. package/dist/commonjs/header/lib/parts/index.js +2 -4
  37. package/dist/commonjs/header/lib/shared/themes.d.ts +28 -19
  38. package/dist/commonjs/header/lib/shared/themes.d.ts.map +1 -1
  39. package/dist/commonjs/header/lib/shared/themes.js +13 -36
  40. package/dist/commonjs/header/lib/shared/types.d.ts +3 -8
  41. package/dist/commonjs/header/lib/shared/types.d.ts.map +1 -1
  42. package/dist/commonjs/header/lib/shared/types.js +17 -23
  43. package/dist/commonjs/index.d.ts +1 -0
  44. package/dist/commonjs/index.d.ts.map +1 -1
  45. package/dist/commonjs/index.js +1 -0
  46. package/dist/commonjs/layout/lib/Stack.d.ts.map +1 -1
  47. package/dist/commonjs/layout/lib/Stack.js +1 -1
  48. package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
  49. package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts.map +1 -1
  50. package/dist/commonjs/search-form/index.d.ts +3 -0
  51. package/dist/commonjs/search-form/index.d.ts.map +1 -0
  52. package/dist/commonjs/search-form/index.js +7 -0
  53. package/dist/commonjs/{header/lib/parts/SearchBar.d.ts → search-form/lib/SearchForm.d.ts} +27 -23
  54. package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -0
  55. package/dist/commonjs/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js} +17 -19
  56. package/dist/commonjs/search-form/lib/themes.d.ts +21 -0
  57. package/dist/commonjs/search-form/lib/themes.d.ts.map +1 -0
  58. package/dist/commonjs/search-form/lib/themes.js +41 -0
  59. package/dist/es6/combobox/lib/AutocompleteList.d.ts.map +1 -1
  60. package/dist/es6/combobox/lib/AutocompleteList.js +2 -3
  61. package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
  62. package/dist/es6/combobox/lib/Combobox.js +4 -4
  63. package/dist/es6/common/lib/Box.d.ts.map +1 -1
  64. package/dist/es6/common/lib/Box.js +11 -3
  65. package/dist/es6/common/lib/theming/index.d.ts +1 -0
  66. package/dist/es6/common/lib/theming/index.d.ts.map +1 -1
  67. package/dist/es6/common/lib/theming/index.js +1 -0
  68. package/dist/es6/common/lib/theming/useThemedRing.d.ts +11 -0
  69. package/dist/es6/common/lib/theming/useThemedRing.d.ts.map +1 -0
  70. package/dist/es6/common/lib/theming/useThemedRing.js +59 -0
  71. package/dist/es6/header/index.d.ts +5 -5
  72. package/dist/es6/header/index.d.ts.map +1 -1
  73. package/dist/es6/header/index.js +5 -5
  74. package/dist/es6/header/lib/GlobalHeader.d.ts +11 -2
  75. package/dist/es6/header/lib/GlobalHeader.d.ts.map +1 -1
  76. package/dist/es6/header/lib/GlobalHeader.js +22 -11
  77. package/dist/es6/header/lib/Header.d.ts +17 -8
  78. package/dist/es6/header/lib/Header.d.ts.map +1 -1
  79. package/dist/es6/header/lib/Header.js +30 -17
  80. package/dist/es6/header/lib/parts/DubLogoTitle.d.ts +13 -4
  81. package/dist/es6/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
  82. package/dist/es6/header/lib/parts/DubLogoTitle.js +23 -12
  83. package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  84. package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
  85. package/dist/es6/header/lib/parts/WorkdayLogoTitle.js +26 -13
  86. package/dist/es6/header/lib/parts/index.d.ts +2 -3
  87. package/dist/es6/header/lib/parts/index.d.ts.map +1 -1
  88. package/dist/es6/header/lib/parts/index.js +2 -3
  89. package/dist/es6/header/lib/shared/themes.d.ts +28 -19
  90. package/dist/es6/header/lib/shared/themes.d.ts.map +1 -1
  91. package/dist/es6/header/lib/shared/themes.js +14 -37
  92. package/dist/es6/header/lib/shared/types.d.ts +3 -8
  93. package/dist/es6/header/lib/shared/types.d.ts.map +1 -1
  94. package/dist/es6/header/lib/shared/types.js +17 -23
  95. package/dist/es6/index.d.ts +1 -0
  96. package/dist/es6/index.d.ts.map +1 -1
  97. package/dist/es6/index.js +1 -0
  98. package/dist/es6/layout/lib/Stack.d.ts.map +1 -1
  99. package/dist/es6/layout/lib/Stack.js +1 -1
  100. package/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
  101. package/dist/es6/layout/lib/utils/getValidChildren.d.ts.map +1 -1
  102. package/dist/es6/search-form/index.d.ts +3 -0
  103. package/dist/es6/search-form/index.d.ts.map +1 -0
  104. package/dist/es6/search-form/index.js +2 -0
  105. package/{ts3.5/dist/commonjs/header/lib/parts/SearchBar.d.ts → dist/es6/search-form/lib/SearchForm.d.ts} +107 -103
  106. package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -0
  107. package/dist/es6/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js} +16 -18
  108. package/dist/es6/search-form/lib/themes.d.ts +21 -0
  109. package/dist/es6/search-form/lib/themes.d.ts.map +1 -0
  110. package/dist/es6/search-form/lib/themes.js +39 -0
  111. package/header/README.md +37 -181
  112. package/header/index.ts +5 -5
  113. package/header/lib/GlobalHeader.tsx +26 -9
  114. package/header/lib/Header.tsx +58 -26
  115. package/header/lib/parts/DubLogoTitle.tsx +26 -9
  116. package/header/lib/parts/WorkdayLogoTitle.tsx +40 -11
  117. package/header/lib/parts/index.ts +2 -3
  118. package/header/lib/shared/themes.tsx +32 -56
  119. package/header/lib/shared/types.tsx +3 -9
  120. package/index.ts +1 -0
  121. package/layout/lib/Stack.tsx +3 -1
  122. package/package.json +5 -7
  123. package/search-form/LICENSE +52 -0
  124. package/search-form/README.md +6 -0
  125. package/search-form/index.ts +2 -0
  126. package/{header/lib/parts/SearchBar.tsx → search-form/lib/SearchForm.tsx} +40 -35
  127. package/search-form/lib/themes.ts +54 -0
  128. package/search-form/package.json +5 -0
  129. package/ts3.5/dist/commonjs/common/lib/theming/index.d.ts +1 -0
  130. package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +11 -0
  131. package/ts3.5/dist/commonjs/header/index.d.ts +5 -5
  132. package/ts3.5/dist/commonjs/header/lib/GlobalHeader.d.ts +11 -2
  133. package/ts3.5/dist/commonjs/header/lib/Header.d.ts +17 -8
  134. package/ts3.5/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +13 -4
  135. package/ts3.5/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  136. package/ts3.5/dist/commonjs/header/lib/parts/index.d.ts +2 -3
  137. package/ts3.5/dist/commonjs/header/lib/shared/themes.d.ts +28 -19
  138. package/ts3.5/dist/commonjs/header/lib/shared/types.d.ts +3 -8
  139. package/ts3.5/dist/commonjs/index.d.ts +1 -0
  140. package/ts3.5/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
  141. package/ts3.5/dist/commonjs/search-form/index.d.ts +3 -0
  142. package/ts3.5/dist/{es6/header/lib/parts/SearchBar.d.ts → commonjs/search-form/lib/SearchForm.d.ts} +27 -23
  143. package/ts3.5/dist/commonjs/search-form/lib/themes.d.ts +21 -0
  144. package/ts3.5/dist/es6/common/lib/theming/index.d.ts +1 -0
  145. package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +11 -0
  146. package/ts3.5/dist/es6/header/index.d.ts +5 -5
  147. package/ts3.5/dist/es6/header/lib/GlobalHeader.d.ts +11 -2
  148. package/ts3.5/dist/es6/header/lib/Header.d.ts +17 -8
  149. package/ts3.5/dist/es6/header/lib/parts/DubLogoTitle.d.ts +13 -4
  150. package/ts3.5/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  151. package/ts3.5/dist/es6/header/lib/parts/index.d.ts +2 -3
  152. package/ts3.5/dist/es6/header/lib/shared/themes.d.ts +28 -19
  153. package/ts3.5/dist/es6/header/lib/shared/types.d.ts +3 -8
  154. package/ts3.5/dist/es6/index.d.ts +1 -0
  155. package/ts3.5/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
  156. package/ts3.5/dist/es6/search-form/index.d.ts +3 -0
  157. package/{dist/es6/header/lib/parts/SearchBar.d.ts → ts3.5/dist/es6/search-form/lib/SearchForm.d.ts} +107 -103
  158. package/ts3.5/dist/es6/search-form/lib/themes.d.ts +21 -0
  159. package/dist/commonjs/header/lib/parts/SearchBar.d.ts.map +0 -1
  160. package/dist/es6/header/lib/parts/SearchBar.d.ts.map +0 -1
@@ -1,34 +1,32 @@
1
1
  import * as React from 'react';
2
2
  import {CSSObject} from '@emotion/core';
3
3
  import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
4
- import {GrowthBehavior, styled} from '@workday/canvas-kit-react/common';
4
+ import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
5
5
  import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
6
6
  import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
7
7
  import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-field';
8
8
  import {Combobox} from '@workday/canvas-kit-labs-react/combobox';
9
9
  import {TextInput} from '@workday/canvas-kit-react/text-input';
10
10
  import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
11
- import {SearchThemeAttributes, searchThemes} from '../shared/themes';
12
- import {SearchTheme} from '../shared/types';
11
+ import {SearchThemeAttributes, searchThemes, SearchTheme} from './themes';
13
12
  import chroma from 'chroma-js';
14
- import uuid from 'uuid/v4';
15
13
 
16
- export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
14
+ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
17
15
  /**
18
- * The function called when the SearchBar form is submitted. The current input value is passed to the callback function.
16
+ * The function called when the SearchForm form is submitted. The current input value is passed to the callback function.
19
17
  */
20
18
  onSubmit: React.FormEventHandler<HTMLFormElement>;
21
19
  /**
22
- * If true, collapse the SearchBar text input into a toggle icon. Useful for responsive layouts.
20
+ * If true, collapse the SearchForm text input into a toggle icon. Useful for responsive layouts.
23
21
  * @default false
24
22
  */
25
23
  isCollapsed?: boolean;
26
24
  /**
27
- * The function called when the SearchBar text input changes.
25
+ * The function called when the SearchForm text input changes.
28
26
  */
29
27
  onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
30
28
  /**
31
- * The autocomplete items of the SearchBar. This array of menu items is shown under the search bar.
29
+ * The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
32
30
  */
33
31
  autocompleteItems?: React.ReactElement<MenuItemProps>[];
34
32
  /**
@@ -36,57 +34,62 @@ export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes
36
34
  */
37
35
  searchTheme?: SearchTheme | SearchThemeAttributes;
38
36
  /**
39
- * The placeholder text of the SearchBar text input.
37
+ * The placeholder text of the SearchForm text input.
40
38
  * @default Search
41
39
  */
42
40
  placeholder?: string;
43
41
  /**
44
- * The initial value of the SearchBar text input.
42
+ * The initial value of the SearchForm text input.
45
43
  */
46
44
  initialValue?: string;
47
45
  /**
48
- * If true, right-align the SearchBar. If false, the text input should grow to left-align the SearchBar.
46
+ * If true, right-align the SearchForm. If false, the text input should grow to left-align the SearchForm.
49
47
  * @default false
50
48
  */
51
49
  rightAlign?: boolean;
52
50
  /**
53
- * The screenreader label text for the SearchBar text input.
51
+ * The screenreader label text for the SearchForm text input.
54
52
  * @default Search
55
53
  */
56
54
  inputLabel?: string;
57
55
  /**
58
- * The screenreader label text for the SearchBar submit button.
56
+ * The screenreader label text for the SearchForm submit button.
59
57
  * @default Search
60
58
  */
61
59
  submitAriaLabel?: string;
62
60
  /**
63
- * The screenreader label text for the SearchBar clear button.
61
+ * The screenreader label text for the SearchForm clear button.
64
62
  * @default Reset Search Form
65
63
  */
66
64
  clearButtonAriaLabel?: string;
67
65
  /**
68
- * The screenreader label text for the button to open the collapsed SearchBar.
66
+ * The screenreader label text for the button to open the collapsed SearchForm.
69
67
  * @default Open Search
70
68
  */
71
69
  openButtonAriaLabel?: string;
72
70
  /**
73
- * The screenreader label text for the button to close the open SearchBar.
71
+ * The screenreader label text for the button to close the open SearchForm.
74
72
  * @default Cancel
75
73
  */
76
74
  closeButtonAriaLabel?: string;
77
75
  /**
78
- * If true, render the SearchBar with a button to clear the text input.
76
+ * If true, render the SearchForm with a button to clear the text input.
79
77
  * @default true
80
78
  */
81
79
  showClearButton?: boolean;
82
80
  /**
83
- * Height of the Search Bar in pixels
84
- * @default: 40
81
+ * Height of the Search Form in pixels
82
+ * @default 40
85
83
  */
86
84
  height?: number;
85
+ /**
86
+ * If true, allow onSubmit being called when input value is empty.
87
+ * @default false
88
+ */
89
+ allowEmptyStringSearch?: boolean;
87
90
  }
88
91
 
89
- export interface SearchBarState {
92
+ export interface SearchFormState {
90
93
  showForm: boolean;
91
94
  searchQuery: string;
92
95
  isFocused: boolean;
@@ -110,8 +113,8 @@ const formCollapsedBackground = colors.frenchVanilla100;
110
113
  const maxWidth = 480;
111
114
  const minWidth = 120;
112
115
 
113
- const SearchForm = styled('form')<
114
- Pick<SearchBarProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchBarState, 'showForm'>
116
+ const StyledSearchForm = styled('form')<
117
+ Pick<SearchFormProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchFormState, 'showForm'>
115
118
  >(
116
119
  {
117
120
  position: 'relative',
@@ -148,7 +151,7 @@ const SearchForm = styled('form')<
148
151
  }
149
152
  );
150
153
 
151
- const SearchContainer = styled('div')<Pick<SearchBarProps, 'height'>>(
154
+ const SearchContainer = styled('div')<Pick<SearchFormProps, 'height'>>(
152
155
  {
153
156
  position: `relative`,
154
157
  display: 'flex',
@@ -166,7 +169,7 @@ const SearchCombobox = styled(Combobox)({
166
169
  width: `100%`,
167
170
  });
168
171
 
169
- const SearchIcon = styled(IconButton)<Pick<SearchBarProps, 'isCollapsed'> & {isHidden: boolean}>(
172
+ const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
170
173
  ({isCollapsed, isHidden}) => {
171
174
  const collapsedSize = 40;
172
175
  const size = 32;
@@ -199,7 +202,7 @@ const SearchIcon = styled(IconButton)<Pick<SearchBarProps, 'isCollapsed'> & {isH
199
202
  );
200
203
 
201
204
  const CloseButton = styled(IconButton)<
202
- Pick<SearchBarProps, 'isCollapsed'> & Pick<SearchBarState, 'showForm'>
205
+ Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
203
206
  >(({isCollapsed, showForm}) => {
204
207
  const collapseStyles: CSSObject =
205
208
  isCollapsed && showForm
@@ -222,7 +225,7 @@ const CloseButton = styled(IconButton)<
222
225
  });
223
226
 
224
227
  const SearchField = styled(FormField)<
225
- Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchBarState, 'showForm'>
228
+ Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchFormState, 'showForm'>
226
229
  >(({isCollapsed, showForm, grow, height}) => {
227
230
  return {
228
231
  display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
@@ -237,7 +240,7 @@ const SearchField = styled(FormField)<
237
240
  });
238
241
 
239
242
  const SearchInput = styled(TextInput)<
240
- Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & {
243
+ Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & {
241
244
  inputColors: ReturnType<typeof getInputColors>;
242
245
  }
243
246
  >(({isCollapsed, inputColors, grow, height}) => {
@@ -289,14 +292,14 @@ const SearchInput = styled(TextInput)<
289
292
  };
290
293
  });
291
294
 
292
- export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
295
+ export class SearchForm extends React.Component<SearchFormProps, SearchFormState> {
293
296
  static Theme = SearchTheme;
294
297
 
295
298
  private inputRef = React.createRef<HTMLInputElement>();
296
299
  private openRef = React.createRef<HTMLButtonElement>();
297
- private labelId = uuid();
300
+ private labelId = generateUniqueId();
298
301
 
299
- state: Readonly<SearchBarState> = {
302
+ state: Readonly<SearchFormState> = {
300
303
  showForm: false,
301
304
  searchQuery: '',
302
305
  isFocused: false,
@@ -333,7 +336,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
333
336
 
334
337
  handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
335
338
  event.preventDefault();
336
- if (this.state.searchQuery.trim()) {
339
+ if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
337
340
  this.props.onSubmit(event);
338
341
  } else {
339
342
  this.focusInput();
@@ -352,7 +355,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
352
355
  }
353
356
  };
354
357
 
355
- componentDidUpdate(prevProps: SearchBarProps, prevState: SearchBarState) {
358
+ componentDidUpdate(prevProps: SearchFormProps, prevState: SearchFormState) {
356
359
  const showFormToggled = this.state.showForm !== prevState.showForm;
357
360
  if (showFormToggled) {
358
361
  if (this.state.showForm) {
@@ -409,11 +412,12 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
409
412
  initialValue,
410
413
  searchTheme,
411
414
  rightAlign,
415
+ allowEmptyStringSearch = false,
412
416
  ...elemProps
413
417
  } = this.props;
414
418
 
415
419
  return (
416
- <SearchForm
420
+ <StyledSearchForm
417
421
  role="search"
418
422
  action="."
419
423
  rightAlign={rightAlign}
@@ -473,6 +477,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
473
477
  inputColors={this.getThemeColors()}
474
478
  height={height}
475
479
  name="search"
480
+ autoComplete="off"
476
481
  />
477
482
  </SearchCombobox>
478
483
  </SearchField>
@@ -486,7 +491,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
486
491
  type="button"
487
492
  />
488
493
  </SearchContainer>
489
- </SearchForm>
494
+ </StyledSearchForm>
490
495
  );
491
496
  }
492
497
  }
@@ -0,0 +1,54 @@
1
+ import {focusRing} from '@workday/canvas-kit-react/common';
2
+ import {colors} from '@workday/canvas-kit-react/tokens';
3
+
4
+ export enum SearchTheme {
5
+ Light,
6
+ Dark,
7
+ Transparent,
8
+ }
9
+ export interface SearchThemeAttributes {
10
+ background?: string;
11
+ backgroundFocus?: string;
12
+ backgroundHover?: string;
13
+ color?: string;
14
+ colorFocus?: string;
15
+ placeholderColor?: string;
16
+ placeholderColorFocus?: string;
17
+ boxShadow?: string | string[];
18
+ boxShadowFocus?: string | string[];
19
+ }
20
+
21
+ export interface SearchThemes {
22
+ [key: string]: SearchThemeAttributes;
23
+ }
24
+
25
+ export const searchThemes: SearchThemes = {
26
+ [SearchTheme.Transparent]: {
27
+ background: 'rgba(0, 0, 0, 0)',
28
+ backgroundFocus: 'rgba(0, 0, 0, 0)',
29
+ color: colors.blackPepper300,
30
+ colorFocus: colors.blackPepper300,
31
+ placeholderColor: colors.licorice300,
32
+ placeholderColorFocus: colors.licorice300,
33
+ boxShadow: 'none',
34
+ boxShadowFocus: 'none',
35
+ },
36
+ [SearchTheme.Light]: {
37
+ background: colors.soap200,
38
+ backgroundFocus: colors.soap200,
39
+ backgroundHover: colors.soap300,
40
+ color: colors.blackPepper300,
41
+ placeholderColor: colors.licorice300,
42
+ boxShadow: 'none',
43
+ boxShadowFocus: focusRing().boxShadow,
44
+ },
45
+ [SearchTheme.Dark]: {
46
+ background: 'rgba(0, 0, 0, 0.2)',
47
+ backgroundFocus: colors.frenchVanilla100,
48
+ color: colors.frenchVanilla100,
49
+ colorFocus: colors.blackPepper300,
50
+ placeholderColor: colors.frenchVanilla100,
51
+ placeholderColorFocus: colors.licorice300,
52
+ boxShadow: 'none',
53
+ },
54
+ };
@@ -0,0 +1,5 @@
1
+ {
2
+ "main": "../dist/commonjs/search-form",
3
+ "module": "../dist/es6/search-form",
4
+ "sideEffects": false
5
+ }
@@ -1,2 +1,3 @@
1
1
  export * from './useThemeRTL';
2
+ export * from './useThemedRing';
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1,11 @@
1
+ import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
2
+ import { CSSProperties } from '@workday/canvas-kit-react/tokens';
3
+ declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
4
+ interface ContrastColors {
5
+ outer?: string;
6
+ inner?: string;
7
+ }
8
+ export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
9
+ export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
10
+ export {};
11
+ //# sourceMappingURL=useThemedRing.d.ts.map
@@ -1,8 +1,8 @@
1
- import Header from './lib/Header';
2
- import GlobalHeader from './lib/GlobalHeader';
3
- export default Header;
4
- export { Header };
5
- export { GlobalHeader };
1
+ import DeprecatedHeader from './lib/Header';
2
+ import DeprecatedGlobalHeader from './lib/GlobalHeader';
3
+ export default DeprecatedHeader;
4
+ export { DeprecatedHeader };
5
+ export { DeprecatedGlobalHeader };
6
6
  export * from './lib/parts';
7
7
  export * from './lib/shared/themes';
8
8
  export * from './lib/shared/types';
@@ -19,11 +19,20 @@ export interface GlobalHeaderProps {
19
19
  */
20
20
  isCollapsed?: boolean;
21
21
  /**
22
- * The React element to render in the left slot of the GlobalHeader. This is typically a SearchBar component.
22
+ * The React element to render in the left slot of the GlobalHeader. This is typically a SearchForm component.
23
23
  */
24
24
  leftSlot?: React.ReactElement;
25
25
  }
26
- export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
26
+ /**
27
+ * ### Deprecated Global Header
28
+ *
29
+ * As of Canvas Kit v6, this component is being soft-deprecated.
30
+ * It will be hard-deprecated (completely removed) in v7. Please see the
31
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
32
+ * for more information.
33
+ */
34
+ export default class DeprecatedGlobalHeader extends React.Component<GlobalHeaderProps> {
35
+ componentDidMount(): void;
27
36
  render(): JSX.Element;
28
37
  }
29
38
  //# sourceMappingURL=GlobalHeader.d.ts.map
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { HeaderTheme, HeaderVariant } from './shared/types';
2
+ import { DeprecatedHeaderTheme, DeprecatedHeaderVariant } from './shared/types';
3
3
  export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
4
4
  /**
5
5
  * 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> {
7
7
  menuToggle?: React.ReactNode;
8
8
  /**
9
9
  * The theme of the Header. Accepts `White`, `Blue`, or `Transparent`.
10
- * @default HeaderTheme.White
10
+ * @default DeprecatedHeaderTheme.White
11
11
  */
12
- themeColor?: HeaderTheme;
12
+ themeColor?: DeprecatedHeaderTheme;
13
13
  /**
14
14
  * The variant of the Header. Accepts `Dub` (small) or `Full` (large).
15
- * @default HeaderVariant.Dub
15
+ * @default DeprecatedHeaderVariant.Dub
16
16
  */
17
- variant?: HeaderVariant;
17
+ variant?: DeprecatedHeaderVariant;
18
18
  /**
19
19
  * The text of the Header title. Not used if `brand` is provided.
20
20
  */
@@ -37,7 +37,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
37
37
  */
38
38
  onMenuClick?: (e: React.MouseEvent) => void;
39
39
  /**
40
- * The React element to render in the left slot of the Header. This is typically a SearchBar component.
40
+ * The React element to render in the left slot of the Header. This is typically a SearchForm component.
41
41
  */
42
42
  leftSlot?: React.ReactElement;
43
43
  /**
@@ -46,9 +46,18 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
46
46
  */
47
47
  isCollapsed?: boolean;
48
48
  }
49
+ /**
50
+ * ### Deprecated Header
51
+ *
52
+ * As of Canvas Kit v6, this component is being soft-deprecated.
53
+ * It will be hard-deprecated (completely removed) in v7. Please see the
54
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
55
+ * for more information.
56
+ */
49
57
  export default class Header extends React.Component<HeaderProps, {}> {
50
- static Theme: typeof HeaderTheme;
51
- static Variant: typeof HeaderVariant;
58
+ static Theme: typeof DeprecatedHeaderTheme;
59
+ static Variant: typeof DeprecatedHeaderVariant;
60
+ componentDidMount(): void;
52
61
  /**
53
62
  * Helper that recursively maps ReactNodes to their theme-based equivalent.
54
63
  * Any children that are included in a Header may need to undergo transformation
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
- import { HeaderTheme } from '../shared/types';
2
+ import { DeprecatedHeaderTheme } from '../shared/types';
3
3
  export declare type DubTitleProps = {
4
4
  /**
5
5
  * The theme of the DubLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
6
- * @default HeaderTheme.White
6
+ * @default DeprecatedHeaderTheme.White
7
7
  */
8
- themeColor?: HeaderTheme;
8
+ themeColor?: DeprecatedHeaderTheme;
9
9
  /**
10
10
  * The text of the DubLogoTitle. Not used if `brand` is provided.
11
11
  */
@@ -15,7 +15,16 @@ export declare type DubTitleProps = {
15
15
  */
16
16
  bgColor?: string;
17
17
  };
18
- export declare class DubLogoTitle extends React.Component<DubTitleProps> {
18
+ /**
19
+ * ### Deprecated Dub Logo Title
20
+ *
21
+ * As of Canvas Kit v6, this component is being soft-deprecated.
22
+ * It will be hard-deprecated (completely removed) in v7. Please see the
23
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
24
+ * for more information.
25
+ */
26
+ export declare class DeprecatedDubLogoTitle extends React.Component<DubTitleProps> {
27
+ componentDidMount(): void;
19
28
  render(): JSX.Element;
20
29
  }
21
30
  //# sourceMappingURL=DubLogoTitle.d.ts.map
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
- import { HeaderTheme, HeaderVariant } from '../shared/types';
2
+ import { DeprecatedHeaderTheme, DeprecatedHeaderVariant } from '../shared/types';
3
3
  export declare type WorkdayLogoTitleProps = {
4
4
  /**
5
5
  * The theme of the WorkdayLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
6
- * @default HeaderTheme.White
6
+ * @default DeprecatedHeaderTheme.White
7
7
  */
8
- themeColor?: HeaderTheme;
8
+ themeColor?: DeprecatedHeaderTheme;
9
9
  /**
10
10
  * The text of the WorkdayLogoTitle. Not used if `brand` is provided.
11
11
  * @default ''
@@ -14,9 +14,18 @@ export declare type WorkdayLogoTitleProps = {
14
14
  /**
15
15
  * The variant of the WorkdayLogoTitle.
16
16
  */
17
- variant?: HeaderVariant;
17
+ variant?: DeprecatedHeaderVariant;
18
18
  };
19
- export declare class WorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
19
+ /**
20
+ * ### Deprecated Workday Logo Title
21
+ *
22
+ * As of Canvas Kit v6, this component is being soft-deprecated.
23
+ * It will be hard-deprecated (completely removed) in v7. Please see the
24
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
25
+ * for more information.
26
+ */
27
+ export declare class DeprecatedWorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
28
+ componentDidMount(): void;
20
29
  render(): JSX.Element;
21
30
  }
22
31
  //# sourceMappingURL=WorkdayLogoTitle.d.ts.map
@@ -1,4 +1,3 @@
1
- export { DubLogoTitle } from './DubLogoTitle';
2
- export { SearchBar, SearchBarProps } from './SearchBar';
3
- export { WorkdayLogoTitle } from './WorkdayLogoTitle';
1
+ export { DeprecatedDubLogoTitle } from './DubLogoTitle';
2
+ export { DeprecatedWorkdayLogoTitle } from './WorkdayLogoTitle';
4
3
  //# sourceMappingURL=index.d.ts.map
@@ -1,5 +1,13 @@
1
1
  import { CSSProperties } from '@workday/canvas-kit-react/tokens';
2
- export interface ThemeAttributes {
2
+ /**
3
+ * ### Deprecated Header Theme Attributes Interface
4
+ *
5
+ * As of Canvas Kit v6, this type interface is being soft-deprecated along with the rest of the labs/header package.
6
+ * It will be hard-deprecated (completely removed) in v7. Please see the
7
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
8
+ * for more information.
9
+ */
10
+ export interface DeprecatedHeaderThemeAttributes {
3
11
  color: string;
4
12
  background: string;
5
13
  depth: CSSProperties;
@@ -12,23 +20,24 @@ export interface ThemeAttributes {
12
20
  currentLinkColor: string;
13
21
  chipColor: string;
14
22
  }
15
- export interface Themes {
16
- [key: string]: ThemeAttributes;
23
+ /**
24
+ * ### Deprecated Header Themes Interface
25
+ *
26
+ * As of Canvas Kit v6, this type interface is being soft-deprecated along with the rest of the labs/header package.
27
+ * It will be hard-deprecated (completely removed) in v7. Please see the
28
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
29
+ * for more information.
30
+ */
31
+ export interface DeprecatedHeaderThemes {
32
+ [key: string]: DeprecatedHeaderThemeAttributes;
17
33
  }
18
- export declare const themes: Themes;
19
- export interface SearchThemeAttributes {
20
- background?: string;
21
- backgroundFocus?: string;
22
- backgroundHover?: string;
23
- color?: string;
24
- colorFocus?: string;
25
- placeholderColor?: string;
26
- placeholderColorFocus?: string;
27
- boxShadow?: string | string[];
28
- boxShadowFocus?: string | string[];
29
- }
30
- export interface SearchThemes {
31
- [key: string]: SearchThemeAttributes;
32
- }
33
- export declare const searchThemes: SearchThemes;
34
+ /**
35
+ * ### Deprecated Header Themes
36
+ *
37
+ * As of Canvas Kit v6, this theme object is being soft-deprecated along with the rest of the labs/header package.
38
+ * It will be hard-deprecated (completely removed) in v7. Please see the
39
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
40
+ * for more information.
41
+ */
42
+ export declare const deprecatedHeaderThemes: DeprecatedHeaderThemes;
34
43
  //# sourceMappingURL=themes.d.ts.map
@@ -1,20 +1,15 @@
1
- export declare enum HeaderTheme {
1
+ export declare enum DeprecatedHeaderTheme {
2
2
  White = 0,
3
3
  Blue = 1,
4
4
  Transparent = 2
5
5
  }
6
- export declare enum HeaderVariant {
6
+ export declare enum DeprecatedHeaderVariant {
7
7
  Dub = 0,
8
8
  Full = 1,
9
9
  Global = 2
10
10
  }
11
- export declare enum HeaderHeight {
11
+ export declare enum DeprecatedHeaderHeight {
12
12
  Small = "64px",
13
13
  Large = "80px"
14
14
  }
15
- export declare enum SearchTheme {
16
- Light = 0,
17
- Dark = 1,
18
- Transparent = 2
19
- }
20
15
  //# sourceMappingURL=types.d.ts.map
@@ -3,4 +3,5 @@ export * from './common';
3
3
  export * from './drawer';
4
4
  export * from './header';
5
5
  export * from './layout';
6
+ export * from './search-form';
6
7
  //# sourceMappingURL=index.d.ts.map
@@ -1,3 +1,3 @@
1
1
  import * as React from 'react';
2
- 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>)>[];
2
+ 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>)>[];
3
3
  //# sourceMappingURL=getValidChildren.d.ts.map
@@ -0,0 +1,3 @@
1
+ export * from './lib/SearchForm';
2
+ export * from './lib/themes';
3
+ //# sourceMappingURL=index.d.ts.map