@superdispatch/ui 0.17.0 → 0.18.3

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

@@ -6,7 +6,6 @@ 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: {
@@ -25,8 +24,10 @@ var defaultMoreElement = /*#__PURE__*/_jsx(Button, {
 export var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     items,
+    disableGutters,
     moreElement = defaultMoreElement,
-    renderItem = item => item.label
+    renderItem = item => item.label,
+    renderMenuItem = item => item.label
   } = _ref;
   var styles = useStyles();
   var itemNodes = useRef([]);
@@ -64,11 +65,11 @@ export var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     setFirstHiddenIdx(hiddenIdx);
   });
   return /*#__PURE__*/_jsxs(Grid, {
-    spacing: 1,
     direction: "column",
     container: true,
     wrap: "nowrap",
     className: styles.root,
+    spacing: disableGutters ? undefined : 1,
     ref: mergeRefs(ref, node => {
       setRootNode(node);
     }),
@@ -95,19 +96,17 @@ export var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
         onClose: () => {
           setMenuButtonRef(undefined);
         },
-        children: menuItems.map((item, index, arr) => {
+        children: menuItems.flatMap((item, index, arr) => {
           var next = arr[index + 1];
-          return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(MenuItem, {
-              onClick: event => {
-                var _item$onClick;
+          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: item.label
-            }, item.key), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/_jsx(Divider, {})]
-          });
+              (_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"))];
         })
       })]
     })]

package/dist-src/index.js

@@ -35,6 +35,7 @@ export * from "./theme/Color.js";
 export * from "./theme/SuperDispatchTheme.js";
 export * from "./theme/ThemeProvider.js";
 export * from "./tiles/Tiles.js";
+export * from "./utils/ExitTransitionPlaceholder.js";
 export * from "./utils/isEmptyReactNode.js";
 export * from "./utils/mergeRefs.js";
 export * from "./utils/renderChildren.js";

package/dist-src/utils/ExitTransitionPlaceholder.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import { renderChildren } from "./renderChildren.js";
+export function ExitTransitionPlaceholder(_ref) {
+  var {
+    in: inProp,
+    children: childrenProp
+  } = _ref;
+  var [children, setChildren] = useState(childrenProp);
+  useEffect(() => {
+    if (inProp) {
+      setChildren(childrenProp);
+    }
+  }, [inProp, childrenProp]);
+  return renderChildren(children);
+}

package/dist-types/index.d.ts

@@ -39,9 +39,11 @@ interface AdaptiveVerticalToolbarItem {
     menuGroupKey?: Key;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
 }
-interface AdaptiveVerticalToolbarProps extends RefAttributes<HTMLDivElement>, Omit<ToolbarProps, 'children'> {
+interface AdaptiveVerticalToolbarProps extends RefAttributes<HTMLDivElement> {
+    disableGutters?: boolean;
     items: AdaptiveVerticalToolbarItem[];
     renderItem?: (item: AdaptiveVerticalToolbarItem) => ReactNode;
+    renderMenuItem?: (item: AdaptiveVerticalToolbarItem) => ReactNode;
     moreElement?: ReactElement<{
         onClick: EventHandler<MouseEvent<HTMLElement>>;
     }>;
@@ -410,6 +412,12 @@ interface TilesProps {
 }
 declare const Tiles: ForwardRefExoticComponent<TilesProps & RefAttributes<HTMLDivElement>>;
 
+interface ExitTransitionPlaceholderProps {
+    in: boolean;
+    children: ReactNode;
+}
+declare function ExitTransitionPlaceholder({ in: inProp, children: childrenProp, }: ExitTransitionPlaceholderProps): null | ReactElement;
+
 declare function isEmptyReactNode(node: ReactNode): node is null | undefined | boolean | string;
 
 declare function mergeRefs<T>(...refs: Array<null | undefined | Ref<T>>): (node: T) => void;
@@ -440,4 +448,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-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 };
+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, ExitTransitionPlaceholder, 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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 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 { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback } from 'react';
+import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback, useEffect } 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';
@@ -341,8 +341,10 @@ var defaultMoreElement = /*#__PURE__*/jsx(Button, {
 var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     items,
+    disableGutters,
     moreElement = defaultMoreElement,
-    renderItem = item => item.label
+    renderItem = item => item.label,
+    renderMenuItem = item => item.label
   } = _ref;
   var styles = useStyles$1();
   var itemNodes = useRef([]);
@@ -380,11 +382,11 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     setFirstHiddenIdx(hiddenIdx);
   });
   return /*#__PURE__*/jsxs(Grid, {
-    spacing: 1,
     direction: "column",
     container: true,
     wrap: "nowrap",
     className: styles.root,
+    spacing: disableGutters ? undefined : 1,
     ref: mergeRefs(ref, node => {
       setRootNode(node);
     }),
@@ -411,19 +413,17 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
         onClose: () => {
           setMenuButtonRef(undefined);
         },
-        children: menuItems.map((item, index, arr) => {
+        children: menuItems.flatMap((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, {})]
-          });
+          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"))];
         })
       })]
     })]
@@ -3665,5 +3665,19 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Tiles.displayName = "Tiles";
 
-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 };
+function ExitTransitionPlaceholder(_ref) {
+  var {
+    in: inProp,
+    children: childrenProp
+  } = _ref;
+  var [children, setChildren] = useState(childrenProp);
+  useEffect(() => {
+    if (inProp) {
+      setChildren(childrenProp);
+    }
+  }, [inProp, childrenProp]);
+  return renderChildren(children);
+}
+
+export { AdaptiveToolbar, AdaptiveVerticalToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, ExitTransitionPlaceholder, 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