@saleor/macaw-ui 0.3.2 → 0.5.0

package/src/ActionBar/ActionBar.tsx

@@ -6,6 +6,7 @@ import clsx from "clsx";
 import React from "react";
 
 import { ConfirmButtonTransitionState } from "../ConfirmButton";
+import { useTheme } from "../theme";
 import { useWindowScroll } from "../tools";
 import { useActionBar } from "./context";
 import useStyles from "./styles";
@@ -13,6 +14,7 @@ import useStyles from "./styles";
 export interface ActionBarProps {
   disabled: boolean;
   state: ConfirmButtonTransitionState;
+  className?: string;
   children: React.ReactNode[] | React.ReactNode;
 }
 
@@ -20,34 +22,29 @@ export const ActionBar: React.FC<ActionBarProps> = ({
   disabled,
   children,
   state,
+  className,
   ...rest
 }) => {
+  const { ssr } = useTheme();
   const classes = useStyles();
 
-  const { anchor, docked, setDocked } = useActionBar();
+  const { anchor } = useActionBar();
   const scrollPosition = useWindowScroll();
 
-  React.useEffect(() => {
-    if (!disabled && state !== "loading") {
-      setDocked(false);
-    }
-  }, [disabled, state, setDocked]);
-  React.useEffect(() => () => setDocked(true), [setDocked]);
-
   const scrolledToBottom =
     scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
 
-  if (!anchor.current) {
+  if (!anchor.current && !ssr) {
     return null;
   }
 
   return (
     <Portal container={anchor.current}>
-      <div className={classes.root} {...rest}>
+      <div className={clsx(classes.root, className)} {...rest}>
         <Container maxWidth="lg">
           <Card
             className={clsx(classes.paper, {
-              [classes.shadow]: !(docked || scrolledToBottom),
+              [classes.shadow]: !scrolledToBottom,
             })}
           >
             <CardContent className={classes.content}>{children}</CardContent>

package/src/ActionBar/context.tsx

@@ -1,9 +1,13 @@
 import React from "react";
 
+// Imitate object returned from useRef
+type AnchorFunction = {
+  (el: HTMLDivElement): void;
+  current: HTMLDivElement | null;
+};
+
 export interface ActionBarContextType {
-  anchor: React.RefObject<HTMLDivElement>;
-  docked: boolean;
-  setDocked: (docked: boolean) => void;
+  anchor: AnchorFunction;
 }
 
 export const ActionBarContext = React.createContext<
@@ -21,11 +25,16 @@ export const useActionBar = () => {
 };
 
 export const ActionBarProvider: React.FC = ({ children }) => {
-  const [docked, setDocked] = React.useState(true);
-  const anchor = React.useRef<HTMLDivElement | null>(null);
+  const [anchorState, setAnchor] = React.useState<HTMLDivElement | null>(null);
+
+  const anchor = React.useMemo(() => {
+    const fn = setAnchor as AnchorFunction;
+    fn.current = anchorState;
+    return fn;
+  }, [anchorState]);
 
   return (
-    <ActionBarContext.Provider value={{ anchor, docked, setDocked }}>
+    <ActionBarContext.Provider value={{ anchor }}>
       {children}
     </ActionBarContext.Provider>
   );

package/src/ActionBar/styles.ts

@@ -25,7 +25,7 @@ const useStyles = makeStyles(
       boxShadow: "0 -24px 20px -20px rgba(0, 0, 0, 0.15)",
     },
   }),
-  { name: "Savebar" }
+  { name: "ActionBar" }
 );
 
 export default useStyles;

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,43 @@
+import { MenuItem } from "@material-ui/core";
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+
+import { Decorator, GuideDecorator } from "../utils/Decorator";
+import { useMockAutocomplete } from "../utils/useMockAutocomplete";
+import { Autocomplete } from "./Autocomplete";
+import { choices } from "./fixtures";
+
+export const Default: Story = () => {
+  const { results, search } = useMockAutocomplete(choices);
+
+  return (
+    <Autocomplete
+      choices={results}
+      fullWidth
+      label="Employee of the month"
+      onInputChange={search}
+    >
+      {({ highlightedIndex, getItemProps }) =>
+        results.map((choice, choiceIndex) => (
+          <MenuItem
+            selected={highlightedIndex === choiceIndex}
+            {...getItemProps({ item: choice, index: choiceIndex })}
+          >
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </Autocomplete>
+  );
+};
+
+export const Loading: Story = () => (
+  <Autocomplete fullWidth choices={[]} label="Employee of the month" loading>
+    {() => null}
+  </Autocomplete>
+);
+
+export default {
+  decorators: [Decorator, GuideDecorator],
+  title: "Autocomplete / Single choice",
+} as Meta;

package/src/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,187 @@
+import { CircularProgress } from "@material-ui/core";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import Popper, { PopperPlacementType } from "@material-ui/core/Popper";
+import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField";
+import clsx from "clsx";
+import { useCombobox, UseComboboxGetItemPropsOptions } from "downshift";
+import React from "react";
+
+import { SyntheticChangeEvent } from "../../types/utils";
+import { Choice } from "../Filter";
+import { ChevronIcon } from "../icons";
+import { isScrolledToBottom, useElementScroll } from "../tools";
+import { mergeRefs } from "../utils/mergeRefs";
+import useStyles from "./styles";
+
+export interface AutocompleteProps extends StandardTextFieldProps {
+  children: (data: {
+    getItemProps: (opts: UseComboboxGetItemPropsOptions<Choice>) => any;
+    highlightedIndex: number;
+    inputValue: string;
+  }) => React.ReactNode | React.ReactNodeArray;
+  className?: string;
+  styles?: React.CSSProperties;
+  choices: Choice[];
+  label?: string;
+  loading?: boolean;
+  popperPlacement?: PopperPlacementType;
+  onChange?: (event: SyntheticChangeEvent) => void;
+  onInputChange?: (value: string) => void;
+  onScrollToBottom?: () => void;
+}
+
+export const Autocomplete: React.FC<AutocompleteProps> = ({
+  choices,
+  children,
+  loading,
+  name,
+  InputProps,
+  popperPlacement = "bottom-start",
+  onChange,
+  onInputChange,
+  onScrollToBottom,
+  ...rest
+}) => {
+  const classes = useStyles();
+  const anchor = React.useRef<HTMLDivElement>();
+  const input = React.useRef<HTMLInputElement>();
+
+  const {
+    closeMenu,
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps,
+    openMenu,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
+    circularNavigation: false,
+    defaultHighlightedIndex: 0,
+    items: choices,
+    onInputValueChange: ({ inputValue }) => {
+      if (onInputChange) {
+        onInputChange(inputValue ?? "");
+      }
+    },
+    onSelectedItemChange: ({ selectedItem }) => {
+      closeMenu();
+      if (onChange) {
+        onChange({
+          target: {
+            name: name ?? "",
+            value: selectedItem?.value ?? "",
+          },
+        });
+      }
+    },
+    itemToString: (choice) => choice?.label ?? "",
+    onIsOpenChange: ({ selectedItem, inputValue, isOpen }) => {
+      if (!isOpen && selectedItem && selectedItem?.label !== inputValue) {
+        setInputValue(selectedItem!.label);
+      }
+    },
+  });
+
+  const { anchor: dropdownRef, position, setAnchor } = useElementScroll();
+
+  React.useEffect(() => {
+    if (
+      isOpen &&
+      onScrollToBottom &&
+      dropdownRef &&
+      isScrolledToBottom(dropdownRef, position!, 5)
+    ) {
+      onScrollToBottom();
+    }
+  }, [position?.y, dropdownRef]);
+
+  const labelProps = getLabelProps();
+  const { ref: comboboxDownshiftRef, ...comboboxProps } = getComboboxProps();
+  const { ref: downshiftRef, ...inputProps } = getInputProps({
+    onFocus: () => {
+      if (!isOpen) {
+        input.current?.select();
+        openMenu();
+      }
+    },
+  });
+  const menuProps = getMenuProps();
+
+  React.useEffect(() => {
+    if (
+      isOpen &&
+      onScrollToBottom &&
+      dropdownRef &&
+      isScrolledToBottom(dropdownRef, position!, 5)
+    ) {
+      onScrollToBottom();
+    }
+  }, [position?.y, dropdownRef]);
+
+  return (
+    <>
+      <TextField
+        {...rest}
+        {...comboboxProps}
+        name={name}
+        InputLabelProps={labelProps}
+        ref={mergeRefs(comboboxDownshiftRef, anchor)}
+        InputProps={{
+          ...InputProps,
+          ...inputProps,
+          endAdornment: (
+            <>
+              {loading && (
+                <div className={classes.loader}>
+                  <CircularProgress size={24} />
+                </div>
+              )}
+              <ChevronIcon
+                {...getToggleButtonProps()}
+                type="button"
+                aria-label="toggle menu"
+              />
+            </>
+          ),
+        }}
+        inputProps={{ ref: mergeRefs(downshiftRef, input) }}
+      />
+      <Popper
+        className={clsx(classes.popper, menuProps.className)}
+        open={isOpen}
+        anchorEl={input.current}
+        transition
+        placement={popperPlacement}
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "left top" : "left bottom",
+            }}
+          >
+            <Paper
+              className={classes.dropdown}
+              elevation={8}
+              style={{ width: anchor.current?.clientWidth }}
+              ref={mergeRefs(setAnchor, menuProps.ref)}
+            >
+              {children({
+                highlightedIndex,
+                getItemProps,
+                inputValue,
+              })}
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};

package/src/Autocomplete/fixtures.ts

@@ -0,0 +1,122 @@
+export const choices = [
+  {
+    label: "Hazel, Direct Integration Producer",
+    value: "hazel, direct integration producer",
+  },
+  {
+    label: "Audra, District Functionality Facilitator",
+    value: "audra, district functionality facilitator",
+  },
+  {
+    label: "Emilie, Product Integration Assistant",
+    value: "emilie, product integration assistant",
+  },
+  {
+    label: "Kyla, Central Interactions Director",
+    value: "kyla, central interactions director",
+  },
+  {
+    label: "Vida, Senior Usability Producer",
+    value: "vida, senior usability producer",
+  },
+  {
+    label: "Lonie, Chief Infrastructure Director",
+    value: "lonie, chief infrastructure director",
+  },
+  {
+    label: "Zola, Lead Operations Producer",
+    value: "zola, lead operations producer",
+  },
+  {
+    label: "Angel, District Operations Orchestrator",
+    value: "angel, district operations orchestrator",
+  },
+  {
+    label: "Glenda, Lead Accountability Technician",
+    value: "glenda, lead accountability technician",
+  },
+  {
+    label: "Kayley, National Web Facilitator",
+    value: "kayley, national web facilitator",
+  },
+  {
+    label: "Kali, National Configuration Planner",
+    value: "kali, national configuration planner",
+  },
+  {
+    label: "Lilian, Internal Branding Planner",
+    value: "lilian, internal branding planner",
+  },
+  {
+    label: "Lamar, Dynamic Integration Executive",
+    value: "lamar, dynamic integration executive",
+  },
+  {
+    label: "Leonel, Central Brand Strategist",
+    value: "leonel, central brand strategist",
+  },
+  {
+    label: "Broderick, Chief Division Liaison",
+    value: "broderick, chief division liaison",
+  },
+  {
+    label: "Kavon, Future Marketing Representative",
+    value: "kavon, future marketing representative",
+  },
+  {
+    label: "Sydnee, Corporate Marketing Liaison",
+    value: "sydnee, corporate marketing liaison",
+  },
+  {
+    label: "Jett, Future Data Specialist",
+    value: "jett, future data specialist",
+  },
+  {
+    label: "Theresia, International Tactics Assistant",
+    value: "theresia, international tactics assistant",
+  },
+  {
+    label: "Cesar, Direct Mobility Director",
+    value: "cesar, direct mobility director",
+  },
+  {
+    label: "Madonna, Investor Assurance Executive",
+    value: "madonna, investor assurance executive",
+  },
+  {
+    label: "Ima, Internal Research Facilitator",
+    value: "ima, internal research facilitator",
+  },
+  {
+    label: "Joanne, Investor Identity Coordinator",
+    value: "joanne, investor identity coordinator",
+  },
+  {
+    label: "Gavin, Future Web Assistant",
+    value: "gavin, future web assistant",
+  },
+  {
+    label: "Maverick, Internal Optimization Assistant",
+    value: "maverick, internal optimization assistant",
+  },
+  {
+    label: "Hudson, Regional Branding Representative",
+    value: "hudson, regional branding representative",
+  },
+  {
+    label: "Brooklyn, Human Paradigm Producer",
+    value: "brooklyn, human paradigm producer",
+  },
+  {
+    label: "Gussie, Future Configuration Supervisor",
+    value: "gussie, future configuration supervisor",
+  },
+  {
+    label: "Michel, Corporate Tactics Orchestrator",
+    value: "michel, corporate tactics orchestrator",
+  },
+  {
+    label: "Maxime, Customer Mobility Analyst",
+    value: "maxime, customer mobility analyst",
+  },
+];

package/src/Autocomplete/index.ts

@@ -0,0 +1 @@
+export * from "./Autocomplete";

package/src/Autocomplete/styles.ts

@@ -0,0 +1,19 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    dropdown: {
+      maxHeight: 220,
+      overflow: "scroll",
+    },
+    loader: {
+      marginRight: theme.spacing(1),
+    },
+    popper: {
+      marginTop: theme.spacing(1),
+    },
+  }),
+  { name: "Autocomplete" }
+);
+
+export default useStyles;

