@deque/cauldron-react 6.20.2-canary.fdaa9831 → 6.21.0-canary.52118e5a

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 (8) 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/components/Icon/types.d.ts +1 -1
  4. package/lib/filter.js +3 -3
  5. package/lib/index.js +35 -26
  6. package/lib/utils/useIntersectionRef.d.ts +2 -1
  7. package/package.json +1 -1
  8. package/lib/filter-solid.js +0 -39
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/components/Icon/types.d.ts CHANGED
@@ -2,6 +2,6 @@
2
2
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
3
3
  */
4
4
  /** IconType represents each valid icon type. */
5
- export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'broken-image' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'images' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload';
5
+ export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'broken-image' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'images' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload' | 'filter-solid';
6
6
  /** iconTypes holds each valid icon type. */
7
7
  export declare const iconTypes: string[];
package/lib/filter.js CHANGED
@@ -31,9 +31,9 @@ const SvgFilter = props => /*#__PURE__*/React__namespace.createElement("svg", _e
31
31
  height: 24,
32
32
  width: 24
33
33
  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
34
- d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z",
35
- fill: "currentColor",
36
- vectorEffect: "non-scaling-stroke"
34
+ d: "M18.65 4.67H5.34a.616.616 0 0 0-.62.41c-.12.24-.06.55.16.73L10 10.94V16c0 .18.07.35.2.47l2.67 2.67c.12.13.29.2.47.2.09 0 .18-.02.26-.05.26-.1.42-.35.4-.63v-7.72l5.13-5.13c.21-.18.28-.48.15-.73a.628.628 0 0 0-.63-.41z",
35
+ vectorEffect: "non-scaling-stroke",
36
+ fill: "currentColor"
37
37
  })));
38
38
 
39
39
  exports["default"] = SvgFilter;
package/lib/index.js CHANGED
@@ -142,7 +142,6 @@ var iconTypes = [
142
142
  'export-solid',
143
143
  'external-link',
144
144
  'eye',
145
- 'filter-solid',
146
145
  'filter',
147
146
  'flag',
148
147
  'gears',
@@ -198,7 +197,8 @@ var iconTypes = [
198
197
  'triangle-left',
199
198
  'triangle-right',
200
199
  'twitter',
201
- 'upload'
200
+ 'upload',
201
+ 'filter-solid'
202
202
  ];
203
203
 
204
204
  function __variableDynamicImportRuntime0__(path) {
@@ -229,7 +229,6 @@ function __variableDynamicImportRuntime0__(path) {
229
229
  case './icons/export-solid.svg': return Promise.resolve().then(function () { return require('./export-solid.js'); });
230
230
  case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link.js'); });
231
231
  case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye.js'); });
232
- case './icons/filter-solid.svg': return Promise.resolve().then(function () { return require('./filter-solid.js'); });
233
232
  case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter.js'); });
234
233
  case './icons/flag.svg': return Promise.resolve().then(function () { return require('./flag.js'); });
235
234
  case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears.js'); });
@@ -290,6 +289,15 @@ function __variableDynamicImportRuntime0__(path) {
290
289
  })
291
290
  }
292
291
  }
