styleless-ui · mimshins · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/README.md b/README.md
@@ -1,8 +1,6 @@
 <div align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/styleless-ui/react-styleless-ui/4c10f2480719ef23e7af118b54f6861164603888/readme-light-icon.svg">
-    <img src="https://raw.githubusercontent.com/styleless-ui/react-styleless-ui/4c10f2480719ef23e7af118b54f6861164603888/readme-dark-icon.svg" height="128">
-  </picture>
+  <img src="https://raw.githubusercontent.com/styleless-ui/react-styleless-ui/4c10f2480719ef23e7af118b54f6861164603888/readme-dark-icon.svg#gh-light-mode-only" height="128">
+  <img src="https://raw.githubusercontent.com/styleless-ui/react-styleless-ui/4c10f2480719ef23e7af118b54f6861164603888/readme-light-icon.svg#gh-dark-mode-only" height="128">
   <h1 align="center"><samp>[ ui | styleless/react ]</samp></h1>
 </div>
 

diff --git a/jest.config.js b/jest.config.js
@@ -2,12 +2,16 @@ import nextJest from "next/jest.js";
 
 const createJestConfig = nextJest({ dir: "./" });
 
+/**
+ * @type {import("jest").Config}
+ */
 const jestConfig = {
   verbose: true,
   setupFilesAfterEnv: ["<rootDir>/tests/jest.setup.ts"],
   testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
   testRegex: ".*\\.test\\.tsx?$",
   testEnvironment: "jest-environment-jsdom",
+  preset: "ts-jest",
 };
 
 export default createJestConfig(jestConfig);
