@superdispatch/ui 0.15.0 → 0.16.0-alpha.0

package/dist-src/v5/drawer/DrawerActions.js

@@ -0,0 +1,69 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import { AppBar, styled, Toolbar } from '@mui/material';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.js";
+import { VisibilityObserver } from "../utils/VisibilityObserver.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 StyledAppBar = /*#__PURE__*/styled(AppBar)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    bottom: 0,
+    top: 'auto',
+    borderLeft: 'none',
+    borderRight: 'none',
+    borderBottom: 'none',
+    transition: theme.transitions.create(['border-color']),
+    '&[data-sticky="false"]': {
+      borderTopColor: Color.Transparent
+    }
+  };
+});
+var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&.MuiToolbar-gutters': {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+      [theme.breakpoints.up('md')]: {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      }
+    }
+  };
+});
+export var DrawerActions = /*#__PURE__*/forwardRef((_ref3, appBarRef) => {
+  var {
+    children
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
+  return /*#__PURE__*/_jsx(VisibilityObserver, {
+    render: _ref4 => {
+      var {
+        ref,
+        visibility
+      } = _ref4;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/_jsx(StyledToolbar, {
+            children: children
+          })
+        })), /*#__PURE__*/_jsx("div", {
+          ref: ref
+        })]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";

package/dist-src/v5/drawer/DrawerContent.js

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material';
+export var DrawerContent = /*#__PURE__*/styled('div', {
+  name: 'SD-DrawerContent'
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    maxWidth: '100%',
+    padding: theme.spacing(2, 3),
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2, 4)
+    }
+  };
+});

package/dist-src/v5/drawer/DrawerList.js

@@ -0,0 +1,31 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { List, styled } from '@mui/material';
+
+function listItemMixins(theme, space) {
+  return {
+    '& .MuiListItem-gutters': {
+      paddingLeft: theme.spacing(space),
+      paddingRight: theme.spacing(space),
+      '&.MuiListItem-secondaryAction': {
+        paddingRight: theme.spacing(space * 2)
+      },
+      '& .MuiListItemSecondaryAction-root': {
+        right: theme.spacing(space),
+        '& .MuiIconButton-edgeEnd': {
+          marginRight: theme.spacing(-(space / 2))
+        }
+      }
+    }
+  };
+}
+
+export var DrawerList = /*#__PURE__*/styled(List)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return _objectSpread(_objectSpread({
+    maxWidth: '100%'
+  }, listItemMixins(theme, 3)), {}, {
+    [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins(theme, 4))
+  });
+});

package/dist-src/v5/drawer/DrawerOverrides.js

@@ -0,0 +1,17 @@
+export function overrideDrawer(theme) {
+  theme.components.MuiDrawer = {
+    defaultProps: {
+      anchor: 'right'
+    },
+    styleOverrides: {
+      paper: {
+        maxWidth: '100%',
+        minWidth: '100%',
+        [theme.breakpoints.up('sm')]: {
+          minWidth: theme.spacing(54),
+          maxWidth: theme.breakpoints.values.sm
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/drawer/DrawerTitle.js

@@ -0,0 +1,119 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
+import { AppBar, Grid, styled, Toolbar, Typography } from '@mui/material';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.js";
+import { VisibilityObserver } from "../utils/VisibilityObserver.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";
+var StyledAppBar = /*#__PURE__*/styled(AppBar)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    borderTop: 'none',
+    borderLeft: 'none',
+    borderRight: 'none',
+    transition: theme.transitions.create(['border-color']),
+    '&[data-sticky="false"]': {
+      borderBottomColor: Color.Transparent
+    }
+  };
+});
+var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&.MuiToolbar-gutters': {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+      [theme.breakpoints.up('md')]: {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      }
+    }
+  };
+});
+var StartAction = /*#__PURE__*/styled(Grid)(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return {
+    marginRight: theme.spacing(0.5),
+    '& .MuiIconButton-edgeStart': {
+      marginLeft: theme.spacing(-2)
+    }
+  };
+});
+var EndAction = /*#__PURE__*/styled(Grid)(_ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return {
+    marginLeft: theme.spacing(0.5),
+    '& .MuiIconButton-edgeEnd': {
+      marginRight: theme.spacing(-2)
+    }
+  };
+});
+export var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
+  var {
+    title,
+    titleTypographyProps,
+    subtitle,
+    subtitleTypographyProps,
+    startAction,
+    endAction
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded);
+
+  return /*#__PURE__*/_jsx(VisibilityObserver, {
+    render: _ref6 => {
+      var {
+        ref,
+        visibility
+      } = _ref6;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          ref: ref
+        }), /*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/_jsx(StyledToolbar, {
+            children: /*#__PURE__*/_jsxs(Grid, {
+              container: true,
+              alignItems: "center",
+              children: [!!startAction && /*#__PURE__*/_jsx(StartAction, {
+                item: true,
+                children: startAction
+              }), /*#__PURE__*/_jsxs(Grid, {
+                item: true,
+                xs: true,
+                zeroMinWidth: true,
+                children: [/*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({
+                  variant: "h3",
+                  noWrap: true
+                }, titleTypographyProps), {}, {
+                  children: title
+                })), !!subtitle && /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({
+                  variant: "body2",
+                  noWrap: true
+                }, subtitleTypographyProps), {}, {
+                  children: subtitle
+                }))]
+              }), !!endAction && /*#__PURE__*/_jsx(EndAction, {
+                item: true,
+                children: endAction
+              })]
+            })
+          })
+        }))]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";

