@saleor/macaw-ui 0.3.2 → 0.5.0

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,39 @@
+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),
+    },
+  }),
+  { name: "MultipleValueAutocomplete" }
+);
+
+export default useStyles;

package/src/MultipleValueAutocomplete/useMultipleValueAutocomplete.ts

@@ -0,0 +1,172 @@
+import {
+  useCombobox,
+  UseComboboxGetItemPropsOptions,
+  useMultipleSelection,
+} from "downshift";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import { SyntheticChangeEvent } from "../../types/utils";
+import { Choice } from "../Filter";
+import { useTextWidth } from "../tools/useTextWidth";
+import { mergeRefs } from "../utils/mergeRefs";
+
+export interface UseMultipleValueAutocomplete {
+  choices: Choice[];
+  enableReinitialize?: boolean;
+  name?: string;
+  initialValue: Choice[];
+  onChange?: (event: SyntheticChangeEvent<string[]>) => void;
+  onInputChange?: (value: string) => void;
+}
+
+function useMultipleValueAutocomplete({
+  choices,
+  enableReinitialize,
+  initialValue,
+  name,
+  onChange,
+  onInputChange,
+}: UseMultipleValueAutocomplete) {
+  const anchor = useRef<HTMLDivElement>();
+  const input = useRef<HTMLInputElement>();
+
+  const [inputWidth, setInputText] = useTextWidth(
+    window
+      .getComputedStyle(input.current ?? document.body, null)
+      .getPropertyValue("font")
+  );
+
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems,
+    setSelectedItems,
+  } = useMultipleSelection({
+    initialSelectedItems: initialValue,
+    onSelectedItemsChange: ({ selectedItems }) => {
+      if (onChange) {
+        onChange({
+          target: {
+            name: name ?? "",
+            value: selectedItems!.map((choice) => choice.value),
+          },
+        });
+      }
+    },
+  });
+  const filteredChoices = useMemo(
+    () =>
+      choices.filter(
+        (choice) =>
+          !selectedItems.find(
+            (selectedChoice) => selectedChoice.value === choice.value
+          )
+      ),
+    [choices, selectedItems]
+  );
+
+  useEffect(() => {
+    if (enableReinitialize) setSelectedItems(initialValue);
+  }, [initialValue]);
+
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps: baseGetItemProps,
+    openMenu,
+    inputValue,
+    setInputValue,
+    selectItem,
+  } = useCombobox({
+    circularNavigation: false,
+    defaultHighlightedIndex: 0,
+    items: filteredChoices,
+    onInputValueChange: ({ inputValue }) => {
+      setInputText(inputValue || "");
+      if (onInputChange && inputValue) {
+        onInputChange(inputValue);
+      }
+    },
+    onSelectedItemChange: ({ selectedItem }) => {
+      if (selectedItem) {
+        addSelectedItem(selectedItem);
+        setInputValue("");
+      }
+    },
+    stateReducer: (_, actionAndChanges) => {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.FunctionSelectItem:
+          const index = filteredChoices.findIndex(
+            (choice) => choice.value === changes.selectedItem?.value
+          );
+          return {
+            ...changes,
+            highlightedIndex: index > 0 ? index - 1 : 0,
+            isOpen: true,
+          };
+      }
+      return changes;
+    },
+    selectedItem: null,
+    itemToString: () => "",
+  });
+
+  // Downshift doesn't like portals like popper
+  // https://github.com/downshift-js/downshift/issues/287
+  const getItemProps = useCallback(
+    (options: UseComboboxGetItemPropsOptions<Choice>) => {
+      const baseProps = baseGetItemProps(options);
+
+      return {
+        ...baseProps,
+        onClick: () => selectItem(options.item),
+        selected: highlightedIndex === options.index,
+      };
+    },
+    [baseGetItemProps, highlightedIndex]
+  );
+
+  const labelProps = getLabelProps();
+  const { ref: comboboxDownshiftRef, ...comboboxProps } = getComboboxProps();
+  const { ref: downshiftRef, ...inputProps } = getInputProps({
+    ...getDropdownProps(),
+    onFocus: () => {
+      if (!isOpen) {
+        input.current?.select();
+        openMenu();
+      }
+    },
+  });
+  const menuProps = getMenuProps({}, { suppressRefError: true });
+
+  return {
+    anchor,
+    comboboxProps,
+    filteredChoices,
+    getItemProps,
+    getSelectedItemProps,
+    getToggleButtonProps,
+    highlightedIndex,
+    inputProps,
+    inputRef: mergeRefs(downshiftRef, input),
+    inputValue,
+    inputWidth,
+    isOpen,
+    labelProps,
+    menuProps,
+    ref: mergeRefs(comboboxDownshiftRef, anchor),
+    removeSelectedItem,
+    selectedItems,
+  };
+}
+
+export default useMultipleValueAutocomplete;

