@deque/cauldron-react 6.20.2 → 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 (9) 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/Combobox/Combobox.d.ts +1 -0
  4. package/lib/components/Icon/types.d.ts +1 -1
  5. package/lib/filter.js +3 -3
  6. package/lib/index.js +67 -47
  7. package/lib/utils/useIntersectionRef.d.ts +2 -1
  8. package/package.json +1 -1
  9. 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/Combobox/Combobox.d.ts CHANGED
@@ -21,6 +21,7 @@ interface BaseComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
21
21
  renderNoResults?: (() => React.JSX.Element) | React.ReactElement;
22
22
  portal?: React.RefObject<HTMLElement> | HTMLElement;
23
23
  inputRef?: React.Ref<HTMLInputElement>;
24
+ description?: React.ReactNode;
24
25
  }
25
26
  interface SingleSelectComboboxProps extends BaseComboboxProps {
26
27
  value?: ComboboxValue;
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,15 +1792,16 @@ 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: {
1788
- reference: resolveElement(target),
1789
- floating: ref.current
1801
+ reference: resolveElement(target)
1790
1802
  },
1791
1803
  whileElementsMounted: dom.autoUpdate
1792
- }), floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
1804
+ }), refs = _f.refs, floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
1793
1805
  useEscapeKey({
1794
1806
  active: open,
1795
1807
  capture: true,
@@ -1819,7 +1831,10 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
1819
1831
  });
1820
1832
  }
