@purr-react-tailwindcss/components.select 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-tailwindcss/components.select",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,16 +25,16 @@
     "react": "*",
     "clsx": "*",
     "react-hook-form": "*",
-    "@purr-core/utils.definitions": "0.0.9",
-    "@purr-react-tailwindcss/components.helper-text": "0.0.5",
-    "@purr-react-tailwindcss/components.label": "0.0.5",
-    "@purr-react-tailwindcss/components.post-adornment": "0.0.5",
-    "@purr-react-tailwindcss/components.icon": "0.0.5",
-    "@purr-react-tailwindcss/utils.helpers": "0.0.4",
-    "@purr-core/components.portal": "0.0.6",
-    "@purr-core/hooks.block": "0.0.8",
-    "@purr-core/hooks.not-click-on-elements": "0.0.7",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7"
+    "@purr-core/utils.definitions": "0.0.11",
+    "@purr-react-tailwindcss/components.helper-text": "0.0.7",
+    "@purr-react-tailwindcss/components.label": "0.0.7",
+    "@purr-react-tailwindcss/components.post-adornment": "0.0.7",
+    "@purr-react-tailwindcss/components.icon": "0.0.7",
+    "@purr-react-tailwindcss/utils.helpers": "0.0.5",
+    "@purr-core/components.portal": "0.0.8",
+    "@purr-core/hooks.block": "0.0.10",
+    "@purr-core/hooks.not-click-on-elements": "0.0.8",
+    "@purr-core/hooks.sync-state-with-props": "0.0.8"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -43,6 +43,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components/_menu.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISelectMenuProps } from '../_types';
-
-export declare const SelectMenu: React.ForwardRefExoticComponent<ISelectMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/_components/_option.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISelectOptionProps } from '../_types';
-
-export declare const SelectOption: React.MemoExoticComponent<({ value, displayedValue, label, disabled, htmlAttributes, handleSelectOption, }: ISelectOptionProps) => React.JSX.Element>;

package/dist/_components/index.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ISelectProps } from '../_types';
-
-export declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/_menu-CZg5PPUe.js

@@ -1,72 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import s from "clsx";
-import { memo as b, forwardRef as h, useMemo as n } from "react";
-const p = b(
-  ({
-    value: t,
-    displayedValue: e,
-    label: l,
-    disabled: r,
-    htmlAttributes: x,
-    handleSelectOption: a
-  }) => /* @__PURE__ */ c(
-    "button",
-    {
-      className: s(
-        "block h-9 w-full cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap px-3.5 text-left font-sans text-base transition-all duration-200 ease-in-out hover:bg-white/10",
-        r && "bg-gray-900 text-white/50",
-        !r && t === e && "bg-sky-400/20 text-white",
-        !r && t !== e && "bg-transparent text-white",
-        "select-option",
-        t === e && "select-option--selected",
-        r && "select-option--disabled"
-      ),
-      onClick: a(t),
-      ...x,
-      title: typeof l == "string" ? l : void 0,
-      children: l
-    }
-  )
-);
-p.displayName = "SelectOption";
-const o = h(
-  ({ options: t, position: e, isShowed: l, currentValue: r, htmlAttributes: x, selectOption: a }, d) => {
-    const m = n(() => t.map((f) => /* @__PURE__ */ c(
-      p,
-      {
-        value: f.value,
-        displayedValue: r,
-        label: f.label,
-        disabled: !!f.disabled,
-        htmlAttributes: f.htmlAttributes,
-        handleSelectOption: a
-      },
-      f.value
-    )), [r, t, a]);
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        ref: d,
-        className: s(
-          "absolute z-50 min-w-32 rounded bg-gray-900 px-0 py-1.5",
-          "shadow-[0px_5px_5px_-3px_rgba(0,0,0,0.2),0px_8px_10px_1px_rgba(0,0,0,0.14),0px_3px_14px_2px_rgba(0,0,0,0.12)]",
-          "bg-gradient-to-b from-[#ffffff1f] to-[#ffffff1f]",
-          l ? "block" : "hidden",
-          "select-options",
-          l && "select-options--showed"
-        ),
-        style: {
-          top: `${(e == null ? void 0 : e.top) || 0}px`,
-          left: `${(e == null ? void 0 : e.left) || 0}px`,
-          width: `${(e == null ? void 0 : e.width) || 0}px`
-        },
-        ...x,
-        children: m
-      }
-    );
-  }
-);
-o.displayName = "SelectMenu";
-export {
-  o as SelectMenu
-};

