@deque/cauldron-react 2.0.0-canary.22e43f33 → 2.0.0-canary.83f76419

package/lib/cauldron.css

@@ -1,28 +1,66 @@
+:root {
+  --expandcollapse-trigger-background-color: transparent;
+  --expandcollapse-trigger-color: var(--gray-90);
+  --expandcollapse-panel-background-color: transparent;
+  --expandcollapse-panel-color: var(--gray-90);
+}
+
 .ExpandCollapse__trigger {
   font-size: inherit;
   display: flex;
   align-items: center;
+  background-color: var(--expandcollapse-trigger-background-color);
+  color: var(--expandcollapse-trigger-color);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.ExpandCollapse__trigger-title {
+  flex-grow: 1;
+  text-align: left;
+}
+
+.ExpandCollapse__panel {
+  background-color: var(--expandcollapse-panel-background-color);
+  color: var(--expandcollapse-panel-color);
+}
+
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --expandcollapse-trigger-color: var(--white);
+  --expandcollapse-panel-color: var(--accent-light);
 }
+
 a.Button--primary {
   text-decoration: none;
   padding: 9px 18px;
 }
+
 .Icon {
   display: inline-block;
   vertical-align: middle;
 }
+
 .Icon svg {
   display: block;
 }
+
 /* Icon--right is the default orientation */
+
 .Icon__right {
 }
+
 .Icon__left {
   transform: scaleX(-1);
 }
+
 .Icon__up {
   transform: rotate(-90deg);
 }
+
 .Icon__down {
   transform: rotate(90deg);
 }

package/lib/components/ExpandCollapsePanel/PanelTrigger.d.ts

@@ -5,9 +5,10 @@ export interface PanelTriggerProps extends React.ButtonHTMLAttributes<HTMLButton
         open: boolean;
     }) => React.ReactNode) | React.ReactNode;
     open?: boolean;
