@auth0/quantum-product 2.10.5 → 2.10.7

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 (35) hide show
  1. package/command-palette/command-palette-classes.d.ts +1 -1
  2. package/command-palette/command-palette-classes.js +1 -0
  3. package/command-palette/command-palette-dialog.js +7 -5
  4. package/command-palette/command-palette-empty.js +4 -2
  5. package/command-palette/command-palette-footer.js +8 -5
  6. package/command-palette/command-palette-group.js +13 -10
  7. package/command-palette/command-palette-input.js +10 -7
  8. package/command-palette/command-palette-item.js +8 -6
  9. package/command-palette/command-palette-list.js +5 -3
  10. package/command-palette/command-palette-loading.js +4 -2
  11. package/command-palette/command-palette-separator.js +4 -2
  12. package/command-palette/command-palette-tabs.js +11 -8
  13. package/command-palette/command-palette-types.d.ts +23 -13
  14. package/command-palette/command-palette.js +3 -3
  15. package/esm/command-palette/command-palette-classes.js +1 -0
  16. package/esm/command-palette/command-palette-dialog.js +8 -6
  17. package/esm/command-palette/command-palette-empty.js +5 -3
  18. package/esm/command-palette/command-palette-footer.js +9 -6
  19. package/esm/command-palette/command-palette-group.js +14 -11
  20. package/esm/command-palette/command-palette-input.js +11 -8
  21. package/esm/command-palette/command-palette-item.js +9 -7
  22. package/esm/command-palette/command-palette-list.js +6 -4
  23. package/esm/command-palette/command-palette-loading.js +5 -3
  24. package/esm/command-palette/command-palette-separator.js +5 -3
  25. package/esm/command-palette/command-palette-tabs.js +12 -9
  26. package/esm/command-palette/command-palette.js +3 -3
  27. package/esm/input/input-label/input-label-overrides.js +1 -0
  28. package/esm/segmented-control/segment/segment.js +2 -2
  29. package/esm/segmented-control/segmented-control.js +35 -4
  30. package/input/input-label/input-label-overrides.d.ts +1 -1
  31. package/input/input-label/input-label-overrides.js +1 -0
  32. package/package.json +1 -1
  33. package/segmented-control/segment/segment.js +2 -2
  34. package/segmented-control/segmented-control-context.d.ts +1 -0
  35. package/segmented-control/segmented-control.js +35 -4
package/esm/command-palette/command-palette-empty.js CHANGED
@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import { styled } from '../styled';
25
+ import { useMergedClasses } from '../styles/classes';
25
26
  import clsx from '../utils/clsx';
26
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
27
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
27
28
  import { useCommandPaletteState } from './command-palette-context';
28
29
  var Root = styled('div', {
29
30
  name: commandPaletteComponentName,
@@ -41,11 +42,12 @@ var Root = styled('div', {
41
42
  });
42
43
  });
43
44
  export var CommandPaletteEmpty = React.forwardRef(function (props, ref) {
44
- var _a = props.children, children = _a === void 0 ? 'No results found.' : _a, className = props.className, emptyProps = __rest(props, ["children", "className"]);
45
+ var _a = props.children, children = _a === void 0 ? 'No results found.' : _a, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, emptyProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
45
46
  var filteredCount = useCommandPaletteState(function (state) { return state.filtered.count; });
46
47
  var isSearching = useCommandPaletteState(function (state) { return state.search.length > 0; });
48
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
47
49
  if (!isSearching || filteredCount > 0)
48
50
  return null;
49
- return (React.createElement(Root, __assign({ ref: ref, role: "presentation", className: clsx(commandPaletteClasses.empty, className) }, emptyProps), children));
51
+ return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "presentation", className: clsx(classes.empty, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), emptyProps), children));
50
52
  });
51
53
  CommandPaletteEmpty.displayName = 'CommandPaletteEmpty';
package/esm/command-palette/command-palette-footer.js CHANGED
@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import { styled } from '../styled';
25
+ import { useMergedClasses } from '../styles/classes';
25
26
  import clsx from '../utils/clsx';
26
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
27
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
27
28
  var Root = styled('div', {
28
29
  name: commandPaletteComponentName,
29
30
  slot: 'Footer',
@@ -41,7 +42,7 @@ var Root = styled('div', {
41
42
  });
42
43
  var Kbd = styled('kbd', {
43
44
  name: commandPaletteComponentName,
44
- slot: 'FooterKbd',
45
+ slot: 'Kbd',
45
46
  })(function (_a) {
46
47
  var theme = _a.theme;
47
48
  return ({
@@ -61,12 +62,14 @@ var Kbd = styled('kbd', {
61
62
  });
62
63
  });
63
64
  export var CommandPaletteFooter = React.forwardRef(function (props, ref) {
64
- var children = props.children, className = props.className, footerProps = __rest(props, ["children", "className"]);
65
- return (React.createElement(Root, __assign({ ref: ref, className: clsx(commandPaletteClasses.footer, className) }, footerProps), children));
65
+ var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, footerProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
66
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
67
+ return (React.createElement(Root, __assign({ ref: ref, sx: sx, className: clsx(classes.footer, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), footerProps), children));
66
68
  });
67
69
  CommandPaletteFooter.displayName = 'CommandPaletteFooter';
68
70
  export var CommandPaletteShortcutKey = React.forwardRef(function (props, ref) {
69
- var children = props.children, className = props.className, kbdProps = __rest(props, ["children", "className"]);
70
- return (React.createElement(Kbd, __assign({ ref: ref, className: clsx(commandPaletteClasses.kbd, className) }, kbdProps), children));
71
+ var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, kbdProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
72
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
73
+ return (React.createElement(Kbd, __assign({ ref: ref, sx: sx, className: clsx(classes.kbd, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), kbdProps), children));
71
74
  });
72
75
  CommandPaletteShortcutKey.displayName = 'CommandPaletteShortcutKey';
package/esm/command-palette/command-palette-group.js CHANGED
@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import { styled } from '../styled';
25
+ import { useMergedClasses } from '../styles/classes';
25
26
  import clsx from '../utils/clsx';
26
27
  import { useId } from '../utils/use-id';
27
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
28
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
28
29
  import { CommandPaletteGroupContext, useCommandPaletteContext, useCommandPaletteState, } from './command-palette-context';
29
30
  var Root = styled('div', {
30
31
  name: commandPaletteComponentName,
@@ -58,23 +59,25 @@ var Items = styled('div', {
58
59
  outline: 'none',
59
60
  }); });
60
61
  export var CommandPaletteGroup = React.forwardRef(function (props, ref) {
61
- var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, children = props.children, className = props.className, groupProps = __rest(props, ["heading", "forceMount", "children", "className"]);
62
- var id = useId() || '';
63
- var headingId = "".concat(id, "-heading");
62
+ var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, value = props.value, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, groupProps = __rest(props, ["heading", "forceMount", "value", "analyticsId", "classes", "children", "className", "sx"]);
63
+ var generatedId = useId() || '';
64
+ var groupId = value || generatedId;
65
+ var headingId = generatedId ? "".concat(generatedId, "-heading") : undefined;
64
66
  var context = useCommandPaletteContext();
67
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
65
68
  React.useLayoutEffect(function () {
66
- var cleanup = context.group(id);
69
+ var cleanup = context.group(groupId);
67
70
  return cleanup;
68
- }, [context, id]);
71
+ }, [context, groupId]);
69
72
  var filteredState = useCommandPaletteState(function (state) { return state.filtered; });
70
73
  var search = useCommandPaletteState(function (state) { return state.search; });
71
- var groupCount = filteredState.groups.get(id);
74
+ var groupCount = filteredState.groups.get(groupId);
72
75
  var isVisible = forceMount || context.filter === false || !search || (groupCount !== undefined && groupCount > 0);
73
76
  if (!isVisible)
74
77
  return null;
75
- return (React.createElement(Root, __assign({ ref: ref, className: clsx(commandPaletteClasses.group, className), role: "presentation" }, groupProps),
76
- heading && (React.createElement(Heading, { id: headingId, className: commandPaletteClasses.groupHeading, "aria-hidden": true }, heading)),
77
- React.createElement(CommandPaletteGroupContext.Provider, { value: id },
78
- React.createElement(Items, { role: "group", className: commandPaletteClasses.groupItems, "aria-labelledby": heading ? headingId : undefined }, children))));
78
+ return (React.createElement(Root, __assign({ ref: ref, sx: sx, className: clsx(classes.group, className), role: "presentation" }, (analyticsId && { 'data-analytics-id': analyticsId }), groupProps),
79
+ heading && (React.createElement(Heading, { id: headingId, className: classes.groupHeading, "aria-hidden": true }, heading)),
80
+ React.createElement(CommandPaletteGroupContext.Provider, { value: groupId },
81
+ React.createElement(Items, { role: "group", className: classes.groupItems, "aria-labelledby": heading ? headingId : undefined }, children))));
79
82
  });
80
83
  CommandPaletteGroup.displayName = 'CommandPaletteGroup';
package/esm/command-palette/command-palette-input.js CHANGED
@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import * as React from 'react';
24
24
  import { SearchIcon } from '../icon';
25
25
  import { styled } from '../styled';
26
+ import { useMergedClasses } from '../styles/classes';
26
27
  import clsx from '../utils/clsx';
27
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
28
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
28
29
  import { useCommandPaletteContext, useCommandPaletteState, useCommandPaletteStore } from './command-palette-context';
29
30
  var Wrapper = styled('div', {
30
31
  name: commandPaletteComponentName,
@@ -35,7 +36,7 @@ var Wrapper = styled('div', {
35
36
  display: 'flex',
36
37
  alignItems: 'center',
37
38
  gap: theme.spacing(1.5),
38
- padding: "".concat(theme.spacing(1.5), " ").concat(theme.spacing(2)),
39
+ padding: "".concat(theme.spacing(1.75), " ").concat(theme.spacing(2.5)),
39
40
  });
40
41
  });
41
42
  var IconWrapper = styled('div', {
@@ -66,8 +67,9 @@ var InputElement = styled('input', {
66
67
  outline: 'none',
67
68
  backgroundColor: 'transparent',
68
69
  color: theme.tokens.color_fg_default,
69
- fontSize: theme.typography.body1.fontSize,
70
- lineHeight: theme.typography.body1.lineHeight,
70
+ fontSize: theme.typography.body2.fontSize,
71
+ fontWeight: theme.typography.fontWeightMedium,
72
+ lineHeight: theme.typography.body2.lineHeight,
71
73
  fontFamily: theme.typography.fontFamily,
72
74
  caretColor: theme.tokens.color_fg_brand_primary,
73
75
  '&::placeholder': {
@@ -79,7 +81,8 @@ var InputElement = styled('input', {
79
81
  });
80
82
  });
81
83
  export var CommandPaletteInput = React.forwardRef(function (props, ref) {
82
- var _a = props.icon, icon = _a === void 0 ? React.createElement(SearchIcon, { size: 20 }) : _a, _b = props.placeholder, placeholder = _b === void 0 ? 'Search for commands...' : _b, onValueChange = props.onValueChange, className = props.className, inputProps = __rest(props, ["icon", "placeholder", "onValueChange", "className"]);
84
+ var _a = props.icon, icon = _a === void 0 ? React.createElement(SearchIcon, { size: 20 }) : _a, _b = props.placeholder, placeholder = _b === void 0 ? 'Search for commands...' : _b, onValueChange = props.onValueChange, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, inputProps = __rest(props, ["icon", "placeholder", "onValueChange", "analyticsId", "classes", "className", "sx"]);
85
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
83
86
  var context = useCommandPaletteContext();
84
87
  var store = useCommandPaletteStore();
85
88
  var search = useCommandPaletteState(function (state) { return state.search; });
@@ -98,8 +101,8 @@ export var CommandPaletteInput = React.forwardRef(function (props, ref) {
98
101
  store.setState('search', e.target.value);
99
102
  onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
100
103
  }, [store, onValueChange]);
101
- return (React.createElement(Wrapper, { className: clsx(commandPaletteClasses.inputWrapper, className) },
102
- icon && React.createElement(IconWrapper, { className: commandPaletteClasses.inputIcon }, icon),
103
- React.createElement(InputElement, __assign({ ref: ref, id: context.inputId, className: commandPaletteClasses.input, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": context.listId, "aria-label": placeholder, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: placeholder, value: search, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, inputProps))));
104
+ return (React.createElement(Wrapper, __assign({ sx: sx, className: clsx(classes.inputWrapper, className) }, (analyticsId && { 'data-analytics-id': analyticsId })),
105
+ icon && React.createElement(IconWrapper, { className: classes.inputIcon }, icon),
106
+ React.createElement(InputElement, __assign({ ref: ref, id: context.inputId, className: classes.input, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": context.listId, "aria-label": placeholder, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: placeholder, value: search, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, inputProps))));
104
107
  });
105
108
  CommandPaletteInput.displayName = 'CommandPaletteInput';
package/esm/command-palette/command-palette-item.js CHANGED
@@ -48,17 +48,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
48
48
  import * as React from 'react';
49
49
  import useForkRef from '@mui/utils/useForkRef';
50
50
  import { styled } from '../styled';
51
+ import { useMergedClasses } from '../styles/classes';
51
52
  import clsx from '../utils/clsx';
52
53
  import { useId } from '../utils/use-id';
53
54
  import { VALUE_ATTR } from './command-palette';
54
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
55
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
55
56
  import { CommandPaletteGroupContext, useCommandPaletteContext, useCommandPaletteState, useCommandPaletteStore, } from './command-palette-context';
56
57
  var Root = styled('div', {
57
58
  name: commandPaletteComponentName,
58
59
  slot: 'Item',
59
60
  })(function (_a) {
60
61
  var theme = _a.theme, ownerState = _a.ownerState;
61
- return (__assign(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1.5), padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(1), cursor: 'pointer', userSelect: 'none', fontSize: theme.typography.body2.fontSize, fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.body2.lineHeight, color: theme.tokens.color_fg_default, transition: theme.transitions.create(['background-color', 'color'], {
62
+ return (__assign(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1.5), padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(0.75), cursor: 'pointer', userSelect: 'none', fontSize: theme.typography.body2.fontSize, fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.body2.lineHeight, color: theme.tokens.color_fg_default, transition: theme.transitions.create(['background-color', 'color'], {
62
63
  duration: theme.transitions.duration.shortest,
63
64
  }) }, (ownerState.isSelected && {
64
65
  backgroundColor: theme.tokens.color_bg_interactive_hover,
@@ -160,7 +161,7 @@ function useValue(id, ref, deps) {
160
161
  export var CommandPaletteItem = React.forwardRef(function (props, ref) {
161
162
  var _a;
162
163
  var _b, _c;
163
- var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, children = props.children, className = props.className, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "children", "className"]);
164
+ var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "analyticsId", "classes", "children", "className", "sx"]);
164
165
  var generatedId = useId();
165
166
  var idRef = React.useRef();
166
167
  if (!idRef.current) {
@@ -172,6 +173,7 @@ export var CommandPaletteItem = React.forwardRef(function (props, ref) {
172
173
  var context = useCommandPaletteContext();
173
174
  var store = useCommandPaletteStore();
174
175
  var groupId = React.useContext(CommandPaletteGroupContext);
176
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
175
177
  var itemValue = useValue(id, itemRef, [valueProp, keywords, children]);
176
178
  var selectedValue = useCommandPaletteState(function (state) { return state.selectedValue; });
177
179
  var isSelected = selectedValue === itemValue && itemValue !== '';
@@ -196,9 +198,9 @@ export var CommandPaletteItem = React.forwardRef(function (props, ref) {
196
198
  var shortcutKeys = shortcut ? (Array.isArray(shortcut) ? shortcut : shortcut.split('+')) : null;
197
199
  if (!isVisible)
198
200
  return null;
199
- return (React.createElement(Root, __assign((_a = { ref: mergedRef, ownerState: { isSelected: isSelected, disabled: disabled }, className: clsx(commandPaletteClasses.item, isSelected && commandPaletteClasses.itemSelected, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-disabled": disabled || undefined }, _a[VALUE_ATTR] = encodeURIComponent(itemValue), _a.onPointerMove = handlePointerMove, _a.onClick = handleClick, _a), itemProps),
200
- icon && React.createElement(ItemIcon, { className: commandPaletteClasses.itemIcon }, icon),
201
- React.createElement(ItemLabel, { className: commandPaletteClasses.itemLabel }, children),
202
- shortcutKeys && (React.createElement(ItemShortcut, { className: commandPaletteClasses.itemShortcut }, shortcutKeys.map(function (key, i) { return (React.createElement(Kbd, { key: i, className: commandPaletteClasses.kbd }, key)); })))));
201
+ return (React.createElement(Root, __assign((_a = { ref: mergedRef, sx: sx, ownerState: { isSelected: isSelected, disabled: disabled }, className: clsx(classes.item, isSelected && classes.itemSelected, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-disabled": disabled || undefined }, _a[VALUE_ATTR] = encodeURIComponent(itemValue), _a.onPointerMove = handlePointerMove, _a.onClick = handleClick, _a), (analyticsId && { 'data-analytics-id': analyticsId }), itemProps),
202
+ icon && React.createElement(ItemIcon, { className: classes.itemIcon }, icon),
203
+ React.createElement(ItemLabel, { className: classes.itemLabel }, children),
204
+ shortcutKeys && (React.createElement(ItemShortcut, { className: classes.itemShortcut }, shortcutKeys.map(function (key, i) { return (React.createElement(Kbd, { key: i, className: classes.kbd }, key)); })))));
203
205
  });
204
206
  CommandPaletteItem.displayName = 'CommandPaletteItem';
package/esm/command-palette/command-palette-list.js CHANGED
@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import { styled } from '../styled';
25
+ import { useMergedClasses } from '../styles/classes';
25
26
  import clsx from '../utils/clsx';
26
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
27
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
27
28
  import { useCommandPaletteContext } from './command-palette-context';
28
29
  var Root = styled('div', {
29
30
  name: commandPaletteComponentName,
@@ -54,9 +55,10 @@ var Inner = styled('div', {
54
55
  slot: 'ListInner',
55
56
  })(function () { return ({}); });
56
57
  export var CommandPaletteList = React.forwardRef(function (props, ref) {
57
- var children = props.children, className = props.className, style = props.style, listProps = __rest(props, ["children", "className", "style"]);
58
+ var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, style = props.style, sx = props.sx, listProps = __rest(props, ["children", "analyticsId", "classes", "className", "style", "sx"]);
58
59
  var context = useCommandPaletteContext();
59
- return (React.createElement(Root, __assign({ ref: ref, id: context.listId, role: "listbox", "aria-label": "Suggestions", className: clsx(commandPaletteClasses.list, className), style: style }, listProps),
60
- React.createElement(Inner, { ref: context.listInnerRef }, children)));
60
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
61
+ return (React.createElement(Root, __assign({ ref: ref, id: context.listId, role: "listbox", "aria-label": "Suggestions", sx: sx, className: clsx(classes.list, className), style: style }, (analyticsId && { 'data-analytics-id': analyticsId }), listProps),
62
+ React.createElement(Inner, { ref: context.listInnerRef, className: classes.listInner }, children)));
61
63
  });
62
64
  CommandPaletteList.displayName = 'CommandPaletteList';
package/esm/command-palette/command-palette-loading.js CHANGED
@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import * as React from 'react';
24
24
  import { Spinner } from '../spinner';
25
25
  import { styled } from '../styled';
26
+ import { useMergedClasses } from '../styles/classes';
26
27
  import clsx from '../utils/clsx';
27
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
28
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
28
29
  var Root = styled('div', {
29
30
  name: commandPaletteComponentName,
30
31
  slot: 'Loading',
@@ -42,8 +43,9 @@ var Root = styled('div', {
42
43
  });
43
44
  });
44
45
  export var CommandPaletteLoading = React.forwardRef(function (props, ref) {
45
- var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.children, children = _b === void 0 ? 'Loading...' : _b, className = props.className, loadingProps = __rest(props, ["progress", "children", "className"]);
46
- return (React.createElement(Root, __assign({ ref: ref, role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Loading results", className: clsx(commandPaletteClasses.loading, className) }, loadingProps),
46
+ var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.children, children = _b === void 0 ? 'Loading...' : _b, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, loadingProps = __rest(props, ["progress", "children", "analyticsId", "classes", "className", "sx"]);
47
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
48
+ return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Loading results", className: clsx(classes.loading, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), loadingProps),
47
49
  React.createElement(Spinner, null),
48
50
  children));
49
51
  });
package/esm/command-palette/command-palette-separator.js CHANGED
@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import { styled } from '../styled';
25
+ import { useMergedClasses } from '../styles/classes';
25
26
  import clsx from '../utils/clsx';
26
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
27
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
27
28
  import { useCommandPaletteState } from './command-palette-context';
28
29
  var Root = styled('div', {
29
30
  name: commandPaletteComponentName,
@@ -37,11 +38,12 @@ var Root = styled('div', {
37
38
  });
38
39
  });
39
40
  export var CommandPaletteSeparator = React.forwardRef(function (props, ref) {
40
- var _a = props.alwaysRender, alwaysRender = _a === void 0 ? false : _a, className = props.className, separatorProps = __rest(props, ["alwaysRender", "className"]);
41
+ var _a = props.alwaysRender, alwaysRender = _a === void 0 ? false : _a, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, separatorProps = __rest(props, ["alwaysRender", "analyticsId", "classes", "className", "sx"]);
41
42
  var search = useCommandPaletteState(function (state) { return state.search; });
42
43
  var isSearching = search.length > 0;
44
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
43
45
  if (!alwaysRender && isSearching)
44
46
  return null;
45
- return (React.createElement(Root, __assign({ ref: ref, role: "separator", className: clsx(commandPaletteClasses.separator, className) }, separatorProps)));
47
+ return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "separator", className: clsx(classes.separator, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), separatorProps)));
46
48
  });
47
49
  CommandPaletteSeparator.displayName = 'CommandPaletteSeparator';
package/esm/command-palette/command-palette-tabs.js CHANGED
@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import * as React from 'react';
24
24
  import useForkRef from '@mui/utils/useForkRef';
25
25
  import { styled } from '../styled';
26
+ import { useMergedClasses } from '../styles/classes';
26
27
  import clsx from '../utils/clsx';
27
- import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
28
+ import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
28
29
  var Root = styled('div', {
29
30
  name: commandPaletteComponentName,
30
31
  slot: 'Tabs',
@@ -34,7 +35,7 @@ var Root = styled('div', {
34
35
  display: 'flex',
35
36
  alignItems: 'center',
36
37
  gap: theme.spacing(0.5),
37
- padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2)),
38
+ padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.25)),
38
39
  overflowX: 'auto',
39
40
  scrollbarWidth: 'none',
40
41
  '&::-webkit-scrollbar': {
@@ -47,23 +48,24 @@ var TabButton = styled('button', {
47
48
  slot: 'Tab',
48
49
  })(function (_a) {
49
50
  var theme = _a.theme, ownerState = _a.ownerState;
50
- return (__assign(__assign(__assign({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(1), border: 'none', cursor: 'pointer', fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.fontWeightSemibold, fontFamily: theme.typography.caption.fontFamily, lineHeight: theme.typography.caption.lineHeight, whiteSpace: 'nowrap', userSelect: 'none', transition: theme.transitions.create(['background-color', 'color'], {
51
+ return (__assign(__assign(__assign({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(1.25)), borderRadius: theme.spacing(0.75), border: 'none', cursor: 'pointer', fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.fontWeightSemibold, fontFamily: theme.typography.caption.fontFamily, lineHeight: theme.typography.caption.lineHeight, whiteSpace: 'nowrap', userSelect: 'none', transition: theme.transitions.create(['background-color', 'color'], {
51
52
  duration: theme.transitions.duration.shortest,
52
53
  }), color: theme.tokens.color_fg_disabled, backgroundColor: 'transparent' }, (ownerState.active && {
53
54
  color: theme.tokens.color_fg_default,
54
- backgroundColor: theme.tokens.color_bg_state_neutral_subtle,
55
+ backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
55
56
  })), (!ownerState.active && {
56
57
  '&:hover': {
57
58
  backgroundColor: theme.tokens.color_bg_interactive_hover,
58
59
  },
59
60
  })), { '&:focus-visible': {
60
61
  outline: 'none',
61
- backgroundColor: theme.tokens.color_bg_interactive_hover,
62
+ backgroundColor: theme.tokens.color_bg_link_pressed,
62
63
  } }));
63
64
  });
64
65
  export var CommandPaletteTabs = React.forwardRef(function (props, ref) {
65
- var children = props.children, className = props.className, tabsProps = __rest(props, ["children", "className"]);
66
+ var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, tabsProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
66
67
  var tabsRef = React.useRef(null);
68
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
67
69
  var handleKeyDown = React.useCallback(function (e) {
68
70
  var tabs = tabsRef.current;
69
71
  if (!tabs)
@@ -93,15 +95,16 @@ export var CommandPaletteTabs = React.forwardRef(function (props, ref) {
93
95
  }
94
96
  }, []);
95
97
  var mergedRef = useForkRef(tabsRef, ref);
96
- return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", className: clsx(commandPaletteClasses.tabs, className), onKeyDown: handleKeyDown }, tabsProps), children));
98
+ return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", sx: sx, className: clsx(classes.tabs, className), onKeyDown: handleKeyDown }, (analyticsId && { 'data-analytics-id': analyticsId }), tabsProps), children));
97
99
  });
98
100
  CommandPaletteTabs.displayName = 'CommandPaletteTabs';
99
101
  export var CommandPaletteTab = React.forwardRef(function (props, ref) {
100
- var _a = props.active, active = _a === void 0 ? false : _a, onSelect = props.onSelect, children = props.children, className = props.className, onClick = props.onClick, tabProps = __rest(props, ["active", "onSelect", "children", "className", "onClick"]);
102
+ var _a = props.active, active = _a === void 0 ? false : _a, onSelect = props.onSelect, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, onClick = props.onClick, sx = props.sx, tabProps = __rest(props, ["active", "onSelect", "analyticsId", "classes", "children", "className", "onClick", "sx"]);
103
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
101
104
  var handleClick = React.useCallback(function (e) {
102
105
  onSelect === null || onSelect === void 0 ? void 0 : onSelect();
103
106
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
104
107
  }, [onSelect, onClick]);
105
- return (React.createElement(TabButton, __assign({ ref: ref, role: "tab", type: "button", "aria-selected": active, tabIndex: active ? 0 : -1, ownerState: { active: active }, className: clsx(commandPaletteClasses.tab, active && commandPaletteClasses.tabSelected, className), onClick: handleClick }, tabProps), children));
108
+ return (React.createElement(TabButton, __assign({ ref: ref, role: "tab", type: "button", "aria-selected": active, tabIndex: active ? 0 : -1, sx: sx, ownerState: { active: active }, className: clsx(classes.tab, active && classes.tabSelected, className), onClick: handleClick }, (analyticsId && { 'data-analytics-id': analyticsId }), tabProps), children));
106
109
  });
107
110
  CommandPaletteTab.displayName = 'CommandPaletteTab';
package/esm/command-palette/command-palette.js CHANGED
@@ -180,7 +180,7 @@ function useScheduleLayoutEffect() {
180
180
  }
181
181
  export var CommandPalette = React.forwardRef(function (props, ref) {
182
182
  var _a;
183
- var _b = props.label, label = _b === void 0 ? 'Command palette' : _b, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _c = props.shouldFilter, shouldFilter = _c === void 0 ? true : _c, _d = props.loop, loop = _d === void 0 ? false : _d, _onSelect = props.onSelect, children = props.children, className = props.className, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "children", "className"]);
183
+ var _b = props.label, label = _b === void 0 ? 'Command palette' : _b, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _c = props.shouldFilter, shouldFilter = _c === void 0 ? true : _c, _d = props.loop, loop = _d === void 0 ? false : _d, _onSelect = props.onSelect, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "analyticsId", "classes", "children", "className", "sx"]);
184
184
  var generatedId = useId();
185
185
  var id = (_a = rootProps.id) !== null && _a !== void 0 ? _a : generatedId;
186
186
  var listId = id ? "".concat(id, "-list") : undefined;
@@ -429,10 +429,10 @@ export var CommandPalette = React.forwardRef(function (props, ref) {
429
429
  }
430
430
  }
431
431
  }, [loop, store, propsRef]);
432
- var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, undefined);
432
+ var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
433
433
  return (React.createElement(CommandPaletteStoreContext.Provider, { value: store.current },
434
434
  React.createElement(CommandPaletteContext.Provider, { value: context },
435
- React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, rootProps), children))));
435
+ React.createElement(Root, __assign({ ref: ref, sx: sx, className: clsx(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps), children))));
436
436
  });
437
437
  CommandPalette.displayName = 'CommandPalette';
438
438
  export { VALUE_ATTR };
package/esm/input/input-label/input-label-overrides.js CHANGED
@@ -17,6 +17,7 @@ export var createMuiInputLabelOverrides = function (_a) {
17
17
  _b["&.".concat(inputLabelClasses.shrink)] = {
18
18
  transform: 'none',
19
19
  },
20
+ _b.userSelect = 'auto',
20
21
  _b),
21
22
  asterisk: {
22
23
  color: tokens.color_fg_state_neutral,
package/esm/segmented-control/segment/segment.js CHANGED
@@ -58,7 +58,7 @@ var IconWrapper = styled('span')({
58
58
  });
59
59
  export var Segment = React.forwardRef(function (_a, ref) {
60
60
  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']);
61
- 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;
61
+ 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;
62
62
  var selected = selectedValue === value;
63
63
  var ownerState = {
64
64
  selected: selected,
@@ -71,7 +71,7 @@ export var Segment = React.forwardRef(function (_a, ref) {
71
71
  onChange(value);
72
72
  }
73
73
  };
74
- 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),
74
+ 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),
75
75
  icon && React.createElement(IconWrapper, { "aria-hidden": "true" }, icon),
76
76
  label));
77
77
  });
package/esm/segmented-control/segmented-control.js CHANGED
@@ -87,6 +87,19 @@ export var SegmentedControl = function (_a) {
87
87
  observer.observe(containerRef.current);
88
88
  return function () { return observer.disconnect(); };
89
89
  }, [updateIndicator]);
90
+ var _d = __read(React.useState(null), 2), focusedValue = _d[0], setFocusedValue = _d[1];
91
+ var tabFocusValue = React.useMemo(function () {
92
+ var _a, _b;
93
+ if (focusedValue != null)
94
+ return focusedValue;
95
+ var segments = React.Children.toArray(children).filter(function (child) {
96
+ return React.isValidElement(child);
97
+ });
98
+ var selected = segments.find(function (child) { return child.props.value === value; });
99
+ if (selected && !selected.props.disabled)
100
+ return value;
101
+ 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;
102
+ }, [focusedValue, children, value]);
90
103
  var handleKeyDown = function (e) {
91
104
  if (!containerRef.current)
92
105
  return;
@@ -111,14 +124,32 @@ export var SegmentedControl = function (_a) {
111
124
  e.preventDefault();
112
125
  nextIndex = segments.length - 1;
113
126
  }
127
+ else if (e.key === 'Enter' || e.key === ' ') {
128
+ e.preventDefault();
129
+ var focused = document.activeElement;
130
+ if (focused && focused.dataset.value != null) {
131
+ var val = focused.dataset.numericValue != null ? Number(focused.dataset.value) : focused.dataset.value;
132
+ onChange === null || onChange === void 0 ? void 0 : onChange(val);
133
+ }
134
+ return;
135
+ }
114
136
  if (nextIndex !== null) {
115
- segments[nextIndex].focus();
116
- segments[nextIndex].click();
137
+ var nextEl = segments[nextIndex];
138
+ nextEl.focus();
139
+ var val = nextEl.dataset.numericValue != null ? Number(nextEl.dataset.value) : nextEl.dataset.value;
140
+ if (val != null)
141
+ setFocusedValue(val);
142
+ }
143
+ };
144
+ var handleBlur = function (e) {
145
+ var _a;
146
+ if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
147
+ setFocusedValue(null);
117
148
  }
118
149
  };
119
- var ctx = React.useMemo(function () { return ({ value: value, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, onChange, size, fullWidth]);
150
+ var ctx = React.useMemo(function () { return ({ value: value, tabFocusValue: tabFocusValue, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, tabFocusValue, onChange, size, fullWidth]);
120
151
  return (React.createElement(SegmentedControlContext.Provider, { value: ctx },
121
- React.createElement(Root, __assign({ ref: containerRef, fullWidth: fullWidth, role: "radiogroup", onKeyDown: handleKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
152
+ 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),
122
153
  React.createElement(Indicator, { "aria-hidden": "true", style: indicatorStyle }),
123
154
  children)));
124
155
  };
package/input/input-label/input-label-overrides.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import type { InputLabelProps, InputLabelClassKey } from '@mui/material/InputLabel';
1
+ import type { InputLabelClassKey, InputLabelProps } from '@mui/material/InputLabel';
2
2
  import type { ComponentOverrideCreator } from '../../theme/create-component-overrides';
3
3
  export declare const createMuiInputLabelOverrides: ComponentOverrideCreator<InputLabelProps, InputLabelClassKey>;
package/input/input-label/input-label-overrides.js CHANGED
@@ -20,6 +20,7 @@ var createMuiInputLabelOverrides = function (_a) {
20
20
  _b["&.".concat(InputLabel_1.inputLabelClasses.shrink)] = {
21
21
  transform: 'none',
22
22
  },
23
+ _b.userSelect = 'auto',
23
24
  _b),
24
25
  asterisk: {
25
26
  color: tokens.color_fg_state_neutral,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.10.5",
3
+ "version": "2.10.7",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/segmented-control/segment/segment.js CHANGED
@@ -94,7 +94,7 @@ var IconWrapper = (0, styled_1.styled)('span')({
94
94
  });
95
95
  exports.Segment = React.forwardRef(function (_a, ref) {
96
96
  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']);
97
- 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;
97
+ 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;
98
98
  var selected = selectedValue === value;
99
99
  var ownerState = {
100
100
  selected: selected,
@@ -107,7 +107,7 @@ exports.Segment = React.forwardRef(function (_a, ref) {
107
107
  onChange(value);
108
108
  }
109
109
  };
110
- 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),
110
+ 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),
111
111
  icon && React.createElement(IconWrapper, { "aria-hidden": "true" }, icon),
112
112
  label));
113
113
  });
package/segmented-control/segmented-control-context.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  export interface ISegmentedControlContextValue {
3
3
  value?: string | number;
4
+ tabFocusValue?: string | number;
4
5
  size?: 'small' | 'medium';
5
6
  fullWidth?: boolean;
6
7
  onChange?(value: string | number): void;
package/segmented-control/segmented-control.js CHANGED
@@ -123,6 +123,19 @@ var SegmentedControl = function (_a) {
123
123
  observer.observe(containerRef.current);
124
124
  return function () { return observer.disconnect(); };
125
125
  }, [updateIndicator]);
126
+ var _d = __read(React.useState(null), 2), focusedValue = _d[0], setFocusedValue = _d[1];
127
+ var tabFocusValue = React.useMemo(function () {
128
+ var _a, _b;
129
+ if (focusedValue != null)
130
+ return focusedValue;
131
+ var segments = React.Children.toArray(children).filter(function (child) {
132
+ return React.isValidElement(child);
133
+ });
134
+ var selected = segments.find(function (child) { return child.props.value === value; });
135
+ if (selected && !selected.props.disabled)
136
+ return value;
137
+ 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;
138
+ }, [focusedValue, children, value]);
126
139
  var handleKeyDown = function (e) {
127
140
  if (!containerRef.current)
128
141
  return;
@@ -147,14 +160,32 @@ var SegmentedControl = function (_a) {
147
160
  e.preventDefault();
148
161
  nextIndex = segments.length - 1;
149
162
  }
163
+ else if (e.key === 'Enter' || e.key === ' ') {
164
+ e.preventDefault();
165
+ var focused = document.activeElement;
166
+ if (focused && focused.dataset.value != null) {
167
+ var val = focused.dataset.numericValue != null ? Number(focused.dataset.value) : focused.dataset.value;
168
+ onChange === null || onChange === void 0 ? void 0 : onChange(val);
169
+ }
170
+ return;
171
+ }
150
172
  if (nextIndex !== null) {
151
- segments[nextIndex].focus();
152
- segments[nextIndex].click();
173
+ var nextEl = segments[nextIndex];
174
+ nextEl.focus();
175
+ var val = nextEl.dataset.numericValue != null ? Number(nextEl.dataset.value) : nextEl.dataset.value;
176
+ if (val != null)
177
+ setFocusedValue(val);
178
+ }
179
+ };
180
+ var handleBlur = function (e) {
181
+ var _a;
182
+ if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
183
+ setFocusedValue(null);
153
184
  }
154
185
  };
155
- var ctx = React.useMemo(function () { return ({ value: value, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, onChange, size, fullWidth]);
186
+ var ctx = React.useMemo(function () { return ({ value: value, tabFocusValue: tabFocusValue, onChange: onChange, size: size, fullWidth: fullWidth }); }, [value, tabFocusValue, onChange, size, fullWidth]);
156
187
  return (React.createElement(segmented_control_context_1.SegmentedControlContext.Provider, { value: ctx },
157
- React.createElement(Root, __assign({ ref: containerRef, fullWidth: fullWidth, role: "radiogroup", onKeyDown: handleKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }, (analyticsId && { 'data-analytics-id': analyticsId }), rest),
188
+ 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),
158
189
  React.createElement(Indicator, { "aria-hidden": "true", style: indicatorStyle }),
159
190
  children)));
160
191
  };