@deque/cauldron-react 7.0.0 → 7.1.0-canary.186c088f

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

@@ -7,6 +7,8 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     customIcon?: React.ReactNode;
     checkboxRef?: React.ForwardedRef<HTMLInputElement>;
     indeterminate?: boolean;
+    /** When true, the component does not manage its own checked state — it renders what you pass via `checked` and reports interactions through `onChange`. Use when state is managed by a parent component. */
+    controlled?: boolean;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -1,39 +1,19 @@
 import React from 'react';
-import AriaIsolate from '../../utils/aria-isolate';
 export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
     type: 'confirmation' | 'caution' | 'error' | 'action-needed' | 'info';
-    onDismiss: () => void;
+    onDismiss?: () => void;
     dismissText?: string;
-    toastRef: React.Ref<HTMLDivElement>;
+    /**
+     * @deprecated Use the forwarded `ref` instead. Will be removed in the next major version.
+     */
+    toastRef?: React.Ref<HTMLDivElement>;
     focus?: boolean;
     show?: boolean;
     dismissible?: boolean;
     children: React.ReactNode;
 }
-interface ToastState {
-    animationClass: string;
-    isolator?: AriaIsolate;
-}
 /**
  * The cauldron toast notification component
  */
-export default class Toast extends React.Component<ToastProps, ToastState> {
-    static defaultProps: {
-        dismissText: string;
-        onDismiss: () => void;
-        toastRef: () => void;
-        focus: boolean;
-        show: boolean;
-        dismissible: boolean;
-    };
-    static displayName: string;
-    private el;
-    constructor(props: ToastProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ToastProps): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-    dismissToast(): void;
-    showToast(): void;
-}
-export {};
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export default Toast;

package/lib/components/TreeView/TreeViewItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TreeViewNode } from './types';
+declare const TreeViewItem: {
+    ({ id, textValue, children }: TreeViewNode): React.JSX.Element;
+    displayName: string;
+};
+export default TreeViewItem;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Cauldron } from '../../types';
+import { TreeViewNode } from './types';
+export type { TreeViewNode } from './types';
+type TreeViewProps = Cauldron.LabelProps & {
+    items: TreeViewNode[];
+    onAction?: (key: string) => void;
+    selectionMode?: 'none' | 'single' | 'multiple';
+    defaultExpandedKeys?: string[];
+    className?: string;
+};
+declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
+export default TreeView;

package/lib/components/TreeView/types.d.ts

@@ -0,0 +1,5 @@
+export interface TreeViewNode {
+    id: string;
+    textValue: string;
+    children?: TreeViewNode[];
+}

package/lib/index.d.ts

@@ -68,6 +68,7 @@ export { default as SectionHeader } from './components/SectionHeader';
 export { default as EmptyState } from './components/EmptyState';
 export { ActionList, ActionListItem, ActionListGroup, ActionListSeparator, ActionListLinkItem } from './components/ActionList';
 export { ActionMenu } from './components/ActionMenu';
+export { default as TreeView, type TreeViewNode } from './components/TreeView';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -16,6 +16,7 @@ var js = require('react-syntax-highlighter/dist/cjs/languages/hljs/javascript');
 var css = require('react-syntax-highlighter/dist/cjs/languages/hljs/css');
 var xml = require('react-syntax-highlighter/dist/cjs/languages/hljs/xml');
 var yaml = require('react-syntax-highlighter/dist/cjs/languages/hljs/yaml');
+var reactAriaComponents = require('react-aria-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1357,6 +1358,7 @@ function useSharedRef(ref) {
     var internalRef = React.useRef();
     React.useEffect(function () {
         setRef(ref, internalRef.current);
+        return function () { return setRef(ref, null); };
     }, [ref]);
     return internalRef;
 }
@@ -2033,10 +2035,17 @@ function Tooltip(_a) {
                 fireCustomEvent(false, targetElement);
             }, TIP_HIDE_DELAY);
         }
