@superdispatch/ui 0.21.13 → 0.22.0

package/pkg/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "@superdispatch/ui",
-  "version": "0.21.8",
-  "license": "MIT",
-  "files": [
-    "dist-*/",
-    "bin/"
-  ],
-  "pika": true,
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/superdispatch/ui.git"
-  },
-  "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "@superdispatch/hooks": "^0.21.0",
-    "clsx": "^1.1.1",
-    "react-keyed-flatten-children": "^1.2.0",
-    "react-number-format": "4.9.4"
-  },
-  "peerDependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/styles": "^4.11.4",
-    "@mdi/js": "^6.0.0",
-    "react": "^17.0.2",
-    "styled-components": "^5.2.1"
-  },
-  "publishConfig": {
-    "access": "public",
-    "directory": "pkg"
-  },
-  "esnext": "dist-src/index.js",
-  "module": "dist-web/index.js",
-  "main": "dist-node/index.js",
-  "types": "dist-types/index.d.ts"
-}

package/playroom.ts

@@ -1,31 +0,0 @@
-export {
-  AdaptiveToolbar,
-  AdaptiveVerticalToolbar,
-  AvatarButton,
-  CardButton,
-  CheckboxField,
-  CheckboxGroupField,
-  Color,
-  Column,
-  Columns,
-  DescriptionList,
-  DescriptionListItem,
-  DrawerActions,
-  DrawerContent,
-  DrawerList,
-  DrawerTitle,
-  InfoCard,
-  Inline,
-  NumberField,
-  OverflowText,
-  RadioField,
-  RadioGroupField,
-  Snackbar,
-  SnackbarContent,
-  Stack,
-  Tag,
-  Tiles,
-  VisibilityObserver,
-} from './src';
-export { Dialog } from './src/dialog/Dialog.playroom';
-export { Drawer } from './src/drawer/Drawer.playroom';

package/src/__tests__/index.spec.ts

