@superdispatch/ui 0.15.0 → 0.16.0

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

@@ -2,13 +2,15 @@ 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 { Button } from "../button/Button.js";
+import { DropdownButton } from "../dropdown-button/DropdownButton.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) {
@@ -83,7 +85,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 +99,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 +139,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/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

@@ -11,6 +11,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";

package/dist-types/index.d.ts

@@ -1,5 +1,5 @@
 /// <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 { 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 { ClassNameMap } from '@material-ui/styles';
 import { Property } from 'csstype';
@@ -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'>;
 }
@@ -168,6 +175,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'> {
 }
 /**
@@ -408,4 +423,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, 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 };