feat: accordion types improvements

@types-tests/types.test-d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+import { expectError, expectType } from "tsd";
+import {
+  MultiOverloadReturn,
+  SingleOverloadReturn,
+} from "../src/accordion/types";
+import { useAccordionState } from "../src/accordion/AccordionState";
+
+const multi = useAccordionState({ allowMultiple: true });
+expectType<(string | null)[] | undefined>(multi.selectedIds);
+expectType<React.Dispatch<React.SetStateAction<(string | null)[]>>>(
+  multi.setSelectedIds,
+);
+expectType<MultiOverloadReturn>(multi);
+
+const single = useAccordionState({ allowMultiple: false });
+expectType<string | null | undefined>(single.selectedId);
+expectType<React.Dispatch<React.SetStateAction<string | null>>>(
+  single.setSelectedId,
+);
+expectType<SingleOverloadReturn>(single);
+
+expectType<MultiOverloadReturn>(
+  useAccordionState({
+    allowMultiple: true,
+    defaultSelectedIds: [],
+  }),
+);
+
+expectError(
+  useAccordionState({
+    allowMultiple: true,
+    defaultSelectedId: "",
+  }),
+);
+
+expectError(
+  useAccordionState({
+    allowMultiple: false,
+    defaultSelectedIds: [],
+  }),
+);
+
+expectType<SingleOverloadReturn>(
+  useAccordionState({
+    allowMultiple: false,
+    defaultSelectedId: "",
+  }),
+);

package.json

@@ -43,7 +43,8 @@
     "release:tags": "git push --follow-tags origin master",
     "storybook": "yarn generatejs && start-storybook -p 6006 --no-dll",
     "storybook-build": "yarn generatejs && build-storybook --no-dll",
-    "test": "jest --config ./jest.config.ts --no-cache"
+    "test": "jest --config ./jest.config.ts --no-cache",
+    "tsd": "tsd"
   },
   "dependencies": {
     "@chakra-ui/counter": "1.0.0-rc.7",
@@ -137,6 +138,7 @@
     "ts-jest": "26.4.3",
     "ts-morph": "8.1.2",
     "ts-node": "^9.0.0",
+    "tsd": "^0.13.1",
     "typescript": "4.0.5"
   },
   "peerDependencies": {
@@ -145,5 +147,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "tsd": {
+    "directory": "@types-tests"
   }
 }

src/accordion/AccordionPanel.ts

@@ -10,21 +10,17 @@ import * as React from "react";
 import { useForkRef } from "reakit-utils";
 import { createHook, createComponent } from "reakit-system";
 
+import { SelectedIdPair } from "./types";
 import { ACCORDION_PANEL_KEYS } from "./__keys";
 import { AccordionStateReturn } from "./AccordionState";
 
 export type AccordionPanelOptions = DisclosureContentOptions &
   unstable_IdOptions &
   Pick<
     AccordionStateReturn,
