@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/Select/Select.tsx

@@ -16,7 +16,7 @@ import ReactSelectCreatable, {
 import ReactSelectAsync, {
   Props as ReactSelectAsyncProps,
 } from "react-select/async";
-import { colors, height, zIndex } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { STATUS_VARIANT } from "../../types";
 import { bemHOF, toNumber } from "../../utilities";
 import { BoxProps, Box } from "../Box";
@@ -25,6 +25,7 @@ import { FormGroupContext } from "../FormGroup/FormGroupContext";
 import { Icon, ICON_TYPE } from "../Icon";
 import { CloseButton } from "../CloseButton";
 import { Token } from "../Token";
+import { Text } from "../Text";
 import { adsTheme } from "./theme";
 
 const cn = bemHOF("Select");
@@ -118,13 +119,31 @@ const getClassNames = (
   return classNames([cn(), cn({ m: variant }), classNameProp]);
 };
 
-const getMenuListComponent = (menuRef?: Ref<HTMLDivElement>) => ({
+const getMenuListComponent = ({
+  menuRef,
+  optionsMessage,
+}: {
+  menuRef?: Ref<HTMLDivElement>;
+  optionsMessage?: string;
+}) => ({
   innerRef,
   children,
+  options,
   ...listRest
 }: MenuListComponentProps<any>) => (
-  <ReactSelectComponents.MenuList innerRef={innerRef} {...listRest}>
-    <Box ref={menuRef}>{children}</Box>
+  <ReactSelectComponents.MenuList
+    innerRef={innerRef}
+    options={options}
+    {...listRest}
+  >
+    <Box ref={menuRef}>
+      <Box>{children}</Box>
+      {options.length > 0 && optionsMessage && (
+        <Text className="text-gray-600 text-icon leading-normal px-3 py-2">
+          {optionsMessage}
+        </Text>
+      )}
+    </Box>
   </ReactSelectComponents.MenuList>
 );
 
@@ -133,17 +152,20 @@ const generateHardcodedProps = ({
   menuInPortal,
   menuRef,
   components,
+  optionsMessage,
   styles,
 }: {
   controlHeight: number;
   menuInPortal: boolean;
   menuRef?: Ref<HTMLDivElement>;
   components?: Partial<SelectComponents<any>>;
+  optionsMessage?: string;
   styles?: ReactSelectStyles;
 }) => {
-  const customComponents = menuInPortal
-    ? { ...adsComponents, MenuList: getMenuListComponent(menuRef) }
-    : adsComponents;
+  const customComponents = {
+    ...adsComponents,
+    MenuList: getMenuListComponent({ menuRef, optionsMessage }),
+  };
   return {
     components: { ...customComponents, ...components },
     menuPortalTarget: menuInPortal ? document.body : undefined,
@@ -151,7 +173,7 @@ const generateHardcodedProps = ({
       ...styles,
       menuPortal: (base: CSSProperties): CSSProperties => ({
         ...base,
-        zIndex: zIndex.max,
+        zIndex: tokens.zIndex.max,
       }),
       singleValue: (base: CSSProperties, state: any): CSSProperties => {
         return {
@@ -159,7 +181,7 @@ const generateHardcodedProps = ({
           paddingLeft: state.selectProps.isSearchable ? "2px" : "0",
           color:
             state.selectProps.menuIsOpen && state.selectProps.isSearchable
-              ? colors.gray["600"]
+              ? tokens.color.gray["600"]
               : base.color,
         };
       },
@@ -178,7 +200,9 @@ const generateHardcodedProps = ({
 type ArrowSelectProps = {
   menuInPortal?: boolean;
   menuRef?: Ref<HTMLDivElement>;
+  selectRef?: Ref<HTMLDivElement>;
   height?: number;
+  optionsMessage?: string;
 };
 
 export type SelectProps = ReactSelectProps & ArrowSelectProps;
@@ -195,11 +219,13 @@ const SelectBase = ({
   variant: variantProp = STATUS_VARIANT.DEFAULT,
   id: idProp,
   className,
-  height: controlHeight = toNumber(height["10"]),
+  height: controlHeight = toNumber(tokens.height["10"]),
   menuInPortal = false,
   menuRef,
   components,
+  optionsMessage,
   styles,
+  selectRef,
   ...rest
 }: SelectBaseProps) => {
   const { variant: variantContext, id: idContext } = useContext(
@@ -213,11 +239,13 @@ const SelectBase = ({
     menuRef,
     styles,
     components,
+    optionsMessage,
   });
 
   if (rest.type === "async") {
     return (
       <ReactSelectAsync
+        ref={selectRef as any}
         className={getClassNames(className, variant)}
         id={id}
         {...rest}
@@ -229,17 +257,18 @@ const SelectBase = ({
   if (rest.type === "creatable") {
     return (
       <ReactSelectCreatable
+        ref={selectRef as any}
         className={getClassNames(className, variant)}
         id={id}
         {...rest}
         {...hardcodedProps}
-        createOptionPosition="first"
       />
     );
   }
 
   return (
     <ReactSelect
+      ref={selectRef as any}
       className={getClassNames(className, variant)}
       id={id}
       {...rest}
@@ -252,8 +281,17 @@ const SelectAsync = (props: SelectAsyncProps) => {
   return <SelectBase {...props} type="async" />;
 };
 
-const SelectCreatable = (props: SelectCreatableProps) => {
-  return <SelectBase {...props} type="creatable" />;
+const SelectCreatable = ({
+  createOptionPosition = "first",
+  ...rest
+}: SelectCreatableProps) => {
+  return (
+    <SelectBase
+      createOptionPosition={createOptionPosition}
+      {...rest}
+      type="creatable"
+    />
+  );
 };
 
 const Select = (props: SelectProps) => {

package/src/components/Select/SelectPopover.tsx

@@ -1,9 +1,9 @@
 import React, { CSSProperties, ReactNode, useMemo, useState } from "react";
 import classNames from "classnames";
-import { Modifier } from "react-popper-2";
+import { Modifier } from "react-popper";
 import { MenuListComponentProps } from "react-select";
 import FocusLock from "react-focus-lock";
-import { tokens } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { useOutsideClick } from "../../hooks";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -15,29 +15,43 @@ import { Text } from "../Text";
 import { Select, SelectProps } from "./Select";
 import { Popover } from "../Popover";
 import { PopperPlacement } from "../../types";
+import { Label } from "../Label";
+import { Heading } from "../Heading";
 
 interface SelectPopoverProps {
   readView: ReactNode;
   cancelButton: ReactNode;
   onCancelEdit: () => void;
   selectProps: SelectProps;
+  heading?: string;
+  label?: string;
+  showLabel?: boolean;
   preventOutsideClick?: boolean;
   optionsMessage?: string;
+  helpTip?: ReactNode;
   isCreatable?: boolean;
   className?: string;
   style?: CSSProperties;
+  popoverStyle?: CSSProperties;
+  hideCloseButton?: boolean;
 }
 
 export const SelectPopover = ({
   readView,
   cancelButton,
   onCancelEdit,
+  heading,
+  label,
+  showLabel = false,
   preventOutsideClick = false,
   optionsMessage,
+  helpTip,
   isCreatable,
   selectProps,
   className,
   style,
+  popoverStyle,
+  hideCloseButton = false,
 }: SelectPopoverProps) => {
   const containerElement = React.useRef<HTMLDivElement>(null);
   const selectWrapperElement = React.useRef<HTMLDivElement>(null);
@@ -55,19 +69,19 @@ export const SelectPopover = ({
   const selectStyles = {
     control: (provided: any) => ({
       ...provided,
-      width: `calc(100% - ${tokens.margin[6]})`,
-      margin: tokens.margin[3],
+      width: `calc(100% - ${tokens.spacing[6]})`,
+      margin: tokens.spacing[3],
     }),
     menu: (provided: any) => ({
       ...provided,
       boxShadow: "none !important", // override Arrow classname
       borderRadius: "0 !important", // override Arrow classname
       zIndex: "1 !important", // override Arrow classname
-      backgroundColor: tokens.colors.white,
+      backgroundColor: tokens.color.white,
       position: "relative",
-      marginTop: tokens.margin[3],
+      marginTop: tokens.spacing[3],
       marginBottom: 0,
-      borderTop: `1px solid ${tokens.colors.gray[300]}`,
+      borderTop: `1px solid ${tokens.color.gray[300]}`,
       maxHeight: "184px",
       overflowY: "auto",
     }),
@@ -79,6 +93,7 @@ export const SelectPopover = ({
       const { children, innerRef, options } = props;
       return (
         <Box ref={innerRef}>
+          {options.length > 0 && helpTip && <>{helpTip}</>}
           <Box>{children}</Box>
           {options.length > 0 && optionsMessage && (
             <Text className="text-gray-600 text-icon leading-normal px-3 py-2">
@@ -94,7 +109,6 @@ export const SelectPopover = ({
   const sharedProps = {
     isCreatable,
     onBlur: () => {}, // prevent onBlur from closing popover; rely on useOutsideClick
-    components,
     styles: selectStyles,
     tabSelectsValue: false,
     closeMenuOnSelect: false,
@@ -108,7 +122,7 @@ export const SelectPopover = ({
     className: classNames("w-full"),
   };
 
-  const initialPlacement = "bottom";
+  const initialPlacement = "bottom-end";
   const [currentPlacement, setCurrentPlacement] = useState<PopperPlacement>(
     initialPlacement,
   );
@@ -136,6 +150,15 @@ export const SelectPopover = ({
     [],
   );
 
+  const {
+    components: componentsFromSelectProps,
+    ...restSelectProps
+  } = selectProps;
+  const mergedComponents = {
+    ...components,
+    ...componentsFromSelectProps,
+  };
+
   return (
     <FocusLock>
       <Popover
@@ -148,6 +171,7 @@ export const SelectPopover = ({
           "border",
           "border-gray-300",
         )}
+        style={popoverStyle}
         popperModifiers={popperModifiers}
         removePadding
         placement={initialPlacement}
@@ -171,21 +195,23 @@ export const SelectPopover = ({
               {readView}
 
               <Stack spacing={1} className="ml-auto flex-shrink-0 self-start">
-                <CloseButton
-                  className="text-iconSm"
-                  onClick={() => {
-                    if (selectProps.onChange) {
-                      if (selectProps.isMulti) {
-                        selectProps.onChange([], { action: "clear" });
-                      } else {
-                        selectProps.onChange(
-                          { label: "", value: "" },
-                          { action: "clear" },
-                        );
+                {!hideCloseButton && (
+                  <CloseButton
+                    className="text-iconSm"
+                    onClick={() => {
+                      if (selectProps.onChange) {
+                        if (selectProps.isMulti) {
+                          selectProps.onChange([], { action: "clear" });
+                        } else {
+                          selectProps.onChange(
+                            { label: "", value: "" },
+                            { action: "clear" },
+                          );
+                        }
                       }
-                    }
-                  }}
-                />
+                    }}
+                  />
+                )}
                 {cancelButton}
               </Stack>
             </Flex>
@@ -193,10 +219,27 @@ export const SelectPopover = ({
         }
       >
         <Box ref={selectWrapperElement}>
+          {heading && (
+            <Flex className="items-center justify-between py-3 px-3 h-12 border-b">
+              <Heading.H4>{heading}</Heading.H4>
+              <CloseButton onClick={onCancelEdit} />
+            </Flex>
+          )}
+          {showLabel && label && (
+            <Label className="-mb-1 px-3 pt-3">{label}</Label>
+          )}
           {isCreatable ? (
-            <Select.Creatable {...selectProps} {...sharedProps} />
+            <Select.Creatable
+              components={mergedComponents}
+              {...restSelectProps}
+              {...sharedProps}
+            />
           ) : (
-            <Select {...selectProps} {...sharedProps} />
+            <Select
+              components={mergedComponents}
+              {...restSelectProps}
+              {...sharedProps}
+            />
           )}
         </Box>
       </Popover>

package/src/components/Select/index.css

@@ -135,6 +135,12 @@
     text-gray-600;
 }
 
+.ads-Select .ads-Select__option--is-selected {
+  @apply !bg-gray-200;
+
+  color: inherit;
+}
+
 .ads-Select-newOption {
   @apply flex-wrap
     items-center

package/src/components/Select/index.ts

@@ -1,2 +1,16 @@
 export * from "./Select";
 export * from "./SelectPopover";
+export { components as ReactSelectComponents } from "react-select";
+export type {
+  MenuProps as ReactSelectMenuProps,
+  GroupProps as ReactSelectGroupProps,
+  InputProps as ReactSelectInputProps,
+  OptionProps as ReactSelectOptionProps,
+  ControlProps as ReactSelectControlProps,
+  IndicatorProps as ReactSelectIndicatorProps,
+  MultiValueProps as ReactSelectMultiValueProps,
+  PlaceholderProps as ReactSelectPlaceholderProps,
+  SingleValueProps as ReactSelectSingleValueProps,
+  ValueContainerProps as ReactSelectValueContainerProps,
+  MenuListComponentProps as ReactSelectMenuListComponentProps,
+} from "react-select";

package/src/components/Select/theme.ts

@@ -1,31 +1,31 @@
 import { Theme } from "react-select";
-import { colors, borderRadius, height, margin } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { toNumber } from "../../utilities/toNumber";
 
 export const adsTheme: Theme = {
-  borderRadius: toNumber(borderRadius.DEFAULT),
+  borderRadius: toNumber(tokens.borderRadius.DEFAULT),
   colors: {
-    danger: colors.red["400"],
-    dangerLight: colors.red["300"],
-    neutral0: colors.white,
-    neutral5: colors.gray["100"],
-    neutral10: colors.gray["100"],
-    neutral20: colors.gray["200"],
-    neutral30: colors.gray["400"],
-    neutral40: colors.gray["500"],
-    neutral50: colors.gray["600"],
-    neutral60: colors.gray["700"],
-    neutral70: colors.gray["800"],
-    neutral80: colors.gray["900"],
-    neutral90: colors.gray["900"],
-    primary: colors.blue["500"],
-    primary25: colors.gray["300"],
-    primary50: colors.gray["300"],
-    primary75: colors.blue["400"],
+    danger: tokens.color.red["400"],
+    dangerLight: tokens.color.red["300"],
+    neutral0: tokens.color.white,
+    neutral5: tokens.color.gray["100"],
+    neutral10: tokens.color.gray["100"],
+    neutral20: tokens.color.gray["200"],
+    neutral30: tokens.color.gray["400"],
+    neutral40: tokens.color.gray["500"],
+    neutral50: tokens.color.gray["600"],
+    neutral60: tokens.color.gray["700"],
+    neutral70: tokens.color.gray["800"],
+    neutral80: tokens.color.gray["900"],
+    neutral90: tokens.color.gray["900"],
+    primary: tokens.color.blue["500"],
+    primary25: tokens.color.gray["300"],
+    primary50: tokens.color.gray["300"],
+    primary75: tokens.color.blue["400"],
   },
   spacing: {
-    baseUnit: toNumber(margin["1"]),
-    controlHeight: toNumber(height["10"]),
-    menuGutter: toNumber(margin["1"]),
+    baseUnit: toNumber(tokens.spacing["1"]),
+    controlHeight: toNumber(tokens.height["10"]),
+    menuGutter: toNumber(tokens.spacing["1"]),
   },
 };

package/src/components/SelectNew/hooks/useSelectLayout.ts

@@ -12,7 +12,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { usePopper, Modifier } from "react-popper-2";
+import { usePopper, Modifier } from "react-popper";
 import { PopperPlacement, STATUS_VARIANT } from "../../../types";
 import { bemHOF } from "../../../utilities";
 import { FormGroupContext } from "../../FormGroup/FormGroupContext";

package/src/components/Snackbar/Snackbar.story.mdx

@@ -10,7 +10,7 @@ import { ORIENTATION } from "../../types";
 import { Button } from "../Button";
 import { ICON_TYPE } from "../Icon";
 import { Stack } from "../Stack";
-import { Snackbar, useSnackbar, showSnackbar } from "./Snackbar";
+import { Snackbar, useSnackbar, showSnackbar, useSnackbarContext } from "./";
 
 <Meta title="Components/Feedback/Snackbar" component={Snackbar} />
 
@@ -27,13 +27,25 @@ The Snackbar component doesn’t get called directly. Instead use either
 on-screen. You will need a way to dynamically set the `isVisible` prop in order
 to show and hide the Snackbar on demand.
 
-The Snackbar will appear at the bottom-left of the screen. This is not
-configurable.
+The Snackbar can appear at either the bottom-left or bottom-right of the screen.
 
 ```jsx
 import { useSnackbar, showSnackbar } from "@conveyorhq/arrow-ds";
 ```
 
+export const CustomSnackbar = ({ children }) => {
+  const { onClose } = useSnackbarContext();
+  return (
+    <div
+      className="rounded p-10 bg-gold-200 m-4 leading-normal"
+      onClick={onClose}
+    >
+      <p>{children}</p>
+      <p>Click anywhere to close</p>
+    </div>
+  );
+};
+
 Here is a preview of how the Snackbar could look in its three different states.
 Don’t copy these examples because a Snackbar should be implemented using the
 `useSnackbar` hook, which is detailed below.
@@ -121,7 +133,7 @@ A duration can be used with an action if necessary.
           },
         });
       };
-      return <Button onClick={onClick}>Show Snackbar</Button>;
+      return <Button onClick={onClick}>Show Snackbar with action</Button>;
     }}
   </Story>
 </Preview>
@@ -142,12 +154,12 @@ hide the Snackbar with `useState` and `setTimeout`.
         }, 3000);
       };
       useSnackbar({
-        message: "Ok, here’s your snackbar",
+        message: "Snackbar triggered from a hook",
         isVisible,
       });
       return (
         <Button disabled={isVisible} onClick={onClick}>
-          I’m hungry
+          Use Snackbar
         </Button>
       );
     }}
@@ -201,10 +213,85 @@ happening is done.
   </Story>
 </Preview>
 
-## useSnackbar Props
+## Using a custom component
+
+If you need Snackbar functionality, but would like to use a custom UI, you can
+pass a `ReactNode` to the `component` prop. Note that you will need to handle
+closing of the Snackbar on your own, but that’s made easy using the context
+provider.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="showSnackbar function with a component">
+    {() => {
+      const CustomSnackbar = ({ children }) => {
+        const { onClose } = useSnackbarContext();
+        return (
+          <div
+            className="rounded p-10 bg-gold-200 m-4 leading-normal"
+            onClick={onClose}
+          >
+            <p>{children}</p>
+            <p>Click anywhere to close</p>
+          </div>
+        );
+      };
+      const onClick = () => {
+        showSnackbar({
+          component: (
+            <CustomSnackbar>
+              I am a custom snackbar without a duration
+            </CustomSnackbar>
+          ),
+          position: "bottom-right",
+        });
+      };
+      return <Button onClick={onClick}>Show Custom Snackbar</Button>;
+    }}
+  </Story>
+</Preview>
+
+A custom component can also be used with the `useSnackbar` hook.
 
-<Props of={useSnackbar} />
+<Preview withSource={SourceState.OPEN}>
+  <Story name="useSnackbar hook with a component">
+    {() => {
+      const CustomSnackbar = ({ children }) => {
+        const { onClose } = useSnackbarContext();
+        return (
+          <div
+            className="rounded p-10 bg-gold-200 m-4 leading-normal"
+            onClick={onClose}
+          >
+            <p>{children}</p>
+            <p>Click anywhere to close</p>
+          </div>
+        );
+      };
+      const [isVisible, setVisible] = React.useState(false);
+      useSnackbar({
+        component: (
+          <CustomSnackbar>
+            I am a custom snackbar and will close in 3 seconds
+          </CustomSnackbar>
+        ),
+        position: "bottom-right",
+        isVisible,
+      });
+      const onClick = () => {
+        setVisible(true);
+        setTimeout(() => {
+          setVisible(false);
+        }, 3000);
+      };
+      return (
+        <Button disabled={isVisible} onClick={onClick}>
+          Use Custom Snackbar
+        </Button>
+      );
+    }}
+  </Story>
+</Preview>
 
-## showSnackbar Props
+## API
 
 <Props of={showSnackbar} />