@seed-design/react 1.2.1 → 1.2.3

package/lib/components/Dialog/Dialog.cjs

@@ -3,11 +3,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
 const reactDialog = require('@seed-design/react-dialog');
 const reactPrimitive = require('@seed-design/react-primitive');
 const dialog = require('@seed-design/css/recipes/dialog');
-const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
@@ -42,10 +40,7 @@ const DialogDescription = withContext(
   "description"
 );
 const DialogFooter = withContext(reactPrimitive.Primitive.div, "footer");
-const DialogAction = React.forwardRef((props, ref) => {
-  const api = reactDialog.useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.button, { ...props, ref, onClick: () => api.setOpen(false) });
-});
+const DialogAction = reactDialog.Dialog.CloseButton;
 
 exports.DialogAction = DialogAction;
 exports.DialogBackdrop = DialogBackdrop;

package/lib/components/Dialog/Dialog.d.ts

@@ -39,5 +39,5 @@ export interface DialogFooterProps extends PrimitiveProps, React.HTMLAttributes<
 export declare const DialogFooter: ForwardRefExoticComponent<DialogFooterProps & RefAttributes<HTMLDivElement>>;
 export interface DialogActionProps extends PrimitiveProps, React.HTMLAttributes<HTMLButtonElement> {
 }
-export declare const DialogAction: ForwardRefExoticComponent<DialogActionProps & RefAttributes<HTMLButtonElement>>;
+export declare const DialogAction: ForwardRefExoticComponent<DialogPrimitive.CloseButtonProps & RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Dialog.d.ts.map

package/lib/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAUlF,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,eAAe,CAAC,SAAS;IACpF;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,4DAKrB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,4HAA0B,CAAC;AAIrD,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,eAAe;CAAG;AAEjF,eAAO,MAAM,gBAAgB,kHAG5B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,eAAe,CAAC,aAAa;CAAG;AAE7E,eAAO,MAAM,cAAc,gHAG1B,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAOpG,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,iHAGvB,CAAC;AAOF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,yHAG7B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAIpG,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,YAAY,iHAGvB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AASlF,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,eAAe,CAAC,SAAS;IACpF;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,4DAKrB,CAAC;AAIH,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,4HAA0B,CAAC;AAIrD,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,eAAe;CAAG;AAEjF,eAAO,MAAM,gBAAgB,kHAG5B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,eAAe,CAAC,aAAa;CAAG;AAE7E,eAAO,MAAM,cAAc,gHAG1B,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAOpG,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,iHAGvB,CAAC;AAOF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,yHAG7B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElG,eAAO,MAAM,YAAY,8GAA0E,CAAC;AAIpG,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,YAAY,gIAA8B,CAAC"}

package/lib/components/Dialog/Dialog.js

@@ -1,9 +1,7 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
 import { Dialog, useDialogContext } from '@seed-design/react-dialog';
 import { Primitive } from '@seed-design/react-primitive';
 import { dialog } from '@seed-design/css/recipes/dialog';
-import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
@@ -38,9 +36,6 @@ const DialogDescription = withContext(
   "description"
 );
 const DialogFooter = withContext(Primitive.div, "footer");
-const DialogAction = forwardRef((props, ref) => {
-  const api = useDialogContext();
-  return /* @__PURE__ */ jsx(Primitive.button, { ...props, ref, onClick: () => api.setOpen(false) });
-});
+const DialogAction = Dialog.CloseButton;
 
 export { DialogAction, DialogBackdrop, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger };

package/lib/components/TextField/TextField.test.d.ts

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=TextField.test.d.ts.map

package/lib/components/TextField/TextField.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}
+{"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.test.tsx"],"names":[],"mappings":""}

package/lib/components/TextField/useTextFieldWithGraphemes.test.d.ts

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=useTextFieldWithGraphemes.test.d.ts.map

package/lib/components/TextField/useTextFieldWithGraphemes.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextFieldWithGraphemes.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}
+{"version":3,"file":"useTextFieldWithGraphemes.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -44,8 +44,8 @@
     "@seed-design/react-avatar": "1.0.0",
     "@seed-design/react-checkbox": "1.0.1",
     "@seed-design/react-collapsible": "0.1.0",
-    "@seed-design/react-dialog": "1.0.1",
-    "@seed-design/react-drawer": "1.0.6",
+    "@seed-design/react-dialog": "1.0.2",
+    "@seed-design/react-drawer": "1.0.8",
     "@seed-design/react-field": "1.0.1",
     "@seed-design/react-image": "0.1.0",
     "@seed-design/react-fieldset": "0.1.0",
@@ -58,7 +58,7 @@
     "@seed-design/react-radio-group": "1.1.0",
     "@seed-design/react-segmented-control": "1.0.1",
     "@seed-design/react-slider": "1.0.1",
-    "@seed-design/react-snackbar": "1.0.0",
+    "@seed-design/react-snackbar": "1.0.1",
     "@seed-design/react-switch": "1.0.1",
     "@seed-design/react-tabs": "1.0.2",
     "@seed-design/react-text-field": "1.1.1",

package/src/components/Dialog/Dialog.tsx

@@ -1,7 +1,6 @@
 import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { dialog, type DialogVariantProps } from "@seed-design/css/recipes/dialog";
-import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
@@ -103,7 +102,4 @@ export interface DialogActionProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
-export const DialogAction = forwardRef<HTMLButtonElement, DialogActionProps>((props, ref) => {
-  const api = useDialogContext();
-  return <Primitive.button {...props} ref={ref} onClick={() => api.setOpen(false)} />;
-});
+export const DialogAction = DialogPrimitive.CloseButton;

package/src/components/TextField/TextField.test.tsx

@@ -1,7 +1,6 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, mock } from "bun:test";
 import type { ReactElement } from "react";
 import React from "react";
 