package/dist-src/v5/grid/GridStack.js

@@ -0,0 +1,33 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "alignItems"];
+import { Grid } from '@material-ui/core';
+import { Children, forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * @deprecated in favor of `Stack`.
+ */
+export var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    alignItems = 'stretch'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var items = Children.toArray(children);
+  return /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    container: true,
+    wrap: "nowrap",
+    direction: "column",
+    alignItems: alignItems,
+    children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      zeroMinWidth: true,
+      xs: alignItems === 'stretch' ? 12 : undefined,
+      children: item
+    }, idx))
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridStack.displayName = "GridStack";

package/dist-src/v5/grid/InlineGrid.js

@@ -0,0 +1,34 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "wrap", "justify", "alignItems"];
+import { Grid } from '@material-ui/core';
+import { Children, forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * @deprecated in favor of `Inline` component.
+ */
+export var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    wrap = 'wrap',
+    justify = 'flex-start',
+    alignItems = 'flex-start'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var items = Children.toArray(children);
+  return /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    wrap: wrap,
+    container: true,
+    justify: justify,
+    alignItems: alignItems,
+    children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      zeroMinWidth: true,
+      children: item
+    }, idx))
+  }));
+});
+if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";

package/dist-src/v5/icon-button/IconButtonOverrides.js

