@saleor/macaw-ui 0.5.2 → 0.6.2

package/src/MultipleValueAutocomplete/MultipleValueAutocomplete.tsx

@@ -41,145 +41,146 @@ export interface MultipleValueAutocompleteProps
   onScrollToBottom?: () => void;
 }
 
-export const MultipleValueAutocomplete: React.FC<MultipleValueAutocompleteProps> =
-  ({
+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,
-    children,
     enableReinitialize,
+    initialValue,
     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();
+  });
+  const { anchor: dropdownRef, position, setAnchor } = useElementScroll();
 
-    React.useEffect(() => {
-      if (
-        isOpen &&
-        onScrollToBottom &&
-        dropdownRef &&
-        isScrolledToBottom(dropdownRef, position!, 5)
-      ) {
-        onScrollToBottom();
-      }
-    }, [position?.y, dropdownRef]);
+  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",
-              }}
+  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)}
             >
-              <Paper
-                className={classes.dropdown}
-                elevation={8}
-                style={{ width: anchor.current?.clientWidth }}
-                {...menuProps}
-                ref={mergeRefs(setAnchor, menuProps.ref)}
+              {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"
               >
-                {children({
-                  choices: filteredChoices,
-                  highlightedIndex,
-                  getItemProps,
-                  inputValue,
-                })}
-              </Paper>
-            </Grow>
-          )}
-        </Popper>
-      </>
-    );
-  };
+                <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/Pagination/Pagination.tsx

@@ -8,8 +8,8 @@ import {
 } from "./PaginationRowNumberSelect";
 import useStyles from "./styles";
 
-export interface PaginationProps
-  extends PaginationActionsProps,
+export interface PaginationProps<ActionProps = {}>
+  extends PaginationActionsProps<ActionProps>,
     Omit<
       PaginationRowNumberSelectProps,
       "className" | "choices" | "onChange" | "rowNumber"
@@ -20,19 +20,20 @@ export interface PaginationProps
   onRowNumberUpdate?: (rowNumber: number) => void;
 }
 
