@workday/canvas-kit-preview-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.384-next.3

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 (97) hide show
  1. package/dist/commonjs/color-picker/lib/ColorPicker.js +24 -47
  2. package/dist/commonjs/color-picker/lib/parts/ColorReset.js +32 -23
  3. package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +26 -39
  4. package/dist/commonjs/form-field/lib/FormField.js +10 -33
  5. package/dist/commonjs/form-field/lib/FormFieldHint.js +8 -31
  6. package/dist/commonjs/form-field/lib/FormFieldInput.js +6 -17
  7. package/dist/commonjs/form-field/lib/FormFieldLabel.js +8 -31
  8. package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.js +4 -5
  9. package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.js +5 -6
  10. package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.js +4 -5
  11. package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js +8 -16
  12. package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.js +3 -3
  13. package/dist/commonjs/menu/lib/Menu.js +96 -129
  14. package/dist/commonjs/menu/lib/MenuItem.js +94 -109
  15. package/dist/commonjs/pill/lib/Pill.js +55 -60
  16. package/dist/commonjs/pill/lib/PillAvatar.js +6 -17
  17. package/dist/commonjs/pill/lib/PillCount.js +7 -30
  18. package/dist/commonjs/pill/lib/PillIcon.js +8 -31
  19. package/dist/commonjs/pill/lib/PillIconButton.js +13 -36
  20. package/dist/commonjs/pill/lib/PillLabel.js +10 -33
  21. package/dist/commonjs/pill/lib/usePillModel.js +8 -16
  22. package/dist/commonjs/segmented-control/lib/SegmentedControl.js +6 -7
  23. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +24 -49
  24. package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +13 -38
  25. package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.js +8 -10
  26. package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.js +31 -31
  27. package/dist/commonjs/select/lib/Select.js +147 -189
  28. package/dist/commonjs/select/lib/SelectBase.js +106 -101
  29. package/dist/commonjs/select/lib/SelectMenu.js +53 -84
  30. package/dist/commonjs/select/lib/SelectOption.js +33 -47
  31. package/dist/commonjs/select/lib/scrolling.js +6 -7
  32. package/dist/commonjs/select/lib/utils.js +4 -4
  33. package/dist/commonjs/side-panel/lib/SidePanel.js +36 -51
  34. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +17 -40
  35. package/dist/commonjs/side-panel/lib/hooks.js +20 -20
  36. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +10 -34
  37. package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js +9 -21
  38. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +5 -28
  39. package/dist/commonjs/status-indicator/lib/hooks/useStatusIndicatorModel.js +6 -15
  40. package/dist/commonjs/text-area/lib/TextArea.js +8 -31
  41. package/dist/commonjs/text-area/lib/TextAreaField.d.ts.map +1 -1
  42. package/dist/commonjs/text-area/lib/TextAreaField.js +12 -36
  43. package/dist/commonjs/text-input/lib/TextInput.js +8 -31
  44. package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +1 -1
  45. package/dist/commonjs/text-input/lib/TextInputField.js +12 -24
  46. package/dist/commonjs/text-input/lib/hooks/useTextInputField.js +3 -3
  47. package/dist/commonjs/text-input/lib/hooks/useTextInputModel.js +1 -1
  48. package/dist/es6/color-picker/lib/ColorPicker.js +15 -38
  49. package/dist/es6/color-picker/lib/parts/ColorReset.js +27 -18
  50. package/dist/es6/color-picker/lib/parts/SwatchBook.js +21 -34
  51. package/dist/es6/form-field/lib/FormField.js +4 -27
  52. package/dist/es6/form-field/lib/FormFieldHint.js +4 -27
  53. package/dist/es6/form-field/lib/FormFieldInput.js +3 -14
  54. package/dist/es6/form-field/lib/FormFieldLabel.js +4 -27
  55. package/dist/es6/form-field/lib/hooks/useFormFieldHint.js +2 -3
  56. package/dist/es6/form-field/lib/hooks/useFormFieldInput.js +3 -4
  57. package/dist/es6/form-field/lib/hooks/useFormFieldLabel.js +2 -3
  58. package/dist/es6/form-field/lib/hooks/useFormFieldModel.js +8 -16
  59. package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.js +2 -2
  60. package/dist/es6/menu/lib/Menu.js +91 -125
  61. package/dist/es6/menu/lib/MenuItem.js +90 -106
  62. package/dist/es6/pill/lib/Pill.js +45 -50
  63. package/dist/es6/pill/lib/PillAvatar.js +3 -14
  64. package/dist/es6/pill/lib/PillCount.js +4 -27
  65. package/dist/es6/pill/lib/PillIcon.js +3 -26
  66. package/dist/es6/pill/lib/PillIconButton.js +7 -30
  67. package/dist/es6/pill/lib/PillLabel.js +5 -28
  68. package/dist/es6/pill/lib/usePillModel.js +8 -16
  69. package/dist/es6/segmented-control/lib/SegmentedControl.js +2 -3
  70. package/dist/es6/segmented-control/lib/SegmentedControlItem.js +17 -42
  71. package/dist/es6/segmented-control/lib/SegmentedControlList.js +9 -34
  72. package/dist/es6/segmented-control/lib/hooks/useSegmentedControlItem.js +5 -7
  73. package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.js +29 -29
  74. package/dist/es6/select/lib/Select.js +144 -186
  75. package/dist/es6/select/lib/SelectBase.js +99 -94
  76. package/dist/es6/select/lib/SelectMenu.js +49 -80
  77. package/dist/es6/select/lib/SelectOption.js +30 -44
  78. package/dist/es6/select/lib/scrolling.js +6 -7
  79. package/dist/es6/select/lib/utils.js +4 -4
  80. package/dist/es6/side-panel/lib/SidePanel.js +31 -46
  81. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +10 -33
  82. package/dist/es6/side-panel/lib/hooks.js +19 -19
  83. package/dist/es6/status-indicator/lib/StatusIndicator.js +5 -29
  84. package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js +6 -18
  85. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +3 -26
  86. package/dist/es6/status-indicator/lib/hooks/useStatusIndicatorModel.js +6 -15
  87. package/dist/es6/text-area/lib/TextArea.js +4 -27
  88. package/dist/es6/text-area/lib/TextAreaField.d.ts.map +1 -1
  89. package/dist/es6/text-area/lib/TextAreaField.js +9 -33
  90. package/dist/es6/text-input/lib/TextInput.js +4 -27
  91. package/dist/es6/text-input/lib/TextInputField.d.ts.map +1 -1
  92. package/dist/es6/text-input/lib/TextInputField.js +9 -21
  93. package/dist/es6/text-input/lib/hooks/useTextInputField.js +1 -1
  94. package/dist/es6/text-input/lib/hooks/useTextInputModel.js +1 -1
  95. package/package.json +3 -4
  96. package/text-area/lib/TextAreaField.tsx +6 -2
  97. package/text-input/lib/TextInputField.tsx +6 -2
