@seeqdev/qomponents 0.0.6 → 0.0.7
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/Checkbox/Checkbox.js +2 -2
- package/dist/Checkbox/Checkbox.js.map +1 -1
- package/dist/Select/Select.d.ts +12 -0
- package/dist/Select/Select.js +82 -46
- package/dist/Select/Select.js.map +1 -1
- package/dist/Select/Select.stories.d.ts +5 -0
- package/dist/Select/Select.stories.js +15 -10
- package/dist/Select/Select.stories.js.map +1 -1
- package/dist/Select/Select.test.d.ts +1 -0
- package/dist/Select/Select.test.js +143 -6
- package/dist/Select/Select.test.js.map +1 -1
- package/dist/Select/Select.types.d.ts +73 -0
- package/dist/Select/index.d.ts +1 -0
- package/dist/TextArea/TextArea.types.d.ts +1 -2
- package/dist/TextField/TextField.js +15 -6
- package/dist/TextField/TextField.js.map +1 -1
- package/dist/TextField/TextField.types.d.ts +4 -3
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +7229 -26
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +7233 -11
- package/dist/index.js.map +1 -1
- package/dist/styles.css +302 -45
- package/dist/types.d.ts +2 -0
- package/package.json +7 -5
|
@@ -12,10 +12,10 @@ const radioClasses = `tw-form-radio ${baseClasses}`;
|
|
|
12
12
|
* Checkbox and Radio Box Component.
|
|
13
13
|
*/
|
|
14
14
|
export const Checkbox = (props) => {
|
|
15
|
-
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
|
|
15
|
+
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
|
|
16
16
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
17
17
|
return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
|
|
18
|
-
React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
|
|
18
|
+
React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
|
|
19
19
|
React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
20
20
|
? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
|
|
21
21
|
: 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,yBAAyB,CAAC;AAC5C,MAAM,YAAY,GAAG,sBAAsB,CAAC;AAE5C,MAAM,WAAW,GACf,4GAA4G;IAC5G,6FAA6F;IAC7F,iCAAiC;IACjC,uCAAuC,CAAC;AAE1C,MAAM,eAAe,GAAG,+BAA+B,WAAW,EAAE,CAAC;AAErE,MAAM,YAAY,GAAG,iBAAiB,WAAW,EAAE,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EACJ,IAAI,GAAG,UAAU,EACjB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,EAAE,EACF,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAErD,OAAO,CACL,8BAAM,SAAS,EAAE,GAAG,SAAS,IAAI,eAAe,EAAE;QAChD,+BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,iBACG,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAChE,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBACvC,EAAE,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB;QACF,+BACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,GAAG,YAAY,IAAI,oBAAoB,IAChD,QAAQ;gBACN,CAAC,CAAC,oFAAoF;gBACtF,CAAC,CAAC,mEACN,EAAE,IACD,KAAK,CACA,CACH,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,yBAAyB,CAAC;AAC5C,MAAM,YAAY,GAAG,sBAAsB,CAAC;AAE5C,MAAM,WAAW,GACf,4GAA4G;IAC5G,6FAA6F;IAC7F,iCAAiC;IACjC,uCAAuC,CAAC;AAE1C,MAAM,eAAe,GAAG,+BAA+B,WAAW,EAAE,CAAC;AAErE,MAAM,YAAY,GAAG,iBAAiB,WAAW,EAAE,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EACJ,IAAI,GAAG,UAAU,EACjB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAAc,EACd,EAAE,EACF,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAErD,OAAO,CACL,8BAAM,SAAS,EAAE,GAAG,SAAS,IAAI,eAAe,EAAE;QAChD,+BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,iBACG,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAChE,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBACvC,EAAE,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB;QACF,+BACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,GAAG,YAAY,IAAI,oBAAoB,IAChD,QAAQ;gBACN,CAAC,CAAC,oFAAoF;gBACtF,CAAC,CAAC,mEACN,EAAE,IACD,KAAK,CACA,CACH,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SelectProps } from './Select.types';
|
|
3
|
+
import '../styles.css';
|
|
4
|
+
/**
|
|
5
|
+
* Select Component
|
|
6
|
+
* - based on react-select (https://react-select.com/)
|
|
7
|
+
*
|
|
8
|
+
* For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
|
|
9
|
+
*
|
|
10
|
+
*/
|
|
11
|
+
declare const Select: React.FunctionComponent<SelectProps>;
|
|
12
|
+
export default Select;
|
package/dist/Select/Select.js
CHANGED
|
@@ -2,46 +2,83 @@ import React from 'react';
|
|
|
2
2
|
import '../styles.css';
|
|
3
3
|
import { createFilter, default as ReactSelect } from 'react-select';
|
|
4
4
|
import CreatableSelect from 'react-select/creatable';
|
|
5
|
+
const baseClasses = ['tw-px-2.5', 'focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
|
|
6
|
+
const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
7
|
+
const errorClasses = 'tw-border-sq-danger-color';
|
|
8
|
+
const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
|
|
9
|
+
const borderStyles = [
|
|
10
|
+
'tw-border-solid',
|
|
11
|
+
'tw-border',
|
|
12
|
+
'hover:tw-border-sq-color-dark',
|
|
13
|
+
'focus:tw-border-sq-color-dark',
|
|
14
|
+
'active:tw-border-sq-color-dark',
|
|
15
|
+
'dark:hover:tw-border-sq-color-dark-dark',
|
|
16
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
17
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
18
|
+
].join(' ');
|
|
19
|
+
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
20
|
+
const textActiveStyles = [
|
|
21
|
+
'hover:tw-text-sq-color-dark',
|
|
22
|
+
'focus:tw-text-sq-color-dark',
|
|
23
|
+
'active:tw-text-sq-color-dark',
|
|
24
|
+
'dark:tw-text-sq-dark-disabled-gray',
|
|
25
|
+
'dark:hover:tw-text-sq-color-dark-dark',
|
|
26
|
+
'dark:focus:tw-text-sq-color-dark-dark',
|
|
27
|
+
'dark:active:tw-text-sq-color-dark-dark',
|
|
28
|
+
].join(' ');
|
|
29
|
+
const menuStyles = [
|
|
30
|
+
'tw-border-solid',
|
|
31
|
+
'tw-border',
|
|
32
|
+
'tw-rounded-b',
|
|
33
|
+
'tw-border-sq-disabled-gray',
|
|
34
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
35
|
+
'tw-whitespace-nowrap',
|
|
36
|
+
'tw-min-w-fit',
|
|
37
|
+
].join(' ');
|
|
38
|
+
const menuListStyles = [
|
|
39
|
+
'tw-rounded-b',
|
|
40
|
+
'tw-bg-white',
|
|
41
|
+
'dark:tw-bg-sq-dark-background',
|
|
42
|
+
'tw-min-w-fit',
|
|
43
|
+
'tw-z-[9999]',
|
|
44
|
+
'specSelectMenu',
|
|
45
|
+
].join(' ');
|
|
46
|
+
const groupHeadingStyles = [
|
|
47
|
+
'tw-bg-sq-light-gray',
|
|
48
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
49
|
+
'tw-text-sq-darkish-gray',
|
|
50
|
+
'tw-py-1',
|
|
51
|
+
'tw-px-2.5',
|
|
52
|
+
'specSelectGroupHeading',
|
|
53
|
+
].join(' ');
|
|
54
|
+
const optionStyles = [
|
|
55
|
+
'hover:tw-bg-sq-gray-highlight',
|
|
56
|
+
'dark:hover:tw-bg-sq-gray-highlight-dark',
|
|
57
|
+
'tw-py-1',
|
|
58
|
+
'tw-px-2.5',
|
|
59
|
+
'specSelectOption',
|
|
60
|
+
].join(' ');
|
|
61
|
+
const disabledClasses = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
|
|
62
|
+
const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
63
|
+
const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
64
|
+
const multiValueStyles = [
|
|
65
|
+
'tw-bg-sq-disabled-gray',
|
|
66
|
+
'dark:tw-bg-sq-multi-gray-dark',
|
|
67
|
+
'tw-text-sm',
|
|
68
|
+
'tw-py-0.5',
|
|
69
|
+
'tw-px-1',
|
|
70
|
+
'tw-m-0.5',
|
|
71
|
+
'tw-rounded-sm',
|
|
72
|
+
'specOpenSelect',
|
|
73
|
+
].join(' ');
|
|
5
74
|
/**
|
|
6
75
|
* Select Component
|
|
7
76
|
* - based on react-select (https://react-select.com/)
|
|
77
|
+
*
|
|
78
|
+
* For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
|
|
79
|
+
*
|
|
8
80
|
*/
|
|
9
81
|
const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = false, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, }) => {
|
|
10
|
-
const baseClasses = ['tw-px-2.5', 'focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
|
|
11
|
-
const errorClasses = 'tw-border-sq-danger-color';
|
|
12
|
-
const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
|
|
13
|
-
const borderStyles = [
|
|
14
|
-
'tw-border-solid',
|
|
15
|
-
'tw-border',
|
|
16
|
-
'hover:tw-border-sq-color-dark',
|
|
17
|
-
'focus:tw-border-sq-color-dark',
|
|
18
|
-
'active:tw-border-sq-color-dark',
|
|
19
|
-
'dark:hover:tw-border-sq-color-dark-dark',
|
|
20
|
-
'dark:focus:tw-border-sq-color-dark-dark',
|
|
21
|
-
'dark:active:tw-border-sq-color-dark-dark',
|
|
22
|
-
].join(' ');
|
|
23
|
-
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
24
|
-
const textActiveStyles = [
|
|
25
|
-
'hover:tw-text-sq-color-dark',
|
|
26
|
-
'focus:tw-text-sq-color-dark',
|
|
27
|
-
'active:tw-text-sq-color-dark',
|
|
28
|
-
'dark:tw-text-sq-dark-disabled-gray',
|
|
29
|
-
'dark:hover:tw-text-sq-color-dark-dark',
|
|
30
|
-
'dark:focus:tw-text-sq-color-dark-dark',
|
|
31
|
-
'dark:active:tw-text-sq-color-dark-dark',
|
|
32
|
-
].join(' ');
|
|
33
|
-
const menuStyles = [
|
|
34
|
-
'tw-border-solid',
|
|
35
|
-
'tw-border-x',
|
|
36
|
-
'tw-border-b',
|
|
37
|
-
'tw-rounded-b',
|
|
38
|
-
'tw-border-sq-disabled-gray',
|
|
39
|
-
'dark:tw-border-sq-dark-disabled-gray',
|
|
40
|
-
'tw-whitespace-nowrap',
|
|
41
|
-
'tw-min-w-fit',
|
|
42
|
-
].join(' ');
|
|
43
|
-
const disabledClasses = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
|
|
44
|
-
const dropDownIndicatorStyles = `${textStyles} ${textActiveStyles}`;
|
|
45
82
|
const getOptionOrSelectedLabel = (option, { context }) => {
|
|
46
83
|
const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
|
|
47
84
|
if (getOptionLabel || getSelectedValueLabel) {
|
|
@@ -69,6 +106,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
69
106
|
inputId,
|
|
70
107
|
placeholder,
|
|
71
108
|
closeMenuOnSelect,
|
|
109
|
+
blurInputOnSelect: closeMenuOnSelect,
|
|
72
110
|
isSearchable: creatable ? true : isSearchable,
|
|
73
111
|
isMulti,
|
|
74
112
|
isClearable,
|
|
@@ -100,28 +138,26 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
100
138
|
const appliedClasses = `${borderStyles} ${border} ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
|
|
101
139
|
return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses : ''}`;
|
|
102
140
|
},
|
|
103
|
-
placeholder: () =>
|
|
104
|
-
container: () => `${textStyles} ${extraClassNames}`,
|
|
141
|
+
placeholder: () => placeholderStyles,
|
|
142
|
+
container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
|
|
105
143
|
input: () => textStyles + ' specSelectInput',
|
|
106
|
-
menuList: () =>
|
|
144
|
+
menuList: () => menuListStyles,
|
|
107
145
|
menu: () => menuStyles,
|
|
108
146
|
menuPortal: () => '!tw-z-[9000]',
|
|
109
|
-
dropdownIndicator: () =>
|
|
147
|
+
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
110
148
|
option: ({ isSelected, isDisabled }) => {
|
|
111
|
-
let classes =
|
|
112
|
-
' specSelectOption ';
|
|
149
|
+
let classes = optionStyles;
|
|
113
150
|
if (isDisabled) {
|
|
114
|
-
classes += 'specDisabledOption ';
|
|
151
|
+
classes += ' specDisabledOption ';
|
|
115
152
|
}
|
|
116
|
-
return isSelected ? classes + 'tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
153
|
+
return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
117
154
|
},
|
|
118
155
|
singleValue: () => 'specOpenSelect',
|
|
119
|
-
multiValue: () =>
|
|
156
|
+
multiValue: () => multiValueStyles,
|
|
120
157
|
multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
|
|
121
158
|
clearIndicator: () => 'hover:tw-text-sq-danger-color specClearSelect',
|
|
122
159
|
group: () => 'specSelectGroup',
|
|
123
|
-
groupHeading: () =>
|
|
124
|
-
' specSelectGroupHeading',
|
|
160
|
+
groupHeading: () => groupHeadingStyles,
|
|
125
161
|
},
|
|
126
162
|
};
|
|
127
163
|
return creatable ? React.createElement(CreatableSelect, { ...props }) : React.createElement(ReactSelect, { ...props });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAc,YAAY,EAAE,OAAO,IAAI,WAAW,EAA2B,MAAM,cAAc,CAAC;AAEzG,OAAO,eAAe,MAAM,wBAAwB,CAAC;AAErD
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -31,22 +31,27 @@ export const AllSelectVariants = () => {
|
|
|
31
31
|
},
|
|
32
32
|
];
|
|
33
33
|
const allSelects = () => (React.createElement(React.Fragment, null,
|
|
34
|
-
React.createElement("div", { className: "tw-p-
|
|
35
|
-
React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value" }),
|
|
36
|
-
|
|
37
|
-
React.createElement(Select, { id: "
|
|
34
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
35
|
+
React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value" })),
|
|
36
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
37
|
+
React.createElement(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value - small", small: true })),
|
|
38
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
39
|
+
React.createElement(Select, { id: "disabled", onChange: () => { }, options: options, placeholder: "disabled", isDisabled: true })),
|
|
40
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
38
41
|
React.createElement(Select, { id: "error", onChange: () => { }, options: options, placeholder: "error", showError: true })),
|
|
39
|
-
React.createElement("div", { className: "tw-p-
|
|
42
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
40
43
|
React.createElement(Select, { onChange: () => { }, options: options, placeholder: "stays open", closeMenuOnSelect: false, creatable: true })),
|
|
41
|
-
React.createElement("div", { className: "tw-p-
|
|
44
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
42
45
|
React.createElement(Select, { onChange: () => { }, options: groupedOptions, placeholder: "grouped" })),
|
|
43
|
-
React.createElement("div", { className: "tw-p-
|
|
46
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
44
47
|
React.createElement(Select, { onChange: () => { }, options: options, creatable: true, placeholder: "create option" })),
|
|
45
|
-
React.createElement("div", { className: "tw-p-
|
|
48
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
49
|
+
React.createElement(Select, { onChange: () => { }, options: options, isClearable: true, placeholder: "clearable" })),
|
|
50
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
46
51
|
React.createElement(Select, { onChange: () => { }, options: options, placeholder: "multi-select", isMulti: true, isSearchable: false })),
|
|
47
|
-
React.createElement("div", { className: "tw-p-
|
|
52
|
+
React.createElement("div", { className: "tw-p-5" },
|
|
48
53
|
React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, isSearchable: true })),
|
|
49
|
-
React.createElement("div", { className: "tw-p-
|
|
54
|
+
React.createElement("div", { className: "tw-p-5 tw-flex tw-flex-row" },
|
|
50
55
|
React.createElement(Select, { onChange: () => { }, placeholder: "type to search", options: options, inputGroup: "left", extraClassNames: "tw-w-[200px]" }),
|
|
51
56
|
React.createElement(TextField, { onChange: () => { }, placeholder: "text goes here", inputGroup: "right" }))));
|
|
52
57
|
const renderAllVariations = () => (React.createElement(React.Fragment, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../src/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,eAAe;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,OAAO,GAAG;QACd,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE;QAClC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE;QACnC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE;QAChC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE;QACnC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE;QAClC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE;QACnC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE;KAC1C,CAAC;IAEF,MAAM,YAAY,GAAG;QACnB,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;QAC7B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC/B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE;QAC9B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;KAC7B,CAAC;IAEF,MAAM,cAAc,GAAG;QACrB;YACE,KAAK,EAAE,mBAAmB;YAC1B,OAAO,EAAE,OAAO;SACjB;QACD;YACE,KAAK,EAAE,QAAQ;YACf,OAAO,EAAE,YAAY;SACtB;KACF,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB;QACE,6BAAK,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../src/Select/Select.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -1,23 +1,160 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import '@testing-library/jest-dom';
|
|
3
|
-
import { render } from '@testing-library/react';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import userEvent from '@testing-library/user-event';
|
|
4
5
|
import Select from './Select';
|
|
5
|
-
describe('
|
|
6
|
+
describe('Select', () => {
|
|
6
7
|
class Context {
|
|
7
|
-
testId = '
|
|
8
|
+
testId = 'selectTestId';
|
|
8
9
|
label = 'button label';
|
|
10
|
+
options = [
|
|
11
|
+
{ label: 'vanilla', value: 'a' },
|
|
12
|
+
{ label: 'chocolate', value: 'b' },
|
|
13
|
+
{ label: 'strawberry', value: 'c' },
|
|
14
|
+
];
|
|
15
|
+
otherOptions = [
|
|
16
|
+
{ label: 'red', value: 'd' },
|
|
17
|
+
{ label: 'green', value: 'e' },
|
|
18
|
+
];
|
|
19
|
+
groupedOptions = [
|
|
20
|
+
{
|
|
21
|
+
label: 'Ice Cream Flavors',
|
|
22
|
+
options: this.options,
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
label: 'Colors',
|
|
26
|
+
options: this.otherOptions,
|
|
27
|
+
},
|
|
28
|
+
];
|
|
9
29
|
props = {
|
|
10
30
|
onChange: jest.fn(),
|
|
11
|
-
options:
|
|
31
|
+
options: this.options,
|
|
12
32
|
};
|
|
13
33
|
}
|
|
14
34
|
let tc;
|
|
15
35
|
beforeEach(() => {
|
|
16
36
|
tc = new Context();
|
|
17
37
|
});
|
|
38
|
+
const openSelect = async () => {
|
|
39
|
+
const select = document.querySelector(`.specOpenSelect`);
|
|
40
|
+
await userEvent.click(select);
|
|
41
|
+
};
|
|
18
42
|
const renderSelect = (props) => render(React.createElement(Select, { ...props }));
|
|
19
|
-
it('
|
|
20
|
-
|
|
43
|
+
it('renders the select', () => {
|
|
44
|
+
renderSelect(tc.props);
|
|
45
|
+
expect(document.querySelector('.specSelectControl')).toBeInTheDocument();
|
|
46
|
+
});
|
|
47
|
+
it('displays options', async () => {
|
|
48
|
+
renderSelect(tc.props);
|
|
49
|
+
await openSelect();
|
|
50
|
+
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(3);
|
|
51
|
+
});
|
|
52
|
+
it('displays grouped options', async () => {
|
|
53
|
+
renderSelect({ ...tc.props, options: tc.groupedOptions });
|
|
54
|
+
await openSelect();
|
|
55
|
+
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(5);
|
|
56
|
+
expect(document.querySelectorAll('.specSelectGroupHeading')).toHaveLength(2);
|
|
57
|
+
expect(document.querySelectorAll('.specSelectGroup')).toHaveLength(2);
|
|
58
|
+
});
|
|
59
|
+
it('reflects error state', () => {
|
|
60
|
+
renderSelect({ ...tc.props, showError: true });
|
|
61
|
+
expect(document.querySelector('.specSelectControl')).toHaveClass('tw-border-sq-danger-color');
|
|
62
|
+
});
|
|
63
|
+
it('reflects custom render function for option', async () => {
|
|
64
|
+
const getOptionLabel = (option) => (React.createElement("div", null,
|
|
65
|
+
option.label,
|
|
66
|
+
React.createElement("br", null),
|
|
67
|
+
"custom formatting applied"));
|
|
68
|
+
renderSelect({ ...tc.props, getOptionLabel });
|
|
69
|
+
await openSelect();
|
|
70
|
+
expect(document.querySelectorAll('.specSelectOption')[0]).toHaveTextContent('custom formatting applied');
|
|
71
|
+
});
|
|
72
|
+
it('reflects custom render for selected option', async () => {
|
|
73
|
+
const getSelectedValueLabel = (option) => (React.createElement("div", null,
|
|
74
|
+
option.label,
|
|
75
|
+
React.createElement("br", null),
|
|
76
|
+
"the chosen one"));
|
|
77
|
+
renderSelect({ ...tc.props, getSelectedValueLabel });
|
|
78
|
+
await openSelect();
|
|
79
|
+
await userEvent.click(screen.getByText(tc.options[0].label));
|
|
80
|
+
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent('the chosen one');
|
|
81
|
+
});
|
|
82
|
+
it('renders the provided value as selected', () => {
|
|
83
|
+
const value = tc.options[1];
|
|
84
|
+
renderSelect({ ...tc.props, value });
|
|
85
|
+
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(value.label);
|
|
86
|
+
});
|
|
87
|
+
it('renders the provided placeholder', () => {
|
|
88
|
+
const placeholder = 'choose your favorite flavor';
|
|
89
|
+
renderSelect({ ...tc.props, placeholder });
|
|
90
|
+
expect(screen.getByText(placeholder)).toBeInTheDocument();
|
|
91
|
+
});
|
|
92
|
+
it('renders the provided noOptionsMessage', async () => {
|
|
93
|
+
const noOptionsMessage = 'Nothing to see here.';
|
|
94
|
+
renderSelect({ ...tc.props, noOptionsMessage, options: [] });
|
|
95
|
+
await openSelect();
|
|
96
|
+
expect(screen.getByText(noOptionsMessage)).toBeInTheDocument();
|
|
97
|
+
});
|
|
98
|
+
it('supports multi selection', async () => {
|
|
99
|
+
const isMulti = true;
|
|
100
|
+
renderSelect({ ...tc.props, isMulti });
|
|
101
|
+
await openSelect();
|
|
102
|
+
await userEvent.click(screen.getByText(tc.options[0].label));
|
|
103
|
+
await openSelect();
|
|
104
|
+
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
105
|
+
expect(document.querySelectorAll('.specOpenSelect')).toHaveLength(2);
|
|
106
|
+
});
|
|
107
|
+
it('renders isClearable', async () => {
|
|
108
|
+
const isClearable = true;
|
|
109
|
+
const placeholder = 'no worries - you can clear this.';
|
|
110
|
+
renderSelect({ ...tc.props, isClearable, placeholder });
|
|
111
|
+
await openSelect();
|
|
112
|
+
await userEvent.click(screen.getByText(tc.options[0].label));
|
|
113
|
+
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(tc.options[0].label);
|
|
114
|
+
expect(document.querySelector('.specClearSelect')).toBeInTheDocument();
|
|
115
|
+
await userEvent.click(document.querySelector('.specClearSelect'));
|
|
116
|
+
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(placeholder);
|
|
117
|
+
});
|
|
118
|
+
it('supports menuIsOpen', async () => {
|
|
119
|
+
const menuIsOpen = true;
|
|
120
|
+
renderSelect({ ...tc.props, menuIsOpen });
|
|
121
|
+
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(tc.options.length);
|
|
122
|
+
});
|
|
123
|
+
it('supports closeMenuOnSelect', async () => {
|
|
124
|
+
const closeMenuOnSelect = false;
|
|
125
|
+
renderSelect({ ...tc.props, closeMenuOnSelect });
|
|
126
|
+
await openSelect();
|
|
127
|
+
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
128
|
+
await userEvent.click(screen.getByText(tc.options[2].label));
|
|
129
|
+
expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(tc.options[2].label);
|
|
130
|
+
});
|
|
131
|
+
it('removes selected option from multi-select options list', async () => {
|
|
132
|
+
const closeMenuOnSelect = false;
|
|
133
|
+
renderSelect({ ...tc.props, isMulti: true, closeMenuOnSelect });
|
|
134
|
+
await openSelect();
|
|
135
|
+
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
136
|
+
await userEvent.click(screen.getByText(tc.options[2].label));
|
|
137
|
+
expect(document.querySelectorAll('.specSelectOption')).toHaveLength(tc.options.length - 2);
|
|
138
|
+
});
|
|
139
|
+
it('calls onChange handler', async () => {
|
|
140
|
+
const onChange = jest.fn();
|
|
141
|
+
renderSelect({ ...tc.props, onChange });
|
|
142
|
+
await openSelect();
|
|
143
|
+
await userEvent.click(screen.getByText(tc.options[1].label));
|
|
144
|
+
expect(onChange).toHaveBeenCalledWith(tc.options[1]);
|
|
145
|
+
});
|
|
146
|
+
it('includes inputId', async () => {
|
|
147
|
+
const inputId = 'idMe';
|
|
148
|
+
renderSelect({ ...tc.props, inputId });
|
|
149
|
+
expect(document.querySelector(`#${inputId}`)).toBeInTheDocument();
|
|
150
|
+
});
|
|
151
|
+
it('supports creating options', async () => {
|
|
152
|
+
const inputId = 'idMe';
|
|
153
|
+
const favorite = 'Almond Joy';
|
|
154
|
+
renderSelect({ ...tc.props, creatable: true, inputId });
|
|
155
|
+
await openSelect();
|
|
156
|
+
await userEvent.type(document.querySelector(`#${inputId}`), favorite);
|
|
157
|
+
expect(screen.getByText(`Create "${favorite}"`)).toBeInTheDocument();
|
|
21
158
|
});
|
|
22
159
|
});
|
|
23
160
|
//# sourceMappingURL=Select.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.test.js","sourceRoot":"","sources":["../../src/Select/Select.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.test.js","sourceRoot":"","sources":["../../src/Select/Select.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { GroupBase, MenuPlacement, MultiValue, SingleValue } from 'react-select';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { InputGroupPlacement } from '../types';
|
|
4
|
+
export type Option = {
|
|
5
|
+
label: string;
|
|
6
|
+
value: string | number;
|
|
7
|
+
};
|
|
8
|
+
export type GroupedOption = {
|
|
9
|
+
label: string;
|
|
10
|
+
options: Option[];
|
|
11
|
+
};
|
|
12
|
+
export interface SelectProps {
|
|
13
|
+
/** set to true to not automatically close the menu on selection */
|
|
14
|
+
closeMenuOnSelect?: boolean;
|
|
15
|
+
/** set to true if users can add new options */
|
|
16
|
+
creatable?: boolean;
|
|
17
|
+
/** set to true to disable the select */
|
|
18
|
+
isDisabled?: boolean;
|
|
19
|
+
/** extra class names to be placed on the select control: this can be used to size the select */
|
|
20
|
+
extraClassNames?: string;
|
|
21
|
+
/** custom filter for search */
|
|
22
|
+
filterConfig?: unknown;
|
|
23
|
+
/** formats option labels in the menu and control as React components */
|
|
24
|
+
getOptionLabel?: (option: Option) => ReactNode | undefined;
|
|
25
|
+
/** resolves option data to a string to be displayed as the label by components */
|
|
26
|
+
getOptionValue?: (option: Option) => string;
|
|
27
|
+
/** formats the selected option labels in the menu and control as React components */
|
|
28
|
+
getSelectedValueLabel?: (option: Option) => ReactNode | undefined;
|
|
29
|
+
/** id of the select component */
|
|
30
|
+
id?: string;
|
|
31
|
+
/** if the select is displayed as part of an input group provide the placement here */
|
|
32
|
+
inputGroup?: InputGroupPlacement;
|
|
33
|
+
/** id of the input component */
|
|
34
|
+
inputId?: string;
|
|
35
|
+
/** set to true if users should be able to clear selection */
|
|
36
|
+
isClearable?: boolean;
|
|
37
|
+
/** set to true while select options are loading */
|
|
38
|
+
isLoading?: boolean;
|
|
39
|
+
/** set to true if multiple options can be selected */
|
|
40
|
+
isMulti?: boolean;
|
|
41
|
+
/** set to true if select should be searchable by typing in the select box */
|
|
42
|
+
isSearchable?: boolean;
|
|
43
|
+
/** set to true to keep the menu open; this is helpful for debugging */
|
|
44
|
+
menuIsOpen?: boolean;
|
|
45
|
+
/** where the menu should be displayed - auto is usually a great choice */
|
|
46
|
+
menuPlacement?: MenuPlacement;
|
|
47
|
+
/** whether the menu should use a portal, and where it should attach */
|
|
48
|
+
menuPortalTarget?: null | HTMLElement;
|
|
49
|
+
/** message displayed if no options are available */
|
|
50
|
+
noOptionsMessage?: string;
|
|
51
|
+
/** handle change events on the select */
|
|
52
|
+
onChange: (newValue: SingleValue<Option> | MultiValue<Option>) => void;
|
|
53
|
+
/** Array of options that populate the select menu */
|
|
54
|
+
options: Option[] | GroupedOption[];
|
|
55
|
+
/** placeholder text that is displayed when no option is selected */
|
|
56
|
+
placeholder?: string;
|
|
57
|
+
/** if true error formatting will be displayed */
|
|
58
|
+
showError?: boolean;
|
|
59
|
+
/** if true the select will be displayed in a "small" version */
|
|
60
|
+
small?: boolean;
|
|
61
|
+
/** value of the select */
|
|
62
|
+
value?: Option | undefined;
|
|
63
|
+
/** default value of the select */
|
|
64
|
+
defaultValue?: Option | undefined;
|
|
65
|
+
/** custom method to filter whether an option should be displayed in the menu */
|
|
66
|
+
filterOption?: (option: Option, rawInput: string) => boolean;
|
|
67
|
+
/** formats group labels in the menu as React components */
|
|
68
|
+
formatGroupLabel?: (group: GroupBase<unknown>) => ReactNode;
|
|
69
|
+
/** handle remove events in multi-select */
|
|
70
|
+
onRemove?: ({ id }: {
|
|
71
|
+
id: Option | string;
|
|
72
|
+
}) => void;
|
|
73
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Select';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { FormControlElement } from '../types';
|
|
2
2
|
export interface TextAreaProps {
|
|
3
3
|
/** extra class names to be placed on the TextArea component */
|
|
4
4
|
extraClassNames?: string;
|
|
@@ -25,4 +25,3 @@ export interface TextAreaProps {
|
|
|
25
25
|
/** value of the TextArea */
|
|
26
26
|
value?: string | string[] | number;
|
|
27
27
|
}
|
|
28
|
-
export {};
|
|
@@ -4,7 +4,7 @@ import '../styles.css';
|
|
|
4
4
|
* Textfield.
|
|
5
5
|
*/
|
|
6
6
|
export const TextField = React.forwardRef((props, ref) => {
|
|
7
|
-
const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', } = props;
|
|
7
|
+
const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, } = props;
|
|
8
8
|
const internalRef = useRef(null);
|
|
9
9
|
const [cursor, setCursor] = useState(null);
|
|
10
10
|
const setAllRefs = (receivedRef) => {
|
|
@@ -14,7 +14,7 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
|
14
14
|
};
|
|
15
15
|
useEffect(() => {
|
|
16
16
|
const input = internalRef.current;
|
|
17
|
-
if (input)
|
|
17
|
+
if (input && type !== 'number')
|
|
18
18
|
input.setSelectionRange(cursor, cursor);
|
|
19
19
|
}, [ref, cursor, value]);
|
|
20
20
|
const handleChange = (e) => {
|
|
@@ -32,8 +32,10 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
|
32
32
|
internalRef.current.value = `${value}`;
|
|
33
33
|
}
|
|
34
34
|
}, [value]);
|
|
35
|
-
const baseClasses = 'tw-
|
|
36
|
-
' disabled:tw-
|
|
35
|
+
const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
|
|
36
|
+
' disabled:tw-pointer-events-none' +
|
|
37
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
|
|
38
|
+
' dark:tw-placeholder-sq-dark-text-lighter specTextField';
|
|
37
39
|
const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
|
|
38
40
|
' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
|
|
39
41
|
const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
|
|
@@ -41,7 +43,14 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
|
41
43
|
sm: 'tw-text-sm',
|
|
42
44
|
lg: 'tw-text-xl',
|
|
43
45
|
};
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
let borderRadius = 'tw-rounded-sm';
|
|
47
|
+
if (inputGroup === 'left') {
|
|
48
|
+
borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
|
|
49
|
+
}
|
|
50
|
+
else if (inputGroup === 'right') {
|
|
51
|
+
borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
|
|
52
|
+
}
|
|
53
|
+
const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius}`;
|
|
54
|
+
return (React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step }));
|
|
46
55
|
});
|
|
47
56
|
//# sourceMappingURL=TextField.js.map
|