package/src/Backlink/Backlink.tsx

@@ -4,6 +4,7 @@ import React from "react";
 
 import { ArrowRightIcon } from "../icons";
 import { LayoutButton, LayoutButtonProps } from "../LayoutButton";
+import { useTheme } from "../theme";
 import { useBacklink } from "./context";
 import useStyles from "./styles";
 
@@ -19,10 +20,11 @@ export const Backlink: React.FC<AppHeaderProps> = ({
   onClick,
   ...props
 }) => {
+  const { ssr } = useTheme();
   const classes = useStyles();
   const anchor = useBacklink();
 
-  if (!anchor.current) {
+  if (!anchor.current && !ssr) {
     return null;
   }
 

package/src/Chip/Chip.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+import React from "react";
+
+import useStyles from "./styles";
+
+export interface ChipProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  startAdornment?: React.ReactElement;
+  startAdornmentClassName?: string;
+  endAdornment?: React.ReactElement;
+  endAdornmnetClassName?: string;
+}
+
+export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
+  (
+    {
+      startAdornment,
+      startAdornmentClassName,
+      endAdornment,
+      endAdornmnetClassName,
+      className,
+      children,
+      ...props
+    }: ChipProps,
+    ref
+  ) => {
+    const classes = useStyles();
+
+    return (
+      <div className={clsx(classes.chip, className)} ref={ref} {...props}>
+        {startAdornment && (
+          <span
+            className={clsx(classes.startAdornment, startAdornmentClassName)}
+          >
+            {startAdornment}
+          </span>
+        )}
+        <span>{children}</span>
+        {endAdornment && (
+          <span className={clsx(classes.endAdornment, endAdornmnetClassName)}>
+            {endAdornment}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Chip.displayName = "Chip";

package/src/Chip/ChipAdornment.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import React from "react";
+
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    adornment: {
+      color: theme.palette.primary.contrastText,
+      opacity: 0.6,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      transition: theme.transitions.create("opacity", {
+        duration: theme.transitions.duration.short,
+        easing: theme.transitions.easing.easeOut,
+      }),
+      lineHeight: 0,
+      "&:hover": {
+        opacity: 1,
+      },
+    },
+    defaultCursor: {
+      cursor: "inherit",
+    },
+  }),
+  { name: "ChipAdornment" }
+);
+
+export interface ChipAdornmentProps {
+  className?: string;
+  inheirtCursor?: boolean;
+}
+
+export const ChipAdornment: React.FC<ChipAdornmentProps> = ({
+  className,
+  inheirtCursor,
+  children,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <span
+      className={clsx(
+        classes.adornment,
+        inheirtCursor && classes.defaultCursor,
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+};

package/src/Chip/ChipMovable.tsx

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+import React from "react";
+
+import { DragIcon } from "../icons";
+import { makeStyles } from "../theme";
+import { Chip, ChipProps } from "./Chip";
+import { ChipAdornment } from "./ChipAdornment";
+
+export interface ChipMovableProps extends ChipProps {}
+
+const useStyles = makeStyles(
+  () => ({
+    root: {
+      cursor: "move",
+    },
+  }),
+  { name: "ChipMovable" }
+);
+
+export const ChipMovable = React.forwardRef<HTMLDivElement, ChipMovableProps>(
+  ({ startAdornment, className, ...props }, ref) => {
+    const classes = useStyles();
+
+    return (
+      <Chip
+        className={clsx(classes.root, className)}
+        startAdornment={
+          <ChipAdornment inheirtCursor>
+            <DragIcon aria-hidden="true" />
+            {startAdornment}
+          </ChipAdornment>
+        }
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+ChipMovable.displayName = "ChipMovable";

package/src/Chip/ChipRemovable.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { CloseIcon } from "../icons";
+import { Chip, ChipProps } from "./Chip";
+import { ChipAdornment } from "./ChipAdornment";
+
+export interface ChipRemovableProps extends ChipProps {
+  onRemove: () => void;
+}
+
+export const ChipRemovable = React.forwardRef<
+  HTMLDivElement,
+  ChipRemovableProps
+>(({ endAdornment, onRemove, ...props }, ref) => {
+  return (
+    <Chip
+      endAdornment={
+        <ChipAdornment>
+          <CloseIcon role="button" onClick={() => onRemove()} />
+          {endAdornment}
+        </ChipAdornment>
+      }
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+ChipRemovable.displayName = "ChipRemovable";