@deque/cauldron-react 3.0.1-canary.e98b9d24 → 3.0.1-canary.eb6cb861

package/lib/{arrows-alt-b91e24b7.js → arrows-alt-57b6a0ac.js}

@@ -18,8 +18,8 @@ function SvgArrowsAlt(props) {
     overflow: "visible",
     preserveAspectRatio: "none",
     viewBox: "0 0 512 512",
-    width: 28,
-    height: 28
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../IconButton';
+declare const IssuePanel: {
+    ({ className, title, actions, children }: {
+        className?: string | undefined;
+        title?: string | undefined;
+        actions?: import("../../utils/polymorphic-type").ForwardRefComponent<"button", import("../IconButton").IconButtonOwnProps>[] | undefined;
+        children: React.ReactNode;
+    }): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default IssuePanel;

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

@@ -1,16 +1,20 @@
-import React from 'react';
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '../IconButton';
+interface PanelProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    heading: ReactElement<any> | {
+        id?: string;
+        text: ReactElement<any>;
+        level: number | undefined;
+    };
+    className?: string;
+}
 declare const Panel: {
-    ({ className, title, actions, children }: {
-        className?: string | undefined;
-        title?: string | undefined;
-        actions?: import("../../utils/polymorphic-type").ForwardRefComponent<"button", import("../IconButton").IconButtonOwnProps>[] | undefined;
-        children: React.ReactNode;
-    }): JSX.Element;
+    ({ children, className, heading, ...other }: PanelProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        heading: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
     };
 };

package/lib/{filter-d2057f4c.js → filter-b206c760.js}

@@ -17,9 +17,8 @@ function SvgFilter(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 32,
-    height: 32
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/index.d.ts

@@ -42,6 +42,7 @@ export { default as Tabs, Tab, TabPanel } from './components/Tabs';
 export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
 export { default as Stepper, Step } from './components/Stepper';
 export { default as Panel } from './components/Panel';
+export { default as IssuePanel } from './components/IssuePanel';
 export { default as ProgressBar } from './components/ProgressBar';
 export { Address, AddressLine, AddressCityStateZip } from './components/Address';
 /**

package/lib/index.js

@@ -195,7 +195,7 @@ function __variableDynamicImportRuntime0__(path) {
      case './icons/add-user.svg': return Promise.resolve().then(function () { return require('./add-user-075c63a1.js'); });
      case './icons/arrow-circle.svg': return Promise.resolve().then(function () { return require('./arrow-circle-858d89b5.js'); });
      case './icons/arrow.svg': return Promise.resolve().then(function () { return require('./arrow-36f5cb02.js'); });
-     case './icons/arrows-alt.svg': return Promise.resolve().then(function () { return require('./arrows-alt-b91e24b7.js'); });
+     case './icons/arrows-alt.svg': return Promise.resolve().then(function () { return require('./arrows-alt-57b6a0ac.js'); });
      case './icons/bolt.svg': return Promise.resolve().then(function () { return require('./bolt-e44406fd.js'); });
      case './icons/caution.svg': return Promise.resolve().then(function () { return require('./caution-e048e1bf.js'); });
      case './icons/check-circle.svg': return Promise.resolve().then(function () { return require('./check-circle-8b5069b4.js'); });
@@ -213,7 +213,7 @@ function __variableDynamicImportRuntime0__(path) {
      case './icons/exchange.svg': return Promise.resolve().then(function () { return require('./exchange-1d290efb.js'); });
      case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link-ef122c95.js'); });
      case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye-a0d28243.js'); });
-     case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter-d2057f4c.js'); });
+     case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter-b206c760.js'); });
      case './icons/flag.svg': return Promise.resolve().then(function () { return require('./flag-fb248a99.js'); });
      case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears-b9ee1585.js'); });
      case './icons/grid.svg': return Promise.resolve().then(function () { return require('./grid-ee446118.js'); });
@@ -8050,6 +8050,25 @@ Tab.propTypes = {
     children: PropTypes.node
 };
 
+/**
+ * Hook to be used similarly to the React.Component#componentDidMount.
+ * Executes the provided `effect` when `dependencies` change but does not
+ * execute the effect initially (on mount) - only on update.
+ *
+ * @param effect {Function} function to be executed when dependencies update
+ * @param dependencies {Any} any valid dependency argument to React.useEffect
+ */
+var useDidUpdate = function (effect, dependencies) {
+    var mounted = React__default.useRef(false);
+    React__default.useEffect(function () {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        effect();
+    }, dependencies);
+};
+
 var Tabs = function (_a) {
     var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className", "onChange"]);
     var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
@@ -8216,15 +8235,34 @@ Stepper.propTypes = {
 };
 
 var Panel = function (_a) {
-    var className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, children = _a.children;
-    return (React__default.createElement("div", { className: classNames('Panel', className) },
-        React__default.createElement("div", { className: "Panel__Header" },
-            title && React__default.createElement("div", { className: "Panel__Header-title" }, title),
-            actions && React__default.createElement("div", { className: "Panel__Header-actions" }, actions)),
-        React__default.createElement("div", { className: "Panel__Content" }, children)));
+    var children = _a.children, className = _a.className, heading = _a.heading, other = tslib.__rest(_a, ["children", "className", "heading"]);
+    var Heading = "h" + (typeof heading === 'object' && 'level' in heading && !!heading.level
+        ? heading.level
+        : 2);
+    var headingId = typeof heading === 'object' && 'id' in heading ? heading.id : randomId();
+    return (React__default.createElement("section", tslib.__assign({ "aria-labelledby": headingId, className: classNames('Panel', className) }, other),
+        React__default.createElement(Heading, { id: headingId, className: "Panel__Heading" }, typeof heading === 'object' && 'text' in heading
+            ? heading.text
+            : heading),
+        children));
 };
 Panel.displayName = 'Panel';
 Panel.propTypes = {
+    children: PropTypes.node.isRequired,
+    heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]).isRequired,
+    className: PropTypes.string
+};
+
+var IssuePanel = function (_a) {
+    var className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, children = _a.children;
+    return (React__default.createElement("div", { className: classNames('IssuePanel', className) },
+        React__default.createElement("div", { className: "IssuePanel__Header" },
+            title && React__default.createElement("div", { className: "IssuePanel__Header-title" }, title),
+            actions && React__default.createElement("div", { className: "IssuePanel__Header-actions" }, actions)),
+        React__default.createElement("div", { className: "IssuePanel__Content" }, children)));
+};
+IssuePanel.displayName = 'IssuePanel';
+IssuePanel.propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string
 };
@@ -8269,25 +8307,6 @@ AddressCityStateZip.propTypes = {
     className: PropTypes.string
 };
 
-/**
- * Hook to be used similarly to the React.Component#componentDidMount.
- * Executes the provided `effect` when `dependencies` change but does not
- * execute the effect initially (on mount) - only on update.
- *
- * @param effect {Function} function to be executed when dependencies update
- * @param dependencies {Any} any valid dependency argument to React.useEffect
- */
-var useDidUpdate = function (effect, dependencies) {
-    var mounted = React__default.useRef(false);
-    React__default.useEffect(function () {
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        effect();
-    }, dependencies);
-};
-
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({});
@@ -8362,6 +8381,7 @@ exports.DialogFooter = DialogFooter;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.IssuePanel = IssuePanel;
 exports.Layout = Layout;
 exports.Line = Line;
 exports.Link = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "3.0.1-canary.e98b9d24",
+  "version": "3.0.1-canary.eb6cb861",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"