@saleor/macaw-ui 0.4.0 → 0.5.2

package/src/IconButton/IconButton.tsx

@@ -1,24 +1,40 @@
 import ButtonBase from "@material-ui/core/ButtonBase";
+import { IconButtonTypeMap as MuiIconButtonTypeMap } from "@material-ui/core/IconButton";
 import MuiIconButton, {
   IconButtonProps as MuiIconButtonProps,
 } from "@material-ui/core/IconButton";
+import { OverrideProps } from "@material-ui/core/OverridableComponent";
 import clsx from "clsx";
 import React from "react";
 
 import { UserInteraction } from "../../types/utils";
 import useStyles from "./styles";
 
-export type IconButtonProps<T extends React.ElementType = "button"> = Omit<
-  MuiIconButtonProps<T>,
-  "variant"
-> & {
+interface IconButtonInnerProps {
   error?: boolean;
   hoverOutline?: boolean;
   state?: UserInteraction;
   variant?: "primary" | "secondary";
-};
+}
 
-export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
+export interface IconButtonTypeMap<
+  P = {},
+  D extends React.ElementType = "button"
+> {
+  props: Omit<MuiIconButtonTypeMap<P, D>["props"], "variant"> &
+    IconButtonInnerProps & { href?: string } & OverrideProps<
+      MuiIconButtonTypeMap<P, D>,
+      "a"
+    >;
+  defaultComponent: D;
+  classKey: never;
+}
+
+export type IconButtonProps<T extends React.ElementType = "button"> =
+  MuiIconButtonProps<T, { component?: T }> &
+    IconButtonInnerProps & { href?: string };
+
+const _IconButton: React.FC<IconButtonProps> = React.forwardRef(
   (
     {
       className,
@@ -64,4 +80,10 @@ export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
     );
   }
 );
-IconButton.displayName = "Button";
+_IconButton.displayName = "Button";
+
+export const IconButton = _IconButton as <
+  T extends React.ElementType = "button"
+>(
+  props: IconButtonProps<T> & { ref?: React.ForwardedRef<T> }
+) => ReturnType<typeof _IconButton>;

package/src/LayoutButton/LayoutButton.tsx

@@ -6,28 +6,44 @@ import React from "react";
 import { UserInteraction } from "../../types/utils";
 import useStyles from "./styles";
 
-export type LayoutButtonProps<T extends React.ElementType = "button"> =
-  ButtonBaseProps<T> & {
-    state?: UserInteraction;
-  };
+export type LayoutButtonProps<T extends React.ElementType> = ButtonBaseProps<
+  T,
+  { component?: T }
+> & {
+  state?: UserInteraction;
+};
 
-export const LayoutButton: React.FC<LayoutButtonProps> = React.forwardRef(
-  ({ className, children, state = "default", ...rest }, ref) => {
-    const classes = useStyles();
+export const LayoutButtonInner = <T extends React.ElementType = "button">(
+  {
+    className,
+    children,
+    state = "default",
+    component,
+    ...rest
+  }: LayoutButtonProps<T>,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) => {
+  const classes = useStyles();
 
-    return (
-      <ButtonBase
-        className={clsx(classes.root, className, {
-          [classes.hover]: state === "hover",
-          [classes.active]: state === "active",
-        })}
-        disableRipple
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </ButtonBase>
-    );
-  }
-);
-LayoutButton.displayName = "LayoutButton";
+  return (
+    <ButtonBase
+      className={clsx(classes.root, className, {
+        [classes.hover]: state === "hover",
+        [classes.active]: state === "active",
+      })}
+      component={component}
+      disableRipple
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </ButtonBase>
+  );
+};
+LayoutButtonInner.displayName = "LayoutButton";
+
+export const LayoutButton = React.forwardRef(LayoutButtonInner) as <
+  T extends React.ElementType
+>(
+  props: LayoutButtonProps<T> & { ref?: React.ForwardedRef<unknown> }
+) => ReturnType<typeof LayoutButtonInner>;

package/src/MultipleValueAutocomplete/MultipleValueAutocomplete.stories.tsx