292
+ /**
293
+ * Some icons have a mapped type different from their filename;
294
+ * This is only a temporary measure to consolidate similar icons
295
+ * until we can address Cauldron's iconography.
296
+ * see: https://github.com/dequelabs/cauldron/issues/869
297
+ */
298
+ var MAPPED_TYPES = {
299
+ 'filter-solid': 'filter'
300
+ };
293
301
  var Icon = React.forwardRef(function (_a, ref) {
294
302
  var _b;
295
303
  var label = _a.label, className = _a.className, type = _a.type, other = tslib.__rest(_a, ["label", "className", "type"]);
@@ -306,7 +314,8 @@ var Icon = React.forwardRef(function (_a, ref) {
306
314
  if (process.env.NODE_ENV === 'test') {
307
315
  return;
308
316
  }
309
- __variableDynamicImportRuntime0__("./icons/".concat(name, ".svg"))
317
+ var iconName = MAPPED_TYPES[name] || name;
318
+ __variableDynamicImportRuntime0__("./icons/".concat(iconName, ".svg"))
310
319
  .then(function (icon) {
311
320
  isMounted.current && setIcon(function () { return icon.default; });
312
321
  })
@@ -1705,6 +1714,8 @@ var Button = React.forwardRef(function (_a, ref) {
1705
1714
  'Button--primary': variant === 'primary',
1706
1715
  'Button--secondary': variant === 'secondary',
1707
1716
  'Button--error': variant === 'error',
1717
+ 'Button--danger': variant === 'danger',
1718
+ 'Button--danger-secondary': variant === 'danger-secondary',
1708
1719
  'Button--tertiary': variant === 'tertiary',
1709
1720
  Link: variant === 'link',
1710
1721
  Tag: variant === 'tag',
@@ -1781,7 +1792,9 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
1781
1792
  ? reactDom$1.autoPlacement({
1782
1793
  alignment: getAutoAlignment(initialPlacement)
1783
1794
  })
1784
- : reactDom$1.flip(),
1795
+ : reactDom$1.flip({
1796
+ fallbackAxisSideDirection: 'start'
1797
+ }),
1785
1798
  reactDom$1.shift({ crossAxis: false })
1786
1799
  ].filter(Boolean),
1787
1800
  elements: {
@@ -3782,11 +3795,16 @@ var Listbox = React.forwardRef(function (_a, ref) {
3782
3795
  setActiveOption(lastOption);
3783
3796
  break;
3784
3797
  case enter:
3785
- case space:
3786
- 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
+ }
3787
3804
  break;
3805
+ }
3788
3806
  }
3789
- }, [options, activeOption, navigation, handleSelect]);
3807
+ }, [options, activeOption, navigation]);
3790
3808
  var handleFocus = React.useCallback(function (event) {
3791
3809
  if (focusStrategy === 'first') {
3792
3810
  var firstOption = !focusDisabledOptions
@@ -3965,12 +3983,13 @@ function useComboboxContext() {
3965
3983
  * const intersectionRef = useIntersectionRef<HTMLElement>(elementRef)
3966
3984
  * return <span ref={elementRef}>...</span>
3967
3985
  */
3968
- function useIntersectionRef(element, intersectionObserverOptions) {
3986
+ function useIntersectionRef(elementOrRef, intersectionObserverOptions) {
3969
3987
  if (intersectionObserverOptions === void 0) { intersectionObserverOptions = {
3970
3988
  root: null,
3971
3989
  threshold: 1.0
3972
3990
  }; }
3973
3991
  var intersectionRef = React.useRef(null);
3992
+ var element = resolveElement(elementOrRef);
3974
3993
  React.useEffect(function () {
3975
3994
  // istanbul ignore else
3976
3995
  if ('IntersectionObserver' in globalThis &&
@@ -3978,8 +3997,7 @@ function useIntersectionRef(element, intersectionObserverOptions) {
3978
3997
  if (typeof element === 'undefined' || element === null) {
3979
3998
  return;
3980
3999
  }
3981
- if (!(element instanceof HTMLElement) &&
3982
- !(element.current instanceof HTMLElement)) {
4000
+ if (!(element instanceof HTMLElement)) {
3983
4001
  console.warn('An element or ref was provided to useIntersectionRef that was not an HTMLElement.');
3984
4002
  return;
3985
4003
  }
@@ -3988,7 +4006,7 @@ function useIntersectionRef(element, intersectionObserverOptions) {
3988
4006
  intersectionRef.current = entry;
3989
4007
  };
3990
4008
  var observer_1 = new IntersectionObserver(handleIntersection, intersectionObserverOptions);
3991
- observer_1.observe(element instanceof HTMLElement ? element : element.current);
4009
+ observer_1.observe(element);
3992
4010
  return function () {
3993
4011
  observer_1.disconnect();
3994
4012
  };
@@ -4919,17 +4937,6 @@ var ActionList = React.forwardRef(function (_a, ref) {
4919
4937
  onAction(key, event);
4920
4938
  }
4921
4939
  }, [onAction]);
4922
- var handleKeyDown = React.useCallback(function (event) {
4923
- var _a;
4924
- if (event.defaultPrevented) {
4925
- return;
4926
- }
4927
- // Since focus is managed in the action list using `aria-activedescendant`
4928
- // we want to simulate a keypress on the current active list item
4929
- if (event.key === 'Enter' || event.key === ' ') {
4930
- (_a = activeElement.current) === null || _a === void 0 ? void 0 : _a.click();
4931
- }
4932
- }, []);
4933
4940
  return (
4934
4941
  // Note: we should be able to use listbox without passing a prop
4935
4942
  // value for "multiselect"
@@ -4939,13 +4946,13 @@ var ActionList = React.forwardRef(function (_a, ref) {
4939
4946
  /* Listbox comes with an explicit role of "listbox", but we want to either
4940
4947
  * use the role from props, or default to the intrinsic role */
4941
4948
  // eslint-disable-next-line jsx-a11y/aria-role
4942
- 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" }),
4943
4950
  React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
4944
4951
  });
4945
4952
  ActionList.displayName = 'ActionList';
4946
4953
 
4947
4954
  var ActionListItem = React.forwardRef(function (_a, ref) {
4948
- 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"]);
4949
4956
  var _c = tslib.__read(nextId.useId(1, 'action-list-item'), 1), id = _c[0];
4950
4957
  var actionListItemRef = useSharedRef(ref);
4951
4958
  var labelRef = React.useRef(null);
@@ -5011,7 +5018,9 @@ var ActionListItem = React.forwardRef(function (_a, ref) {
5011
5018
  }, [isActive]);
5012
5019
  var allowsSelection = !!selectionType;
5013
5020
  var isSelected = allowsSelection ? !!selected : undefined;
5014
- 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),
5015
5024
  allowsSelection && (React__default["default"].createElement("span", { className: "ActionListItem__selection" },
5016
5025
  React__default["default"].createElement(Icon, { type: "check" }))),
5017
5026
  leadingIcon && (React__default["default"].createElement("span", { className: "ActionListItem__leadingIcon" },
package/lib/utils/useIntersectionRef.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { MutableRefObject } from 'react';
2
+ import type { ElementOrRef } from '../types';
2
3
  /**
3
4
  * When a component needs to track intersection via a ref, useIntersectionRef
4
5
  * will return a ref object containing the results from IntersectionObserver
@@ -9,4 +10,4 @@ import type { MutableRefObject } from 'react';
9
10
  * const intersectionRef = useIntersectionRef<HTMLElement>(elementRef)
10
11
  * return <span ref={elementRef}>...</span>
11
12
  */
12
- export default function useIntersectionRef<T extends HTMLElement>(element: T | MutableRefObject<T>, intersectionObserverOptions?: IntersectionObserverInit): MutableRefObject<IntersectionObserverEntry | null>;
13
+ export default function useIntersectionRef<T extends HTMLElement>(elementOrRef: ElementOrRef<T>, intersectionObserverOptions?: IntersectionObserverInit): MutableRefObject<IntersectionObserverEntry | null>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "6.20.2-canary.fdaa9831",
3
+ "version": "6.21.0-canary.52118e5a",
4
4
  "license": "MPL-2.0",
5
5
  "description": "Fully accessible react components library for Deque Cauldron",
6
6
  "homepage": "https://cauldron.dequelabs.com/",
package/lib/filter-solid.js DELETED
@@ -1,39 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- function _interopNamespace(e) {
6
- if (e && e.__esModule) return e;
7
- var n = Object.create(null);
8
- if (e) {
9
- Object.keys(e).forEach(function (k) {
10
- if (k !== 'default') {
11
- var d = Object.getOwnPropertyDescriptor(e, k);
12
- Object.defineProperty(n, k, d.get ? d : {
13
- enumerable: true,
14
- get: function () { return e[k]; }
15
- });
16
- }
17
- });
18
- }
19
- n["default"] = e;
20
- return Object.freeze(n);
21
- }
22
-
23
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
24
-
25
- var _path;
26
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
- const SvgFilterSolid = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
28
- overflow: "visible",
29
- preserveAspectRatio: "none",
30
- viewBox: "0 0 24 24",
31
- height: 24,
32
- width: 24
33
- }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
34
- d: "M18.65 4.67H5.34a.616.616 0 0 0-.62.41c-.12.24-.06.55.16.73L10 10.94V16c0 .18.07.35.2.47l2.67 2.67c.12.13.29.2.47.2.09 0 .18-.02.26-.05.26-.1.42-.35.4-.63v-7.72l5.13-5.13c.21-.18.28-.48.15-.73a.628.628 0 0 0-.63-.41z",
35
- vectorEffect: "non-scaling-stroke",
36
- fill: "currentColor"
37
- })));
38
-
39
- exports["default"] = SvgFilterSolid;