@particle-network/ui-react 0.5.1-beta.13 → 0.5.1-beta.14

package/dist/components/UXToast/index.d.ts

@@ -12,7 +12,7 @@ export declare const toast: {
     error: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
     loading: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
     show: (props?: Partial<ToastProps> & {
-        type: UXToastType;
+        type?: UXToastType;
     }) => string | null;
     closeAll: () => void;
     close: (key: string) => void;

package/dist/components/UXToast/index.js

@@ -5,6 +5,7 @@ import CircleCloseIcon from "@particle-network/icons/web/CircleCloseIcon";
 import CloseIcon from "@particle-network/icons/web/CloseIcon";
 import { hasLongWord } from "../../utils/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
+import { WrapText } from "../WrapText/index.js";
 const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
         disableAnimation: true,
         placement: "top-center",
@@ -32,7 +33,7 @@ const getIcon = (type)=>{
     return null;
 };
 const show = (props)=>{
-    const { type, hideCloseButton, icon, variant, classNames, description, ...toastProps } = props ?? {};
+    const { type = 'info', hideCloseButton, icon, variant, classNames, title, description, ...toastProps } = props ?? {};
     const { base, description: descriptionClassName, icon: iconClassName, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
     return addToast({
         classNames: {
@@ -68,7 +69,12 @@ const show = (props)=>{
             ],
             ...restClassNames
         },
-        description,
+        title: /*#__PURE__*/ jsx(WrapText, {
+            children: title
+        }),
+        description: /*#__PURE__*/ jsx(WrapText, {
+            children: description
+        }),
         icon: icon ?? getIcon(type),
         hideIcon: !icon && !getIcon(type),
         closeIcon: /*#__PURE__*/ jsx(CloseIcon, {

package/dist/components/UXTooltip/index.js

@@ -1,23 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { hasLongWord } from "../../utils/index.js";
+import { WrapText } from "../WrapText/index.js";
 import tooltip_extend from "./tooltip.extend.js";
-const renderContent = (content)=>{
-    if (!content) return null;
-    if ('string' != typeof content) return content;
-    if (!content.includes('\n')) return content;
-    return content.split('\n').flatMap((x, i, arr)=>i < arr.length - 1 ? [
-            x,
-            /*#__PURE__*/ jsx("br", {}, i)
-        ] : [
-            x
-        ]);
-};
 const UXTooltip = (props)=>{
     const { content, classNames, ...restProps } = props;
     const { content: contentClassName, ...restClassNames } = classNames ?? {};
     return /*#__PURE__*/ jsx(tooltip_extend, {
-        content: renderContent(content),
+        content: /*#__PURE__*/ jsx(WrapText, {
+            children: content
+        }),
         classNames: {
             content: [
                 hasLongWord(content) && 'break-all',

package/dist/components/WrapText/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface WarpTextProps {
+    children: React.ReactNode;
+}
+export declare const WrapText: (props: WarpTextProps) => string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | (string | import("react/jsx-runtime").JSX.Element)[] | null;
+export {};

package/dist/components/WrapText/index.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const WrapText = (props)=>{
+    const { children } = props;
+    if (!children) return null;
+    if ('string' != typeof children) return children;
+    if (!children.includes('\n')) return children;
+    return children.split('\n').flatMap((x, i, arr)=>i < arr.length - 1 ? [
+            x,
+            /*#__PURE__*/ jsx("br", {}, i)
+        ] : [
+            x
+        ]);
+};
+export { WrapText };

package/dist/components/index.d.ts

@@ -32,3 +32,4 @@ export * from './UXTextarea';
 export * from './UXThemeSwitch';
 export * from './UXToast';
 export * from './UXTooltip';
+export * from './WrapText';

package/dist/components/index.js

@@ -32,3 +32,4 @@ export * from "./UXTextarea/index.js";
 export * from "./UXThemeSwitch/index.js";
 export * from "./UXToast/index.js";
 export * from "./UXTooltip/index.js";
+export * from "./WrapText/index.js";

package/dist/components/typography/Text.js

@@ -1,8 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { Box } from "../layout/index.js";
+import { WrapText } from "../WrapText/index.js";
 import { textVariants } from "./text-theme.js";
-const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, fontWeight, lineHeight, align, textAlign, ...props }, ref)=>/*#__PURE__*/ jsx(Box, {
+const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, fontWeight, lineHeight, align, textAlign, wrapText, children, ...props }, ref)=>{
+    const content = useMemo(()=>wrapText ? /*#__PURE__*/ jsx(WrapText, {
+            children: children
+        }) : children, [
+        children,
+        wrapText
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
         ref: ref,
         as: "span",
         textAlign: textAlign || align,
@@ -23,7 +31,9 @@ const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1,
             lineHeight,
             className
         }),
-        ...props
-    }));
+        ...props,
+        children: content
+    });
+});
 Text.displayName = 'UX.Text';
 export { Text };

package/dist/components/typography/Text.type.d.ts

@@ -62,5 +62,6 @@ export interface TextProps extends BoxProps<HTMLSpanElement> {
      */
     caption1Bold?: boolean;
     align?: BoxProps['textAlign'];
+    wrapText?: boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.13",
+  "version": "0.5.1-beta.14",
   "type": "module",
   "exports": {
     ".": {
@@ -52,8 +52,8 @@
     "react-aria-components": "^1.14.0",
     "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/ui-shared": "0.4.1-beta.5",
-    "@particle-network/icons": "0.5.1-beta.6"
+    "@particle-network/icons": "0.5.1-beta.6",
+    "@particle-network/ui-shared": "0.4.1-beta.5"
   },
   "scripts": {
     "build": "rslib build",