@@ -0,0 +1,60 @@
+import { iconButtonClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+export function overrideIconButton(theme) {
+  theme.components.MuiIconButton = {
+    styleOverrides: {
+      root: {
+        // no selector for default color
+        ["&:not(.".concat(iconButtonClasses.colorInherit, "):not(.").concat(iconButtonClasses.colorPrimary, "):not(.").concat(iconButtonClasses.colorSecondary, "):not(.").concat(iconButtonClasses.disabled, ")")]: {
+          color: Color.Dark100
+        },
+        backgroundColor: Color.Transparent,
+        transition: theme.transitions.create(['color', 'background-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        '&:hover': {
+          backgroundColor: Color.Transparent
+        },
+        '&:active': {
+          color: Color.Dark500
+        },
+        '&:hover ': {
+          color: Color.Dark300
+        },
+        '&:focus': {
+          backgroundColor: Color.Silver400
+        },
+        ["&.".concat(iconButtonClasses.disabled)]: {
+          color: Color.Silver500
+        }
+      },
+      colorPrimary: {
+        '&:active': {
+          color: Color.Blue500
+        },
+        '&:hover ': {
+          color: Color.Blue300
+        },
+        '&:focus': {
+          backgroundColor: Color.Blue50
+        }
+      },
+      edgeEnd: {
+        marginRight: theme.spacing(-1)
+      },
+      edgeStart: {
+        marginLeft: theme.spacing(-1)
+      },
+      sizeSmall: {
+        padding: 3,
+        fontSize: theme.typography.pxToRem(18)
+      },
+      sizeMedium: {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(24)
+      },
+      sizeLarge: {// todo declare large size
+      }
+    }
+  };
+}

package/dist-src/v5/index.js

@@ -0,0 +1,38 @@
+export * from "./adaptive-toolbar/AdaptiveToolbar.js";
+export * from "./avatar-button/AvatarButton.js";
+export * from "./button/Button.js";
+export * from "./card-button/CardButton.js";
+export * from "./checkbox/CheckboxField.js";
+export * from "./checkbox/CheckboxGroudField.js";
+export * from "./columns/Column.js";
+export * from "./columns/Columns.js";
+export * from "./description-list/DescriptionList.js";
+export * from "./drawer/DrawerActions.js";
+export * from "./drawer/DrawerContent.js";
+export * from "./drawer/DrawerList.js";
+export * from "./drawer/DrawerTitle.js";
+export * from "./grid/GridStack.js";
+export * from "./grid/InlineGrid.js";
+export * from "./info-card/InfoCard.js";
+export * from "./inline/Inline.js";
+export * from "./overflow-text/OverflowText.js";
+export * from "./props/AlignProps.js";
+export * from "./props/CollapseProp.js";
+export * from "./props/ResponsiveProp.js";
+export * from "./props/SpaceProp.js";
+export * from "./radio/RadioField.js";
+export * from "./radio/RadioGroupField.js";
+export * from "./snackbar/Snackbar.js";
+export * from "./snackbar/SnackbarContent.js";
+export * from "./snackbar/SnackbarStack.js";
+export * from "./stack/Stack.js";
+export * from "./tag/Tag.js";
+export * from "./theme/Color.js";
+export * from "./theme/SuperDispatchTheme.js";
+export * from "./theme/ThemeProvider.js";
+export * from "./tiles/Tiles.js";
+export * from "./utils/isEmptyReactNode.js";
+export * from "./utils/mergeRefs.js";
+export * from "./utils/renderChildren.js";
+export * from "./utils/useUID.js";
+export * from "./utils/VisibilityObserver.js";

package/dist-src/v5/info-card/InfoCard.js

@@ -0,0 +1,59 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "square", "classes", "children", "className", "CardContentProps"];
+import { Card, CardContent, styled } from '@mui/material';
+import { forwardRef, useState } from 'react';
+import { assignRef } from "../utils/mergeRefs.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var StyledCardContent = /*#__PURE__*/styled(CardContent)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    padding: theme.spacing(2)
+  };
+});
+var StyledCard = /*#__PURE__*/styled(Card)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&[data-full-width="true"]': {
+      borderRadius: 0,
+      borderLeftWidth: 0,
+      borderRightWidth: 0
+    },
+    ["&[data-size=\"large\"] > ".concat(StyledCardContent)]: {
+      [theme.breakpoints.up('sm')]: {
+        padding: theme.spacing(3)
+      }
+    }
+  };
+});
+export var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
+  var {
+    size,
+    square,
+    classes,
+    children,
+    className,
+    CardContentProps: cardContentProps = {}
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
+  var [rootNode, setRootNode] = useState(null);
+  var clientRect = rootNode === null || rootNode === void 0 ? void 0 : rootNode.getBoundingClientRect();
+  var isFullWidth = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) === window.innerWidth;
+  return /*#__PURE__*/_jsx(StyledCard, _objectSpread(_objectSpread({}, props), {}, {
+    ref: node => {
+      assignRef(_ref4, node);
+      setRootNode(node);
+    },
+    "data-size": size,
+    "data-full-width": isFullWidth,
+    children: /*#__PURE__*/_jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+      children: children
+    }))
+  }));
+});
+if (process.env.NODE_ENV !== "production") InfoCard.displayName = "InfoCard";

