@purr-react-styled-components/components.select 0.0.7 → 0.0.9

package/dist/index.cjs

@@ -1 +1,82 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Du2pJQ-t.cjs");exports.Select=e.Select;
+'use strict';var c=require('styled-components'),utils_helpers=require('@purr-react-styled-components/utils.helpers'),x=require('clsx'),n=require('react'),components_portal=require('@purr-core/components.portal'),re=require('@purr-core/hooks.not-click-on-elements'),se=require('@purr-core/hooks.sync-state-with-props');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var c__default=/*#__PURE__*/_interopDefault(c);var x__default=/*#__PURE__*/_interopDefault(x);var n__default=/*#__PURE__*/_interopDefault(n);var re__default=/*#__PURE__*/_interopDefault(re);var se__default=/*#__PURE__*/_interopDefault(se);var _=Object.defineProperty;var w=(e,t)=>()=>(e&&(t=e(e=0)),t);var J=(e,t)=>{for(var o in t)_(e,o,{get:t[o],enumerable:true});};var Q,r,b=w(()=>{Q=e=>e.$variant==="standard"?c.css`
+      padding: 0px 35px 0px 0px;
+    `:c.css`
+    padding: 0px 35px 0px 14px;
+  `,r={Container:c__default.default.div`
+    position: relative;
+    width: ${({$fullWidth:e})=>e?"100%":"fit-content"};
+    min-width: 210px;
+  `,Option:c__default.default.span`
+    display: block;
+    transition: all 200ms ease-in-out;
+    cursor: pointer;
+    padding: 0px 14px;
+    height: 36px;
+    line-height: 36px;
+    background-color: ${({$selected:e,$disabled:t})=>t?"#121212":e?"#90caf929":"transparent"};
+    color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-family: "Verdana", sans-serif;
+    font-size: 16px;
+
+    &:hover {
+      background-color: #ffffff14;
+    }
+  `,OptionGroup:c__default.default.div`
+    position: absolute;
+    display: ${({$isShowed:e})=>e?"block":"none"};
+    top: ${({$position:e})=>e?.top||0}px;
+    left: ${({$position:e})=>e?.left||0}px;
+    width: ${({$position:e})=>e?.width||0}px;
+    padding: 6px 0px;
+    z-index: 999;
+    background-color: rgb(18, 18, 18);
+    min-width: 120px;
+    border-radius: 4px;
+    box-shadow:
+      rgb(0 0 0 / 20%) 0px 5px 5px -3px,
+      rgb(0 0 0 / 14%) 0px 8px 10px 1px,
+      rgb(0 0 0 / 12%) 0px 3px 14px 2px;
+    background-image: linear-gradient(#ffffff1f, #ffffff1f);
+  `,Box:c__default.default.div`
+    transition: all 200ms ease-in-out;
+    position: relative;
+    width: ${({$fullWidth:e})=>e?"100%":"210px"};
+    height: 56px;
+    ${utils_helpers.getVariantStyle};
+  `,InnerBox:c__default.default.span`
+    position: absolute;
+    transition: all 200ms ease-in-out;
+    box-sizing: border-box;
+    width: 100%;
+    height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    top: ${({$hasLabel:e})=>e?"12px":"0px"};
+    left: 0px;
+    background-color: transparent;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
+    font-family: "Verdana", sans-serif;
+    font-size: 16px;
+    ${Q};
+
+    &:focus-visible {
+      outline: none;
+    }
+  `,FakeSelect:c__default.default.select`
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  `,PostAdornmentContentWrapper:c__default.default.div`
+    display: flex;
+    transition: all 350ms ease-in-out;
+    width: 20px;
+    height: 20px;
+    color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
+    transform: ${({$isShowed:e})=>e?"rotate(180deg)":"none"};
+  `};});var y,C=w(()=>{b();y=n.memo(({value:e,displayedValue:t,label:o,disabled:l,htmlAttributes:s,handleSelectOption:u})=>n__default.default.createElement(r.Option,{...s,$selected:e===t,$disabled:l,key:e,className:x__default.default("select-option",e===t&&"select-option--selected",l&&"select-option--disabled"),onClick:u(e),title:typeof o=="string"?o:void 0},o));y.displayName="SelectOption";});var L={};J(L,{SelectMenu:()=>T});var T,H=w(()=>{b();C();T=n.forwardRef(({options:e,position:t,isShowed:o,currentValue:l,optionGroupClassName:s,htmlAttributes:u,selectOption:a},i)=>{let $=n.useMemo(()=>e.map(p=>n__default.default.createElement(y,{key:p.value,value:p.value,displayedValue:l,label:p.label,disabled:!!p.disabled,htmlAttributes:p.htmlAttributes,handleSelectOption:a})),[l,e,a]);return n__default.default.createElement(r.OptionGroup,{...u,$position:t,$isShowed:o,ref:i,className:x__default.default("select-options",!!t?.top&&`select-options--position-top-${t.top}`,!!t?.left&&`select-options--position-left-${t.left}`,!!t?.height&&`select-options--position-height-${t.height}`,!!t?.width&&`select-options--position-width-${t.width}`,o&&"select-options--showed",s)},$)});T.displayName="SelectMenu";});b();var pe=n.lazy(()=>import('@purr-react-styled-components/components.icon').then(e=>({default:e.Icon}))),ae=n.lazy(()=>import('@purr-react-styled-components/components.post-adornment').then(e=>({default:e.PostAdornment}))),fe=n.lazy(()=>Promise.resolve().then(()=>(H(),L)).then(e=>({default:e.SelectMenu}))),de=(e,t=true)=>{let o=e.current?.getBoundingClientRect();return {left:o?.x||0,top:(o?.y||0)+(t&&window?.scrollY||0),width:o?.width||0,height:o?.height||0}},ce=n.forwardRef(({optionGroupClassName:e,options:t,value:o,variant:l="standard",postAdornmentProps:s,className:u,fullWidth:a=false,disabled:i=false,required:$=false,error:p=null,isStandalone:A=false,tabIndex:W=-1,menuHtmlAttributes:z,htmlAttributes:D,onChange:M},me)=>{let S=n.useRef(null),P=n.useRef(null),[f,h]=n.useState(false),[G,j]=n.useState(null),{currentValue:k,setCurrentValue:I}=se__default.default(o,A);re__default.default([S,P],()=>{f&&h(false);});let F=m=>{if(m.preventDefault(),!i){if(!f){let d=de(S);j({...d,top:d.top+d.height});}h(d=>!d);}},g=t.find(m=>m.value===k),q=n.useMemo(()=>n__default.default.createElement(r.PostAdornmentContentWrapper,{$isShowed:f,$disabled:i,className:x__default.default("select-post-adornment-content",f&&"select-post-adornment-content--showed",i&&"select-post-adornment-content--disabled")},s?.children??n__default.default.createElement(n.Suspense,null,n__default.default.createElement(pe,{name:"chevron-down"}))),[i,f,s?.children]),Y=n.useCallback(m=>d=>{M?.(m,d),h(false),I(m);},[M,I,h]);return n__default.default.createElement(r.Container,{...D,$fullWidth:a,className:x__default.default("select",a&&"select--fullWidth",u)},n__default.default.createElement(r.Box,{$variant:l,$disabled:i,$fullWidth:a,$isError:!!p,ref:S,onClick:F,tabIndex:W,className:x__default.default("select-box",a&&"select-box--full-width",i&&"select-box--disabled",!!p&&"select-box--error",`select-box--variant-${l}`)},n__default.default.createElement(r.FakeSelect,{required:$,disabled:i}),n__default.default.createElement(r.InnerBox,{$hasLabel:true,$variant:l,$disabled:i,className:x__default.default("select-inner-box",`select-inner-box--variant-${l}`,i&&"select-inner-box--disabled"),title:typeof g?.label=="string"?g?.label:void 0},g?.label),n__default.default.createElement(n.Suspense,null,!!s?.children&&n__default.default.createElement(ae,{...s,variant:l},q))),n__default.default.createElement(components_portal.Portal,{className:x__default.default("portal-select",e)},n__default.default.createElement(n.Suspense,null,f&&n__default.default.createElement(fe,{ref:P,options:t,position:G,isShowed:f,optionGroupClassName:e,currentValue:k,htmlAttributes:z,selectOption:Y}))))});ce.displayName="Select";exports.Select=ce;

