@deque/cauldron-react 6.25.3 → 6.26.0-canary.290ddaeb

package/lib/components/Icon/types.d.ts

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-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';
+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' | 'pause' | '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';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

package/lib/components/ProgressBar/index.d.ts

@@ -4,6 +4,7 @@ type ProgressBarProps = {
     progress: number;
     progressMax?: number;
     progressMin?: number;
+    thin?: boolean;
 } & Cauldron.LabelProps & React.HTMLAttributes<HTMLDivElement>;
 declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
 export default ProgressBar;

package/lib/index.js

@@ -165,6 +165,7 @@ var iconTypes = [
     'new-releases',
     'new',
     'no',
+    'pause',
     'pencil',
     'person-running',
     'play',
@@ -252,6 +253,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/new-releases.svg': return Promise.resolve().then(function () { return require('./new-releases.js'); });
     case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
     case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
+    case './icons/pause.svg': return Promise.resolve().then(function () { return require('./pause.js'); });
     case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
     case './icons/person-running.svg': return Promise.resolve().then(function () { return require('./person-running.js'); });
     case './icons/play.svg': return Promise.resolve().then(function () { return require('./play.js'); });
@@ -3417,9 +3419,9 @@ var Stepper = function (_a) {
 Stepper.displayName = 'Stepper';
 
 var ProgressBar = React.forwardRef(function (_a, ref) {
-    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.progressMax, progressMax = _c === void 0 ? 100 : _c, _d = _a.progressMin, progressMin = _d === void 0 ? 0 : _d, props = tslib.__rest(_a, ["progress", "progressMax", "progressMin"]);
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.progressMax, progressMax = _c === void 0 ? 100 : _c, _d = _a.progressMin, progressMin = _d === void 0 ? 0 : _d, thin = _a.thin, props = tslib.__rest(_a, ["progress", "progressMax", "progressMin", "thin"]);
     var className = props.className, otherProps = tslib.__rest(props, ["className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('ProgressBar', className), role: "progressbar", "aria-valuemin": progressMin, "aria-valuemax": progressMax, "aria-valuenow": progress, ref: ref }, otherProps),
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('ProgressBar', { 'ProgressBar--thin': thin }, className), role: "progressbar", "aria-valuemin": progressMin, "aria-valuemax": progressMax, "aria-valuenow": progress, ref: ref }, otherProps),
         React__default["default"].createElement("div", { className: "ProgressBar--fill", style: { width: "".concat(Math.min((progress / progressMax) * 100, 100), "%") } })));
 });
 ProgressBar.displayName = 'ProgressBar';
@@ -5351,8 +5353,13 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
             setOpen(false);
         }
     }, []);
-    var handleOverlayBlur = React.useCallback(function () {
-        setOpen(false);
+    var handleOverlayBlur = React.useCallback(function (event) {
+        var _a, _b;
+        var relatedTarget = event.relatedTarget;
+        if (!((_a = actionMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) &&
+            !((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(relatedTarget))) {
+            setOpen(false);
+        }
     }, []);
     var handleAction = React.useCallback(function (key, event) {
         // istanbul ignore else
@@ -5365,12 +5372,21 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
         }
     }, [actionMenuList.props.onAction]);
     React.useEffect(function () {
-        var _a, _b, _c;
+        var _a, _b;
         if (open) {
-            (_a = actionMenuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            // Use double requestAnimationFrame to ensure layout is complete.
+            // The first RAF schedules work for the next frame, the second ensures
+            // the browser has actually completed the layout pass.
+            // This prevents scroll jumping when opening ActionMenus.
+            requestAnimationFrame(function () {
+                requestAnimationFrame(function () {
+                    var _a;
+                    (_a = actionMenuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                });
+            });
         }
-        else if ((_b = actionMenuListRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement)) {
-            (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        else if ((_a = actionMenuListRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) {
+            (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [open]);
     var hidden = renderInTrigger && !open;

package/lib/pause.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n["default"] = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path;
+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); }
+const SvgPause = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M3.333 0c-1.107 0-2 .893-2 2v12c0 1.107.893 2 2 2h1.333c1.107 0 2-.893 2-2V2c0-1.107-.893-2-2-2H3.333Zm8 0c-1.107 0-2 .893-2 2v12c0 1.107.893 2 2 2h1.333c1.107 0 2-.893 2-2V2c0-1.107-.893-2-2-2h-1.333Z",
+  fill: "currentColor"
+})));
+
+exports["default"] = SvgPause;

package/lib/utils/createLongContent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function LongContent(): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.25.3",
+  "version": "6.26.0-canary.290ddaeb",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",