+    }, [target]);
+    // Cancel any pending hide timeout when the Tooltip unmounts so it
+    // does not fire setShowTooltip on an unmounted component.
+    React.useEffect(function () {
         return function () {
-            clearTimeout(hideTimeoutRef.current);
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+                hideTimeoutRef.current = null;
+            }
         };
-    }, [target]);
+    }, []);
     React.useEffect(function () {
         if (typeof showProp === 'boolean') {
             setShowTooltip(showProp);
@@ -2213,126 +2222,118 @@ var tabIndexHandler = function (reset, toast) {
 };
 
 /**
- * The cauldron toast notification component
+ * 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 Toast = /** @class */ (function (_super) {
-    tslib.__extends(Toast, _super);
-    function Toast(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            animationClass: props.show ? 'FadeIn--flex' : 'is--hidden'
-        };
-        _this.dismissToast = _this.dismissToast.bind(_this);
-        _this.showToast = _this.showToast.bind(_this);
-        return _this;
-    }
-    Toast.prototype.componentDidMount = function () {
-        var show = this.props.show;
-        if (show) {
-            // Timeout because CSS display: none/block and opacity:
-            // 0/1 properties cannot be toggled in the same tick
-            // see: https://codepen.io/isnerms/pen/eyQaLP
-            setTimeout(this.showToast);
+var useDidUpdate = function (effect, dependencies) {
+    var mounted = React__default["default"].useRef(false);
+    React__default["default"].useEffect(function () {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
         }
+        effect();
+    }, dependencies);
+};
+
+/**
+ * The cauldron toast notification component
+ */
+var Toast = React.forwardRef(function (_a, ref) {
+    var type = _a.type, children = _a.children, _b = _a.onDismiss, onDismiss = _b === void 0 ? function () {
+        // noop
+    } : _b, _c = _a.dismissText, dismissText = _c === void 0 ? 'Dismiss' : _c, toastRef = _a.toastRef, _d = _a.focus, focus = _d === void 0 ? true : _d, _e = _a.show, show = _e === void 0 ? false : _e, _f = _a.dismissible, dismissible = _f === void 0 ? true : _f, className = _a.className, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible", "className"]);
+    var elRef = useSharedRef(ref);
+    var isolatorRef = React.useRef(null);
+    var timeoutsRef = React.useRef(new Set());
+    var _g = tslib.__read(React.useState(show ? 'FadeIn--flex' : 'is--hidden'), 2), animationClass = _g[0], setAnimationClass = _g[1];
+    // Backwards-compat: propagate to the deprecated toastRef prop as well
+    React.useEffect(function () {
+        var _a;
+        if (!toastRef)
+            return;
+        setRef(toastRef, (_a = elRef.current) !== null && _a !== void 0 ? _a : null);
+        return function () { return setRef(toastRef, null); };
+    }, [toastRef]);
+    // Timeout because CSS display: none/block and opacity:
+    // 0/1 properties cannot be toggled in the same tick
+    // see: https://codepen.io/isnerms/pen/eyQaLP
+    var scheduleNextTick = function (fn) {
+        var id = setTimeout(function () {
+            timeoutsRef.current.delete(id);
+            fn();
+        });
+        timeoutsRef.current.add(id);
     };
-    Toast.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
-        var show = this.props.show;
-        if (prevProps.show !== show) {
-            if (show) {
-                this.setState({ animationClass: 'FadeIn--flex' }, function () {
-                    setTimeout(_this.showToast);
-                });
-            }
-            else {
-                this.dismissToast();
-            }
+    var showToast = React.useCallback(function () {
+        setAnimationClass('FadeIn--flex FadeIn');
+        if (type === 'action-needed' && elRef.current) {
+            var isolator = new AriaIsolate(elRef.current);
+            tabIndexHandler(false, elRef.current);
+            isolatorRef.current = isolator;
+            isolator.activate();
         }
-    };
-    Toast.prototype.componentWillUnmount = function () {
-        var isolator = this.state.isolator;
-        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-    };
-    Toast.prototype.render = function () {
-        var _this = this;
-        var animationClass = this.state.animationClass;
-        var _a = this.props, type = _a.type, children = _a.children; 
-        // prevent `onDismiss` from being passed-through to DOM
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.onDismiss; var dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, dismissible = _a.dismissible, className = _a.className, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible", "className"]);
-        var scrim = type === 'action-needed' && show ? (React__default["default"].createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
-        var defaultProps = {
-            tabIndex: -1,
-            className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible }, className)
-        };
-        if (!focus) {
-            defaultProps.role = 'alert';
+        if (elRef.current && !!focus) {
+            elRef.current.focus();
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", tslib.__assign({ ref: function (el) {
-                    _this.el = el;
-                    setRef(toastRef, el);
-                } }, defaultProps, otherProps),
-                React__default["default"].createElement("div", { className: "Toast__message" },
-                    React__default["default"].createElement(Icon, { type: typeMap[type].icon }),
-                    React__default["default"].createElement("div", { className: "Toast__message-content" }, children)),
-                type !== 'action-needed' && dismissible && (React__default["default"].createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
-                    React__default["default"].createElement(Icon, { type: "close" })))),
-            scrim));
-    };
-    Toast.prototype.dismissToast = function () {
-        var _this = this;
-        if (!this.el) {
+    }, [type, focus]);
+    var dismissToast = React.useCallback(function () {
+        if (!elRef.current) {
             return;
         }
-        var _a = this.props, onDismiss = _a.onDismiss, type = _a.type;
-        var isolator = this.state.isolator;
-        this.setState({
-            animationClass: 'FadeIn--flex'
-        }, function () {
-            // Timeout because CSS display: none/block and opacity:
-            // 0/1 properties cannot be toggled in the same tick
-            // see: https://codepen.io/isnerms/pen/eyQaLP
-            setTimeout(function () {
-                if (type === 'action-needed') {
-                    tabIndexHandler(true, _this.el);
-                    isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-                }
-                _this.setState({ animationClass: 'is--hidden' }, onDismiss);
-            });
-        });
-    };
-    Toast.prototype.showToast = function () {
-        var _this = this;
-        var _a = this.props, type = _a.type, focus = _a.focus;
-        this.setState({
-            animationClass: 'FadeIn--flex FadeIn'
-        }, function () {
+        setAnimationClass('FadeIn--flex');
+        scheduleNextTick(function () {
+            var _a;
             if (type === 'action-needed') {
-                var isolator = new AriaIsolate(_this.el);
-                tabIndexHandler(false, _this.el);
-                _this.setState({ isolator: isolator });
-                isolator.activate();
-            }
-            if (_this.el && !!focus) {
-                // focus the toast
-                _this.el.focus();
+                tabIndexHandler(true, elRef.current);
+                (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
             }
+            setAnimationClass('is--hidden');
+            onDismiss();
         });
+    }, [type, onDismiss]);
+    React.useEffect(function () {
+        if (show) {
+            scheduleNextTick(showToast);
+        }
+        return function () {
+            var _a;
+            timeoutsRef.current.forEach(clearTimeout);
+            timeoutsRef.current.clear();
+            (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
+        };
+    }, []);
+    useDidUpdate(function () {
+        if (show) {
+            setAnimationClass('FadeIn--flex');
+            scheduleNextTick(showToast);
+        }
+        else {
+            dismissToast();
+        }
+    }, [show]);
+    var scrim = type === 'action-needed' && show ? (React__default["default"].createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
+    var defaultProps = {
+        tabIndex: -1,
+        className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible }, className)
     };
-    Toast.defaultProps = {
-        dismissText: 'Dismiss',
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onDismiss: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        toastRef: function () { },
-        focus: true,
-        show: false,
-        dismissible: true
-    };
-    Toast.displayName = 'Toast';
-    return Toast;
-}(React__default["default"].Component));
+    if (!focus) {
+        defaultProps.role = 'alert';
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", tslib.__assign({ ref: elRef }, defaultProps, otherProps),
+            React__default["default"].createElement("div", { className: "Toast__message" },
+                React__default["default"].createElement(Icon, { type: typeMap[type].icon }),
+                React__default["default"].createElement("div", { className: "Toast__message-content" }, children)),
+            type !== 'action-needed' && dismissible && (React__default["default"].createElement("button", { type: "button", className: "Toast__dismiss", "aria-label": dismissText, onClick: dismissToast },
+                React__default["default"].createElement(Icon, { type: "close" })))),
+        scrim));
+});
+Toast.displayName = 'Toast';
 
 var Link = React.forwardRef(function (_a, ref) {
     var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, thin = _a.thin, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant", "thin"]);
@@ -2599,10 +2600,10 @@ var RadioCardGroup = function (_a) {
 RadioCardGroup.displayName = 'RadioCardGroup';
 
 var Checkbox = React.forwardRef(function (_a, ref) {
-    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, ariaDescribedby = _a["aria-describedby"], _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d; _a.children; var other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", "onFocus", "onBlur", 'aria-describedby', "disabled", "checked", "indeterminate", "children"]);
-    var _e = tslib.__read(React.useState(checked), 2), isChecked = _e[0], setIsChecked = _e[1];
-    var _f = tslib.__read(React.useState(indeterminate), 2), isIndeterminate = _f[0], setIsIndeterminate = _f[1];
-    var _g = tslib.__read(React.useState(false), 2), focused = _g[0], setFocused = _g[1];
+    var id = _a.id, label = _a.label, labelDescription = _a.labelDescription, error = _a.error, checkboxRef = _a.checkboxRef, className = _a.className, onChange = _a.onChange, _b = _a.controlled, controlled = _b === void 0 ? false : _b, onFocus = _a.onFocus, onBlur = _a.onBlur, ariaDescribedby = _a["aria-describedby"], _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.indeterminate, indeterminate = _e === void 0 ? false : _e; _a.children; var other = tslib.__rest(_a, ["id", "label", "labelDescription", "error", "checkboxRef", "className", "onChange", "controlled", "onFocus", "onBlur", 'aria-describedby', "disabled", "checked", "indeterminate", "children"]);
+    var _f = tslib.__read(React.useState(checked), 2), isChecked = _f[0], setIsChecked = _f[1];
+    var _g = tslib.__read(React.useState(indeterminate), 2), isIndeterminate = _g[0], setIsIndeterminate = _g[1];
+    var _h = tslib.__read(React.useState(false), 2), focused = _h[0], setFocused = _h[1];
     var checkRef = React.useRef(null);
     React.useEffect(function () {
         setIsChecked(checked);
@@ -2614,12 +2615,12 @@ var Checkbox = React.forwardRef(function (_a, ref) {
     if (typeof refProp === 'function') {
         refProp(checkRef.current);
     }
-    var _h = React.useMemo(function () {
+    var _j = React.useMemo(function () {
         return {
             labelDescriptionId: nextId__default["default"](),
             errorId: nextId__default["default"]()
         };
-    }, []), errorId = _h.errorId, labelDescriptionId = _h.labelDescriptionId;
+    }, []), errorId = _j.errorId, labelDescriptionId = _j.labelDescriptionId;
     var ariaDescribedbyId = ariaDescribedby;
     if (error) {
         ariaDescribedbyId = addIdRef(ariaDescribedbyId, errorId);
@@ -2658,7 +2659,9 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                     if (isIndeterminate) {
                         setIsIndeterminate(false);
                     }
-                    setIsChecked(e.target.checked);
+                    if (!controlled) {
+                        setIsChecked(e.target.checked);
+                    }
                     if (onChange) {
                         onChange(e);
                     }
@@ -3231,25 +3234,6 @@ var Tab = React__default["default"].forwardRef(function (_a, ref) {
 });
 Tab.displayName = 'Tab';
 
-/**
- * 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["default"].useRef(false);
-    React__default["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.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 = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
@@ -5425,6 +5409,57 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
 });
 ActionMenu.displayName = 'ActionMenu';
 
+var TreeViewItem = function (_a) {
+    var id = _a.id, textValue = _a.textValue, children = _a.children;
+    var checkboxId = React.useMemo(function () { return nextId__default["default"]('tree-view-item-'); }, []);
+    return (React__default["default"].createElement(reactAriaComponents.TreeItem, { id: id, textValue: textValue, className: "TreeView__item" },
+        React__default["default"].createElement(reactAriaComponents.TreeItemContent, null, function (_a) {
+            var selectionMode = _a.selectionMode, isSelected = _a.isSelected;
+            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(reactAriaComponents.Button, { slot: "chevron", className: "TreeView__chevron" },
+                    React__default["default"].createElement(Icon, { type: "chevron-right" })),
+                selectionMode !== 'none' ? (React__default["default"].createElement(Checkbox, { id: checkboxId, label: textValue, checked: isSelected, controlled: true, tabIndex: -1 })) : (React__default["default"].createElement(React__default["default"].Fragment, null, textValue))));
+        }),
+        children && children.length > 0 && (React__default["default"].createElement(reactAriaComponents.Collection, null, children.map(function (child) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: child.id }, child))); })))));
+};
+TreeViewItem.displayName = 'TreeViewItem';
+
+function collectAllKeys(nodes) {
+    return nodes.flatMap(function (node) { return tslib.__spreadArray([
+        node.id
+    ], tslib.__read((node.children ? collectAllKeys(node.children) : [])), false); });
+}
+var TreeView = React.forwardRef(function (_a, ref) {
+    var items = _a.items, onAction = _a.onAction, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, defaultExpandedKeys = _a.defaultExpandedKeys, className = _a.className, other = tslib.__rest(_a, ["items", "onAction", "selectionMode", "defaultExpandedKeys", "className"]);
+    var _c = tslib.__read(React.useState(new Set()), 2), selectedKeys = _c[0], setSelectedKeys = _c[1];
+    var handleAction = function (key) {
+        setSelectedKeys(function (prev) {
+            var prevSet = prev === 'all' ? new Set(collectAllKeys(items)) : new Set(prev);
+            var next = new Set(prevSet);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                if (selectionMode === 'single') {
+                    next.clear();
+                }
+                next.add(key);
+            }
+            return next;
+        });
+        onAction === null || onAction === void 0 ? void 0 : onAction(key);
+    };
+    var actionProps = onAction
+        ? {
+            onAction: handleAction,
+            selectedKeys: selectedKeys,
+            onSelectionChange: setSelectedKeys
+        }
+        : {};
+    return (React__default["default"].createElement(reactAriaComponents.Tree, tslib.__assign({ ref: ref, className: classNames__default["default"]('TreeView', className), selectionMode: selectionMode, defaultExpandedKeys: defaultExpandedKeys }, actionProps, other), items.map(function (item) { return (React__default["default"].createElement(TreeViewItem, tslib.__assign({ key: item.id }, item))); })));
+});
+TreeView.displayName = 'TreeView';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -5620,6 +5655,7 @@ exports.TopBar = TopBar;
 exports.TopBarItem = MenuItem;
 exports.TopBarMenu = TopBarMenu;
 exports.TopBarTrigger = TopBarTrigger;
+exports.TreeView = TreeView;
 exports.TwoColumnPanel = TwoColumnPanel;
 exports.Workspace = Workspace;
 exports.focusableSelector = focusableSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.0.0",
+  "version": "7.1.0-canary.186c088f",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -20,13 +20,17 @@
     "build:css": "postcss --output=lib/cauldron.css src/index.css",
     "dev": "concurrently 'yarn build:css --watch' 'rollup -c --watch'",
     "prepublishOnly": "NODE_ENV=production yarn build",
-    "test": "jest --maxWorkers=1 --coverage"
+    "test": "jest --maxWorkers=1 --coverage",
+    "figma:parse": "figma connect parse",
+    "figma:publish": "figma connect publish",
+    "figma:publish:dry-run": "figma connect publish --dry-run"
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
     "classnames": "^2.2.6",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
+    "react-aria-components": "^1.13.0",
     "react-id-generator": "^3.0.1",
     "react-syntax-highlighter": "^16.0.1",
     "tslib": "^2.4.0"
@@ -37,6 +41,7 @@
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
+    "@figma/code-connect": "^1.4.4",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-typescript": "^11.1.2",