@@ -1,134 +0,0 @@
-import * as api from '..';
-
-it('exposes public api', () => {
-  expect(api).toMatchInlineSnapshot(`
-    Object {
-      "AdaptiveToolbar": React.forwardRef(AdaptiveToolbar),
-      "AdaptiveVerticalToolbar": React.forwardRef(AdaptiveVerticalToolbar),
-      "AvatarButton": React.forwardRef(AvatarButton),
-      "Button": React.forwardRef(Button),
-      "CardButton": React.forwardRef(CardButton),
-      "CheckboxField": React.forwardRef(CheckboxField),
-      "CheckboxGroupField": React.forwardRef(CheckboxGroupField),
-      "Color": Object {
-        "Black": "#000",
-        "Black20": "rgba(0, 0, 0, 0.2)",
-        "Black50": "rgba(0, 0, 0, 0.5)",
-        "Blue100": "#A8D1FF",
-        "Blue200": "#66ADFF",
-        "Blue300": "#0075FF",
-        "Blue400": "#0063DB",
-        "Blue50": "#EBF4FF",
-        "Blue500": "#0050B2",
-        "Blue75": "#CCE5FF",
-        "Dark100": "#8F949E",
-        "Dark200": "#6A707C",
-        "Dark300": "#5B6371",
-        "Dark400": "#323C4E",
-        "Dark450": "#222F44",
-        "Dark500": "#192334",
-        "Green100": "#90EAAE",
-        "Green200": "#5DDA87",
-        "Green300": "#1FA84D",
-        "Green400": "#1E8F46",
-        "Green50": "#ECF9EF",
-        "Green500": "#19803D",
-        "Green75": "#C8F4D1",
-        "Grey100": "#8F949E",
-        "Grey200": "#6A707C",
-        "Grey300": "#5B6371",
-        "Grey400": "#323C4E",
-        "Grey450": "#222F44",
-        "Grey500": "#192334",
-        "Purple100": "#CBC8EE",
-        "Purple200": "#A7A1E8",
-        "Purple300": "#6559CF",
-        "Purple400": "#473ABB",
-        "Purple50": "#EFEEFC",
-        "Purple500": "#3A2F9D",
-        "Purple75": "#DCDBF5",
-        "Red100": "#FDC2BA",
-        "Red200": "#FE988B",
-        "Red300": "#EE3017",
-        "Red400": "#D9210D",
-        "Red50": "#FFEDEB",
-        "Red500": "#C31909",
-        "Red75": "#FDD9D3",
-        "Silver100": "#F6F7F8",
-        "Silver200": "#F3F5F8",
-        "Silver300": "#E8ECF0",
-        "Silver400": "#E1E5EA",
-        "Silver500": "#C4CDD5",
-        "Teal100": "#91E3F8",
-        "Teal200": "#61D3EF",
-        "Teal300": "#00A0CC",
-        "Teal400": "#008DB8",
-        "Teal50": "#E3F6FC",
-        "Teal500": "#007DA3",
-        "Teal75": "#BEEDF9",
-        "Transparent": "rgba(0, 0, 0, 0)",
-        "White": "#fff",
-        "White08": "rgba(255, 255, 255, 0.08)",
-        "White10": "rgba(255, 255, 255, 0.1)",
-        "White20": "rgba(255, 255, 255, 0.2)",
-        "White40": "rgba(255, 255, 255, 0.4)",
-        "White50": "rgba(255, 255, 255, 0.5)",
-        "Yellow100": "#FFE494",
-        "Yellow200": "#FFDC6B",
-        "Yellow300": "#FFCB47",
-        "Yellow400": "#FFA91F",
-        "Yellow50": "#FFF9E5",
-        "Yellow500": "#DB7500",
-        "Yellow75": "#FFF1C2",
-      },
-      "Column": React.forwardRef(Column),
-      "Columns": React.forwardRef(Columns),
-      "DescriptionList": React.forwardRef(DescriptionList),
-      "DescriptionListItem": React.forwardRef(DescriptionListItem),
-      "DrawerActions": React.forwardRef(DrawerActions),
-      "DrawerContent": React.forwardRef(DrawerContent),
-      "DrawerList": React.forwardRef(DrawerList),
-      "DrawerTitle": React.forwardRef(DrawerTitle),
-      "DropdownButton": React.forwardRef(DropdownButton),
-      "ExitTransitionPlaceholder": [Function],
-      "GridStack": React.forwardRef(GridStack),
-      "InfoCard": React.forwardRef(InfoCard),
-      "InfoTooltip": React.forwardRef(InfoTooltip),
-      "Inline": React.forwardRef(Inline),
-      "InlineGrid": React.forwardRef(InlineGrid),
-      "NumberField": React.forwardRef(NumberField),
-      "OverflowText": React.forwardRef(OverflowText),
-      "RadioField": React.forwardRef(RadioField),
-      "RadioGroupField": React.forwardRef(RadioGroupField),
-      "ResponsiveContextProvider": [Function],
-      "Snackbar": React.forwardRef(Snackbar),
-      "SnackbarContent": React.forwardRef(SnackbarContent),
-      "SnackbarStackConsumer": [Function],
-      "SnackbarStackProvider": [Function],
-      "Stack": React.forwardRef(Stack),
-      "Tag": React.forwardRef(Tag),
-      "ThemeProvider": [Function],
-      "Tiles": React.forwardRef(Tiles),
-      "VisibilityObserver": [Function],
-      "assignRef": [Function],
-      "isColorProp": [Function],
-      "isEmptyReactNode": [Function],
-      "mergeRefs": [Function],
-      "parseAlignProp": [Function],
-      "parseCollapsedBelow": [Function],
-      "parseResponsiveProp": [Function],
-      "parseSpaceProp": [Function],
-      "renderChildren": [Function],
-      "useCollapseBreakpoint": [Function],
-      "useMinBreakpoint": [Function],
-      "useResizeObserver": [Function],
-      "useResponsiveContext": [Function],
-      "useResponsiveProp": [Function],
-      "useResponsivePropRecord": [Function],
-      "useResponsiveValue": [Function],
-      "useSnackbarStack": [Function],
-      "useUID": [Function],
-      "useVisibilityObserver": [Function],
-    }
-  `);
-});