+    fullWidth?: string;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
-declare function PanelTrigger({ children, className, open, onClick, ...other }: PanelTriggerProps): JSX.Element;
+declare function PanelTrigger({ children, className, open, fullWidth, onClick, ...other }: PanelTriggerProps): JSX.Element;
 declare namespace PanelTrigger {
     var propTypes: {
         children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TooltipProps } from '../Tooltip';
-interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: string;
     label: string;
     tooltipPlacement?: TooltipProps['placement'];

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../IconButton';
+declare const Panel: {
+    ({ className, title, actions, children }: {
+        className?: string | undefined;
+        title?: string | undefined;
+        actions?: React.ForwardRefExoticComponent<import("../IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement>>[] | 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 Panel;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TabProps extends React.HTMLAttributes<HTMLLIElement> {
+    children?: React.ReactNode;
+}
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLLIElement>>;
+export default Tab;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const TabPanel: {
+    ({ children, ...other }: TabPanelProps): JSX.Element;
+    displayName: string;
+    Proptypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default TabPanel;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+declare type TabsVariant = 'full-width';
+declare type LabelProps = {
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+};
+declare type TabsProps = {
+    children: React.ReactNode;
+    initialActiveIndex?: number;
+    id?: string;
+    thin?: boolean;
+    className?: string;
+    variant?: TabsVariant;
+} & LabelProps;
+declare const Tabs: {
+    ({ children, thin, id: propId, initialActiveIndex, variant, className, ...labelProp }: TabsProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        label: PropTypes.Requireable<string>;
+        labelledby: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
+        initialActiveIndex: PropTypes.Requireable<number>;
+        thin: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        variant: PropTypes.Requireable<string>;
+    };
+};
+export default Tabs;

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

@@ -0,0 +1,3 @@
+export { default } from './Tabs';
+export { default as Tab } from './Tab';
+export { default as TabPanel } from './TabPanel';

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

@@ -42,7 +42,6 @@ export default class TextField extends React.Component<TextFieldProps, TextField
     private errorId;
     private input;
     constructor(props: TextFieldProps);
-    componentDidUpdate(prevProps: TextFieldProps): void;
     render(): JSX.Element;
     onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void;
 }

package/lib/index.d.ts

@@ -37,13 +37,16 @@ export { default as LoaderOverlay } from './components/LoaderOverlay';
 export { default as Line } from './components/Line';
 export { default as Tag, TagLabel } from './components/Tag';
 export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/Table';
+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';
 /**
  * Helpers / Utils
  */
 export { default as AriaIsolate } from './utils/aria-isolate';
 export { default as focusableSelector } from './utils/focusable-selector';
+export { default as useDidUpdate } from './utils/use-did-update';
 /**
  * Contexts
  */

package/lib/index.js

@@ -2291,21 +2291,12 @@ var TextField = /** @class */ (function (_super) {
         _this.onChange = _this.onChange.bind(_this);
         return _this;
     }
-    TextField.prototype.componentDidUpdate = function (prevProps) {
-        var value = this.props.value;
-        if (value === prevProps.value) {
-            return;
-        }
-        this.setState({ value: value });
-    };
     TextField.prototype.render = function () {
         var _this = this;
         var isRequired = !!this.props.required;
         // disabling `no-unused-vars` to prevent specific
         // props from being passed through to the input
-        var _a = this.props, label = _a.label, fieldRef = _a.fieldRef, 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        value = _a.value, 
+        var _a = this.props, label = _a.label, fieldRef = _a.fieldRef, value = _a.value, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onChange = _a.onChange, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -2330,7 +2321,7 @@ var TextField = /** @class */ (function (_super) {
                     'Field__text-input': !multiline,
                     Field__textarea: multiline,
                     'Field--has-error': error
-                }), id: this.inputId, value: this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
+                }), id: this.inputId, value: typeof value !== 'undefined' ? value : this.state.value, onChange: this.onChange, "aria-invalid": !!error, ref: function (input) {
                     _this.input = input;
                     setRef(fieldRef, input);
                 } }, other, inputProps)),
@@ -2380,10 +2371,9 @@ var TextField = /** @class */ (function (_super) {
 }(React__default.Component));
 
 function PanelTrigger(_a) {
-    var children = _a.children, className = _a.className, open = _a.open, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "onClick"]);
-    return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', className), type: "button", "aria-expanded": open, onClick: onClick }),
-        typeof children === 'function' ? children({ open: !!open }) : children,
-        ' ',
+    var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick"]);
+    return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
+        React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
         React__default.createElement(Icon, { type: "chevron-" + (open ? 'down' : 'right') })));
 }
 PanelTrigger.propTypes = {
@@ -2506,7 +2496,7 @@ var ExpandCollapsePanel = /** @class */ (function (_super) {
                     open: isOpen,
                     onClick: this.handleToggle
                 }),
-            React__default.createElement("div", tslib.__assign({}, other, { className: classNames(animationClass, className, {
+            React__default.createElement("div", tslib.__assign({}, other, { className: classNames('ExpandCollapse__panel', animationClass, className, {
                     'is--hidden': !isOpen && !isAnimating
                 }), ref: this.panel }), panelElements)));
     };
@@ -7872,6 +7862,113 @@ TableRow.propTypes = {
     className: PropTypes.string
 };
 
+var TabPanel = function (_a) {
+    var children = _a.children, other = tslib.__rest(_a, ["children"]);
+    return (React__default.createElement("div", tslib.__assign({ role: "tabpanel" }, other), children));
+};
+TabPanel.displayName = 'TabPanel';
+TabPanel.Proptypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+var Tab = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, other = tslib.__rest(_a, ["children"]);
+    return (React__default.createElement("li", tslib.__assign({ ref: ref, role: "tab" }, other), children));
+});
+Tab.displayName = 'Tab';
+Tab.propTypes = {
+    children: PropTypes.node
+};
+
+var _a$1 = [37, 39, 36, 35], left = _a$1[0], right = _a$1[1], home = _a$1[2], end = _a$1[3];
+var Tabs = function (_a) {
+    var children = _a.children, thin = _a.thin, propId = _a.id, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, variant = _a.variant, className = _a.className, labelProp = tslib.__rest(_a, ["children", "thin", "id", "initialActiveIndex", "variant", "className"]);
+    var _c = React.useState(initialActiveIndex), activeIndex = _c[0], setActiveIndex = _c[1];
+    var id = (propId ? [propId] : nextId.useId(1, 'tabs'))[0];
+    var focusedTabRef = React.useRef(null);
+    var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
+    var panels = React__default.Children.toArray(children).filter(function (child) { return child.type === TabPanel; });
+    var tabCount = tabs.length;
+    var handleClick = function (index) {
+        setActiveIndex(index);
+    };
+    var handleKeyDown = function (event) {
+        var which = event.which;
+        var newIndex = activeIndex;
+        switch (which) {
+            case left: {
+                newIndex = activeIndex - 1;
+                // circularity
+                if (newIndex === -1) {
+                    newIndex = tabCount - 1;
+                }
+                setActiveIndex(newIndex);
+                break;
+            }
+            case right: {
+                newIndex = activeIndex + 1;
+                // circularity
+                if (newIndex === tabCount) {
+                    newIndex = 0;
+                }
+                setActiveIndex(newIndex);
+                break;
+            }
+            case home: {
+                newIndex = 0;
+                setActiveIndex(newIndex);
+                break;
+            }
+            case end: {
+                newIndex = tabCount - 1;
+                setActiveIndex(newIndex);
+                break;
+            }
+        }
+    };
+    var tabComponents = tabs.map(function (child, index) {
+        var _a;
+        var other = tslib.__rest(child.props, []);
+        var selected = index === activeIndex;
+        var config = tslib.__assign((_a = { id: id + "-" + index, className: classNames('Tab', {
+                    'Tab--active': selected,
+                    'Tab--full-width': variant === 'full-width'
+                }), tabIndex: index === activeIndex ? 0 : -1 }, _a['aria-controls'] = id + "-panel-" + index, _a['aria-selected'] = selected, _a.ref = index === activeIndex ? focusedTabRef : null, _a.onClick = function () { return handleClick(index); }, _a), other);
+        return React__default.cloneElement(child, config);
+    });
+    var tabPanelComponents = panels.map(function (child, index) {
+        var _a;
+        var _b = child.props, className = _b.className, other = tslib.__rest(_b, ["className"]);
+        var panelId = id + "-panel-" + index;
+        return React__default.cloneElement(child, tslib.__assign((_a = { id: panelId }, _a['aria-labelledby'] = id + "-" + index, _a.className = classNames('TabPanel', className, {
+            'TabPanel--hidden': activeIndex !== index
+        }), _a), other));
+    });
+    useDidUpdate(function () {
+        var _a;
+        (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex]);
+    return (React__default.createElement("div", { className: classNames('Tabs', className, {
+            'Tabs--thin': thin
+        }) },
+        React__default.createElement("ul", tslib.__assign({ role: "tablist", className: classNames('Tablist', {
+                'Tablist--full-width': variant === 'full-width'
+            }) }, labelProp, { onKeyDown: handleKeyDown }), tabComponents),
+        tabPanelComponents));
+};
+Tabs.displayName = 'Tabs';
+Tabs.propTypes = {
+    children: PropTypes.node.isRequired,
+    label: PropTypes.string,
+    labelledby: PropTypes.string,
+    id: PropTypes.string,
+    initialActiveIndex: PropTypes.number,
+    thin: PropTypes.bool,
+    className: PropTypes.string,
+    variant: PropTypes.string
+};
+
 var commonPropTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string
@@ -7937,6 +8034,39 @@ Stepper.propTypes = {
     className: PropTypes.string
 };
 
+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)));
+};
+Panel.displayName = 'Panel';
+Panel.propTypes = {
+    children: PropTypes.node.isRequired,
+    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({});
@@ -8025,6 +8155,7 @@ exports.OptionsMenuItem = OptionsMenuItem;
 exports.OptionsMenuList = OptionsMenuList;
 exports.OptionsMenuTrigger = OptionsMenuTrigger;
 exports.OptionsMenuWrapper = OptionsMenuWrapper;
+exports.Panel = Panel;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;
 exports.RadioGroup = RadioGroup;
@@ -8036,12 +8167,15 @@ exports.Sidebar = SideBar;
 exports.SkipLink = SkipLink;
 exports.Step = Step;
 exports.Stepper = Stepper;
+exports.Tab = Tab;
+exports.TabPanel = TabPanel;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
+exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TagLabel = TagLabel;
 exports.TextField = TextField;
@@ -8058,4 +8192,5 @@ exports.TopBarMenu = TopBarMenu;
 exports.TopBarTrigger = TopBarTrigger;
 exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;
+exports.useDidUpdate = useDidUpdate;
 exports.useThemeContext = useThemeContext;

package/lib/utils/use-did-update/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+declare const useDidUpdate: (effect: () => void, dependencies: unknown[]) => void;
+export default useDidUpdate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "2.0.0-canary.22e43f33",
+  "version": "2.0.0-canary.83f76419",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"