@superdispatch/ui 0.16.0-alpha.0 → 0.16.0-alpha.1

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

@@ -1,69 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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
-          }
-        }
-      })
-    }
-  };
-}