package/src/adaptive-toolbar/AdaptiveToolbar.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta } from '@storybook/react';
-import { AdaptiveToolbar } from './AdaptiveToolbar';
-
-export default {
-  title: 'Surfaces/AdaptiveToolbar',
-  component: AdaptiveToolbar,
-} as Meta;
-
-export const basic = () => (
-  <AdaptiveToolbar
-    items={[
-      'Send Offer',
-      'Post to SLB',
-      'Change Date Ranges',
-      'Increase Price By',
-      'Mark as Accepted',
-      'Send Customer Invoice',
-      'Archive',
-      'Delete',
-    ].map((label) => ({ label, key: label }))}
-  />
-);
-
-export const group = () => (
-  <AdaptiveToolbar
-    items={[
-      { key: 'edit', label: 'Edit' },
-      { key: 'delete', label: 'Delete' },
-      { key: 'cancel_order', label: 'Cancel Order' },
-      { key: 'cancel_offer', label: 'Cancel Offer' },
-      { key: 'send_offer', label: 'Send Offer', groupKey: '1' },
-      {
-        key: 'post_to_slb',
-        label: 'Post to SLB',
-        groupKey: '2',
-        ButtonProps: { color: 'primary' },
-        dropdown: [
-          {
-            key: 'post_to_all',
-            label: 'Post to SLB & CD',
-          },
-          {
-            key: 'post_to_cd',
-            label: 'Post to CD',
-          },
-        ],
-      },
-    ]}
-  />
-);

package/src/adaptive-toolbar/AdaptiveToolbar.tsx

