@crystallize/design-system 1.21.0 → 1.21.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.21.0",
+  "version": "1.21.2",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -73,9 +73,10 @@
     "@storybook/react": "7.6.2",
     "@storybook/react-vite": "7.6.2",
     "@storybook/theming": "7.6.2",
-    "@testing-library/jest-dom": "6.1.5",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "14.5.1",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@types/prettier": "2.7.2",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",

package/src/dialog/config.tsx

@@ -9,21 +9,15 @@ export function confirm(config: DialogFuncProps) {
   let currentConfig = { ...config, close, open: true };
   let timeoutId: NodeJS.Timeout;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function close(...args: any[]) {
+  function close() {
     currentConfig = {
       ...currentConfig,
       open: false,
-      afterClose: () => {
-        if (typeof config.afterClose === 'function') {
-          config.afterClose();
-        }
-
-        destroy.apply(this, args);
-      },
     };
 
     render(currentConfig);
+    config.afterClose?.();
+    destroy();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/dialog/types.ts

@@ -62,7 +62,6 @@ export type DialogFunc = (props: DialogFuncProps) => {
 export type ModalStaticFunctions = Record<NonNullable<DialogFuncProps['type']>, DialogFunc>;
 
 export interface ConfirmDialogProps extends DialogFuncProps {
-  afterClose?: () => void;
   close: (...args: unknown[]) => void;
   autoFocusButton?: null | 'ok' | 'cancel';
   rootPrefixCls: string;

package/src/rich-text-editor/index.tsx

@@ -0,0 +1,15 @@
+import { lazy, Suspense } from 'react';
+
+const LazyRichTextEditor = lazy(() => import('./rich-text-editor'));
+
+// Export types
+export type { CrystallizeRichText } from './types/crystallize-rich-text-types';
+export * from './types/types';
+
+export const RichTextEditor = (props: any) => {
+  return (
+    <Suspense fallback={null}>
+      <LazyRichTextEditor {...props} />
+    </Suspense>
+  );
+};

package/src/rich-text-editor/rich-text-editor.css

@@ -17,8 +17,6 @@
   position: relative;
   line-height: 1.7;
 
-  --c-rte-min-height: 150px;
-
   > * {
     box-sizing: border-box;
   }
@@ -26,7 +24,7 @@
   @apply !font-sans font-normal text-gray-900-50;
 
   .c-rte-editor-scroller {
-    min-height: var(--c-rte-min-height);
+    min-height: var(--c-rte-min-height, 150px);
     border: 0;
     resize: none;
     cursor: text;
@@ -148,8 +146,9 @@
   }
 
   .c-rte-placeholder {
-    @apply pointer-events-none absolute left-6 right-10 top-0 inline-block select-none overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-normal text-gray-300-600;
+    @apply pointer-events-none absolute right-10 top-0 inline-block select-none overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-normal text-gray-300-600;
     font-style: italic;
+    left: var(--c-rte-content-pl, 1.5rem);
   }
 
   @keyframes CursorBlink {
@@ -163,7 +162,7 @@
   @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
   tab-size: 1;
   padding-bottom: 8px;
-  min-height: calc(var(--c-rte-min-height) - 8px);
+  min-height: calc(var(--c-rte-min-height, 150px) - 8px);
 
   /* Allow for customization from the outside */
   padding-top: var(--c-rte-content-pt, 0);

package/src/rich-text-editor/rich-text-editor.tsx

@@ -45,10 +45,6 @@ import type { CrystallizeRichTextActionMenuItem } from './types/types';
  */
 // import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
 
-// Export types
-export type { CrystallizeRichText } from './types/crystallize-rich-text-types';
-export * from './types/types';
-
 type TRichTextBase = {
   placeholder?: string;
   onChange?: (data: CrystallizeRichText) => void;
@@ -186,3 +182,5 @@ function RichTextEditorWithoutContext({
     </>
   );
 }
+
+export default RichTextEditor;

package/src/tag/tag.css

@@ -24,6 +24,10 @@
   @apply bg-elevate shadow;
 }
 
+.c-tag-xxs {
+  @apply h-5 px-2 text-xs;
+}
+
 .c-tag-xs {
   @apply h-6 px-2 text-xs;
 }

package/src/tag/tag.tsx

@@ -11,6 +11,7 @@ const tagStyles = cva('c-tag', {
       elevate: 'c-tag-elevate',
     },
     size: {
+      xxs: 'c-tag-xxs',
       xs: 'c-tag-xs',
       sm: 'c-tag-sm',
       md: 'c-tag-md',

package/src/rich-text-editor/index.ts

@@ -1 +0,0 @@
-export * from './rich-text-editor';