@superdispatch/ui 0.16.0 → 0.17.0

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

@@ -1,36 +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 { 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'

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

@@ -0,0 +1,116 @@
+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 { Fragment as _Fragment } 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,
+    moreElement = defaultMoreElement,
+    renderItem = 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, {
+    spacing: 1,
+    direction: "column",
+    container: true,
+    wrap: "nowrap",
+    className: styles.root,
+    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.map((item, index, arr) => {
+          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), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/_jsx(Divider, {})]
+          });
+        })
+      })]
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName = "AdaptiveVerticalToolbar";

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";
@@ -37,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, 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, ButtonHTMLAttributes, Ref, ElementType, HTMLAttributes, ReactElement, ConsumerProps } from 'react';
+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';
@@ -33,6 +33,21 @@ 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>, Omit<ToolbarProps, 'children'> {
+    items: AdaptiveVerticalToolbarItem[];
+    renderItem?: (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';
@@ -402,6 +417,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';
@@ -423,4 +440,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, 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, 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, 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 };

package/dist-web/index.js

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card, CardContent, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, IconButton, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
 import { MoreHoriz, Close, Warning, CheckCircle } from '@material-ui/icons';
 import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
-import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo, useConstant } from '@superdispatch/hooks';
-import { forwardRef, useState, useRef, useLayoutEffect, useMemo, useContext, createContext, Children, useCallback } from 'react';
+import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled, { css, ThemeProvider as ThemeProvider$2 } from 'styled-components';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo, useConstant } from '@superdispatch/hooks';
 import clsx from 'clsx';
 import flattenChildren from 'react-keyed-flatten-children';
 import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
@@ -145,8 +145,6 @@ var DropdownButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DropdownButton.displayName = "DropdownButton";
 