package/dist/_menu-CedOsSIk.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),n=require("clsx"),f=require("react"),d=f.memo(({value:t,displayedValue:e,label:l,disabled:r,htmlAttributes:a,handleSelectOption:s})=>x.jsx("button",{className:n("block h-9 w-full cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap px-3.5 text-left font-sans text-base transition-all duration-200 ease-in-out hover:bg-white/10",r&&"bg-gray-900 text-white/50",!r&&t===e&&"bg-sky-400/20 text-white",!r&&t!==e&&"bg-transparent text-white","select-option",t===e&&"select-option--selected",r&&"select-option--disabled"),onClick:s(t),...a,title:typeof l=="string"?l:void 0,children:l}));d.displayName="SelectOption";const u=f.forwardRef(({options:t,position:e,isShowed:l,currentValue:r,htmlAttributes:a,selectOption:s},b)=>{const p=f.useMemo(()=>t.map(c=>x.jsx(d,{value:c.value,displayedValue:r,label:c.label,disabled:!!c.disabled,htmlAttributes:c.htmlAttributes,handleSelectOption:s},c.value)),[r,t,s]);return x.jsx("div",{ref:b,className:n("absolute z-50 min-w-32 rounded bg-gray-900 px-0 py-1.5","shadow-[0px_5px_5px_-3px_rgba(0,0,0,0.2),0px_8px_10px_1px_rgba(0,0,0,0.14),0px_3px_14px_2px_rgba(0,0,0,0.12)]","bg-gradient-to-b from-[#ffffff1f] to-[#ffffff1f]",l?"block":"hidden","select-options",l&&"select-options--showed"),style:{top:`${(e==null?void 0:e.top)||0}px`,left:`${(e==null?void 0:e.left)||0}px`,width:`${(e==null?void 0:e.width)||0}px`},...a,children:p})});u.displayName="SelectMenu";exports.SelectMenu=u;

package/dist/_types.d.ts

@@ -1,51 +0,0 @@
-import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
-import { FieldError } from 'react-hook-form';
-import { IExtendable } from '@purr-core/utils.definitions';
-import { IHelperTextProps } from '@purr-react-tailwindcss/components.helper-text';
-import { ILabelProps } from '@purr-react-tailwindcss/components.label';
-import { IPostAdornmentProps } from '@purr-react-tailwindcss/components.post-adornment';
-
-export interface ISelectOption {
-    value: string;
-    label: ReactNode;
-    disabled?: boolean;
-    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-}
-export interface ISelectOptionProps extends ISelectOption {
-    displayedValue?: string;
-    handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
-}
-export type TSelectVariant = "standard" | "outlined" | "filled";
-export interface ISelectMenuProps {
-    options: ISelectOption[];
-    position: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    } | null;
-    isShowed: boolean;
-    currentValue?: string;
-    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
-    selectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
-}
-export interface ISelectProps {
-    options: ISelectOption[];
-    value?: string;
-    variant?: TSelectVariant;
-    labelProps?: ILabelProps;
-    postAdornmentProps?: IPostAdornmentProps;
-    helperTextProps?: IHelperTextProps;
-    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
-    menuHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
-    boxHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
-    fakeSelectHtmlAttributes?: HTMLAttributes<HTMLSelectElement> & IExtendable;
-    displayedOptionHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
-    tabIndex?: number;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    error?: FieldError;
-    isStandalone?: boolean;
-    onChange?: (value: string, e: MouseEvent<HTMLSpanElement>) => void;
-}

package/dist/index.cjs

@@ -1 +0,0 @@
-"use strict";var O=Object.create;var R=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var U=(t,s,e,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of J(s))!Q.call(t,c)&&c!==e&&R(t,c,{get:()=>s[c],enumerable:!(i=Y(s,c))||i.enumerable});return t};var j=(t,s,e)=>(e=t!=null?O(K(t)):{},U(s||!t||!t.__esModule?R(e,"default",{value:t,enumerable:!0}):e,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),g=require("clsx"),n=require("react"),X=require("@purr-core/components.portal"),Z=require("@purr-core/hooks.block"),b=require("@purr-core/hooks.not-click-on-elements"),W=require("@purr-core/hooks.sync-state-with-props"),z=require("@purr-react-tailwindcss/utils.helpers"),T=n.lazy(()=>import("@purr-react-tailwindcss/components.helper-text").then(t=>({default:t.HelperText}))),A=n.lazy(()=>import("@purr-react-tailwindcss/components.icon").then(t=>({default:t.Icon}))),P=n.lazy(()=>import("@purr-react-tailwindcss/components.label").then(t=>({default:t.Label}))),p=n.lazy(()=>import("@purr-react-tailwindcss/components.post-adornment").then(t=>({default:t.PostAdornment}))),ee=n.lazy(()=>Promise.resolve().then(()=>require("./_menu-CedOsSIk.cjs")).then(t=>({default:t.SelectMenu}))),te=(t,s=!0)=>{var i;const e=(i=t.current)==null?void 0:i.getBoundingClientRect();return{left:(e==null?void 0:e.x)||0,top:((e==null?void 0:e.y)||0)+(s&&(window==null?void 0:window.scrollY)||0),width:(e==null?void 0:e.width)||0,height:(e==null?void 0:e.height)||0}},L=n.forwardRef(({options:t,value:s,variant:e="standard",labelProps:i,postAdornmentProps:c,helperTextProps:r,fullWidth:d=!1,disabled:u=!1,required:q=!1,error:o=null,isStandalone:k=!1,tabIndex:C=-1,menuHtmlAttributes:M,htmlAttributes:E,boxHtmlAttributes:I,fakeSelectHtmlAttributes:V,displayedOptionHtmlAttributes:_,onChange:w},ce)=>{const N=n.useRef(null),v=n.useRef(null),[a,S]=n.useState(!1),[B,H]=n.useState(null),{currentValue:m,setCurrentValue:y}=W(s,k);b([N,v],()=>{a&&S(!1)});const $=x=>{if(x.preventDefault(),!u){if(!a){const h=te(N);H({...h,top:h.top+h.height})}S(h=>!h)}},D=Z(()=>!!(u||a||m)),f=t.find(x=>x.value===m),F=n.useMemo(()=>l.jsx("div",{className:g("flex h-5 w-5 transition-all duration-300 ease-in-out",u?"text-white/50":"text-white",a?"rotate-180":"rotate-0",a&&"select-post-adornment-content--showed",u&&"select-post-adornment-content--disabled"),children:(c==null?void 0:c.children)??l.jsx(n.Suspense,{children:l.jsx(A,{name:"chevron-down"})})}),[u,a,c==null?void 0:c.children]),G=n.useCallback(x=>h=>{w==null||w(x,h),S(!1),y(x)},[w,y,S]);return l.jsxs("div",{className:g("relative min-w-52",d?"w-full":"w-fit","select"),...E,children:[l.jsxs("div",{role:"button",ref:N,onClick:$,tabIndex:C,className:g("relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",d?"w-full":"w-52",u?"cursor-not-allowed":"cursor-pointer",z.getVariantClasses(e,u),`select-box--variant-${e}`,"select-box",d&&"select-box--full-width",u&&"select-box--disabled",!!o&&"select-box--error"),...I,children:[l.jsx(n.Suspense,{children:!!(i!=null&&i.children)&&l.jsx(P,{...i,required:q,disabled:u,variant:e,isLabelCollapsed:D,isFocused:a,isError:!!o})}),l.jsx("select",{required:q,disabled:u,className:"h-full w-full cursor-pointer opacity-0",...V}),l.jsx("span",{className:g("absolute left-0 box-border w-full overflow-hidden overflow-ellipsis whitespace-nowrap border-none bg-transparent font-sans text-base transition-all duration-200 ease-in-out",i!=null&&i.children?"top-3 h-11 leading-[2.75rem]":"top-0 h-14 leading-[3.5rem]",u?"text-white/50":"text-white",z.getInputPaddingClasses(!1,!!(c!=null&&c.children),e),"select-inner-box",`select-inner-box--variant-${e}`,!!(i!=null&&i.children)&&"select-inner-box--hasLabel",u&&"select-inner-box--disabled"),title:typeof(f==null?void 0:f.label)=="string"?f==null?void 0:f.label:void 0,..._,children:f==null?void 0:f.label}),l.jsx(n.Suspense,{children:!!(c!=null&&c.children)&&l.jsx(p,{...c,variant:e,children:F})}),l.jsx(n.Suspense,{children:!!(r!=null&&r.children)&&l.jsx(T,{...r,isError:!!o,variant:e,children:(o==null?void 0:o.message)??(r==null?void 0:r.children)??""})})]}),l.jsx(X.Portal,{className:"portal-select",children:l.jsx(n.Suspense,{children:a&&l.jsx(ee,{ref:v,options:t,position:B,isShowed:a,currentValue:m,htmlAttributes:M,selectOption:G})})})]})});L.displayName="Select";exports.Select=L;

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './_components';
-export * from './_types';

package/dist/index.js

@@ -1,201 +0,0 @@
-import { jsx as c, jsxs as C } from "react/jsx-runtime";
-import g from "clsx";
-import { lazy as w, forwardRef as J, useRef as E, useState as I, useMemo as K, Suspense as r, useCallback as O } from "react";
-import { Portal as Q } from "@purr-core/components.portal";
-import U from "@purr-core/hooks.block";
-import X from "@purr-core/hooks.not-click-on-elements";
-import Z from "@purr-core/hooks.sync-state-with-props";
-import { getVariantClasses as q, getInputPaddingClasses as W } from "@purr-react-tailwindcss/utils.helpers";
-const b = w(
-  () => import("@purr-react-tailwindcss/components.helper-text").then((t) => ({
-    default: t.HelperText
-  }))
-), T = w(
-  () => import("@purr-react-tailwindcss/components.icon").then((t) => ({
-    default: t.Icon
-  }))
-), A = w(
-  () => import("@purr-react-tailwindcss/components.label").then((t) => ({
-    default: t.Label
-  }))
-), P = w(
-  () => import("@purr-react-tailwindcss/components.post-adornment").then(
-    (t) => ({
-      default: t.PostAdornment
-    })
-  )
-), p = w(
-  () => import("./_menu-CZg5PPUe.js").then((t) => ({ default: t.SelectMenu }))
-), ee = (t, S = !0) => {
-  var i;
-  const e = (i = t.current) == null ? void 0 : i.getBoundingClientRect();
-  return {
-    left: (e == null ? void 0 : e.x) || 0,
-    top: ((e == null ? void 0 : e.y) || 0) + (S && (window == null ? void 0 : window.scrollY) || 0),
-    width: (e == null ? void 0 : e.width) || 0,
-    height: (e == null ? void 0 : e.height) || 0
-  };
-}, te = J(
-  ({
-    options: t,
-    value: S,
-    variant: e = "standard",
-    labelProps: i,
-    postAdornmentProps: l,
-    helperTextProps: a,
-    fullWidth: d = !1,
-    disabled: n = !1,
-    required: L = !1,
-    error: h = null,
-    isStandalone: M = !1,
-    tabIndex: V = -1,
-    menuHtmlAttributes: j,
-    htmlAttributes: B,
-    boxHtmlAttributes: H,
-    fakeSelectHtmlAttributes: $,
-    displayedOptionHtmlAttributes: y,
-    onChange: m
-  }, ce) => {
-    const N = E(null), R = E(null), [f, x] = I(!1), [z, D] = I(null), { currentValue: v, setCurrentValue: k } = Z(S, M);
-    X([N, R], () => {
-      f && x(!1);
-    });
-    const F = (o) => {
-      if (o.preventDefault(), !n) {
-        if (!f) {
-          const s = ee(N);
-          D({
-            ...s,
-            top: s.top + s.height
-          });
-        }
-        x((s) => !s);
-      }
-    }, G = U(() => !!(n || f || v)), u = t.find((o) => o.value === v), Y = K(
-      () => /* @__PURE__ */ c(
-        "div",
-        {
-          className: g(
-            "flex h-5 w-5 transition-all duration-300 ease-in-out",
-            n ? "text-white/50" : "text-white",
-            f ? "rotate-180" : "rotate-0",
-            f && "select-post-adornment-content--showed",
-            n && "select-post-adornment-content--disabled"
-          ),
-          children: (l == null ? void 0 : l.children) ?? /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(T, { name: "chevron-down" }) })
-        }
-      ),
-      [n, f, l == null ? void 0 : l.children]
-    ), _ = O(
-      (o) => (s) => {
-        m == null || m(o, s), x(!1), k(o);
-      },
-      [m, k, x]
-    );
-    return /* @__PURE__ */ C(
-      "div",
-      {
-        className: g(
-          "relative min-w-52",
-          d ? "w-full" : "w-fit",
-          "select"
-        ),
-        ...B,
-        children: [
-          /* @__PURE__ */ C(
-            "div",
-            {
-              role: "button",
-              ref: N,
-              onClick: F,
-              tabIndex: V,
-              className: g(
-                "relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",
-                d ? "w-full" : "w-52",
-                n ? "cursor-not-allowed" : "cursor-pointer",
-                q(e, n),
-                `select-box--variant-${e}`,
-                "select-box",
-                d && "select-box--full-width",
-                n && "select-box--disabled",
-                !!h && "select-box--error"
-              ),
-              ...H,
-              children: [
-                /* @__PURE__ */ c(r, { children: !!(i != null && i.children) && /* @__PURE__ */ c(
-                  A,
-                  {
-                    ...i,
-                    required: L,
-                    disabled: n,
-                    variant: e,
-                    isLabelCollapsed: G,
-                    isFocused: f,
-                    isError: !!h
-                  }
-                ) }),
-                /* @__PURE__ */ c(
-                  "select",
-                  {
-                    required: L,
-                    disabled: n,
-                    className: "h-full w-full cursor-pointer opacity-0",
-                    ...$
-                  }
-                ),
-                /* @__PURE__ */ c(
-                  "span",
-                  {
-                    className: g(
-                      "absolute left-0 box-border w-full overflow-hidden overflow-ellipsis whitespace-nowrap border-none bg-transparent font-sans text-base transition-all duration-200 ease-in-out",
-                      i != null && i.children ? "top-3 h-11 leading-[2.75rem]" : "top-0 h-14 leading-[3.5rem]",
-                      n ? "text-white/50" : "text-white",
-                      W(
-                        !1,
-                        !!(l != null && l.children),
-                        e
-                      ),
-                      "select-inner-box",
-                      `select-inner-box--variant-${e}`,
-                      !!(i != null && i.children) && "select-inner-box--hasLabel",
-                      n && "select-inner-box--disabled"
-                    ),
-                    title: typeof (u == null ? void 0 : u.label) == "string" ? u == null ? void 0 : u.label : void 0,
-                    ...y,
-                    children: u == null ? void 0 : u.label
-                  }
-                ),
-                /* @__PURE__ */ c(r, { children: !!(l != null && l.children) && /* @__PURE__ */ c(P, { ...l, variant: e, children: Y }) }),
-                /* @__PURE__ */ c(r, { children: !!(a != null && a.children) && /* @__PURE__ */ c(
-                  b,
-                  {
-                    ...a,
-                    isError: !!h,
-                    variant: e,
-                    children: (h == null ? void 0 : h.message) ?? (a == null ? void 0 : a.children) ?? ""
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ c(Q, { className: "portal-select", children: /* @__PURE__ */ c(r, { children: f && /* @__PURE__ */ c(
-            p,
-            {
-              ref: R,
-              options: t,
-              position: z,
-              isShowed: f,
-              currentValue: v,
-              htmlAttributes: j,
-              selectOption: _
-            }
-          ) }) })
-        ]
-      }
-    );
-  }
-);
-te.displayName = "Select";
-export {
-  te as Select
-};