@deque/cauldron-react 3.0.1-canary.b5d7a8b3 → 3.0.1-canary.c221fa57

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    as?: React.ElementType | string;
+}
+declare const FieldWrap: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export default FieldWrap;

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

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
+    variant?: 'large' | 'small';
 }
-declare function Loader({ className, label, ...other }: LoaderProps): JSX.Element;
+declare function Loader({ className, variant, label, ...props }: LoaderProps): JSX.Element;
 declare namespace Loader {
     var propTypes: {
         className: PropTypes.Requireable<string>;

package/lib/components/LoaderOverlay/axe-loader.d.ts

@@ -0,0 +1 @@
+export default function AxeLoader(): JSX.Element;

package/lib/components/Tabs/Tabs.d.ts

@@ -5,6 +5,7 @@ declare type TabsProps = {
     children: React.ReactNode;
     initialActiveIndex?: number;
     thin?: boolean;
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     onChange?: ({ activeTabIndex, target }: {
         activeTabIndex: number;
@@ -12,7 +13,7 @@ declare type TabsProps = {
     }) => void;
 } & Cauldron.LabelProps;
 declare const Tabs: {
-    ({ children, thin, initialActiveIndex, className, onChange, ...labelProp }: TabsProps): JSX.Element;
+    ({ children, thin, orientation, initialActiveIndex, className, onChange, ...labelProp }: TabsProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
@@ -20,6 +21,7 @@ declare const Tabs: {
         'aria-labelledby': PropTypes.Requireable<string>;
         initialActiveIndex: PropTypes.Requireable<number>;
         thin: PropTypes.Requireable<boolean>;
+        orientation: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
     };
 };

package/lib/index.d.ts

@@ -46,6 +46,7 @@ export { default as IssuePanel } from './components/IssuePanel';
 export { default as ProgressBar } from './components/ProgressBar';
 export { Address, AddressLine, AddressCityStateZip } from './components/Address';
 export { default as Pagination } from './components/Pagination';
+export { default as FieldWrap } from './components/FieldWrap';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -2197,8 +2197,7 @@ Link.propTypes = {
 Link.displayName = 'Link';
 
 function Loader(_a) {
-    var className = _a.className, label = _a.label, other = tslib.__rest(_a, ["className", "label"]);
-    var props = tslib.__assign(tslib.__assign({}, other), { className: classNames('Loader', className) });
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'small' : _b, label = _a.label, props = tslib.__rest(_a, ["className", "variant", "label"]);
     if (label === null || label === void 0 ? void 0 : label.length) {
         props['role'] = 'alert';
         props.children = React__default.createElement(Offscreen, null, label);
@@ -2206,7 +2205,11 @@ function Loader(_a) {
     else {
         props['aria-hidden'] = true;
     }
-    return React__default.createElement("div", tslib.__assign({}, props));
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader', className, variant === 'large'
+            ? 'Loader--large'
+            : variant === 'small'
+                ? 'Loader--small'
+                : '') }, props)));
 }
 Loader.propTypes = {
     className: PropTypes.string
@@ -7946,9 +7949,24 @@ Code.propTypes = {
     className: PropTypes.string
 };
 
+function AxeLoader() {
+    return (React__default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0", y: "0", viewBox: "0 0 800 800" },
+        React__default.createElement("path", { fill: "currentColor", d: "M641.4 555.6c-27.2-12.1-59.1.2-71.2 27.3-.5 1-.8 2.1-1.2 3.2H160l227.6-394.3 170.1 292.8 32.4-18.8L387.5 117 95 623.6h474c4.9 13.1 14.8 24.4 28.6 30.5 7.1 3.2 14.5 4.7 21.8 4.7 20.7 0 40.4-11.9 49.3-32 12.1-27.1-.1-59.1-27.3-71.2zm1.6 59.8c-5.8 13-21.1 18.9-34 13.1-13-5.8-18.9-21.1-13.1-34 4.3-9.6 13.7-15.3 23.6-15.3 3.5 0 7.1.7 10.4 2.2 13.1 5.7 18.9 21 13.1 34z" }),
+        React__default.createElement("path", { fill: "currentColor", d: "M379 549.9h-27.6v-16.7c-7.4 13.5-22.8 20.2-39 20.2-37.1 0-58.9-28.9-58.9-61.6 0-36.5 26.4-61.4 58.9-61.4 21.1 0 34 11.2 39 20.5V434H379v115.9zm-97.8-57.4c0 14.3 10.3 35.2 35.2 35.2 15.4 0 25.5-8 30.8-18.6 2.7-5.1 4-10.5 4.4-16.2.2-5.5-.8-11.2-3.2-16.2-4.9-11-15.6-20.5-32.3-20.5-22.4 0-35 18.1-35 36.1v.2zM436.2 488.9l-39-54.8h33.3l22.6 35.6 22.6-35.6h32.9l-38.8 54.8 43.2 61h-34L453.1 510l-26.2 39.9h-33.5l42.8-61z" })));
+}
+
 var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, other = tslib.__rest(_a, ["className"]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className), ref: ref }, other)));
