@progressiveui/react 2.0.3 → 2.0.5

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

@@ -1,56 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useTransitionMap } from 'react-transition-state';
-import { useAccordionProvider } from '../../';
-
-jest.mock('react-transition-state', () => ({
-  useTransitionMap: jest.fn().mockReturnValue({ mock: true })
-}));
-
-describe('useAccordionProvider', () => {
-  test('can be called without params', () => {
-    const { result } = renderHook(() => useAccordionProvider());
-    expect(result.current).toEqual({ mock: true, mountOnEnter: false, initialEntered: false });
-    expect(useTransitionMap).toHaveBeenCalledWith({
-      enter: false,
-      exit: false,
-      preEnter: false,
-      preExit: false
-    });
-  });
-
-  test('should forward options', () => {
-    const { result } = renderHook(() =>
-      useAccordionProvider({
-        mountOnEnter: true,
-        initialEntered: true,
-        transition: true,
-        transitionTimeout: 300
-      })
-    );
-    expect(result.current).toEqual({ mock: true, mountOnEnter: true, initialEntered: true });
-    expect(useTransitionMap).toHaveBeenCalledWith({
-      mountOnEnter: true,
-      initialEntered: true,
-      enter: true,
-      exit: true,
-      preEnter: true,
-      preExit: true,
-      timeout: 300
-    });
-  });
-
-  test('should accept individual transition flag', () => {
-    const { result } = renderHook(() =>
-      useAccordionProvider({
-        transition: { enter: true, preExit: true }
-      })
-    );
-    expect(result.current).toEqual({ mock: true, mountOnEnter: false, initialEntered: false });
-    expect(useTransitionMap).toHaveBeenCalledWith({
-      enter: true,
-      exit: false,
-      preEnter: false,
-      preExit: true
-    });
-  });
-});

package/src/components/Accordion/__tests__/hooks/useAccordionState.test.tsx.new

@@ -1,54 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { render, getAccordion } from '../utils';
-import { useAccordionState } from '../../';
-
-const MyComponent = ({ itemKey }: { itemKey: string }) => {
-  const { getItemState, toggle, toggleAll } = useAccordionState();
-  return (
-    <>
-      <div data-testid="item-state">{getItemState(itemKey).status}</div>
-      <button data-testid="toggle-item" onClick={() => toggle(itemKey)}>
-        Toggle
-      </button>
-      <button data-testid="toggle-all" onClick={() => toggleAll()}>
-        Toggle All
-      </button>
-    </>
-  );
-};
-
-test('useAccordionState toggle item', () => {
-  render(
-    getAccordion({
-      item1Props: {
-        itemKey: 'item1',
-        children: <MyComponent itemKey="item1" />
-      }
-    })
-  );
-  expect(screen.getByTestId('item-state')).toHaveTextContent('exited');
-  fireEvent.click(screen.getByTestId('toggle-item'));
-  expect(screen.getByTestId('item-state')).toHaveTextContent('entered');
-});
-
-test('useAccordionState toggle all', () => {
-  render(
-    getAccordion({
-      props: {
-        allowMultiple: true
-      },
-      item2Props: {
-        initialEntered: true,
-        children: <MyComponent itemKey="item2" />
-      }
-    })
-  );
-  expect(screen.queryByRole('region', { name: 'header 1' })).toBeNull();
-  expect(screen.queryByRole('region', { name: 'header 2' })).toBeVisible();
-  expect(screen.queryByRole('region', { name: 'header 3' })).toBeNull();
-
-  fireEvent.click(screen.getByTestId('toggle-all'));
-  expect(screen.queryByRole('region', { name: 'header 1' })).toBeVisible();
-  expect(screen.queryByRole('region', { name: 'header 2' })).toBeNull();
-  expect(screen.queryByRole('region', { name: 'header 3' })).toBeVisible();
-});

package/src/components/Accordion/__tests__/hooks/useId.test.ts

@@ -1,19 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { useId } from "../../../../hooks/useId";
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-return
-jest.mock("react", () => ({
-  ...jest.requireActual("react"),
-  useId: undefined,
-}));
-
-test("useId", () => {
-  const id1 = renderHook(() => useId());
-  const id2 = renderHook(() => useId());
-  expect(id1.result.current).toBe("szh-adn-1");
-  expect(id2.result.current).toBe("szh-adn-2");
-  id1.rerender();
-  id2.rerender();
-  expect(id1.result.current).toBe("szh-adn-1");
-  expect(id2.result.current).toBe("szh-adn-2");
-});

package/src/components/Accordion/__tests__/ssr.test.ts

