@auth0/quantum-product 2.10.5 → 2.10.6

package/esm/segmented-control/segment/segment.js

@@ -58,7 +58,7 @@ var IconWrapper = styled('span')({
 });
 export var Segment = React.forwardRef(function (_a, ref) {
     var value = _a.value, label = _a.label, icon = _a.icon, _b = _a.disabled, disabled = _b === void 0 ? false : _b, analyticsId = _a.analyticsId, ariaLabel = _a["aria-label"], rest = __rest(_a, ["value", "label", "icon", "disabled", "analyticsId", 'aria-label']);
-    var _c = useSegmentedControlContext(), selectedValue = _c.value, onChange = _c.onChange, _d = _c.size, size = _d === void 0 ? 'medium' : _d, _e = _c.fullWidth, fullWidth = _e === void 0 ? false : _e;
+    var _c = useSegmentedControlContext(), selectedValue = _c.value, tabFocusValue = _c.tabFocusValue, onChange = _c.onChange, _d = _c.size, size = _d === void 0 ? 'medium' : _d, _e = _c.fullWidth, fullWidth = _e === void 0 ? false : _e;
     var selected = selectedValue === value;
     var ownerState = {
         selected: selected,
@@ -71,7 +71,7 @@ export var Segment = React.forwardRef(function (_a, ref) {
             onChange(value);
         }
     };
-    return (React.createElement(SegmentRoot, __assign({ ref: ref, type: "button", role: "radio", "aria-checked": selected, "aria-disabled": disabled, "aria-label": ariaLabel, disabled: disabled, tabIndex: !disabled && selected ? 0 : -1, onClick: handleClick, ownerState: ownerState }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
+    return (React.createElement(SegmentRoot, __assign({ ref: ref, type: "button", role: "radio", "aria-checked": selected, "aria-disabled": disabled, "aria-label": ariaLabel, "data-value": value }, (typeof value === 'number' && { 'data-numeric-value': '' }), { disabled: disabled, tabIndex: !disabled && value === tabFocusValue ? 0 : -1, onClick: handleClick, ownerState: ownerState }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
         icon && React.createElement(IconWrapper, { "aria-hidden": "true" }, icon),
         label));
 });

package/esm/segmented-control/segmented-control.js

@@ -87,6 +87,19 @@ export var SegmentedControl = function (_a) {
         observer.observe(containerRef.current);
         return function () { return observer.disconnect(); };
     }, [updateIndicator]);
+    var _d = __read(React.useState(null), 2), focusedValue = _d[0], setFocusedValue = _d[1];
+    var tabFocusValue = React.useMemo(function () {
+        var _a, _b;
+        if (focusedValue != null)
+            return focusedValue;
+        var segments = React.Children.toArray(children).filter(function (child) {
+            return React.isValidElement(child);
+        });
+        var selected = segments.find(function (child) { return child.props.value === value; });
+        if (selected && !selected.props.disabled)
+            return value;
+        return (_b = (_a = segments.find(function (child) { return !child.props.disabled; })) === null || _a === void 0 ? void 0 : _a.props.value) !== null && _b !== void 0 ? _b : value;
+    }, [focusedValue, children, value]);
     var handleKeyDown = function (e) {
         if (!containerRef.current)
             return;
@@ -111,14 +124,32 @@ export var SegmentedControl = function (_a) {
             e.preventDefault();
             nextIndex = segments.length - 1;
         }
+        else if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            var focused = document.activeElement;
+            if (focused && focused.dataset.value != null) {
+                var val = focused.dataset.numericValue != null ? Number(focused.dataset.value) : focused.dataset.value;
+                onChange === null || onChange === void 0 ? void 0 : onChange(val);
+            }
+            return;
+        }
         if (nextIndex !== null) {
-            segments[nextIndex].focus();
-            segments[nextIndex].click();
+            var nextEl = segments[nextIndex];
+            nextEl.focus();
+            var val = nextEl.dataset.numericValue != null ? Number(nextEl.dataset.value) : nextEl.dataset.value;
+            if (val != null)
+                setFocusedValue(val);
+        }
+    };
+    var handleBlur = function (e) {
+        var _a;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            setFocusedValue(null);
         }
     };
-    var ctx = React.useMemo(function () { return ({ value: value, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, onChange, size, fullWidth]);
+    var ctx = React.useMemo(function () { return ({ value: value, tabFocusValue: tabFocusValue, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, tabFocusValue, onChange, size, fullWidth]);
     return (React.createElement(SegmentedControlContext.Provider, { value: ctx },
-        React.createElement(Root, __assign({ ref: containerRef, fullWidth: fullWidth, role: "radiogroup", onKeyDown: handleKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
+        React.createElement(Root, __assign({ ref: containerRef, fullWidth: fullWidth, role: "radiogroup", onKeyDown: handleKeyDown, onBlur: handleBlur, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
             React.createElement(Indicator, { "aria-hidden": "true", style: indicatorStyle }),
             children)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.10.5",
+  "version": "2.10.6",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {

package/segmented-control/segment/segment.js

@@ -94,7 +94,7 @@ var IconWrapper = (0, styled_1.styled)('span')({
 });
 exports.Segment = React.forwardRef(function (_a, ref) {
     var value = _a.value, label = _a.label, icon = _a.icon, _b = _a.disabled, disabled = _b === void 0 ? false : _b, analyticsId = _a.analyticsId, ariaLabel = _a["aria-label"], rest = __rest(_a, ["value", "label", "icon", "disabled", "analyticsId", 'aria-label']);
-    var _c = (0, segmented_control_context_1.useSegmentedControlContext)(), selectedValue = _c.value, onChange = _c.onChange, _d = _c.size, size = _d === void 0 ? 'medium' : _d, _e = _c.fullWidth, fullWidth = _e === void 0 ? false : _e;
+    var _c = (0, segmented_control_context_1.useSegmentedControlContext)(), selectedValue = _c.value, tabFocusValue = _c.tabFocusValue, onChange = _c.onChange, _d = _c.size, size = _d === void 0 ? 'medium' : _d, _e = _c.fullWidth, fullWidth = _e === void 0 ? false : _e;
     var selected = selectedValue === value;
     var ownerState = {
         selected: selected,
@@ -107,7 +107,7 @@ exports.Segment = React.forwardRef(function (_a, ref) {
             onChange(value);
         }
     };
-    return (React.createElement(SegmentRoot, __assign({ ref: ref, type: "button", role: "radio", "aria-checked": selected, "aria-disabled": disabled, "aria-label": ariaLabel, disabled: disabled, tabIndex: !disabled && selected ? 0 : -1, onClick: handleClick, ownerState: ownerState }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
+    return (React.createElement(SegmentRoot, __assign({ ref: ref, type: "button", role: "radio", "aria-checked": selected, "aria-disabled": disabled, "aria-label": ariaLabel, "data-value": value }, (typeof value === 'number' && { 'data-numeric-value': '' }), { disabled: disabled, tabIndex: !disabled && value === tabFocusValue ? 0 : -1, onClick: handleClick, ownerState: ownerState }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
         icon && React.createElement(IconWrapper, { "aria-hidden": "true" }, icon),
         label));
 });

package/segmented-control/segmented-control-context.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface ISegmentedControlContextValue {
     value?: string | number;
+    tabFocusValue?: string | number;
     size?: 'small' | 'medium';
     fullWidth?: boolean;
     onChange?(value: string | number): void;

package/segmented-control/segmented-control.js

@@ -123,6 +123,19 @@ var SegmentedControl = function (_a) {
         observer.observe(containerRef.current);
         return function () { return observer.disconnect(); };
     }, [updateIndicator]);
+    var _d = __read(React.useState(null), 2), focusedValue = _d[0], setFocusedValue = _d[1];
+    var tabFocusValue = React.useMemo(function () {
+        var _a, _b;
+        if (focusedValue != null)
+            return focusedValue;
+        var segments = React.Children.toArray(children).filter(function (child) {
+            return React.isValidElement(child);
+        });
+        var selected = segments.find(function (child) { return child.props.value === value; });
+        if (selected && !selected.props.disabled)
+            return value;
+        return (_b = (_a = segments.find(function (child) { return !child.props.disabled; })) === null || _a === void 0 ? void 0 : _a.props.value) !== null && _b !== void 0 ? _b : value;
+    }, [focusedValue, children, value]);
     var handleKeyDown = function (e) {
         if (!containerRef.current)
             return;
@@ -147,14 +160,32 @@ var SegmentedControl = function (_a) {
             e.preventDefault();
             nextIndex = segments.length - 1;
         }
+        else if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            var focused = document.activeElement;
+            if (focused && focused.dataset.value != null) {
+                var val = focused.dataset.numericValue != null ? Number(focused.dataset.value) : focused.dataset.value;
+                onChange === null || onChange === void 0 ? void 0 : onChange(val);
+            }
+            return;
+        }
         if (nextIndex !== null) {
-            segments[nextIndex].focus();
-            segments[nextIndex].click();
+            var nextEl = segments[nextIndex];
+            nextEl.focus();
+            var val = nextEl.dataset.numericValue != null ? Number(nextEl.dataset.value) : nextEl.dataset.value;
+            if (val != null)
+                setFocusedValue(val);
+        }
+    };
+    var handleBlur = function (e) {
+        var _a;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            setFocusedValue(null);
         }
     };
-    var ctx = React.useMemo(function () { return ({ value: value, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, onChange, size, fullWidth]);
+    var ctx = React.useMemo(function () { return ({ value: value, tabFocusValue: tabFocusValue, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, tabFocusValue, onChange, size, fullWidth]);
     return (React.createElement(segmented_control_context_1.SegmentedControlContext.Provider, { value: ctx },
-        React.createElement(Root, __assign({ ref: containerRef, fullWidth: fullWidth, role: "radiogroup", onKeyDown: handleKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
+        React.createElement(Root, __assign({ ref: containerRef, fullWidth: fullWidth, role: "radiogroup", onKeyDown: handleKeyDown, onBlur: handleBlur, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
             React.createElement(Indicator, { "aria-hidden": "true", style: indicatorStyle }),
             children)));
 };