+    var className = _a.className, variant = _a.variant, label = _a.label, other = tslib.__rest(_a, ["className", "variant", "label"]);
+    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
+            ? 'Loader__overlay--large'
+            : variant === 'small'
+                ? 'Loader__overlay--small'
+                : ''), ref: ref }, other),
+        React__default.createElement("div", { className: "Loader__overlay__loader" },
+            React__default.createElement(Loader, { variant: variant }),
+            React__default.createElement(AxeLoader, null)),
+        label ? React__default.createElement("span", { className: "Loader__overlay__label" }, label) : null,
+        other.children));
 });
 LoaderOverlay.propTypes = {
     className: PropTypes.string
@@ -8074,8 +8092,8 @@ var useDidUpdate = function (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];
+    var children = _a.children, thin = _a.thin, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.initialActiveIndex, initialActiveIndex = _c === void 0 ? 0 : _c, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "orientation", "initialActiveIndex", "className", "onChange"]);
+    var _d = React.useState(initialActiveIndex), activeIndex = _d[0], setActiveIndex = _d[1];
     var tabsRef = React.useRef(null);
     var focusedTabRef = React.useRef(null);
     var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
@@ -8086,34 +8104,48 @@ var Tabs = function (_a) {
     var handleKeyDown = function (event) {
         var key = event.key;
         var newIndex = activeIndex;
+        var forward;
+        var backward;
+        if (orientation === 'horizontal') {
+            forward = 'ArrowRight';
+            backward = 'ArrowLeft';
+        }
+        else {
+            forward = 'ArrowDown';
+            backward = 'ArrowUp';
+        }
         switch (key) {
-            case 'ArrowLeft': {
+            case backward: {
                 newIndex = activeIndex - 1;
                 // circularity
                 if (newIndex === -1) {
                     newIndex = tabCount - 1;
                 }
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
-            case 'ArrowRight': {
+            case forward: {
                 newIndex = activeIndex + 1;
                 // circularity
                 if (newIndex === tabCount) {
                     newIndex = 0;
                 }
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
             case 'Home': {
                 newIndex = 0;
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
             case 'End': {
                 event.preventDefault();
                 newIndex = tabCount - 1;
                 setActiveIndex(newIndex);
+                event.preventDefault();
                 break;
             }
         }
@@ -8146,7 +8178,9 @@ var Tabs = function (_a) {
         }
     }, [activeIndex]);
     return (React__default.createElement("div", { className: classNames('Tabs', className, {
-            'Tabs--thin': thin
+            'Tabs--thin': thin,
+            'Tabs--vertical': orientation === 'vertical',
+            'Tabs--horizontal': orientation === 'horizontal'
         }), ref: tabsRef },
         React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
 };
@@ -8157,6 +8191,7 @@ Tabs.propTypes = {
     'aria-labelledby': PropTypes.string,
     initialActiveIndex: PropTypes.number,
     thin: PropTypes.bool,
+    orientation: PropTypes.string,
     className: PropTypes.string
 };
 
@@ -8356,6 +8391,17 @@ Pagination.propTypes = {
     className: PropTypes.string
 };
 
+var FieldWrap = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.as, Component = _b === void 0 ? 'div' : _b, props = tslib.__rest(_a, ["children", "className", "as"]);
+    return (React__default.createElement(Component, tslib.__assign({ ref: ref, className: classNames('Panel', className) }, props), children));
+});
+FieldWrap.displayName = 'FieldWrap';
+FieldWrap.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    as: PropTypes.string
+};
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({});
@@ -8428,6 +8474,7 @@ exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
+exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.IssuePanel = IssuePanel;

package/package.json

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