@superdispatch/ui 0.15.0 → 0.18.0

package/dist-src/adaptive-toolbar/AdaptiveToolbar.js

@@ -1,34 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["items"];
-import { ResizeObserver } from '@juggle/resize-observer';
-import { Grid, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
+import { Divider, Grid, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
 import { MoreHoriz } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
-import { useEventHandler } from '@superdispatch/hooks';
-import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import { Button } from "../button/Button.js";
+import { DropdownButton } from "../dropdown-button/DropdownButton.js";
+import { useResizeObserver } from "../utils/ResizeObserver.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-function useResizeObserver(node, observer) {
-  var handler = useEventHandler(observer);
-  useLayoutEffect(() => {
-    if (!node) {
-      return;
-    }
-
-    var resizeObserver = new ResizeObserver(() => {
-      handler(node);
-    });
-    resizeObserver.observe(node);
-    handler(node);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [node, handler]);
-}
-
 var useStyles = /*#__PURE__*/makeStyles({
   actions: {
     overflow: 'hidden'
@@ -83,7 +65,6 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsxs(Grid, {
       container: true,
       spacing: 1,
-      wrap: "nowrap",
       ref: setRootNode,
       children: [/*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -98,7 +79,16 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
             ref: node => {
               itemNodes.current[idx] = node;
             },
-            children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+            children: item.dropdown ? /*#__PURE__*/_jsx(DropdownButton, _objectSpread(_objectSpread({
+              type: "button",
+              onClick: item.onClick,
+              label: item.label
+            }, item.ButtonProps), {}, {
+              children: item.dropdown.map(dropdownItem => /*#__PURE__*/_jsx(MenuItem, {
+                onClick: dropdownItem.onClick,
+                children: dropdownItem.label
+              }, dropdownItem.key))
+            })) : /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
               type: "button",
               onClick: item.onClick
             }, item.ButtonProps), {}, {
@@ -129,15 +119,30 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
           onClose: () => {
             setMenuButtonRef(undefined);
           },
-          children: menuItems.map(item => /*#__PURE__*/_jsx(MenuItem, {
-            onClick: event => {
-              var _item$onClick;
+          children: menuItems.map((item, index, arr) => {
+            var _item$dropdown;
 
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-              setMenuButtonRef(undefined);
-            },
-            children: item.label
-          }, item.key))
+            var next = arr[index + 1];
+            return /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(MenuItem, {
+                onClick: event => {
+                  var _item$onClick;
+
+                  (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+                  setMenuButtonRef(undefined);
+                },
+                children: item.label
+              }, item.key), (_item$dropdown = item.dropdown) === null || _item$dropdown === void 0 ? void 0 : _item$dropdown.map(dropdownItem => /*#__PURE__*/_jsx(MenuItem, {
+                onClick: event => {
+                  var _dropdownItem$onClick;
+
+                  (_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 ? void 0 : _dropdownItem$onClick.call(dropdownItem, event);
+                  setMenuButtonRef(undefined);
+                },
+                children: dropdownItem.label
+              }, dropdownItem.key)), next && item.groupKey !== next.groupKey && /*#__PURE__*/_jsx(Divider, {})]
+            });
+          })
         })]
       })]
     })

package/dist-src/adaptive-vertical-toolbar/AdaptiveVerticalToolbar.js

