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

package/src/components/ScrollSpy/ScrollSpy.tsx

@@ -0,0 +1,407 @@
+import React, {
+  ReactNode,
+  useRef,
+  useEffect,
+  createContext,
+  useContext,
+  Dispatch,
+  HTMLAttributes,
+  forwardRef,
+  ReactElement,
+  AnchorHTMLAttributes,
+  MouseEvent,
+  ChangeEvent,
+  InputHTMLAttributes,
+  cloneElement,
+  Children,
+  memo,
+  useMemo,
+  useReducer,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import classNames from "classnames";
+import { bemHOF } from "../../utilities";
+import { useIntersection, usePrefersReducedMotion } from "../../hooks";
+import { ScrollSpyState, ScrollSpyAction } from "./types";
+import { reducer, scrollSpyInitialState } from "./reducers";
+import { selectCurrentIndex, selectCurrentPage } from "./selectors";
+import { updateIndex } from "./actions";
+
+const cn = bemHOF("ScrollSpy");
+const DEFAULT_ID = "scroll-spy-1";
+
+// ------------------------------------------------------------------
+// ScrollSpy.StateContext
+// ------------------------------------------------------------------
+const initialContextState = {
+  state: scrollSpyInitialState,
+  dispatch: () => {},
+};
+
+export const ScrollSpyStateContext = createContext<{
+  state: ScrollSpyState;
+  dispatch: Dispatch<ScrollSpyAction>;
+}>(initialContextState);
+
+export function useScrollSpyStateContext() {
+  const context = useContext(ScrollSpyStateContext) || {
+    ...initialContextState,
+  };
+
+  return context;
+}
+
+// ------------------------------------------------------------------
+// ScrollSpy.Context
+// ------------------------------------------------------------------
+type ScrollSpyContextType = {
+  id: string;
+  itemCount: number;
+  defaultIndex: number;
+  updateCurrentRef(index: number, refItem: HTMLElement): void;
+  scrollToRef(refToScrollTo: HTMLElement): void;
+  scrollToFirst(event: MouseEvent): void;
+  scrollToLast(event: MouseEvent): void;
+  scrollToPage(page: number): void;
+  skipToPage(page: number): void;
+};
+
+const defaultRootContext: ScrollSpyContextType = {
+  id: DEFAULT_ID,
+  itemCount: 1,
+  defaultIndex: 0,
+  updateCurrentRef: () => {},
+  scrollToRef: () => {},
+  scrollToFirst: () => {},
+  scrollToLast: () => {},
+  scrollToPage: () => {},
+  skipToPage: () => {},
+};
+
+export const ScrollSpyContext = createContext<ScrollSpyContextType>(
+  defaultRootContext,
+);
+
+export function useScrollSpyContext() {
+  const context = useContext(ScrollSpyContext) || {
+    ...defaultRootContext,
+  };
+
+  return context;
+}
+
+// ------------------------------------------------------------------
+// ScrollSpy.Input
+// ------------------------------------------------------------------
+export type ScrollSpyInputUsePropsHookProps = {
+  className?: string;
+  onChange?(event: ChangeEvent<HTMLInputElement>): void;
+};
+
+export const useScrollSpyInputProps = ({
+  className,
+  onChange,
+}: ScrollSpyInputUsePropsHookProps) => {
+  const { dispatch, state } = useScrollSpyStateContext();
+  const { itemCount, skipToPage } = useScrollSpyContext();
+  const currentPage = selectCurrentPage(state);
+
+  const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const pageNumber = parseInt(event.target.value, 10);
+    const index = pageNumber - 1;
+
+    dispatch(updateIndex(index));
+
+    if (pageNumber && pageNumber >= 1 && pageNumber <= itemCount) {
+      skipToPage(pageNumber);
+    }
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  return {
+    className: classNames(cn({ e: "input" }), className),
+    type: "number",
+    min: "1",
+    max: itemCount,
+    maxLength: itemCount.toString().split("").length,
+    onChange: onChangeHandler,
+    value: currentPage,
+  };
+};
+
+export type ScrollSpyInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export const ScrollSpyInput = memo(
+  forwardRef<HTMLInputElement, ScrollSpyInputProps>(
+    ({ className, ...rest }, forwardedRef) => {
+      const props = useScrollSpyInputProps({ className });
+      return <input ref={forwardedRef} {...props} {...rest} />;
+    },
+  ),
+);
+
+// ------------------------------------------------------------------
+// ScrollSpy.Page
+// ------------------------------------------------------------------
+export interface ScrollSpyPageProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactElement;
+  index: number;
+  threshold?: number | number[] | undefined;
+}
+
+export type ScrollSpyPageUsePropsHookProps = {
+  index: number;
+  id?: string;
+};
+
+export const useScrollSpyPageProps = (
+  { index, id }: ScrollSpyPageUsePropsHookProps = { index: 0 },
+) => {
+  const { id: rootId } = useScrollSpyContext();
+  const pageId = `${rootId}-page-${index + 1}`;
+  return {
+    id: id || pageId,
+  };
+};
+
+export const ScrollSpyPage = memo(
+  forwardRef<HTMLDivElement, ScrollSpyPageProps>(
+    (
+      { id: idProp, children, index, threshold = 0.5, ...rest },
+      forwardedRef,
+    ) => {
+      const ref = useRef<HTMLDivElement>(null);
+      const combinedRef = mergeRefs<HTMLDivElement>([ref, forwardedRef]);
+
+      const isVisible = useIntersection(ref, {
+        threshold,
+      });
+
+      const { dispatch } = useScrollSpyStateContext();
+      const { updateCurrentRef } = useScrollSpyContext();
+
+      const { id } = useScrollSpyPageProps({ index, id: idProp });
+
+      useEffect(() => {
+        if (ref && ref.current) {
+          updateCurrentRef(index, ref.current);
+        }
+      });
+
+      useEffect(() => {
+        if (isVisible) {
+          dispatch(updateIndex(index));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [isVisible]);
+
+      return (
+        <>
+          {cloneElement(Children.only(children), {
+            ...rest,
+            ...children.props,
+            id,
+            ref: combinedRef,
+          })}
+        </>
+      );
+    },
+  ),
+);
+
+// ------------------------------------------------------------------
+// ScrollSpy.Anchor
+// ------------------------------------------------------------------
+export interface ScrollSpyAnchorProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode;
+  index: number;
+}
+
+export type ScrollSpyAnchorUsePropsHookProps = {
+  index: number;
+  id?: string;
+  href?: string;
+  onClick?(event: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export const useScrollSpyAnchorProps = (
+  { index, id, href, onClick }: ScrollSpyAnchorUsePropsHookProps = { index: 0 },
+) => {
+  const { id: rootId, scrollToPage } = useScrollSpyContext();
+  const { id: pageId } = useScrollSpyPageProps({ index });
+  const anchorId = `${rootId}-anchor-${index + 1}`;
+  const { state } = useScrollSpyStateContext();
+  const currentIndex = selectCurrentIndex(state);
+
+  const onClickHandler = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    scrollToPage(index + 1);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  return {
+    id: id || anchorId,
+    href: href || `#${pageId}`,
+    onClick: onClickHandler,
+    isActive: currentIndex === index,
+  };
+};
+
+export const ScrollSpyAnchor = memo(
+  forwardRef<HTMLAnchorElement, ScrollSpyAnchorProps>(
+    ({ id, children, onClick, index = 0, ...rest }, forwardedRef) => {
+      const { isActive, ...anchorProps } = useScrollSpyAnchorProps({
+        index,
+        id,
+        onClick,
+      });
+
+      return (
+        <a ref={forwardedRef} {...anchorProps} {...rest}>
+          {children}
+        </a>
+      );
+    },
+  ),
+);
+
+// ------------------------------------------------------------------
+// ScrollSpy.Root
+// ------------------------------------------------------------------
+export type ScrollSpyRootProps = {
+  children: ReactNode;
+  itemCount: number;
+  defaultIndex?: number;
+  id?: string;
+};
+
+export const ScrollSpyRoot = memo(
+  ({
+    children,
+    itemCount,
+    defaultIndex = 0,
+    id = DEFAULT_ID,
+  }: ScrollSpyRootProps) => {
+    const refList = useRef<HTMLElement[]>([]);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const scrollBehavior = prefersReducedMotion ? "auto" : "smooth";
+
+    useEffect(() => {
+      refList.current = refList.current.slice(0, itemCount);
+    }, [itemCount]);
+
+    const updateCurrentRef = (index: number, refItem: HTMLElement) => {
+      refList.current[index] = refItem;
+    };
+
+    const scrollToRef = (
+      refToScrollTo: HTMLElement,
+      behavior: "auto" | "smooth" = "smooth",
+    ) => {
+      refToScrollTo.scrollIntoView({ behavior });
+    };
+
+    const scrollToFirst = (event: MouseEvent) => {
+      event.stopPropagation();
+      scrollToRef(refList.current[0], scrollBehavior);
+    };
+
+    const scrollToLast = (event: MouseEvent) => {
+      event.stopPropagation();
+      scrollToRef(refList.current[itemCount - 1], scrollBehavior);
+    };
+
+    const scrollToPage = (page: number) => {
+      const index = page - 1;
+      scrollToRef(refList.current[index], scrollBehavior);
+    };
+
+    const skipToPage = (page: number) => {
+      const index = page - 1;
+      scrollToRef(refList.current[index], "auto");
+    };
+
+    useEffect(() => {
+      const lastIndex = itemCount - 1;
+      if (defaultIndex > 0 && defaultIndex <= lastIndex) {
+        skipToPage(defaultIndex + 1);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultIndex, itemCount]);
+
+    const context = useMemo(() => {
+      return {
+        id,
+        itemCount,
+        defaultIndex,
+        updateCurrentRef,
+        scrollToRef,
+        scrollToFirst,
+        scrollToLast,
+        scrollToPage,
+        skipToPage,
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, itemCount, defaultIndex]);
+
+    return (
+      <ScrollSpyContext.Provider value={context}>
+        {children}
+      </ScrollSpyContext.Provider>
+    );
+  },
+);
+
+export const ScrollSpyStateProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [state, dispatch] = useReducer(reducer, {
+    index: 0,
+    page: 1,
+  });
+  const value = useMemo(() => ({ state, dispatch }), [state]);
+  return (
+    <ScrollSpyStateContext.Provider value={value}>
+      {children}
+    </ScrollSpyStateContext.Provider>
+  );
+};
+
+export const ScrollSpyReducers = { reducer };
+export const ScrollSpySelectors = { selectCurrentIndex, selectCurrentPage };
+export const ScrollSpyActions = { updateIndex };
+
+/**
+ * @TODO get types right and re-enable these exports
+ */
+// ------------------------------------------------------------------
+// ScrollSpy
+// ------------------------------------------------------------------
+// export type ScrollSpyProps = ScrollSpyRootProps & {
+//   Root: ScrollSpyRootProps;
+//   Anchor: ScrollSpyAnchorProps;
+//   Page: ScrollSpyPageProps;
+// };
+
+// export const ScrollSpy = () => ({
+//   ...ScrollSpyRoot,
+//   ...{
+//     Root: ScrollSpyRoot,
+//     Anchor: ScrollSpyAnchor,
+//     Page: ScrollSpyPage,
+//   },
+// });

package/src/components/ScrollSpy/actions.ts

@@ -0,0 +1,8 @@
+import { ScrollSpyActionType } from "./types";
+
+export const updateIndex = (index: number) => {
+  return {
+    type: ScrollSpyActionType.UPDATE,
+    index,
+  };
+};

package/src/components/ScrollSpy/index.css

@@ -0,0 +1,7 @@
+.ads-ScrollSpy-input:focus-visible {
+  @apply focus-visible;
+}
+
+.ads-ScrollSpy-input::-webkit-inner-spin-button {
+  display: none;
+}

package/src/components/ScrollSpy/index.ts

@@ -0,0 +1,2 @@
+export * from "./ScrollSpy";
+export * from "./types";

package/src/components/ScrollSpy/reducers.ts

@@ -0,0 +1,24 @@
+import { ScrollSpyState, ScrollSpyAction, ScrollSpyActionType } from "./types";
+
+export const scrollSpyInitialState = {
+  index: 0,
+  page: 1,
+};
+
+export const reducer = (
+  state: ScrollSpyState = scrollSpyInitialState,
+  action: ScrollSpyAction,
+) => {
+  switch (action.type) {
+    case ScrollSpyActionType.UPDATE:
+      return state.index !== action.index
+        ? {
+            ...state,
+            index: action.index,
+            page: action.index + 1,
+          }
+        : state;
+    default:
+      return state;
+  }
+};

package/src/components/ScrollSpy/selectors.ts

@@ -0,0 +1,5 @@
+import { ScrollSpyState } from "./types";
+
+export const selectCurrentIndex = (state: ScrollSpyState) => state.index;
+
+export const selectCurrentPage = (state: ScrollSpyState) => state.page;

package/src/components/ScrollSpy/types.ts

@@ -0,0 +1,13 @@
+export enum ScrollSpyActionType {
+  UPDATE = "UPDATE",
+}
+
+export type ScrollSpyState = {
+  index: number;
+  page: number;
+};
+
+export type ScrollSpyAction = {
+  type: ScrollSpyActionType;
+  index: number;
+};

package/src/components/Select/Select.story.mdx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
 import classNames from "classnames";
 import { Box } from "../Box";
@@ -6,7 +6,6 @@ import { CloseButton } from "../CloseButton";
 import { Flex } from "../Flex";
 import { Icon, ICON_TYPE } from "../Icon";
 import { Tag } from "../Tag";
-import { IntegrationLogo } from "../IntegrationLogo";
 import { Reference } from "../Reference";
 import { Select } from "./Select";
 import { SelectPopover } from "./SelectPopover";
@@ -43,7 +42,6 @@ export const ActionButton = () => (
       "duration-200",
       "hover:border-brandGreen-400",
       "hover:text-brandGreen-400",
-      "focus:outline-none",
       "border-brandGreen-400",
       "text-brandGreen-400",
     ])}
@@ -164,6 +162,20 @@ native HTML select element.
   </Story>
 </Preview>
 
+### With an options message
+
+<Preview>
+  <Story name="With an options message">
+    <Container>
+      <Select
+        options={options}
+        optionsMessage="Search feeling cluttered? Manage options in your organization preferences."
+        menuInPortal
+      />
+    </Container>
+  </Story>
+</Preview>
+
 ### Creatable
 
 <Preview>
@@ -465,8 +477,8 @@ See https://react-select.com/async for more info and examples.
 
 ### Select with custom option label and single value
 
-In this example, we want to show a logo next to each option within the menulist.
-However, we don’t want the logo to appear next to the selected value. This can be
+In this example, we want to show an icon next to each option within the menulist.
+However, we don’t want the icon to appear next to the selected value. This can be
 accomplished by using `formatOptionLabel` to create the custom options and then
 override the `SingleValue` component to only display the selected option’s label.
 
@@ -479,16 +491,16 @@ override the `SingleValue` component to only display the selected option’s lab
         isClearable
         options={[
           {
-            label: "AWS",
-            value: "aws",
+            label: "Calculator",
+            value: ICON_TYPE.CALCULATOR,
           },
           {
-            label: "Gitlab",
-            value: "gitlab",
+            label: "Clipboard",
+            value: ICON_TYPE.CLIPBOARD,
           },
           {
-            label: "Okta",
-            value: "okta",
+            label: "Key",
+            value: ICON_TYPE.KEY,
           },
         ]}
         components={{
@@ -500,7 +512,7 @@ override the `SingleValue` component to only display the selected option’s lab
           return (
             <Box className="flex justify-between">
               <Box>{label}</Box>
-              <IntegrationLogo size={12} logo={value} />
+              <Icon icon={value} />
             </Box>
           );
         }}
@@ -597,3 +609,33 @@ override the `SingleValue` component to only display the selected option’s lab
     }}
   </Story>
 </Preview>
+
+### Programmatic focus/blur
+
+Use the `selectRef` prop to pass a Ref object to the interal React Select component. This ref can be used to programmatically focus or blur the component (similar to the examples here: https://react-select.com/advanced#accessing-internals)
+
+<Preview>
+  <Story name="Programmtic focus">
+    {() => {
+      const ref = useRef(null);
+      const focus = () => ref.current.focus();
+      const blur = () => ref.current.blur();
+      return (
+        <Container>
+          <Stack className="w-full">
+            <Select
+              className="flex-grow"
+              selectRef={ref}
+              options={options}
+              isClearable
+              openMenuOnFocus
+              menuInPortal
+            />
+            <Button onClick={focus}>Focus</Button>
+            <Button onClick={blur}>Blur</Button>
+          </Stack>
+        </Container>
+      );
+    }}
+  </Story>
+</Preview>