@sproutsocial/seeds-react-drawer 1.0.1 → 1.0.2

package/.turbo/turbo-build.log

@@ -1,21 +1,21 @@
 yarn run v1.22.22
 $ tsup --dts
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.0.2
-CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-drawer/tsup.config.ts
-CLI Target: es2022
-CLI Cleaning output folder
-CJS Build start
-ESM Build start
-CJS dist/index.js     9.40 KB
-CJS dist/index.js.map 15.31 KB
-CJS ⚡️ Build success in 212ms
-ESM dist/esm/index.js     6.90 KB
-ESM dist/esm/index.js.map 15.15 KB
-ESM ⚡️ Build success in 222ms
-DTS Build start
-DTS ⚡️ Build success in 38852ms
-DTS dist/index.d.ts  3.35 KB
-DTS dist/index.d.mts 3.35 KB
-Done in 49.21s.
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-drawer/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     9.40 KB
+CJS dist/index.js.map 15.31 KB
+CJS ⚡️ Build success in 229ms
+ESM dist/esm/index.js     6.90 KB
+ESM dist/esm/index.js.map 15.15 KB
+ESM ⚡️ Build success in 212ms
+DTS Build start
+DTS ⚡️ Build success in 45262ms
+DTS dist/index.d.ts  3.35 KB
+DTS dist/index.d.mts 3.35 KB
+Done in 54.99s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sproutsocial/seeds-react-drawer
 
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [22e1111]
+  - @sproutsocial/seeds-react-button@1.2.2
+  - @sproutsocial/seeds-react-portal@1.1.4
+  - @sproutsocial/seeds-react-text@1.3.2
+  - @sproutsocial/seeds-react-theme@3.0.1
+  - @sproutsocial/seeds-react-box@1.1.3
+  - @sproutsocial/seeds-react-icon@1.1.3
+
 ## 1.0.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-drawer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Seeds React Drawer",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,13 +18,13 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-theme": "^3.0.1",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.1",
-    "@sproutsocial/seeds-react-button": "^1.2.0",
-    "@sproutsocial/seeds-react-icon": "^1.1.1",
-    "@sproutsocial/seeds-react-text": "^1.3.0",
-    "@sproutsocial/seeds-react-portal": "^1.1.0",
+    "@sproutsocial/seeds-react-box": "^1.1.3",
+    "@sproutsocial/seeds-react-button": "^1.2.2",
+    "@sproutsocial/seeds-react-icon": "^1.1.3",
+    "@sproutsocial/seeds-react-text": "^1.3.2",
+    "@sproutsocial/seeds-react-portal": "^1.1.4",
     "@sproutsocial/seeds-motion": "^1.8.0",
     "@react-spring/web": "^9.0.0",
     "react-focus-lock": "^2.0.3"
@@ -35,7 +35,7 @@
     "@sproutsocial/eslint-config-seeds": "*",
     "react": "^18.0.0",
     "styled-components": "^5.2.3",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.4",
     "typescript": "^5.6.2",
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/__tests__/Drawer.test.tsx

@@ -3,8 +3,9 @@
 import React, { useState } from "react";
 import {
   render as testRender,
-  fireEvent,
   waitFor,
+  screen,
+  act,
 } from "@sproutsocial/seeds-react-testing-library";
 import type { TypeDrawerProps } from "../DrawerTypes";
 import Drawer from "../Drawer";