@@ -0,0 +1,115 @@
+import { Divider, Grid, Menu, MenuItem } from '@material-ui/core';
+import { MoreHoriz } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/styles';
+import { cloneElement, forwardRef, useRef, useState } from 'react';
+import { Button } from "../button/Button.js";
+import { mergeRefs } from "../utils/mergeRefs.js";
+import { useResizeObserver } from "../utils/ResizeObserver.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = /*#__PURE__*/makeStyles({
+  root: {
+    overflow: 'hidden',
+    height: '100%'
+  }
+}, {
+  name: 'SD-AdaptiveVerticalToolbar'
+});
+
+var defaultMoreElement = /*#__PURE__*/_jsx(Button, {
+  type: "button",
+  children: /*#__PURE__*/_jsx(MoreHoriz, {})
+});
+
+export var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    items,
+    disableGutters,
+    moreElement = defaultMoreElement,
+    renderItem = item => item.label,
+    renderMenuItem = item => item.label
+  } = _ref;
+  var styles = useStyles();
+  var itemNodes = useRef([]);
+  var optionsButtonRef = useRef(null);
+  var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
+  var menuItems = firstHiddenIdx === -1 ? [] : items.slice(firstHiddenIdx);
+  var [menuButtonNode, setMenuButtonRef] = useState();
+  var [rootNode, setRootNode] = useState(null);
+  useResizeObserver(rootNode, node => {
+    var _optionsButtonRef$cur;
+
+    var rootRect = node.getBoundingClientRect();
+    var rootHeight = rootRect.bottom;
+    var optionsButtonRect = (_optionsButtonRef$cur = optionsButtonRef.current) === null || _optionsButtonRef$cur === void 0 ? void 0 : _optionsButtonRef$cur.getBoundingClientRect();
+    var optionsButtonWidth = (optionsButtonRect === null || optionsButtonRect === void 0 ? void 0 : optionsButtonRect.height) || 0;
+    var maxBottomPosition = rootHeight - optionsButtonWidth;
+    var mountedNodes = itemNodes.current.filter(x => x != null);
+    var hiddenIdx = mountedNodes.findIndex((itemNode, idx) => {
+      itemNode.removeAttribute('hidden');
+      var itemRect = itemNode.getBoundingClientRect(); // Ignore options button height when checking last item.
+
+      if (idx === mountedNodes.length - 1) {
+        return itemRect.bottom > rootHeight;
+      }
+
+      return itemRect.bottom > maxBottomPosition;
+    });
+
+    if (hiddenIdx !== -1) {
+      mountedNodes.slice(hiddenIdx).forEach(itemNode => {
+        itemNode.setAttribute('hidden', 'true');
+      });
+    }
+
+    setFirstHiddenIdx(hiddenIdx);
+  });
+  return /*#__PURE__*/_jsxs(Grid, {
+    direction: "column",
+    container: true,
+    wrap: "nowrap",
+    className: styles.root,
+    spacing: disableGutters ? undefined : 1,
+    ref: mergeRefs(ref, node => {
+      setRootNode(node);
+    }),
+    children: [items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      ref: node => {
+        itemNodes.current[idx] = node;
+      },
+      children: renderItem(item)
+    }, item.key)), menuItems.length > 0 && /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      ref: optionsButtonRef,
+      component: "div",
+      children: [/*#__PURE__*/cloneElement(moreElement, {
+        onClick: _ref2 => {
+          var {
+            currentTarget
+          } = _ref2;
+          setMenuButtonRef(currentTarget);
+        }
+      }), /*#__PURE__*/_jsx(Menu, {
+        open: !!menuButtonNode,
+        anchorEl: menuButtonNode,
+        onClose: () => {
+          setMenuButtonRef(undefined);
+        },
+        children: menuItems.flatMap((item, index, arr) => {
+          var next = arr[index + 1];
+          return [/*#__PURE__*/_jsx(MenuItem, {
+            onClick: event => {
+              var _item$onClick;
+
+              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+              setMenuButtonRef(undefined);
+            },
+            children: renderMenuItem(item)
+          }, item.key), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/_jsx(Divider, {}, "".concat(item.key, "-divider"))];
+        })
+      })]
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName = "AdaptiveVerticalToolbar";

package/dist-src/dropdown-button/DropdownButton.js

