@soul-refiner/design-system 2.11.4 → 2.11.5
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,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js"),close=require("../../../icons/basic/close.js"),styles=require("../../../common/styles.js"),filter_option=require("./filter_option.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const Filter=({closeOnBlur:t=!0,disabled:e,graphic:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js"),close=require("../../../icons/basic/close.js"),styles=require("../../../common/styles.js"),filter_option=require("./filter_option.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const Filter=({closeOnBlur:t=!0,disabled:e,graphic:r,graphicAlignment:a="left",resetGraphic:l,label:o="",sx:n,triggerType:c,options:d,defaultValue:i="",closeOnChange:u=!0,optionOnChange:s,optionShowClose:p,checkbox:f,isRadio:_,applyOnClick:g,resetOnClick:v,applyResetActions:y,customerOptionWrapper:h,onReset:b,shouldReset:m=!1})=>{const[x,R]=React.useState([]),E=!!f,$=React.useRef(null);var C=React.useRef(null);const[k,w]=React.useState(!1),[P,S]=React.useState(()=>i||(E?[]:"")),[A,j]=React.useState("");React.useEffect(()=>{R(d)},[]),React.useEffect(()=>{e&&w(!1)},[e]),React.useEffect(()=>{m&&(S(E?[]:""),w(!1),j(o),b?.())},[m,E,o,b]),React.useEffect(()=>{"outlined"===c&&void 0===i&&S(E?[x[0]?.value]:x[0]?.value)},[c,i]),React.useEffect(()=>{if(!k)if(!P||Array.isArray(P)&&0===P.length)j(o);else{const a=e=>{for(const r of e)if("string"!=typeof r){if(r.value===P||Array.isArray(P)&&P.includes(r.value))return r;if(r.children?.length){var t=a(r.children);if(t)return t}}};var e=a(x);"string"==typeof P?j(e?.label??o):Array.isArray(P)&&j(1<P.length?`${e?.label??o} +`+(P.length-1):e?.label??o)}},[P,x,k,o]);var q=[...x.map((a,e)=>{var t;return"string"==typeof a&&"break"===a?React__default.default.createElement(filter_option.Spacer,{key:React__default.default.useId()+"-spacer-"+e}):React__default.default.createElement(filter_option.Option,{key:a.value,onClick:e=>{if(a.children?.length)R(a.children);else if(E){var t=e;t.stopPropagation();const r=t.target.getAttribute("data-value")??"";Array.isArray(P)&&P.includes(r)?S(e=>e.filter(e=>e!==r)):S(e=>[r,...e]),u&&!g&&w(!1),s&&s(t)}else(t=e).stopPropagation(),e=t.target.getAttribute("data-value")??"",P!==e?S(e):S(""),u&&!g&&w(!1),s&&s(t)},selected:(t=a.value,E?P.includes(t):t===P),checkbox:f,radio:!E&&"pill"===c&&_,showClose:void 0===p?0===e&&"pill"===c:p,onClose:()=>w(!1),...a})}),"pill"===c&&React__default.default.createElement(filter_option.Spacer,{key:"spacer-"+d.length})],D=l&&("string"==typeof P?!!P:!!P.length);return React__default.default.createElement(Wrapper,{$sx:n,tabIndex:0,ref:$,onBlurCapture:e=>{t&&$?.current&&!$?.current?.contains(e.relatedTarget)&&w(!1)}},React__default.default.createElement(FilterTrigger,{disabled:e,graphic:r,graphicAlignment:a,label:o,onClick:()=>{e||w(e=>!e)},onReset:l?e=>{e.stopPropagation(),v&&v(e),S(E?[]:""),w(!1)}:void 0,open:k,resetGraphic:D,type:c,value:A}),k&&React__default.default.createElement(Container,{ref:C},React__default.default.createElement(React__default.default.Fragment,null,h?h({children:q}):q,"pill"===c&&y&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$align:"center",$justify:"flex-end",$gap:8,sx:"margin-top: 8px; padding-right: 8px; padding-bottom: 8px"},React__default.default.createElement(button.Button,{onClick:e=>{v&&v(e),S(E?[]:""),w(!1)},size:"small",type:"text"},"Reset"),React__default.default.createElement(button.Button,{onClick:e=>{g&&g(e),w(!1)},size:"small",type:"primary"},"Apply")))))},Wrapper=styled__default.default.div`
|
|
3
3
|
position: relative;
|
|
4
4
|
display: block;
|
|
5
5
|
outline: none;
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
& > div:last-of-type {
|
|
22
22
|
border-radius: 0px 0px 8px 8px;
|
|
23
23
|
}
|
|
24
|
-
`,textProps={as:"span",$fontSize:14,$lineHeight:20,$sx:"white-space: nowrap; width: 100%;",$textClampLines:1},wrapperProps={$align:"center",$dir:"row",$gap:16},FilterTrigger=({disabled:e,graphic:t,graphicAlignment:
|
|
24
|
+
`,textProps={as:"span",$fontSize:14,$lineHeight:20,$sx:"white-space: nowrap; width: 100%;",$textClampLines:1},wrapperProps={$align:"center",$dir:"row",$gap:16},FilterTrigger=({disabled:e,graphic:t,graphicAlignment:r,label:a,onClick:l,resetGraphic:o,open:n,onReset:c,type:d,value:i})=>"pill"===d?React__default.default.createElement(Pill,{disabled:e,onClick:l,$labelIsDefault:i===a,...wrapperProps},"left"===r?t:null,React__default.default.createElement(paragraph.P,{...textProps},i),o?React__default.default.createElement(close.Close,{color:"blue-3",onClick:c}):null,"right"===r?t:null,!t&&!o&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))):"labeled"===d?React__default.default.createElement(Labeled,{disabled:e,onClick:l,...wrapperProps},React__default.default.createElement(paragraph.P,{...textProps},a),React__default.default.createElement(LabelSeparator,null),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$mediumBold:!0,...textProps},i),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"avatar"===d?React__default.default.createElement(Avatar,{$align:"center",$dir:"row",$gap:8,disabled:e,onClick:l},t,n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"text"===d?React__default.default.createElement(Text,{disabled:e,onClick:l,...wrapperProps},React__default.default.createElement(paragraph.P,{$color:"grey-4",$semiBold:!0,...textProps},a,":"),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$semiBold:!0,className:"filter-trigger-value",...textProps},i),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):React__default.default.createElement(Outlined,{disabled:e,onClick:l,...wrapperProps},"left"===r?t:null,t,React__default.default.createElement(paragraph.P,{...textProps},i),"right"===r?t:null,!t&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))),sharedStyles=((Filter.Trigger=FilterTrigger).displayName="Filter.Trigger",styled.css`
|
|
25
25
|
display: flex;
|
|
26
26
|
padding: 10px 16px;
|
|
27
27
|
border: none;
|
|
@@ -11,6 +11,7 @@ export interface FilterOptionProps {
|
|
|
11
11
|
radio?: boolean;
|
|
12
12
|
showClose?: boolean;
|
|
13
13
|
onClose?: () => void;
|
|
14
|
+
children?: (Omit<FilterOptionProps, 'selected' | 'onClick'> | 'break')[];
|
|
14
15
|
}
|
|
15
16
|
declare const Option: {
|
|
16
17
|
({ label, sublabel, onClick, selected, sx, value, checkbox, radio, showClose, onClose, }: FilterOptionProps): React.JSX.Element;
|