@@ -18,7 +19,9 @@ const StatefulDrawer = ({
   const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen || false);
 
   const onDrawerClose = () => {
-    setIsDrawerOpen(false);
+    act(() => {
+      setIsDrawerOpen(false);
+    });
     onClose();
   };
 
@@ -55,53 +58,59 @@ const render = ({
 }: Partial<TypeDrawerProps>) => {
   const { baseElement } = testRender(<div id="main-content" />);
   const mainContentRef = baseElement.querySelector("#main-content");
-  return testRender(
-    <div>
-      {baseElement.innerHTML}
-      <StatefulDrawer
-        isOpen={isOpen}
-        direction={direction}
-        offset={offset}
-        onClose={onClose}
-        closeButtonLabel={closeButtonLabel}
-        id={id}
-        disableCloseOnClickOutside={disableCloseOnClickOutside}
-        // @ts-ignore - We'll come back to test updating this
-        closeTargets={[mainContentRef]}
-        width={width}
-      >
-        {children}
-      </StatefulDrawer>
-    </div>
-  );
+  return {
+    ...testRender(
+      <div>
+        {baseElement.innerHTML}
+        <StatefulDrawer
+          isOpen={isOpen}
+          direction={direction}
+          offset={offset}
+          onClose={onClose}
+          closeButtonLabel={closeButtonLabel}
+          id={id}
+          disableCloseOnClickOutside={disableCloseOnClickOutside}
+          // @ts-ignore - We'll come back to test updating this
+          closeTargets={[mainContentRef]}
+          width={width}
+        >
+          {children}
+        </StatefulDrawer>
+      </div>
+    ),
+  };
 };
 
 describe("Drawer", () => {
   it("should not be in the document by default", () => {
-    const { queryByText } = render({});
-    expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+    render({});
+    expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
   });
 
   it("should render drawer", () => {
-    const { getByText } = render({
+    render({
       isOpen: true,
     });
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
+    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
   });
 
-  xit("should close drawer on header click", async () => {
-    const { queryByText, getByText, getByLabelText } = render({
+  it("should close drawer on header click", async () => {
+    const { user } = render({
       isOpen: true,
     });
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-    fireEvent.click(getByLabelText("close button"));
+
+    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
+    await act(async () => {
+      await user.click(screen.getByLabelText("close button"));
+    });
+
     await waitFor(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
     });
   });
 
-  xit("should close drawer on header click when using custom header", async () => {
-    const { queryByText, getByText, getByLabelText } = render({
+  it("should close drawer on header click when using custom header", async () => {
+    const { user } = render({
       isOpen: true,
       children: (
         <React.Fragment>
@@ -115,74 +124,86 @@ describe("Drawer", () => {
         </React.Fragment>
       ),
     });
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-    fireEvent.click(getByLabelText("close button"));
+    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
+    await act(async () => {
+      await user.click(screen.getByLabelText("close button"));
+    });
     await waitFor(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
     });
   });
 
-  xit("should close drawer on outside click", async () => {
-    const { baseElement, queryByText, getByText } = render({
+  it("should close drawer on outside click", async () => {
+    const { user, baseElement } = render({
       isOpen: true,
     });
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-    fireEvent.click(baseElement.querySelector("#main-content") as Element);
+    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
+    await act(async () => {
+      await user.click(baseElement.querySelector("#main-content") as Element);
+    });
     await waitFor(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
     });
   });
 
   it("should not close drawer on outside click when disabled", async () => {
-    const { baseElement, queryByText, getByText } = render({
+    const { user, baseElement } = render({
       isOpen: true,
       disableCloseOnClickOutside: true,
     });
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-    fireEvent.click(baseElement.querySelector("#main-content") as Element);
+    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
+    await user.click(baseElement.querySelector("#main-content") as Element);
     await waitFor(() => {
       // eslint-disable-next-line testing-library/prefer-presence-queries
-      expect(queryByText(/drawer content/i)).toBeInTheDocument();
+      expect(screen.queryByText(/drawer content/i)).toBeInTheDocument();
     });
   });
 
   it("should close drawer on esc key", async () => {
-    const { baseElement, queryByText, getByText } = render({
+    const { user, baseElement } = render({
       isOpen: true,
       disableCloseOnClickOutside: true,
     });
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-    fireEvent.keyDown(baseElement, {
-      key: "Escape",
+    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
+    await act(async () => {
+      await user.keyboard("{Escape}");
     });
     await waitFor(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
     });
   });
+
   it("should have dialog role", () => {
-    const { getByRole } = render({
+    render({
       isOpen: true,
     });
-    expect(getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
   });
+
   it("should have focus on drawer when opened", () => {
-    const { getByLabelText } = render({
+    render({
       isOpen: true,
     });
-    expect(getByLabelText("close button")).toHaveFocus();
+    expect(screen.getByLabelText("close button")).toHaveFocus();
   });
+
   it("should have an h2 with id", () => {
-    const { getByRole } = render({
+    render({
       isOpen: true,
     });
-    expect(getByRole("heading")).toHaveAttribute("id", "drawer-1-header");
+    expect(screen.getByRole("heading")).toHaveAttribute(
+      "id",
+      "drawer-1-header"
+    );
   });
+
   it("should be 600px wide by default", () => {
-    const { getByRole } = render({ isOpen: true });
-    expect(getByRole("dialog")).toHaveStyle("width: 600px");
+    render({ isOpen: true });
+    expect(screen.getByRole("dialog")).toHaveStyle("width: 600px");
   });
+
   it("should customize the drawer width when provided", () => {
-    const { getByRole } = render({ isOpen: true, width: 400 });
-    expect(getByRole("dialog")).toHaveStyle("width: 400px");
+    render({ isOpen: true, width: 400 });
+    expect(screen.getByRole("dialog")).toHaveStyle("width: 400px");
   });
 });

package/tsconfig.json

@@ -5,5 +5,11 @@
     "module": "esnext"
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "coverage"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "coverage",
+    "**/*.stories.tsx",
+    "**/*.stories.ts"
+  ]
 }