-export const Pagination: React.FC<PaginationProps> = ({
+export const Pagination = <ActionProps,>({
   choices = [10, 20, 30, 50, 100],
   disabled,
   hasNextPage,
   hasPreviousPage,
   nextIconButtonProps,
+  prevIconButtonProps,
   labels,
   rowNumber,
   onNextPage,
   onPreviousPage,
   onRowNumberUpdate,
   ...other
-}) => {
+}: PaginationProps<ActionProps>): React.ReactElement => {
   const classes = useStyles();
 
   return (
@@ -53,6 +54,7 @@ export const Pagination: React.FC<PaginationProps> = ({
         hasNextPage={hasNextPage}
         hasPreviousPage={hasPreviousPage}
         nextIconButtonProps={nextIconButtonProps}
+        prevIconButtonProps={prevIconButtonProps}
         onNextPage={onNextPage}
         onPreviousPage={onPreviousPage}
       />

package/src/Pagination/PaginationActions.tsx

@@ -1,4 +1,4 @@
-import ButtonBase from "@material-ui/core/ButtonBase";
+import ButtonBase, { ButtonBaseTypeMap } from "@material-ui/core/ButtonBase";
 import ChevronLeft from "@material-ui/icons/ChevronLeft";
 import ChevronRight from "@material-ui/icons/ChevronRight";
 import clsx from "clsx";
@@ -7,26 +7,32 @@ import React from "react";
 import { useTheme } from "../theme";
 import useStyles from "./styles";
 
-export interface PaginationActionsProps {
+type BaseButtonProps<M = unknown> = M extends Object
+  ? ButtonBaseTypeMap<M & { component: React.ElementType }>["props"]
+  : ButtonBaseTypeMap<{ href?: string }>["props"];
+
+export interface PaginationActionsProps<BProps = unknown> {
   className?: string;
   disabled?: boolean;
   hasNextPage: boolean;
   hasPreviousPage: boolean;
-  nextIconButtonProps?: any;
-  onNextPage: () => void;
-  onPreviousPage: () => void;
+  nextIconButtonProps?: BaseButtonProps<BProps>;
+  prevIconButtonProps?: BaseButtonProps<BProps>;
+  onNextPage?: () => void;
+  onPreviousPage?: () => void;
 }
 
-export const PaginationActions: React.FC<PaginationActionsProps> = ({
+export const PaginationActions = <BProps,>({
   className,
   disabled,
   hasNextPage,
   hasPreviousPage,
   nextIconButtonProps,
-  onNextPage,
-  onPreviousPage,
+  prevIconButtonProps,
+  onNextPage = () => {},
+  onPreviousPage = () => {},
   ...other
-}) => {
+}: PaginationActionsProps<BProps>) => {
   const classes = useStyles();
 
   const { direction, themeType } = useTheme();
@@ -47,6 +53,7 @@ export const PaginationActions: React.FC<PaginationActionsProps> = ({
         disabled={previousDisabled}
         data-test="button-pagination-back"
         aria-label="previous page"
+        {...prevIconButtonProps}
       >
         {direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
       </ButtonBase>

package/src/Pagination/PaginationRowNumberSelect.tsx

@@ -15,39 +15,40 @@ export interface PaginationRowNumberSelectProps {
   onChange?: (value: number) => void;
 }
 
-export const PaginationRowNumberSelect: React.FC<PaginationRowNumberSelectProps> =
-  ({ className, choices, disabled, labels, rowNumber, onChange }) => {
-    const classes = useStyles({});
+export const PaginationRowNumberSelect: React.FC<
+  PaginationRowNumberSelectProps
+> = ({ className, choices, disabled, labels, rowNumber, onChange }) => {
+  const classes = useStyles({});
 
-    return (
-      <div className={clsx(classes.rowNumber, className)}>
-        <span className={classes.rowNumberLabel}>{labels.noOfRows}</span>
-        {onChange ? (
-          <Select
-            data-test-id="PaginationRowNumberSelect"
-            disabled={disabled}
-            inputProps={{
-              className: classes.rowNumberSelectLabel,
-            }}
-            className={classes.rowNumberSelect}
-            value={rowNumber}
-            onChange={(event) => onChange(event.target.value as number)}
-          >
-            {choices.length > 0 &&
-              choices.map((choice) => (
-                <MenuItem
-                  value={choice}
-                  key={choice}
-                  data-test-id="rowNumberOption"
-                >
-                  {choice}
-                </MenuItem>
-              ))}
-          </Select>
-        ) : (
-          ` ${rowNumber}`
-        )}
-      </div>
-    );
-  };
+  return (
+    <div className={clsx(classes.rowNumber, className)}>
+      <span className={classes.rowNumberLabel}>{labels.noOfRows}</span>
+      {onChange ? (
+        <Select
+          data-test-id="PaginationRowNumberSelect"
+          disabled={disabled}
+          inputProps={{
+            className: classes.rowNumberSelectLabel,
+          }}
+          className={classes.rowNumberSelect}
+          value={rowNumber}
+          onChange={(event) => onChange(event.target.value as number)}
+        >
+          {choices.length > 0 &&
+            choices.map((choice) => (
+              <MenuItem
+                value={choice}
+                key={choice}
+                data-test-id="rowNumberOption"
+              >
+                {choice}
+              </MenuItem>
+            ))}
+        </Select>
+      ) : (
+        ` ${rowNumber}`
+      )}
+    </div>
+  );
+};
 PaginationRowNumberSelect.displayName = "PaginationRowNumberSelect";

package/src/Tooltip/Arrow.tsx

@@ -0,0 +1,54 @@
+import { Side } from "@floating-ui/react-dom-interactions";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+
+import { useTheme } from "../theme";
+import { useArrowStyles } from "./styles";
+import { TooltipProps } from "./Tooltip";
+
+interface ArrowProps {
+  x: number | undefined;
+  y: number | undefined;
+  side: Side;
+  variant: TooltipProps["variant"];
+}
+
+export const Arrow = forwardRef<HTMLDivElement, ArrowProps>(
+  ({ x, y, side, variant }, ref) => {
+    const { themeType } = useTheme();
+    const classes = useArrowStyles({ variant, side });
+
+    return (
+      <div
+        className={clsx(
+          classes.arrowContainer,
+          themeType === "dark" && classes.dark
+        )}
+        ref={ref}
+        style={{
+          top: y ?? "",
+          left: x ?? "",
+        }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" fill="none">
+          <path
+            className={classes.backgroundPath}
+            fillRule="evenodd"
+            d="M12.25 7 8.6 2.133a2 2 0 0 0-3.2 0L1.75 7h10.5Z"
+            clipRule="evenodd"
+          />
+          <path
+            className={classes.borderPath}
+            fillRule="evenodd"
+            d="M5.8 2.433c.6-.8 1.8-.8 2.4 0L11.25 6.5h1.25L9 1.833a2.5 2.5 0 0 0-4 0L1.5 6.5h1.25L5.8 2.433Z"
+            clipRule="evenodd"
+          />
+          <path
+            className={classes.backgroundPath}
+            d="M12.5 6.5h-11l-.75 1h12.5l-.75-1Z"
+          />
+        </svg>
+      </div>
+    );
+  }
+);

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,19 +1,82 @@
 import { Meta, Story } from "@storybook/react";
+import isChromatic from "chromatic/isChromatic";
 import React from "react";
 
 import { SquareButton } from "../SquareButton";
+import { makeStyles } from "../theme";
+import { Decorator } from "../utils/Decorator";
 import { Tooltip, TooltipProps } from "./Tooltip";
 
-const props: TooltipProps = {
-  title: "Tooltip",
-  children: <SquareButton>Hover</SquareButton>,
+const Template: Story<TooltipProps> = (args) => {
+  return <Tooltip {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: undefined,
+};
+
+export const WithHeader = Template.bind({});
+WithHeader.args = {
+  variant: undefined,
+  header: "App Permissions",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: "success",
 };
 
-export const Info: Story = () => <Tooltip variant="info" {...props} />;
-export const Success: Story = () => <Tooltip variant="success" {...props} />;
-export const Error: Story = () => <Tooltip variant="error" {...props} />;
-export const Warning: Story = () => <Tooltip variant="warning" {...props} />;
+export const Error = Template.bind({});
+Error.args = {
+  variant: "error",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: "warning",
+};
+
+const useStyles = makeStyles({
+  pageWrapper: {
+    display: "flex",
+    width: "210vw",
+    height: "150vh",
+  },
+  storyWrapper: {
+    paddingTop: "10%",
+    paddingLeft: "90vw",
+  },
+  tip: {
+    position: "static",
+    left: "12px",
+    top: "12px",
+  },
+});
+
+const TooltipDecorator = (storyFn: any) => {
+  const classes = useStyles();
+
+  if (isChromatic()) {
+    return storyFn();
+  }
+
+  return (
+    <div className={classes.pageWrapper}>
+      <div className={classes.tip}>Scroll to right to test tooltip</div>
+      <div className={classes.storyWrapper}>{storyFn()}</div>
+    </div>
+  );
+};
 
 export default {
   title: "Tooltip",
-} as Meta;
+  component: Tooltip,
+  args: {
+    title: "Tooltip",
+    children: <SquareButton>Hover</SquareButton>,
+    placement: "top-start",
+    open: isChromatic() ? true : undefined,
+  },
+  decorators: [TooltipDecorator, Decorator],
+} as Meta<TooltipProps>;