@pnkx-lib/ui 1.9.382 → 1.9.384

package/es/chunks/wapper-Bk3PQCcg.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../ui/Tooltip.js';
+
+const wrapWithTooltip = (node, contentTooltip) => {
+  if (contentTooltip) {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        trigger: ["hover"],
+        title: contentTooltip,
+        placement: "topLeft",
+        classNames: { root: "numeric-input" },
+        children: node
+      }
+    );
+  }
+  return node;
+};
+
+export { wrapWithTooltip as w };

package/es/fields/DateRangePicker.js

@@ -4,6 +4,7 @@ import { g as get } from '../chunks/get-DPccfEM4.js';
 import { ErrorMessage } from '../ui/ErrorMessage.js';
 import { Label } from '../ui/Label.js';
 import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
+import { w as wrapWithTooltip } from '../chunks/wapper-Bk3PQCcg.js';
 
 const { RangePicker: RangePickerPnkx } = DatePicker;
 const RangePicker = (props) => {
@@ -17,6 +18,7 @@ const RangePicker = (props) => {
     customStyleContainer,
     customStyleDatePicker,
     classNameLabel,
+    contentTooltip,
     ...restProps
   } = props;
   const { name, value, onChange, onBlur } = field || {};
@@ -39,17 +41,8 @@ const RangePicker = (props) => {
       }
     );
   };
