@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.
Files changed (104) hide show
  1. package/HalstackContext.d.ts +12 -0
  2. package/HalstackContext.js +298 -0
  3. package/accordion/Accordion.d.ts +1 -1
  4. package/accordion/Accordion.js +7 -28
  5. package/accordion/Accordion.stories.tsx +11 -11
  6. package/accordion/Accordion.test.js +19 -4
  7. package/accordion/types.d.ts +4 -0
  8. package/accordion-group/AccordionGroup.d.ts +1 -1
  9. package/accordion-group/AccordionGroup.js +13 -15
  10. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  11. package/accordion-group/AccordionGroup.test.js +24 -6
  12. package/accordion-group/types.d.ts +4 -0
  13. package/alert/Alert.js +4 -1
  14. package/button/Button.js +14 -11
  15. package/card/Card.js +27 -28
  16. package/checkbox/Checkbox.d.ts +1 -1
  17. package/checkbox/Checkbox.js +43 -39
  18. package/checkbox/Checkbox.stories.tsx +124 -128
  19. package/checkbox/Checkbox.test.js +13 -0
  20. package/checkbox/types.d.ts +7 -3
  21. package/common/variables.js +181 -70
  22. package/date-input/DateInput.js +38 -20
  23. package/date-input/DateInput.test.js +9 -22
  24. package/date-input/types.d.ts +12 -9
  25. package/dialog/Dialog.js +4 -32
  26. package/dropdown/Dropdown.js +13 -17
  27. package/file-input/FileInput.js +9 -6
  28. package/file-input/FileItem.js +7 -5
  29. package/footer/Footer.js +15 -88
  30. package/header/Header.js +27 -48
  31. package/header/Header.stories.tsx +46 -36
  32. package/header/Header.test.js +18 -2
  33. package/inset/types.d.ts +24 -0
  34. package/layout/ApplicationLayout.js +5 -18
  35. package/link/Link.d.ts +3 -2
  36. package/link/Link.js +65 -56
  37. package/link/Link.stories.tsx +87 -52
  38. package/link/Link.test.js +7 -15
  39. package/link/types.d.ts +8 -23
  40. package/main.d.ts +3 -2
  41. package/main.js +19 -5
  42. package/number-input/NumberInput.test.js +2 -4
  43. package/number-input/types.d.ts +13 -10
  44. package/package.json +6 -5
  45. package/paginator/Paginator.js +17 -38
  46. package/password-input/PasswordInput.js +7 -4
  47. package/password-input/PasswordInput.test.js +3 -6
  48. package/password-input/types.d.ts +14 -11
  49. package/quick-nav/QuickNav.d.ts +4 -0
  50. package/quick-nav/QuickNav.js +116 -0
  51. package/quick-nav/QuickNav.stories.tsx +237 -0
  52. package/quick-nav/types.d.ts +21 -0
  53. package/quick-nav/types.js +5 -0
  54. package/radio/Radio.js +10 -11
  55. package/radio-group/Radio.js +1 -1
  56. package/radio-group/RadioGroup.js +8 -6
  57. package/row/types.d.ts +18 -0
  58. package/select/Listbox.d.ts +4 -0
  59. package/select/Listbox.js +152 -0
  60. package/select/Option.js +1 -1
  61. package/select/Select.js +53 -139
  62. package/select/Select.stories.tsx +14 -2
  63. package/select/Select.test.js +83 -42
  64. package/select/types.d.ts +33 -11
  65. package/slider/Slider.d.ts +1 -1
  66. package/slider/Slider.js +2 -1
  67. package/slider/Slider.stories.tsx +8 -8
  68. package/slider/Slider.test.js +31 -10
  69. package/slider/types.d.ts +4 -0
  70. package/spinner/Spinner.js +1 -1
  71. package/switch/Switch.d.ts +1 -1
  72. package/switch/Switch.js +35 -19
  73. package/switch/Switch.stories.tsx +14 -14
  74. package/switch/Switch.test.js +25 -0
  75. package/switch/types.d.ts +6 -2
  76. package/tabs/Tabs.d.ts +1 -1
  77. package/tabs/Tabs.js +9 -11
  78. package/tabs/Tabs.stories.tsx +0 -8
  79. package/tabs/Tabs.test.js +26 -9
  80. package/tabs/types.d.ts +4 -0
  81. package/tag/Tag.js +5 -8
  82. package/text-input/Suggestion.d.ts +4 -0
  83. package/text-input/Suggestion.js +55 -0
  84. package/text-input/TextInput.js +48 -76
  85. package/text-input/TextInput.test.js +22 -35
  86. package/text-input/types.d.ts +27 -12
  87. package/textarea/Textarea.js +12 -23
  88. package/textarea/Textarea.test.js +10 -20
  89. package/textarea/types.d.ts +14 -11
  90. package/toggle-group/ToggleGroup.d.ts +1 -1
  91. package/toggle-group/ToggleGroup.js +5 -4
  92. package/toggle-group/ToggleGroup.stories.tsx +4 -4
  93. package/toggle-group/ToggleGroup.test.js +35 -4
  94. package/toggle-group/types.d.ts +8 -0
  95. package/useTheme.js +2 -2
  96. package/useTranslatedLabels.d.ts +2 -0
  97. package/useTranslatedLabels.js +20 -0
  98. package/wizard/Wizard.d.ts +1 -1
  99. package/wizard/Wizard.js +55 -44
  100. package/wizard/Wizard.stories.tsx +13 -23
  101. package/wizard/Wizard.test.js +36 -23
  102. package/wizard/types.d.ts +6 -2
  103. package/ThemeContext.d.ts +0 -10
  104. package/ThemeContext.js +0 -243
@@ -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]); // expect(onChange).toHaveBeenCalledWith({ value: ["11"], error: null });
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
- }); // expect(onChange).toHaveBeenCalledWith({ value: ["11", "19"], error: null });
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]); // expect(onChange).toHaveBeenCalledWith({ value: ["6", "9", "14"], error: null });
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]); // expect(onChange).toHaveBeenCalledWith({ value: ["1"], error: null });
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]); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao"], error: null });
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
- }); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao", "guadalquivir"], error: null });
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]); // expect(onChange).toHaveBeenCalledWith({ value: ["blanco", "oviedo", "duero", "ebro"], error: null });
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]); // expect(onChange).toHaveBeenCalledWith({ value: ["azul"], error: null });
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, the component will change its appearance, showing
83
- * the error below the select component. If it is not defined, the error
84
- * messages will be managed internally, but never displayed on its own.
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 null.
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: string;
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 null.
133
+ * error will not be defined.
131
134
  */
132
135
  onBlur?: (val: {
133
136
  value: string;
134
- error: string;
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: string;
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: string;
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: boolean;
186
+ isGroupedOption?: boolean;
184
187
  isLastOption: boolean;
185
188
  isSelected: boolean;
186
189
  };
187
190
  /**
188
- * Reference to the component.
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;
@@ -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
- value={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 value={65} label="Slider" helperText="Help message" showLimitsValues />
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 value={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
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
- value={20}
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
- value={40}
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 value={65} label="Slider" helperText="Help message" showLimitsValues />
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 value={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
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
- value={20}
117
+ defaultValue={20}
118
118
  minValue={0}
119
119
  maxValue={50}
120
120
  label="Slider"
@@ -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 _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
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 = _render2.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 _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
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 = _render3.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 _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
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 = _render4.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 _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
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 = _render5.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 _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
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 = _render6.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
  */
@@ -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.trackCircleColorOnDark : props.theme.trackCircleColor;
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) {
@@ -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, onChange, required, margin, size, tabIndex, }: SwitchPropsType) => JSX.Element;
3
+ declare const DxcSwitch: ({ defaultChecked, checked, value, label, labelPosition, name, disabled, optional, onChange, margin, size, tabIndex, }: SwitchPropsType) => JSX.Element;
4
4
  export default DxcSwitch;