package/dist/{_types.d.ts → index.d.cts}

@@ -1,20 +1,20 @@
-import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
 import { FieldError } from 'react-hook-form';
 import { IExtendable } from '@purr-core/utils.definitions';
 import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
 
-export interface ISelectOption {
+interface ISelectOption {
     value: string;
     label: ReactNode;
     disabled?: boolean;
     htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
 }
-export interface ISelectOptionProps extends ISelectOption {
+interface ISelectOptionProps extends ISelectOption {
     displayedValue?: string;
     handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
 }
-export type TSelectVariant = "standard" | "outlined" | "filled";
-export interface ISelectMenuProps {
+type TSelectVariant = "standard" | "outlined" | "filled";
+interface ISelectMenuProps {
     options: ISelectOption[];
     position: {
         left: number;
@@ -28,7 +28,7 @@ export interface ISelectMenuProps {
     htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
     selectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
 }
-export interface ISelectProps {
+interface ISelectProps {
     optionGroupClassName?: string;
     options: ISelectOption[];
     value?: string;
@@ -45,3 +45,7 @@ export interface ISelectProps {
     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

@@ -1,2 +1,51 @@
-export * from './_components';
-export * from './_types';
+import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
+import { FieldError } from 'react-hook-form';
+import { IExtendable } from '@purr-core/utils.definitions';
+import { IPostAdornmentProps } from '@purr-react-styled-components/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;
+    optionGroupClassName?: string;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    selectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
+}
+interface ISelectProps {
+    optionGroupClassName?: string;
+    options: ISelectOption[];
+    value?: string;
+    variant?: TSelectVariant;
+    postAdornmentProps?: IPostAdornmentProps;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    menuHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    tabIndex?: number;
+    className?: string;
+    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

@@ -1,4 +1,82 @@
-import { a as o } from "./index-CPWuXrMI.js";
-export {
-  o as Select
-};
+import c,{css}from'styled-components';import {getVariantStyle}from'@purr-react-styled-components/utils.helpers';import x from'clsx';import n,{lazy,forwardRef,useRef,useState,useMemo,Suspense,useCallback,memo}from'react';import {Portal}from'@purr-core/components.portal';import re from'@purr-core/hooks.not-click-on-elements';import se from'@purr-core/hooks.sync-state-with-props';var _=Object.defineProperty;var w=(e,t)=>()=>(e&&(t=e(e=0)),t);var J=(e,t)=>{for(var o in t)_(e,o,{get:t[o],enumerable:true});};var Q,r,b=w(()=>{Q=e=>e.$variant==="standard"?css`
+      padding: 0px 35px 0px 0px;
+    `:css`
+    padding: 0px 35px 0px 14px;
+  `,r={Container:c.div`
+    position: relative;
+    width: ${({$fullWidth:e})=>e?"100%":"fit-content"};
+    min-width: 210px;
+  `,Option:c.span`
+    display: block;
+    transition: all 200ms ease-in-out;
+    cursor: pointer;
+    padding: 0px 14px;
+    height: 36px;
+    line-height: 36px;
+    background-color: ${({$selected:e,$disabled:t})=>t?"#121212":e?"#90caf929":"transparent"};
+    color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-family: "Verdana", sans-serif;
+    font-size: 16px;
+
+    &:hover {
+      background-color: #ffffff14;
+    }
+  `,OptionGroup:c.div`
+    position: absolute;
+    display: ${({$isShowed:e})=>e?"block":"none"};
+    top: ${({$position:e})=>e?.top||0}px;
+    left: ${({$position:e})=>e?.left||0}px;
+    width: ${({$position:e})=>e?.width||0}px;
+    padding: 6px 0px;
+    z-index: 999;
+    background-color: rgb(18, 18, 18);
+    min-width: 120px;
+    border-radius: 4px;
+    box-shadow:
+      rgb(0 0 0 / 20%) 0px 5px 5px -3px,
+      rgb(0 0 0 / 14%) 0px 8px 10px 1px,
+      rgb(0 0 0 / 12%) 0px 3px 14px 2px;
+    background-image: linear-gradient(#ffffff1f, #ffffff1f);
+  `,Box:c.div`
+    transition: all 200ms ease-in-out;
+    position: relative;
+    width: ${({$fullWidth:e})=>e?"100%":"210px"};
+    height: 56px;
+    ${getVariantStyle};
+  `,InnerBox:c.span`
+    position: absolute;
+    transition: all 200ms ease-in-out;
+    box-sizing: border-box;
+    width: 100%;
+    height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    top: ${({$hasLabel:e})=>e?"12px":"0px"};
+    left: 0px;
+    background-color: transparent;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
+    font-family: "Verdana", sans-serif;
+    font-size: 16px;
+    ${Q};
+
+    &:focus-visible {
+      outline: none;
+    }
+  `,FakeSelect:c.select`
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  `,PostAdornmentContentWrapper:c.div`
+    display: flex;
+    transition: all 350ms ease-in-out;
+    width: 20px;
+    height: 20px;
+    color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
+    transform: ${({$isShowed:e})=>e?"rotate(180deg)":"none"};
+  `};});var y,C=w(()=>{b();y=memo(({value:e,displayedValue:t,label:o,disabled:l,htmlAttributes:s,handleSelectOption:u})=>n.createElement(r.Option,{...s,$selected:e===t,$disabled:l,key:e,className:x("select-option",e===t&&"select-option--selected",l&&"select-option--disabled"),onClick:u(e),title:typeof o=="string"?o:void 0},o));y.displayName="SelectOption";});var L={};J(L,{SelectMenu:()=>T});var T,H=w(()=>{b();C();T=forwardRef(({options:e,position:t,isShowed:o,currentValue:l,optionGroupClassName:s,htmlAttributes:u,selectOption:a},i)=>{let $=useMemo(()=>e.map(p=>n.createElement(y,{key:p.value,value:p.value,displayedValue:l,label:p.label,disabled:!!p.disabled,htmlAttributes:p.htmlAttributes,handleSelectOption:a})),[l,e,a]);return n.createElement(r.OptionGroup,{...u,$position:t,$isShowed:o,ref:i,className:x("select-options",!!t?.top&&`select-options--position-top-${t.top}`,!!t?.left&&`select-options--position-left-${t.left}`,!!t?.height&&`select-options--position-height-${t.height}`,!!t?.width&&`select-options--position-width-${t.width}`,o&&"select-options--showed",s)},$)});T.displayName="SelectMenu";});b();var pe=lazy(()=>import('@purr-react-styled-components/components.icon').then(e=>({default:e.Icon}))),ae=lazy(()=>import('@purr-react-styled-components/components.post-adornment').then(e=>({default:e.PostAdornment}))),fe=lazy(()=>Promise.resolve().then(()=>(H(),L)).then(e=>({default:e.SelectMenu}))),de=(e,t=true)=>{let o=e.current?.getBoundingClientRect();return {left:o?.x||0,top:(o?.y||0)+(t&&window?.scrollY||0),width:o?.width||0,height:o?.height||0}},ce=forwardRef(({optionGroupClassName:e,options:t,value:o,variant:l="standard",postAdornmentProps:s,className:u,fullWidth:a=false,disabled:i=false,required:$=false,error:p=null,isStandalone:A=false,tabIndex:W=-1,menuHtmlAttributes:z,htmlAttributes:D,onChange:M},me)=>{let S=useRef(null),P=useRef(null),[f,h]=useState(false),[G,j]=useState(null),{currentValue:k,setCurrentValue:I}=se(o,A);re([S,P],()=>{f&&h(false);});let F=m=>{if(m.preventDefault(),!i){if(!f){let d=de(S);j({...d,top:d.top+d.height});}h(d=>!d);}},g=t.find(m=>m.value===k),q=useMemo(()=>n.createElement(r.PostAdornmentContentWrapper,{$isShowed:f,$disabled:i,className:x("select-post-adornment-content",f&&"select-post-adornment-content--showed",i&&"select-post-adornment-content--disabled")},s?.children??n.createElement(Suspense,null,n.createElement(pe,{name:"chevron-down"}))),[i,f,s?.children]),Y=useCallback(m=>d=>{M?.(m,d),h(false),I(m);},[M,I,h]);return n.createElement(r.Container,{...D,$fullWidth:a,className:x("select",a&&"select--fullWidth",u)},n.createElement(r.Box,{$variant:l,$disabled:i,$fullWidth:a,$isError:!!p,ref:S,onClick:F,tabIndex:W,className:x("select-box",a&&"select-box--full-width",i&&"select-box--disabled",!!p&&"select-box--error",`select-box--variant-${l}`)},n.createElement(r.FakeSelect,{required:$,disabled:i}),n.createElement(r.InnerBox,{$hasLabel:true,$variant:l,$disabled:i,className:x("select-inner-box",`select-inner-box--variant-${l}`,i&&"select-inner-box--disabled"),title:typeof g?.label=="string"?g?.label:void 0},g?.label),n.createElement(Suspense,null,!!s?.children&&n.createElement(ae,{...s,variant:l},q))),n.createElement(Portal,{className:x("portal-select",e)},n.createElement(Suspense,null,f&&n.createElement(fe,{ref:P,options:t,position:G,isShowed:f,optionGroupClassName:e,currentValue:k,htmlAttributes:z,selectOption:Y}))))});ce.displayName="Select";export{ce as Select};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.select",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -26,14 +26,14 @@
     "styled-components": "*",
     "clsx": "*",
     "react-hook-form": "*",
-    "@purr-react-styled-components/components.post-adornment": "0.0.7",
-    "@purr-react-styled-components/utils.helpers": "0.0.6",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-core/components.portal": "0.0.7",
-    "@purr-core/hooks.block": "0.0.9",
-    "@purr-core/hooks.not-click-on-elements": "0.0.7",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7",
-    "@purr-react-styled-components/components.icon": "0.0.7"
+    "@purr-react-styled-components/components.post-adornment": "0.0.9",
+    "@purr-react-styled-components/utils.helpers": "0.0.8",
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-react-styled-components/components.icon": "0.0.9",
+    "@purr-core/components.portal": "0.0.9",
+    "@purr-core/hooks.block": "0.0.11",
+    "@purr-core/hooks.not-click-on-elements": "0.0.9",
+    "@purr-core/hooks.sync-state-with-props": "0.0.9"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -42,6 +42,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-M55fIE1j.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),m=require("clsx"),s=require("react"),n=require("./index-Du2pJQ-t.cjs"),S=s.memo(({value:t,displayedValue:e,label:l,disabled:c,htmlAttributes:d,handleSelectOption:a})=>s.createElement(n.Styled.Option,{...d,$selected:t===e,$disabled:c,key:t,className:m("select-option",t===e&&"select-option--selected",c&&"select-option--disabled"),onClick:a(t),title:typeof l=="string"?l:void 0},l));S.displayName="SelectOption";const y=s.forwardRef(({options:t,position:e,isShowed:l,currentValue:c,optionGroupClassName:d,htmlAttributes:a,selectOption:u},$)=>{const b=s.useMemo(()=>t.map(r=>h.jsx(S,{value:r.value,displayedValue:c,label:r.label,disabled:!!r.disabled,htmlAttributes:r.htmlAttributes,handleSelectOption:u},r.value)),[c,t,u]);return h.jsx(n.Styled.OptionGroup,{...a,$position:e,$isShowed:l,ref:$,className:m("select-options",!!(e!=null&&e.top)&&`select-options--position-top-${e.top}`,!!(e!=null&&e.left)&&`select-options--position-left-${e.left}`,!!(e!=null&&e.height)&&`select-options--position-height-${e.height}`,!!(e!=null&&e.width)&&`select-options--position-width-${e.width}`,l&&"select-options--showed",d),children:b})});y.displayName="SelectMenu";exports.SelectMenu=y;

package/dist/_menu-Oax72zVV.js

@@ -1,29 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import h from "clsx";
-import { memo as b, createElement as w, forwardRef as y, useMemo as O } from "react";
-import { S as f } from "./index-CPWuXrMI.js";
-const $ = b(({
-  value: t,
-  displayedValue: e,
-  label: l,
-  disabled: c,
-  htmlAttributes: d,
-  handleSelectOption: m
-}) => /* @__PURE__ */ w(f.Option, { ...d, $selected: t === e, $disabled: c, key: t, className: h("select-option", t === e && "select-option--selected", c && "select-option--disabled"), onClick: m(t), title: typeof l == "string" ? l : void 0 }, l));
-$.displayName = "SelectOption";
-const g = y(({
-  options: t,
-  position: e,
-  isShowed: l,
-  currentValue: c,
-  optionGroupClassName: d,
-  htmlAttributes: m,
-  selectOption: s
-}, u) => {
-  const S = O(() => t.map((r) => /* @__PURE__ */ a($, { value: r.value, displayedValue: c, label: r.label, disabled: !!r.disabled, htmlAttributes: r.htmlAttributes, handleSelectOption: s }, r.value)), [c, t, s]);
-  return /* @__PURE__ */ a(f.OptionGroup, { ...m, $position: e, $isShowed: l, ref: u, className: h("select-options", !!(e != null && e.top) && `select-options--position-top-${e.top}`, !!(e != null && e.left) && `select-options--position-left-${e.left}`, !!(e != null && e.height) && `select-options--position-height-${e.height}`, !!(e != null && e.width) && `select-options--position-width-${e.width}`, l && "select-options--showed", d), children: S });
-});
-g.displayName = "SelectMenu";
-export {
-  g as SelectMenu
-};

package/dist/_style.d.ts

@@ -1,35 +0,0 @@
-import { TSelectVariant } from './_types';
-
-export declare const Styled: {
-    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $fullWidth: boolean;
-    }>> & string;
-    Option: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $selected: boolean;
-        $disabled?: boolean;
-    }>> & string;
-    OptionGroup: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $isShowed: boolean;
-        $position: {
-            left: number;
-            top: number;
-            width: number;
-        } | null;
-    }>> & string;
-    Box: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $fullWidth: boolean;
-        $disabled: boolean;
-        $variant: TSelectVariant;
-        $isError: boolean;
-    }>> & string;
-    InnerBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $hasLabel: boolean;
-        $variant: TSelectVariant;
-        $disabled: boolean;
-    }>> & string;
-    FakeSelect: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
-    PostAdornmentContentWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $isShowed: boolean;
-        $disabled?: boolean;
-    }>> & string;
-};

package/dist/index-CPWuXrMI.js

@@ -1,133 +0,0 @@
-import { jsx as i, jsxs as v } from "react/jsx-runtime";
-import p from "clsx";
-import { lazy as b, forwardRef as L, useRef as N, useState as C, useMemo as D, Suspense as w, useCallback as Y } from "react";
-import { Portal as $ } from "@purr-core/components.portal";
-import q from "@purr-core/hooks.not-click-on-elements";
-import H from "@purr-core/hooks.sync-state-with-props";
-import c, { css as I } from "styled-components";
-import { getVariantStyle as J } from "@purr-react-styled-components/utils.helpers";
-const K = (e) => e.$variant === "standard" ? I(["padding:0px 35px 0px 0px;"]) : I(["padding:0px 35px 0px 14px;"]), x = {
-  Container: c.div.withConfig({
-    displayName: "_style__Container",
-    componentId: "sc-1ikgo6d-0"
-  })(["position:relative;width:", ";min-width:210px;"], ({
-    $fullWidth: e
-  }) => e ? "100%" : "fit-content"),
-  Option: c.span.withConfig({
-    displayName: "_style__Option",
-    componentId: "sc-1ikgo6d-1"
-  })(["display:block;transition:all 200ms ease-in-out;cursor:pointer;padding:0px 14px;height:36px;line-height:36px;background-color:", ";color:", ';overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:"Verdana",sans-serif;font-size:16px;&:hover{background-color:#ffffff14;}'], ({
-    $selected: e,
-    $disabled: s
-  }) => s ? "#121212" : e ? "#90caf929" : "transparent", ({
-    $disabled: e
-  }) => e ? "#ffffff80" : "#ffffff"),
-  OptionGroup: c.div.withConfig({
-    displayName: "_style__OptionGroup",
-    componentId: "sc-1ikgo6d-2"
-  })(["position:absolute;display:", ";top:", "px;left:", "px;width:", "px;padding:6px 0px;z-index:999;background-color:rgb(18,18,18);min-width:120px;border-radius:4px;box-shadow:rgb(0 0 0 / 20%) 0px 5px 5px -3px,rgb(0 0 0 / 14%) 0px 8px 10px 1px,rgb(0 0 0 / 12%) 0px 3px 14px 2px;background-image:linear-gradient(#ffffff1f,#ffffff1f);"], ({
-    $isShowed: e
-  }) => e ? "block" : "none", ({
-    $position: e
-  }) => (e == null ? void 0 : e.top) || 0, ({
-    $position: e
-  }) => (e == null ? void 0 : e.left) || 0, ({
-    $position: e
-  }) => (e == null ? void 0 : e.width) || 0),
-  Box: c.div.withConfig({
-    displayName: "_style__Box",
-    componentId: "sc-1ikgo6d-3"
-  })(["transition:all 200ms ease-in-out;position:relative;width:", ";height:56px;", ";"], ({
-    $fullWidth: e
-  }) => e ? "100%" : "210px", J),
-  InnerBox: c.span.withConfig({
-    displayName: "_style__InnerBox",
-    componentId: "sc-1ikgo6d-4"
-  })(["position:absolute;transition:all 200ms ease-in-out;box-sizing:border-box;width:100%;height:", ";line-height:", ";top:", ";left:0px;background-color:transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ';font-family:"Verdana",sans-serif;font-size:16px;', ";&:focus-visible{outline:none;}"], ({
-    $hasLabel: e
-  }) => e ? "44px" : "56px", ({
-    $hasLabel: e
-  }) => e ? "44px" : "56px", ({
-    $hasLabel: e
-  }) => e ? "12px" : "0px", ({
-    $disabled: e
-  }) => e ? "#ffffff80" : "#ffffff", K),
-  FakeSelect: c.select.withConfig({
-    displayName: "_style__FakeSelect",
-    componentId: "sc-1ikgo6d-5"
-  })(["width:100%;height:100%;opacity:0;cursor:pointer;"]),
-  PostAdornmentContentWrapper: c.div.withConfig({
-    displayName: "_style__PostAdornmentContentWrapper",
-    componentId: "sc-1ikgo6d-6"
-  })(["display:flex;transition:all 350ms ease-in-out;width:20px;height:20px;color:", ";transform:", ";"], ({
-    $disabled: e
-  }) => e ? "#ffffff80" : "#ffffff", ({
-    $isShowed: e
-  }) => e ? "rotate(180deg)" : "none")
-}, Q = b(() => import("@purr-react-styled-components/components.icon").then((e) => ({
-  default: e.Icon
-}))), T = b(() => import("@purr-react-styled-components/components.post-adornment").then((e) => ({
-  default: e.PostAdornment
-}))), U = b(() => import("./_menu-Oax72zVV.js").then((e) => ({
-  default: e.SelectMenu
-}))), X = (e, s = !0) => {
-  var r;
-  const t = (r = e.current) == null ? void 0 : r.getBoundingClientRect();
-  return {
-    left: (t == null ? void 0 : t.x) || 0,
-    top: ((t == null ? void 0 : t.y) || 0) + (s && (window == null ? void 0 : window.scrollY) || 0),
-    width: (t == null ? void 0 : t.width) || 0,
-    height: (t == null ? void 0 : t.height) || 0
-  };
-}, Z = L(({
-  optionGroupClassName: e,
-  options: s,
-  value: t,
-  variant: r = "standard",
-  postAdornmentProps: n,
-  className: B,
-  fullWidth: h = !1,
-  disabled: o = !1,
-  required: z = !1,
-  error: y = null,
-  isStandalone: R = !1,
-  tabIndex: V = -1,
-  menuHtmlAttributes: O,
-  htmlAttributes: W,
-  onChange: m
-}, P) => {
-  const g = N(null), _ = N(null), [f, u] = C(!1), [F, M] = C(null), {
-    currentValue: k,
-    setCurrentValue: S
-  } = H(t, R);
-  q([g, _], () => {
-    f && u(!1);
-  });
-  const j = (d) => {
-    if (d.preventDefault(), !o) {
-      if (!f) {
-        const a = X(g);
-        M({
-          ...a,
-          top: a.top + a.height
-        });
-      }
-      u((a) => !a);
-    }
-  }, l = s.find((d) => d.value === k), E = D(() => /* @__PURE__ */ i(x.PostAdornmentContentWrapper, { $isShowed: f, $disabled: o, className: p("select-post-adornment-content", f && "select-post-adornment-content--showed", o && "select-post-adornment-content--disabled"), children: (n == null ? void 0 : n.children) ?? /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(Q, { name: "chevron-down" }) }) }), [o, f, n == null ? void 0 : n.children]), G = Y((d) => (a) => {
-    m == null || m(d, a), u(!1), S(d);
-  }, [m, S, u]);
-  return /* @__PURE__ */ v(x.Container, { ...W, $fullWidth: h, className: p("select", h && "select--fullWidth", B), children: [
-    /* @__PURE__ */ v(x.Box, { $variant: r, $disabled: o, $fullWidth: h, $isError: !!y, ref: g, onClick: j, tabIndex: V, className: p("select-box", h && "select-box--full-width", o && "select-box--disabled", !!y && "select-box--error", `select-box--variant-${r}`), children: [
-      /* @__PURE__ */ i(x.FakeSelect, { required: z, disabled: o }),
-      /* @__PURE__ */ i(x.InnerBox, { $hasLabel: !0, $variant: r, $disabled: o, className: p("select-inner-box", `select-inner-box--variant-${r}`, o && "select-inner-box--disabled"), title: typeof (l == null ? void 0 : l.label) == "string" ? l == null ? void 0 : l.label : void 0, children: l == null ? void 0 : l.label }),
-      /* @__PURE__ */ i(w, { children: !!(n != null && n.children) && /* @__PURE__ */ i(T, { ...n, variant: r, children: E }) })
-    ] }),
-    /* @__PURE__ */ i($, { className: p("portal-select", e), children: /* @__PURE__ */ i(w, { children: f && /* @__PURE__ */ i(U, { ref: _, options: s, position: F, isShowed: f, optionGroupClassName: e, currentValue: k, htmlAttributes: O, selectOption: G }) }) })
-  ] });
-});
-Z.displayName = "Select";
-export {
-  x as S,
-  Z as a
-};