-  //! Render
-  return /* @__PURE__ */ jsxs("div", { className: customStyleContainer, children: [
-    label && /* @__PURE__ */ jsx(
-      Label,
-      {
-        label,
-        required,
-        classNameLabel
-      }
-    ),
-    /* @__PURE__ */ jsx(
+  const renderDateRangePicker = () => {
+    return /* @__PURE__ */ jsx(
       RangePickerPnkx,
       {
         value,
@@ -62,7 +55,19 @@ const RangePicker = (props) => {
         status: (isTouched || isSubmitted) && errorMessage ? "error" : void 0,
         ...restProps
       }
+    );
+  };
+  //! Render
+  return /* @__PURE__ */ jsxs("div", { className: customStyleContainer, children: [
+    label && /* @__PURE__ */ jsx(
+      Label,
+      {
+        label,
+        required,
+        classNameLabel
+      }
     ),
+    wrapWithTooltip(renderDateRangePicker(), contentTooltip),
     renderErrorMessage()
   ] });
 };

package/es/fields/InputRangePicker.js

@@ -5,6 +5,7 @@ import { g as get } from '../chunks/get-DPccfEM4.js';
 import { ErrorMessage } from '../ui/ErrorMessage.js';
 import { Label } from '../ui/Label.js';
 import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
+import { w as wrapWithTooltip } from '../chunks/wapper-Bk3PQCcg.js';
 
 const InputRangePicker = (props) => {
   //! State
@@ -21,6 +22,7 @@ const InputRangePicker = (props) => {
     thousandSeparator = true,
     placeholderFrom = "Từ",
     placeholderTo = "Đến",
+    contentTooltip,
     ...restProps
   } = props;
   const { name, value, onChange, onBlur } = field || {};
@@ -155,7 +157,7 @@ const InputRangePicker = (props) => {
   };
   return /* @__PURE__ */ jsxs("div", { className: twMerge("w-full", classNameContainer), children: [
     renderLabel(),
-    renderInput(),
+    wrapWithTooltip(renderInput(), contentTooltip),
     renderErrorMessage()
   ] });
 };

package/es/fields/Select.js

@@ -7,6 +7,7 @@ import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
 import { R as RefIcon } from '../chunks/CloseOutlined-D9hb-IcI.js';
 import { R as RefIcon$1 } from '../chunks/DownOutlined-CkHKgaSi.js';
 import { useRef } from 'react';
+import { w as wrapWithTooltip } from '../chunks/wapper-Bk3PQCcg.js';
 import { M as MAX_TAG_TEXT_LENGTH, a as MAX_TAG_COUNT } from '../chunks/common-BcURBmQ-.js';
 
 const SelectClearIcon = ({
@@ -73,6 +74,7 @@ const Select = (props) => {
     allowClear,
     onClear,
     classNameLabel,
+    contentTooltip,
     ...restProps
   } = props;
   const { name, value, onChange, onBlur } = field || {};
@@ -104,7 +106,6 @@ const Select = (props) => {
     afterOnChange?.(null);
     onClear?.();
   };
-  console.log("value", value);
   const suffixIcon = allowClear ? /* @__PURE__ */ jsx(
     SelectClearIcon,
     {
@@ -118,6 +119,32 @@ const Select = (props) => {
       /* @__PURE__ */ jsx("span", { className: "pnkx-not-found-text-select", children: "Không có dữ liệu" })
     ] });
   };
+  const renderSelect = () => {
+    return /* @__PURE__ */ jsx(
+      Select$1,
+      {
+        ref: selectRef,
+        suffixIcon,
+        onChange: handleChange,
+        onBlur,
+        value,
+        optionFilterProp: "label",
+        status: (isTouched || isSubmitted) && Boolean(errorMessage) ? "error" : void 0,
+        placeholder,
+        className: twMerge(
+          "w-full",
+          restProps?.disabled && "pnkx-disable-select",
+          Boolean(errorMessage) && (isTouched || isSubmitted) && "pnkx-error-select",
+          classNameSelect
+        ),
+        mode,
+        maxTagCount,
+        maxTagTextLength,
+        notFoundContent: renderNotFoundContent(),
+        ...restProps
+      }
+    );
+  };
   //! Render
   return /* @__PURE__ */ jsxs(
     "div",
@@ -132,30 +159,7 @@ const Select = (props) => {
             classNameLabel
           }
         ),
-        /* @__PURE__ */ jsx(
-          Select$1,
-          {
-            ref: selectRef,
-            suffixIcon,
-            onChange: handleChange,
-            onBlur,
-            value,
-            optionFilterProp: "label",
-            status: (isTouched || isSubmitted) && Boolean(errorMessage) ? "error" : void 0,
-            placeholder,
-            className: twMerge(
-              "w-full",
-              restProps?.disabled && "pnkx-disable-select",
-              Boolean(errorMessage) && (isTouched || isSubmitted) && "pnkx-error-select",
-              classNameSelect
-            ),
-            mode,
-            maxTagCount,
-            maxTagTextLength,
-            notFoundContent: renderNotFoundContent(),
-            ...restProps
-          }
-        ),
+        wrapWithTooltip(renderSelect(), contentTooltip),
         renderErrorMessage()
       ]
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnkx-lib/ui",
   "private": false,
-  "version": "1.9.382",
+  "version": "1.9.384",
   "type": "module",
   "main": "./es/index.js",
   "module": "./es/index.js",

package/types/components/fields/DateRangePicker.d.ts

@@ -10,5 +10,6 @@ export interface RangePickerFieldProps extends Omit<RangePickerProps, "value" |
     customStyleContainer?: string;
     customStyleDatePicker?: string;
     classNameLabel?: string;
+    contentTooltip?: string;
 }
 export declare const RangePicker: (props: RangePickerFieldProps) => import("react/jsx-runtime").JSX.Element;

package/types/components/fields/InputRangePicker.d.ts

@@ -13,5 +13,6 @@ export interface InputRangePickerProps extends Omit<InputNumberProps, "value" |
     thousandSeparator?: boolean;
     placeholderFrom?: string;
     placeholderTo?: string;
+    contentTooltip?: string;
 }
 export declare const InputRangePicker: (props: InputRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/types/components/fields/Select.d.ts

@@ -13,5 +13,6 @@ export interface SelectFieldProps extends SelectProps {
     maxTagCount?: number | "responsive";
     onClear?: () => void;
     classNameLabel?: string;
+    contentTooltip?: string;
 }
 export declare const Select: (props: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;

package/types/helpers/wapper.d.ts

@@ -0,0 +1 @@
+export declare const wrapWithTooltip: (node: React.ReactNode, contentTooltip?: string) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null | undefined;