@workday/canvas-kit-preview-react 9.0.0-alpha.364-next.3 → 9.0.0-alpha.382-next.2
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.
- package/dist/commonjs/color-picker/lib/ColorPicker.js +24 -47
- package/dist/commonjs/color-picker/lib/parts/ColorReset.js +32 -23
- package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +26 -39
- package/dist/commonjs/form-field/lib/FormField.js +10 -33
- package/dist/commonjs/form-field/lib/FormFieldHint.js +8 -31
- package/dist/commonjs/form-field/lib/FormFieldInput.js +6 -17
- package/dist/commonjs/form-field/lib/FormFieldLabel.js +8 -31
- package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.js +4 -5
- package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.js +5 -6
- package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.js +4 -5
- package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js +8 -16
- package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.js +3 -3
- package/dist/commonjs/menu/lib/Menu.js +96 -129
- package/dist/commonjs/menu/lib/MenuItem.js +94 -109
- package/dist/commonjs/pill/lib/Pill.js +55 -60
- package/dist/commonjs/pill/lib/PillAvatar.js +6 -17
- package/dist/commonjs/pill/lib/PillCount.js +7 -30
- package/dist/commonjs/pill/lib/PillIcon.js +8 -31
- package/dist/commonjs/pill/lib/PillIconButton.js +13 -36
- package/dist/commonjs/pill/lib/PillLabel.js +10 -33
- package/dist/commonjs/pill/lib/usePillModel.js +8 -16
- package/dist/commonjs/segmented-control/lib/SegmentedControl.js +6 -7
- package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +24 -49
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +13 -38
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.js +8 -10
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.js +31 -31
- package/dist/commonjs/select/lib/Select.js +147 -189
- package/dist/commonjs/select/lib/SelectBase.js +106 -101
- package/dist/commonjs/select/lib/SelectMenu.js +53 -84
- package/dist/commonjs/select/lib/SelectOption.js +33 -47
- package/dist/commonjs/select/lib/scrolling.js +6 -7
- package/dist/commonjs/select/lib/utils.js +4 -4
- package/dist/commonjs/side-panel/lib/SidePanel.js +36 -51
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +17 -40
- package/dist/commonjs/side-panel/lib/hooks.js +20 -20
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +10 -34
- package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js +9 -21
- package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +5 -28
- package/dist/commonjs/status-indicator/lib/hooks/useStatusIndicatorModel.js +6 -15
- package/dist/commonjs/text-area/lib/TextArea.js +8 -31
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.js +12 -36
- package/dist/commonjs/text-input/lib/TextInput.js +8 -31
- package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.js +12 -24
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.js +3 -3
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.js +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.js +15 -38
- package/dist/es6/color-picker/lib/parts/ColorReset.js +27 -18
- package/dist/es6/color-picker/lib/parts/SwatchBook.js +21 -34
- package/dist/es6/form-field/lib/FormField.js +4 -27
- package/dist/es6/form-field/lib/FormFieldHint.js +4 -27
- package/dist/es6/form-field/lib/FormFieldInput.js +3 -14
- package/dist/es6/form-field/lib/FormFieldLabel.js +4 -27
- package/dist/es6/form-field/lib/hooks/useFormFieldHint.js +2 -3
- package/dist/es6/form-field/lib/hooks/useFormFieldInput.js +3 -4
- package/dist/es6/form-field/lib/hooks/useFormFieldLabel.js +2 -3
- package/dist/es6/form-field/lib/hooks/useFormFieldModel.js +8 -16
- package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.js +2 -2
- package/dist/es6/menu/lib/Menu.js +91 -125
- package/dist/es6/menu/lib/MenuItem.js +90 -106
- package/dist/es6/pill/lib/Pill.js +45 -50
- package/dist/es6/pill/lib/PillAvatar.js +3 -14
- package/dist/es6/pill/lib/PillCount.js +4 -27
- package/dist/es6/pill/lib/PillIcon.js +3 -26
- package/dist/es6/pill/lib/PillIconButton.js +7 -30
- package/dist/es6/pill/lib/PillLabel.js +5 -28
- package/dist/es6/pill/lib/usePillModel.js +8 -16
- package/dist/es6/segmented-control/lib/SegmentedControl.js +2 -3
- package/dist/es6/segmented-control/lib/SegmentedControlItem.js +17 -42
- package/dist/es6/segmented-control/lib/SegmentedControlList.js +9 -34
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlItem.js +5 -7
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.js +29 -29
- package/dist/es6/select/lib/Select.js +144 -186
- package/dist/es6/select/lib/SelectBase.js +99 -94
- package/dist/es6/select/lib/SelectMenu.js +49 -80
- package/dist/es6/select/lib/SelectOption.js +30 -44
- package/dist/es6/select/lib/scrolling.js +6 -7
- package/dist/es6/select/lib/utils.js +4 -4
- package/dist/es6/side-panel/lib/SidePanel.js +31 -46
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +10 -33
- package/dist/es6/side-panel/lib/hooks.js +19 -19
- package/dist/es6/status-indicator/lib/StatusIndicator.js +5 -29
- package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js +6 -18
- package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +3 -26
- package/dist/es6/status-indicator/lib/hooks/useStatusIndicatorModel.js +6 -15
- package/dist/es6/text-area/lib/TextArea.js +4 -27
- package/dist/es6/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextAreaField.js +9 -33
- package/dist/es6/text-input/lib/TextInput.js +4 -27
- package/dist/es6/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInputField.js +9 -21
- package/dist/es6/text-input/lib/hooks/useTextInputField.js +1 -1
- package/dist/es6/text-input/lib/hooks/useTextInputModel.js +1 -1
- package/package.json +3 -4
- package/text-area/lib/TextAreaField.tsx +6 -2
- package/text-input/lib/TextInputField.tsx +6 -2
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
@@ -29,32 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
18
|
__setModuleDefault(result, mod);
|
|
30
19
|
return result;
|
|
31
20
|
};
|
|
32
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
33
|
-
var t = {};
|
|
34
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
35
|
-
t[p] = s[p];
|
|
36
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
37
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
38
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
39
|
-
t[p[i]] = s[p[i]];
|
|
40
|
-
}
|
|
41
|
-
return t;
|
|
42
|
-
};
|
|
43
21
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
44
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
45
23
|
};
|
|
46
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
25
|
exports.ColorPicker = void 0;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
26
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
27
|
+
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
28
|
+
const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
|
|
29
|
+
const button_1 = require("@workday/canvas-kit-react/button");
|
|
30
|
+
const React = __importStar(require("react"));
|
|
31
|
+
const form_field_1 = require("@workday/canvas-kit-react/form-field");
|
|
32
|
+
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
33
|
+
const ColorReset_1 = require("./parts/ColorReset");
|
|
34
|
+
const SwatchBook_1 = require("./parts/SwatchBook");
|
|
35
|
+
const defaultColorSet = [
|
|
58
36
|
tokens_1.colors.blueberry600,
|
|
59
37
|
tokens_1.colors.grapeSoda600,
|
|
60
38
|
tokens_1.colors.pomegranate600,
|
|
@@ -112,51 +90,50 @@ var defaultColorSet = [
|
|
|
112
90
|
tokens_1.colors.frenchVanilla200,
|
|
113
91
|
tokens_1.colors.frenchVanilla100,
|
|
114
92
|
];
|
|
115
|
-
|
|
93
|
+
const ColorPickerContainer = styled_1.default('div')({
|
|
116
94
|
width: 216,
|
|
117
95
|
});
|
|
118
|
-
|
|
96
|
+
const ColorInputWrapper = styled_1.default('form')({
|
|
119
97
|
width: '100%',
|
|
120
98
|
marginTop: tokens_1.space.s,
|
|
121
99
|
display: 'flex',
|
|
122
100
|
flexDirection: 'row',
|
|
123
101
|
justifyContent: 'space-between',
|
|
124
102
|
});
|
|
125
|
-
|
|
103
|
+
const ColorInputAndLabel = styled_1.default(form_field_1.FormField)({
|
|
126
104
|
display: 'flex',
|
|
127
105
|
flexDirection: 'column',
|
|
128
106
|
margin: 0,
|
|
129
107
|
});
|
|
130
|
-
|
|
108
|
+
const CheckButton = styled_1.default(button_1.SecondaryButton)({
|
|
131
109
|
alignSelf: 'flex-end',
|
|
132
110
|
});
|
|
133
|
-
|
|
111
|
+
const HexColorInput = styled_1.default(color_picker_1.ColorInput)({
|
|
134
112
|
width: '168px',
|
|
135
113
|
});
|
|
136
|
-
|
|
114
|
+
const isCustomColor = (colors, hexCode) => {
|
|
137
115
|
if (!hexCode) {
|
|
138
116
|
return false;
|
|
139
117
|
}
|
|
140
|
-
|
|
118
|
+
const lowercaseHex = hexCode.toLowerCase();
|
|
141
119
|
return !colors.includes(lowercaseHex);
|
|
142
120
|
};
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
var onCustomHexChange = function (event) {
|
|
121
|
+
const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
|
|
122
|
+
const [validHexValue, setValidHexValue] = React.useState('');
|
|
123
|
+
const [customHexValue, setCustomHexValue] = React.useState(isCustomColor(colorSet, value) ? value : '');
|
|
124
|
+
const onCustomHexChange = (event) => {
|
|
148
125
|
setCustomHexValue(event.target.value);
|
|
149
126
|
setValidHexValue('');
|
|
150
127
|
};
|
|
151
|
-
|
|
152
|
-
|
|
128
|
+
const onValidCustomHexChange = (validHexValue) => setValidHexValue(validHexValue);
|
|
129
|
+
const onSubmit = (event) => {
|
|
153
130
|
if (onSubmitClick) {
|
|
154
131
|
onSubmitClick(event);
|
|
155
132
|
}
|
|
156
133
|
onColorChange(validHexValue);
|
|
157
134
|
event.preventDefault(); // don't submit the form - default action is to reload the page
|
|
158
135
|
};
|
|
159
|
-
return (React.createElement(ColorPickerContainer,
|
|
136
|
+
return (React.createElement(ColorPickerContainer, Object.assign({}, elemProps),
|
|
160
137
|
onColorReset && resetColor && (React.createElement(ColorReset_1.ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })),
|
|
161
138
|
React.createElement(SwatchBook_1.SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }),
|
|
162
139
|
showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
@@ -34,22 +23,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
34
23
|
};
|
|
35
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
25
|
exports.ResetButton = void 0;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
26
|
+
const React = __importStar(require("react"));
|
|
27
|
+
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
28
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
29
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
30
|
+
const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
|
|
31
|
+
const Label = styled_1.default('div')({
|
|
43
32
|
marginLeft: tokens_1.space.xxs,
|
|
44
33
|
});
|
|
45
|
-
|
|
34
|
+
const Container = styled_1.default('button')({
|
|
35
|
+
display: 'flex',
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
justifyContent: 'flex-start',
|
|
38
|
+
width: `calc(100% + ${tokens_1.space.l})`,
|
|
39
|
+
height: tokens_1.space.l,
|
|
40
|
+
margin: `-${tokens_1.space.xxs} -${tokens_1.space.s} ${tokens_1.space.xxs}`,
|
|
41
|
+
padding: `0px ${tokens_1.space.s}`,
|
|
42
|
+
...tokens_1.type.levels.subtext.medium,
|
|
43
|
+
whiteSpace: 'nowrap',
|
|
44
|
+
border: 'none',
|
|
45
|
+
outline: 'none',
|
|
46
|
+
background: 'none',
|
|
47
|
+
cursor: 'pointer',
|
|
48
|
+
transition: 'color 120ms ease, background-color 120ms ease',
|
|
49
|
+
'&:hover': {
|
|
46
50
|
backgroundColor: tokens_1.colors.soap300,
|
|
47
|
-
},
|
|
51
|
+
},
|
|
52
|
+
'&:active': {
|
|
48
53
|
backgroundColor: tokens_1.colors.soap400,
|
|
49
|
-
},
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
54
|
+
},
|
|
55
|
+
'&:focus': {
|
|
56
|
+
...common_1.focusRing(),
|
|
57
|
+
},
|
|
58
|
+
...common_1.hideMouseFocus,
|
|
59
|
+
});
|
|
60
|
+
const ResetButton = ({ onClick, resetColor, label }) => {
|
|
61
|
+
const handleResetColor = () => onClick(resetColor);
|
|
53
62
|
return (React.createElement(Container, { onClick: handleResetColor },
|
|
54
63
|
React.createElement(color_picker_1.ColorSwatch, { color: resetColor }),
|
|
55
64
|
React.createElement(Label, null, label)));
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
@@ -34,27 +23,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
34
23
|
};
|
|
35
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
25
|
exports.SwatchBook = void 0;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
26
|
+
const React = __importStar(require("react"));
|
|
27
|
+
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
28
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
29
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
30
|
+
const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
|
|
31
|
+
const accessibilityBorder = `${tokens_1.colors.frenchVanilla100} 0px 0px 0px 2px, ${tokens_1.colors.licorice200} 0px 0px 0px 3px`;
|
|
32
|
+
const SwatchContainer = styled_1.default('div')({
|
|
44
33
|
display: 'flex',
|
|
45
34
|
width: 20,
|
|
46
35
|
height: 20,
|
|
47
36
|
cursor: 'pointer',
|
|
48
37
|
borderRadius: tokens_1.borderRadius.s,
|
|
49
38
|
transition: 'box-shadow 120ms ease',
|
|
50
|
-
margin:
|
|
39
|
+
margin: `0px ${tokens_1.space.xxs} ${tokens_1.space.xxs} 0px`,
|
|
51
40
|
'&:hover': {
|
|
52
41
|
boxShadow: accessibilityBorder,
|
|
53
42
|
},
|
|
54
|
-
'&:focus':
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
43
|
+
'&:focus': {
|
|
44
|
+
outline: 'none',
|
|
45
|
+
...common_1.focusRing({ separation: 2 }),
|
|
46
|
+
},
|
|
47
|
+
}, ({ isSelected }) => ({
|
|
48
|
+
boxShadow: isSelected ? accessibilityBorder : undefined,
|
|
49
|
+
...common_1.mouseFocusBehavior({
|
|
58
50
|
'&:focus': {
|
|
59
51
|
animation: 'none',
|
|
60
52
|
boxShadow: 'none',
|
|
@@ -65,23 +57,18 @@ var SwatchContainer = styled_1.default('div')({
|
|
|
65
57
|
'&': {
|
|
66
58
|
boxShadow: isSelected ? accessibilityBorder : undefined,
|
|
67
59
|
},
|
|
68
|
-
})
|
|
69
|
-
});
|
|
70
|
-
|
|
60
|
+
}),
|
|
61
|
+
}));
|
|
62
|
+
const Container = styled_1.default('div')({
|
|
71
63
|
display: 'flex',
|
|
72
64
|
flexWrap: 'wrap',
|
|
73
|
-
margin:
|
|
65
|
+
margin: `0px -${tokens_1.space.xxs} -${tokens_1.space.xxs} 0px`,
|
|
74
66
|
});
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
};
|
|
83
|
-
return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected },
|
|
84
|
-
React.createElement(color_picker_1.ColorSwatch, { color: color, showCheck: isSelected })));
|
|
85
|
-
})));
|
|
86
|
-
};
|
|
67
|
+
const SwatchBook = ({ colors, value, onSelect }) => (React.createElement(Container, null, colors.map((color, index) => {
|
|
68
|
+
const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
|
|
69
|
+
const handleClick = () => onSelect(color);
|
|
70
|
+
const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(color);
|
|
71
|
+
return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected },
|
|
72
|
+
React.createElement(color_picker_1.ColorSwatch, { color: color, showCheck: isSelected })));
|
|
73
|
+
})));
|
|
87
74
|
exports.SwatchBook = SwatchBook;
|
|
@@ -1,38 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.FormField = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
10
|
+
const hooks_1 = require("./hooks");
|
|
11
|
+
const FormFieldInput_1 = require("./FormFieldInput");
|
|
12
|
+
const FormFieldLabel_1 = require("./FormFieldLabel");
|
|
13
|
+
const FormFieldHint_1 = require("./FormFieldHint");
|
|
36
14
|
exports.FormField = common_1.createContainer('div')({
|
|
37
15
|
displayName: 'FormField',
|
|
38
16
|
modelHook: hooks_1.useFormFieldModel,
|
|
@@ -41,8 +19,7 @@ exports.FormField = common_1.createContainer('div')({
|
|
|
41
19
|
Label: FormFieldLabel_1.FormFieldLabel,
|
|
42
20
|
Hint: FormFieldHint_1.FormFieldHint,
|
|
43
21
|
},
|
|
44
|
-
})(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return (react_1.default.createElement(layout_1.Flex, __assign({ as: Element }, layoutProps, elemProps), children));
|
|
22
|
+
})(({ children, orientation, ...elemProps }, Element) => {
|
|
23
|
+
const layoutProps = hooks_1.useFormFieldOrientation(orientation);
|
|
24
|
+
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
|
|
48
25
|
});
|
|
@@ -1,46 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.FormFieldHint = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
10
|
+
const hooks_1 = require("./hooks");
|
|
11
|
+
const text_1 = require("@workday/canvas-kit-react/text");
|
|
34
12
|
exports.FormFieldHint = common_1.createSubcomponent('p')({
|
|
35
13
|
displayName: 'FormField.Hint',
|
|
36
14
|
modelHook: hooks_1.useFormFieldModel,
|
|
37
15
|
elemPropsHook: hooks_1.useFormFieldHint,
|
|
38
|
-
})(
|
|
39
|
-
|
|
40
|
-
var theme = common_1.useTheme();
|
|
16
|
+
})(({ children, ...elemProps }, Element, model) => {
|
|
17
|
+
const theme = common_1.useTheme();
|
|
41
18
|
if (!children) {
|
|
42
19
|
// If there is no hint text just skip rendering
|
|
43
20
|
return null;
|
|
44
21
|
}
|
|
45
|
-
return (react_1.default.createElement(text_1.Subtext,
|
|
22
|
+
return (react_1.default.createElement(text_1.Subtext, Object.assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
|
|
46
23
|
});
|
|
@@ -1,28 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
exports.FormFieldInput = void 0;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
10
|
+
const hooks_1 = require("./hooks");
|
|
22
11
|
exports.FormFieldInput = common_1.createSubcomponent('input')({
|
|
23
12
|
displayName: 'FormField.Input',
|
|
24
13
|
modelHook: hooks_1.useFormFieldModel,
|
|
25
14
|
elemPropsHook: hooks_1.useFormFieldInput,
|
|
26
|
-
})(
|
|
27
|
-
return react_1.default.createElement(layout_1.Box,
|
|
15
|
+
})((elemProps, Element) => {
|
|
16
|
+
return react_1.default.createElement(layout_1.Box, Object.assign({ as: Element }, elemProps));
|
|
28
17
|
});
|
|
@@ -1,44 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.FormFieldLabel = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
9
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
10
|
+
const text_1 = require("@workday/canvas-kit-react/text");
|
|
11
|
+
const hooks_1 = require("./hooks");
|
|
34
12
|
exports.FormFieldLabel = common_1.createSubcomponent('label')({
|
|
35
13
|
displayName: 'FormField.Label',
|
|
36
14
|
modelHook: hooks_1.useFormFieldModel,
|
|
37
15
|
elemPropsHook: hooks_1.useFormFieldLabel,
|
|
38
|
-
})(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
return (react_1.default.createElement(layout_1.Flex, __assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
|
|
16
|
+
})(({ gap = 'xxxs', children, ...elemProps }, Element, model) => {
|
|
17
|
+
const theme = common_1.useTheme();
|
|
18
|
+
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
|
|
42
19
|
react_1.default.createElement(text_1.LabelText, { as: "span", fontWeight: "medium" }, children),
|
|
43
20
|
model.state.isRequired && (react_1.default.createElement(text_1.Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
|
|
44
21
|
});
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useFormFieldHint = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
|
+
const useFormFieldModel_1 = require("./useFormFieldModel");
|
|
6
6
|
/**
|
|
7
7
|
* Adds the necessary props to a `Hint` component.
|
|
8
8
|
* Used by the FormField.Hint subcomponent and other input type components
|
|
9
9
|
*/
|
|
10
|
-
exports.useFormFieldHint = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(
|
|
11
|
-
var state = _a.state;
|
|
10
|
+
exports.useFormFieldHint = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(({ state }) => {
|
|
12
11
|
return {
|
|
13
|
-
id:
|
|
12
|
+
id: `hint-${state.id}`,
|
|
14
13
|
};
|
|
15
14
|
});
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useFormFieldInput = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
|
+
const useFormFieldModel_1 = require("./useFormFieldModel");
|
|
6
6
|
/**
|
|
7
7
|
* Adds the necessary props to an `Input` component.
|
|
8
8
|
* Used by the FormField.Input subcomponent and other input type components
|
|
9
9
|
*/
|
|
10
|
-
exports.useFormFieldInput = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(
|
|
11
|
-
var state = _a.state;
|
|
10
|
+
exports.useFormFieldInput = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(({ state }) => {
|
|
12
11
|
return {
|
|
13
12
|
required: state.isRequired ? true : undefined,
|
|
14
13
|
'aria-invalid': state.hasError ? true : undefined,
|
|
15
|
-
'aria-describedby':
|
|
16
|
-
id:
|
|
14
|
+
'aria-describedby': `hint-${state.id}`,
|
|
15
|
+
id: `input-${state.id}`,
|
|
17
16
|
};
|
|
18
17
|
});
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useFormFieldLabel = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
|
+
const useFormFieldModel_1 = require("./useFormFieldModel");
|
|
6
6
|
/**
|
|
7
7
|
* Adds the necessary props to a `Label` component.
|
|
8
8
|
* Used by the FormField.Label subcomponent and other input type components
|
|
9
9
|
*/
|
|
10
|
-
exports.useFormFieldLabel = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(
|
|
11
|
-
var state = _a.state;
|
|
10
|
+
exports.useFormFieldLabel = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(({ state }) => {
|
|
12
11
|
return {
|
|
13
|
-
htmlFor:
|
|
12
|
+
htmlFor: `input-${state.id}`,
|
|
14
13
|
};
|
|
15
14
|
});
|
|
@@ -1,18 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.useFormFieldModel = void 0;
|
|
15
|
-
|
|
4
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
16
5
|
exports.useFormFieldModel = common_1.createModelHook({
|
|
17
6
|
defaultConfig: {
|
|
18
7
|
/**
|
|
@@ -37,11 +26,14 @@ exports.useFormFieldModel = common_1.createModelHook({
|
|
|
37
26
|
*/
|
|
38
27
|
isRequired: false,
|
|
39
28
|
},
|
|
40
|
-
})(
|
|
41
|
-
|
|
42
|
-
|
|
29
|
+
})(config => {
|
|
30
|
+
const id = common_1.useUniqueId(config.id);
|
|
31
|
+
const state = {
|
|
32
|
+
...config,
|
|
33
|
+
id,
|
|
34
|
+
};
|
|
43
35
|
return {
|
|
44
|
-
state
|
|
36
|
+
state,
|
|
45
37
|
events: {},
|
|
46
38
|
};
|
|
47
39
|
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useFormFieldOrientation = void 0;
|
|
4
|
-
|
|
4
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
5
5
|
/**
|
|
6
6
|
* Adds the necessary layout props to a `FormField` component.
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const useFormFieldOrientation = (orientation) => {
|
|
9
|
+
let layoutProps;
|
|
10
10
|
if (orientation === 'horizontal') {
|
|
11
11
|
layoutProps = {
|
|
12
12
|
flexDirection: 'row',
|