@@ -0,0 +1,76 @@
+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 { choices } from "./fixtures";
+import { MultipleValueAutocomplete } from "./MultipleValueAutocomplete";
+
+export const Default: Story = () => {
+  const { results, search } = useMockAutocomplete(choices);
+
+  return (
+    <MultipleValueAutocomplete
+      fullWidth
+      choices={results}
+      label="Employees of the month"
+      onInputChange={search}
+      onChange={console.log}
+    >
+      {({ choices, getItemProps }) =>
+        choices.map((choice, choiceIndex) => (
+          <MenuItem {...getItemProps({ item: choice, index: choiceIndex })}>
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </MultipleValueAutocomplete>
+  );
+};
+
+export const Loading: Story = () => (
+  <MultipleValueAutocomplete
+    fullWidth
+    choices={[]}
+    label="Employees of the month"
+    loading
+  >
+    {({ choices, getItemProps }) =>
+      choices.map((choice, choiceIndex) => (
+        <MenuItem {...getItemProps({ item: choice, index: choiceIndex })}>
+          {choice.label}
+        </MenuItem>
+      ))
+    }
+  </MultipleValueAutocomplete>
+);
+
+export const WithInitialState: Story = () => {
+  const { results, search, more } = useMockAutocomplete(choices);
+
+  return (
+    <MultipleValueAutocomplete
+      fullWidth
+      choices={results}
+      label="Employees of the month"
+      onInputChange={search}
+      initialValue={[results[1], results[4]]}
+      onScrollToBottom={more}
+      onChange={console.log}
+    >
+      {({ choices, getItemProps }) =>
+        choices.map((choice, choiceIndex) => (
+          <MenuItem {...getItemProps({ item: choice, index: choiceIndex })}>
+            {choice.label}
+          </MenuItem>
+        ))
+      }
+    </MultipleValueAutocomplete>
+  );
+};
+
+export default {
+  decorators: [Decorator, GuideDecorator],
+  title: "Autocomplete / Multiple choices",
+} as Meta;

package/src/MultipleValueAutocomplete/MultipleValueAutocomplete.tsx

@@ -0,0 +1,185 @@
+import CircularProgress from "@material-ui/core/CircularProgress";
+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 { UseComboboxGetItemPropsOptions } from "downshift";
+import React from "react";
+
+import { SyntheticChangeEvent } from "../../types/utils";
+import { ChipRemovable } from "../Chip";
+import { Choice } from "../Filter";
+import { IconButton } from "../IconButton";
+import { PlusIcon } from "../icons";
+import {
+  isScrolledToBottom,
+  useElementScroll,
+} from "../tools/useElementScroll";
+import { mergeRefs } from "../utils/mergeRefs";
+import useStyles from "./styles";
+import useMultipleValueAutocomplete from "./useMultipleValueAutocomplete";
+
+export interface MultipleValueAutocompleteProps
+  extends Omit<StandardTextFieldProps, "onChange"> {
+  children: (data: {
+    getItemProps: (opts: UseComboboxGetItemPropsOptions<Choice>) => any;
+    highlightedIndex: number;
+    inputValue: string;
+    choices: Choice[];
+  }) => React.ReactNode | React.ReactNodeArray;
+  className?: string;
+  enableReinitialize?: boolean;
+  styles?: React.CSSProperties;
+  choices: Choice[];
+  label?: string;
+  loading?: boolean;
+  popperPlacement?: PopperPlacementType;
+  initialValue?: Choice[];
+  onChange?: (event: SyntheticChangeEvent<string[]>) => void;
+  onInputChange?: (value: string) => void;
+  onScrollToBottom?: () => void;
+}
+
+export const MultipleValueAutocomplete: React.FC<MultipleValueAutocompleteProps> =
+  ({
+    choices,
+    children,
+    enableReinitialize,
+    name,
+    InputProps,
+    initialValue = [],
+    loading,
+    popperPlacement = "bottom-start",
+    onChange,
+    onInputChange,
+    onScrollToBottom,
+    ...rest
+  }) => {
+    const classes = useStyles();
+    const {
+      anchor,
+      comboboxProps,
+      filteredChoices,
+      getItemProps,
+      getSelectedItemProps,
+      getToggleButtonProps,
+      highlightedIndex,
+      inputProps,
+      inputRef,
+      inputValue,
+      inputWidth,
+      isOpen,
+      labelProps,
+      menuProps,
+      ref,
+      removeSelectedItem,
+      selectedItems,
+    } = useMultipleValueAutocomplete({
+      choices,
+      enableReinitialize,
+      initialValue,
+      name,
+      onChange,
+      onInputChange,
+    });
+    const { anchor: dropdownRef, position, setAnchor } = useElementScroll();
+
+    React.useEffect(() => {
+      if (
+        isOpen &&
+        onScrollToBottom &&
+        dropdownRef &&
+        isScrolledToBottom(dropdownRef, position!, 5)
+      ) {
+        onScrollToBottom();
+      }
+    }, [position?.y, dropdownRef]);
+
+    return (
+      <>
+        <TextField
+          {...rest}
+          {...comboboxProps}
+          name={name}
+          InputLabelProps={{
+            shrink: isOpen || selectedItems.length || inputValue.length,
+            ...labelProps,
+          }}
+          ref={ref}
+          InputProps={{
+            ...InputProps,
+            ...inputProps,
+            classes: {
+              ...(InputProps?.classes ?? {}),
+              root: clsx(classes.inputContainer, InputProps?.classes?.root, {
+                [classes.inputContainerWithChips]: selectedItems.length > 0,
+              }),
+              input: clsx(classes.input, InputProps?.classes?.input),
+            },
+            startAdornment: selectedItems.map((item, index) => (
+              <ChipRemovable
+                key={`selected-item-${index}`}
+                {...getSelectedItemProps({ selectedItem: item, index })}
+                onRemove={() => removeSelectedItem(item)}
+              >
+                {item.label}
+              </ChipRemovable>
+            )),
+            endAdornment: (
+              <>
+                {loading && (
+                  <div className={classes.loader}>
+                    <CircularProgress size={24} />
+                  </div>
+                )}
+                <IconButton
+                  {...getToggleButtonProps()}
+                  aria-label="toggle menu"
+                  className={classes.icon}
+                  hoverOutline={false}
+                  type="button"
+                  variant="secondary"
+                >
+                  <PlusIcon />
+                </IconButton>
+              </>
+            ),
+          }}
+          inputProps={{ ref: inputRef, style: { width: inputWidth } }}
+        />
+        <Popper
+          className={clsx(classes.popper, menuProps.className)}
+          open={isOpen}
+          anchorEl={anchor.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 }}
+                {...menuProps}
+                ref={mergeRefs(setAnchor, menuProps.ref)}
+              >
+                {children({
+                  choices: filteredChoices,
+                  highlightedIndex,
+                  getItemProps,
+                  inputValue,
+                })}
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+      </>
+    );
+  };

package/src/MultipleValueAutocomplete/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/MultipleValueAutocomplete/index.ts

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

package/src/MultipleValueAutocomplete/styles.ts

@@ -0,0 +1,41 @@
+import { zIndex } from "../consts";
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    dropdown: {
+      maxHeight: 220,
+      overflow: "scroll",
+    },
+    icon: {
+      position: "absolute",
+      bottom: 4,
+      right: 4,
+    },
+    inputContainer: {
+      padding: "23px 80px 10px 12px",
+      flexWrap: "wrap",
+      gap: theme.spacing(1),
+    },
+    inputContainerWithChips: {
+      paddingTop: 27,
+    },
+    input: {
+      height: "1.1875em",
+      minWidth: "3rem",
+      padding: 0,
+    },
+    loader: {
+      position: "absolute",
+      bottom: theme.spacing(1),
+      right: theme.spacing(6),
+    },
+    popper: {
+      marginTop: theme.spacing(1),
+      zIndex: zIndex.popper,
+    },
+  }),
+  { name: "MultipleValueAutocomplete" }
+);
+
+export default useStyles;