@deque/cauldron-react 3.0.1-canary.c0257ce6 → 3.0.1-canary.d864a72a

package/lib/{arrow-97011665.js → arrow-36f5cb02.js}

@@ -8,19 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || 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); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgArrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 28,
-    height: 28,
-    transform: "rotate(180)"
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/{arrow-circle-7b95a2fd.js → arrow-circle-858d89b5.js}

@@ -8,19 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || 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); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M17.33 12.67c-.01.37-.3.66-.67.67h-5.22l2 2c.25.26.25.68 0 .94l-.95.95c-.26.25-.68.25-.94 0L6.8 12.47a.683.683 0 010-.94l4.72-4.72c.26-.25.68-.25.94 0l.95.95c.26.25.27.66.02.92l-.02.02-2 2h5.23c.37.01.66.3.67.67v1.33l.02-.03zM18.92 8A8.016 8.016 0 0016 5.08 7.798 7.798 0 0012 4c-1.41-.01-2.79.37-4 1.08-1.21.7-2.22 1.71-2.92 2.92A7.798 7.798 0 004 12c-.01 1.41.36 2.79 1.07 4 .7 1.21 1.71 2.22 2.93 2.92 1.21.71 2.59 1.09 4 1.08 1.41.01 2.79-.36 4-1.07 1.21-.7 2.22-1.71 2.92-2.93A7.798 7.798 0 0020 12c.01-1.41-.37-2.79-1.08-4z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M17.37 12c0 .18-.06.35-.19.47l-4.71 4.73c-.26.25-.68.25-.94 0l-4.71-4.72a.683.683 0 010-.94l.95-.95c.25-.26.66-.27.92-.02l.02.02 2 2V7.34c.01-.37.3-.66.67-.67h1.33c.37.01.66.3.67.67v5.23l2-2c.26-.25.68-.25.94 0l.95.95c.13.12.19.29.19.47l-.09.01zm1.55-4A8.016 8.016 0 0016 5.08 7.798 7.798 0 0012 4c-1.41-.01-2.79.37-4 1.08-1.21.7-2.22 1.71-2.92 2.92A7.798 7.798 0 004 12c-.01 1.41.36 2.79 1.07 4 .7 1.21 1.71 2.22 2.93 2.92 1.21.71 2.59 1.09 4 1.08 1.41.01 2.79-.36 4-1.07 1.21-.7 2.22-1.71 2.92-2.93A7.798 7.798 0 0020 12c.01-1.41-.37-2.79-1.08-4z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgArrowCircle(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 17,
-    height: 17,
-    transform: "rotate(180)"
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/cauldron.css

@@ -48,19 +48,19 @@ a.Button--primary {
   display: block;
 }
 
-/* Icon--right is the default orientation */
+/* Icon--down is the default orientation */
 
-.Icon__right {
-}
-
-.Icon__left {
-  transform: scaleX(-1);
+.Icon__down {
 }
 
 .Icon__up {
-  transform: rotate(-90deg);
+  transform: scaleY(-1);
 }
 
-.Icon__down {
+.Icon__left {
   transform: rotate(90deg);
 }
+
+.Icon__right {
+  transform: rotate(-90deg);
+}

package/lib/{chevron-064d5f96.js → chevron-cbfd92ec.js}

@@ -8,18 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || 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); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M15.02 12a.35.35 0 00-.1-.24l-4.83-4.85a.332.332 0 00-.47-.01l-.01.01-.52.52c-.14.13-.14.33-.02.47l.01.01 4.1 4.09-4.1 4.09c-.13.13-.14.33-.01.47l.01.01.52.52c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.07.09-.15.09-.24z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M17.2 9.84a.35.35 0 00-.1-.24l-.52-.52a.332.332 0 00-.47-.01l-.01.01-4.1 4.1-4.09-4.1a.333.333 0 00-.47-.02l-.01.01-.52.53c-.13.13-.14.33-.01.47l.01.01 4.85 4.85c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.06.1-.15.1-.24h.01z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgChevron(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 25,
-    height: 25
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/lib/{chevron-double-65975fca.js → chevron-double-42e4b50e.js}

@@ -8,18 +8,17 @@ var React__default = _interopDefault(React);
 function _extends() { _extends = Object.assign || 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); }
 
 var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M13.02 12a.35.35 0 00-.1-.24L8.09 6.91a.332.332 0 00-.47-.01l-.01.01-.52.52c-.14.13-.14.33-.02.47l.01.01 4.1 4.09-4.08 4.09c-.13.13-.14.33-.01.47l.01.01.52.52c.13.13.33.14.47.01l.01-.01 4.85-4.85c.05-.07.07-.15.07-.24zm4 0a.35.35 0 00-.1-.24l-4.83-4.85a.332.332 0 00-.47-.01l-.01.01-.52.52c-.13.13-.14.33-.01.47l.01.01 4.1 4.09-4.09 4.09c-.13.13-.14.33-.01.47l.01.01.52.52c.13.13.33.14.47.01l.01-.01 4.85-4.85c.05-.07.07-.15.07-.24z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  d: "M17.2 11.84a.35.35 0 00-.1-.24l-.52-.52a.332.332 0 00-.47-.01l-.01.01-4.1 4.1-4.09-4.1a.332.332 0 00-.47-.01l-.01.01-.52.52c-.13.13-.14.33-.01.47l.01.01 4.85 4.85c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.06.1-.15.1-.24h.01zm0-4a.35.35 0 00-.1-.24l-.52-.52a.332.332 0 00-.47-.01l-.01.01-4.1 4.1-4.09-4.09a.333.333 0 00-.47-.02l-.01.01-.52.53a.32.32 0 00-.02.46l.01.01 4.85 4.85c.13.13.33.14.47.01l.01-.01 4.85-4.85c.06-.06.1-.15.1-.24h.02z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgChevronDouble(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 25,
-    height: 25
+    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/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

@@ -193,8 +193,8 @@ var iconTypes = [
 function __variableDynamicImportRuntime0__(path) {
    switch (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-7b95a2fd.js'); });
-     case './icons/arrow.svg': return Promise.resolve().then(function () { return require('./arrow-97011665.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/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'); });
@@ -204,8 +204,8 @@ function __variableDynamicImportRuntime0__(path) {
      case './icons/check.svg': return Promise.resolve().then(function () { return require('./check-c2912d5e.js'); });
      case './icons/checkbox-checked.svg': return Promise.resolve().then(function () { return require('./checkbox-checked-a262e99c.js'); });
      case './icons/checkbox-unchecked.svg': return Promise.resolve().then(function () { return require('./checkbox-unchecked-2ad5b4ae.js'); });
-     case './icons/chevron-double.svg': return Promise.resolve().then(function () { return require('./chevron-double-65975fca.js'); });
-     case './icons/chevron.svg': return Promise.resolve().then(function () { return require('./chevron-064d5f96.js'); });
+     case './icons/chevron-double.svg': return Promise.resolve().then(function () { return require('./chevron-double-42e4b50e.js'); });
+     case './icons/chevron.svg': return Promise.resolve().then(function () { return require('./chevron-cbfd92ec.js'); });
      case './icons/close.svg': return Promise.resolve().then(function () { return require('./close-31ce4dcf.js'); });
      case './icons/code.svg': return Promise.resolve().then(function () { return require('./code-e3365341.js'); });
      case './icons/copy.svg': return Promise.resolve().then(function () { return require('./copy-d2ade017.js'); });
@@ -246,7 +246,7 @@ function __variableDynamicImportRuntime0__(path) {
      case './icons/tag.svg': return Promise.resolve().then(function () { return require('./tag-56c32f4f.js'); });
      case './icons/target.svg': return Promise.resolve().then(function () { return require('./target-50f179e0.js'); });
      case './icons/trash.svg': return Promise.resolve().then(function () { return require('./trash-896a3291.js'); });
-     case './icons/triangle.svg': return Promise.resolve().then(function () { return require('./triangle-51d7723a.js'); });
+     case './icons/triangle.svg': return Promise.resolve().then(function () { return require('./triangle-42e0eece.js'); });
      case './icons/upload.svg': return Promise.resolve().then(function () { return require('./upload-d71f0e44.js'); });
      default: return Promise.reject(new Error("Unknown variable dynamic import: " + path));
    }
@@ -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/lib/{triangle-51d7723a.js → triangle-42e0eece.js}

@@ -9,18 +9,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var _ref = /*#__PURE__*/React.createElement("path", {
   d: "M7 10l5 5 5-5z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
 });
 
 function SvgTriangle(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     overflow: "visible",
     preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: 32,
-    height: 32,
-    transform: "rotate(270)"
+    width: 24,
+    height: 24
   }, props), _ref);
 }
 

package/package.json

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