@@ -0,0 +1,114 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["MenuListProps", "ButtonGroupProps", "children", "isLoading", "onClick", "label"];
+import { ButtonGroup, MenuList, Popover } from '@material-ui/core';
+import * as React from 'react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Color, mergeRefs, useUID } from "../index.js";
+import { Button } from "../button/Button.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+function CaretDownIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    viewBox: "0 0 8 4",
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      d: "M0.666687 0.666656L4.00002 3.99999L7.33335 0.666656H0.666687Z"
+    })
+  });
+}
+
+var CaretButton = /*#__PURE__*/styled(Button).withConfig({
+  displayName: "DropdownButton__CaretButton",
+  componentId: "SD__sc-8l84jm-0"
+})(["width:auto;", ";"], _ref => {
+  var {
+    variant
+  } = _ref;
+  return variant === 'contained' && "border-left: 1px solid ".concat(Color.Blue500);
+});
+export var DropdownButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var _anchorRef$current2;
+
+  var {
+    MenuListProps,
+    ButtonGroupProps,
+    children,
+    isLoading,
+    onClick,
+    label
+  } = _ref2,
+      buttonProps = _objectWithoutProperties(_ref2, _excluded);
+
+  var uid = useUID();
+  var [open, setOpen] = React.useState(false);
+  var anchorRef = React.useRef(null);
+
+  function handleClick(event) {
+    setOpen(false);
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }
+
+  function handleToggle() {
+    setOpen(prevOpen => !prevOpen);
+  }
+
+  function handleClose(event) {
+    var _anchorRef$current;
+
+    if ((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event.currentTarget)) {
+      return;
+    }
+
+    setOpen(false);
+  }
+
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ButtonGroup, _objectSpread(_objectSpread({}, ButtonGroupProps), {}, {
+      ref: mergeRefs(ButtonGroupProps === null || ButtonGroupProps === void 0 ? void 0 : ButtonGroupProps.ref, anchorRef),
+      fullWidth: (ButtonGroupProps === null || ButtonGroupProps === void 0 ? void 0 : ButtonGroupProps.fullWidth) || buttonProps.fullWidth,
+      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        ref: ref,
+        onClick: handleClick,
+        disabled: isLoading,
+        isLoading: isLoading
+      }, buttonProps), {}, {
+        children: label
+      })), /*#__PURE__*/_jsx(CaretButton, {
+        onClick: handleToggle,
+        disabled: isLoading,
+        color: buttonProps.color,
+        variant: buttonProps.variant,
+        "aria-haspopup": "menu",
+        "aria-controls": open ? uid : undefined,
+        "aria-expanded": open ? 'true' : undefined,
+        children: /*#__PURE__*/_jsx(CaretDownIcon, {})
+      })]
+    })), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      onClose: handleClose,
+      anchorEl: anchorRef.current,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          minWidth: (_anchorRef$current2 = anchorRef.current) === null || _anchorRef$current2 === void 0 ? void 0 : _anchorRef$current2.clientWidth
+        },
+        children: /*#__PURE__*/_jsx(MenuList, _objectSpread(_objectSpread({}, MenuListProps), {}, {
+          id: uid,
+          onClick: () => {
+            setOpen(false);
+          },
+          children: children
+        }))
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") DropdownButton.displayName = "DropdownButton";
+export default DropdownButton;

package/dist-src/index.js

@@ -1,4 +1,5 @@
 export * from "./adaptive-toolbar/AdaptiveToolbar.js";
+export * from "./adaptive-vertical-toolbar/AdaptiveVerticalToolbar.js";
 export * from "./avatar-button/AvatarButton.js";
 export * from "./button/Button.js";
 export * from "./card-button/CardButton.js";
@@ -11,6 +12,7 @@ export * from "./drawer/DrawerActions.js";
 export * from "./drawer/DrawerContent.js";
 export * from "./drawer/DrawerList.js";
 export * from "./drawer/DrawerTitle.js";
+export * from "./dropdown-button/DropdownButton.js";
 export * from "./grid/GridStack.js";
 export * from "./grid/InlineGrid.js";
 export * from "./info-card/InfoCard.js";
@@ -36,5 +38,6 @@ export * from "./tiles/Tiles.js";
 export * from "./utils/isEmptyReactNode.js";
 export * from "./utils/mergeRefs.js";
 export * from "./utils/renderChildren.js";
+export * from "./utils/ResizeObserver.js";
 export * from "./utils/useUID.js";
 export * from "./utils/VisibilityObserver.js";

package/dist-src/utils/ResizeObserver.js

@@ -0,0 +1,20 @@
+import { ResizeObserver } from '@juggle/resize-observer';
+import { useEventHandler } from '@superdispatch/hooks';
+import { useLayoutEffect } from 'react';
+export function useResizeObserver(node, observer) {
+  var handler = useEventHandler(observer);
+  useLayoutEffect(() => {
+    if (!node) {
+      return;
+    }
+
+    var resizeObserver = new ResizeObserver(() => {
+      handler(node);
+    });
+    resizeObserver.observe(node);
+    handler(node);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [node, handler]);
+}

package/dist-types/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ButtonProps as ButtonProps$1, ToolbarProps, AvatarClassKey, AvatarTypeMap, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps, TypographyProps, TooltipProps, ListProps, ListTypeMap, GridProps, CardClassKey, CardProps, CardContentProps, RadioProps, RadioGroupProps, SnackbarContentProps as SnackbarContentProps$1, SnackbarContentClassKey as SnackbarContentClassKey$1, SnackbarProps as SnackbarProps$1, Theme } from '@material-ui/core';
-import { RefAttributes, ForwardRefExoticComponent, Key, ReactNode, MouseEvent, ButtonHTMLAttributes, Ref, ElementType, HTMLAttributes, ReactElement, ConsumerProps } from 'react';
+import { ButtonProps as ButtonProps$1, ToolbarProps, AvatarClassKey, AvatarTypeMap, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps, TypographyProps, TooltipProps, ListProps, ListTypeMap, MenuListProps, ButtonGroupProps, GridProps, CardClassKey, CardProps, CardContentProps, RadioProps, RadioGroupProps, SnackbarContentProps as SnackbarContentProps$1, SnackbarContentClassKey as SnackbarContentClassKey$1, SnackbarProps as SnackbarProps$1, Theme } from '@material-ui/core';
+import { RefAttributes, ForwardRefExoticComponent, Key, ReactNode, MouseEvent, ReactElement, EventHandler, ButtonHTMLAttributes, Ref, ElementType, HTMLAttributes, ConsumerProps } from 'react';
 import { ClassNameMap } from '@material-ui/styles';
 import { Property } from 'csstype';
 import { CommonProps } from '@material-ui/core/OverridableComponent';