-var _excluded$2 = ["items"];
-
 function useResizeObserver(node, observer) {
   var handler = useEventHandler(observer);
   useLayoutEffect(() => {
@@ -165,6 +163,7 @@ function useResizeObserver(node, observer) {
   }, [node, handler]);
 }
 
+var _excluded$2 = ["items"];
 var useStyles = /*#__PURE__*/makeStyles({
   actions: {
     overflow: 'hidden'
@@ -304,6 +303,134 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") AdaptiveToolbar.displayName = "AdaptiveToolbar";
 
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return node => {
+    refs.forEach(ref => {
+      assignRef(ref, node);
+    });
+  };
+}
+function assignRef(ref, value) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(value);
+    } else {
+      ref.current = value;
+    }
+  }
+}
+
+var useStyles$1 = /*#__PURE__*/makeStyles({
+  root: {
+    overflow: 'hidden',
+    height: '100%'
+  }
+}, {
+  name: 'SD-AdaptiveVerticalToolbar'
+});
+
+var defaultMoreElement = /*#__PURE__*/jsx(Button, {
+  type: "button",
+  children: /*#__PURE__*/jsx(MoreHoriz, {})
+});
+
+var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    items,
+    moreElement = defaultMoreElement,
+    renderItem = item => item.label
+  } = _ref;
+  var styles = useStyles$1();
+  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, {
+    spacing: 1,
+    direction: "column",
+    container: true,
+    wrap: "nowrap",
+    className: styles.root,
+    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.map((item, index, arr) => {
+          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), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/jsx(Divider, {})]
+          });
+        })
+      })]
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName = "AdaptiveVerticalToolbar";
+
 var Color;
 
 (function (Color) {
@@ -384,7 +511,7 @@ function isColorProp(name) {
 
 var _excluded$3 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
     _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
-var useStyles$1 = /*#__PURE__*/makeStyles(theme => {
+var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
   return {
     button: {
@@ -494,7 +621,7 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$3);
 
-  var _useStyles = useStyles$1({
+  var _useStyles = useStyles$2({
     classes
   }),
       {
@@ -535,7 +662,7 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";
 
 var _excluded$4 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
-var useStyles$2 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     width: '100%',
     display: 'flex',
@@ -620,7 +747,7 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$4);
 
-  var styles = useStyles$2({
+  var styles = useStyles$3({
     classes
   });
   return /*#__PURE__*/jsx(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
@@ -990,7 +1117,7 @@ function VisibilityObserver(_ref2) {
 
 var _excluded$8 = ["title", "enterDelay"],
     _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
-var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     marginBottom: -1,
     borderBottom: '1px dashed transparent',
@@ -1024,7 +1151,7 @@ var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
       props = _objectWithoutProperties(_ref, _excluded2$1);
 
   var [isOpen, setIsOpen] = useState(false);
-  var styles = useStyles$3();
+  var styles = useStyles$4();
   return /*#__PURE__*/jsx(VisibilityObserver, {
     render: _ref2 => {
       var {
@@ -1087,7 +1214,7 @@ function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   };
 }
 
-var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
   list: sizeVariant(theme, 2, 1),
   listSmall: sizeVariant(theme, 1, 0.5),
   listLarge: sizeVariant(theme, 3, 2),
@@ -1118,7 +1245,7 @@ var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$9);
 
-  var styles = useStyles$4();
+  var styles = useStyles$5();
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "data-size": size,
@@ -1144,7 +1271,7 @@ var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     contentTypographyProps,
     fallback
   } = _ref2;
-  var styles = useStyles$4();
+  var styles = useStyles$5();
   var labelID = useUID(labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.id);
   var shouldRenderFallback = isEmptyReactNode(content);
   return /*#__PURE__*/jsxs("div", {
@@ -1173,7 +1300,7 @@ var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
 
 var _excluded$a = ["children", "className"];
-var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
   appBar: {
     '&&': {
       bottom: 0,
@@ -1208,7 +1335,7 @@ var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$a);
 
-  var styles = useStyles$5();
+  var styles = useStyles$6();
   return /*#__PURE__*/jsx(VisibilityObserver, {
     render: _ref2 => {
       var {
@@ -1234,7 +1361,7 @@ var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
 if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
 
 var _excluded$b = ["className"];
-var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$7 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     maxWidth: '100%',
     padding: theme.spacing(2, 3),
@@ -1251,7 +1378,7 @@ var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$b);
 
-  var styles = useStyles$6();
+  var styles = useStyles$7();
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     className: clsx(styles.root, className)
@@ -1279,7 +1406,7 @@ function listItemMixins(theme, space) {
   };
 }
 
-var useStyles$7 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
   root: _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
@@ -1294,7 +1421,7 @@ var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$c);
 
-  var styles = useStyles$7();
+  var styles = useStyles$8();
   return /*#__PURE__*/jsx(List, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     component: "div",
@@ -1304,7 +1431,7 @@ var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";
 
 var _excluded$d = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
-var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
   appBar: {
     '&&': {
       borderTop: 'none',
@@ -1354,7 +1481,7 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
-  var styles = useStyles$8();
+  var styles = useStyles$9();
   return /*#__PURE__*/jsx(VisibilityObserver, {
     render: _ref2 => {
       var {
@@ -1465,30 +1592,9 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";
 
-function mergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return node => {
-    refs.forEach(ref => {
-      assignRef(ref, node);
-    });
-  };
-}
-function assignRef(ref, value) {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(value);
-    } else {
-      ref.current = value;
-    }
-  }
-}
-
 var _excluded$g = ["size", "square", "classes", "children", "className", "CardContentProps"],
     _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
-var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$a = /*#__PURE__*/makeStyles(theme => ({
   root: {
     '&$fullWidth': {
       borderRadius: 0,
@@ -1520,7 +1626,7 @@ var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$g);
 
-  var _useStyles = useStyles$9({
+  var _useStyles = useStyles$a({
     classes
   }),
       {
@@ -1678,7 +1784,7 @@ function useCollapseBreakpoint(collapseBreakpoint) {
 
 var _excluded$j = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2$3 = ["icon", "closeButton", "variantError", "variantSuccess"];
-var useStyles$a = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
   root: {
     color: Color.White,
     backgroundColor: Color.Dark500,
@@ -1723,7 +1829,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$j);
 
-  var _useStyles = useStyles$a({
+  var _useStyles = useStyles$b({
     classes
   }),
       {
@@ -1963,7 +2069,7 @@ var Stack = /*#__PURE__*/forwardRef((_ref2, ref) => {
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
 var _excluded$m = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
-var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
   root: {
     maxWidth: '100%',
     alignItems: 'center',
@@ -2048,7 +2154,7 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$m);
 
-  var styles = useStyles$b({
+  var styles = useStyles$c({
     classes
   });
   return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, props), {}, {
@@ -3495,7 +3601,7 @@ function columnVariant(columns) {
   };
 }
 
-var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$d = /*#__PURE__*/makeStyles(theme => ({
   root: {
     paddingTop: PREVENT_COLLAPSE,
     '&:before': {
@@ -3539,7 +3645,7 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
     space: spaceProp = 1,
     columns: columnsProp = 1
   } = _ref;
-  var styles = useStyles$c({});
+  var styles = useStyles$d({});
   var space = useResponsivePropRecord(spaceProp);
   var columns = useResponsivePropRecord(columnsProp);
   return /*#__PURE__*/jsx("div", {
@@ -3559,5 +3665,5 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Tiles.displayName = "Tiles";
 
-export { AdaptiveToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, GridStack, InfoCard, Inline, InlineGrid, OverflowText, RadioField, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveVerticalToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, GridStack, InfoCard, Inline, InlineGrid, OverflowText, RadioField, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
 //# sourceMappingURL=index.js.map