@dxc-technology/halstack-react 9.1.0 → 10.1.0

package/toggle-group/ToggleGroup.js

@@ -27,7 +27,9 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -47,17 +49,17 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var colorsTheme = (0, _useTheme["default"])();
 
-  var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedValue = _useState2[0],
-      setSelectedValue = _useState2[1];
+  var _useState = (0, _react.useState)("label-toggle-group-".concat((0, _uuid.v4)())),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      toggleGroupLabelId = _useState2[0];
 
-  var _useState3 = (0, _react.useState)("toggle-group-".concat((0, _uuid.v4)())),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
-      toggleGroupId = _useState4[0];
+  var _useState3 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedValue = _useState4[0],
+      setSelectedValue = _useState4[1];
 
+  var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
 
   var handleToggleChange = function handleToggleChange(selectedOption) {
@@ -93,9 +95,13 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? newSelectedOptions : selectedOption);
   };
 
-  var handleKeyPress = function handleKeyPress(event, optionValue) {
-    event.preventDefault();
-    if (!disabled && (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "Space")) handleToggleChange(optionValue);
+  var handleOnKeyDown = function handleOnKeyDown(event, optionValue) {
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        handleToggleChange(optionValue);
+    }
   };
 
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
@@ -103,40 +109,53 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(ToggleGroup, {
     margin: margin
   }, /*#__PURE__*/_react["default"].createElement(Label, {
-    htmlFor: toggleGroupId,
+    id: toggleGroupLabelId,
     disabled: disabled
   }, label), /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(OptionsContainer, {
-    id: toggleGroupId,
-    role: multiple ? "group" : "radiogroup"
+    "aria-labelledby": toggleGroupLabelId
   }, options.map(function (option, i) {
-    return /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
-      selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
-      role: multiple ? "switch" : "radio",
-      backgroundType: backgroundType,
-      "aria-checked": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
-      tabIndex: !disabled ? tabIndex : -1,
+    return /*#__PURE__*/_react["default"].createElement(ToggleButton, {
+      key: "toggle-".concat(i, "-").concat(option.label),
+      "aria-label": option.title,
+      "aria-pressed": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      disabled: disabled,
       onClick: function onClick() {
-        return !disabled && handleToggleChange(option.value);
+        handleToggleChange(option.value);
       },
-      isLast: i === options.length - 1,
-      isIcon: option.icon,
-      optionLabel: option.label,
-      disabled: disabled,
-      onKeyPress: function onKeyPress(event) {
-        handleKeyPress(event, option.value);
+      onKeyDown: function onKeyDown(event) {
+        handleOnKeyDown(event, option.value);
       },
-      key: "toggle-".concat(i, "-").concat(option.label)
-    }, /*#__PURE__*/_react["default"].createElement(OptionContent, null, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      tabIndex: !disabled ? tabIndex : -1,
+      title: option.title,
+      backgroundType: backgroundType,
+      hasIcon: option.icon,
+      optionLabel: option.label,
+      selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue
+    }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+      alignItems: "center"
+    }, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
       optionLabel: option.label
-    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
+    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
       src: option.icon
     }) : option.icon), option.label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, option.label)));
   }))));
 };
 
-var Label = _styledComponents["default"].label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var ToggleGroup = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: column;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
+});
+
+var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.labelFontFamily;
@@ -150,7 +169,7 @@ var Label = _styledComponents["default"].label(_templateObject || (_templateObje
   return props.theme.labelLineHeight;
 });
 
-var HelperText = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var HelperText = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledHelperTextFontcolor : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.helperTextFontFamily;
@@ -164,19 +183,7 @@ var HelperText = _styledComponents["default"].span(_templateObject2 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var ToggleGroup = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: column;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-});
-
-var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  opacity: 1;\n  height: calc(48px - 4px - 4px);\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  background-color: ", ";\n  padding: 4px;\n  margin-top: ", ";\n"])), function (props) {
+var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  gap: 0.25rem;\n  width: max-content;\n  height: calc(48px - 4px - 4px);\n  padding: 0.25rem;\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  margin-top: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.theme.containerBorderThickness;
 }, function (props) {
   return props.theme.containerBorderStyle;
@@ -184,16 +191,36 @@ var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_te
   return props.theme.containerBorderRadius;
 }, function (props) {
   return props.theme.containerBorderColor;
-}, function (props) {
-  return props.theme.containerBackgroundColor;
 }, function (props) {
   return props.theme.containerMarginTop;
+}, function (props) {
+  return props.theme.containerBackgroundColor;
 });
 
-var ToggleContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-right: ", ";\n\n  ", "\n"])), function (props) {
-  return !props.isLast && "4px";
+var ToggleButton = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: #ffffff;\n  }\n  &:focus {\n    outline: none;\n    box-shadow: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (props) {
+  return props.optionLabel && props.hasIcon || props.optionLabel && !props.hasIcon ? props.theme.labelPaddingLeft : props.theme.iconPaddingLeft;
 }, function (props) {
-  return "\n    background-color: ".concat(props.selected ? props.disabled ? props.theme.selectedDisabledBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.unselectedDisabledBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    border-width: ").concat(props.theme.optionBorderThickness, ";\n    border-style: ").concat(props.theme.optionBorderStyle, ";\n    border-radius: ").concat(props.theme.optionBorderRadius, ";\n    padding-left: ").concat(props.optionLabel && props.isIcon || props.optionLabel && !props.isIcon ? props.theme.labelPaddingLeft : props.theme.iconPaddingLeft, ";\n    padding-right: ").concat(props.optionLabel && props.isIcon || props.optionLabel && !props.isIcon ? props.theme.labelPaddingRight : props.theme.iconPaddingRight, ";\n    ").concat(!props.disabled ? ":hover {\n          background-color: ".concat(props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor, ";\n        }\n        :active {\n          background-color: ").concat(props.selected ? props.theme.selectedActiveBackgroundColor : props.theme.unselectedActiveBackgroundColor, ";\n          color: #ffffff;\n        }        \n        :focus {\n          border-color: transparent;\n          box-shadow: 0 0 0 ").concat(props.theme.optionFocusBorderThickness, " ").concat(props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor, ";\n        }\n        &:focus-visible {\n          outline: none;\n        }\n        cursor: pointer;\n        color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n") : "color: ".concat(props.selected ? props.theme.selectedDisabledFontColor : props.theme.unselectedDisabledFontColor, ";\n        cursor: not-allowed;"), "\n  ");
+  return props.optionLabel && props.hasIcon || props.optionLabel && !props.hasIcon ? props.theme.labelPaddingRight : props.theme.iconPaddingRight;
+}, function (props) {
+  return props.theme.optionBorderThickness;
+}, function (props) {
+  return props.theme.optionBorderStyle;
+}, function (props) {
+  return props.theme.optionBorderRadius;
+}, function (props) {
+  return props.selected ? props.theme.selectedBackgroundColor : props.theme.unselectedBackgroundColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedActiveBackgroundColor : props.theme.unselectedActiveBackgroundColor;
+}, function (props) {
+  return "0 0 0 ".concat(props.theme.optionFocusBorderThickness, " ").concat(props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor);
+}, function (props) {
+  return props.selected ? props.theme.selectedDisabledBackgroundColor : props.theme.unselectedDisabledBackgroundColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedDisabledFontColor : props.theme.unselectedDisabledFontColor;
 });
 
 var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
@@ -206,11 +233,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_tem
   return props.theme.optionLabelFontWeight;
 });
 
-var OptionContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-
-var Icon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
-
-var IconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: ", ";\n  height: 24px;\n  width: 24px;\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 24px;\n  width: 24px;\n  margin-right: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.optionLabel && props.theme.iconMarginRight;
 });
 

package/toggle-group/ToggleGroup.stories.tsx

@@ -42,7 +42,7 @@ const options = [
   },
   {
     value: 2,
-    label: "Twitter",
+    label: "X",
   },
   {
     value: 3,
@@ -53,14 +53,17 @@ const optionsWithIcon = [
   {
     value: 1,
     icon: wifiSVG,
+    title: "WiFi connection",
   },
   {
     value: 2,
     icon: ethernetSVG,
+    title: "Ethernet connection",
   },
   {
     value: 3,
     icon: gMobileSVG,
+    title: "3G Mobile data connection",
   },
 ];
 const optionsWithIconAndLabel = [
@@ -87,7 +90,7 @@ const twoOptions = [
   },
   {
     value: 2,
-    label: "Twitter",
+    label: "X",
   },
 ];
 
@@ -209,7 +212,7 @@ ToggleGroupSelectedActived.play = async ({ canvasElement }) => {
 export const ToggleGroupUnselectedActived = OptionSelected.bind({});
 ToggleGroupUnselectedActived.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const option = canvas.getByText("Twitter");
+  const option = canvas.getByText("X");
   await userEvent.click(option);
   userEvent.tab();
 };

package/toggle-group/ToggleGroup.test.js

@@ -37,14 +37,28 @@ describe("Toggle group component tests", function () {
     expect(getByText("Apple")).toBeTruthy();
     expect(getByText("Google")).toBeTruthy();
   });
+  test("Toggle group renders with correct aria-label in only-icon scenario", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      label: "Toggle group label",
+      helperText: "Toggle group helper text",
+      options: [{
+        value: 1,
+        icon: "https://cdn.icon-icons.com/icons2/2645/PNG/512/mic_mute_icon_159965.png",
+        title: "Mute"
+      }]
+    })),
+        getByRole = _render2.getByRole;
+
+    expect(getByRole("button").getAttribute("aria-label")).toBe("Mute");
+  });
   test("Uncontrolled toggle group calls correct function on change with value", function () {
     var onChange = jest.fn();
 
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange
     })),
-        getByText = _render2.getByText;
+        getByText = _render3.getByText;
 
     var option = getByText("Ebay");
 
@@ -55,12 +69,12 @@ describe("Toggle group component tests", function () {
   test("Controlled toggle group calls correct function on change with value", function () {
     var onChange = jest.fn();
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       value: 1
     })),
-        getByText = _render3.getByText;
+        getByText = _render4.getByText;
 
     var option = getByText("Ebay");
 
@@ -71,12 +85,12 @@ describe("Toggle group component tests", function () {
   test("Function on change is not called when disable", function () {
     var onChange = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       disabled: true
     })),
-        getByText = _render4.getByText;
+        getByText = _render5.getByText;
 
     var option = getByText("Ebay");
 
@@ -87,14 +101,14 @@ describe("Toggle group component tests", function () {
   test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", function () {
     var onChange = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       multiple: true
     })),
-        getAllByRole = _render5.getAllByRole;
+        getAllByRole = _render6.getAllByRole;
 
-    var toggleOptions = getAllByRole("switch");
+    var toggleOptions = getAllByRole("button");
 
     _react2.fireEvent.click(toggleOptions[0]);
 
@@ -105,20 +119,20 @@ describe("Toggle group component tests", function () {
     _react2.fireEvent.click(toggleOptions[3]);
 
     expect(onChange).toHaveBeenCalledWith([1, 2, 4]);
-    expect(toggleOptions[0].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[0].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-pressed")).toBe("true");
   });
   test("Controlled multiple toggle returns always same values", function () {
     var onChange = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       value: [1],
       multiple: true
     })),
-        getByText = _render6.getByText;
+        getByText = _render7.getByText;
 
     var option = getByText("Ebay");
 
@@ -132,25 +146,25 @@ describe("Toggle group component tests", function () {
     expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
   });
   test("Single selection: Renders with correct default value", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       defaultValue: 2
     })),
-        getAllByRole = _render7.getAllByRole;
+        getAllByRole = _render8.getAllByRole;
 
-    var toggleOptions = getAllByRole("radio");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+    var toggleOptions = getAllByRole("button");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
   });
   test("Multiple selection: Renders with correct default value", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       defaultValue: [2, 4],
       multiple: true
     })),
-        getAllByRole = _render8.getAllByRole;
+        getAllByRole = _render9.getAllByRole;
 
-    var toggleOptions = getAllByRole("switch");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+    var toggleOptions = getAllByRole("button");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-pressed")).toBe("true");
   });
 });

package/toggle-group/types.d.ts

@@ -7,23 +7,22 @@ declare type Margin = {
     right?: Space;
 };
 declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type OptionCommons = {
-    /**
-     * Number with the option inner value.
-     */
-    value: number;
-};
-declare type OptionIcon = OptionCommons & {
+declare type OptionIcon = {
     /**
      * String with the option display value.
      */
-    label?: string;
+    label?: never;
     /**
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title: string;
 };
-export declare type OptionLabel = OptionCommons & {
+export declare type OptionLabel = {
     /**
      * String with the option display value.
      */
@@ -32,8 +31,18 @@ export declare type OptionLabel = OptionCommons & {
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon?: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title?: never;
 };
-declare type Option = OptionIcon | OptionLabel;
+declare type Option = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+} & (OptionIcon | OptionLabel);
 declare type CommonProps = {
     /**
      * Text to be placed above the component.
@@ -61,7 +70,7 @@ declare type CommonProps = {
      */
     tabIndex?: number;
 };
-declare type SingleSelectionToggle = CommonProps & {
+declare type SingleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -81,7 +90,7 @@ declare type SingleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number) => void;
 };
-declare type MultipleSelectionToggle = CommonProps & {
+declare type MultipleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -101,5 +110,5 @@ declare type MultipleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number[]) => void;
 };
-declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+declare type Props = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
 export default Props;

package/useTheme.d.ts

@@ -488,6 +488,14 @@ declare const useTheme: () => {
         level5LineHeight: string;
         level5LetterSpacing: string;
     }>;
+    image?: Partial<{
+        captionFontColor: string;
+        captionFontFamily: string;
+        captionFontSize: string;
+        captionFontStyle: string;
+        captionFontWeight: string;
+        captionLineHeight: string;
+    }>;
     link?: Partial<{
         fontColor: string;
         fontFamily: string;
@@ -499,7 +507,7 @@ declare const useTheme: () => {
         underlineSpacing: string;
         underlineStyle: string;
         underlineThickness: string;
-        disabledColor: string;
+        disabledFontColor: string;
         hoverFontColor: string;
         hoverUnderlineColor: string;
         visitedFontColor: string;

package/utils/FocusLock.js

@@ -18,11 +18,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var not = {
-  inert: ":not([inert]):not([inert] *)",
   negTabIndex: ':not([tabindex^="-"])',
   disabled: ":not(:disabled)"
 };
-var focusableQuery = ["a[href]".concat(not.inert).concat(not.negTabIndex), "area[href]".concat(not.inert).concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "select".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "button".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "details".concat(not.inert, " > summary:first-of-type").concat(not.negTabIndex), "iframe".concat(not.inert).concat(not.negTabIndex), "audio[controls]".concat(not.inert).concat(not.negTabIndex), "video[controls]".concat(not.inert).concat(not.negTabIndex), "[contenteditable]".concat(not.inert).concat(not.negTabIndex), "[tabindex]".concat(not.inert).concat(not.negTabIndex).concat(not.disabled)].join(",");
+var focusableQuery = ["a[href]".concat(not.negTabIndex), "area[href]".concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.negTabIndex).concat(not.disabled), "select".concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.negTabIndex).concat(not.disabled), "button".concat(not.negTabIndex).concat(not.disabled), "details > summary:first-of-type".concat(not.negTabIndex), "iframe".concat(not.negTabIndex), "audio[controls]".concat(not.negTabIndex), "video[controls]".concat(not.negTabIndex), "[contenteditable]".concat(not.negTabIndex), "[tabindex]".concat(not.negTabIndex).concat(not.disabled)].join(",");
 
 var getFocusableElements = function getFocusableElements(container) {
   return Array.prototype.slice.call(container.querySelectorAll(focusableQuery)).filter(function (element) {
@@ -44,7 +43,7 @@ var attempFocus = function attempFocus(element) {
 };
 /**
  * @param element: HTMLElement
- * @returns boolean: true if element is contained inside a Radix Portal, false otherwise. 
+ * @returns boolean: true if element is contained inside a Radix Portal, false otherwise.
  */
 
 

package/number-input/NumberInputContext.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import NumberInputContextPropsType from "./numberInputContextTypes";
-declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
-export default NumberInputContext;

package/number-input/NumberInputContext.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var defaultState = {
-  stepNumber: 1
-};
-
-var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
-
-var _default = NumberInputContext;
-exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -1,19 +0,0 @@
-declare type Props = {
-    /**
-     * Type of the input.
-     */
-    typeNumber?: string;
-    /**
-     * Minimum value allowed by the number input.
-     */
-    minNumber?: number;
-    /**
-     * Maximum value allowed by the number input.
-     */
-    maxNumber?: number;
-    /**
-     * The step interval to use when using the up and down arrows to adjust the value.
-     */
-    stepNumber?: number;
-};
-export default Props;