@@ -16,8 +15,6 @@ import {
   TextFieldSuffixText,
 } from "./TextField";
 
-afterEach(cleanup);
-
 function setUp(jsx: ReactElement) {
   return {
     user: userEvent.setup(),
@@ -26,17 +23,12 @@ function setUp(jsx: ReactElement) {
 }
 
 describe("TextField", () => {
-  global.CSS = {
-    // @ts-expect-error
-    supports: (_k, _v) => true,
-  };
-
   describe("props merging", () => {
     describe("TextFieldInput", () => {
       it("should merge props from TextFieldRoot", () => {
         const { getByRole } = setUp(
           <TextFieldRoot defaultValue="initial">
-            <TextFieldInput placeholder="Placeholder" />
+            <TextFieldInput placeholder="Placeholder" aria-label="Test input" />
           </TextFieldRoot>,
         );
 
@@ -49,7 +41,7 @@ describe("TextField", () => {
         const { getByRole } = setUp(
           <Field.Root required invalid disabled name="test-field">
             <TextFieldRoot>
-              <TextFieldInput />
+              <TextFieldInput aria-label="Test input" />
             </TextFieldRoot>
           </Field.Root>,
         );
@@ -65,7 +57,7 @@ describe("TextField", () => {
         const { getByRole } = setUp(
           <Field.Root name="field-name">
             <TextFieldRoot>
-              <TextFieldInput name="direct-name" />
+              <TextFieldInput name="direct-name" aria-label="Test input" />
             </TextFieldRoot>
           </Field.Root>,
         );
@@ -78,7 +70,7 @@ describe("TextField", () => {
         const { getByRole } = setUp(
           <Field.Root disabled readOnly invalid>
             <TextFieldRoot>
-              <TextFieldInput data-custom="value" />
+              <TextFieldInput data-custom="value" aria-label="Test input" />
             </TextFieldRoot>
           </Field.Root>,
         );
@@ -91,10 +83,10 @@ describe("TextField", () => {
       });
 
       it("should handle uncontrolled modes", async () => {
-        const handleChange = vi.fn();
+        const handleChange = mock(() => {});
         const { getByRole, user } = setUp(
           <TextFieldRoot onValueChange={handleChange}>
-            <TextFieldInput />
+            <TextFieldInput aria-label="Test input" />
           </TextFieldRoot>,
         );
 
@@ -110,7 +102,7 @@ describe("TextField", () => {
 
           return (
             <TextFieldRoot value={value} onValueChange={setValue}>
-              <TextFieldInput />
+              <TextFieldInput aria-label="Test input" />
             </TextFieldRoot>
           );
         }
@@ -128,7 +120,7 @@ describe("TextField", () => {
       it("should merge props from TextFieldRoot", () => {
         const { getByRole } = setUp(
           <TextFieldRoot defaultValue="initial">
-            <TextFieldTextarea placeholder="Placeholder" />
+            <TextFieldTextarea placeholder="Placeholder" aria-label="Test textarea" />
           </TextFieldRoot>,
         );
 
@@ -141,7 +133,7 @@ describe("TextField", () => {
         const { getByRole } = setUp(
           <Field.Root required invalid disabled name="test-field">
             <TextFieldRoot>
-              <TextFieldTextarea />
+              <TextFieldTextarea aria-label="Test textarea" />
             </TextFieldRoot>
           </Field.Root>,
         );
@@ -157,7 +149,7 @@ describe("TextField", () => {
         const { getByRole } = setUp(
           <Field.Root disabled name="field-name">
             <TextFieldRoot>
-              <TextFieldTextarea disabled={false} name="direct-name" />
+              <TextFieldTextarea disabled={false} name="direct-name" aria-label="Test textarea" />
             </TextFieldRoot>
           </Field.Root>,
         );
@@ -171,7 +163,7 @@ describe("TextField", () => {
         const { getByRole } = setUp(
           <Field.Root disabled readOnly invalid>
             <TextFieldRoot>
-              <TextFieldTextarea data-custom="value" />
+              <TextFieldTextarea data-custom="value" aria-label="Test textarea" />
             </TextFieldRoot>
           </Field.Root>,
         );
@@ -184,10 +176,10 @@ describe("TextField", () => {
       });
 
       it("should handle uncontrolled modes", async () => {
-        const handleChange = vi.fn();
+        const handleChange = mock(() => {});
         const { getByRole, user } = setUp(
           <TextFieldRoot onValueChange={handleChange}>
-            <TextFieldTextarea />
+            <TextFieldTextarea aria-label="Test textarea" />
           </TextFieldRoot>,
         );
 
@@ -203,7 +195,7 @@ describe("TextField", () => {
 
           return (
             <TextFieldRoot value={value} onValueChange={setValue}>
-              <TextFieldTextarea />
+              <TextFieldTextarea aria-label="Test textarea" />
             </TextFieldRoot>
           );
         }
@@ -223,7 +215,7 @@ describe("TextField", () => {
           <TextFieldRoot disabled invalid readOnly>
             <TextFieldPrefixText>Prefix</TextFieldPrefixText>
             <TextFieldPrefixIcon svg={<svg data-testid="prefix-icon" />} />
-            <TextFieldInput />
+            <TextFieldInput aria-label="Test input" />
             <TextFieldSuffixIcon svg={<svg data-testid="suffix-icon" />} />
             <TextFieldSuffixText>Suffix</TextFieldSuffixText>
           </TextFieldRoot>,

package/src/components/TextField/useTextFieldWithGraphemes.test.tsx

@@ -1,7 +1,6 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, mock } from "bun:test";
 import type { ReactElement } from "react";
 import React from "react";
 
@@ -15,8 +14,6 @@ import {
 } from "../Field/Field";
 import { useTextFieldWithGraphemes } from "./useTextFieldWithGraphemes";
 
-afterEach(cleanup);
-
 function setUp(jsx: ReactElement) {
   return {
     user: userEvent.setup(),
@@ -55,11 +52,6 @@ const TextFieldWithGraphemes = (props: TextFieldWithGraphemesProps) => {
 };
 
 describe("useTextFieldWithGraphemes", () => {
-  global.CSS = {
-    // @ts-expect-error
-    supports: (_k, _v) => true,
-  };
-
   describe("basic functionality", () => {
     it("should render with empty default value", () => {
       const { getByTestId } = setUp(<TextFieldWithGraphemes />);
@@ -153,8 +145,15 @@ describe("useTextFieldWithGraphemes", () => {
   });
 
   describe("onValueChange callback", () => {
+    type ValueChangeParams = {
+      value: string;
+      graphemes: string[];
+      slicedValue: string;
+      slicedGraphemes: string[];
+    };
+
     it("should call onValueChange with correct parameters", async () => {
-      const handleValueChange = vi.fn();
+      const handleValueChange = mock<(params: ValueChangeParams) => void>(() => {});
       const { getByTestId, user } = setUp(
         <TextFieldWithGraphemes onValueChange={handleValueChange} />,
       );
@@ -178,7 +177,7 @@ describe("useTextFieldWithGraphemes", () => {
     });
 
     it("should provide sliced values when maxGraphemes is set", async () => {
-      const handleValueChange = vi.fn();
+      const handleValueChange = mock<(params: ValueChangeParams) => void>(() => {});
       const { getByTestId, user } = setUp(
         <TextFieldWithGraphemes maxGraphemeCount={3} onValueChange={handleValueChange} />,
       );
@@ -186,7 +185,8 @@ describe("useTextFieldWithGraphemes", () => {
 
       await user.type(input, "Hello");
 
-      const lastCall = handleValueChange.mock.calls[handleValueChange.mock.calls.length - 1][0];
+      const lastCall = handleValueChange.mock.calls[handleValueChange.mock.calls.length - 1]?.[0];
+      if (!lastCall) throw new Error("Expected lastCall to be defined");
 
       expect(lastCall.value).toBe("Hello");
       expect(lastCall.graphemes).toEqual(["H", "e", "l", "l", "o"]);
@@ -195,7 +195,7 @@ describe("useTextFieldWithGraphemes", () => {
     });
 
     it("should handle empty string", async () => {
-      const handleValueChange = vi.fn();
+      const handleValueChange = mock(() => {});
       const { getByTestId, user } = setUp(
         <TextFieldWithGraphemes defaultValue="Test" onValueChange={handleValueChange} />,
       );
@@ -212,8 +212,8 @@ describe("useTextFieldWithGraphemes", () => {
     });
 
     it("should be called in both controlled and uncontrolled modes", async () => {
-      const handleUncontrolled = vi.fn();
-      const handleControlled = vi.fn();
+      const handleUncontrolled = mock<(params: ValueChangeParams) => void>(() => {});
+      const handleControlled = mock<(params: ValueChangeParams) => void>(() => {});
 
       function TestBothModes() {
         const [controlledValue, setControlledValue] = React.useState("controlled");
@@ -291,7 +291,7 @@ describe("useTextFieldWithGraphemes", () => {
     });
 
     it("should call onValueChange even when value doesn't change in controlled mode", async () => {
-      const handleValueChange = vi.fn();
+      const handleValueChange = mock(() => {});
       const { getByTestId, user } = setUp(
         <TextFieldWithGraphemes value="fixed" onValueChange={handleValueChange} />,
       );