@hazelcast/ui 1.3.2-next.82 → 1.3.2-next.85

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 (19) hide show
  1. package/lib/Button.module.scss +8 -8
  2. package/lib/Calendar/Calendar.module.scss +1 -1
  3. package/lib/Carousel.module.scss +2 -2
  4. package/lib/ContextMenu.module.scss +1 -1
  5. package/lib/InteractiveList.d.ts +6 -2
  6. package/lib/InteractiveList.js +6 -5
  7. package/lib/InteractiveList.js.map +1 -1
  8. package/lib/InteractiveListFormik.js +24 -21
  9. package/lib/InteractiveListFormik.js.map +1 -1
  10. package/lib/Pagination.module.scss +3 -2
  11. package/lib/SegmentedControl.module.scss +1 -1
  12. package/lib/Select/CheckableSelectField.module.scss +1 -1
  13. package/lib/Slider.module.scss +1 -1
  14. package/lib/Table/Header.module.scss +1 -1
  15. package/lib/Table/Row.module.scss +2 -2
  16. package/lib/Table/Table.module.scss +1 -1
  17. package/lib/Tabs/Tab.module.scss +9 -3
  18. package/lib/Terminal.module.scss +1 -1
  19. package/package.json +3 -3
package/lib/Button.module.scss CHANGED
@@ -57,7 +57,7 @@
57
57
  }
58
58
  }
59
59
 