package/dist-src/v5/inline/Inline.js

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import styled, { css } from 'styled-components';
+import { parseAlignProp } from "../props/AlignProps.js";
+import { useResponsiveProp } from "../props/ResponsiveProp.js";
+import { parseSpaceProp } from "../props/SpaceProp.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function inlineRootMixin(spaceProp, noWrap, verticalAlign, horizontalAlign) {
+  var space = parseSpaceProp(spaceProp);
+  return css(["&:before{margin-top:", "px;}& > div{display:flex;margin-left:-", "px;flex-wrap:", ";align-items:", ";justify-content:", ";& > div{&:empty{display:none;}min-width:0;flex-shrink:0;max-width:100%;margin-top:", "px;margin-left:", "px;}}"], -space - 1, space, noWrap ? 'nowrap' : 'wrap', parseAlignProp(verticalAlign), parseAlignProp(horizontalAlign), space, space);
+}
+
+var InlineRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Inline__InlineRoot",
+  componentId: "SD__sc-1tgkwtt-0"
+})(_ref => {
+  var {
+    theme,
+    space,
+    noWrap,
+    verticalAlign,
+    horizontalAlign
+  } = _ref;
+  return css(["padding-top:1px;&:before{content:'';display:block;}", " ", "{", "}", "{", "}"], inlineRootMixin(space[0], noWrap[0], verticalAlign[0], horizontalAlign[0]), theme.breakpoints.up('sm'), inlineRootMixin(space[1], noWrap[1], verticalAlign[1], horizontalAlign[1]), theme.breakpoints.up('md'), inlineRootMixin(space[2], noWrap[2], verticalAlign[2], horizontalAlign[2]));
+});
+export var Inline = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    noWrap: noWrapProp = false,
+    space: spaceProp = 'xsmall',
+    verticalAlign: verticalAlignProp = 'top',
+    horizontalAlign: horizontalAlignProp = 'left'
+  } = _ref2;
+  var space = useResponsiveProp(spaceProp);
+  var noWrap = useResponsiveProp(noWrapProp);
+  var verticalAlign = useResponsiveProp(verticalAlignProp);
+  var horizontalAlign = useResponsiveProp(horizontalAlignProp);
+  return /*#__PURE__*/_jsx(InlineRoot, {
+    ref: ref,
+    space: space,
+    noWrap: noWrap,
+    verticalAlign: verticalAlign,
+    horizontalAlign: horizontalAlign,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    children: /*#__PURE__*/_jsx("div", {
+      children: flattenChildren(children).map((child, idx) => /*#__PURE__*/_jsx("div", {
+        children: child
+      }, idx))
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";

package/dist-src/v5/link/LinkOverrides.js

@@ -0,0 +1,46 @@
+import { Color } from "../theme/Color.js";
+
+function line(color) {
+  return "linear-gradient(to right, ".concat(color, " 0%, ").concat(color, " 100%)");
+}
+
+export function overrideLink(theme) {
+  theme.components.MuiLink = {
+    defaultProps: {
+      underline: 'none',
+      color: 'textPrimary'
+    },
+    styleOverrides: {
+      root: {
+        backgroundSize: '100% 1px',
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: '0 100%',
+        backgroundColor: Color.Transparent,
+        '&:focus': {
+          outline: 'none'
+        },
+        '&:hover, &:active': {
+          backgroundImage: line('currentColor')
+        }
+      },
+      // @ts-expect-error type def need in patch-package
+      colorTextPrimary: {
+        backgroundImage: line(Color.Silver500),
+        '&:focus, &:hover, &:active': {
+          color: Color.Blue300,
+          backgroundImage: line(Color.Blue300)
+        }
+      },
+      button: {
+        // Reset button styles.
+        backgroundColor: 'unset',
+        // Override browser defaults.
+        fontSize: 'inherit',
+        textAlign: 'inherit',
+        lineHeight: 'inherit',
+        userSelect: 'inherit',
+        verticalAlign: 'inherit'
+      }
+    }
+  };
+}

package/dist-src/v5/list/ListOverrides.js

@@ -0,0 +1,16 @@
+import { listItemClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+export function overrideList(theme) {
+  theme.components.MuiListItem = {
+    styleOverrides: {
+      root: {
+        ["&.".concat(listItemClasses.selected, ", &.").concat(listItemClasses.selected, ":hover")]: {
+          backgroundColor: Color.Blue50
+        },
+        '& .MuiTouchRipple-root': {
+          color: Color.Blue100
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/menu/MenuOverrides.js

@@ -0,0 +1,34 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { menuItemClasses } from '@mui/material';
+import { Color } from "../../theme/Color.js";
+export function overrideMenu(theme) {
+  theme.components.MuiMenu = {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
+    }
+  };
+  theme.components.MuiMenuItem = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        '& .MuiTouchRipple-root': {
+          color: Color.Blue100
+        },
+        ["&.".concat(menuItemClasses.selected, ", &.").concat(menuItemClasses.selected, ":hover")]: {
+          backgroundColor: Color.Blue50,
+          ["&.".concat(menuItemClasses.focusVisible)]: {
+            backgroundColor: Color.Blue50
+          }
+        }
+      })
+    }
+  };
+}