package/dist/index-Du2pJQ-t.cjs

@@ -1 +0,0 @@
-"use strict";var M=Object.create;var k=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var Y=(e,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of G(i))!D.call(e,n)&&n!==t&&k(e,n,{get:()=>i[n],enumerable:!(o=E(i,n))||o.enumerable});return e};var v=(e,i,t)=>(t=e!=null?M(L(e)):{},Y(i||!e||!e.__esModule?k(t,"default",{value:e,enumerable:!0}):t,e));const s=require("react/jsx-runtime"),h=require("clsx"),l=require("react"),$=require("@purr-core/components.portal"),H=require("@purr-core/hooks.not-click-on-elements"),J=require("@purr-core/hooks.sync-state-with-props"),a=require("styled-components"),K=require("@purr-react-styled-components/utils.helpers"),Q=e=>e.$variant==="standard"?a.css(["padding:0px 35px 0px 0px;"]):a.css(["padding:0px 35px 0px 14px;"]),p={Container:a.div.withConfig({displayName:"_style__Container",componentId:"sc-1ikgo6d-0"})(["position:relative;width:",";min-width:210px;"],({$fullWidth:e})=>e?"100%":"fit-content"),Option:a.span.withConfig({displayName:"_style__Option",componentId:"sc-1ikgo6d-1"})(["display:block;transition:all 200ms ease-in-out;cursor:pointer;padding:0px 14px;height:36px;line-height:36px;background-color:",";color:",';overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:"Verdana",sans-serif;font-size:16px;&:hover{background-color:#ffffff14;}'],({$selected:e,$disabled:i})=>i?"#121212":e?"#90caf929":"transparent",({$disabled:e})=>e?"#ffffff80":"#ffffff"),OptionGroup:a.div.withConfig({displayName:"_style__OptionGroup",componentId:"sc-1ikgo6d-2"})(["position:absolute;display:",";top:","px;left:","px;width:","px;padding:6px 0px;z-index:999;background-color:rgb(18,18,18);min-width:120px;border-radius:4px;box-shadow:rgb(0 0 0 / 20%) 0px 5px 5px -3px,rgb(0 0 0 / 14%) 0px 8px 10px 1px,rgb(0 0 0 / 12%) 0px 3px 14px 2px;background-image:linear-gradient(#ffffff1f,#ffffff1f);"],({$isShowed:e})=>e?"block":"none",({$position:e})=>(e==null?void 0:e.top)||0,({$position:e})=>(e==null?void 0:e.left)||0,({$position:e})=>(e==null?void 0:e.width)||0),Box:a.div.withConfig({displayName:"_style__Box",componentId:"sc-1ikgo6d-3"})(["transition:all 200ms ease-in-out;position:relative;width:",";height:56px;",";"],({$fullWidth:e})=>e?"100%":"210px",K.getVariantStyle),InnerBox:a.span.withConfig({displayName:"_style__InnerBox",componentId:"sc-1ikgo6d-4"})(["position:absolute;transition:all 200ms ease-in-out;box-sizing:border-box;width:100%;height:",";line-height:",";top:",";left:0px;background-color:transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:",';font-family:"Verdana",sans-serif;font-size:16px;',";&:focus-visible{outline:none;}"],({$hasLabel:e})=>e?"44px":"56px",({$hasLabel:e})=>e?"44px":"56px",({$hasLabel:e})=>e?"12px":"0px",({$disabled:e})=>e?"#ffffff80":"#ffffff",Q),FakeSelect:a.select.withConfig({displayName:"_style__FakeSelect",componentId:"sc-1ikgo6d-5"})(["width:100%;height:100%;opacity:0;cursor:pointer;"]),PostAdornmentContentWrapper:a.div.withConfig({displayName:"_style__PostAdornmentContentWrapper",componentId:"sc-1ikgo6d-6"})(["display:flex;transition:all 350ms ease-in-out;width:20px;height:20px;color:",";transform:",";"],({$disabled:e})=>e?"#ffffff80":"#ffffff",({$isShowed:e})=>e?"rotate(180deg)":"none")},T=l.lazy(()=>import("@purr-react-styled-components/components.icon").then(e=>({default:e.Icon}))),U=l.lazy(()=>import("@purr-react-styled-components/components.post-adornment").then(e=>({default:e.PostAdornment}))),X=l.lazy(()=>Promise.resolve().then(()=>require("./_menu-M55fIE1j.cjs")).then(e=>({default:e.SelectMenu}))),Z=(e,i=!0)=>{var o;const t=(o=e.current)==null?void 0:o.getBoundingClientRect();return{left:(t==null?void 0:t.x)||0,top:((t==null?void 0:t.y)||0)+(i&&(window==null?void 0:window.scrollY)||0),width:(t==null?void 0:t.width)||0,height:(t==null?void 0:t.height)||0}},N=l.forwardRef(({optionGroupClassName:e,options:i,value:t,variant:o="standard",postAdornmentProps:n,className:j,fullWidth:u=!1,disabled:r=!1,required:C=!1,error:y=null,isStandalone:I=!1,tabIndex:q=-1,menuHtmlAttributes:B,htmlAttributes:z,onChange:g},P)=>{const m=l.useRef(null),b=l.useRef(null),[f,w]=l.useState(!1),[R,V]=l.useState(null),{currentValue:_,setCurrentValue:S}=J(t,I);H([m,b],()=>{f&&w(!1)});const O=d=>{if(d.preventDefault(),!r){if(!f){const x=Z(m);V({...x,top:x.top+x.height})}w(x=>!x)}},c=i.find(d=>d.value===_),W=l.useMemo(()=>s.jsx(p.PostAdornmentContentWrapper,{$isShowed:f,$disabled:r,className:h("select-post-adornment-content",f&&"select-post-adornment-content--showed",r&&"select-post-adornment-content--disabled"),children:(n==null?void 0:n.children)??s.jsx(l.Suspense,{children:s.jsx(T,{name:"chevron-down"})})}),[r,f,n==null?void 0:n.children]),F=l.useCallback(d=>x=>{g==null||g(d,x),w(!1),S(d)},[g,S,w]);return s.jsxs(p.Container,{...z,$fullWidth:u,className:h("select",u&&"select--fullWidth",j),children:[s.jsxs(p.Box,{$variant:o,$disabled:r,$fullWidth:u,$isError:!!y,ref:m,onClick:O,tabIndex:q,className:h("select-box",u&&"select-box--full-width",r&&"select-box--disabled",!!y&&"select-box--error",`select-box--variant-${o}`),children:[s.jsx(p.FakeSelect,{required:C,disabled:r}),s.jsx(p.InnerBox,{$hasLabel:!0,$variant:o,$disabled:r,className:h("select-inner-box",`select-inner-box--variant-${o}`,r&&"select-inner-box--disabled"),title:typeof(c==null?void 0:c.label)=="string"?c==null?void 0:c.label:void 0,children:c==null?void 0:c.label}),s.jsx(l.Suspense,{children:!!(n!=null&&n.children)&&s.jsx(U,{...n,variant:o,children:W})})]}),s.jsx($.Portal,{className:h("portal-select",e),children:s.jsx(l.Suspense,{children:f&&s.jsx(X,{ref:b,options:i,position:R,isShowed:f,optionGroupClassName:e,currentValue:_,htmlAttributes:B,selectOption:F})})})]})});N.displayName="Select";exports.Select=N;exports.Styled=p;