@soul-refiner/design-system 2.3.4 → 2.3.6
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.
|
@@ -135,6 +135,7 @@
|
|
|
135
135
|
${({$sx:r})=>r||""}
|
|
136
136
|
`,Text=styled__default.default(box.Box)`
|
|
137
137
|
background-color: transparent;
|
|
138
|
+
border-color: transparent !important;
|
|
138
139
|
border: 1px solid transparent;
|
|
139
140
|
color: var(--color-primary-blue-2);
|
|
140
141
|
|
|
@@ -159,7 +160,6 @@
|
|
|
159
160
|
${base}
|
|
160
161
|
${styles.Styles.flex}
|
|
161
162
|
${styles.Styles.padding}
|
|
162
|
-
|
|
163
163
|
${({$sx:r})=>r||""}
|
|
164
164
|
`,Raised=styled__default.default(box.Box)`
|
|
165
165
|
background-color: var(--color-white);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkbox=require("../../input/checkbox/checkbox.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Dropdown=({checkbox:l,children:e,closeOnChange:a=!0,closeOnBlur:t=!0,defaultValue:o="",disabled:r=!1,hasArrow:n,maintainState:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkbox=require("../../input/checkbox/checkbox.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Dropdown=({checkbox:l,children:e,closeOnChange:a=!0,closeOnBlur:t=!0,defaultValue:o="",disabled:r=!1,hasArrow:n,maintainState:d=!0,multiple:c,offset:i=[0,16],onChange:u,open:p="right",options:s,sx:f,trigger:x,containerSx:_,additionalOptions:g,additionalOnChange:h,defaultAdditionalValue:b,useFullWidth:$=!1,...v})=>{const y=React__default.default.useId(),m=React__default.default.useRef(null);var k=React__default.default.useRef(null);const[R,C]=React__default.default.useState(!1),[w,E]=React__default.default.useState(()=>o||(c?[]:"")),[S,O]=React__default.default.useState(b||"");React__default.default.useEffect(()=>{r&&C(!1)},[r]);b=()=>{r||C(e=>!e)};const D=c?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(w)&&w.includes(t)?E(e=>e.filter(e=>e!==t)):E(e=>[t,...e]),a&&C(!1),u&&u(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";w!==t?E(t):E(""),a&&C(!1),u&&u(e)},A=e=>{e.stopPropagation();e=e.target.getAttribute("data-value")??"";S!==e?O(e):O(""),h&&h(e)},W=e=>d&&(c?w.includes(e):e===w);let B=null;return e&&(B=React__default.default.Children.map(e,e=>{if(React__default.default.isValidElement(e)){const{onClick:t,...a}=e.props;return e=a,React__default.default.createElement(Option,{key:e.value,checkbox:!!l,onClick:D,selected:W(e.value),...e})}return null})),s&&(B=s.map((e,t)=>"string"==typeof e&&"break"===e?React__default.default.createElement(Spacer,{key:y+"-spacer-"+t}):React__default.default.createElement(Option,{key:e.value,checkbox:!!l,onClick:D,selected:W(e.value),...e}))),React__default.default.createElement(Wrapper,{$sx:f,tabIndex:0,ref:m,onBlurCapture:e=>{t&&m?.current&&!m?.current?.contains(e.relatedTarget)&&C(!1)},...v},React__default.default.cloneElement(x,"string"==typeof x.type||"Button"!==x.type?.displayName&&"Button"!==x.type?.name?{onClick:b}:{isDropdownOpen:R,onClick:b}),R&&React__default.default.createElement(Container,{$hasArrow:n,$offset:i,$openDirection:p,ref:k,$sx:_,$useFullWidth:$},React__default.default.createElement("div",{style:{display:"flex"}},React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",width:"100%"}},B),!!g?.length&&React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column"}},g.map(e=>React__default.default.createElement(Option,{key:e.value,onClick:A,selected:S===e.value,label:e.label,value:e.value}))))))},Wrapper=styled.styled.div`
|
|
3
3
|
position: relative;
|
|
4
4
|
display: block;
|
|
5
5
|
outline: none;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
box-shadow: var(--elevation-2);
|
|
16
16
|
border-radius: 8px;
|
|
17
17
|
overflow: auto;
|
|
18
|
-
|
|
18
|
+
width: 100%;
|
|
19
19
|
& > div:first-of-type {
|
|
20
20
|
border-radius: 8px 8px 0px 0px;
|
|
21
21
|
}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
`:""}
|
|
41
41
|
${({$offset:e})=>e?`transform: translate(${e[0]}px, ${e[1]}px);`:""}
|
|
42
|
-
`,Option=({checkbox:e,disabled:t,icon:a,label:l,onClick:o,selected:r,sublabel:n,sx:
|
|
42
|
+
`,Option=({checkbox:e,disabled:t,icon:a,label:l,onClick:o,selected:r,sublabel:n,sx:d,value:c,color:i})=>React__default.default.createElement(OptionWrapper,{"data-value":c,onClick:t?void 0:o,$disabled:t,$hasCheckbox:!!e,$hasSublabel:!!n,$selected:r,$sx:d},e?React__default.default.createElement(checkbox.Checkbox,{selected:r}):a,React__default.default.createElement(box.Box,{$dir:"column",$display:"flex"},l&&React__default.default.createElement(paragraph.P,{$color:i||"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},l),n&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,$textClampLines:1},n))),OptionWrapper=(Option.displayName="Dropdown.Option",Dropdown.Option=Option,styled.styled.div`
|
|
43
43
|
position: relative;
|
|
44
44
|
z-index: 1;
|
|
45
45
|
padding: ${({$hasSublabel:e})=>e?10:12}px 16px;
|