@hazelcast/ui 1.0.3 → 1.2.1-next.0
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/lib/Alert.d.ts +3 -2
- package/lib/Alert.js +23 -23
- package/lib/Alert.js.map +1 -1
- package/lib/Alert.module.scss +14 -6
- package/lib/AutocompleteField.d.ts +2 -1
- package/lib/AutocompleteField.js +45 -22
- package/lib/AutocompleteField.js.map +1 -1
- package/lib/AutocompleteField.module.scss +3 -5
- package/lib/AutocompleteFieldFormik.d.ts +2 -1
- package/lib/AutocompleteFieldFormik.js +11 -5
- package/lib/AutocompleteFieldFormik.js.map +1 -1
- package/lib/Button.d.ts +9 -322
- package/lib/Button.js +44 -15
- package/lib/Button.js.map +1 -1
- package/lib/Button.module.scss +120 -87
- package/lib/Calendar/Calendar.d.ts +1 -1
- package/lib/Calendar/Calendar.js +8 -3
- package/lib/Calendar/Calendar.js.map +1 -1
- package/lib/Calendar/Calendar.module.scss +134 -123
- package/lib/Calendar/components/CalendarInput.js +2 -2
- package/lib/Calendar/components/CalendarInput.js.map +1 -1
- package/lib/Calendar/components/CalendarTime.js +2 -2
- package/lib/Calendar/components/CalendarTime.js.map +1 -1
- package/lib/Calendar/components/CalendarTime.module.scss +2 -0
- package/lib/Card.d.ts +1 -0
- package/lib/Card.js +4 -3
- package/lib/Card.js.map +1 -1
- package/lib/Card.module.scss +16 -4
- package/lib/Checkbox.d.ts +2 -2
- package/lib/Checkbox.js +7 -4
- package/lib/Checkbox.js.map +1 -1
- package/lib/Checkbox.module.scss +17 -6
- package/lib/CheckboxFormik.d.ts +2 -1
- package/lib/CheckboxFormik.js +9 -4
- package/lib/CheckboxFormik.js.map +1 -1
- package/lib/CodeEditor.d.ts +3 -2
- package/lib/CodeEditor.js +4 -3
- package/lib/CodeEditor.js.map +1 -1
- package/lib/CodeEditor.module.scss +5 -2
- package/lib/CodeEditorFormik.js +2 -2
- package/lib/CodeEditorFormik.js.map +1 -1
- package/lib/Dialog.js +5 -2
- package/lib/Dialog.js.map +1 -1
- package/lib/Dialog.module.scss +3 -0
- package/lib/EmptyState.d.ts +6 -4
- package/lib/EmptyState.js +4 -6
- package/lib/EmptyState.js.map +1 -1
- package/lib/EmptyState.module.scss +1 -1
- package/lib/Error.d.ts +3 -0
- package/lib/Error.js +2 -1
- package/lib/Error.js.map +1 -1
- package/lib/FieldHeader.d.ts +20 -0
- package/lib/FieldHeader.js +15 -0
- package/lib/FieldHeader.js.map +1 -0
- package/lib/FieldHeader.module.scss +20 -0
- package/lib/Icon.d.ts +2 -35
- package/lib/Icon.js +1 -1
- package/lib/Icon.js.map +1 -1
- package/lib/Icon.module.scss +5 -0
- package/lib/IconButton.d.ts +4 -158
- package/lib/IconButton.js +3 -3
- package/lib/IconButton.js.map +1 -1
- package/lib/InteractiveList.d.ts +3 -3
- package/lib/InteractiveList.js +2 -3
- package/lib/InteractiveList.js.map +1 -1
- package/lib/InteractiveList.module.scss +1 -0
- package/lib/InteractiveListFormik.js +5 -4
- package/lib/InteractiveListFormik.js.map +1 -1
- package/lib/Link.d.ts +1 -65
- package/lib/Link.js +3 -4
- package/lib/Link.js.map +1 -1
- package/lib/Link.module.scss +7 -0
- package/lib/Loader.js +2 -2
- package/lib/Loader.js.map +1 -1
- package/lib/Loader.module.scss +10 -1
- package/lib/Modal.js +3 -3
- package/lib/Modal.js.map +1 -1
- package/lib/Modal.module.scss +1 -0
- package/lib/Notification.module.scss +1 -0
- package/lib/NumberField.d.ts +1 -0
- package/lib/NumberField.js +27 -11
- package/lib/NumberField.js.map +1 -1
- package/lib/NumberField.module.scss +40 -3
- package/lib/NumberFieldFormik.d.ts +2 -1
- package/lib/NumberFieldFormik.js +7 -4
- package/lib/NumberFieldFormik.js.map +1 -1
- package/lib/Overlay.d.ts +3 -2
- package/lib/Overlay.js +7 -5
- package/lib/Overlay.js.map +1 -1
- package/lib/Overlay.module.scss +18 -3
- package/lib/Pagination.d.ts +0 -4
- package/lib/Pagination.js +19 -17
- package/lib/Pagination.js.map +1 -1
- package/lib/Pagination.module.scss +7 -4
- package/lib/PasswordField.js +2 -2
- package/lib/PasswordField.js.map +1 -1
- package/lib/PasswordFieldFormik.d.ts +2 -1
- package/lib/PasswordFieldFormik.js +9 -4
- package/lib/PasswordFieldFormik.js.map +1 -1
- package/lib/Popover.d.ts +21 -0
- package/lib/Popover.js +77 -0
- package/lib/Popover.js.map +1 -0
- package/lib/Popover.module.scss +12 -0
- package/lib/Radio.d.ts +2 -2
- package/lib/Radio.js +4 -2
- package/lib/Radio.js.map +1 -1
- package/lib/Radio.module.scss +3 -0
- package/lib/RadioFormik.js +1 -1
- package/lib/RadioFormik.js.map +1 -1
- package/lib/RadioGroup.js +4 -3
- package/lib/RadioGroup.js.map +1 -1
- package/lib/RadioGroup.module.scss +1 -4
- package/lib/RadioGroupFormik.d.ts +2 -1
- package/lib/RadioGroupFormik.js +9 -4
- package/lib/RadioGroupFormik.js.map +1 -1
- package/lib/SegmentedControl.d.ts +8 -8
- package/lib/SegmentedControl.js.map +1 -1
- package/lib/SegmentedControl.module.scss +4 -2
- package/lib/SegmentedControlFormik.d.ts +4 -4
- package/lib/SegmentedControlFormik.js +1 -1
- package/lib/SegmentedControlFormik.js.map +1 -1
- package/lib/Select/CheckableSelectField.d.ts +34 -0
- package/lib/Select/CheckableSelectField.js +65 -0
- package/lib/Select/CheckableSelectField.js.map +1 -0
- package/lib/Select/CheckableSelectField.module.scss +87 -0
- package/lib/Select/CheckableSelectFieldFormik.d.ts +10 -0
- package/lib/Select/CheckableSelectFieldFormik.js +19 -0
- package/lib/Select/CheckableSelectFieldFormik.js.map +1 -0
- package/lib/Select/Common.d.ts +11 -0
- package/lib/Select/Common.js +44 -0
- package/lib/Select/Common.js.map +1 -0
- package/lib/Select/Common.module.scss +56 -0
- package/lib/Select/MultiSelectField.d.ts +28 -0
- package/lib/Select/MultiSelectField.js +108 -0
- package/lib/Select/MultiSelectField.js.map +1 -0
- package/lib/Select/MultiSelectField.module.scss +72 -0
- package/lib/Select/MultiSelectFieldFormik.d.ts +10 -0
- package/lib/Select/MultiSelectFieldFormik.js +19 -0
- package/lib/Select/MultiSelectFieldFormik.js.map +1 -0
- package/lib/Select/SelectField.d.ts +42 -0
- package/lib/Select/SelectField.js +87 -0
- package/lib/Select/SelectField.js.map +1 -0
- package/lib/Select/SelectField.module.scss +191 -0
- package/lib/Select/SelectFieldFormik.d.ts +10 -0
- package/lib/Select/SelectFieldFormik.js +19 -0
- package/lib/Select/SelectFieldFormik.js.map +1 -0
- package/lib/Select/helpers.d.ts +10 -0
- package/lib/Select/helpers.js +29 -0
- package/lib/Select/helpers.js.map +1 -0
- package/lib/Select/index.d.ts +7 -0
- package/lib/Select/index.js +8 -0
- package/lib/Select/index.js.map +1 -0
- package/lib/SimpleTable.d.ts +11 -0
- package/lib/SimpleTable.js +26 -0
- package/lib/SimpleTable.js.map +1 -0
- package/lib/SimpleTable.module.scss +28 -0
- package/lib/Slider.d.ts +6 -5
- package/lib/Slider.js +35 -17
- package/lib/Slider.js.map +1 -1
- package/lib/Slider.module.scss +13 -9
- package/lib/SliderFormik.d.ts +1 -1
- package/lib/SliderFormik.js +1 -1
- package/lib/SliderFormik.js.map +1 -1
- package/lib/Table/Cell.module.scss +11 -4
- package/lib/Table/EnhancedRenderers.d.ts +0 -7
- package/lib/Table/EnhancedRenderers.js +3 -14
- package/lib/Table/EnhancedRenderers.js.map +1 -1
- package/lib/Table/Header.js +9 -3
- package/lib/Table/Header.js.map +1 -1
- package/lib/Table/Header.module.scss +29 -35
- package/lib/Table/Row.js +2 -7
- package/lib/Table/Row.js.map +1 -1
- package/lib/Table/Row.module.scss +4 -10
- package/lib/Table/Table.d.ts +11 -4
- package/lib/Table/Table.js +75 -34
- package/lib/Table/Table.js.map +1 -1
- package/lib/Table/Table.module.scss +5 -5
- package/lib/Tabs/Tab.d.ts +9 -1
- package/lib/Tabs/Tab.js +5 -2
- package/lib/Tabs/Tab.js.map +1 -1
- package/lib/Tabs/Tab.module.scss +5 -1
- package/lib/Tabs/TabList.js +2 -1
- package/lib/Tabs/TabList.js.map +1 -1
- package/lib/Tabs/index.d.ts +4 -4
- package/lib/Tabs/index.js +4 -4
- package/lib/Tabs/index.js.map +1 -1
- package/lib/Terminal.js +3 -3
- package/lib/Terminal.js.map +1 -1
- package/lib/Terminal.module.scss +1 -0
- package/lib/TextArea.d.ts +4 -5
- package/lib/TextArea.js +9 -9
- package/lib/TextArea.js.map +1 -1
- package/lib/TextArea.module.scss +19 -10
- package/lib/TextAreaFormik.js +1 -1
- package/lib/TextAreaFormik.js.map +1 -1
- package/lib/TextField.d.ts +13 -23
- package/lib/TextField.js +27 -12
- package/lib/TextField.js.map +1 -1
- package/lib/TextField.module.scss +36 -34
- package/lib/TextFieldFormik.d.ts +4 -2
- package/lib/TextFieldFormik.js +15 -4
- package/lib/TextFieldFormik.js.map +1 -1
- package/lib/TimeField.d.ts +2 -11
- package/lib/TimeField.js +8 -7
- package/lib/TimeField.js.map +1 -1
- package/lib/TimeField.module.scss +6 -6
- package/lib/TimeFieldFormik.js +1 -1
- package/lib/TimeFieldFormik.js.map +1 -1
- package/lib/Toast.js.map +1 -1
- package/lib/Toggle.js +4 -3
- package/lib/Toggle.js.map +1 -1
- package/lib/Toggle.module.scss +23 -19
- package/lib/ToggleFormik.js +1 -1
- package/lib/ToggleFormik.js.map +1 -1
- package/lib/Tooltip.d.ts +9 -2
- package/lib/Tooltip.js +87 -27
- package/lib/Tooltip.js.map +1 -1
- package/lib/Tooltip.module.scss +10 -5
- package/lib/TruncatedText.d.ts +6 -3
- package/lib/TruncatedText.js +2 -2
- package/lib/TruncatedText.js.map +1 -1
- package/lib/hooks/index.d.ts +5 -0
- package/lib/hooks/index.js +7 -0
- package/lib/hooks/index.js.map +1 -0
- package/lib/hooks/useIsMounted.d.ts +1 -0
- package/lib/hooks/useIsMounted.js +12 -0
- package/lib/hooks/useIsMounted.js.map +1 -0
- package/lib/hooks/useOnClickOutside.d.ts +8 -0
- package/lib/hooks/useOnClickOutside.js +24 -0
- package/lib/hooks/useOnClickOutside.js.map +1 -0
- package/lib/hooks/useOpenCloseState.d.ts +6 -0
- package/lib/hooks/useOpenCloseState.js +14 -0
- package/lib/hooks/useOpenCloseState.js.map +1 -0
- package/lib/hooks/usePrevious.d.ts +1 -0
- package/lib/hooks/usePrevious.js +9 -0
- package/lib/hooks/usePrevious.js.map +1 -0
- package/lib/hooks/useRefValue.d.ts +1 -0
- package/lib/hooks/useRefValue.js +9 -0
- package/lib/hooks/useRefValue.js.map +1 -0
- package/lib/hooks/useTableCustomizableColumns.d.ts +9 -0
- package/lib/hooks/useTableCustomizableColumns.js +23 -0
- package/lib/hooks/useTableCustomizableColumns.js.map +1 -0
- package/lib/index.d.ts +55 -53
- package/lib/index.js +55 -53
- package/lib/index.js.map +1 -1
- package/lib/utils/test.d.ts +1 -0
- package/lib/utils/test.js +8 -0
- package/lib/utils/test.js.map +1 -0
- package/package.json +57 -50
- package/styles/constants/_animations.scss +0 -1
- package/styles/constants/_colors.scss +1 -10
- package/styles/constants/_sizes.scss +8 -26
- package/styles/constants/_typography.scss +21 -10
- package/styles/constants/export.module.scss +1 -1
- package/styles/fonts.css +14 -65
- package/styles/helpers/_a11y.scss +8 -1
- package/styles/helpers/_error.scss +17 -0
- package/styles/helpers/_index.scss +1 -0
- package/styles/helpers/_input.scss +1 -1
- package/lib/Calendar/components/CalendarHeader.tsx +0 -45
- package/lib/Calendar/components/CalendarInput.tsx +0 -50
- package/lib/Calendar/components/CalendarTime.tsx +0 -116
- package/lib/Calendar/helpers/consts.ts +0 -99
- package/lib/SelectField.d.ts +0 -81
- package/lib/SelectField.js +0 -196
- package/lib/SelectField.js.map +0 -1
- package/lib/SelectField.module.scss +0 -251
- package/lib/SelectFieldFormik.d.ts +0 -20
- package/lib/SelectFieldFormik.js +0 -19
- package/lib/SelectFieldFormik.js.map +0 -1
|
@@ -15,8 +15,10 @@
|
|
|
15
15
|
* Therefore only option 2 is left.
|
|
16
16
|
*/
|
|
17
17
|
$calendarTimeHeight: 227px;
|
|
18
|
+
|
|
18
19
|
// Note: Add padding in order to preserve button's outline
|
|
19
20
|
$outlinePreservingPadding: c.$grid * 1.25;
|
|
21
|
+
|
|
20
22
|
// Note: Button width is 98px with border-box applied
|
|
21
23
|
/* doiuse-disable calc */
|
|
22
24
|
$buttonWidth: calc(98px - 2 * #{$outlinePreservingPadding});
|
package/lib/Card.d.ts
CHANGED
package/lib/Card.js
CHANGED
|
@@ -9,11 +9,12 @@ import styles from './Card.module.scss';
|
|
|
9
9
|
* ### General Info
|
|
10
10
|
* - Card can be rendered with an optional separator and/or icon.
|
|
11
11
|
*/
|
|
12
|
-
export const Card = ({ headingIcon, title, headingContent, separator = false, 'data-test': dataTest, children, className, iconClassName, titleClassName, contentClassName, headerClassName, }) => (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'card-wrapper', className: cn(styles.wrapper, { [styles.noTitle]: !title }, className) },
|
|
12
|
+
export const Card = ({ headingIcon, title, headingContent, separator = false, 'data-test': dataTest, children, className, iconClassName, titleClassName, contentClassName, headerClassName, caption, }) => (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'card-wrapper', className: cn(styles.wrapper, { [styles.noTitle]: !title }, className) },
|
|
13
|
+
caption && React.createElement("div", { className: styles.caption }, caption),
|
|
13
14
|
title && (React.createElement("div", { "data-test": "card-heading", className: cn(styles.heading, headerClassName) },
|
|
14
15
|
headingIcon && React.createElement(Icon, { "data-test": "card-heading-icon", icon: headingIcon, className: cn(styles.icon, iconClassName), ariaHidden: true }),
|
|
15
|
-
React.createElement("h3", { "data-test": "card-heading-title", className: cn(styles.title,
|
|
16
|
+
React.createElement("h3", { "data-test": "card-heading-title", className: cn(styles.title, { [styles.space]: !!headingContent }, titleClassName) }, title),
|
|
16
17
|
headingContent)),
|
|
17
18
|
separator && React.createElement("div", { "data-test": "card-separator", className: styles.separator }),
|
|
18
|
-
React.createElement("div", { "data-test": "card-content", className: cn(styles.content, contentClassName) }, children)));
|
|
19
|
+
children && (React.createElement("div", { "data-test": "card-content", className: cn(styles.content, contentClassName) }, children))));
|
|
19
20
|
//# sourceMappingURL=Card.js.map
|
package/lib/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAgBvC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,0CAAgB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC;IAC/G,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;IAC1D,KAAK,IAAI,CACR,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC;QACzE,WAAW,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,UAAU,SAAG;QAC/H,yCAAc,oBAAoB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,CAAC,IACjH,KAAK,CACH;QACJ,cAAc,CACX,CACP;IAEA,SAAS,IAAI,0CAAe,gBAAgB,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;IAE5E,QAAQ,IAAI,CACX,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC1E,QAAQ,CACL,CACP,CACG,CACP,CAAA"}
|
package/lib/Card.module.scss
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
@use '../styles/constants' as c;
|
|
2
2
|
|
|
3
3
|
.wrapper {
|
|
4
|
-
padding: c.$grid * 5;
|
|
4
|
+
$padding: c.$grid * 5;
|
|
5
|
+
|
|
6
|
+
padding: $padding;
|
|
5
7
|
box-shadow: 0 c.$cardShadowSize c.$cardShadowBlur 0 c.$colorShadow;
|
|
6
8
|
border-radius: c.$borderRadius;
|
|
7
9
|
background: c.$colorNeutralWhite;
|
|
8
10
|
|
|
9
11
|
.heading {
|
|
10
|
-
@include c.typographyH3
|
|
12
|
+
@include c.typographyH3;
|
|
11
13
|
|
|
12
14
|
display: flex;
|
|
13
15
|
align-items: center;
|
|
14
|
-
margin-bottom: c.$grid * 4;
|
|
15
16
|
|
|
16
17
|
.icon {
|
|
17
18
|
margin-right: c.$grid * 2.5;
|
|
@@ -19,6 +20,8 @@
|
|
|
19
20
|
|
|
20
21
|
.title {
|
|
21
22
|
margin: 0;
|
|
23
|
+
font-size: c.$fontSizeBodyNormal !important;
|
|
24
|
+
line-height: c.$lineHeightBodyNormal !important;
|
|
22
25
|
|
|
23
26
|
&.space {
|
|
24
27
|
margin-right: c.$grid * 2.5;
|
|
@@ -29,7 +32,7 @@
|
|
|
29
32
|
.separator {
|
|
30
33
|
width: 100%;
|
|
31
34
|
height: 1px;
|
|
32
|
-
margin: c.$grid * 4
|
|
35
|
+
margin-top: c.$grid * 4;
|
|
33
36
|
background: c.$colorNeutral;
|
|
34
37
|
}
|
|
35
38
|
|
|
@@ -44,4 +47,13 @@
|
|
|
44
47
|
margin-top: 0;
|
|
45
48
|
}
|
|
46
49
|
}
|
|
50
|
+
|
|
51
|
+
.caption {
|
|
52
|
+
display: flex;
|
|
53
|
+
margin: (-$padding) (-$padding) $padding (-$padding);
|
|
54
|
+
|
|
55
|
+
& > * {
|
|
56
|
+
flex: 1;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
47
59
|
}
|
package/lib/Checkbox.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ChangeEvent, FC, FocusEvent, ReactElement, ReactText } from 'react';
|
|
2
2
|
import { DataTestProp } from '@hazelcast/helpers';
|
|
3
3
|
import { HelpProps } from './Help';
|
|
4
4
|
declare type CheckboxCoreProps = {
|
|
@@ -10,7 +10,7 @@ declare type CheckboxCoreProps = {
|
|
|
10
10
|
checked?: boolean;
|
|
11
11
|
};
|
|
12
12
|
export declare type CheckboxExtraProps = {
|
|
13
|
-
label
|
|
13
|
+
label?: ReactElement | ReactText;
|
|
14
14
|
helperText?: HelpProps['helperText'];
|
|
15
15
|
indeterminate?: boolean;
|
|
16
16
|
disabled?: boolean;
|
package/lib/Checkbox.js
CHANGED
|
@@ -5,6 +5,7 @@ import classNames from 'classnames';
|
|
|
5
5
|
import { Error, errorId } from './Error';
|
|
6
6
|
import { Help, helpTooltipId } from './Help';
|
|
7
7
|
import styles from './Checkbox.module.scss';
|
|
8
|
+
import { TruncatedText } from './TruncatedText';
|
|
8
9
|
/**
|
|
9
10
|
* ### Purpose
|
|
10
11
|
* Forms require input from users. If you need information that can be represented as boolean, use input with type 'checkbox'.
|
|
@@ -15,23 +16,25 @@ import styles from './Checkbox.module.scss';
|
|
|
15
16
|
* - It's important to realise that we don't set checkbox value, but state (on/off). That is the main difference from other input types.
|
|
16
17
|
* - They can have a special indeterminate state, that represents a '3rd' value, usually used in tree structures, etc.
|
|
17
18
|
*/
|
|
18
|
-
export const Checkbox = (
|
|
19
|
+
export const Checkbox = (props) => {
|
|
20
|
+
const { checked, name, onChange, onBlur, className, classNameLabel, value, indeterminate = false, label, helperText, error, disabled = false, required, 'data-test': dataTest, } = props;
|
|
19
21
|
const inputRef = useRef(null);
|
|
20
22
|
const id = useUID();
|
|
21
23
|
let ariaChecked = checked ? 'true' : 'false';
|
|
22
24
|
if (indeterminate) {
|
|
23
25
|
ariaChecked = 'mixed';
|
|
24
26
|
}
|
|
25
|
-
return (React.createElement("div", { className: className, "data-test": dataTest },
|
|
27
|
+
return (React.createElement("div", { className: classNames(className, { [styles.withError]: 'error' in props }), "data-test": dataTest },
|
|
26
28
|
React.createElement("label", { className: classNames(styles.wrapper, {
|
|
27
29
|
[styles.error]: !!error,
|
|
28
30
|
[styles.checked]: checked,
|
|
29
31
|
[styles.disabled]: disabled,
|
|
30
32
|
}, classNameLabel), htmlFor: id },
|
|
31
|
-
React.createElement("
|
|
33
|
+
label !== undefined && (React.createElement("div", { className: styles.name, "data-test": "input-checkbox-label" },
|
|
34
|
+
React.createElement(TruncatedText, { text: label }))),
|
|
32
35
|
React.createElement("input", { type: "checkbox", ref: inputRef, id: id, name: name, checked: !!checked, onChange: onChange, onBlur: onBlur, value: value, disabled: disabled, "aria-checked": ariaChecked, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id) }),
|
|
33
36
|
indeterminate ? React.createElement(Minus, { className: styles.checkmark }) : React.createElement(Check, { className: styles.checkmark }),
|
|
34
37
|
helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText })),
|
|
35
|
-
React.createElement(Error, { error: error, className: styles.errorContainer, inputId: id })));
|
|
38
|
+
React.createElement(Error, { truncated: true, error: error, className: styles.errorContainer, inputId: id })));
|
|
36
39
|
};
|
|
37
40
|
//# sourceMappingURL=Checkbox.js.map
|
package/lib/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"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"}
|
package/lib/Checkbox.module.scss
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
@use '../styles/constants' as c;
|
|
2
2
|
@use '../styles/helpers' as h;
|
|
3
|
+
@include h.withError;
|
|
3
4
|
|
|
4
5
|
.wrapper {
|
|
5
6
|
display: flex;
|
|
6
7
|
flex-direction: row;
|
|
7
8
|
cursor: pointer;
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
|
|
12
|
+
* {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
8
15
|
|
|
9
16
|
@include c.typographyBodySmall;
|
|
10
17
|
|
|
@@ -14,19 +21,26 @@
|
|
|
14
21
|
}
|
|
15
22
|
|
|
16
23
|
.helperText {
|
|
24
|
+
margin-top: c.$grid * 0.5;
|
|
17
25
|
margin-left: c.$grid * 1.5;
|
|
18
26
|
}
|
|
19
27
|
|
|
20
28
|
// default visible checkmark
|
|
21
29
|
.checkmark {
|
|
22
|
-
|
|
23
|
-
|
|
30
|
+
/* doiuse-disable calc */
|
|
31
|
+
$checkmarkSize: calc(#{c.$iconSizeSmall} + #{c.$borderWidth * 2});
|
|
32
|
+
/* doiuse-enable calc */
|
|
33
|
+
|
|
34
|
+
width: $checkmarkSize;
|
|
35
|
+
height: $checkmarkSize;
|
|
24
36
|
border: c.$borderWidth solid c.$colorNeutralLight;
|
|
25
37
|
border-radius: c.$grid;
|
|
26
38
|
color: c.$colorNeutralWhite;
|
|
39
|
+
|
|
27
40
|
// because of ~ and + selectors used below, we need to keep the current order in DOM and
|
|
28
41
|
// fix it visually with order property
|
|
29
42
|
order: -1;
|
|
43
|
+
flex-shrink: 0;
|
|
30
44
|
}
|
|
31
45
|
|
|
32
46
|
& > input:checked ~ .checkmark {
|
|
@@ -55,6 +69,7 @@
|
|
|
55
69
|
}
|
|
56
70
|
|
|
57
71
|
.name {
|
|
72
|
+
overflow: hidden;
|
|
58
73
|
padding-left: c.$grid * 1.25;
|
|
59
74
|
}
|
|
60
75
|
|
|
@@ -86,7 +101,3 @@
|
|
|
86
101
|
}
|
|
87
102
|
}
|
|
88
103
|
}
|
|
89
|
-
|
|
90
|
-
.errorContainer {
|
|
91
|
-
margin-top: c.$grid;
|
|
92
|
-
}
|
package/lib/CheckboxFormik.d.ts
CHANGED
|
@@ -5,5 +5,6 @@ import { ExtractKeysOfValueType } from './utils/types';
|
|
|
5
5
|
export declare type CheckboxFieldFormikProps<V extends object> = CheckboxExtraProps & {
|
|
6
6
|
name: ExtractKeysOfValueType<V, boolean>;
|
|
7
7
|
validate?: FieldValidatorGeneric<boolean>;
|
|
8
|
+
onChange?: (value: boolean) => void;
|
|
8
9
|
};
|
|
9
|
-
export declare const CheckboxFormik: <V extends object>({ name, validate, ...props }: CheckboxFieldFormikProps<V>) => ReactElement;
|
|
10
|
+
export declare const CheckboxFormik: <V extends object>({ name, validate, onChange, ...props }: CheckboxFieldFormikProps<V>) => ReactElement;
|
package/lib/CheckboxFormik.js
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
2
|
import { useField } from 'formik';
|
|
3
3
|
import { Checkbox } from './Checkbox';
|
|
4
4
|
import { getFieldError } from './utils/formik';
|
|
5
|
-
export const CheckboxFormik = ({ name, validate, ...props }) => {
|
|
6
|
-
const [
|
|
5
|
+
export const CheckboxFormik = ({ name, validate, onChange, ...props }) => {
|
|
6
|
+
const [{ onBlur, onChange: onFormikChange, value }, meta] = useField({
|
|
7
7
|
name,
|
|
8
8
|
validate,
|
|
9
9
|
});
|
|
10
|
-
return (React.createElement(Checkbox,
|
|
10
|
+
return (React.createElement(Checkbox, { ...props, name: name, checked: value, onChange: useCallback((e) => {
|
|
11
|
+
if (onChange) {
|
|
12
|
+
onChange(e.target.checked);
|
|
13
|
+
}
|
|
14
|
+
onFormikChange(e);
|
|
15
|
+
}, [onFormikChange, onChange]), onBlur: onBlur, error: getFieldError(meta) }));
|
|
11
16
|
};
|
|
12
17
|
//# sourceMappingURL=CheckboxFormik.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxFormik.js","sourceRoot":"","sources":["../src/CheckboxFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxFormik.js","sourceRoot":"","sources":["../src/CheckboxFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAyB,aAAa,EAAE,MAAM,gBAAgB,CAAA;AASrE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA+B,EAAgB,EAAE;IACpI,MAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QAC5E,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,OACH,KAAK,EACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;aAC3B;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,EACD,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}
|
package/lib/CodeEditor.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC, MutableRefObject, FocusEvent } from 'react';
|
|
2
|
-
import { EditorView } from '@codemirror/view';
|
|
2
|
+
import { EditorView, KeyBinding } from '@codemirror/view';
|
|
3
3
|
import { EditorState, Extension } from '@codemirror/state';
|
|
4
|
-
export { EditorView, EditorState };
|
|
4
|
+
export { EditorView, EditorState, KeyBinding };
|
|
5
5
|
export declare type CodeOptions = {
|
|
6
6
|
language?: any;
|
|
7
7
|
lineWrapping?: boolean;
|
|
@@ -20,6 +20,7 @@ export declare type CodeEditorProps = {
|
|
|
20
20
|
onChange?: OnChangeCallback;
|
|
21
21
|
onBlur?: (e: FocusEvent) => void;
|
|
22
22
|
customExtensions?: Extension[];
|
|
23
|
+
customKeymap?: KeyBinding[];
|
|
23
24
|
innerRef?: MutableRefObject<EditorViewRef | null>;
|
|
24
25
|
error?: string;
|
|
25
26
|
errorClassName?: string;
|
package/lib/CodeEditor.js
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
of use (no need to add anything to your dependencies) and also there're not many CM6 languages as of
|
|
17
17
|
writing this.
|
|
18
18
|
|
|
19
|
+
// add @codemirror/legacy-modes to your project's dependencies.
|
|
19
20
|
import { javascript } from '@codemirror/legacy-modes/mode/javascript'
|
|
20
21
|
import { python } from '@codemirror/legacy-modes/mode/python'
|
|
21
22
|
|
|
@@ -64,9 +65,8 @@ const DEFAULT_OPTIONS = {
|
|
|
64
65
|
language: null,
|
|
65
66
|
lineWrapping: false,
|
|
66
67
|
lineNumbers: true,
|
|
67
|
-
rows: 5,
|
|
68
68
|
};
|
|
69
|
-
export const CodeEditor = ({ name, value, className, options = {}, onChange, onBlur, customExtensions, innerRef, error, errorClassName, }) => {
|
|
69
|
+
export const CodeEditor = ({ name, value, className, options = {}, onChange, onBlur, customExtensions, customKeymap, innerRef, error, errorClassName, }) => {
|
|
70
70
|
const id = useUID();
|
|
71
71
|
const parentRef = useRef(null);
|
|
72
72
|
const cm = useRef(null);
|
|
@@ -91,7 +91,6 @@ export const CodeEditor = ({ name, value, className, options = {}, onChange, onB
|
|
|
91
91
|
});
|
|
92
92
|
const domEventsExtension = () => {
|
|
93
93
|
const eventHandlers = {
|
|
94
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
95
94
|
blur: (event) => onBlur && onBlur(event),
|
|
96
95
|
};
|
|
97
96
|
return EditorView.domEventHandlers(eventHandlers);
|
|
@@ -119,6 +118,7 @@ export const CodeEditor = ({ name, value, className, options = {}, onChange, onB
|
|
|
119
118
|
...commentKeymap,
|
|
120
119
|
...completionKeymap,
|
|
121
120
|
...lintKeymap,
|
|
121
|
+
...(customKeymap !== null && customKeymap !== void 0 ? customKeymap : []),
|
|
122
122
|
]),
|
|
123
123
|
];
|
|
124
124
|
const fixedHeightExtension = () => {
|
|
@@ -135,6 +135,7 @@ export const CodeEditor = ({ name, value, className, options = {}, onChange, onB
|
|
|
135
135
|
const extensions = [
|
|
136
136
|
...basicExtensions,
|
|
137
137
|
...(customExtensions !== null && customExtensions !== void 0 ? customExtensions : []),
|
|
138
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
138
139
|
...(opts.language ? [StreamLanguage.define(opts.language)] : []),
|
|
139
140
|
...(opts.lineWrapping ? [EditorView.lineWrapping] : []),
|
|
140
141
|
...(opts.lineNumbers ? [foldGutter(), lineNumbers()] : []),
|
package/lib/CodeEditor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../src/CodeEditor.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../src/CodeEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,13 +4,15 @@
|
|
|
4
4
|
.container {
|
|
5
5
|
box-shadow: 0 c.$cardShadowSize c.$cardShadowBlur 0 c.$colorShadow;
|
|
6
6
|
border-radius: c.$borderRadius;
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
:global .cm-editor {
|
|
8
9
|
// bogus padding to avoid overlapping with our outlineFormField mixin.
|
|
9
10
|
padding: 1px;
|
|
10
11
|
border-radius: c.$borderRadius;
|
|
11
12
|
border: c.$borderWidth solid c.$colorNeutralLight;
|
|
12
13
|
}
|
|
13
|
-
|
|
14
|
+
|
|
15
|
+
:global .cm-editor.cm-focused {
|
|
14
16
|
// inherited outline just looks weird, override it
|
|
15
17
|
outline: none;
|
|
16
18
|
|
|
@@ -19,6 +21,7 @@
|
|
|
19
21
|
|
|
20
22
|
border: c.$borderWidth solid c.$colorAccessibilityOutline;
|
|
21
23
|
}
|
|
24
|
+
|
|
22
25
|
:global .cm-scroller {
|
|
23
26
|
border-radius: c.$borderRadius;
|
|
24
27
|
}
|
package/lib/CodeEditorFormik.js
CHANGED
|
@@ -7,8 +7,8 @@ export const CodeEditorFormik = ({ name, validate, ...props }) => {
|
|
|
7
7
|
name,
|
|
8
8
|
validate,
|
|
9
9
|
});
|
|
10
|
-
return (React.createElement(CodeEditor,
|
|
10
|
+
return (React.createElement(CodeEditor, { ...props, name: name, value: field.value, onChange: (val) => {
|
|
11
11
|
helpers.setValue(val, false);
|
|
12
|
-
}, onBlur: field.onBlur, error: getFieldError(meta) }))
|
|
12
|
+
}, onBlur: field.onBlur, error: getFieldError(meta) }));
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=CodeEditorFormik.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditorFormik.js","sourceRoot":"","sources":["../src/CodeEditorFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAQ9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA4B,EAAgB,EAAE;IACzH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB;QAC1D,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"CodeEditorFormik.js","sourceRoot":"","sources":["../src/CodeEditorFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAQ9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA4B,EAAgB,EAAE;IACzH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB;QAC1D,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,OACL,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE;YACxB,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QAC9B,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}
|
package/lib/Dialog.js
CHANGED
|
@@ -19,15 +19,18 @@ export const Dialog = ({ modalClassName, consequences, affirmation = DIALOG_AFFI
|
|
|
19
19
|
autoFocus: !actionDangerous,
|
|
20
20
|
kind: actionDangerous ? 'danger' : 'primary',
|
|
21
21
|
...(actionDisabled &&
|
|
22
|
-
actionDisabledTooltip
|
|
22
|
+
actionDisabledTooltip ? {
|
|
23
23
|
disabled: actionDisabled,
|
|
24
24
|
disabledTooltip: actionDisabledTooltip,
|
|
25
|
+
} : {
|
|
26
|
+
disabled: undefined,
|
|
27
|
+
disabledTooltip: undefined
|
|
25
28
|
}),
|
|
26
29
|
onClick: actionOnConfirm,
|
|
27
30
|
children: actionChildren,
|
|
28
31
|
},
|
|
29
32
|
]
|
|
30
33
|
: [], [actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, actionChildren]);
|
|
31
|
-
return (React.createElement(Modal,
|
|
34
|
+
return (React.createElement(Modal, { className: cn(styles.dialog, modalClassName), headerClassName: styles.dialogHeader, bodyClassName: styles.dialogBody, contentClassName: styles.dialogConsequences, footerClassName: styles.dialogFooter, actions: actions, title: affirmation, showCloseButton: false, ...rest }, consequences));
|
|
32
35
|
};
|
|
33
36
|
//# sourceMappingURL=Dialog.js.map
|
package/lib/Dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAgC,MAAM,SAAS,CAAA;AAE7D,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,CAAC,MAAM,0BAA0B,GAAG,mCAAmC,CAAA;AAyB7E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,WAAW,GAAG,0BAA0B,EACxC,cAAc,EACd,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAA0B,OAAO,CAC5C,GAAG,EAAE,CACH,cAAc,IAAI,eAAe;QAC/B,CAAC,CAAC;YACE;gBACE,SAAS,EAAE,CAAC,eAAe;gBAC3B,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAC5C,GAAG,CAAC,cAAc;oBAChB,qBAAqB,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAgC,MAAM,SAAS,CAAA;AAE7D,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,MAAM,CAAC,MAAM,0BAA0B,GAAG,mCAAmC,CAAA;AAyB7E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,WAAW,GAAG,0BAA0B,EACxC,cAAc,EACd,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAA0B,OAAO,CAC5C,GAAG,EAAE,CACH,cAAc,IAAI,eAAe;QAC/B,CAAC,CAAC;YACE;gBACE,SAAS,EAAE,CAAC,eAAe;gBAC3B,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAC5C,GAAG,CAAC,cAAc;oBAChB,qBAAqB,CAAC,CAAC,CAAC;oBACtB,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,qBAAqB;iBACvC,CAAA,CAAC,CAAA;oBACF,QAAQ,EAAE,SAAS;oBACnB,eAAe,EAAE,SAAS;iBAC3B,CAAC;gBACF,OAAO,EAAE,eAAe;gBACxB,QAAQ,EAAE,cAAc;aACzB;SACF;QACH,CAAC,CAAC,EAAE,EACR,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,cAAc,CAAC,CAC1F,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAC5C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,aAAa,EAAE,MAAM,CAAC,UAAU,EAChC,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,EAC3C,eAAe,EAAE,MAAM,CAAC,YAAY,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,KAAK,KAClB,IAAI,IAEP,YAAY,CACP,CACT,CAAA;AACH,CAAC,CAAA"}
|
package/lib/Dialog.module.scss
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
7
|
+
|
|
7
8
|
// Note: Unset properties set by Modal
|
|
8
9
|
min-width: 0;
|
|
9
10
|
max-width: none;
|
|
@@ -35,6 +36,7 @@
|
|
|
35
36
|
flex: 1 1 auto;
|
|
36
37
|
margin: 0 !important;
|
|
37
38
|
max-width: none;
|
|
39
|
+
|
|
38
40
|
// Note: Unset border-radius for the buttons
|
|
39
41
|
border-radius: 0;
|
|
40
42
|
}
|
|
@@ -50,6 +52,7 @@
|
|
|
50
52
|
&:nth-of-type(1) {
|
|
51
53
|
border-bottom-left-radius: c.$borderRadius;
|
|
52
54
|
}
|
|
55
|
+
|
|
53
56
|
&:nth-of-type(2) {
|
|
54
57
|
border-bottom-right-radius: c.$borderRadius;
|
|
55
58
|
}
|
package/lib/EmptyState.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactChild } from 'react';
|
|
2
2
|
import { ButtonTypeAnchorProps, ButtonProps } from './Button';
|
|
3
3
|
import { IconProps } from './Icon';
|
|
4
|
+
import { DataTestProp } from '@hazelcast/helpers';
|
|
4
5
|
declare type EmptyStateSize = 'normal' | 'large';
|
|
5
6
|
declare type EmptyStateActionButton = {
|
|
6
7
|
direction?: 'vertical';
|
|
@@ -30,11 +31,12 @@ declare type EmptyStateAction = ({
|
|
|
30
31
|
size?: EmptyStateSize;
|
|
31
32
|
};
|
|
32
33
|
export declare type EmptyStateProps = {
|
|
33
|
-
title:
|
|
34
|
-
description?:
|
|
34
|
+
title: ReactChild;
|
|
35
|
+
description?: ReactChild;
|
|
35
36
|
icon: IconProps['icon'];
|
|
36
37
|
iconLabel: string;
|
|
37
|
-
|
|
38
|
+
className?: string;
|
|
39
|
+
} & EmptyStateAction & DataTestProp;
|
|
38
40
|
/**
|
|
39
41
|
* ### Purpose
|
|
40
42
|
* Sometimes users performs an action, that yields an empty result. Such cases may be first use of a feature, view with no data, user cleared view or an error state.
|
package/lib/EmptyState.js
CHANGED
|
@@ -16,18 +16,16 @@ import styles from './EmptyState.module.scss';
|
|
|
16
16
|
* - Good practice is add an action button to guide a user for the next steps to get out of the empty state.
|
|
17
17
|
* - Description helps to describe the semantics more thoroughly.
|
|
18
18
|
*/
|
|
19
|
-
export const EmptyState = ({ direction = 'vertical', size = 'normal', title, description, icon, iconLabel, ...restWActionProps }) => {
|
|
19
|
+
export const EmptyState = ({ 'data-test': dataTest, direction = 'vertical', size = 'normal', title, description, icon, iconLabel, className, ...restWActionProps }) => {
|
|
20
20
|
const { action, actionHref, actionOnClick, actionTarget, actionRel } = restWActionProps;
|
|
21
21
|
const iconSize = direction === 'vertical' && size === 'large' ? 'xlarge' : 'large';
|
|
22
|
-
return (React.createElement("div", { "data-test":
|
|
23
|
-
// Direction
|
|
22
|
+
return (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'empty-state-container', className: cn(styles.container, {
|
|
24
23
|
[styles.horizontal]: direction === 'horizontal',
|
|
25
|
-
// Size
|
|
26
24
|
[styles.large]: size === 'large',
|
|
27
|
-
}) },
|
|
25
|
+
}, className) },
|
|
28
26
|
React.createElement(Icon, { "data-test": "empty-state-icon", className: styles.icon, icon: icon, ariaLabel: iconLabel, size: iconSize }),
|
|
29
27
|
React.createElement("div", { className: styles.content },
|
|
30
|
-
React.createElement("
|
|
28
|
+
React.createElement("div", { "data-test": "empty-state-title", className: styles.title }, title),
|
|
31
29
|
description && (React.createElement("p", { "data-test": "empty-state-description", className: styles.description }, description)),
|
|
32
30
|
action ? (direction === 'horizontal' && actionHref !== undefined ? (React.createElement(Link, { "data-test": "empty-state-link", className: styles.action, icon: ChevronRight, ariaLabel: "Icon Chevron Right", href: actionHref, target: actionTarget, rel: actionRel, size: "small" }, action)) : (React.createElement(Button, { "data-test": "empty-state-button", className: styles.action, onClick: actionOnClick }, action))) : null)));
|
|
33
31
|
};
|
package/lib/EmptyState.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAsC,MAAM,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAgD7C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,WAAW,EAAE,QAAQ,EACrB,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,SAAS,EACT,GAAG,gBAAgB,EACpB,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA;IAEvF,MAAM,QAAQ,GAAG,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;IAElF,OAAO,CACL,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,uBAAuB,EAC9C,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,SAAS,KAAK,YAAY;YAC/C,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;QAC/G,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,0CAAe,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACvD,KAAK,CACF;YACL,WAAW,IAAI,CACd,wCAAa,yBAAyB,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,IACjE,WAAW,CACV,CACL;YACA,MAAM,CAAC,CAAC,CAAC,CACR,SAAS,KAAK,YAAY,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACvD,oBAAC,IAAI,iBACO,kBAAkB,EAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,IAEX,MAAM,CACF,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,iBAAW,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,IACpF,MAAM,CACA,CACV,CACF,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
justify-content: center;
|
|
7
7
|
align-items: center;
|
|
8
|
-
max-width: c.$emptyStateMaxWidth;
|
|
9
8
|
text-align: center;
|
|
10
9
|
|
|
11
10
|
.content {
|
|
12
11
|
.title {
|
|
13
12
|
margin: c.$grid * 4.5 0 0 0;
|
|
13
|
+
|
|
14
14
|
@include c.typographyBodyNormal('bold' !important);
|
|
15
15
|
}
|
|
16
16
|
|
package/lib/Error.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
+
import { TooltipProps } from './Tooltip';
|
|
2
3
|
export declare const errorId: (inputId: string) => string;
|
|
3
4
|
interface ErrorProps {
|
|
4
5
|
error?: string;
|
|
5
6
|
className?: string;
|
|
6
7
|
inputId: string;
|
|
8
|
+
truncated?: boolean;
|
|
9
|
+
tooltipPlacement?: TooltipProps['placement'];
|
|
7
10
|
}
|
|
8
11
|
export declare const Error: FC<ErrorProps>;
|
|
9
12
|
export {};
|
package/lib/Error.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
|
+
import { TruncatedText } from './TruncatedText';
|
|
3
4
|
import styles from './Error.module.scss';
|
|
4
5
|
export const errorId = (inputId) => `${inputId}-error`;
|
|
5
6
|
/* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role */
|
|
6
|
-
export const Error = ({ error, className, inputId }) => (React.createElement("div", { className: cn(styles.container, error && styles.hasError, className), role: "alert", id: errorId(inputId) }, error));
|
|
7
|
+
export const Error = ({ error, className, inputId, truncated, tooltipPlacement }) => (React.createElement("div", { className: cn(styles.container, error && styles.hasError, className), role: "alert", id: errorId(inputId) }, truncated ? React.createElement(TruncatedText, { text: error || '', tooltipPlacement: tooltipPlacement, hoverAbleTooltip: false }) : error));
|
|
7
8
|
//# sourceMappingURL=Error.js.map
|
package/lib/Error.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Error.js","sourceRoot":"","sources":["../src/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"Error.js","sourceRoot":"","sources":["../src/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,QAAQ,CAAA;AAUtE,0GAA0G;AAC1G,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CACnG,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,IACzG,SAAS,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAClH,CACP,CAAA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HelpProps } from './Help';
|
|
3
|
+
import { DataTestProp } from '@hazelcast/helpers';
|
|
4
|
+
export declare type FieldHeaderSize = 'small' | 'medium';
|
|
5
|
+
export declare type FieldHeaderLabelProps = {
|
|
6
|
+
label: string;
|
|
7
|
+
labelClassName?: string;
|
|
8
|
+
helperText?: HelpProps['helperText'];
|
|
9
|
+
};
|
|
10
|
+
export declare type FieldHeaderNoLabelProps = {
|
|
11
|
+
label: never;
|
|
12
|
+
labelClassName: never;
|
|
13
|
+
helperText: never;
|
|
14
|
+
};
|
|
15
|
+
export declare type FieldHeaderProps = {
|
|
16
|
+
size?: FieldHeaderSize;
|
|
17
|
+
id: string;
|
|
18
|
+
showAriaLabel?: boolean;
|
|
19
|
+
} & DataTestProp & (FieldHeaderNoLabelProps | FieldHeaderLabelProps);
|
|
20
|
+
export declare const FieldHeader: (props: FieldHeaderProps) => JSX.Element | null;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import { Label } from './Label';
|
|
4
|
+
import { Help } from './Help';
|
|
5
|
+
import styles from './FieldHeader.module.scss';
|
|
6
|
+
export const FieldHeader = (props) => {
|
|
7
|
+
const { label, id, helperText, size = 'medium', labelClassName, 'data-test': dataTest, showAriaLabel } = props;
|
|
8
|
+
if (showAriaLabel) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
return (React.createElement("div", { className: styles.root },
|
|
12
|
+
label && (React.createElement(Label, { id: id, label: label, "data-test": dataTest ? `${dataTest}-label` : undefined, className: cn(styles.label, { [styles.small]: size === 'small' }, labelClassName) })),
|
|
13
|
+
label && helperText && (React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText, "data-test": dataTest ? `${dataTest}-helperText` : undefined }))));
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=FieldHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldHeader.js","sourceRoot":"","sources":["../src/FieldHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAGxC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAY9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,GAAG,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAE9G,IAAI,aAAa,EAAE;QACjB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACxB,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,eACD,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,EAAE,cAAc,CAAC,GACjF,CACH;QACA,KAAK,IAAI,UAAU,IAAI,CACtB,oBAAC,IAAI,IACH,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,eACjB,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}
|