60
- &:focus,
60
+ &:focus-visible,
61
61
  &.focus {
62
62
  // Do not remove outline for high-contrast modes
63
63
  // https://stackoverflow.com/a/52616313
@@ -100,7 +100,7 @@
100
100
 
101
101
  &:hover,
102
102
  &.hover,
103
- &:focus,
103
+ &:focus-visible,
104
104
  &.focus {
105
105
  @include buttonColor(c.$colorPrimaryLight);
106
106
  }
@@ -124,7 +124,7 @@
124
124
 
125
125
  &:hover,
126
126
  &.hover,
127
- &:focus,
127
+ &:focus-visible,
128
128
  &.focus {
129
129
  @include buttonColor(c.$colorErrorLight);
130
130
  }
@@ -148,7 +148,7 @@
148
148
 
149
149
  &:hover,
150
150
  &.hover,
151
- &:focus,
151
+ &:focus-visible,
152
152
  &.focus {
153
153
  @include buttonColor(c.$colorWarningLight);
154
154
  }
@@ -172,7 +172,7 @@
172
172
 
173
173
  &:hover,
174
174
  &.hover,
175
- &:focus,
175
+ &:focus-visible,
176
176
  &.focus {
177
177
  @include buttonColor(lighten(c.$colorBrand, 20%));
178
178
  }
@@ -196,7 +196,7 @@
196
196
 
197
197
  &:hover,
198
198
  &.hover,
199
- &:focus,
199
+ &:focus-visible,
200
200
  &.focus {
201
201
  @include buttonColor(lighten(c.$authPrimary, 10%));
202
202
  }
@@ -241,7 +241,7 @@
241
241
  &.hover,
242
242
  &:active,
243
243
  &.active,
244
- &:focus,
244
+ &:focus-visible,
245
245
  &.focus,
246
246
  &:disabled,
247
247
  &.disabled {
@@ -257,7 +257,7 @@
257
257
  &.hover,
258
258
  &:active,
259
259
  &.active,
260
- &:focus,
260
+ &:focus-visible,
261
261
  &.focus,
262
262
  &:disabled,
263
263
  &.disabled {
package/lib/Calendar/Calendar.module.scss CHANGED
@@ -125,7 +125,7 @@ $inputPadding: c.$grid * 3;
125
125
  color: c.$colorNeutral;
126
126
  }
127
127
 
128
- &:focus {
128
+ &:focus-visible {
129
129
  @include h.outlineSimple;
130
130
  }
131
131
 
package/lib/Carousel.module.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  position: relative;
23
23
  height: 40px;
24
24
 
25
- &:focus {
25
+ &:focus-visible {
26
26
  @include h.outlineAround;
27
27
  }
28
28
  }
@@ -37,7 +37,7 @@
37
37
  align-items: center;
38
38
  padding: c.$grid * 1.5;
39
39
 
40
- &:focus {
40
+ &:focus-visible {
41
41
  @include h.outlineAround;
42
42
  }
43
43
  }
package/lib/ContextMenu.module.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  border: none;
23
23
  text-align: left;
24
24
 
25
- &:focus {
25
+ &:focus-visible {
26
26
  @include h.outlineSimple;
27
27
  }
28
28
 
package/lib/InteractiveList.d.ts CHANGED
@@ -4,7 +4,10 @@ import { ExtractKeysOfValueType } from './utils/types';
4
4
  import { FieldHeaderProps } from './FieldHeader';
5
5
  export type InteractiveListExtraProps = {
6
6
  children?: React.ReactNode | React.ReactNode[];
7
- } & Pick<TextFieldExtraProps<'text'>, 'inputIcon' | 'type' | 'placeholder'> & Omit<FieldHeaderProps, 'id'>;
7
+ iconClassName?: string;
8
+ itemClassName?: string;
9
+ listClassName?: string;
10
+ } & Pick<TextFieldExtraProps<'text'>, 'inputIcon' | 'type' | 'placeholder' | 'inputClassName' | 'className'> & Omit<FieldHeaderProps, 'id'>;
8
11
  export type InteractiveListCoreProps<V> = {
9
12
  name: ExtractKeysOfValueType<V, string[]>;
10
13
  value: string[];
@@ -18,6 +21,7 @@ export type InteractiveListCoreProps<V> = {
18
21
  export type InteractiveListProps<V> = InteractiveListExtraProps & InteractiveListCoreProps<V>;
19
22
  export type InteractiveListInputRef = {
20
23
  setValue: (value: string) => void;
24
+ addItem: () => Promise<string | undefined>;
21
25
  };
22
26
  export type InteractiveListItemProps = {
23
27
  content: string;
@@ -30,4 +34,4 @@ export declare const InteractiveListItem: ({ onRemoveItem, content, error, idx }
30
34
  * This component is meant to be used only from InteractiveListFormik
31
35
  * @private
32
36
  */
33
- export declare const InteractiveList: <V>({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, }: InteractiveListProps<V>) => JSX.Element;
37
+ export declare const InteractiveList: <V>({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, }: InteractiveListProps<V>) => JSX.Element;
package/lib/InteractiveList.js CHANGED
@@ -5,6 +5,7 @@ import { Plus, X } from 'react-feather';
5
5
  import styles from './InteractiveList.module.scss';
6
6
  import { useUID } from 'react-uid';
7
7
  import { Error, errorId } from './Error';
8
+ import cn from 'classnames';
8
9
  export const InteractiveListItem = ({ onRemoveItem, content, error, idx }) => {
9
10
  const id = useUID();
10
11
  const errorProps = error
@@ -26,11 +27,11 @@ export const InteractiveListItem = ({ onRemoveItem, content, error, idx }) => {
26
27
  * This component is meant to be used only from InteractiveListFormik
27
28
  * @private
28
29
  */
29
- export const InteractiveList = ({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, }) => {
30
+ export const InteractiveList = ({ label, children, error, name, value, helperText, inputIcon, type, inputValue, setInputValue, onAddItem, onRemoveItem, className, inputClassName, iconClassName, itemClassName, listClassName, }) => {
30
31
  const id = useUID();
31
32
  return (React.createElement(React.Fragment, null,
32
- React.createElement("div", { className: styles.inputRow },
33
- React.createElement(TextField, { id: id, type: type, helperText: helperText, inputIcon: inputIcon, error: typeof error === 'string' ? error : undefined, label: label, name: name, value: inputValue, onChange: ({ target: { value } }) => {
33
+ React.createElement("div", { className: cn(styles.inputRow, className) },
34
+ React.createElement(TextField, { id: id, type: type, helperText: helperText, inputIcon: inputIcon, className: inputClassName, error: typeof error === 'string' ? error : undefined, label: label, name: name, value: inputValue, onChange: ({ target: { value } }) => {
34
35
  setInputValue(value);
35
36
  },
36
37
  /* eslint-disable-next-line @typescript-eslint/no-misused-promises */
@@ -40,9 +41,9 @@ export const InteractiveList = ({ label, children, error, name, value, helperTex
40
41
  await onAddItem();
41
42
  }
42
43
  } }),
43
- React.createElement(IconButton, { "data-test": "interactive-list-add-button", kind: "transparent", ariaLabel: "Add Icon", icon: Plus, className: styles.addIcon, size: "medium", onClick: () => void onAddItem() })),
44
+ React.createElement(IconButton, { "data-test": "interactive-list-add-button", kind: "transparent", ariaLabel: "Add Icon", icon: Plus, className: cn(styles.addIcon, iconClassName), size: "medium", onClick: () => void onAddItem() })),
44
45
  children,
45
- React.createElement("ul", { className: styles.list }, value.map((str, idx) => (React.createElement("li", { key: str },
46
+ React.createElement("ul", { className: cn(styles.list, listClassName) }, value.map((str, idx) => (React.createElement("li", { key: str, className: itemClassName },
46
47
  React.createElement(InteractiveListItem, { onRemoveItem: onRemoveItem, idx: idx, content: str, error: typeof error === 'object' && error[idx] ? error[idx] : undefined })))))));
47
48
  };
48
49
  //# sourceMappingURL=InteractiveList.js.map
package/lib/InteractiveList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InteractiveList.js","sourceRoot":"","sources":["../src/InteractiveList.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"InteractiveList.js","sourceRoot":"","sources":["../src/InteractiveList.tsx"],"names":[],"mappings":"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"}
package/lib/InteractiveListFormik.js CHANGED
@@ -16,11 +16,15 @@ import { getFieldError } from './utils/formik';
16
16
  */
17
17
  export const InteractiveListFormik = ({ name, validate, children, inputControlRef, ...props }) => {
18
18
  const { validateForm, values: valuesFormik } = useFormikContext();
19
- const [field, meta, { setTouched, setError }] = useField({
19
+ const [field, meta, { setTouched, setError, setValue }] = useField({
20
20
  name,
21
21
  validate,
22
22
  });
23
- const getValidationError = async () => {
23
+ const [inputValue, setInputValue] = useState('');
24
+ // We want to revalidate on change only after un-successful insert
25
+ const [inputTouched, setInputTouched] = useState(false);
26
+ const normalizedValue = useMemo(() => inputValue.trim(), [inputValue]);
27
+ const getValidationError = useCallback(async () => {
24
28
  let validationError = undefined;
25
29
  if (normalizedValue.length === 0) {
26
30
  validationError = 'You need to provide a non empty value';
@@ -46,21 +50,33 @@ export const InteractiveListFormik = ({ name, validate, children, inputControlRe
46
50
  validationError = typeof fieldErrors === 'string' ? fieldErrors : fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors.find((x) => !!x);
47
51
  }
48
52
  return validationError;
49
- };
53
+ }, [field.value, name, normalizedValue, validate, validateForm, valuesFormik]);
50
54
  const onError = useCallback((value) => {
51
55
  setTouched(true, false);
52
56
  // @ts-expect-error Formik expects the string[], while documentation says
53
57
  // it can be string | string[] which also makes more sense
54
58
  setError(value);
55
59
  }, [setTouched, setError]);
56
- const [inputValue, setInputValue] = useState('');
57
- // We want to revalidate on change only after un-successful insert
58
- const [inputTouched, setInputTouched] = useState(false);
59
- const normalizedValue = useMemo(() => inputValue.trim(), [inputValue]);
60
+ const addItem = useCallback(async () => {
61
+ const validationError = await getValidationError();
62
+ if (validationError) {
63
+ onError(validationError);
64
+ setInputTouched(true);
65
+ return validationError;
66
+ }
67
+ else {
68
+ field.value.push(normalizedValue);
69
+ setValue(field.value);
70
+ setInputTouched(false);
71
+ setInputValue('');
72
+ return undefined;
73
+ }
74
+ }, [field.value, getValidationError, normalizedValue, onError, setValue]);
60
75
  useImperativeHandle(inputControlRef, () => ({
61
76
  setValue: (value) => {
62
77
  setInputValue(value);
63
78
  },
79
+ addItem: addItem,
64
80
  }));
65
81
  useEffect(() => {
66
82
  if (inputTouched) {
@@ -73,20 +89,7 @@ export const InteractiveListFormik = ({ name, validate, children, inputControlRe
73
89
  // eslint-disable-next-line react-hooks/exhaustive-deps
74
90
  }, [inputTouched, inputValue]);
75
91
  return (React.createElement(FieldArray, { name: name, render: (arrayHelpers) => {
76
- return (React.createElement(InteractiveList, { ...props, name: name, value: field.value, inputValue: inputValue, setInputValue: setInputValue, error: getFieldError(meta), onAddItem: async () => {
77
- const validationError = await getValidationError();
78
- if (validationError) {
79
- onError(validationError);
80
- setInputTouched(true);
81
- return validationError;
82
- }
83
- else {
84
- arrayHelpers.push(normalizedValue);
85
- setInputTouched(false);
86
- setInputValue('');
87
- return undefined;
88
- }
89
- }, onRemoveItem: (idx) => !!arrayHelpers.remove(idx) }, children));
92
+ return (React.createElement(InteractiveList, { ...props, name: name, value: field.value, inputValue: inputValue, setInputValue: setInputValue, error: getFieldError(meta), onAddItem: addItem, onRemoveItem: (idx) => !!arrayHelpers.remove(idx) }, children));
90
93
  } }));
91
94
  };
92
95
  //# sourceMappingURL=InteractiveListFormik.js.map
package/lib/InteractiveListFormik.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InteractiveListFormik.js","sourceRoot":"","sources":["../src/InteractiveListFormik.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"InteractiveListFormik.js","sourceRoot":"","sources":["../src/InteractiveListFormik.tsx"],"names":[],"mappings":"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"}
package/lib/Pagination.module.scss CHANGED
@@ -55,7 +55,7 @@
55
55
  border-color: c.$colorPrimary;
56
56
  }
57
57
 
58
- &:focus {
58
+ &:focus-visible {
59
59
  .outline {
60
60
  visibility: hidden;
61
61
  }
@@ -82,7 +82,8 @@
82
82
  border-color: c.$colorPrimary;
83
83
  }
84
84
 
85
- &:focus {
85
+ &:focus,
86
+ &:focus-visible {
86
87
  box-shadow: none;
87
88
  }
88
89
  }
package/lib/SegmentedControl.module.scss CHANGED
@@ -55,7 +55,7 @@
55
55
  color: c.$colorText;
56
56
  }
57
57
 
58
- &:focus {
58
+ &:focus-visible {
59
59
  // Do not remove outline for high-contrast modes
60
60
  // https://stackoverflow.com/a/52616313
61
61
  outline: c.$outlineWidth solid transparent;
package/lib/Select/CheckableSelectField.module.scss CHANGED
@@ -51,7 +51,7 @@
51
51
  margin-bottom: c.$grid * 2.5;
52
52
  overflow: hidden;
53
53
 
54
- &:focus {
54
+ &:focus-visible {
55
55
  @include h.outlineFormField;
56
56
  }
57
57
  }
package/lib/Slider.module.scss CHANGED
@@ -162,7 +162,7 @@ ul.markDescriptions {
162
162
  }
163
163
 
164
164
  &.focus,
165
- &:focus {
165
+ &:focus-visible {
166
166
  @include styleThumb {
167
167
  box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
168
168
  }
package/lib/Table/Header.module.scss CHANGED
@@ -61,7 +61,7 @@
61
61
  &.sortable {
62
62
  cursor: pointer;
63
63
 
64
- &:focus {
64
+ &:focus-visible {
65
65
  // Do not remove outline for high-contrast modes
66
66
  // https://stackoverflow.com/a/52616313
67
67
  outline: c.$outlineWidth solid transparent;
package/lib/Table/Row.module.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  &.clickable {
13
13
  cursor: pointer;
14
14
 
15
- &:focus {
15
+ &:focus-visible {
16
16
  @include h.outlineSimple;
17
17
 
18
18
  // Do not remove outline for high-contrast modes
@@ -36,7 +36,7 @@
36
36
  text-decoration: none;
37
37
  background-color: inherit;
38
38
 
39
- &:focus {
39
+ &:focus-visible {
40
40
  @include h.outlineSimple;
41
41
 
42
42
  // Do not remove outline for high-contrast modes
package/lib/Table/Table.module.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  .expander {
18
- &:focus {
18
+ &:focus-visible {
19
19
  @include h.outlineSimple;
20
20
  }
21
21
  }
package/lib/Tabs/Tab.module.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  box-sizing: border-box;
11
11
  height: c.$grid * 10;
12
12
  min-width: c.$grid * 40;
13
- padding: 0 c.$grid * 5;
13
+ padding: c.$grid c.$grid * 5;
14
14
  border: none;
15
15
  border-bottom: 1px solid;
16
16
  border-color: c.$colorNeutralLight;
@@ -30,11 +30,17 @@
30
30
 
31
31
  &.selected {
32
32
  color: c.$colorPrimary;
33
- border-radius: none;
33
+ border-radius: 0;
34
34
  border-color: c.$colorPrimary;
35
35
  box-shadow: inset 0 -4px 0 0 c.$colorPrimary;
36
36
  }
37
37
 
38
+ &.selected:focus-visible {
39
+ border-color: c.$colorPrimary;
40
+ border-bottom-width: c.$grid;
41
+ padding-bottom: 0;
42
+ }
43
+
38
44
  &.fullWidth {
39
45
  flex: 1 1 auto;
40
46
  }
@@ -43,7 +49,7 @@
43
49
  color: c.$colorPrimary;
44
50
  }
45
51
 
46
- &:focus {
52
+ &:focus-visible {
47
53
  // Do not remove outline for high-contrast modes
48
54
  // https://stackoverflow.com/a/52616313
49
55
  outline: c.$outlineWidth solid transparent;
package/lib/Terminal.module.scss CHANGED
@@ -43,7 +43,7 @@
43
43
  border-bottom-color: c.$colorText;
44
44
  }
45
45
 
46
- &:focus,
46
+ &:focus-visible,
47
47
  &.focus {
48
48
  // Do not remove outline for high-contrast modes
49
49
  // https://stackoverflow.com/a/52616313
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hazelcast/ui",
3
- "version": "1.3.2-next.82+91ef0da",
3
+ "version": "1.3.2-next.85+1e4ca58",
4
4
  "description": "Hazelcast design system components",
5
5
  "author": "",
6
6
  "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -75,7 +75,7 @@
75
75
  "use-deep-compare": "^1.1.0"
76
76
  },
77
77
  "devDependencies": {
78
- "@hazelcast/test-helpers": "^1.3.2-next.82+91ef0da",
78
+ "@hazelcast/test-helpers": "^1.3.1",
79
79
  "@storybook/addon-docs": "^6.5.16",
80
80
  "@storybook/addons": "^6.5.16",
81
81
  "@storybook/builder-webpack5": "^6.5.16",
@@ -116,5 +116,5 @@
116
116
  "react": "^17 || ^18",
117
117
  "react-dom": "^17 || ^18"
118
118
  },
119
- "gitHead": "91ef0da567b1e51ae2d285a5b6b980d0f4c82c77"
119
+ "gitHead": "1e4ca5874a31281c47c5852aaaa195f2cec5955e"
120
120
  }