@@ -1,31 +1,9 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
1
  import React from 'react';
24
2
  import { createContainer } from '@workday/canvas-kit-react/common';
25
3
  import { FormField, useFormFieldModel, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
26
4
  import { Flex } from '@workday/canvas-kit-react/layout';
27
5
  import { TextInputField } from './TextInputField';
28
- export var TextInput = createContainer('div')({
6
+ export const TextInput = createContainer('div')({
29
7
  displayName: 'TextInput',
30
8
  modelHook: useFormFieldModel,
31
9
  subComponents: {
@@ -33,8 +11,7 @@ export var TextInput = createContainer('div')({
33
11
  Label: FormField.Label,
34
12
  Hint: FormField.Hint,
35
13
  },
36
- })(function (_a, Element) {
37
- var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
38
- var layoutProps = useFormFieldOrientation(orientation);
39
- return (React.createElement(Flex, __assign({ as: Element }, layoutProps, elemProps), children));
14
+ })(({ children, orientation, ...elemProps }, Element) => {
15
+ const layoutProps = useFormFieldOrientation(orientation);
16
+ return (React.createElement(Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
40
17
  });
@@ -1 +1 @@
1
- {"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}
1
+ {"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}
@@ -1,23 +1,11 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  /** @jsxRuntime classic */
13
2
  /** @jsx jsx */
14
3
  import { jsx } from '@emotion/react';
15
4
  import { borderRadius, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
16
- import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
17
- import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
5
+ import { createSubcomponent, useTheme, useThemedRing, } from '@workday/canvas-kit-react/common';
18
6
  import { FormField, useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
19
7
  import { useTextInputField } from './hooks';
20
- var baseStyles = {
8
+ const baseStyles = {
21
9
  transition: '0.2s box-shadow, 0.2s border-color',
22
10
  '&::placeholder': {
23
11
  color: inputColors.placeholder,
@@ -40,20 +28,20 @@ var baseStyles = {
40
28
  display: 'none',
41
29
  },
42
30
  };
43
- export var TextInputField = createSubcomponent('input')({
31
+ export const TextInputField = createSubcomponent('input')({
44
32
  displayName: 'TextInput.Field',
45
33
  modelHook: useFormFieldModel,
46
34
  elemPropsHook: useTextInputField,
47
- })(function (elemProps, Element, model) {
48
- var theme = useTheme();
49
- var errorRing = useThemedRing('error');
50
- var focusStyles = model.state.hasError
35
+ })((elemProps, Element, model) => {
36
+ const theme = useTheme();
37
+ const errorRing = useThemedRing('error');
38
+ const focusStyles = model.state.hasError
51
39
  ? errorRing
52
40
  : {
53
41
  '&:focus:not([disabled])': {
54
42
  borderColor: theme.canvas.palette.common.focusOutline,
55
- boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
43
+ boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
56
44
  },
57
45
  };
58
- return (jsx(FormField.Input, __assign({ as: "input" }, type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
46
+ return (jsx(FormField.Input, Object.assign({ as: "input" }, type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: `1px solid ${inputColors.border}`, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
59
47
  });
@@ -3,7 +3,7 @@ import { useTextInputModel } from './useTextInputModel';
3
3
  /**
4
4
  * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
5
5
  */
6
- export var useTextInputField = createElemPropsHook(useTextInputModel)(function () {
6
+ export const useTextInputField = createElemPropsHook(useTextInputModel)(() => {
7
7
  return {
8
8
  type: 'text',
9
9
  };
@@ -1,3 +1,3 @@
1
1
  import { useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
2
2
  /** @deprecated Please use `useFormFieldModel` instead */
3
- export var useTextInputModel = useFormFieldModel;
3
+ export const useTextInputModel = useFormFieldModel;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "9.0.0-alpha.368-next.6+63a2bafb",
3
+ "version": "9.0.0-alpha.384-next.3+e5b26417",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -46,16 +46,15 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^9.0.0-alpha.368-next.6+63a2bafb",
49
+ "@workday/canvas-kit-react": "^9.0.0-alpha.384-next.3+e5b26417",
50
50
  "@workday/canvas-system-icons-web": "^3.0.0",
51
51
  "@workday/design-assets-types": "^0.2.8"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@workday/canvas-accent-icons-web": "^3.0.0",
55
- "@workday/canvas-kit-labs-react": "^9.0.0-alpha.368-next.6+63a2bafb",
56
55
  "formik": "^2.2.9",
57
56
  "react-hook-form": "7.36.1",
58
57
  "yup": "^0.32.11"
59
58
  },
60
- "gitHead": "63a2bafbfbf34c1f98b6db4128c4079a358af453"
59
+ "gitHead": "e5b264177aabd434723720e16048673c3916b156"
61
60
  }
@@ -9,8 +9,12 @@ import {
9
9
  spaceNumbers,
10
10
  type,
11
11
  } from '@workday/canvas-kit-react/tokens';
12
- import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
13
- import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
12
+ import {
13
+ createSubcomponent,
14
+ ExtractProps,
15
+ useTheme,
16
+ useThemedRing,
17
+ } from '@workday/canvas-kit-react/common';
14
18
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
15
19
  import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
16
20
 
@@ -9,8 +9,12 @@ import {
9
9
  space,
10
10
  type,
11
11
  } from '@workday/canvas-kit-react/tokens';
12
- import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
13
- import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
12
+ import {
13
+ createSubcomponent,
14
+ ExtractProps,
15
+ useTheme,
16
+ useThemedRing,
17
+ } from '@workday/canvas-kit-react/common';
14
18
  import {FormField, useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
15
19
 
16
20
  import {useTextInputField} from './hooks';