datocms-react-ui 0.3.26 → 0.3.30

package/src/Dropdown/Menu.tsx

@@ -0,0 +1,351 @@
+import React, {
+  createRef,
+  SyntheticEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useInView } from 'react-intersection-observer';
+import { Portal } from './Portal';
+import { useMediaQuery } from '../useMediaQuery';
+import { DropdownContext } from './DropdownContext';
+import { Group } from './Group';
+import { MenuContext } from './MenuContext';
+import { Option } from './Option';
+import s from './styles.module.css.json';
+import { mergeRefs } from '../mergeRefs';
+import classNames from 'classnames';
+
+const MenuMobileContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element => (
+  <Portal>
+    <div
+      className={s['Dropdown__menu__mobile-container']}
+      style={{ zIndex: 1000 }}
+    >
+      <div className={s['Modal__backdrop']} />
+      {children}
+    </div>
+  </Portal>
+);
+
+const MenuDesktopContainer = React.forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode }
+>(({ children }, ref) => (
+  <Portal>
+    <div
+      className={s['Dropdown__menu-container']}
+      style={{ zIndex: 1000 }}
+      ref={ref}
+    >
+      {children}
+    </div>
+  </Portal>
+));
+
+function getAbsoluteHeight(el: HTMLElement) {
+  const styles = window.getComputedStyle(el);
+  const margin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+  return Math.ceil(el.offsetHeight + margin);
+}
+
+function getAbsoluteWidth(el: HTMLElement) {
+  const styles = window.getComputedStyle(el);
+  const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+  return Math.ceil(el.offsetWidth + margin);
+}
+
+function setPosition(
+  panel: HTMLElement,
+  parent: HTMLElement,
+  alignment: 'left' | 'right',
+) {
+  const rect = parent.getBoundingClientRect();
+  const height = getAbsoluteHeight(panel);
+  const parentWidth = getAbsoluteWidth(parent);
+  const width = getAbsoluteWidth(panel);
+
+  if (alignment === 'left') {
+    // eslint-disable-next-line no-param-reassign
+    panel.style.left = `${rect.left + window.pageXOffset}px`;
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    panel.style.left = `${
+      rect.left + window.pageXOffset + parentWidth - width
+    }px`;
+  }
+
+  const windowHeight = Math.max(
+    document.documentElement.clientHeight || 0,
+    window.innerHeight || 0,
+  );
+
+  const menu = panel.querySelector<HTMLElement>('.' + s['Dropdown__menu']);
+
+  if (!menu) {
+    return;
+  }
+
+  const styles = window.getComputedStyle(menu);
+  const marginTop = parseFloat(styles.marginTop);
+
+  const fitsBelow = rect.bottom + height <= windowHeight;
+  const fitsAbove = rect.top - height > 0;
+
+  if (!fitsBelow && fitsAbove) {
+    // eslint-disable-next-line no-param-reassign
+    panel.style.top = `${rect.bottom - height}px`;
+  } else if (fitsBelow) {
+    // eslint-disable-next-line no-param-reassign
+    panel.style.top = `${rect.bottom}px`;
+  } else {
+    const spaceAbove = rect.top;
+    const spaceBelow = windowHeight - rect.bottom;
+
+    if (spaceBelow > spaceAbove) {
+      // eslint-disable-next-line no-param-reassign
+      panel.style.top = `${rect.bottom}px`;
+      menu.style.maxHeight = `${windowHeight - rect.bottom - marginTop - 10}px`;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      panel.style.top = `0px`;
+      menu.style.maxHeight = `${rect.top - marginTop}px`;
+    }
+  }
+
+  // eslint-disable-next-line no-param-reassign
+  panel.style.visibility = 'visible';
+}
+
+export type MenuProps = {
+  children: React.ReactNode;
+  alignment?: 'left' | 'right';
+};
+
+export const Menu = ({
+  children,
+  alignment = 'left',
+}: MenuProps): JSX.Element => {
+  const { closeMenu } = useContext(DropdownContext);
+
+  const childrenArray = React.Children.toArray(children);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [options, setOptions] = useState<
+    Array<{
+      id: string;
+      handler?: (e: SyntheticEvent) => void;
+    }>
+  >([]);
+
+  const handleChange = useCallback(
+    (e) => {
+      setSearchTerm(e.target.value);
+    },
+    [setSearchTerm],
+  );
+
+  const anyGroup = childrenArray.some(
+    (child) =>
+      typeof child === 'object' && 'type' in child && child.type === Group,
+  );
+
+  const { matches } = useMediaQuery('(max-width: 1024px)');
+
+  const addOption = useCallback(
+    (id: string) => {
+      setOptions((old) => [...old, { id }]);
+
+      return () => {
+        setOptions((old) => old.filter((x) => x.id !== id));
+      };
+    },
+    [setOptions],
+  );
+
+  const setClickHandlerForOption = useCallback(
+    (id: string, handler: (e: SyntheticEvent) => void) => {
+      setOptions((old) =>
+        old.map((x) => (x.id !== id ? x : { ...x, handler })),
+      );
+    },
+    [setOptions],
+  );
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        closeMenu();
+      }
+
+      if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!contentRef.current) {
+          return;
+        }
+
+        const delta = event.key === 'ArrowUp' ? -1 : 1;
+
+        const selectedOption = contentRef.current.querySelector(
+          '.' + s['Dropdown__menu__option--is-selected'],
+        );
+
+        let nextOption;
+
+        if (!selectedOption) {
+          nextOption = contentRef.current.querySelector(
+            '.' + s['Dropdown__menu__option'],
+          );
+        } else {
+          const elements = Array.from(
+            contentRef.current.querySelectorAll(
+              '.' + s['Dropdown__menu__option'],
+            ),
+          );
+          const index = elements.findIndex((el) => el === selectedOption);
+          const nextIndex =
+            index + delta < 0
+              ? elements.length - 1
+              : (index + delta) % elements.length;
+          nextOption = elements[nextIndex];
+          selectedOption.classList.remove(
+            s['Dropdown__menu__option--is-selected'],
+          );
+        }
+
+        if (nextOption) {
+          nextOption.classList.add(s['Dropdown__menu__option--is-selected']);
+
+          scrollIntoView(nextOption, {
+            scrollMode: 'if-needed',
+            behavior: 'auto',
+          });
+        }
+      }
+
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!contentRef.current) {
+          return;
+        }
+
+        const selectedOption = contentRef.current.querySelector(
+          '.' + s['Dropdown__menu__option--is-selected'],
+        );
+
+        if (selectedOption) {
+          const id = (selectedOption as HTMLButtonElement).dataset.optionId;
+          const option = options.find((x) => x.id === id);
+          if (option && option.handler) {
+            option.handler(event);
+          }
+        }
+      }
+    },
+    [options],
+  );
+
+  const [observerRef, inView, entry] = useInView({
+    threshold: 0,
+    rootMargin: '0px 0px 0px 0px',
+    triggerOnce: false,
+  });
+
+  const parentRef = createRef<HTMLDivElement>();
+  const menuRef = createRef<HTMLDivElement>();
+
+  const reposition = useCallback(() => {
+    if (menuRef.current && parentRef.current) {
+      setPosition(menuRef.current, parentRef.current, alignment);
+    }
+  }, [menuRef, parentRef, alignment]);
+
+  useEffect(() => {
+    reposition();
+  }, [inView, entry?.intersectionRatio]);
+
+  useEffect(() => {
+    if (menuRef.current && parentRef.current) {
+      const resizeObserver = new ResizeObserver(reposition);
+      resizeObserver.observe(menuRef.current);
+      resizeObserver.observe(parentRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+
+    return undefined;
+  }, [menuRef, reposition]);
+
+  useEffect(() => {
+    window.addEventListener('resize', reposition);
+    return () => window.removeEventListener('resize', reposition);
+  }, [reposition]);
+
+  const Wrapper = matches ? MenuMobileContainer : MenuDesktopContainer;
+
+  return (
+    <>
+      <div
+        ref={mergeRefs(observerRef, parentRef)}
+        className={s['Dropdown__spacer']}
+      />
+      <Wrapper ref={menuRef}>
+        <div
+          className={classNames(s['Dropdown__menu'], {
+            [s['Dropdown__menu--fullscreen']]: matches,
+          })}
+        >
+          {options.length > 5 && (
+            <div className={s['Dropdown__menu__search']}>
+              <input
+                type="text"
+                value={searchTerm || ''}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                placeholder="Search..."
+                autoFocus
+                className={s['Dropdown__menu__search__input']}
+              />
+            </div>
+          )}
+          <MenuContext.Provider
+            value={{ searchTerm, addOption, setClickHandlerForOption }}
+          >
+            <div className={s['Dropdown__menu__inner']} ref={contentRef}>
+              {anyGroup ? (
+                children
+              ) : (
+                <div className={s['Dropdown__menu__group__content']}>
+                  {children}
+                </div>
+              )}
+            </div>
+          </MenuContext.Provider>
+        </div>
+        {matches ? (
+          <div>
+            <div className={s['Dropdown__menu__inner']}>
+              <Option closeMenuOnClick>Close</Option>
+            </div>
+          </div>
+        ) : null}
+      </Wrapper>
+    </>
+  );
+};

package/src/Dropdown/MenuContext.tsx

@@ -0,0 +1,18 @@
+import { createContext, SyntheticEvent } from 'react';
+
+type Context = {
+  searchTerm: string;
+  addOption: (id: string) => void;
+  setClickHandlerForOption: (
+    id: string,
+    handler: (e: SyntheticEvent) => void,
+  ) => void;
+};
+
+export const MenuContext = createContext<Context>({
+  searchTerm: '',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  addOption: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setClickHandlerForOption: () => {},
+});

package/src/Dropdown/Option.tsx

@@ -0,0 +1,148 @@
+import classNames from 'classnames';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useCtx } from '..';
+import { DropdownContext } from './DropdownContext';
+import { MenuContext } from './MenuContext';
+import { OptionAction } from './OptionAction';
+import s from './styles.module.css.json';
+
+export type OptionProps = {
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  to?: string;
+  active?: boolean;
+  red?: boolean;
+  valid?: boolean;
+  invalid?: boolean;
+  children: React.ReactNode;
+  disabled?: boolean;
+  closeMenuOnClick?: boolean;
+};
+
+export const Option = ({
+  onClick,
+  to,
+  active,
+  red,
+  valid,
+  invalid,
+  children,
+  disabled,
+  closeMenuOnClick,
+}: OptionProps): JSX.Element | null => {
+  const ctx = useCtx();
+
+  const id = useMemo(() => new Date().getTime().toString(36), []);
+
+  const { searchTerm, addOption, setClickHandlerForOption } = useContext(
+    MenuContext,
+  );
+
+  const childrenArray = React.Children.toArray(children);
+
+  const buttons = childrenArray.filter(
+    (child) =>
+      typeof child === 'object' &&
+      'type' in child &&
+      child.type === OptionAction,
+  );
+
+  const notButtons = childrenArray.filter(
+    (child) =>
+      typeof child !== 'object' ||
+      !('type' in child) ||
+      child.type !== OptionAction,
+  );
+
+  const contentRef = useRef<HTMLButtonElement>(null);
+  const [innerText, setInnerText] = useState<string>('');
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setInnerText(contentRef.current.innerText);
+    }
+  });
+
+  const { closeMenu } = useContext(DropdownContext);
+
+  const handleClick = useCallback(
+    (e) => {
+      if (!onClick && !to) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (disabled) {
+        return;
+      }
+
+      if (closeMenuOnClick ?? true) {
+        closeMenu();
+      }
+
+      if (to) {
+        ctx?.navigateTo(to);
+      }
+
+      if (onClick) {
+        onClick(e);
+      }
+    },
+    [closeMenuOnClick, closeMenu, onClick, to],
+  );
+
+  useEffect(() => {
+    return addOption(id);
+  }, [id]);
+
+  useEffect(() => {
+    return setClickHandlerForOption(id, handleClick);
+  }, [id, handleClick, setClickHandlerForOption]);
+
+  if (
+    innerText &&
+    searchTerm &&
+    !innerText.toLowerCase().includes(searchTerm.toLowerCase())
+  ) {
+    return null;
+  }
+
+  const content = (
+    <>
+      <button
+        type="button"
+        className={s['Dropdown__menu__option__content']}
+        ref={contentRef}
+        onClick={handleClick}
+      >
+        {notButtons}
+      </button>
+      {buttons.length > 0 && (
+        <div className={s['Dropdown__menu__option__icons']}>{buttons}</div>
+      )}
+    </>
+  );
+
+  return (
+    <div
+      className={classNames(s['Dropdown__menu__option'], {
+        [s['Dropdown__menu__option--is-active']]: active,
+        [s['Dropdown__menu__option--is-disabled']]: disabled,
+        [s['Dropdown__menu__option--is-valid']]: valid,
+        [s['Dropdown__menu__option--is-invalid']]: invalid,
+        [s['Dropdown__menu__option--is-dangerous']]: red,
+      })}
+      data-option-id={id}
+    >
+      {content}
+    </div>
+  );
+};

