@deque/cauldron-react 6.21.0 → 6.22.0

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 (4) hide show
  1. package/lib/components/ActionList/ActionListItem.d.ts +2 -0
  2. package/lib/components/Button/index.d.ts +1 -1
  3. package/lib/index.js +15 -17
  4. package/package.json +1 -1
package/lib/components/ActionList/ActionListItem.d.ts CHANGED
@@ -20,6 +20,8 @@ interface ActionListItemProps extends PolymorphicProps<React.HTMLAttributes<HTML
20
20
  disabled?: boolean;
21
21
  /** A callback function that is called when an action item is selected. */
22
22
  onAction?: (event: onActionEvent) => void;
23
+ /** Alternative variant for action items */
24
+ variant?: 'default' | 'danger';
23
25
  }
24
26
  declare const ActionListItem: PolymorphicComponent<ActionListItemProps>;
25
27
  export default ActionListItem;
package/lib/components/Button/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { type ButtonHTMLAttributes, type Ref } from 'react';
2
2
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
3
  buttonRef?: Ref<HTMLButtonElement>;
4
- variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'link' | 'tag' | 'badge';
4
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'danger' | 'danger-secondary' | 'link' | 'tag' | 'badge';
5
5
  thin?: boolean;
6
6
  }
7
7
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
package/lib/index.js CHANGED
@@ -1714,6 +1714,8 @@ var Button = React.forwardRef(function (_a, ref) {
1714
1714
  'Button--primary': variant === 'primary',
1715
1715
  'Button--secondary': variant === 'secondary',
1716
1716
  'Button--error': variant === 'error',
1717
+ 'Button--danger': variant === 'danger',
1718
+ 'Button--danger-secondary': variant === 'danger-secondary',
1717
1719
  'Button--tertiary': variant === 'tertiary',
1718
1720
  Link: variant === 'link',
1719
1721
  Tag: variant === 'tag',
@@ -3793,11 +3795,16 @@ var Listbox = React.forwardRef(function (_a, ref) {
3793
3795
  setActiveOption(lastOption);
3794
3796
  break;
3795
3797
  case enter:
3796
- case space:
3797
- activeOption && handleSelect(activeOption);
3798
+ case space: {
3799
+ if (activeOption && !isDisabledOption(activeOption)) {
3800
+ // Since focus is managed in the listbox using `aria-activedescendant`
3801
+ // we want to simulate a keypress on the current active list item
3802
+ activeOption.element.click();
3803
+ }
3798
3804
  break;
3805
+ }
3799
3806
  }
3800
- }, [options, activeOption, navigation, handleSelect]);
3807
+ }, [options, activeOption, navigation]);
3801
3808
  var handleFocus = React.useCallback(function (event) {
3802
3809
  if (focusStrategy === 'first') {
3803
3810
  var firstOption = !focusDisabledOptions
@@ -4930,17 +4937,6 @@ var ActionList = React.forwardRef(function (_a, ref) {
4930
4937
  onAction(key, event);
4931
4938
  }
4932
4939
  }, [onAction]);
4933
- var handleKeyDown = React.useCallback(function (event) {
4934
- var _a;
4935
- if (event.defaultPrevented) {
4936
- return;
4937
- }
4938
- // Since focus is managed in the action list using `aria-activedescendant`
4939
- // we want to simulate a keypress on the current active list item
4940
- if (event.key === 'Enter' || event.key === ' ') {
4941
- (_a = activeElement.current) === null || _a === void 0 ? void 0 : _a.click();
4942
- }
4943
- }, []);
4944
4940
  return (
4945
4941
  // Note: we should be able to use listbox without passing a prop
4946
4942
  // value for "multiselect"
@@ -4950,13 +4946,13 @@ var ActionList = React.forwardRef(function (_a, ref) {
4950
4946
  /* Listbox comes with an explicit role of "listbox", but we want to either
4951
4947
  * use the role from props, or default to the intrinsic role */
4952
4948
  // eslint-disable-next-line jsx-a11y/aria-role
4953
- role: undefined, "aria-multiselectable": actionListContext.role === 'listbox' ? undefined : null, className: classNames__default["default"]('ActionList', className) }, props, { onKeyDown: handleKeyDown, onActiveChange: handleActiveChange, navigation: "bound" }),
4949
+ role: undefined, "aria-multiselectable": actionListContext.role === 'listbox' ? undefined : null, className: classNames__default["default"]('ActionList', className) }, props, { onActiveChange: handleActiveChange, navigation: "bound" }),
4954
4950
  React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
4955
4951
  });
4956
4952
  ActionList.displayName = 'ActionList';
4957
4953
 
4958
4954
  var ActionListItem = React.forwardRef(function (_a, ref) {
4959
- var _b = _a.as, Component = _b === void 0 ? 'li' : _b, actionKey = _a.actionKey, className = _a.className, description = _a.description, selected = _a.selected, leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, onAction = _a.onAction, children = _a.children, props = tslib.__rest(_a, ["as", "actionKey", "className", "description", "selected", "leadingIcon", "trailingIcon", "onAction", "children"]);
4955
+ var _b = _a.as, Component = _b === void 0 ? 'li' : _b, actionKey = _a.actionKey, className = _a.className, description = _a.description, selected = _a.selected, leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, onAction = _a.onAction, children = _a.children, variant = _a.variant, props = tslib.__rest(_a, ["as", "actionKey", "className", "description", "selected", "leadingIcon", "trailingIcon", "onAction", "children", "variant"]);
4960
4956
  var _c = tslib.__read(nextId.useId(1, 'action-list-item'), 1), id = _c[0];
4961
4957
  var actionListItemRef = useSharedRef(ref);
4962
4958
  var labelRef = React.useRef(null);
@@ -5022,7 +5018,9 @@ var ActionListItem = React.forwardRef(function (_a, ref) {
5022
5018
  }, [isActive]);
5023
5019
  var allowsSelection = !!selectionType;
5024
5020
  var isSelected = allowsSelection ? !!selected : undefined;
5025
- return (React__default["default"].createElement(ListboxOption, tslib.__assign({ as: Component, ref: actionListItemRef, id: id, role: listItemRole, className: classNames__default["default"]('ActionListItem', className), activeClass: "ActionListItem--active", "aria-selected": undefined, "aria-checked": listItemRole !== 'option' ? isSelected : undefined, onClick: handleAction }, props),
5021
+ return (React__default["default"].createElement(ListboxOption, tslib.__assign({ as: Component, ref: actionListItemRef, id: id, role: listItemRole, className: classNames__default["default"]('ActionListItem', className, {
5022
+ 'ActionListItem--danger': variant === 'danger'
5023
+ }), activeClass: "ActionListItem--active", "aria-selected": undefined, "aria-checked": listItemRole !== 'option' ? isSelected : undefined, onClick: handleAction }, props),
5026
5024
  allowsSelection && (React__default["default"].createElement("span", { className: "ActionListItem__selection" },
5027
5025
  React__default["default"].createElement(Icon, { type: "check" }))),
5028
5026
  leadingIcon && (React__default["default"].createElement("span", { className: "ActionListItem__leadingIcon" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "6.21.0",
3
+ "version": "6.22.0",
4
4
  "license": "MPL-2.0",
5
5
  "description": "Fully accessible react components library for Deque Cauldron",
6
6
  "homepage": "https://cauldron.dequelabs.com/",