1821
1833
  }, [onShiftChange, (_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.x, (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y]);
1822
- var AnchoredOverlayComponent = (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
1834
+ var AnchoredOverlayComponent = (React__default["default"].createElement(Component, tslib.__assign({ ref: function (element) {
1835
+ refs.setFloating(element);
1836
+ ref.current = element;
1837
+ } }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
1823
1838
  if (portal && !isBrowser()) {
1824
1839
  return null;
1825
1840
  }
@@ -3780,11 +3795,16 @@ var Listbox = React.forwardRef(function (_a, ref) {
3780
3795
  setActiveOption(lastOption);
3781
3796
  break;
3782
3797
  case enter:
3783
- case space:
3784
- 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
+ }
3785
3804
  break;
3805
+ }
3786
3806
  }
3787
- }, [options, activeOption, navigation, handleSelect]);
3807
+ }, [options, activeOption, navigation]);
3788
3808
  var handleFocus = React.useCallback(function (event) {
3789
3809
  if (focusStrategy === 'first') {
3790
3810
  var firstOption = !focusDisabledOptions
@@ -3963,12 +3983,13 @@ function useComboboxContext() {
3963
3983
  * const intersectionRef = useIntersectionRef<HTMLElement>(elementRef)
3964
3984
  * return <span ref={elementRef}>...</span>
3965
3985
  */
3966
- function useIntersectionRef(element, intersectionObserverOptions) {
3986
+ function useIntersectionRef(elementOrRef, intersectionObserverOptions) {
3967
3987
  if (intersectionObserverOptions === void 0) { intersectionObserverOptions = {
3968
3988
  root: null,
3969
3989
  threshold: 1.0
3970
3990
  }; }
3971
3991
  var intersectionRef = React.useRef(null);
3992
+ var element = resolveElement(elementOrRef);
3972
3993
  React.useEffect(function () {
3973
3994
  // istanbul ignore else
3974
3995
  if ('IntersectionObserver' in globalThis &&
@@ -3976,8 +3997,7 @@ function useIntersectionRef(element, intersectionObserverOptions) {
3976
3997
  if (typeof element === 'undefined' || element === null) {
3977
3998
  return;
3978
3999
  }
3979
- if (!(element instanceof HTMLElement) &&
3980
- !(element.current instanceof HTMLElement)) {
4000
+ if (!(element instanceof HTMLElement)) {
3981
4001
  console.warn('An element or ref was provided to useIntersectionRef that was not an HTMLElement.');
3982
4002
  return;
3983
4003
  }
@@ -3986,7 +4006,7 @@ function useIntersectionRef(element, intersectionObserverOptions) {
3986
4006
  intersectionRef.current = entry;
3987
4007
  };
3988
4008
  var observer_1 = new IntersectionObserver(handleIntersection, intersectionObserverOptions);
3989
- observer_1.observe(element instanceof HTMLElement ? element : element.current);
4009
+ observer_1.observe(element);
3990
4010
  return function () {
3991
4011
  observer_1.disconnect();
3992
4012
  };
@@ -4156,7 +4176,7 @@ var ComboboxNoResults = function (_a) {
4156
4176
  return (React__default["default"].createElement("div", { className: "ComboboxListbox__empty", role: "alert", "aria-live": "polite" }, children || 'No results found.'));
4157
4177
  };
4158
4178
  var Combobox = React.forwardRef(function (_a, ref) {
4159
- var propId = _a.id, className = _a.className, label = _a.label, children = _a.children, _b = _a.options, options = _b === void 0 ? [] : _b, propValue = _a.value, defaultValue = _a.defaultValue, propInputValue = _a.inputValue, defaultInputValue = _a.defaultInputValue, _c = _a.multiselect, multiselect = _c === void 0 ? false : _c, _d = _a.requiredText, requiredText = _d === void 0 ? 'Required' : _d, error = _a.error, _e = _a.autocomplete, autocomplete = _e === void 0 ? 'manual' : _e, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, name = _a.name, renderNoResults = _a.renderNoResults, portal = _a.portal, _f = _a.inputRef, propInputRef = _f === void 0 ? null : _f, ariaDescribedby = _a["aria-describedby"], _g = _a.disabled, disabled = _g === void 0 ? false : _g, props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "inputValue", "defaultInputValue", "multiselect", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "name", "renderNoResults", "portal", "inputRef", 'aria-describedby', "disabled"]);
4179
+ var propId = _a.id, className = _a.className, label = _a.label, children = _a.children, _b = _a.options, options = _b === void 0 ? [] : _b, propValue = _a.value, defaultValue = _a.defaultValue, propInputValue = _a.inputValue, defaultInputValue = _a.defaultInputValue, _c = _a.multiselect, multiselect = _c === void 0 ? false : _c, _d = _a.requiredText, requiredText = _d === void 0 ? 'Required' : _d, error = _a.error, _e = _a.autocomplete, autocomplete = _e === void 0 ? 'manual' : _e, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, name = _a.name, renderNoResults = _a.renderNoResults, portal = _a.portal, _f = _a.inputRef, propInputRef = _f === void 0 ? null : _f, description = _a.description, ariaDescribedby = _a["aria-describedby"], _g = _a.disabled, disabled = _g === void 0 ? false : _g, props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "inputValue", "defaultInputValue", "multiselect", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "name", "renderNoResults", "portal", "inputRef", "description", 'aria-describedby', "disabled"]);
4160
4180
  var _h = tslib.__read(React.useState(new Map()), 2), matchingOptions = _h[0], setMatchingOptions = _h[1];
4161
4181
  var _j = tslib.__read(React.useState(function () {
4162
4182
  var value = defaultValue || propValue;
@@ -4500,9 +4520,15 @@ var Combobox = React.forwardRef(function (_a, ref) {
4500
4520
  comboboxOptions,
4501
4521
  noMatchingOptions));
4502
4522
  var errorId = "".concat(id, "-error");
4503
- var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': error
4504
- ? addIdRef(ariaDescribedby, errorId)
4505
- : ariaDescribedby });
4523
+ var descriptionId = "".concat(id, "-description");
4524
+ var describedby = ariaDescribedby;
4525
+ if (description) {
4526
+ describedby = addIdRef(describedby, descriptionId);
4527
+ }
4528
+ if (error) {
4529
+ describedby = addIdRef(describedby, errorId);
4530
+ }
4531
+ var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': describedby });
4506
4532
  return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', { 'Combobox--multiselect': multiselect }, className), ref: comboboxRef },
4507
4533
  name &&
4508
4534
  formValues.map(function (formValue, index) { return (React__default["default"].createElement("input", { type: "hidden", key: index, name: name, value: formValue })); }),
@@ -4512,6 +4538,10 @@ var Combobox = React.forwardRef(function (_a, ref) {
4512
4538
  }), id: "".concat(id, "-label"), htmlFor: "".concat(id, "-input") },
4513
4539
  React__default["default"].createElement("span", null, label),
4514
4540
  isRequired && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
4541
+ description && (React__default["default"].createElement("span", { className: "Field__description", id: descriptionId }, description)),
4542
+ hasError && (React__default["default"].createElement("div", { className: "Field__error", id: errorId },
4543
+ React__default["default"].createElement(Icon, { type: "caution" }),
4544
+ error)),
4515
4545
  React__default["default"].createElement(TextFieldWrapper, { className: classNames__default["default"]({ 'TextFieldWrapper--error': hasError }),
4516
4546
  // We're handling click here to open the listbox when the wrapping element is clicked,
4517
4547
  // there's already keyboard handlers to open the listbox on the input element
@@ -4541,8 +4571,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
4541
4571
  : portal.current ||
4542
4572
  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
4543
4573
  /* istanbul ignore next: default fallback value */ document.body)
4544
- : comboboxListbox),
4545
- hasError && (React__default["default"].createElement("div", { className: "Error", id: errorId }, error))));
4574
+ : comboboxListbox)));
4546
4575
  });
4547
4576
  Combobox.displayName = 'Combobox';
4548
4577
 
@@ -4621,25 +4650,25 @@ var Popover = React.forwardRef(function (_a, ref) {
4621
4650
  targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-haspopup', 'true');
4622
4651
  }
4623
4652
  }, [targetElement, id, show]);
4624
- var handleClickOutside = function (e) {
4653
+ var handleClosePopover = function () {
4654
+ isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
4655
+ if (show) {
4656
+ onClose();
4657
+ }
4658
+ };
4659
+ var handleClickOutside = React.useCallback(function (e) {
4625
4660
  if (e.target === targetElement) {
4626
4661
  return;
4627
4662
  }
4628
4663
  if (show) {
4629
4664
  handleClosePopover();
4630
4665
  }
4631
- };
4666
+ }, [show, targetElement, handleClosePopover]);
4632
4667
  var attachIsolator = function () {
4633
4668
  if (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) {
4634
4669
  setIsolator(new AriaIsolate(popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current));
4635
4670
  }
4636
4671
  };
4637
- var handleClosePopover = function () {
4638
- isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
4639
- if (show) {
4640
- onClose();
4641
- }
4642
- };
4643
4672
  useEscapeKey({
4644
4673
  callback: handleClosePopover,
4645
4674
  active: show
@@ -4908,17 +4937,6 @@ var ActionList = React.forwardRef(function (_a, ref) {
4908
4937
  onAction(key, event);
4909
4938
  }
4910
4939
  }, [onAction]);
4911
- var handleKeyDown = React.useCallback(function (event) {
4912
- var _a;
4913
- if (event.defaultPrevented) {
4914
- return;
4915
- }
4916
- // Since focus is managed in the action list using `aria-activedescendant`
4917
- // we want to simulate a keypress on the current active list item
4918
- if (event.key === 'Enter' || event.key === ' ') {
4919
- (_a = activeElement.current) === null || _a === void 0 ? void 0 : _a.click();
4920
- }
4921
- }, []);
4922
4940
  return (
4923
4941
  // Note: we should be able to use listbox without passing a prop
4924
4942
  // value for "multiselect"
@@ -4928,13 +4946,13 @@ var ActionList = React.forwardRef(function (_a, ref) {
4928
4946
  /* Listbox comes with an explicit role of "listbox", but we want to either
4929
4947
  * use the role from props, or default to the intrinsic role */
4930
4948
  // eslint-disable-next-line jsx-a11y/aria-role
4931
- 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" }),
4932
4950
  React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
4933
4951
  });
4934
4952
  ActionList.displayName = 'ActionList';
4935
4953
 
4936
4954
  var ActionListItem = React.forwardRef(function (_a, ref) {
4937
- 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"]);
4938
4956
  var _c = tslib.__read(nextId.useId(1, 'action-list-item'), 1), id = _c[0];
4939
4957
  var actionListItemRef = useSharedRef(ref);
4940
4958
  var labelRef = React.useRef(null);
@@ -5000,7 +5018,9 @@ var ActionListItem = React.forwardRef(function (_a, ref) {
5000
5018
  }, [isActive]);
5001
5019
  var allowsSelection = !!selectionType;
5002
5020
  var isSelected = allowsSelection ? !!selected : undefined;
5003
- 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),
5004
5024
  allowsSelection && (React__default["default"].createElement("span", { className: "ActionListItem__selection" },
5005
5025
  React__default["default"].createElement(Icon, { type: "check" }))),
5006
5026
  leadingIcon && (React__default["default"].createElement("span", { className: "ActionListItem__leadingIcon" },
@@ -5054,10 +5074,10 @@ var ActionListSeparator = React.forwardRef(function (_a, ref) {
5054
5074
  ActionListSeparator.displayName = 'ActionListSeparator';
5055
5075
 
5056
5076
  var ActionListLinkItem = React.forwardRef(function (_a, ref) {
5057
- var key = _a.key, className = _a.className;
5077
+ var className = _a.className;
5058
5078
  // ActionListLinkItem should not be able to be "selected"
5059
5079
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
5060
- _a.selected; var props = tslib.__rest(_a, ["key", "className", "selected"]);
5080
+ _a.selected; var props = tslib.__rest(_a, ["className", "selected"]);
5061
5081
  var contextRole = useActionListContext().role;
5062
5082
  var listItemRole = React.useMemo(function () {
5063
5083
  if (contextRole === 'menu') {
@@ -5069,7 +5089,7 @@ var ActionListLinkItem = React.forwardRef(function (_a, ref) {
5069
5089
  }
5070
5090
  return undefined;
5071
5091
  }, [contextRole]);
5072
- return (React__default["default"].createElement(ActionListItem, tslib.__assign({ key: key, ref: ref, className: classNames__default["default"]('Link ActionListLinkItem', className), as: "a", role: listItemRole, tabIndex: listItemRole === 'menuitem' ? -1 : undefined }, props)));
5092
+ return (React__default["default"].createElement(ActionListItem, tslib.__assign({ ref: ref, className: classNames__default["default"]('Link ActionListLinkItem', className), as: "a", role: listItemRole, tabIndex: listItemRole === 'menuitem' ? -1 : undefined }, props)));
5073
5093
  });
5074
5094
  ActionListLinkItem.displayName = 'ActionListLinkItem';
5075
5095
 
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",
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;