@dxc-technology/halstack-react 0.0.0-c25d3b6 → 0.0.0-c2834c3
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/HalstackContext.d.ts +12 -0
- package/HalstackContext.js +298 -0
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +7 -28
- package/accordion/Accordion.stories.tsx +11 -11
- package/accordion/Accordion.test.js +19 -4
- package/accordion/types.d.ts +4 -0
- package/accordion-group/AccordionGroup.d.ts +1 -1
- package/accordion-group/AccordionGroup.js +13 -15
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +24 -6
- package/accordion-group/types.d.ts +4 -0
- package/alert/Alert.js +4 -1
- package/button/Button.js +14 -11
- package/card/Card.js +27 -28
- package/checkbox/Checkbox.d.ts +1 -1
- package/checkbox/Checkbox.js +43 -39
- package/checkbox/Checkbox.stories.tsx +124 -128
- package/checkbox/Checkbox.test.js +13 -0
- package/checkbox/types.d.ts +7 -3
- package/common/variables.js +181 -70
- package/date-input/DateInput.js +38 -20
- package/date-input/DateInput.test.js +9 -22
- package/date-input/types.d.ts +12 -9
- package/dialog/Dialog.js +4 -32
- package/dropdown/Dropdown.js +13 -17
- package/file-input/FileInput.js +9 -6
- package/file-input/FileItem.js +7 -5
- package/footer/Footer.js +15 -88
- package/header/Header.js +27 -48
- package/header/Header.stories.tsx +46 -36
- package/header/Header.test.js +18 -2
- package/inset/types.d.ts +24 -0
- package/layout/ApplicationLayout.js +5 -18
- package/link/Link.d.ts +3 -2
- package/link/Link.js +65 -56
- package/link/Link.stories.tsx +87 -52
- package/link/Link.test.js +7 -15
- package/link/types.d.ts +8 -23
- package/main.d.ts +3 -2
- package/main.js +19 -5
- package/number-input/NumberInput.test.js +2 -4
- package/number-input/types.d.ts +13 -10
- package/package.json +6 -5
- package/paginator/Paginator.js +17 -38
- package/password-input/PasswordInput.js +7 -4
- package/password-input/PasswordInput.test.js +3 -6
- package/password-input/types.d.ts +14 -11
- package/quick-nav/QuickNav.d.ts +4 -0
- package/quick-nav/QuickNav.js +116 -0
- package/quick-nav/QuickNav.stories.tsx +237 -0
- package/quick-nav/types.d.ts +21 -0
- package/quick-nav/types.js +5 -0
- package/radio/Radio.js +10 -11
- package/radio-group/Radio.js +1 -1
- package/radio-group/RadioGroup.js +8 -6
- package/row/types.d.ts +18 -0
- package/select/Listbox.d.ts +4 -0
- package/select/Listbox.js +152 -0
- package/select/Option.js +1 -1
- package/select/Select.js +53 -139
- package/select/Select.stories.tsx +14 -2
- package/select/Select.test.js +83 -42
- package/select/types.d.ts +33 -11
- package/slider/Slider.d.ts +1 -1
- package/slider/Slider.js +2 -1
- package/slider/Slider.stories.tsx +8 -8
- package/slider/Slider.test.js +31 -10
- package/slider/types.d.ts +4 -0
- package/spinner/Spinner.js +1 -1
- package/switch/Switch.d.ts +1 -1
- package/switch/Switch.js +35 -19
- package/switch/Switch.stories.tsx +14 -14
- package/switch/Switch.test.js +25 -0
- package/switch/types.d.ts +6 -2
- package/tabs/Tabs.d.ts +1 -1
- package/tabs/Tabs.js +9 -11
- package/tabs/Tabs.stories.tsx +0 -8
- package/tabs/Tabs.test.js +26 -9
- package/tabs/types.d.ts +4 -0
- package/tag/Tag.js +5 -8
- package/text-input/Suggestion.d.ts +4 -0
- package/text-input/Suggestion.js +55 -0
- package/text-input/TextInput.js +48 -76
- package/text-input/TextInput.test.js +22 -35
- package/text-input/types.d.ts +27 -12
- package/textarea/Textarea.js +12 -23
- package/textarea/Textarea.test.js +10 -20
- package/textarea/types.d.ts +14 -11
- package/toggle-group/ToggleGroup.d.ts +1 -1
- package/toggle-group/ToggleGroup.js +5 -4
- package/toggle-group/ToggleGroup.stories.tsx +4 -4
- package/toggle-group/ToggleGroup.test.js +35 -4
- package/toggle-group/types.d.ts +8 -0
- package/useTheme.js +2 -2
- package/useTranslatedLabels.d.ts +2 -0
- package/useTranslatedLabels.js +20 -0
- package/wizard/Wizard.d.ts +1 -1
- package/wizard/Wizard.js +55 -44
- package/wizard/Wizard.stories.tsx +13 -23
- package/wizard/Wizard.test.js +36 -23
- package/wizard/types.d.ts +6 -2
- package/ThemeContext.d.ts +0 -10
- package/ThemeContext.js +0 -243
package/select/Select.test.js
CHANGED
|
@@ -475,8 +475,7 @@ describe("Select component tests", function () {
|
|
|
475
475
|
|
|
476
476
|
expect(onChange).toHaveBeenCalled();
|
|
477
477
|
expect(onChange).toHaveBeenCalledWith({
|
|
478
|
-
value: "1"
|
|
479
|
-
error: null
|
|
478
|
+
value: "1"
|
|
480
479
|
});
|
|
481
480
|
|
|
482
481
|
_react2.fireEvent.focus(select);
|
|
@@ -485,8 +484,7 @@ describe("Select component tests", function () {
|
|
|
485
484
|
|
|
486
485
|
expect(onBlur).toHaveBeenCalled();
|
|
487
486
|
expect(onBlur).toHaveBeenCalledWith({
|
|
488
|
-
value: "1"
|
|
489
|
-
error: null
|
|
487
|
+
value: "1"
|
|
490
488
|
});
|
|
491
489
|
});
|
|
492
490
|
test("Controlled - Optional constraint", function () {
|
|
@@ -511,8 +509,7 @@ describe("Select component tests", function () {
|
|
|
511
509
|
|
|
512
510
|
expect(onBlur).toHaveBeenCalled();
|
|
513
511
|
expect(onBlur).toHaveBeenCalledWith({
|
|
514
|
-
value: ""
|
|
515
|
-
error: null
|
|
512
|
+
value: ""
|
|
516
513
|
});
|
|
517
514
|
expect(select.getAttribute("aria-invalid")).toBe("false");
|
|
518
515
|
});
|
|
@@ -581,8 +578,7 @@ describe("Select component tests", function () {
|
|
|
581
578
|
_userEvent["default"].click(getAllByRole("option")[2]);
|
|
582
579
|
|
|
583
580
|
expect(onChange).toHaveBeenCalledWith({
|
|
584
|
-
value: "3"
|
|
585
|
-
error: null
|
|
581
|
+
value: "3"
|
|
586
582
|
});
|
|
587
583
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
588
584
|
expect(getByText("Option 03")).toBeTruthy();
|
|
@@ -616,8 +612,7 @@ describe("Select component tests", function () {
|
|
|
616
612
|
_userEvent["default"].click(getAllByRole("option")[0]);
|
|
617
613
|
|
|
618
614
|
expect(onChange).toHaveBeenCalledWith({
|
|
619
|
-
value: ""
|
|
620
|
-
error: null
|
|
615
|
+
value: ""
|
|
621
616
|
});
|
|
622
617
|
expect(getAllByText("Choose an option").length).toBe(1);
|
|
623
618
|
|
|
@@ -638,8 +633,7 @@ describe("Select component tests", function () {
|
|
|
638
633
|
});
|
|
639
634
|
|
|
640
635
|
expect(onChange).toHaveBeenCalledWith({
|
|
641
|
-
value: ""
|
|
642
|
-
error: null
|
|
636
|
+
value: ""
|
|
643
637
|
});
|
|
644
638
|
expect(getAllByText("Choose an option").length).toBe(1);
|
|
645
639
|
|
|
@@ -858,8 +852,7 @@ describe("Select component tests", function () {
|
|
|
858
852
|
});
|
|
859
853
|
|
|
860
854
|
expect(onChange).toHaveBeenCalledWith({
|
|
861
|
-
value: "20"
|
|
862
|
-
error: null
|
|
855
|
+
value: "20"
|
|
863
856
|
});
|
|
864
857
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
865
858
|
expect(getByText("Option 20")).toBeTruthy();
|
|
@@ -895,8 +888,7 @@ describe("Select component tests", function () {
|
|
|
895
888
|
_userEvent["default"].click(getByRole("option"));
|
|
896
889
|
|
|
897
890
|
expect(onChange).toHaveBeenCalledWith({
|
|
898
|
-
value: "8"
|
|
899
|
-
error: null
|
|
891
|
+
value: "8"
|
|
900
892
|
});
|
|
901
893
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
902
894
|
expect(getByText("Option 08")).toBeTruthy();
|
|
@@ -1069,9 +1061,11 @@ describe("Select component tests", function () {
|
|
|
1069
1061
|
|
|
1070
1062
|
expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
|
|
1071
1063
|
|
|
1072
|
-
_userEvent["default"].click(getAllByRole("option")[10]);
|
|
1073
|
-
|
|
1064
|
+
_userEvent["default"].click(getAllByRole("option")[10]);
|
|
1074
1065
|
|
|
1066
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1067
|
+
value: ["11"]
|
|
1068
|
+
});
|
|
1075
1069
|
expect(queryByRole("listbox")).toBeTruthy();
|
|
1076
1070
|
expect(getAllByText("Option 11").length).toBe(2);
|
|
1077
1071
|
|
|
@@ -1094,9 +1088,11 @@ describe("Select component tests", function () {
|
|
|
1094
1088
|
code: "Enter",
|
|
1095
1089
|
keyCode: 13,
|
|
1096
1090
|
charCode: 13
|
|
1097
|
-
});
|
|
1098
|
-
|
|
1091
|
+
});
|
|
1099
1092
|
|
|
1093
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1094
|
+
value: ["11", "19"]
|
|
1095
|
+
});
|
|
1100
1096
|
expect(queryByRole("listbox")).toBeTruthy();
|
|
1101
1097
|
expect(getByText("Option 11, Option 19")).toBeTruthy();
|
|
1102
1098
|
expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
|
|
@@ -1128,9 +1124,11 @@ describe("Select component tests", function () {
|
|
|
1128
1124
|
|
|
1129
1125
|
_userEvent["default"].click(getAllByRole("option")[8]);
|
|
1130
1126
|
|
|
1131
|
-
_userEvent["default"].click(getAllByRole("option")[13]);
|
|
1132
|
-
|
|
1127
|
+
_userEvent["default"].click(getAllByRole("option")[13]);
|
|
1133
1128
|
|
|
1129
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1130
|
+
value: ["6", "9", "14"]
|
|
1131
|
+
});
|
|
1134
1132
|
expect(queryByRole("listbox")).toBeTruthy();
|
|
1135
1133
|
expect(getByText("Option 06, Option 09, Option 14")).toBeTruthy();
|
|
1136
1134
|
expect(getByText("3", {
|
|
@@ -1139,6 +1137,10 @@ describe("Select component tests", function () {
|
|
|
1139
1137
|
|
|
1140
1138
|
_userEvent["default"].click(getByTitle("Clear selection"));
|
|
1141
1139
|
|
|
1140
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1141
|
+
value: [],
|
|
1142
|
+
error: "This field is required. Please, enter a value."
|
|
1143
|
+
});
|
|
1142
1144
|
expect(queryByRole("listbox")).toBeTruthy();
|
|
1143
1145
|
expect(queryByText("Option 06, Option 09, Option 14")).toBeFalsy();
|
|
1144
1146
|
expect(queryByText("3")).toBeFalsy();
|
|
@@ -1168,9 +1170,11 @@ describe("Select component tests", function () {
|
|
|
1168
1170
|
expect(getAllByText("Choose an option").length).toBe(1);
|
|
1169
1171
|
expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
|
|
1170
1172
|
|
|
1171
|
-
_userEvent["default"].click(getAllByRole("option")[0]);
|
|
1172
|
-
|
|
1173
|
+
_userEvent["default"].click(getAllByRole("option")[0]);
|
|
1173
1174
|
|
|
1175
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1176
|
+
value: ["1"]
|
|
1177
|
+
});
|
|
1174
1178
|
expect(getAllByText("Option 01").length).toBe(2);
|
|
1175
1179
|
});
|
|
1176
1180
|
test("Non-Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
|
|
@@ -1398,8 +1402,7 @@ describe("Select component tests", function () {
|
|
|
1398
1402
|
_userEvent["default"].click(getAllByRole("option")[8]);
|
|
1399
1403
|
|
|
1400
1404
|
expect(onChange).toHaveBeenCalledWith({
|
|
1401
|
-
value: "oviedo"
|
|
1402
|
-
error: null
|
|
1405
|
+
value: "oviedo"
|
|
1403
1406
|
});
|
|
1404
1407
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
1405
1408
|
expect(getByText("Oviedo")).toBeTruthy();
|
|
@@ -1433,8 +1436,7 @@ describe("Select component tests", function () {
|
|
|
1433
1436
|
_userEvent["default"].click(getAllByRole("option")[0]);
|
|
1434
1437
|
|
|
1435
1438
|
expect(onChange).toHaveBeenCalledWith({
|
|
1436
|
-
value: ""
|
|
1437
|
-
error: null
|
|
1439
|
+
value: ""
|
|
1438
1440
|
});
|
|
1439
1441
|
expect(getAllByText("Placeholder example").length).toBe(1);
|
|
1440
1442
|
|
|
@@ -1455,8 +1457,7 @@ describe("Select component tests", function () {
|
|
|
1455
1457
|
});
|
|
1456
1458
|
|
|
1457
1459
|
expect(onChange).toHaveBeenCalledWith({
|
|
1458
|
-
value: ""
|
|
1459
|
-
error: null
|
|
1460
|
+
value: ""
|
|
1460
1461
|
});
|
|
1461
1462
|
expect(getAllByText("Placeholder example").length).toBe(1);
|
|
1462
1463
|
|
|
@@ -1660,8 +1661,7 @@ describe("Select component tests", function () {
|
|
|
1660
1661
|
});
|
|
1661
1662
|
|
|
1662
1663
|
expect(onChange).toHaveBeenCalledWith({
|
|
1663
|
-
value: "ebro"
|
|
1664
|
-
error: null
|
|
1664
|
+
value: "ebro"
|
|
1665
1665
|
});
|
|
1666
1666
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
1667
1667
|
expect(getByText("Ebro")).toBeTruthy();
|
|
@@ -1703,8 +1703,7 @@ describe("Select component tests", function () {
|
|
|
1703
1703
|
_userEvent["default"].click(getAllByRole("option")[4]);
|
|
1704
1704
|
|
|
1705
1705
|
expect(onChange).toHaveBeenCalledWith({
|
|
1706
|
-
value: "ebro"
|
|
1707
|
-
error: null
|
|
1706
|
+
value: "ebro"
|
|
1708
1707
|
});
|
|
1709
1708
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
1710
1709
|
expect(getByText("Ebro")).toBeTruthy();
|
|
@@ -1762,9 +1761,11 @@ describe("Select component tests", function () {
|
|
|
1762
1761
|
|
|
1763
1762
|
expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
|
|
1764
1763
|
|
|
1765
|
-
_userEvent["default"].click(getAllByRole("option")[10]);
|
|
1766
|
-
|
|
1764
|
+
_userEvent["default"].click(getAllByRole("option")[10]);
|
|
1767
1765
|
|
|
1766
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1767
|
+
value: ["bilbao"]
|
|
1768
|
+
});
|
|
1768
1769
|
expect(queryByRole("listbox")).toBeTruthy();
|
|
1769
1770
|
expect(getAllByText("Bilbao").length).toBe(2);
|
|
1770
1771
|
|
|
@@ -1787,9 +1788,11 @@ describe("Select component tests", function () {
|
|
|
1787
1788
|
code: "Enter",
|
|
1788
1789
|
keyCode: 13,
|
|
1789
1790
|
charCode: 13
|
|
1790
|
-
});
|
|
1791
|
-
|
|
1791
|
+
});
|
|
1792
1792
|
|
|
1793
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1794
|
+
value: ["bilbao", "guadalquivir"]
|
|
1795
|
+
});
|
|
1793
1796
|
expect(queryByRole("listbox")).toBeTruthy();
|
|
1794
1797
|
expect(getByText("Bilbao, Guadalquivir")).toBeTruthy();
|
|
1795
1798
|
expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
|
|
@@ -1823,9 +1826,11 @@ describe("Select component tests", function () {
|
|
|
1823
1826
|
|
|
1824
1827
|
_userEvent["default"].click(getAllByRole("option")[13]);
|
|
1825
1828
|
|
|
1826
|
-
_userEvent["default"].click(getAllByRole("option")[17]);
|
|
1827
|
-
|
|
1829
|
+
_userEvent["default"].click(getAllByRole("option")[17]);
|
|
1828
1830
|
|
|
1831
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1832
|
+
value: ["blanco", "oviedo", "duero", "ebro"]
|
|
1833
|
+
});
|
|
1829
1834
|
expect(queryByRole("listbox")).toBeTruthy();
|
|
1830
1835
|
expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
|
|
1831
1836
|
expect(getByText("4", {
|
|
@@ -1863,9 +1868,11 @@ describe("Select component tests", function () {
|
|
|
1863
1868
|
expect(getAllByText("Choose an option").length).toBe(1);
|
|
1864
1869
|
expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
|
|
1865
1870
|
|
|
1866
|
-
_userEvent["default"].click(getAllByRole("option")[0]);
|
|
1867
|
-
|
|
1871
|
+
_userEvent["default"].click(getAllByRole("option")[0]);
|
|
1868
1872
|
|
|
1873
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1874
|
+
value: ["azul"]
|
|
1875
|
+
});
|
|
1869
1876
|
expect(getAllByText("Azul").length).toBe(2);
|
|
1870
1877
|
});
|
|
1871
1878
|
test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
|
|
@@ -2013,4 +2020,38 @@ describe("Select component tests", function () {
|
|
|
2013
2020
|
|
|
2014
2021
|
expect(getByText("Azul")).toBeTruthy();
|
|
2015
2022
|
});
|
|
2023
|
+
test("Multiple selection and optional - Clear action cleans every selected option but does not display an error", function () {
|
|
2024
|
+
var onChange = jest.fn();
|
|
2025
|
+
|
|
2026
|
+
var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
|
|
2027
|
+
label: "test-select-label",
|
|
2028
|
+
options: single_options,
|
|
2029
|
+
onChange: onChange,
|
|
2030
|
+
multiple: true,
|
|
2031
|
+
optional: true
|
|
2032
|
+
})),
|
|
2033
|
+
getByRole = _render53.getByRole,
|
|
2034
|
+
getAllByRole = _render53.getAllByRole,
|
|
2035
|
+
getByTitle = _render53.getByTitle;
|
|
2036
|
+
|
|
2037
|
+
var select = getByRole("combobox");
|
|
2038
|
+
|
|
2039
|
+
_userEvent["default"].click(select);
|
|
2040
|
+
|
|
2041
|
+
_userEvent["default"].click(getAllByRole("option")[5]);
|
|
2042
|
+
|
|
2043
|
+
_userEvent["default"].click(getAllByRole("option")[8]);
|
|
2044
|
+
|
|
2045
|
+
_userEvent["default"].click(getAllByRole("option")[13]);
|
|
2046
|
+
|
|
2047
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
2048
|
+
value: ["6", "9", "14"]
|
|
2049
|
+
});
|
|
2050
|
+
|
|
2051
|
+
_userEvent["default"].click(getByTitle("Clear selection"));
|
|
2052
|
+
|
|
2053
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
2054
|
+
value: []
|
|
2055
|
+
});
|
|
2056
|
+
});
|
|
2016
2057
|
});
|
package/select/types.d.ts
CHANGED
|
@@ -79,9 +79,12 @@ declare type CommonProps = {
|
|
|
79
79
|
*/
|
|
80
80
|
searchable?: boolean;
|
|
81
81
|
/**
|
|
82
|
-
* If it is defined
|
|
83
|
-
* the error below the select component.
|
|
84
|
-
*
|
|
82
|
+
* If it is a defined value and also a truthy string, the component will
|
|
83
|
+
* change its appearance, showing the error below the select component.
|
|
84
|
+
* If the defined value is an empty string, it will reserve a space below
|
|
85
|
+
* the component for a future error, but it would not change its look. In
|
|
86
|
+
* case of being undefined or null, both the appearance and the space for
|
|
87
|
+
* the error message would not be modified.
|
|
85
88
|
*/
|
|
86
89
|
error?: string;
|
|
87
90
|
/**
|
|
@@ -117,21 +120,21 @@ declare type SingleSelect = CommonProps & {
|
|
|
117
120
|
/**
|
|
118
121
|
* This function will be called when the user selects an option.
|
|
119
122
|
* An object including the current value and the error (if the value entered is not valid)
|
|
120
|
-
* will be passed to this function. If there is no error, error will be
|
|
123
|
+
* will be passed to this function. If there is no error, error will not be defined.
|
|
121
124
|
*/
|
|
122
125
|
onChange?: (val: {
|
|
123
126
|
value: string;
|
|
124
|
-
error
|
|
127
|
+
error?: string;
|
|
125
128
|
}) => void;
|
|
126
129
|
/**
|
|
127
130
|
* This function will be called when the select loses the focus. An
|
|
128
131
|
* object including the value and the error (if the value
|
|
129
132
|
* selected is not valid) will be passed to this function. If there is no error,
|
|
130
|
-
* error will be
|
|
133
|
+
* error will not be defined.
|
|
131
134
|
*/
|
|
132
135
|
onBlur?: (val: {
|
|
133
136
|
value: string;
|
|
134
|
-
error
|
|
137
|
+
error?: string;
|
|
135
138
|
}) => void;
|
|
136
139
|
};
|
|
137
140
|
declare type MultipleSelect = CommonProps & {
|
|
@@ -157,7 +160,7 @@ declare type MultipleSelect = CommonProps & {
|
|
|
157
160
|
*/
|
|
158
161
|
onChange?: (val: {
|
|
159
162
|
value: string[];
|
|
160
|
-
error
|
|
163
|
+
error?: string;
|
|
161
164
|
}) => void;
|
|
162
165
|
/**
|
|
163
166
|
* This function will be called when the select loses the focus. An
|
|
@@ -167,7 +170,7 @@ declare type MultipleSelect = CommonProps & {
|
|
|
167
170
|
*/
|
|
168
171
|
onBlur?: (val: {
|
|
169
172
|
value: string[];
|
|
170
|
-
error
|
|
173
|
+
error?: string;
|
|
171
174
|
}) => void;
|
|
172
175
|
};
|
|
173
176
|
declare type Props = SingleSelect | MultipleSelect;
|
|
@@ -180,12 +183,31 @@ export declare type OptionProps = {
|
|
|
180
183
|
onClick: (option: Option) => void;
|
|
181
184
|
multiple: boolean;
|
|
182
185
|
visualFocused: boolean;
|
|
183
|
-
isGroupedOption
|
|
186
|
+
isGroupedOption?: boolean;
|
|
184
187
|
isLastOption: boolean;
|
|
185
188
|
isSelected: boolean;
|
|
186
189
|
};
|
|
187
190
|
/**
|
|
188
|
-
*
|
|
191
|
+
* Listbox from the select component.
|
|
192
|
+
*/
|
|
193
|
+
export declare type ListboxProps = {
|
|
194
|
+
id: string;
|
|
195
|
+
currentValue: string | string[];
|
|
196
|
+
options: Option[] | OptionGroup[];
|
|
197
|
+
visualFocusIndex: number;
|
|
198
|
+
lastOptionIndex: number;
|
|
199
|
+
multiple: boolean;
|
|
200
|
+
optional: boolean;
|
|
201
|
+
optionalItem: Option;
|
|
202
|
+
searchable: boolean;
|
|
203
|
+
handleOptionOnClick: (option: Option) => void;
|
|
204
|
+
};
|
|
205
|
+
/**
|
|
206
|
+
* Reference to the listbox component.
|
|
207
|
+
*/
|
|
208
|
+
export declare type ListboxRefType = HTMLUListElement;
|
|
209
|
+
/**
|
|
210
|
+
* Reference to the select component.
|
|
189
211
|
*/
|
|
190
212
|
export declare type RefType = HTMLDivElement;
|
|
191
213
|
export default Props;
|
package/slider/Slider.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import SliderPropsType from "./types";
|
|
3
|
-
declare const DxcSlider: ({ label, name, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
|
|
3
|
+
declare const DxcSlider: ({ label, name, defaultValue, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
|
|
4
4
|
export default DxcSlider;
|
package/slider/Slider.js
CHANGED
|
@@ -44,6 +44,7 @@ var DxcSlider = function DxcSlider(_ref) {
|
|
|
44
44
|
label = _ref$label === void 0 ? "" : _ref$label,
|
|
45
45
|
_ref$name = _ref.name,
|
|
46
46
|
name = _ref$name === void 0 ? "" : _ref$name,
|
|
47
|
+
defaultValue = _ref.defaultValue,
|
|
47
48
|
value = _ref.value,
|
|
48
49
|
_ref$helperText = _ref.helperText,
|
|
49
50
|
helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
|
|
@@ -68,7 +69,7 @@ var DxcSlider = function DxcSlider(_ref) {
|
|
|
68
69
|
_ref$size = _ref.size,
|
|
69
70
|
size = _ref$size === void 0 ? "fillParent" : _ref$size;
|
|
70
71
|
|
|
71
|
-
var _useState = (0, _react.useState)(0),
|
|
72
|
+
var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0),
|
|
72
73
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
73
74
|
innerValue = _useState2[0],
|
|
74
75
|
setInnerValue = _useState2[1];
|
|
@@ -37,7 +37,7 @@ export const Chromatic = () => (
|
|
|
37
37
|
label="Slider"
|
|
38
38
|
helperText="Help message"
|
|
39
39
|
disabled
|
|
40
|
-
|
|
40
|
+
defaultValue={40}
|
|
41
41
|
minValue={0}
|
|
42
42
|
maxValue={50}
|
|
43
43
|
showLimitsValues
|
|
@@ -49,16 +49,16 @@ export const Chromatic = () => (
|
|
|
49
49
|
<Title title="Variants" theme="light" level={2} />
|
|
50
50
|
<ExampleContainer>
|
|
51
51
|
<Title title="Continuous slider" theme="light" level={4} />
|
|
52
|
-
<DxcSlider
|
|
52
|
+
<DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
|
|
53
53
|
</ExampleContainer>
|
|
54
54
|
<ExampleContainer>
|
|
55
55
|
<Title title="Discrete slider" theme="light" level={4} />
|
|
56
|
-
<DxcSlider
|
|
56
|
+
<DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
|
|
57
57
|
</ExampleContainer>
|
|
58
58
|
<ExampleContainer>
|
|
59
59
|
<Title title="Discrete slider with input" theme="light" level={4} />
|
|
60
60
|
<DxcSlider
|
|
61
|
-
|
|
61
|
+
defaultValue={20}
|
|
62
62
|
minValue={0}
|
|
63
63
|
maxValue={50}
|
|
64
64
|
label="Slider"
|
|
@@ -94,7 +94,7 @@ export const Chromatic = () => (
|
|
|
94
94
|
label="Slider"
|
|
95
95
|
helperText="Help message"
|
|
96
96
|
disabled
|
|
97
|
-
|
|
97
|
+
defaultValue={40}
|
|
98
98
|
minValue={0}
|
|
99
99
|
maxValue={50}
|
|
100
100
|
showLimitsValues
|
|
@@ -105,16 +105,16 @@ export const Chromatic = () => (
|
|
|
105
105
|
</ExampleContainer>
|
|
106
106
|
<ExampleContainer>
|
|
107
107
|
<Title title="Continuous slider" theme="dark" level={4} />
|
|
108
|
-
<DxcSlider
|
|
108
|
+
<DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
|
|
109
109
|
</ExampleContainer>
|
|
110
110
|
<ExampleContainer>
|
|
111
111
|
<Title title="Discrete slider" theme="dark" level={4} />
|
|
112
|
-
<DxcSlider
|
|
112
|
+
<DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
|
|
113
113
|
</ExampleContainer>
|
|
114
114
|
<ExampleContainer>
|
|
115
115
|
<Title title="Discrete slider with input" theme="dark" level={4} />
|
|
116
116
|
<DxcSlider
|
|
117
|
-
|
|
117
|
+
defaultValue={20}
|
|
118
118
|
minValue={0}
|
|
119
119
|
maxValue={50}
|
|
120
120
|
label="Slider"
|
package/slider/Slider.test.js
CHANGED
|
@@ -20,10 +20,25 @@ describe("Slider component tests", function () {
|
|
|
20
20
|
expect(getByText("0")).toBeTruthy();
|
|
21
21
|
expect(getByText("100")).toBeTruthy();
|
|
22
22
|
});
|
|
23
|
+
test("Slider renders with correct initial value when it is uncontrolled", function () {
|
|
24
|
+
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
|
|
25
|
+
defaultValue: 30,
|
|
26
|
+
minValue: 0,
|
|
27
|
+
maxValue: 100,
|
|
28
|
+
showLimitsValues: true,
|
|
29
|
+
showInput: true
|
|
30
|
+
})),
|
|
31
|
+
getByRole = _render2.getByRole;
|
|
32
|
+
|
|
33
|
+
var slider = getByRole("slider");
|
|
34
|
+
var input = getByRole("textbox");
|
|
35
|
+
expect(slider.getAttribute("aria-valuenow")).toBe("30");
|
|
36
|
+
expect(input.value).toBe("30");
|
|
37
|
+
});
|
|
23
38
|
test("Calls correct function onChange in controlled slider", function () {
|
|
24
39
|
var onChange = jest.fn();
|
|
25
40
|
|
|
26
|
-
var
|
|
41
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
|
|
27
42
|
minValue: 0,
|
|
28
43
|
maxValue: 100,
|
|
29
44
|
onChange: onChange,
|
|
@@ -31,8 +46,10 @@ describe("Slider component tests", function () {
|
|
|
31
46
|
value: 13,
|
|
32
47
|
showInput: true
|
|
33
48
|
})),
|
|
34
|
-
getByRole =
|
|
49
|
+
getByRole = _render3.getByRole;
|
|
35
50
|
|
|
51
|
+
expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
|
|
52
|
+
expect(getByRole("textbox").value).toBe("13");
|
|
36
53
|
(0, _react2.act)(function () {
|
|
37
54
|
_react2.fireEvent.change(getByRole("textbox"), {
|
|
38
55
|
target: {
|
|
@@ -41,18 +58,20 @@ describe("Slider component tests", function () {
|
|
|
41
58
|
});
|
|
42
59
|
});
|
|
43
60
|
expect(onChange).toHaveBeenCalledWith(25);
|
|
61
|
+
expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
|
|
62
|
+
expect(getByRole("textbox").value).toBe("13");
|
|
44
63
|
});
|
|
45
64
|
test("Calls correct function onChange in uncontrolled slider", function () {
|
|
46
65
|
var onChange = jest.fn();
|
|
47
66
|
|
|
48
|
-
var
|
|
67
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
|
|
49
68
|
minValue: 0,
|
|
50
69
|
maxValue: 100,
|
|
51
70
|
onChange: onChange,
|
|
52
71
|
showLimitsValues: true,
|
|
53
72
|
showInput: true
|
|
54
73
|
})),
|
|
55
|
-
getByRole =
|
|
74
|
+
getByRole = _render4.getByRole;
|
|
56
75
|
|
|
57
76
|
(0, _react2.act)(function () {
|
|
58
77
|
_react2.fireEvent.change(getByRole("textbox"), {
|
|
@@ -62,11 +81,13 @@ describe("Slider component tests", function () {
|
|
|
62
81
|
});
|
|
63
82
|
});
|
|
64
83
|
expect(onChange).toHaveBeenCalledWith(25);
|
|
84
|
+
expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("25");
|
|
85
|
+
expect(getByRole("textbox").value).toBe("25");
|
|
65
86
|
});
|
|
66
87
|
test("Disabled slider have disabled input", function () {
|
|
67
88
|
var onChange = jest.fn();
|
|
68
89
|
|
|
69
|
-
var
|
|
90
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
|
|
70
91
|
minValue: 0,
|
|
71
92
|
maxValue: 100,
|
|
72
93
|
onChange: onChange,
|
|
@@ -75,7 +96,7 @@ describe("Slider component tests", function () {
|
|
|
75
96
|
showInput: true,
|
|
76
97
|
value: 13
|
|
77
98
|
})),
|
|
78
|
-
getByRole =
|
|
99
|
+
getByRole = _render5.getByRole;
|
|
79
100
|
|
|
80
101
|
(0, _react2.act)(function () {
|
|
81
102
|
_react2.fireEvent.change(getByRole("textbox"), {
|
|
@@ -90,7 +111,7 @@ describe("Slider component tests", function () {
|
|
|
90
111
|
test("Calls correct function onDragEnd", function () {
|
|
91
112
|
var onDragEnd = jest.fn();
|
|
92
113
|
|
|
93
|
-
var
|
|
114
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
|
|
94
115
|
minValue: 0,
|
|
95
116
|
maxValue: 100,
|
|
96
117
|
showLimitsValues: true,
|
|
@@ -98,7 +119,7 @@ describe("Slider component tests", function () {
|
|
|
98
119
|
onDragEnd: onDragEnd,
|
|
99
120
|
value: 25
|
|
100
121
|
})),
|
|
101
|
-
getByRole =
|
|
122
|
+
getByRole = _render6.getByRole;
|
|
102
123
|
|
|
103
124
|
(0, _react2.act)(function () {
|
|
104
125
|
_react2.fireEvent.mouseDown(getByRole("slider"));
|
|
@@ -112,7 +133,7 @@ describe("Slider component tests", function () {
|
|
|
112
133
|
return "".concat(x, "$");
|
|
113
134
|
});
|
|
114
135
|
|
|
115
|
-
var
|
|
136
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
|
|
116
137
|
minValue: 0,
|
|
117
138
|
maxValue: 100,
|
|
118
139
|
showLimitsValues: true,
|
|
@@ -120,7 +141,7 @@ describe("Slider component tests", function () {
|
|
|
120
141
|
value: 25,
|
|
121
142
|
labelFormatCallback: labelFormatCallback
|
|
122
143
|
})),
|
|
123
|
-
getByText =
|
|
144
|
+
getByText = _render7.getByText;
|
|
124
145
|
|
|
125
146
|
expect(getByText("0$")).toBeTruthy();
|
|
126
147
|
expect(getByText("100$")).toBeTruthy();
|
package/slider/types.d.ts
CHANGED
|
@@ -14,6 +14,10 @@ declare type Props = {
|
|
|
14
14
|
* Name attribute of the input element.
|
|
15
15
|
*/
|
|
16
16
|
name?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Initial value of the slider, only when it is uncontrolled.
|
|
19
|
+
*/
|
|
20
|
+
defaultValue?: number;
|
|
17
21
|
/**
|
|
18
22
|
* The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
|
|
19
23
|
*/
|
package/spinner/Spinner.js
CHANGED
|
@@ -199,7 +199,7 @@ var SVGSpinner = _styledComponents["default"].svg(_templateObject8 || (_template
|
|
|
199
199
|
var CircleSpinner = _styledComponents["default"].circle(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n fill: transparent;\n stroke-linecap: initial;\n vector-effect: non-scaling-stroke;\n animation: ", ";\n stroke: ", ";\n transform-origin: ", ";\n stroke-dasharray: ", ";\n stroke-width: ", ";\n stroke-dashoffset: ", ";\n"])), function (props) {
|
|
200
200
|
return props.isDeterminated ? "none" : props.mode !== "small" ? "1.4s ease-in-out infinite both svg-circle-large" : "1.4s ease-in-out infinite both svg-circle-small";
|
|
201
201
|
}, function (props) {
|
|
202
|
-
return props.backgroundType === "dark" ? props.theme.
|
|
202
|
+
return props.backgroundType === "dark" || props.mode === "overlay" ? props.theme.trackCircleColorOverlay : props.theme.trackCircleColor;
|
|
203
203
|
}, function (props) {
|
|
204
204
|
return !props.isDeterminated ? "50% 50%" : "";
|
|
205
205
|
}, function (props) {
|
package/switch/Switch.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import SwitchPropsType from "./types";
|
|
3
|
-
declare const DxcSwitch: ({ checked, value, label, labelPosition, name, disabled,
|
|
3
|
+
declare const DxcSwitch: ({ defaultChecked, checked, value, label, labelPosition, name, disabled, optional, onChange, margin, size, tabIndex, }: SwitchPropsType) => JSX.Element;
|
|
4
4
|
export default DxcSwitch;
|