package/src/Dropdown/OptionAction.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { DropdownContext } from './DropdownContext';
+import s from './styles.module.css.json';
+
+export type OptionActionProps = {
+  icon: ReactNode;
+  red?: boolean;
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  closeMenuOnClick?: boolean;
+};
+
+export const OptionAction = ({
+  icon,
+  red,
+  onClick,
+  closeMenuOnClick,
+}: OptionActionProps): JSX.Element => (
+  <DropdownContext.Consumer>
+    {(context) => (
+      <button
+        type="button"
+        className={classNames(s['Dropdown__menu__option__icon'], {
+          [s['Dropdown__menu__option__icon--delete']]: red,
+        })}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (closeMenuOnClick ?? true) {
+            context.closeMenu();
+          }
+          onClick(e);
+        }}
+      >
+        {icon}
+      </button>
+    )}
+  </DropdownContext.Consumer>
+);
+
+OptionAction.displayName = 'DropdownOptionAction';

package/src/Dropdown/Portal.tsx

@@ -0,0 +1,46 @@
+import ReactDOM from 'react-dom';
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { useCtx } from '..';
+import s from '../Canvas/styles.module.css.json';
+import { generateStyleFromCtx } from '../generateStyleFromCtx';
+import classNames from 'classnames';
+
+export function Portal({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactPortal | null {
+  const ctx = useCtx();
+
+  const elRef = useRef(
+    typeof document === 'undefined' ? null : document.createElement('div'),
+  );
+
+  useEffect(() => {
+    if (!elRef.current || !document.body) {
+      return;
+    }
+
+    document.body.appendChild(elRef.current);
+
+    return () => {
+      if (elRef.current) {
+        document.body.removeChild(elRef.current);
+      }
+    };
+  }, []);
+
+  if (!elRef.current) {
+    return null;
+  }
+
+  return ReactDOM.createPortal(
+    <div
+      className={classNames(s['themeVariables'], s['canvas'])}
+      style={generateStyleFromCtx(ctx)}
+    >
+      {children}
+    </div>,
+    elRef.current,
+  );
+}

package/src/Dropdown/Separator.tsx

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import { MenuContext } from './MenuContext';
+import s from './styles.module.css.json';
+
+export const Separator = (): JSX.Element | null => {
+  const { searchTerm } = useContext(MenuContext);
+
+  if (searchTerm) {
+    return null;
+  }
+
+  return <div className={s['Dropdown__menu__separator']} />;
+};

package/src/Dropdown/Text.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import s from './styles.module.css.json';
+
+export type TextProps = { children: React.ReactNode };
+
+export function Text({ children }: TextProps): JSX.Element {
+  return <div className={s['Dropdown__menu__text']}>{children}</div>;
+}

package/src/Dropdown/index.tsx

@@ -0,0 +1,26 @@
+import { Dropdown, DropdownProps } from './Dropdown';
+import { Group, GroupProps } from './Group';
+import { Menu, MenuProps } from './Menu';
+import { Option, OptionProps } from './Option';
+import { OptionAction, OptionActionProps } from './OptionAction';
+import { Separator } from './Separator';
+import { Text, TextProps } from './Text';
+
+export {
+  Dropdown,
+  Group as DropdownGroup,
+  Menu as DropdownMenu,
+  Option as DropdownOption,
+  OptionAction as DropdownOptionAction,
+  Separator as DropdownSeparator,
+  Text as DropdownText,
+};
+
+export type {
+  DropdownProps,
+  GroupProps as DropdownGroupProps,
+  MenuProps as DropdownMenuProps,
+  OptionProps as DropdownOptionProps,
+  OptionActionProps as DropdownOptionActionProps,
+  TextProps as DropdownTextProps,
+};