@@ -1,32 +0,0 @@
-/**
- * @jest-environment node
- */
-
-import { renderToString } from "react-dom/server";
-import { getAccordion } from "./utils";
-
-describe("Server rendering", () => {
-  test("defalut state", () => {
-    const htmlString = renderToString(getAccordion());
-    expect(htmlString).toContain("szh-accordion__item--status-exited");
-    expect(htmlString).toContain("item 1");
-  });
-
-  test("mountOnEnter", () => {
-    const htmlString = renderToString(
-      getAccordion({ props: { mountOnEnter: true } })
-    );
-    expect(htmlString).toContain("szh-accordion__item--status-unmounted");
-    expect(htmlString).not.toContain("szh-accordion__item--status-exited");
-    expect(htmlString).not.toContain("item 1");
-  });
-
-  test("initialEntered", () => {
-    const htmlString = renderToString(
-      getAccordion({ props: { initialEntered: true } })
-    );
-    expect(htmlString).toContain("szh-accordion__item--status-entered");
-    expect(htmlString).not.toContain("szh-accordion__item--status-exited");
-    expect(htmlString).toContain("item 1");
-  });
-});

package/src/components/Accordion/__tests__/utils.tsx

@@ -1,48 +0,0 @@
-import React, { Ref, ReactElement, StrictMode } from "react";
-import {
-  render as nonStrictRender,
-  RenderOptions,
-  RenderResult,
-} from "@testing-library/react";
-import {
-  Accordion,
-  AccordionProps,
-  AccordionItem,
-  AccordionItemProps,
-} from "..";
-
-export { nonStrictRender };
-
-export const render: (
-  ui: ReactElement,
-  options?: Omit<RenderOptions, "queries">
-) => RenderResult = (ui, options) =>
-  nonStrictRender(ui, { wrapper: StrictMode, ...options });
-
-export const getAccordion = ({
-  ref,
-  item1Ref,
-  props,
-  item1Props,
-  item2Props,
-}: {
-  ref?: Ref<HTMLDivElement>;
-  item1Ref?: Ref<HTMLDivElement>;
-  props?: AccordionProps;
-  item1Props?: AccordionItemProps;
-  item2Props?: AccordionItemProps;
-} = {}) => (
-  <Accordion {...props} ref={ref}>
-    <AccordionItem
-      {...item1Props}
-      header={item1Props?.header || "header 1"}
-      ref={item1Ref}
-    >
-      {item1Props?.children || "item 1"}
-    </AccordionItem>
-    <AccordionItem {...item2Props} header={item2Props?.header || "header 2"}>
-      {item2Props?.children || "item 2"}
-    </AccordionItem>
-    <AccordionItem header="header 3">item 3</AccordionItem>
-  </Accordion>
-);

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

@@ -1,44 +0,0 @@
-import * as React from "react";
-import { AccordionProviderOptions } from "../utils/constants";
-import { useAccordionProvider } from "../hooks/useAccordionProvider";
-import {
-  ControlledAccordion,
-  ControlledAccordionProps,
-} from "./ControlledAccordion";
-
-interface AccordionProps
-  extends AccordionProviderOptions,
-    Omit<ControlledAccordionProps, "providerValue"> {}
-
-const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  (
-    {
-      allowMultiple,
-      initialEntered,
-      mountOnEnter,
-      unmountOnExit,
-      transition,
-      transitionTimeout,
-      onStateChange,
-      ...rest
-    },
-    ref
-  ) => {
-    const providerValue = useAccordionProvider({
-      allowMultiple,
-      initialEntered,
-      mountOnEnter,
-      unmountOnExit,
-      transition,
-      transitionTimeout,
-      onStateChange,
-    });
-    return (
-      <ControlledAccordion {...rest} ref={ref} providerValue={providerValue} />
-    );
-  }
-);
-
-Accordion.displayName = "Accordion";
-
-export { Accordion, AccordionProps };

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

@@ -1,181 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,60 +0,0 @@
-/* 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;
-    }
-  }
-};
-
-// Extend HTMLAttributes to allow our custom data attribute
-interface AccordionHTMLAttributes<T> extends HTMLAttributes<T> {
-  "data-accordion"?: string;
-}
-
-const useAccordion = () => {
-  const accordionProps: AccordionHTMLAttributes<Element> = {
-    "data-accordion": "",
-    onKeyDown: (e: KeyboardEvent<Element>) =>
-      e.key === "ArrowUp"
-        ? moveFocus(true, e)
-        : e.key === "ArrowDown" && moveFocus(false, e),
-  };
-  return {
-    accordionProps,
-  };
-};
-
-export { useAccordion };

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

@@ -1,32 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,36 +0,0 @@
-/* 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 };