package/src/Savebar/Savebar.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { Button } from "..";
-import { useActionBar } from "../ActionBar";
 import { ActionBar } from "../ActionBar/ActionBar";
 import {
   ConfirmButton,
@@ -21,6 +20,7 @@ export interface SavebarProps {
   state: ConfirmButtonTransitionState;
   labels: SavebarLabels;
   tooltips?: SavebarTooltips;
+  className?: string;
   onCancel: () => void;
   onDelete?: () => void;
   onSubmit: () => void;
@@ -31,15 +31,15 @@ export const Savebar: React.FC<SavebarProps> = ({
   labels,
   tooltips,
   state,
+  className,
   onCancel,
   onDelete,
   onSubmit,
 }) => {
   const classes = useStyles();
-  const { setDocked } = useActionBar();
 
   return (
-    <ActionBar state={state} disabled={disabled}>
+    <ActionBar state={state} disabled={disabled} className={className}>
       {!!onDelete && (
         <ButtonTooltipDecorator tooltip={tooltips?.delete}>
           <Button
@@ -70,7 +70,6 @@ export const Savebar: React.FC<SavebarProps> = ({
           onClick={onSubmit}
           transitionState={state}
           data-test="button-bar-confirm"
-          onTransitionToDefault={() => setDocked(true)}
         />
       </ButtonTooltipDecorator>
     </ActionBar>

package/src/Sidebar/MenuItem.tsx

@@ -9,15 +9,27 @@ import React from "react";
 import SVG from "react-inlinesvg";
 
 import { makeStyles } from "../theme";
-import { SidebarMenuItem } from "./types";
+import { CustomLinkComponent, SidebarMenuItem } from "./types";
+import { getLinkComponent, getLinkProps } from "./utils";
 
-export interface MenuItemProps {
+export interface MenuItemCommonProps {
   activeId: string;
   isMenuShrunk: boolean;
   menuItem: SidebarMenuItem;
-  onClick: (menuItem: SidebarMenuItem) => void;
 }
 
+export type MenuItemProps = MenuItemCommonProps &
+  (
+    | {
+        onClick: (menuItem: SidebarMenuItem) => void;
+        linkComponent?: never;
+      }
+    | {
+        onClick?: never;
+        linkComponent: CustomLinkComponent;
+      }
+  );
+
 export const menuWidth = 210;
 export const shrunkMenuWidth = 72;
 
@@ -139,23 +151,33 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   menuItem,
   isMenuShrunk,
   onClick,
+  linkComponent,
 }) => {
   const classes = useStyles({});
   const [open, setOpen] = React.useState(false);
-  const anchor = React.useRef<HTMLDivElement>(null);
+  const anchor = React.useRef<any>(null);
 
   const handleClick = (event: React.MouseEvent, menuItem: SidebarMenuItem) => {
     event.stopPropagation();
     if (menuItem.children) {
       setOpen(true);
     } else {
-      onClick(menuItem);
+      if (onClick) {
+        onClick(menuItem);
+      }
+
+      if (menuItem.onClick) {
+        menuItem.onClick();
+      }
+
       setOpen(false);
     }
   };
 
+  const RootNavComponent = menuItem.children ? "div" : linkComponent ?? "div";
+
   return (
-    <div
+    <RootNavComponent
       className={clsx(classes.root, {
         [classes.rootOpen]: open,
         [classes.rootActive]: [
@@ -165,9 +187,10 @@ export const MenuItem: React.FC<MenuItemProps> = ({
         [classes.rootExpanded]: !isMenuShrunk,
       })}
       ref={anchor}
-      onClick={(event) => handleClick(event, menuItem)}
+      onClick={(event: React.MouseEvent) => handleClick(event, menuItem)}
+      {...getLinkProps(menuItem)}
     >
-      <button
+      <span
         className={classes.menuItemBtn}
         data-test="menu-item-label"
         data-test-id={menuItem.id}
@@ -184,7 +207,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
         >
           {menuItem.label}
         </Typography>
-      </button>
+      </span>
       {menuItem.children && (
         <Popper
           className={clsx(classes.popper, {
@@ -199,14 +222,12 @@ export const MenuItem: React.FC<MenuItemProps> = ({
             <Paper className={classes.paper}>
               {menuItem.children.map((subMenuItem) => {
                 if (subMenuItem.url || subMenuItem.children) {
-                  const linkProps = subMenuItem.external
-                    ? { href: subMenuItem.url, target: "_blank" }
-                    : {};
+                  const linkProps = getLinkProps(subMenuItem);
 
                   return (
                     <MuiMenuItem
                       aria-label={subMenuItem.ariaLabel}
-                      component={subMenuItem.external ? "a" : "button"}
+                      component={getLinkComponent(subMenuItem, linkComponent)}
                       className={clsx(classes.label, classes.subMenuLabel)}
                       key={subMenuItem.url}
                       onClick={(event: React.MouseEvent) =>
@@ -236,7 +257,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
           </ClickAwayListener>
         </Popper>
       )}
-    </div>
+    </RootNavComponent>
   );
 };