@deque/cauldron-react 3.0.1-canary.41ff0487 → 3.0.1-canary.4607c120

package/lib/components/SideBar/SideBar.d.ts

@@ -5,6 +5,7 @@ export interface SideBarProps extends React.HTMLAttributes<HTMLUListElement> {
     onDismiss: () => void;
     className?: string;
     show: boolean;
+    navProps: React.HTMLAttributes<HTMLElement>;
 }
 interface SideBarState {
     wide: boolean;

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

@@ -6,9 +6,13 @@ declare type TabsProps = {
     initialActiveIndex?: number;
     thin?: boolean;
     className?: string;
+    onChange?: ({ activeTabIndex, target }: {
+        activeTabIndex: number;
+        target: HTMLLIElement | null;
+    }) => void;
 } & Cauldron.LabelProps;
 declare const Tabs: {
-    ({ children, thin, initialActiveIndex, className, ...labelProp }: TabsProps): JSX.Element;
+    ({ children, thin, initialActiveIndex, className, onChange, ...labelProp }: TabsProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

package/lib/index.js

@@ -1150,11 +1150,11 @@ var SideBar = /** @class */ (function (_super) {
         var _a = this.state, animateClass = _a.animateClass, wide = _a.wide;
         // disabling no-unused-vars to prevent onDismiss from being passed through to dom element
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        var _b = this.props, children = _b.children, className = _b.className, show = _b.show, onDismiss = _b.onDismiss, other = tslib.__rest(_b, ["children", "className", "show", "onDismiss"]);
+        var _b = this.props, children = _b.children, className = _b.className, show = _b.show, onDismiss = _b.onDismiss, navProps = _b.navProps, other = tslib.__rest(_b, ["children", "className", "show", "onDismiss", "navProps"]);
         /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
         return (React__default.createElement(React.Fragment, null,
             React__default.createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
-                React__default.createElement("nav", null,
+                React__default.createElement("nav", tslib.__assign({}, navProps),
                     React__default.createElement("ul", tslib.__assign({ className: classNames('SideBar', className, animateClass) }, other, { ref: this.navList, onKeyDown: this.onKeyDown }), children))),
             React__default.createElement(Scrim, { show: !wide && show })));
         /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
@@ -8048,8 +8048,9 @@ Tab.propTypes = {
 };
 
 var Tabs = function (_a) {
-    var children = _a.children, thin = _a.thin, _b = _a.initialActiveIndex, initialActiveIndex = _b === void 0 ? 0 : _b, className = _a.className, labelProp = tslib.__rest(_a, ["children", "thin", "initialActiveIndex", "className"]);
+    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 tabsRef = React.useRef(null);
     var focusedTabRef = React.useRef(null);
     var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
     var tabCount = tabs.length;
@@ -8114,10 +8115,13 @@ var Tabs = function (_a) {
     useDidUpdate(function () {
         var _a;
         (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (typeof onChange === 'function') {
+            onChange({ activeTabIndex: activeIndex, target: focusedTabRef.current });
+        }
     }, [activeIndex]);
     return (React__default.createElement("div", { className: classNames('Tabs', className, {
             'Tabs--thin': thin
-        }) },
+        }), ref: tabsRef },
         React__default.createElement("ul", tslib.__assign({ role: "tablist", className: "Tablist" }, labelProp, { onKeyDown: handleKeyDown }), tabComponents)));
 };
 Tabs.displayName = 'Tabs';

package/package.json

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