@@ -1,199 +0,0 @@
-import {
-  Divider,
-  Grid,
-  Menu,
-  MenuItem,
-  Toolbar,
-  ToolbarProps,
-  Typography,
-} from '@material-ui/core';
-import { MoreHoriz } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/styles';
-import {
-  forwardRef,
-  ForwardRefExoticComponent,
-  Key,
-  MouseEvent,
-  ReactNode,
-  RefAttributes,
-  useRef,
-  useState,
-} from 'react';
-import { Button, ButtonProps } from '../button/Button';
-import { DropdownButton } from '../dropdown-button/DropdownButton';
-import { useResizeObserver } from '../utils/ResizeObserver';
-
-const useStyles = makeStyles(
-  { actions: { overflow: 'hidden' } },
-  { name: 'SD-AdaptiveToolbar' },
-);
-
-export interface AdaptiveToolbarDropdownItem {
-  key: Key;
-  label: ReactNode;
-  onClick?: (event: MouseEvent<HTMLElement>) => void;
-}
-
-export interface AdaptiveToolbarItem {
-  key: Key;
-  groupKey?: Key;
-  label: ReactNode;
-  dropdown?: AdaptiveToolbarDropdownItem[];
-  onClick?: (event: MouseEvent<HTMLElement>) => void;
-  ButtonProps?: Omit<ButtonProps, 'type' | 'onClick'>;
-}
-
-export interface AdaptiveToolbarProps
-  extends RefAttributes<HTMLDivElement>,
-    Omit<ToolbarProps, 'children'> {
-  items: AdaptiveToolbarItem[];
-}
-
-export const AdaptiveToolbar: ForwardRefExoticComponent<AdaptiveToolbarProps> =
-  forwardRef(({ items, ...props }, ref) => {
-    const styles = useStyles();
-
-    const itemNodes = useRef<Array<null | HTMLElement>>([]);
-    const optionsButtonRef = useRef<HTMLDivElement>(null);
-    const [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
-
-    const menuItems = firstHiddenIdx === -1 ? [] : items.slice(firstHiddenIdx);
-    const [menuButtonNode, setMenuButtonRef] = useState<HTMLElement>();
-
-    const [rootNode, setRootNode] = useState<null | HTMLDivElement>(null);
-
-    useResizeObserver(rootNode, (node) => {
-      const rootRect = node.getBoundingClientRect();
-      const rootWidth = rootRect.left + rootRect.width;
-
-      const optionsButtonRect =
-        optionsButtonRef.current?.getBoundingClientRect();
-      const optionsButtonWidth = optionsButtonRect?.width || 0;
-      const maxRightPosition = rootWidth - optionsButtonWidth;
-
-      const mountedNodes = itemNodes.current.filter(
-        (x): x is HTMLDivElement => x != null,
-      );
-      const hiddenIdx = mountedNodes.findIndex((itemNode, idx) => {
-        itemNode.removeAttribute('hidden');
-
-        const itemRect = itemNode.getBoundingClientRect();
-        const itemRightPosition = itemRect.left + itemRect.width;
-
-        // Ignore options button width when checking last item.
-        if (idx === mountedNodes.length - 1) {
-          return itemRightPosition > rootWidth;
-        }
-
-        return itemRightPosition > maxRightPosition;
-      });
-
-      if (hiddenIdx !== -1) {
-        mountedNodes.slice(hiddenIdx).forEach((itemNode) => {
-          itemNode.setAttribute('hidden', 'true');
-        });
-      }
-
-      setFirstHiddenIdx(hiddenIdx);
-    });
-
-    return (
-      <Toolbar {...props} ref={ref}>
-        <Grid container={true} spacing={1} ref={setRootNode}>
-          <Grid item={true} className={styles.actions}>
-            <Grid container={true} spacing={1} wrap="nowrap" component="div">
-              {items.map((item, idx) => (
-                <Grid
-                  key={item.key}
-                  item={true}
-                  ref={(node) => {
-                    itemNodes.current[idx] = node;
-                  }}
-                >
-                  {item.dropdown ? (
-                    <DropdownButton
-                      type="button"
-                      onClick={item.onClick}
-                      label={item.label}
-                      {...item.ButtonProps}
-                    >
-                      {item.dropdown.map((dropdownItem) => (
-                        <MenuItem
-                          key={dropdownItem.key}
-                          onClick={dropdownItem.onClick}
-                        >
-                          {dropdownItem.label}
-                        </MenuItem>
-                      ))}
-                    </DropdownButton>
-                  ) : (
-                    <Button
-                      type="button"
-                      onClick={item.onClick}
-                      {...item.ButtonProps}
-                    >
-                      <Typography noWrap={true} variant="inherit">
-                        {item.label}
-                      </Typography>
-                    </Button>
-                  )}
-                </Grid>
-              ))}
-            </Grid>
-          </Grid>
-
-          {menuItems.length > 0 && (
-            <Grid item={true} ref={optionsButtonRef} component="div">
-              <Button
-                type="button"
-                onClick={({ currentTarget }) => {
-                  setMenuButtonRef(currentTarget);
-                }}
-              >
-                <MoreHoriz />
-              </Button>
-
-              <Menu
-                open={!!menuButtonNode}
-                anchorEl={menuButtonNode}
-                onClose={() => {
-                  setMenuButtonRef(undefined);
-                }}
-              >
-                {menuItems.map((item, index, arr) => {
-                  const next = arr[index + 1];
-                  return (
-                    <>
-                      <MenuItem
-                        key={item.key}
-                        onClick={(event) => {
-                          item.onClick?.(event);
-                          setMenuButtonRef(undefined);
-                        }}
-                      >
-                        {item.label}
-                      </MenuItem>
-
-                      {item.dropdown?.map((dropdownItem) => (
-                        <MenuItem
-                          key={dropdownItem.key}
-                          onClick={(event) => {
-                            dropdownItem.onClick?.(event);
-                            setMenuButtonRef(undefined);
-                          }}
-                        >
-                          {dropdownItem.label}
-                        </MenuItem>
-                      ))}
-
-                      {next && item.groupKey !== next.groupKey && <Divider />}
-                    </>
-                  );
-                })}
-              </Menu>
-            </Grid>
-          )}
-        </Grid>
-      </Toolbar>
-    );
-  });

package/src/adaptive-toolbar/__tests__/AdaptiveToolbar.spec.tsx

@@ -1,11 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { AdaptiveToolbar } from '../AdaptiveToolbar';
-
-it('checks component css', () => {
-  expect(renderCSS(<AdaptiveToolbar items={[]} />, ['SD-AdaptiveToolbar']))
-    .toMatchInlineSnapshot(`
-    .SD-AdaptiveToolbar-actions {
-      overflow: hidden;
-    }
-  `);
-});

package/src/adaptive-vertical-toolbar/AdaptiveVerticalToolbar.stories.tsx

@@ -1,49 +0,0 @@
-import { Card, CardContent } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { AdaptiveVerticalToolbar } from './AdaptiveVerticalToolbar';
-
-export default {
-  title: 'Surfaces/AdaptiveVerticalToolbar',
-  component: AdaptiveVerticalToolbar,
-} as Meta;
-
-export const basic = () => (
-  <Card>
-    <CardContent style={{ resize: 'both', overflow: 'hidden' }}>
-      <AdaptiveVerticalToolbar
-        items={[
-          'Send Offer',
-          'Post to SLB',
-          'Change Date Ranges',
-          'Increase Price By',
-          'Mark as Accepted',
-          'Send Customer Invoice',
-          'Archive',
-          'Delete',
-        ].map((label) => ({ label, key: label }))}
-        renderItem={(item) => <li>{item.label}</li>}
-      />
-    </CardContent>
-  </Card>
-);
-
-export const customMore = () => (
-  <Card>
-    <CardContent style={{ resize: 'both', overflow: 'hidden' }}>
-      <AdaptiveVerticalToolbar
-        items={[
-          'Send Offer',
-          'Post to SLB',
-          'Change Date Ranges',
-          'Increase Price By',
-          'Mark as Accepted',
-          'Send Customer Invoice',
-          'Archive',
-          'Delete',
-        ].map((label) => ({ label, key: label }))}
-        renderItem={(item) => <li>{item.label}</li>}
-        moreElement={<li>··· More</li>}
-      />
-    </CardContent>
-  </Card>
-);

package/src/adaptive-vertical-toolbar/AdaptiveVerticalToolbar.tsx

@@ -1,171 +0,0 @@
-import { Divider, Grid, Menu, MenuItem } from '@material-ui/core';
-import { MoreHoriz } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/styles';
-import {
-  cloneElement,
-  EventHandler,
-  forwardRef,
-  ForwardRefExoticComponent,
-  Key,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  RefAttributes,
-  useRef,
-  useState,
-} from 'react';
-import { Button } from '../button/Button';
-import { mergeRefs } from '../utils/mergeRefs';
-import { useResizeObserver } from '../utils/ResizeObserver';
-
-const useStyles = makeStyles(
-  { root: { overflow: 'hidden', height: '100%' } },
-  { name: 'SD-AdaptiveVerticalToolbar' },
-);
-
-const defaultMoreElement = (
-  <Button type="button">
-    <MoreHoriz />
-  </Button>
-);
-
-export interface AdaptiveVerticalToolbarItem {
-  key: Key;
-  label: ReactNode;
-  menuGroupKey?: Key;
-  onClick?: (event: MouseEvent<HTMLElement>) => void;
-}
-
-export interface AdaptiveVerticalToolbarProps
-  extends RefAttributes<HTMLDivElement> {
-  disableGutters?: boolean;
-
-  items: AdaptiveVerticalToolbarItem[];
-  renderItem?: (item: AdaptiveVerticalToolbarItem) => ReactNode;
-  renderMenuItem?: (item: AdaptiveVerticalToolbarItem) => ReactNode;
-
-  moreElement?: ReactElement<{
-    onClick: EventHandler<MouseEvent<HTMLElement>>;
-  }>;
-}
-
-export const AdaptiveVerticalToolbar: ForwardRefExoticComponent<AdaptiveVerticalToolbarProps> =
-  forwardRef(
-    (
-      {
-        items,
-        disableGutters,
-        moreElement = defaultMoreElement,
-        renderItem = (item: AdaptiveVerticalToolbarItem) => item.label,
-        renderMenuItem = (item: AdaptiveVerticalToolbarItem) => item.label,
-      },
-      ref,
-    ) => {
-      const styles = useStyles();
-      const itemNodes = useRef<Array<null | HTMLElement>>([]);
-      const optionsButtonRef = useRef<HTMLDivElement>(null);
-      const [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
-
-      const menuItems =
-        firstHiddenIdx === -1 ? [] : items.slice(firstHiddenIdx);
-      const [menuButtonNode, setMenuButtonRef] = useState<HTMLElement>();
-
-      const [rootNode, setRootNode] = useState<null | HTMLDivElement>(null);
-
-      useResizeObserver(rootNode, (node) => {
-        const rootRect = node.getBoundingClientRect();
-        const rootHeight = rootRect.bottom;
-
-        const optionsButtonRect =
-          optionsButtonRef.current?.getBoundingClientRect();
-        const optionsButtonWidth = optionsButtonRect?.height || 0;
-        const maxBottomPosition = rootHeight - optionsButtonWidth;
-
-        const mountedNodes = itemNodes.current.filter(
-          (x): x is HTMLDivElement => x != null,
-        );
-        const hiddenIdx = mountedNodes.findIndex((itemNode, idx) => {
-          itemNode.removeAttribute('hidden');
-
-          const 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 (
-        <Grid
-          direction="column"
-          container={true}
-          wrap="nowrap"
-          className={styles.root}
-          spacing={disableGutters ? undefined : 1}
-          ref={mergeRefs(ref, (node) => {
-            setRootNode(node);
-          })}
-        >
-          {items.map((item, idx) => (
-            <Grid
-              key={item.key}
-              item={true}
-              ref={(node) => {
-                itemNodes.current[idx] = node;
-              }}
-            >
-              {renderItem(item)}
-            </Grid>
-          ))}
-
-          {menuItems.length > 0 && (
-            <Grid item={true} ref={optionsButtonRef} component="div">
-              {cloneElement(moreElement, {
-                onClick: ({ currentTarget }: MouseEvent<HTMLElement>) => {
-                  setMenuButtonRef(currentTarget);
-                },
-              })}
-
-              <Menu
-                open={!!menuButtonNode}
-                anchorEl={menuButtonNode}
-                onClose={() => {
-                  setMenuButtonRef(undefined);
-                }}
-              >
-                {menuItems.flatMap((item, index, arr) => {
-                  const next = arr[index + 1];
-                  return [
-                    <MenuItem
-                      key={item.key}
-                      onClick={(event) => {
-                        item.onClick?.(event);
-                        setMenuButtonRef(undefined);
-                      }}
-                    >
-                      {renderMenuItem(item)}
-                    </MenuItem>,
-
-                    next && next.menuGroupKey !== item.menuGroupKey && (
-                      <Divider key={`${item.key}-divider`} />
-                    ),
-                  ];
-                })}
-              </Menu>
-            </Grid>
-          )}
-        </Grid>
-      );
-    },
-  );