@superdispatch/ui 0.21.6 → 0.21.13

package/pkg/package.json

@@ -0,0 +1,39 @@
+{
+  "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

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

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

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

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

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

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

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