@@ -15,9 +15,16 @@ interface ButtonProps extends RefAttributes<HTMLButtonElement>, Omit<ButtonProps
 }
 declare const Button: ForwardRefExoticComponent<ButtonProps>;
 
+interface AdaptiveToolbarDropdownItem {
+    key: Key;
+    label: ReactNode;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
 interface AdaptiveToolbarItem {
     key: Key;
+    groupKey?: Key;
     label: ReactNode;
+    dropdown?: AdaptiveToolbarDropdownItem[];
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     ButtonProps?: Omit<ButtonProps, 'type' | 'onClick'>;
 }
@@ -26,6 +33,23 @@ interface AdaptiveToolbarProps extends RefAttributes<HTMLDivElement>, Omit<Toolb
 }
 declare const AdaptiveToolbar: ForwardRefExoticComponent<AdaptiveToolbarProps>;
 
+interface AdaptiveVerticalToolbarItem {
+    key: Key;
+    label: ReactNode;
+    menuGroupKey?: Key;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+interface AdaptiveVerticalToolbarProps extends RefAttributes<HTMLDivElement> {
+    disableGutters?: boolean;
+    items: AdaptiveVerticalToolbarItem[];
+    renderItem?: (item: AdaptiveVerticalToolbarItem) => ReactNode;
+    renderMenuItem?: (item: AdaptiveVerticalToolbarItem) => ReactNode;
+    moreElement?: ReactElement<{
+        onClick: EventHandler<MouseEvent<HTMLElement>>;
+    }>;
+}
+declare const AdaptiveVerticalToolbar: ForwardRefExoticComponent<AdaptiveVerticalToolbarProps>;
+
 declare type AvatarButtonClassKey = 'button' | 'overlay' | 'progress' | 'withIcon' | 'sizeLarge' | Exclude<AvatarClassKey, 'circle'>;
 interface AvatarButtonProps extends RefAttributes<HTMLButtonElement>, ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'small' | 'large';
@@ -168,6 +192,14 @@ interface DrawerTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'
 }
 declare const DrawerTitle: ForwardRefExoticComponent<DrawerTitleProps & RefAttributes<HTMLDivElement>>;
 
+interface DropdownButtonProps extends Omit<ButtonProps, 'children'> {
+    label?: ReactNode;
+    children: ReactNode;
+    MenuListProps?: Omit<MenuListProps, 'id'>;
+    ButtonGroupProps?: ButtonGroupProps;
+}
+declare const DropdownButton: ForwardRefExoticComponent<Pick<DropdownButtonProps, "className" | "style" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "disableFocusRipple" | "href" | "size" | "variant" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "rel" | "target" | "isActive" | "isLoading" | "MenuListProps" | "ButtonGroupProps"> & RefAttributes<HTMLButtonElement>>;
+
 interface GridStackProps extends RefAttributes<HTMLDivElement>, Pick<GridProps, 'style' | 'className' | 'children' | 'spacing' | 'alignItems'> {
 }
 /**
@@ -387,6 +419,8 @@ declare function assignRef<T>(ref: Ref<T> | undefined, value: T): void;
 
 declare function renderChildren(node: ReactNode): null | ReactElement;
 
+declare function useResizeObserver<T extends HTMLElement>(node: null | undefined | T, observer: (node: T) => void): void;
+
 declare function useUID(defaultID?: string): string;
 
 declare type ElementVisibility = 'undetermined' | 'visible' | 'invisible';
@@ -408,4 +442,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-export { AdaptiveToolbar, AdaptiveToolbarItem, AdaptiveToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, ElementVisibility, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, Inline, InlineGrid, InlineGridProps, InlineProps, NegativeSpaceProp, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioField, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, Inline, InlineGrid, InlineGridProps, InlineProps, NegativeSpaceProp, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioField, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };