rc-segmented - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

es/index.js

@@ -49,3 +49,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     name = _ref.name,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onKeyDown = _ref.onKeyDown,
+    onKeyUp = _ref.onKeyUp,
+    onMouseDown = _ref.onMouseDown;
   var handleChange = function handleChange(event) {
@@ -58,15 +63,18 @@ if (disabled) {
   return /*#__PURE__*/React.createElement("label", {
-    className: classNames(className, _defineProperty({}, "".concat(prefixCls, "-item-disabled"), disabled))
+    className: classNames(className, _defineProperty({}, "".concat(prefixCls, "-item-disabled"), disabled)),
+    onMouseDown: onMouseDown
   }, /*#__PURE__*/React.createElement("input", {
     name: name,
     className: "".concat(prefixCls, "-item-input"),
-    "aria-hidden": "true",
     type: "radio",
     disabled: disabled,
     checked: checked,
-    onChange: handleChange
+    onChange: handleChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-item-label"),
     title: title,
-    role: "option",
     "aria-selected": checked
@@ -121,5 +129,58 @@ }, label));
   var divProps = omit(restProps, ['children']);
+
+  // ======================= Focus ========================
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isKeyboard = _React$useState4[0],
+    setIsKeyboard = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isFocused = _React$useState6[0],
+    setIsFocused = _React$useState6[1];
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+  };
+  var handleBlur = function handleBlur() {
+    setIsFocused(false);
+  };
+  var handleMouseDown = function handleMouseDown() {
+    setIsKeyboard(false);
+  };
+
+  // capture keyboard tab interaction for correct focus style
+  var handleKeyUp = function handleKeyUp(event) {
+    if (event.key === 'Tab') {
+      setIsKeyboard(true);
+    }
+  };
+
+  // ======================= Keyboard ========================
+  var onOffset = function onOffset(offset) {
+    var currentIndex = segmentedOptions.findIndex(function (option) {
+      return option.value === rawValue;
+    });
+    var total = segmentedOptions.length;
+    var nextIndex = (currentIndex + offset + total) % total;
+    var nextOption = segmentedOptions[nextIndex];
+    if (nextOption) {
+      setRawValue(nextOption.value);
+      onChange === null || onChange === void 0 || onChange(nextOption.value);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        onOffset(-1);
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        onOffset(1);
+        break;
+    }
+  };
   return /*#__PURE__*/React.createElement("div", _extends({
-    role: "listbox",
-    "aria-label": "segmented control"
+    role: "radiogroup",
+    "aria-label": "segmented control",
+    tabIndex: disabled ? undefined : 0
   }, divProps, {
@@ -149,2 +210,3 @@ className: classNames(prefixCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-vertical"), vertical), _classNames2), className),
   }), segmentedOptions.map(function (segmentedOption) {
+    var _classNames3;
     return /*#__PURE__*/React.createElement(InternalSegmentedOption, _extends({}, segmentedOption, {
@@ -154,5 +216,10 @@ name: name,
       prefixCls: prefixCls,
-      className: classNames(segmentedOption.className, "".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-selected"), segmentedOption.value === rawValue && !thumbShow)),
+      className: classNames(segmentedOption.className, "".concat(prefixCls, "-item"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-item-selected"), segmentedOption.value === rawValue && !thumbShow), _defineProperty(_classNames3, "".concat(prefixCls, "-item-focused"), isFocused && isKeyboard && segmentedOption.value === rawValue), _classNames3)),
       checked: segmentedOption.value === rawValue,
       onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onMouseDown: handleMouseDown,
       disabled: !!disabled || !!segmentedOption.disabled
@@ -159,0 +226,0 @@ }));

lib/index.js

@@ -59,3 +59,8 @@ "use strict";
     name = _ref.name,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onKeyDown = _ref.onKeyDown,
+    onKeyUp = _ref.onKeyUp,
+    onMouseDown = _ref.onMouseDown;
   var handleChange = function handleChange(event) {
@@ -68,15 +73,18 @@ if (disabled) {
   return /*#__PURE__*/React.createElement("label", {
-    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-item-disabled"), disabled))
+    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-item-disabled"), disabled)),
+    onMouseDown: onMouseDown
   }, /*#__PURE__*/React.createElement("input", {
     name: name,
     className: "".concat(prefixCls, "-item-input"),
-    "aria-hidden": "true",
     type: "radio",
     disabled: disabled,
     checked: checked,
-    onChange: handleChange
+    onChange: handleChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-item-label"),
     title: title,
-    role: "option",
     "aria-selected": checked
@@ -131,5 +139,58 @@ }, label));
   var divProps = (0, _omit.default)(restProps, ['children']);
+
+  // ======================= Focus ========================
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isKeyboard = _React$useState4[0],
+    setIsKeyboard = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    isFocused = _React$useState6[0],
+    setIsFocused = _React$useState6[1];
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+  };
+  var handleBlur = function handleBlur() {
+    setIsFocused(false);
+  };
+  var handleMouseDown = function handleMouseDown() {
+    setIsKeyboard(false);
+  };
+
+  // capture keyboard tab interaction for correct focus style
+  var handleKeyUp = function handleKeyUp(event) {
+    if (event.key === 'Tab') {
+      setIsKeyboard(true);
+    }
+  };
+
+  // ======================= Keyboard ========================
+  var onOffset = function onOffset(offset) {
+    var currentIndex = segmentedOptions.findIndex(function (option) {
+      return option.value === rawValue;
+    });
+    var total = segmentedOptions.length;
+    var nextIndex = (currentIndex + offset + total) % total;
+    var nextOption = segmentedOptions[nextIndex];
+    if (nextOption) {
+      setRawValue(nextOption.value);
+      onChange === null || onChange === void 0 || onChange(nextOption.value);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        onOffset(-1);
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        onOffset(1);
+        break;
+    }
+  };
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    role: "listbox",
-    "aria-label": "segmented control"
+    role: "radiogroup",
+    "aria-label": "segmented control",
+    tabIndex: disabled ? undefined : 0
   }, divProps, {
@@ -159,2 +220,3 @@ className: (0, _classnames.default)(prefixCls, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-vertical"), vertical), _classNames2), className),
   }), segmentedOptions.map(function (segmentedOption) {
+    var _classNames3;
     return /*#__PURE__*/React.createElement(InternalSegmentedOption, (0, _extends2.default)({}, segmentedOption, {
@@ -164,5 +226,10 @@ name: name,
       prefixCls: prefixCls,
-      className: (0, _classnames.default)(segmentedOption.className, "".concat(prefixCls, "-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-item-selected"), segmentedOption.value === rawValue && !thumbShow)),
+      className: (0, _classnames.default)(segmentedOption.className, "".concat(prefixCls, "-item"), (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-item-selected"), segmentedOption.value === rawValue && !thumbShow), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-item-focused"), isFocused && isKeyboard && segmentedOption.value === rawValue), _classNames3)),
       checked: segmentedOption.value === rawValue,
       onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onMouseDown: handleMouseDown,
       disabled: !!disabled || !!segmentedOption.disabled
@@ -169,0 +236,0 @@ }));

package.json

 {
   "name": "rc-segmented",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "React segmented controls used in ant.design",
@@ -58,2 +58,3 @@ "keywords": [
     "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.9",
@@ -60,0 +61,0 @@ "@types/jest": "^29.2.4",

No alert changes

Improved metrics

Total package byte prevSize

50317

increased by10.75%

Lines of code

999

increased by15.89%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes