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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Dinh Thien Phuc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1 @@
+'use strict';var b=require('clsx'),n=require('react'),components_portal=require('@purr-core/components.portal'),le=require('@purr-core/hooks.block'),re=require('@purr-core/hooks.not-click-on-elements'),se=require('@purr-core/hooks.sync-state-with-props'),utils_helpers=require('@purr-react-tailwindcss/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var b__default=/*#__PURE__*/_interopDefault(b);var n__default=/*#__PURE__*/_interopDefault(n);var le__default=/*#__PURE__*/_interopDefault(le);var re__default=/*#__PURE__*/_interopDefault(re);var se__default=/*#__PURE__*/_interopDefault(se);var J=Object.defineProperty;var E=(e,o)=>()=>(e&&(o=e(e=0)),o);var K=(e,o)=>{for(var t in o)J(e,t,{get:o[t],enumerable:true});};var v,L=E(()=>{v=n.memo(({value:e,displayedValue:o,label:t,disabled:r,htmlAttributes:s,handleSelectOption:a})=>n__default.default.createElement("button",{className:b__default.default("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&&e===o&&"bg-sky-400/20 text-white",!r&&e!==o&&"bg-transparent text-white","select-option",e===o&&"select-option--selected",r&&"select-option--disabled"),onClick:a(e),...s,title:typeof t=="string"?t:void 0},t));v.displayName="SelectOption";});var H={};K(H,{SelectMenu:()=>_});var _,I=E(()=>{L();_=n.forwardRef(({options:e,position:o,isShowed:t,currentValue:r,htmlAttributes:s,selectOption:a},f)=>{let l=n.useMemo(()=>e.map(u=>n__default.default.createElement(v,{key:u.value,value:u.value,displayedValue:r,label:u.label,disabled:!!u.disabled,htmlAttributes:u.htmlAttributes,handleSelectOption:a})),[r,e,a]);return n__default.default.createElement("div",{ref:f,className:b__default.default("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]",t?"block":"hidden","select-options",t&&"select-options--showed"),style:{top:`${o?.top||0}px`,left:`${o?.left||0}px`,width:`${o?.width||0}px`},...s},l)});_.displayName="SelectMenu";});var ue=n.lazy(()=>import('@purr-react-tailwindcss/components.helper-text').then(e=>({default:e.HelperText}))),pe=n.lazy(()=>import('@purr-react-tailwindcss/components.icon').then(e=>({default:e.Icon}))),ce=n.lazy(()=>import('@purr-react-tailwindcss/components.label').then(e=>({default:e.Label}))),fe=n.lazy(()=>import('@purr-react-tailwindcss/components.post-adornment').then(e=>({default:e.PostAdornment}))),me=n.lazy(()=>Promise.resolve().then(()=>(I(),H)).then(e=>({default:e.SelectMenu}))),de=(e,o=true)=>{let t=e.current?.getBoundingClientRect();return {left:t?.x||0,top:(t?.y||0)+(o&&window?.scrollY||0),width:t?.width||0,height:t?.height||0}},he=n.forwardRef(({options:e,value:o,variant:t="standard",labelProps:r,postAdornmentProps:s,helperTextProps:a,fullWidth:f=false,disabled:l=false,required:u=false,error:h=null,isStandalone:T=false,tabIndex:P=-1,menuHtmlAttributes:D,htmlAttributes:$,boxHtmlAttributes:A,fakeSelectHtmlAttributes:j,displayedOptionHtmlAttributes:z,onChange:M},xe)=>{let w=n.useRef(null),O=n.useRef(null),[i,x]=n.useState(false),[B,V]=n.useState(null),{currentValue:S,setCurrentValue:y}=se__default.default(o,T);re__default.default([w,O],()=>{i&&x(false);});let q=c=>{if(c.preventDefault(),!l){if(!i){let p=de(w);V({...p,top:p.top+p.height});}x(p=>!p);}},F=le__default.default(()=>!!(l||i||S)),g=e.find(c=>c.value===S),G=n.useMemo(()=>n__default.default.createElement("div",{className:b__default.default("flex h-5 w-5 transition-all duration-300 ease-in-out",l?"text-white/50":"text-white",i?"rotate-180":"rotate-0",i&&"select-post-adornment-content--showed",l&&"select-post-adornment-content--disabled")},s?.children??n__default.default.createElement(n.Suspense,null,n__default.default.createElement(pe,{name:"chevron-down"}))),[l,i,s?.children]),Y=n.useCallback(c=>p=>{M?.(c,p),x(false),y(c);},[M,y,x]);return n__default.default.createElement("div",{className:b__default.default("relative min-w-52",f?"w-full":"w-fit","select"),...$},n__default.default.createElement("div",{role:"button",ref:w,onClick:q,tabIndex:P,className:b__default.default("relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",f?"w-full":"w-52",l?"cursor-not-allowed":"cursor-pointer",utils_helpers.getVariantClasses(t,l),`select-box--variant-${t}`,"select-box",f&&"select-box--full-width",l&&"select-box--disabled",!!h&&"select-box--error"),...A},n__default.default.createElement(n.Suspense,null,!!r?.children&&n__default.default.createElement(ce,{...r,required:u,disabled:l,variant:t,isLabelCollapsed:F,isFocused:i,isError:!!h})),n__default.default.createElement("select",{required:u,disabled:l,className:"h-full w-full cursor-pointer opacity-0",...j}),n__default.default.createElement("span",{className:b__default.default("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",r?.children?"top-3 h-11 leading-[2.75rem]":"top-0 h-14 leading-[3.5rem]",l?"text-white/50":"text-white",utils_helpers.getInputPaddingClasses(false,!!s?.children,t),"select-inner-box",`select-inner-box--variant-${t}`,!!r?.children&&"select-inner-box--hasLabel",l&&"select-inner-box--disabled"),title:typeof g?.label=="string"?g?.label:void 0,...z},g?.label),n__default.default.createElement(n.Suspense,null,!!s?.children&&n__default.default.createElement(fe,{...s,variant:t},G)),n__default.default.createElement(n.Suspense,null,!!a?.children&&n__default.default.createElement(ue,{...a,isError:!!h,variant:t},h?.message??a?.children??""))),n__default.default.createElement(components_portal.Portal,{className:"portal-select"},n__default.default.createElement(n.Suspense,null,i&&n__default.default.createElement(me,{ref:O,options:e,position:B,isShowed:i,currentValue:S,htmlAttributes:D,selectOption:Y}))))});he.displayName="Select";exports.Select=he;

package/dist/index.d.cts

@@ -0,0 +1,55 @@
+import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } 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';
+
+interface ISelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+interface ISelectOptionProps extends ISelectOption {
+    displayedValue?: string;
+    handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
+}
+type TSelectVariant = "standard" | "outlined" | "filled";
+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>;
+}
+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;
+}
+
+declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { type ISelectMenuProps, type ISelectOption, type ISelectOptionProps, type ISelectProps, Select, type TSelectVariant };

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } 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';
+
+interface ISelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+interface ISelectOptionProps extends ISelectOption {
+    displayedValue?: string;
+    handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
+}
+type TSelectVariant = "standard" | "outlined" | "filled";
+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>;
+}
+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;
+}
+
+declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { type ISelectMenuProps, type ISelectOption, type ISelectOptionProps, type ISelectProps, Select, type TSelectVariant };

package/dist/index.js

@@ -0,0 +1 @@
+import b from'clsx';import n,{lazy,forwardRef,useRef,useState,useMemo,Suspense,useCallback,memo}from'react';import {Portal}from'@purr-core/components.portal';import le from'@purr-core/hooks.block';import re from'@purr-core/hooks.not-click-on-elements';import se from'@purr-core/hooks.sync-state-with-props';import {getVariantClasses,getInputPaddingClasses}from'@purr-react-tailwindcss/utils.helpers';var J=Object.defineProperty;var E=(e,o)=>()=>(e&&(o=e(e=0)),o);var K=(e,o)=>{for(var t in o)J(e,t,{get:o[t],enumerable:true});};var v,L=E(()=>{v=memo(({value:e,displayedValue:o,label:t,disabled:r,htmlAttributes:s,handleSelectOption:a})=>n.createElement("button",{className:b("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&&e===o&&"bg-sky-400/20 text-white",!r&&e!==o&&"bg-transparent text-white","select-option",e===o&&"select-option--selected",r&&"select-option--disabled"),onClick:a(e),...s,title:typeof t=="string"?t:void 0},t));v.displayName="SelectOption";});var H={};K(H,{SelectMenu:()=>_});var _,I=E(()=>{L();_=forwardRef(({options:e,position:o,isShowed:t,currentValue:r,htmlAttributes:s,selectOption:a},f)=>{let l=useMemo(()=>e.map(u=>n.createElement(v,{key:u.value,value:u.value,displayedValue:r,label:u.label,disabled:!!u.disabled,htmlAttributes:u.htmlAttributes,handleSelectOption:a})),[r,e,a]);return n.createElement("div",{ref:f,className:b("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]",t?"block":"hidden","select-options",t&&"select-options--showed"),style:{top:`${o?.top||0}px`,left:`${o?.left||0}px`,width:`${o?.width||0}px`},...s},l)});_.displayName="SelectMenu";});var ue=lazy(()=>import('@purr-react-tailwindcss/components.helper-text').then(e=>({default:e.HelperText}))),pe=lazy(()=>import('@purr-react-tailwindcss/components.icon').then(e=>({default:e.Icon}))),ce=lazy(()=>import('@purr-react-tailwindcss/components.label').then(e=>({default:e.Label}))),fe=lazy(()=>import('@purr-react-tailwindcss/components.post-adornment').then(e=>({default:e.PostAdornment}))),me=lazy(()=>Promise.resolve().then(()=>(I(),H)).then(e=>({default:e.SelectMenu}))),de=(e,o=true)=>{let t=e.current?.getBoundingClientRect();return {left:t?.x||0,top:(t?.y||0)+(o&&window?.scrollY||0),width:t?.width||0,height:t?.height||0}},he=forwardRef(({options:e,value:o,variant:t="standard",labelProps:r,postAdornmentProps:s,helperTextProps:a,fullWidth:f=false,disabled:l=false,required:u=false,error:h=null,isStandalone:T=false,tabIndex:P=-1,menuHtmlAttributes:D,htmlAttributes:$,boxHtmlAttributes:A,fakeSelectHtmlAttributes:j,displayedOptionHtmlAttributes:z,onChange:M},xe)=>{let w=useRef(null),O=useRef(null),[i,x]=useState(false),[B,V]=useState(null),{currentValue:S,setCurrentValue:y}=se(o,T);re([w,O],()=>{i&&x(false);});let q=c=>{if(c.preventDefault(),!l){if(!i){let p=de(w);V({...p,top:p.top+p.height});}x(p=>!p);}},F=le(()=>!!(l||i||S)),g=e.find(c=>c.value===S),G=useMemo(()=>n.createElement("div",{className:b("flex h-5 w-5 transition-all duration-300 ease-in-out",l?"text-white/50":"text-white",i?"rotate-180":"rotate-0",i&&"select-post-adornment-content--showed",l&&"select-post-adornment-content--disabled")},s?.children??n.createElement(Suspense,null,n.createElement(pe,{name:"chevron-down"}))),[l,i,s?.children]),Y=useCallback(c=>p=>{M?.(c,p),x(false),y(c);},[M,y,x]);return n.createElement("div",{className:b("relative min-w-52",f?"w-full":"w-fit","select"),...$},n.createElement("div",{role:"button",ref:w,onClick:q,tabIndex:P,className:b("relative h-14 cursor-pointer rounded transition-all duration-200 ease-in-out",f?"w-full":"w-52",l?"cursor-not-allowed":"cursor-pointer",getVariantClasses(t,l),`select-box--variant-${t}`,"select-box",f&&"select-box--full-width",l&&"select-box--disabled",!!h&&"select-box--error"),...A},n.createElement(Suspense,null,!!r?.children&&n.createElement(ce,{...r,required:u,disabled:l,variant:t,isLabelCollapsed:F,isFocused:i,isError:!!h})),n.createElement("select",{required:u,disabled:l,className:"h-full w-full cursor-pointer opacity-0",...j}),n.createElement("span",{className:b("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",r?.children?"top-3 h-11 leading-[2.75rem]":"top-0 h-14 leading-[3.5rem]",l?"text-white/50":"text-white",getInputPaddingClasses(false,!!s?.children,t),"select-inner-box",`select-inner-box--variant-${t}`,!!r?.children&&"select-inner-box--hasLabel",l&&"select-inner-box--disabled"),title:typeof g?.label=="string"?g?.label:void 0,...z},g?.label),n.createElement(Suspense,null,!!s?.children&&n.createElement(fe,{...s,variant:t},G)),n.createElement(Suspense,null,!!a?.children&&n.createElement(ue,{...a,isError:!!h,variant:t},h?.message??a?.children??""))),n.createElement(Portal,{className:"portal-select"},n.createElement(Suspense,null,i&&n.createElement(me,{ref:O,options:e,position:B,isShowed:i,currentValue:S,htmlAttributes:D,selectOption:Y}))))});he.displayName="Select";export{he as Select};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-tailwindcss/components.select",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -21,20 +21,19 @@
     "dist"
   ],
   "peerDependencies": {
-    "typescript": "*",
-    "react": "*",
-    "clsx": "*",
-    "react-hook-form": "*",
-    "@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"
+    "react": "^18.0.0 || ^19.0.0",
+    "clsx": "^2.0.0",
+    "react-hook-form": "^7.0.0",
+    "@purr-core/utils.definitions": "*",
+    "@purr-react-tailwindcss/components.helper-text": "*",
+    "@purr-react-tailwindcss/components.label": "*",
+    "@purr-react-tailwindcss/components.post-adornment": "*",
+    "@purr-react-tailwindcss/components.icon": "*",
+    "@purr-react-tailwindcss/utils.helpers": "*",
+    "@purr-core/components.portal": "*",
+    "@purr-core/hooks.block": "*",
+    "@purr-core/hooks.not-click-on-elements": "*",
+    "@purr-core/hooks.sync-state-with-props": "*"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",