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

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.
Files changed (5) hide show
  1. package/dist/index.cjs +82 -0
  2. package/dist/index.d.cts +51 -0
  3. package/dist/index.d.ts +51 -0
  4. package/dist/index.js +82 -0
  5. package/package.json +9 -9
package/dist/index.cjs ADDED
@@ -0,0 +1,82 @@
1
+ '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`
2
+ padding: 0px 35px 0px 0px;
3
+ `:c.css`
4
+ padding: 0px 35px 0px 14px;
5
+ `,r={Container:c__default.default.div`
6
+ position: relative;
7
+ width: ${({$fullWidth:e})=>e?"100%":"fit-content"};
8
+ min-width: 210px;
9
+ `,Option:c__default.default.span`
10
+ display: block;
11
+ transition: all 200ms ease-in-out;
12
+ cursor: pointer;
13
+ padding: 0px 14px;
14
+ height: 36px;
15
+ line-height: 36px;
16
+ background-color: ${({$selected:e,$disabled:t})=>t?"#121212":e?"#90caf929":"transparent"};
17
+ color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
18
+ overflow: hidden;
19
+ white-space: nowrap;
20
+ text-overflow: ellipsis;
21
+ font-family: "Verdana", sans-serif;
22
+ font-size: 16px;
23
+
24
+ &:hover {
25
+ background-color: #ffffff14;
26
+ }
27
+ `,OptionGroup:c__default.default.div`
28
+ position: absolute;
29
+ display: ${({$isShowed:e})=>e?"block":"none"};
30
+ top: ${({$position:e})=>e?.top||0}px;
31
+ left: ${({$position:e})=>e?.left||0}px;
32
+ width: ${({$position:e})=>e?.width||0}px;
33
+ padding: 6px 0px;
34
+ z-index: 999;
35
+ background-color: rgb(18, 18, 18);
36
+ min-width: 120px;
37
+ border-radius: 4px;
38
+ box-shadow:
39
+ rgb(0 0 0 / 20%) 0px 5px 5px -3px,
40
+ rgb(0 0 0 / 14%) 0px 8px 10px 1px,
41
+ rgb(0 0 0 / 12%) 0px 3px 14px 2px;
42
+ background-image: linear-gradient(#ffffff1f, #ffffff1f);
43
+ `,Box:c__default.default.div`
44
+ transition: all 200ms ease-in-out;
45
+ position: relative;
46
+ width: ${({$fullWidth:e})=>e?"100%":"210px"};
47
+ height: 56px;
48
+ ${utils_helpers.getVariantStyle};
49
+ `,InnerBox:c__default.default.span`
50
+ position: absolute;
51
+ transition: all 200ms ease-in-out;
52
+ box-sizing: border-box;
53
+ width: 100%;
54
+ height: ${({$hasLabel:e})=>e?"44px":"56px"};
55
+ line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
56
+ top: ${({$hasLabel:e})=>e?"12px":"0px"};
57
+ left: 0px;
58
+ background-color: transparent;
59
+ overflow: hidden;
60
+ white-space: nowrap;
61
+ text-overflow: ellipsis;
62
+ color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
63
+ font-family: "Verdana", sans-serif;
64
+ font-size: 16px;
65
+ ${Q};
66
+
67
+ &:focus-visible {
68
+ outline: none;
69
+ }
70
+ `,FakeSelect:c__default.default.select`
71
+ width: 100%;
72
+ height: 100%;
73
+ opacity: 0;
74
+ cursor: pointer;
75
+ `,PostAdornmentContentWrapper:c__default.default.div`
76
+ display: flex;
77
+ transition: all 350ms ease-in-out;
78
+ width: 20px;
79
+ height: 20px;
80
+ color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
81
+ transform: ${({$isShowed:e})=>e?"rotate(180deg)":"none"};
82
+ `};});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/index.d.cts ADDED
@@ -0,0 +1,51 @@
1
+ import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
2
+ import { FieldError } from 'react-hook-form';
3
+ import { IExtendable } from '@purr-core/utils.definitions';
4
+ import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
5
+
6
+ interface ISelectOption {
7
+ value: string;
8
+ label: ReactNode;
9
+ disabled?: boolean;
10
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
11
+ }
12
+ interface ISelectOptionProps extends ISelectOption {
13
+ displayedValue?: string;
14
+ handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
15
+ }
16
+ type TSelectVariant = "standard" | "outlined" | "filled";
17
+ interface ISelectMenuProps {
18
+ options: ISelectOption[];
19
+ position: {
20
+ left: number;
21
+ top: number;
22
+ width: number;
23
+ height: number;
24
+ } | null;
25
+ isShowed: boolean;
26
+ currentValue?: string;
27
+ optionGroupClassName?: string;
28
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
29
+ selectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
30
+ }
31
+ interface ISelectProps {
32
+ optionGroupClassName?: string;
33
+ options: ISelectOption[];
34
+ value?: string;
35
+ variant?: TSelectVariant;
36
+ postAdornmentProps?: IPostAdornmentProps;
37
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
38
+ menuHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
39
+ tabIndex?: number;
40
+ className?: string;
41
+ fullWidth?: boolean;
42
+ disabled?: boolean;
43
+ required?: boolean;
44
+ error?: FieldError;
45
+ isStandalone?: boolean;
46
+ onChange?: (value: string, e: MouseEvent<HTMLSpanElement>) => void;
47
+ }
48
+
49
+ declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;
50
+
51
+ export { type ISelectMenuProps, type ISelectOption, type ISelectOptionProps, type ISelectProps, Select, type TSelectVariant };
package/dist/index.d.ts ADDED
@@ -0,0 +1,51 @@
1
+ import React, { ReactNode, HTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
2
+ import { FieldError } from 'react-hook-form';
3
+ import { IExtendable } from '@purr-core/utils.definitions';
4
+ import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
5
+
6
+ interface ISelectOption {
7
+ value: string;
8
+ label: ReactNode;
9
+ disabled?: boolean;
10
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
11
+ }
12
+ interface ISelectOptionProps extends ISelectOption {
13
+ displayedValue?: string;
14
+ handleSelectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
15
+ }
16
+ type TSelectVariant = "standard" | "outlined" | "filled";
17
+ interface ISelectMenuProps {
18
+ options: ISelectOption[];
19
+ position: {
20
+ left: number;
21
+ top: number;
22
+ width: number;
23
+ height: number;
24
+ } | null;
25
+ isShowed: boolean;
26
+ currentValue?: string;
27
+ optionGroupClassName?: string;
28
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
29
+ selectOption: (value: string) => MouseEventHandler<HTMLSpanElement>;
30
+ }
31
+ interface ISelectProps {
32
+ optionGroupClassName?: string;
33
+ options: ISelectOption[];
34
+ value?: string;
35
+ variant?: TSelectVariant;
36
+ postAdornmentProps?: IPostAdornmentProps;
37
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
38
+ menuHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
39
+ tabIndex?: number;
40
+ className?: string;
41
+ fullWidth?: boolean;
42
+ disabled?: boolean;
43
+ required?: boolean;
44
+ error?: FieldError;
45
+ isStandalone?: boolean;
46
+ onChange?: (value: string, e: MouseEvent<HTMLSpanElement>) => void;
47
+ }
48
+
49
+ declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLSelectElement>>;
50
+
51
+ export { type ISelectMenuProps, type ISelectOption, type ISelectOptionProps, type ISelectProps, Select, type TSelectVariant };
package/dist/index.js ADDED
@@ -0,0 +1,82 @@
1
+ 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`
2
+ padding: 0px 35px 0px 0px;
3
+ `:css`
4
+ padding: 0px 35px 0px 14px;
5
+ `,r={Container:c.div`
6
+ position: relative;
7
+ width: ${({$fullWidth:e})=>e?"100%":"fit-content"};
8
+ min-width: 210px;
9
+ `,Option:c.span`
10
+ display: block;
11
+ transition: all 200ms ease-in-out;
12
+ cursor: pointer;
13
+ padding: 0px 14px;
14
+ height: 36px;
15
+ line-height: 36px;
16
+ background-color: ${({$selected:e,$disabled:t})=>t?"#121212":e?"#90caf929":"transparent"};
17
+ color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
18
+ overflow: hidden;
19
+ white-space: nowrap;
20
+ text-overflow: ellipsis;
21
+ font-family: "Verdana", sans-serif;
22
+ font-size: 16px;
23
+
24
+ &:hover {
25
+ background-color: #ffffff14;
26
+ }
27
+ `,OptionGroup:c.div`
28
+ position: absolute;
29
+ display: ${({$isShowed:e})=>e?"block":"none"};
30
+ top: ${({$position:e})=>e?.top||0}px;
31
+ left: ${({$position:e})=>e?.left||0}px;
32
+ width: ${({$position:e})=>e?.width||0}px;
33
+ padding: 6px 0px;
34
+ z-index: 999;
35
+ background-color: rgb(18, 18, 18);
36
+ min-width: 120px;
37
+ border-radius: 4px;
38
+ box-shadow:
39
+ rgb(0 0 0 / 20%) 0px 5px 5px -3px,
40
+ rgb(0 0 0 / 14%) 0px 8px 10px 1px,
41
+ rgb(0 0 0 / 12%) 0px 3px 14px 2px;
42
+ background-image: linear-gradient(#ffffff1f, #ffffff1f);
43
+ `,Box:c.div`
44
+ transition: all 200ms ease-in-out;
45
+ position: relative;
46
+ width: ${({$fullWidth:e})=>e?"100%":"210px"};
47
+ height: 56px;
48
+ ${getVariantStyle};
49
+ `,InnerBox:c.span`
50
+ position: absolute;
51
+ transition: all 200ms ease-in-out;
52
+ box-sizing: border-box;
53
+ width: 100%;
54
+ height: ${({$hasLabel:e})=>e?"44px":"56px"};
55
+ line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
56
+ top: ${({$hasLabel:e})=>e?"12px":"0px"};
57
+ left: 0px;
58
+ background-color: transparent;
59
+ overflow: hidden;
60
+ white-space: nowrap;
61
+ text-overflow: ellipsis;
62
+ color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
63
+ font-family: "Verdana", sans-serif;
64
+ font-size: 16px;
65
+ ${Q};
66
+
67
+ &:focus-visible {
68
+ outline: none;
69
+ }
70
+ `,FakeSelect:c.select`
71
+ width: 100%;
72
+ height: 100%;
73
+ opacity: 0;
74
+ cursor: pointer;
75
+ `,PostAdornmentContentWrapper:c.div`
76
+ display: flex;
77
+ transition: all 350ms ease-in-out;
78
+ width: 20px;
79
+ height: 20px;
80
+ color: ${({$disabled:e})=>e?"#ffffff80":"#ffffff"};
81
+ transform: ${({$isShowed:e})=>e?"rotate(180deg)":"none"};
82
+ `};});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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purr-react-styled-components/components.select",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -26,14 +26,14 @@
26
26
  "styled-components": "*",
27
27
  "clsx": "*",
28
28
  "react-hook-form": "*",
29
- "@purr-react-styled-components/components.post-adornment": "0.0.8",
30
- "@purr-react-styled-components/utils.helpers": "0.0.7",
31
- "@purr-core/utils.definitions": "0.0.11",
32
- "@purr-react-styled-components/components.icon": "0.0.8",
33
- "@purr-core/components.portal": "0.0.8",
34
- "@purr-core/hooks.not-click-on-elements": "0.0.8",
35
- "@purr-core/hooks.sync-state-with-props": "0.0.8",
36
- "@purr-core/hooks.block": "0.0.10"
29
+ "@purr-react-styled-components/components.post-adornment": "0.0.9",
30
+ "@purr-react-styled-components/utils.helpers": "0.0.8",
31
+ "@purr-core/utils.definitions": "0.0.12",
32
+ "@purr-react-styled-components/components.icon": "0.0.9",
33
+ "@purr-core/components.portal": "0.0.9",
34
+ "@purr-core/hooks.block": "0.0.11",
35
+ "@purr-core/hooks.not-click-on-elements": "0.0.9",
36
+ "@purr-core/hooks.sync-state-with-props": "0.0.9"
37
37
  },
38
38
  "author": "@DinhThienPhuc",
39
39
  "license": "ISC",