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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),m=require("clsx"),s=require("react"),n=require("./index-W-_2mM5B.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;
1
+ "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;
@@ -1,7 +1,7 @@
1
1
  import { jsx as a } from "react/jsx-runtime";
2
2
  import h from "clsx";
3
3
  import { memo as b, createElement as w, forwardRef as y, useMemo as O } from "react";
4
- import { S as f } from "./index-CiHv3F2P.js";
4
+ import { S as f } from "./index-CPWuXrMI.js";
5
5
  const $ = b(({
6
6
  value: t,
7
7
  displayedValue: e,
package/dist/_types.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
2
2
  import { FieldError } from 'react-hook-form';
3
3
  import { IExtendable } from '@purr-core/utils.definitions';
4
- import { IHelperTextProps } from '@purr-react-styled-components/components.helper-text';
5
- import { ILabelProps } from '@purr-react-styled-components/components.label';
6
4
  import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
7
5
 
8
6
  export interface ISelectOption {
@@ -35,9 +33,7 @@ export interface ISelectProps {
35
33
  options: ISelectOption[];
36
34
  value?: string;
37
35
  variant?: TSelectVariant;
38
- labelProps?: ILabelProps;
39
36
  postAdornmentProps?: IPostAdornmentProps;
40
- helperTextProps?: IHelperTextProps;
41
37
  htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
42
38
  menuHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
43
39
  tabIndex?: number;
@@ -0,0 +1,133 @@
1
+ import { jsx as i, jsxs as v } from "react/jsx-runtime";
2
+ import p from "clsx";
3
+ import { lazy as b, forwardRef as L, useRef as N, useState as C, useMemo as D, Suspense as w, useCallback as Y } from "react";
4
+ import { Portal as $ } from "@purr-core/components.portal";
5
+ import q from "@purr-core/hooks.not-click-on-elements";
6
+ import H from "@purr-core/hooks.sync-state-with-props";
7
+ import c, { css as I } from "styled-components";
8
+ import { getVariantStyle as J } from "@purr-react-styled-components/utils.helpers";
9
+ const K = (e) => e.$variant === "standard" ? I(["padding:0px 35px 0px 0px;"]) : I(["padding:0px 35px 0px 14px;"]), x = {
10
+ Container: c.div.withConfig({
11
+ displayName: "_style__Container",
12
+ componentId: "sc-1ikgo6d-0"
13
+ })(["position:relative;width:", ";min-width:210px;"], ({
14
+ $fullWidth: e
15
+ }) => e ? "100%" : "fit-content"),
16
+ Option: c.span.withConfig({
17
+ displayName: "_style__Option",
18
+ componentId: "sc-1ikgo6d-1"
19
+ })(["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;}'], ({
20
+ $selected: e,
21
+ $disabled: s
22
+ }) => s ? "#121212" : e ? "#90caf929" : "transparent", ({
23
+ $disabled: e
24
+ }) => e ? "#ffffff80" : "#ffffff"),
25
+ OptionGroup: c.div.withConfig({
26
+ displayName: "_style__OptionGroup",
27
+ componentId: "sc-1ikgo6d-2"
28
+ })(["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);"], ({
29
+ $isShowed: e
30
+ }) => e ? "block" : "none", ({
31
+ $position: e
32
+ }) => (e == null ? void 0 : e.top) || 0, ({
33
+ $position: e
34
+ }) => (e == null ? void 0 : e.left) || 0, ({
35
+ $position: e
36
+ }) => (e == null ? void 0 : e.width) || 0),
37
+ Box: c.div.withConfig({
38
+ displayName: "_style__Box",
39
+ componentId: "sc-1ikgo6d-3"
40
+ })(["transition:all 200ms ease-in-out;position:relative;width:", ";height:56px;", ";"], ({
41
+ $fullWidth: e
42
+ }) => e ? "100%" : "210px", J),
43
+ InnerBox: c.span.withConfig({
44
+ displayName: "_style__InnerBox",
45
+ componentId: "sc-1ikgo6d-4"
46
+ })(["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;}"], ({
47
+ $hasLabel: e
48
+ }) => e ? "44px" : "56px", ({
49
+ $hasLabel: e
50
+ }) => e ? "44px" : "56px", ({
51
+ $hasLabel: e
52
+ }) => e ? "12px" : "0px", ({
53
+ $disabled: e
54
+ }) => e ? "#ffffff80" : "#ffffff", K),
55
+ FakeSelect: c.select.withConfig({
56
+ displayName: "_style__FakeSelect",
57
+ componentId: "sc-1ikgo6d-5"
58
+ })(["width:100%;height:100%;opacity:0;cursor:pointer;"]),
59
+ PostAdornmentContentWrapper: c.div.withConfig({
60
+ displayName: "_style__PostAdornmentContentWrapper",
61
+ componentId: "sc-1ikgo6d-6"
62
+ })(["display:flex;transition:all 350ms ease-in-out;width:20px;height:20px;color:", ";transform:", ";"], ({
63
+ $disabled: e
64
+ }) => e ? "#ffffff80" : "#ffffff", ({
65
+ $isShowed: e
66
+ }) => e ? "rotate(180deg)" : "none")
67
+ }, Q = b(() => import("@purr-react-styled-components/components.icon").then((e) => ({
68
+ default: e.Icon
69
+ }))), T = b(() => import("@purr-react-styled-components/components.post-adornment").then((e) => ({
70
+ default: e.PostAdornment
71
+ }))), U = b(() => import("./_menu-Oax72zVV.js").then((e) => ({
72
+ default: e.SelectMenu
73
+ }))), X = (e, s = !0) => {
74
+ var r;
75
+ const t = (r = e.current) == null ? void 0 : r.getBoundingClientRect();
76
+ return {
77
+ left: (t == null ? void 0 : t.x) || 0,
78
+ top: ((t == null ? void 0 : t.y) || 0) + (s && (window == null ? void 0 : window.scrollY) || 0),
79
+ width: (t == null ? void 0 : t.width) || 0,
80
+ height: (t == null ? void 0 : t.height) || 0
81
+ };
82
+ }, Z = L(({
83
+ optionGroupClassName: e,
84
+ options: s,
85
+ value: t,
86
+ variant: r = "standard",
87
+ postAdornmentProps: n,
88
+ className: B,
89
+ fullWidth: h = !1,
90
+ disabled: o = !1,
91
+ required: z = !1,
92
+ error: y = null,
93
+ isStandalone: R = !1,
94
+ tabIndex: V = -1,
95
+ menuHtmlAttributes: O,
96
+ htmlAttributes: W,
97
+ onChange: m
98
+ }, P) => {
99
+ const g = N(null), _ = N(null), [f, u] = C(!1), [F, M] = C(null), {
100
+ currentValue: k,
101
+ setCurrentValue: S
102
+ } = H(t, R);
103
+ q([g, _], () => {
104
+ f && u(!1);
105
+ });
106
+ const j = (d) => {
107
+ if (d.preventDefault(), !o) {
108
+ if (!f) {
109
+ const a = X(g);
110
+ M({
111
+ ...a,
112
+ top: a.top + a.height
113
+ });
114
+ }
115
+ u((a) => !a);
116
+ }
117
+ }, 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) => {
118
+ m == null || m(d, a), u(!1), S(d);
119
+ }, [m, S, u]);
120
+ return /* @__PURE__ */ v(x.Container, { ...W, $fullWidth: h, className: p("select", h && "select--fullWidth", B), children: [
121
+ /* @__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: [
122
+ /* @__PURE__ */ i(x.FakeSelect, { required: z, disabled: o }),
123
+ /* @__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 }),
124
+ /* @__PURE__ */ i(w, { children: !!(n != null && n.children) && /* @__PURE__ */ i(T, { ...n, variant: r, children: E }) })
125
+ ] }),
126
+ /* @__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 }) }) })
127
+ ] });
128
+ });
129
+ Z.displayName = "Select";
130
+ export {
131
+ x as S,
132
+ Z as a
133
+ };
@@ -0,0 +1 @@
1
+ "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;
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-W-_2mM5B.cjs");exports.Select=e.Select;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Du2pJQ-t.cjs");exports.Select=e.Select;
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as o } from "./index-CiHv3F2P.js";
1
+ import { a as o } from "./index-CPWuXrMI.js";
2
2
  export {
3
3
  o as Select
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purr-react-styled-components/components.select",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -26,16 +26,14 @@
26
26
  "styled-components": "*",
27
27
  "clsx": "*",
28
28
  "react-hook-form": "*",
29
- "@purr-react-styled-components/components.helper-text": "0.0.6",
30
- "@purr-react-styled-components/components.post-adornment": "0.0.6",
31
- "@purr-react-styled-components/components.label": "0.0.6",
29
+ "@purr-react-styled-components/components.post-adornment": "0.0.7",
32
30
  "@purr-react-styled-components/utils.helpers": "0.0.6",
33
- "@purr-core/utils.definitions": "0.0.9",
34
- "@purr-react-styled-components/components.icon": "0.0.6",
35
- "@purr-core/components.portal": "0.0.6",
36
- "@purr-core/hooks.block": "0.0.8",
31
+ "@purr-core/utils.definitions": "0.0.10",
32
+ "@purr-core/components.portal": "0.0.7",
33
+ "@purr-core/hooks.block": "0.0.9",
37
34
  "@purr-core/hooks.not-click-on-elements": "0.0.7",
38
- "@purr-core/hooks.sync-state-with-props": "0.0.7"
35
+ "@purr-core/hooks.sync-state-with-props": "0.0.7",
36
+ "@purr-react-styled-components/components.icon": "0.0.7"
39
37
  },
40
38
  "author": "@DinhThienPhuc",
41
39
  "license": "ISC",
@@ -1,142 +0,0 @@
1
- import { jsx as n, jsxs as I } from "react/jsx-runtime";
2
- import u from "clsx";
3
- import { lazy as w, forwardRef as Y, useRef as B, useState as L, useMemo as $, Suspense as g, useCallback as J } from "react";
4
- import { Portal as K } from "@purr-core/components.portal";
5
- import Q from "@purr-core/hooks.block";
6
- import U from "@purr-core/hooks.not-click-on-elements";
7
- import X from "@purr-core/hooks.sync-state-with-props";
8
- import x, { css as z } from "styled-components";
9
- import { getVariantStyle as Z } from "@purr-react-styled-components/utils.helpers";
10
- const q = (e) => e.$variant === "standard" ? z(["padding:0px 35px 0px 0px;"]) : z(["padding:0px 35px 0px 14px;"]), p = {
11
- Container: x.div.withConfig({
12
- displayName: "_style__Container",
13
- componentId: "sc-1ikgo6d-0"
14
- })(["position:relative;width:", ";min-width:210px;"], ({
15
- $fullWidth: e
16
- }) => e ? "100%" : "fit-content"),
17
- Option: x.span.withConfig({
18
- displayName: "_style__Option",
19
- componentId: "sc-1ikgo6d-1"
20
- })(["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;}'], ({
21
- $selected: e,
22
- $disabled: h
23
- }) => h ? "#121212" : e ? "#90caf929" : "transparent", ({
24
- $disabled: e
25
- }) => e ? "#ffffff80" : "#ffffff"),
26
- OptionGroup: x.div.withConfig({
27
- displayName: "_style__OptionGroup",
28
- componentId: "sc-1ikgo6d-2"
29
- })(["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);"], ({
30
- $isShowed: e
31
- }) => e ? "block" : "none", ({
32
- $position: e
33
- }) => (e == null ? void 0 : e.top) || 0, ({
34
- $position: e
35
- }) => (e == null ? void 0 : e.left) || 0, ({
36
- $position: e
37
- }) => (e == null ? void 0 : e.width) || 0),
38
- Box: x.div.withConfig({
39
- displayName: "_style__Box",
40
- componentId: "sc-1ikgo6d-3"
41
- })(["transition:all 200ms ease-in-out;position:relative;width:", ";height:56px;", ";"], ({
42
- $fullWidth: e
43
- }) => e ? "100%" : "210px", Z),
44
- InnerBox: x.span.withConfig({
45
- displayName: "_style__InnerBox",
46
- componentId: "sc-1ikgo6d-4"
47
- })(["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;}"], ({
48
- $hasLabel: e
49
- }) => e ? "44px" : "56px", ({
50
- $hasLabel: e
51
- }) => e ? "44px" : "56px", ({
52
- $hasLabel: e
53
- }) => e ? "12px" : "0px", ({
54
- $disabled: e
55
- }) => e ? "#ffffff80" : "#ffffff", q),
56
- FakeSelect: x.select.withConfig({
57
- displayName: "_style__FakeSelect",
58
- componentId: "sc-1ikgo6d-5"
59
- })(["width:100%;height:100%;opacity:0;cursor:pointer;"]),
60
- PostAdornmentContentWrapper: x.div.withConfig({
61
- displayName: "_style__PostAdornmentContentWrapper",
62
- componentId: "sc-1ikgo6d-6"
63
- })(["display:flex;transition:all 350ms ease-in-out;width:20px;height:20px;color:", ";transform:", ";"], ({
64
- $disabled: e
65
- }) => e ? "#ffffff80" : "#ffffff", ({
66
- $isShowed: e
67
- }) => e ? "rotate(180deg)" : "none")
68
- }, A = w(() => import("@purr-react-styled-components/components.helper-text").then((e) => ({
69
- default: e.HelperText
70
- }))), T = w(() => import("@purr-react-styled-components/components.icon").then((e) => ({
71
- default: e.Icon
72
- }))), P = w(() => import("@purr-react-styled-components/components.label").then((e) => ({
73
- default: e.Label
74
- }))), ee = w(() => import("@purr-react-styled-components/components.post-adornment").then((e) => ({
75
- default: e.PostAdornment
76
- }))), te = w(() => import("./_menu-CSgQeF40.js").then((e) => ({
77
- default: e.SelectMenu
78
- }))), ne = (e, h = !0) => {
79
- var f;
80
- const t = (f = e.current) == null ? void 0 : f.getBoundingClientRect();
81
- return {
82
- left: (t == null ? void 0 : t.x) || 0,
83
- top: ((t == null ? void 0 : t.y) || 0) + (h && (window == null ? void 0 : window.scrollY) || 0),
84
- width: (t == null ? void 0 : t.width) || 0,
85
- height: (t == null ? void 0 : t.height) || 0
86
- };
87
- }, ie = Y(({
88
- optionGroupClassName: e,
89
- options: h,
90
- value: t,
91
- variant: f = "standard",
92
- labelProps: c,
93
- postAdornmentProps: o,
94
- helperTextProps: s,
95
- className: R,
96
- fullWidth: y = !1,
97
- disabled: i = !1,
98
- required: v = !1,
99
- error: r = null,
100
- isStandalone: V = !1,
101
- tabIndex: E = -1,
102
- menuHtmlAttributes: F,
103
- htmlAttributes: O,
104
- onChange: _
105
- }, fe) => {
106
- const S = B(null), C = B(null), [l, k] = L(!1), [W, M] = L(null), {
107
- currentValue: b,
108
- setCurrentValue: N
109
- } = X(t, V);
110
- U([S, C], () => {
111
- l && k(!1);
112
- });
113
- const j = (m) => {
114
- if (m.preventDefault(), !i) {
115
- if (!l) {
116
- const d = ne(S);
117
- M({
118
- ...d,
119
- top: d.top + d.height
120
- });
121
- }
122
- k((d) => !d);
123
- }
124
- }, G = Q(() => !!(i || l || b)), a = h.find((m) => m.value === b), H = $(() => /* @__PURE__ */ n(p.PostAdornmentContentWrapper, { $isShowed: l, $disabled: i, className: u("select-post-adornment-content", l && "select-post-adornment-content--showed", i && "select-post-adornment-content--disabled"), children: (o == null ? void 0 : o.children) ?? /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(T, { name: "chevron-down" }) }) }), [i, l, o == null ? void 0 : o.children]), D = J((m) => (d) => {
125
- _ == null || _(m, d), k(!1), N(m);
126
- }, [_, N, k]);
127
- return /* @__PURE__ */ I(p.Container, { ...O, $fullWidth: y, className: u("select", y && "select--fullWidth", R), children: [
128
- /* @__PURE__ */ I(p.Box, { $variant: f, $disabled: i, $fullWidth: y, $isError: !!r, ref: S, onClick: j, tabIndex: E, className: u("select-box", y && "select-box--full-width", i && "select-box--disabled", !!r && "select-box--error", `select-box--variant-${f}`), children: [
129
- /* @__PURE__ */ n(g, { children: !!(c != null && c.children) && /* @__PURE__ */ n(P, { ...c, required: v, disabled: i, variant: f, isLabelCollapsed: G, isFocused: l, isError: !!r }) }),
130
- /* @__PURE__ */ n(p.FakeSelect, { required: v, disabled: i }),
131
- /* @__PURE__ */ n(p.InnerBox, { $hasLabel: !!(c != null && c.children), $variant: f, $disabled: i, className: u("select-inner-box", `select-inner-box--variant-${f}`, !!(c != null && c.children) && "select-inner-box--hasLabel", i && "select-inner-box--disabled"), title: typeof (a == null ? void 0 : a.label) == "string" ? a == null ? void 0 : a.label : void 0, children: a == null ? void 0 : a.label }),
132
- /* @__PURE__ */ n(g, { children: !!(o != null && o.children) && /* @__PURE__ */ n(ee, { ...o, variant: f, children: H }) }),
133
- /* @__PURE__ */ n(g, { children: !!(s != null && s.children) && /* @__PURE__ */ n(A, { ...s, isError: !!r, variant: f, children: (r == null ? void 0 : r.message) ?? (s == null ? void 0 : s.children) ?? "" }) })
134
- ] }),
135
- /* @__PURE__ */ n(K, { className: u("portal-select", e), children: /* @__PURE__ */ n(g, { children: l && /* @__PURE__ */ n(te, { ref: C, options: h, position: W, isShowed: l, optionGroupClassName: e, currentValue: b, htmlAttributes: F, selectOption: D }) }) })
136
- ] });
137
- });
138
- ie.displayName = "Select";
139
- export {
140
- p as S,
141
- ie as a
142
- };
@@ -1 +0,0 @@
1
- "use strict";var G=Object.create;var N=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var J=(e,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of D(s))!$.call(e,i)&&i!==t&&N(e,i,{get:()=>s[i],enumerable:!(l=H(s,i))||l.enumerable});return e};var _=(e,s,t)=>(t=e!=null?G(Y(e)):{},J(s||!e||!e.__esModule?N(t,"default",{value:e,enumerable:!0}):t,e));const c=require("react/jsx-runtime"),m=require("clsx"),n=require("react"),K=require("@purr-core/components.portal"),Q=require("@purr-core/hooks.block"),U=require("@purr-core/hooks.not-click-on-elements"),X=require("@purr-core/hooks.sync-state-with-props"),d=require("styled-components"),Z=require("@purr-react-styled-components/utils.helpers"),A=e=>e.$variant==="standard"?d.css(["padding:0px 35px 0px 0px;"]):d.css(["padding:0px 35px 0px 14px;"]),p={Container:d.div.withConfig({displayName:"_style__Container",componentId:"sc-1ikgo6d-0"})(["position:relative;width:",";min-width:210px;"],({$fullWidth:e})=>e?"100%":"fit-content"),Option:d.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:d.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:d.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",Z.getVariantStyle),InnerBox:d.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",A),FakeSelect:d.select.withConfig({displayName:"_style__FakeSelect",componentId:"sc-1ikgo6d-5"})(["width:100%;height:100%;opacity:0;cursor:pointer;"]),PostAdornmentContentWrapper:d.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=n.lazy(()=>import("@purr-react-styled-components/components.helper-text").then(e=>({default:e.HelperText}))),P=n.lazy(()=>import("@purr-react-styled-components/components.icon").then(e=>({default:e.Icon}))),ee=n.lazy(()=>import("@purr-react-styled-components/components.label").then(e=>({default:e.Label}))),te=n.lazy(()=>import("@purr-react-styled-components/components.post-adornment").then(e=>({default:e.PostAdornment}))),ne=n.lazy(()=>Promise.resolve().then(()=>require("./_menu-Mw9ayM10.cjs")).then(e=>({default:e.SelectMenu}))),ie=(e,s=!0)=>{var l;const t=(l=e.current)==null?void 0:l.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}},I=n.forwardRef(({optionGroupClassName:e,options:s,value:t,variant:l="standard",labelProps:i,postAdornmentProps:o,helperTextProps:x,className:q,fullWidth:w=!1,disabled:f=!1,required:v=!1,error:u=null,isStandalone:z=!1,tabIndex:B=-1,menuHtmlAttributes:R,htmlAttributes:L,onChange:y},ce)=>{const k=n.useRef(null),b=n.useRef(null),[a,S]=n.useState(!1),[V,E]=n.useState(null),{currentValue:j,setCurrentValue:C}=X(t,z);U([k,b],()=>{a&&S(!1)});const F=g=>{if(g.preventDefault(),!f){if(!a){const h=ie(k);E({...h,top:h.top+h.height})}S(h=>!h)}},O=Q(()=>!!(f||a||j)),r=s.find(g=>g.value===j),W=n.useMemo(()=>c.jsx(p.PostAdornmentContentWrapper,{$isShowed:a,$disabled:f,className:m("select-post-adornment-content",a&&"select-post-adornment-content--showed",f&&"select-post-adornment-content--disabled"),children:(o==null?void 0:o.children)??c.jsx(n.Suspense,{children:c.jsx(P,{name:"chevron-down"})})}),[f,a,o==null?void 0:o.children]),M=n.useCallback(g=>h=>{y==null||y(g,h),S(!1),C(g)},[y,C,S]);return c.jsxs(p.Container,{...L,$fullWidth:w,className:m("select",w&&"select--fullWidth",q),children:[c.jsxs(p.Box,{$variant:l,$disabled:f,$fullWidth:w,$isError:!!u,ref:k,onClick:F,tabIndex:B,className:m("select-box",w&&"select-box--full-width",f&&"select-box--disabled",!!u&&"select-box--error",`select-box--variant-${l}`),children:[c.jsx(n.Suspense,{children:!!(i!=null&&i.children)&&c.jsx(ee,{...i,required:v,disabled:f,variant:l,isLabelCollapsed:O,isFocused:a,isError:!!u})}),c.jsx(p.FakeSelect,{required:v,disabled:f}),c.jsx(p.InnerBox,{$hasLabel:!!(i!=null&&i.children),$variant:l,$disabled:f,className:m("select-inner-box",`select-inner-box--variant-${l}`,!!(i!=null&&i.children)&&"select-inner-box--hasLabel",f&&"select-inner-box--disabled"),title:typeof(r==null?void 0:r.label)=="string"?r==null?void 0:r.label:void 0,children:r==null?void 0:r.label}),c.jsx(n.Suspense,{children:!!(o!=null&&o.children)&&c.jsx(te,{...o,variant:l,children:W})}),c.jsx(n.Suspense,{children:!!(x!=null&&x.children)&&c.jsx(T,{...x,isError:!!u,variant:l,children:(u==null?void 0:u.message)??(x==null?void 0:x.children)??""})})]}),c.jsx(K.Portal,{className:m("portal-select",e),children:c.jsx(n.Suspense,{children:a&&c.jsx(ne,{ref:b,options:s,position:V,isShowed:a,optionGroupClassName:e,currentValue:j,htmlAttributes:R,selectOption:M})})})]})});I.displayName="Select";exports.Select=I;exports.Styled=p;