-    | "selectedId"
-    | "selectedIds"
-    | "registerPanel"
-    | "unregisterPanel"
-    | "panels"
-    | "items"
-    | "allowMultiple"
-  > & {
+    "registerPanel" | "unregisterPanel" | "panels" | "items" | "allowMultiple"
+  > &
+  SelectedIdPair & {
     /**
      * Accordion's id
      */

src/accordion/AccordionState.ts

@@ -1,117 +1,73 @@
-import {
-  useCompositeState,
-  CompositeState,
-  CompositeActions,
-  CompositeInitialState,
-} from "reakit";
 import * as React from "react";
+import { useCompositeState } from "reakit";
 import { useControllableState } from "@chakra-ui/hooks";
+import {
+  AccordionState,
+  AccordionActions,
+  AccordionReturns,
+  MultiOverloadReturn,
+  SingleOverloadReturn,
+  AccordionInitialState,
+  AccordionInitialStateMulti,
+  AccordionInitialStateSingle,
+  SelectedIdPair,
+} from "./types";
+
+export type AccordionStateReturn = AccordionActions &
+  AccordionState &
+  AccordionReturns &
+  SelectedIdPair;
 
-export type AccordionState = CompositeState & {
-  /**
-   * The current selected(controlled) accordion's `id`.
-   */
-  selectedId: string | null;
-  /**
-   * The current selected(controlled) accordion's `id`.
-   */
-  selectedIds: (string | null)[];
-  /**
-   * Whether the accodion selection should be manual.
-   *
-   * @default true
-   */
-  manual: boolean;
-  /**
-   * Allow to open multiple accordion items
-   *
-   * @default false
-   */
-  allowMultiple: boolean;
-  /**
-   * Allow to toggle accordion items
-   *
-   * @default false
-   */
-  allowToggle: boolean;
-  /**
-   * Lists all the panels.
-   */
-  panels: CompositeState["items"];
-};
-
-export type AccordionActions = CompositeActions & {
-  /**
-   * Moves into and selects an accordion by its `id`.
-   */
-  select: CompositeActions["move"];
-  /**
-   * Moves into and unSelects an accordion by its `id` if it's already selected.
-   */
-  unSelect: CompositeActions["move"];
-  /**
-   * Sets `selectedId`.
-   */
-  setSelectedId: React.Dispatch<React.SetStateAction<string | null>>;
-  /**
-   * Sets `selectedIds`.
-   */
-  setSelectedIds: React.Dispatch<React.SetStateAction<(string | null)[]>>;
-  /**
-   * Registers a accordion panel.
-   */
-  registerPanel: CompositeActions["registerItem"];
-  /**
-   * Unregisters a accordion panel.
-   */
-  unregisterPanel: CompositeActions["unregisterItem"];
-};
-
-export type AccordionInitialState = CompositeInitialState &
-  Pick<
-    Partial<AccordionState>,
-    "selectedId" | "selectedIds" | "manual" | "allowMultiple" | "allowToggle"
-  > & {
-    /**
-     * Set default selected id(uncontrolled)
-     *
-     * @default null
-     */
-    defaultSelectedId?: string | null;
-    /**
-     * Handler that is called when the selectedId changes.
-     */
-    onSelectedIdChange?: (value: string | null) => void;
-    /**
-     * Set default selected ids(uncontrolled)
-     *
-     * @default []
-     */
-    defaultSelectedIds?: (string | null)[];
-    /**
-     * Handler that is called when the selectedIds changes.
-     */
-    onSelectedIdsChange?: (value: (string | null)[]) => void;
-  };
+export function useAccordionState(
+  props: Partial<AccordionInitialStateSingle>,
+): SingleOverloadReturn;
+
+export function useAccordionState(
+  props: Partial<AccordionInitialStateMulti>,
+): MultiOverloadReturn;
+
+export function useAccordionState(
+  props: Partial<AccordionInitialState>,
+): SingleOverloadReturn;
 
-export type AccordionStateReturn = AccordionState & AccordionActions;
+export function useAccordionState(
+  props: Partial<AccordionInitialState>,
+): MultiOverloadReturn;
 
 export function useAccordionState(
-  props: AccordionInitialState = {},
+  props: Partial<AccordionInitialState> = {},
 ): AccordionStateReturn {
   const {
-    selectedId: selectedIdProp,
-    defaultSelectedId = null,
-    onSelectedIdChange,
-    selectedIds: selectedIdsProp,
-    defaultSelectedIds = [],
-    onSelectedIdsChange,
-    allowMultiple = false,
-    allowToggle: allowToggleProp = false,
     manual = true,
+    allowToggle: allowToggleProp = false,
+    allowMultiple,
     ...rest
   } = props;
-  const allowToggle = allowMultiple ? allowMultiple : allowToggleProp;
+
+  const allowToggle = props.allowMultiple
+    ? props.allowMultiple
+    : allowToggleProp;
+
+  let selectedIdProp;
+  let defaultSelectedId;
+  let onSelectedIdChange;
+  if (props.allowMultiple === false || !props.allowMultiple) {
+    // @ts-ignore
+    selectedIdProp = props.selectedId;
+    // @ts-ignore
+    defaultSelectedId = props.defaultSelectedId || null;
+    // @ts-ignore
+    onSelectedIdChange = props.onSelectedIdChange;
+  }
+
+  let selectedIdsProp;
+  let defaultSelectedIds;
+  let onSelectedIdsChange;
+  if (props.allowMultiple === true) {
+    selectedIdsProp = props.selectedIds;
+    defaultSelectedIds = props.defaultSelectedIds || [];
+    onSelectedIdsChange = props.onSelectedIdsChange;
+  }
 
   // Single toggle accordion State
   const [selectedId, setSelectedId] = useControllableState({
@@ -138,7 +94,7 @@ export function useAccordionState(
     (id: string | null) => {
       composite.move(id);
 
-      if (!allowMultiple) {
+      if (!props.allowMultiple) {
         if (allowToggle && id === selectedId) {
           setSelectedId(null);
           return;
@@ -153,12 +109,12 @@ export function useAccordionState(
     },
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [allowMultiple, allowToggle, composite.move, selectedId],
+    [props.allowMultiple, allowToggle, composite.move, selectedId],
   );
 
   const unSelect = React.useCallback(
     (id: string | null) => {
-      if (!allowMultiple && id === null) return;
+      if (!props.allowMultiple && id === null) return;
 
       composite.move(id);
       setSelectedIds(prevIds => prevIds?.filter(pId => pId !== id));
@@ -170,19 +126,28 @@ export function useAccordionState(
 
   const panels = useCompositeState();
 
-  return {
+  const common = {
     manual,
-    allowMultiple,
     allowToggle,
-    selectedId,
-    setSelectedId,
-    selectedIds,
-    setSelectedIds,
     select,
     unSelect,
     panels: panels.items,
     registerPanel: panels.registerItem,
     unregisterPanel: panels.unregisterItem,
     ...composite,
   };
+
+  return props.allowMultiple === true
+    ? {
+        allowMultiple: true,
+        selectedIds,
+        setSelectedIds,
+        ...common,
+      }
+    : {
+        allowMultiple: false,
+        selectedId,
+        setSelectedId,
+        ...common,
+      };
 }

src/accordion/AccordionTrigger.ts

@@ -11,6 +11,7 @@ import { useLiveRef } from "reakit-utils";
 import { createHook, createComponent } from "reakit-system";
 
 import { ariaAttr } from "../utils";
+import { SelectedIdPair } from "./types";
 import { ACCORDION_TRIGGER_KEYS } from "./__keys";
 import { AccordionStateReturn } from "./AccordionState";
 
@@ -19,14 +20,9 @@ export type AccordionTriggerOptions = ButtonOptions &
   Pick<Partial<AccordionStateReturn>, "manual"> &
   Pick<
     AccordionStateReturn,
-    | "panels"
-    | "selectedId"
-    | "selectedIds"
-    | "select"
-    | "unSelect"
-    | "allowMultiple"
-    | "allowToggle"
-  >;
+    "panels" | "select" | "unSelect" | "allowMultiple" | "allowToggle"
+  > &
+  SelectedIdPair;
 
 export type AccordionTriggerHTMLProps = ButtonHTMLProps &
   CompositeItemHTMLProps;