diff --git a/lib/Popper/utils.ts b/lib/Popper/utils.ts
@@ -68,9 +68,9 @@ const getAlignmentSidesFromPlacement = (
     side.replace(
       /left|right|bottom|top/g,
       matched =>
-        ({ left: "right", right: "left", top: "bottom", bottom: "top" }[
+        ({ left: "right", right: "left", top: "bottom", bottom: "top" })[
           matched
-        ] ?? ""),
+        ] ?? "",
     ) as Side;
 
   let mainSide: Side =
@@ -79,8 +79,8 @@ const getAlignmentSidesFromPlacement = (
         ? "right"
         : "left"
       : alignment === "start"
-      ? "bottom"
-      : "top";
+        ? "bottom"
+        : "top";
 
   if (elementRects.anchorRect[length] > elementRects.popperRect[length])
     mainSide = _getOppositeSide(mainSide);
@@ -222,16 +222,22 @@ const getClippingRect = (element: Element): Rect => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const firstClippingAncestor = clippingAncestors[0]!;
 
-  const clippingRect = clippingAncestors.reduce((result, clippingAncestor) => {
-    const rect = _getClientRectFromClippingAncestor(element, clippingAncestor);
-
-    result.top = Math.max(rect.top, result.top);
-    result.right = Math.min(rect.right, result.right);
-    result.bottom = Math.min(rect.bottom, result.bottom);
-    result.left = Math.max(rect.left, result.left);
-
-    return result;
-  }, _getClientRectFromClippingAncestor(element, firstClippingAncestor));
+  const clippingRect = clippingAncestors.reduce(
+    (result, clippingAncestor) => {
+      const rect = _getClientRectFromClippingAncestor(
+        element,
+        clippingAncestor,
+      );
+
+      result.top = Math.max(rect.top, result.top);
+      result.right = Math.min(rect.right, result.right);
+      result.bottom = Math.min(rect.bottom, result.bottom);
+      result.left = Math.max(rect.left, result.left);
+
+      return result;
+    },
+    _getClientRectFromClippingAncestor(element, firstClippingAncestor),
+  );
 
   return {
     width: clippingRect.right - clippingRect.left,
@@ -554,7 +560,7 @@ export const suppressViewportOverflow = (
   const _getOppositeAlignment = (placement: Placement) =>
     placement.replace(
       /start|end/g,
-      matched => ({ start: "end", end: "start" }[matched] ?? ""),
+      matched => ({ start: "end", end: "start" })[matched] ?? "",
     ) as Placement;
 
   const _onlySides = (placement: Placement) =>

diff --git a/lib/Select/components/Controller/Controller.tsx b/lib/Select/components/Controller/Controller.tsx
@@ -215,8 +215,8 @@ const ControllerBase = (props: Props, ref: React.Ref<HTMLInputElement>) => {
       typeof overrideTabIndex !== "undefined"
         ? overrideTabIndex
         : disabled
-        ? -1
-        : 0,
+          ? -1
+          : 0,
     onClick: comboboxBase.handleClick,
     onBlur: comboboxBase.handleBlur,
     onFocus: comboboxBase.handleFocus,

diff --git a/lib/Select/components/Trigger.tsx b/lib/Select/components/Trigger.tsx
@@ -87,13 +87,15 @@ const TriggerBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
 
     if (!node) return;
 
-    node
-      .querySelectorAll<HTMLButtonElement>(
-        `:is([type='button'], a[href], button):not([data-slot='${ControllerRootSlot}'])`,
-      )
-      .forEach(el => {
-        el.tabIndex = -1;
-      });
+    const querySelector = [
+      `[type='button']:not([data-slot='${ControllerRootSlot}'])`,
+      `a[href]:not([data-slot='${ControllerRootSlot}'])`,
+      `button:not([data-slot='${ControllerRootSlot}'])`,
+    ].join(", ");
+
+    node.querySelectorAll<HTMLButtonElement>(querySelector).forEach(el => {
+      el.tabIndex = -1;
+    });
   };
 
   return (

diff --git a/lib/Select/utils.ts b/lib/Select/utils.ts
@@ -26,38 +26,43 @@ export const noValueSelected = (value: string | string[] | undefined) =>
 export const getOptions = (
   childArray: Array<Exclude<React.ReactNode, boolean | null | undefined>>,
 ): Array<PickAsMandatory<OptionProps, "disabled" | "value" | "valueLabel">> => {
-  return childArray.reduce((result, child) => {
-    if (!React.isValidElement(child)) return result;
-
-    if (
-      child.type === EmptyStatement ||
-      child.type === Controller ||
-      child.type === Trigger
-    ) {
-      return result;
-    }
-
-    if (child.type === Option) {
-      const { disabled, value, valueLabel } = (
-        child as React.ReactElement<OptionProps>
-      ).props;
-
-      result.push({ disabled: disabled ?? false, value, valueLabel });
-
-      return result;
-    }
-
-    if (!("children" in child.props)) return result;
-
-    const options = getOptions(
-      React.Children.toArray(
-        (child as React.ReactElement<{ children: React.ReactNode }>).props
-          .children,
-      ),
-    );
-
-    return [...result, ...options];
-  }, [] as Array<PickAsMandatory<OptionProps, "disabled" | "value" | "valueLabel">>);
+  return childArray.reduce(
+    (result, child) => {
+      if (!React.isValidElement(child)) return result;
+
+      if (
+        child.type === EmptyStatement ||
+        child.type === Controller ||
+        child.type === Trigger
+      ) {
+        return result;
+      }
+
+      if (child.type === Option) {
+        const { disabled, value, valueLabel } = (
+          child as React.ReactElement<OptionProps>
+        ).props;
+
+        result.push({ disabled: disabled ?? false, value, valueLabel });
+
+        return result;
+      }
+
+      if (!("children" in child.props)) return result;
+
+      const options = getOptions(
+        React.Children.toArray(
+          (child as React.ReactElement<{ children: React.ReactNode }>).props
+            .children,
+        ),
+      );
+
+      return [...result, ...options];
+    },
+    [] as Array<
+      PickAsMandatory<OptionProps, "disabled" | "value" | "valueLabel">
+    >,
+  );
 };
 
 type Registry<Key extends string> = Map<Key, string>;

diff --git a/lib/Toast/components/Action.tsx b/lib/Toast/components/Action.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import Button from "../../Button";
-import type { PolymorphicProps } from "../../types";
+import type { PolymorphicComponent, PolymorphicProps } from "../../types";
 import { componentWithForwardedRef } from "../../utils";
 import { ActionRoot as ActionRootSlot } from "../slots";
 
@@ -28,13 +28,7 @@ const ActionBase = <
   );
 };
 
-type PolymorphicComponent = <
-  E extends React.ElementType = typeof Button<"button">,
->(
-  props: Props<E>,
-) => JSX.Element | null;
-
-const Action: PolymorphicComponent = componentWithForwardedRef(
+const Action: PolymorphicComponent<"button"> = componentWithForwardedRef(
   ActionBase,
   "Toast.Action",
 );

diff --git a/lib/ToggleGroup/ToggleGroup.tsx b/lib/ToggleGroup/ToggleGroup.tsx
@@ -130,8 +130,8 @@ const ToggleGroupBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
         ? (value as string[]).filter(v => v !== toggleValue)
         : (value as string[]).concat(toggleValue)
       : newActiveState
-      ? toggleValue
-      : "";
+        ? toggleValue
+        : "";
 
     setValue(newValue);
     // @ts-expect-error It's fine!

diff --git a/lib/TreeView/TreeView.tsx b/lib/TreeView/TreeView.tsx
@@ -521,8 +521,8 @@ const TreeViewBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     selectMode: isMultiSelect
       ? "multi-select"
       : isSingleSelect
-      ? "single-select"
-      : undefined,
+        ? "single-select"
+        : undefined,
   };
 
   const classNameProps: ClassNameProps = renderProps;

diff --git a/lib/types.ts b/lib/types.ts
@@ -99,8 +99,8 @@ export type VirtualElement = { getBoundingClientRect(): BoundingClientRect };
 export type ComponentProps<E> = E extends (props: infer P) => JSX.Element | null
   ? P
   : E extends React.ElementType
-  ? React.ComponentProps<E>
-  : EmptyObjectNotation;
+    ? React.ComponentProps<E>
+    : EmptyObjectNotation;
 
 export type EnsureCommonProps<E, P> = Overwrite<
   P,
@@ -130,10 +130,8 @@ export interface GenericComponent<
   RootNode extends React.ElementType,
   P = EmptyObjectNotation,
 > {
-  <E extends React.ElementType>(
-    props: PolymorphicProps<E, P>,
-  ): JSX.Element | null;
-  (props: MergeElementProps<RootNode, P>): JSX.Element | null;
+  <E extends React.ElementType>(props: PolymorphicProps<E, P>): React.ReactNode;
+  (props: MergeElementProps<RootNode, P>): React.ReactNode;
 }
 
 export interface PolymorphicComponent<
@@ -142,7 +140,7 @@ export interface PolymorphicComponent<
 > {
   <E extends React.ElementType = TDefaultElementType>(
     props: PolymorphicProps<E, EnsureCommonProps<E, P>>,
-  ): JSX.Element | null;
+  ): React.ReactNode;
 }
 
 export type BivarianceHack<TFunction extends AnyFunction> = {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@styleless-ui/react",
-  "version": "1.0.0-canary.16",
+  "version": "1.0.0-rc.0",
   "description": "Completely unstyled, headless and accessible React UI components.",
   "repository": "git@github.com:styleless-ui/react-styleless-ui.git",
   "author": "mimshins <mostafa.sh.coderino@gmail.com>",
@@ -22,55 +22,52 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "tsc --project tsconfig.lint.json && eslint \"**/*.{ts,tsx}\" --config .eslintrc",
-    "prettify": "prettier --write \"**/*.{ts,tsx,js,jsx,css,scss,json}\"",
     "clear": "rimraf dist",
-    "prebuild": "npm-run-all clear prettify lint test",
-    "build": "npm-run-all build:cjs build:copy-typings:cjs build:esm build:copy-typings:esm build:minify build:packages build:npm-files",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:copy-typings:cjs": "cp lib/typings.d.ts dist/typings.d.ts",
-    "build:copy-typings:esm": "cp lib/typings.d.ts dist/esm/typings.d.ts",
-    "build:packages": "ts-node-esm -P tsconfig.json scripts/build-packages.ts",
-    "build:npm-files": "ts-node-esm -P tsconfig.json scripts/build-npm-files.ts",
-    "build:minify": "ts-node-esm -P tsconfig.json scripts/minify.ts"
+    "prebuild": "npm-run-all clear lint test",
+    "build": "npm-run-all build:transpile build:minify build:package",
+    "build:transpile": "npm-run-all build:transpile:cjs build:transpile:esm",
+    "build:transpile:cjs": "tsc -p tsconfig.cjs.json",
+    "build:transpile:esm": "tsc -p tsconfig.esm.json",
+    "build:package": "tsx scripts/build-package.ts",
+    "build:minify": "tsx scripts/minify-package.ts"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.16.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.3.0",
-    "@types/jest": "^28.1.6",
-    "@types/node": "^18.0.5",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-is": "^17.0.3",
-    "@types/rimraf": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
-    "classnames": "^2.3.1",
-    "eslint": "^8.20.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jest-dom": "^4.0.2",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-is": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "classnames": "^2.5.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest-dom": "^5.2.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.5.1",
-    "fast-glob": "^3.2.11",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "next": "^14.0.4",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "fast-glob": "^3.3.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "next": "^14.1.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "terser": "^5.14.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.0.4"
+    "rimraf": "^5.0.5",
+    "terser": "^5.29.2",
+    "ts-jest": "^29.1.2",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.3"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -89,7 +86,7 @@
     "@utilityjs/use-previous-value": "^1.0.1",
     "@utilityjs/use-register-node-ref": "^1.1.0",
     "@utilityjs/use-scroll-guard": "^1.0.0",
-    "dom-accessibility-api": "^0.5.14",
+    "dom-accessibility-api": "^0.6.3",
     "react-is": "^18.2.0"
   }
 }