@progressiveui/react 1.22.0

package/src/components/Accordion/components/AccordionItem.tsx

@@ -0,0 +1,181 @@
+import * as React from "react";
+import { TransitionState } from "react-transition-state";
+import {
+  ACCORDION_BLOCK,
+  ElementProps,
+  ItemState,
+  ItemStateOptions,
+} from "../utils/constants";
+import { bem } from "../utils/bem";
+import { mergeProps } from "../utils/mergeProps";
+import useSettings from "../../../hooks/useSettings";
+import { useAccordionItem } from "../hooks/useAccordionItem";
+import { useHeightTransition } from "../../../hooks/useHeightTransition";
+import { useMergeRef } from "../../../hooks/useMergeRef";
+import { ChevronDown } from "@progressiveui/icons-react";
+import { withAccordionItem, ItemStateProps } from "./withAccordionItem";
+import classNames from "classnames";
+
+interface ItemElementProps<E extends HTMLElement>
+  extends ElementProps<E, TransitionState> {
+  ref?: React.ForwardedRef<E>;
+}
+
+type NodeOrFunc = React.ReactNode | ((props: ItemState) => React.ReactNode);
+
+interface AccordionItemProps
+  extends ItemStateOptions,
+    ElementProps<HTMLDivElement, TransitionState> {
+  /**
+   * Either a React node or a function that returns a React node.
+   * This property defines the content of the accordion item's header.
+   */
+  header?: NodeOrFunc;
+
+  /**
+   * Can be either a React node or a function that returns a React node.
+   * This property defines the main content of the accordion item.
+   */
+  children?: NodeOrFunc;
+
+  /**
+   * Specifies the HTML tag to be used for the heading element of the accordion item.
+   * It can be any of the heading tags from 'h1' to 'h6'.
+   */
+  headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+  /**
+   * Properties to be passed to the heading element of the accordion item.
+   * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+   */
+  headingProps?: ItemElementProps<HTMLHeadingElement>;
+
+  /**
+   * Properties to be passed to the button element within the accordion item.
+   * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+   */
+  buttonProps?: ItemElementProps<HTMLButtonElement>;
+
+  /**
+   * Properties to be passed to the content container element of the accordion item.
+   * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+   */
+  contentProps?: ItemElementProps<HTMLDivElement>;
+
+  /**
+   * Properties to be passed to the panel element inside the content container of the accordion item.
+   * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+   */
+  panelProps?: ItemElementProps<HTMLDivElement>;
+}
+
+interface WrappedItemProps<E extends Element>
+  extends ItemStateProps<E>,
+    Omit<AccordionItemProps, "itemRef" | "itemKey" | "initialEntered"> {}
+
+const getRenderNode: <P>(
+  nodeOrFunc: React.ReactNode | ((props: P) => React.ReactNode),
+  props: P
+) => React.ReactNode = (nodeOrFunc, props) =>
+  typeof nodeOrFunc === "function" ? nodeOrFunc(props) : nodeOrFunc;
+
+const WrappedItem = React.memo(
+  ({
+    forwardedRef,
+    itemRef,
+    state,
+    toggle,
+    className,
+    disabled,
+    header,
+    headingTag: Heading = "h3",
+    headingProps,
+    buttonProps,
+    contentProps,
+    panelProps,
+    children,
+    ...rest
+  }: WrappedItemProps<HTMLDivElement>) => {
+    const itemState: ItemState = { state, toggle, disabled };
+    const { buttonProps: _buttonProps, panelProps: _panelProps } =
+      useAccordionItem(itemState);
+    const [transitionStyle, _panelRef] =
+      useHeightTransition<HTMLDivElement>(state);
+    const panelRef = useMergeRef(panelProps && panelProps.ref, _panelRef);
+    const { status, isMounted, isEnter } = state;
+
+    const { prefix } = useSettings();
+
+    const buttonClasses = classNames(`${prefix}--accordion--button`, {
+      [`${prefix}--accordion--button__expanded`]: isEnter,
+      //  [`${className}`]: className,
+    });
+
+    return (
+      <div
+        {...rest}
+        ref={useMergeRef(forwardedRef, itemRef)}
+        className={bem(ACCORDION_BLOCK, "item", { status, expanded: isEnter })(
+          className,
+          state
+        )}
+      >
+        <Heading
+          {...headingProps}
+          style={{ margin: 0, ...(headingProps && headingProps.style) }}
+          className={bem(ACCORDION_BLOCK, "item-heading")(
+            headingProps && headingProps.className,
+            state
+          )}
+        >
+          <button
+            {...mergeProps(_buttonProps, buttonProps)}
+            type="button"
+            className={bem(ACCORDION_BLOCK, "item-btn")(
+              buttonProps && buttonProps.className,
+              state
+            )}
+          >
+            <ChevronDown description="open" className={buttonClasses} />
+            {getRenderNode(header, itemState)}
+          </button>
+        </Heading>
+
+        {isMounted && (
+          <div
+            {...contentProps}
+            style={{
+              display: status === "exited" ? "none" : undefined,
+              ...transitionStyle,
+              ...(contentProps && contentProps.style),
+            }}
+            className={bem(ACCORDION_BLOCK, "item-content")(
+              contentProps && contentProps.className,
+              state
+            )}
+          >
+            <div
+              {...mergeProps(_panelProps, panelProps)}
+              ref={panelRef}
+              className={bem(ACCORDION_BLOCK, "item-panel")(
+                panelProps && panelProps.className,
+                state
+              )}
+            >
+              {getRenderNode(children, itemState)}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+WrappedItem.displayName = "AccordionItem";
+const AccordionItem = withAccordionItem<AccordionItemProps, HTMLDivElement>(
+  WrappedItem
+);
+
+AccordionItem.displayName = "AccordionItem";
+
+export { AccordionItem, AccordionItemProps };

package/src/components/Accordion/components/AccordionProvider.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { AccordionContext, AccordionProviderValue } from "../utils/constants";
+
+const AccordionProvider = (props: {
+  value: AccordionProviderValue;
+  children?: React.ReactNode;
+}) => <AccordionContext.Provider {...props} />;
+
+export { AccordionProvider };

package/src/components/Accordion/components/ControlledAccordion.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {
+  ACCORDION_BLOCK,
+  AccordionProviderValue,
+  ElementProps,
+} from "../utils/constants";
+import { bem } from "../utils/bem";
+import { mergeProps } from "../utils/mergeProps";
+import { AccordionProvider } from "./AccordionProvider";
+import { useAccordion } from "../hooks/useAccordion";
+
+interface ControlledAccordionProps extends ElementProps<HTMLDivElement> {
+  providerValue: AccordionProviderValue;
+  children?: React.ReactNode;
+}
+
+const ControlledAccordion = React.forwardRef<
+  HTMLDivElement,
+  ControlledAccordionProps
+>(({ providerValue, className, ...rest }, ref) => {
+  const { accordionProps } = useAccordion();
+  return (
+    <AccordionProvider value={providerValue}>
+      <div
+        {...mergeProps(accordionProps, rest)}
+        ref={ref}
+        className={bem(ACCORDION_BLOCK)(className)}
+      />
+    </AccordionProvider>
+  );
+});
+
+ControlledAccordion.displayName = "ControlledAccordion";
+
+export { ControlledAccordion, ControlledAccordionProps };

package/src/components/Accordion/components/withAccordionItem.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { ItemState, ItemStateOptions } from "../utils/constants";
+import { useAccordionItemEffect } from "../hooks/useAccordionItemEffect";
+
+interface ItemStateProps<E extends Element, T = E> extends ItemState {
+  itemRef: React.RefObject<E>;
+  forwardedRef: React.ForwardedRef<T>;
+}
+
+const withAccordionItem = <
+  P extends ItemStateOptions,
+  E extends Element,
+  T = E
+>(
+  WrappedItem: any //TODO: MemoExoticComponent<(props: ItemStateProps<E, T>) => JSX.Element>
+) => {
+  const WithAccordionItem = React.forwardRef<T, P>(
+    ({ itemKey, initialEntered, ...rest }, ref) => (
+      <WrappedItem
+        forwardedRef={ref}
+        {...rest}
+        {...useAccordionItemEffect<E>({
+          itemKey,
+          initialEntered,
+          disabled: rest.disabled,
+        })}
+      />
+    )
+  );
+
+  WithAccordionItem.displayName = "withAccordionItem";
+  return WithAccordionItem;
+};
+
+withAccordionItem.displayName = "withAccordionItem";
+
+export { withAccordionItem, ItemStateProps };

package/src/components/Accordion/hooks/useAccordion.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import { HTMLAttributes, KeyboardEvent } from 'react';
+import { ACCORDION_ATTR, ACCORDION_BTN_ATTR } from '../utils/constants';
+
+const getAccordion = (node: Element) => {
+  do {
+    node = node.parentElement!;
+  } while (node && !node.hasAttribute(ACCORDION_ATTR));
+  return node;
+};
+
+const getNextIndex = (moveUp: boolean, current: number, length: number) =>
+  moveUp ? (current > 0 ? current - 1 : length - 1) : (current + 1) % length;
+
+const moveFocus = (moveUp: boolean, e: KeyboardEvent<Element>) => {
+  const { activeElement } = document;
+  if (
+    !activeElement ||
+    !activeElement.hasAttribute(ACCORDION_BTN_ATTR) ||
+    getAccordion(activeElement) !== e.currentTarget
+  )
+    return;
+
+  const nodes = e.currentTarget.querySelectorAll<HTMLElement>(
+    `[${ACCORDION_BTN_ATTR}]`
+  );
+  const { length } = nodes;
+  for (let i = 0; i < length; i++) {
+    if (nodes[i] === activeElement) {
+      let next = getNextIndex(moveUp, i, length);
+      while (getAccordion(nodes[i]) !== getAccordion(nodes[next]))
+        next = getNextIndex(moveUp, next, length);
+      if (i !== next) {
+        e.preventDefault();
+        nodes[next].focus();
+      }
+      break;
+    }
+  }
+};
+
+const useAccordion = () => {
+  const accordionProps: HTMLAttributes<Element> = {
+    [ACCORDION_ATTR]: '',
+    onKeyDown: (e) =>
+      e.key === 'ArrowUp'
+        ? moveFocus(true, e)
+        : e.key === 'ArrowDown' && moveFocus(false, e),
+  };
+  return {
+    accordionProps,
+  };
+};
+
+export { useAccordion };

package/src/components/Accordion/hooks/useAccordionContext.ts

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { TransitionState } from 'react-transition-state';
+import { AccordionContext, AccordionProviderValue, ItemKey } from '../utils/constants';
+
+const getItemState = (
+  providerValue: AccordionProviderValue,
+  key: ItemKey,
+  itemInitialEntered?: boolean
+): TransitionState => {
+  const { stateMap, mountOnEnter, initialEntered } = providerValue;
+  const _initialEntered = itemInitialEntered ?? initialEntered;
+  return (
+    stateMap.get(key) || {
+      status: _initialEntered ? 'entered' : mountOnEnter ? 'unmounted' : 'exited',
+      isMounted: !mountOnEnter,
+      isEnter: _initialEntered,
+      isResolved: true
+    }
+  );
+};
+
+const useAccordionContext = () => {
+  const context = useContext(AccordionContext);
+  if (process.env.NODE_ENV !== 'production' && !context.stateMap) {
+    throw new Error(
+      '[React-Accordion] Cannot find a <AccordionProvider/> above this AccordionItem.'
+    );
+  }
+  return context as AccordionProviderValue;
+};
+
+export { useAccordionContext, getItemState };

package/src/components/Accordion/hooks/useAccordionItem.ts

@@ -0,0 +1,31 @@
+import { MouseEventHandler, HTMLAttributes, ButtonHTMLAttributes } from "react";
+import { ACCORDION_BTN_ATTR, ItemState } from "../utils/constants";
+import { useId } from "../../../hooks/useId";
+
+const useAccordionItem = ({ state, toggle, disabled }: ItemState) => {
+  const buttonId = useId();
+  const panelId = buttonId && buttonId + "-";
+
+  const buttonProps: ButtonHTMLAttributes<Element> = {
+    id: buttonId,
+    "aria-controls": panelId,
+    "aria-expanded": state.isEnter,
+    onClick: toggle as unknown as MouseEventHandler<Element>,
+  };
+  disabled
+    ? (buttonProps.disabled = true)
+    : ((buttonProps as { [x: string]: string })[ACCORDION_BTN_ATTR] = "");
+
+  const panelProps: HTMLAttributes<Element> = {
+    id: panelId,
+    "aria-labelledby": buttonId,
+    role: "region",
+  };
+
+  return {
+    buttonProps,
+    panelProps,
+  };
+};
+
+export { useAccordionItem };

package/src/components/Accordion/hooks/useAccordionItemEffect.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import { useEffect, useRef, useCallback } from 'react';
+import { ItemStateOptions } from '../utils/constants';
+import { useAccordionContext, getItemState } from './useAccordionContext';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const useAccordionItemEffect = <E extends Element>({
+  itemKey,
+  initialEntered,
+  disabled,
+}: ItemStateOptions = {}) => {
+  const itemRef = useRef<HTMLInputElement>(null);
+  const context = useAccordionContext();
+  const key = itemKey ?? itemRef.current!;
+  const state = getItemState(context, key, initialEntered);
+  const { setItem, deleteItem, toggle } = context;
+
+  useEffect(() => {
+    if (disabled) return;
+    const key = itemKey ?? itemRef.current!;
+    setItem(key, { initialEntered });
+    return () => void deleteItem(key);
+  }, [setItem, deleteItem, itemKey, initialEntered, disabled]);
+
+  return {
+    itemRef,
+    state,
+    toggle: useCallback(
+      (toEnter?: boolean) => toggle(key, toEnter),
+      [toggle, key]
+    ),
+  };
+};
+
+export { useAccordionItemEffect };

package/src/components/Accordion/hooks/useAccordionProvider.ts

@@ -0,0 +1,35 @@
+import { useTransitionMap } from 'react-transition-state';
+import {
+  TransitionProp,
+  AccordionProviderOptions,
+  AccordionProviderValue,
+  ItemKey
+} from '../utils/constants';
+
+const getTransition = (
+  transition: TransitionProp | undefined,
+  name: 'enter' | 'exit' | 'preEnter' | 'preExit'
+): boolean => transition === true || !!(transition && transition[name]);
+
+const useAccordionProvider: (options?: AccordionProviderOptions) => AccordionProviderValue = ({
+  transition,
+  transitionTimeout,
+  ...rest
+} = {}) => {
+  const transitionMap = useTransitionMap<ItemKey>({
+    timeout: transitionTimeout,
+    enter: getTransition(transition, 'enter'),
+    exit: getTransition(transition, 'exit'),
+    preEnter: getTransition(transition, 'preEnter'),
+    preExit: getTransition(transition, 'preExit'),
+    ...rest
+  });
+
+  return {
+    mountOnEnter: !!rest.mountOnEnter,
+    initialEntered: !!rest.initialEntered,
+    ...transitionMap
+  };
+};
+
+export { useAccordionProvider };

package/src/components/Accordion/hooks/useAccordionState.ts

@@ -0,0 +1,14 @@
+import { ItemKey } from '../utils/constants';
+import { useAccordionContext, getItemState } from './useAccordionContext';
+
+const useAccordionState = () => {
+  const context = useAccordionContext();
+  return {
+    getItemState: (key: ItemKey, { initialEntered }: { initialEntered?: boolean } = {}) =>
+      getItemState(context, key, initialEntered),
+    toggle: context.toggle,
+    toggleAll: context.toggleAll
+  };
+};
+
+export { useAccordionState };

package/src/components/Accordion/index.ts

@@ -0,0 +1,23 @@
+export { Accordion } from "./components/Accordion";
+export { AccordionItem } from "./components/AccordionItem";
+export { AccordionProvider } from "./components/AccordionProvider";
+export { ControlledAccordion } from "./components/ControlledAccordion";
+export { withAccordionItem } from "./components/withAccordionItem";
+export { useAccordion } from "./hooks/useAccordion";
+export { useAccordionItem } from "./hooks/useAccordionItem";
+export { useAccordionItemEffect } from "./hooks/useAccordionItemEffect";
+export { useAccordionProvider } from "./hooks/useAccordionProvider";
+export { useAccordionState } from "./hooks/useAccordionState";
+export { useHeightTransition } from "../../hooks/useHeightTransition";
+export { useMergeRef } from "../../hooks/useMergeRef";
+export type { AccordionProps } from "./components/Accordion";
+export type { AccordionItemProps } from "./components/AccordionItem";
+export type { ControlledAccordionProps } from "./components/ControlledAccordion";
+export type { ItemStateProps } from "./components/withAccordionItem";
+export type {
+  AccordionProviderOptions,
+  AccordionProviderValue,
+  ItemState,
+  ItemStateOptions,
+  TransitionProp,
+} from "./utils/constants";

package/src/components/Accordion/utils/bem.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { ClassNameProp, Modifiers } from './constants';
+
+/**
+ * Generate className following BEM methodology: http://getbem.com/naming/
+ * Modifier value can be one of the types: boolean, string
+ */
+const bem =
+  (block: string, element?: string, modifiers?: Modifiers) =>
+  <P>(className?: ClassNameProp<P>, props?: P) => {
+    const blockElement = element ? `${block}__${element}` : block;
+
+    let classString = blockElement;
+    modifiers &&
+      Object.keys(modifiers).forEach((name) => {
+        const value = modifiers[name];
+        if (value)
+          classString += ` ${blockElement}--${
+            value === true ? name : `${name}-${value}`
+          }`;
+      });
+
+    let expandedClassName =
+      typeof className === 'function' ? className(props!) : className;
+    if (typeof expandedClassName === 'string') {
+      expandedClassName = expandedClassName.trim();
+      if (expandedClassName) classString += ` ${expandedClassName}`;
+    }
+
+    return classString;
+  };
+
+export { bem };

package/src/components/Accordion/utils/constants.ts

@@ -0,0 +1,82 @@
+import { createContext, HTMLAttributes } from "react";
+import {
+  TransitionState,
+  TransitionMapResult,
+  TransitionMapOptions,
+  TransitionOptions,
+} from "react-transition-state";
+
+export const ACCORDION_BLOCK = "szh-accordion";
+export const ACCORDION_PREFIX = "szh-adn";
+export const ACCORDION_ATTR = `data-${ACCORDION_PREFIX}`;
+export const ACCORDION_BTN_ATTR = `data-${ACCORDION_PREFIX}-btn`;
+
+export type Modifiers = {
+  readonly [index: string]: boolean | string;
+};
+export type ClassNameProp<P> = string | ((props: P) => string);
+export interface ElementProps<E extends HTMLElement, P = undefined>
+  extends Omit<HTMLAttributes<E>, "className" | "children"> {
+  className?: P extends undefined ? string : ClassNameProp<P>;
+  "data-testid"?: string | number;
+}
+
+export type ItemKey = Element | string | number;
+export type TransitionProp =
+  | boolean
+  | {
+      enter?: boolean;
+      exit?: boolean;
+      preEnter?: boolean;
+      preExit?: boolean;
+    };
+
+export interface ItemState {
+  readonly state: TransitionState;
+  readonly toggle: (toEnter?: boolean) => void;
+  disabled?: boolean;
+}
+
+export interface ItemStateOptions {
+  itemKey?: string | number;
+  initialEntered?: boolean;
+  disabled?: boolean;
+}
+
+export interface AccordionProviderOptions
+  extends Omit<
+    TransitionMapOptions<ItemKey>,
+    "enter" | "exit" | "preEnter" | "preExit" | "timeout"
+  > {
+  /**
+   * The transition behavior for the accordion.
+   * It can take a TransitionProp type which specifies the type of transition.
+   */
+  transition?: TransitionProp;
+
+  /**
+   *  Set the timeout duration for transitions.
+   * It uses the 'timeout' type from TransitionOptions to specify the duration in milliseconds.
+   */
+  transitionTimeout?: TransitionOptions["timeout"];
+}
+
+export interface AccordionProviderValue extends TransitionMapResult<ItemKey> {
+  /**
+   * Determines whether the accordion item should be mounted
+   * in the DOM only when it enters. A true value means the item will only mount when
+   * it is opened (entered state).
+   */
+  mountOnEnter: boolean;
+
+  /**
+   * Indicates whether the accordion item should be in the
+   * entered (or opened) state initially. This can be used to display the accordion item
+   * as open by default when the component is first rendered.
+   */
+  initialEntered: boolean;
+}
+
+export const AccordionContext = createContext<Partial<AccordionProviderValue>>(
+  {}
+);

package/src/components/Accordion/utils/mergeProps.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+// @ts-nocheck
+
+const mergeProps = (target, source) => {
+  if (!source) return target;
+
+  const result = { ...target };
+  Object.keys(source).forEach((key) => {
+    const targetProp = target[key];
+    const sourceProp = source[key];
+    if (typeof sourceProp === 'function' && targetProp) {
+      result[key] = (...e) => {
+        targetProp(...e);
+        sourceProp(...e);
+      };
+    } else {
+      result[key] = sourceProp;
+    }
+  });
+
+  return result;
+};
+
+export { mergeProps };

package/src/components/Accordion/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,15 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+// Get around a warning when using useLayoutEffect on the server.
+// https://github.com/reduxjs/react-redux/blob/b48d087d76f666e1c6c5a9713bbec112a1631841/src/utils/useIsomorphicLayoutEffect.js#L12
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+// https://github.com/facebook/react/issues/14927#issuecomment-549457471
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+    ? useLayoutEffect
+    : useEffect;
+
+export { useIsomorphicLayoutEffect as useLayoutEffect };