@soul-refiner/design-system 2.8.17 → 2.8.19
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:a,graphicAlignment:l="left",resetGraphic:r,label:o="",sx:n,triggerType:d,options:u,defaultValue:c="",closeOnChange:i=!0,optionOnChange:s,optionShowClose:p,checkbox:f,isRadio:_,applyOnClick:g,resetOnClick:v,applyResetActions:b})=>{const
|
|
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:a,graphicAlignment:l="left",resetGraphic:r,label:o="",sx:n,triggerType:d,options:u,defaultValue:c="",closeOnChange:i=!0,optionOnChange:s,optionShowClose:p,checkbox:f,isRadio:_,applyOnClick:g,resetOnClick:v,applyResetActions:b,customerOptionWrapper:y})=>{const h=!!f,m=React__default.default.useRef(null);var x=React__default.default.useRef(null);const[R,C]=React__default.default.useState(!1),[E,k]=React__default.default.useState(()=>c||(h?[]:"")),[$,w]=React__default.default.useState("");React__default.default.useEffect(()=>{e&&C(!1)},[e]),React__default.default.useEffect(()=>{"outlined"===d&&void 0===c&&k(h?[u[0]?.value]:u[0]?.value)},[d,c]),React__default.default.useEffect(()=>{var e;R||(E.length?(e=u.find(e=>"string"!=typeof e&&S(e.value)),"string"==typeof E?w(e.label):w(1<E.length?e.label+" +"+(E.length-1):e.label)):w(o))},[E,u,R]);const P=h?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(E)&&E.includes(t)?k(e=>e.filter(e=>e!==t)):k(e=>[t,...e]),i&&!g&&C(!1),s&&s(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";E!==t?k(t):k(""),i&&!g&&C(!1),s&&s(e)},S=e=>h?E.includes(e):e===E;var A=[...u.map((e,t)=>"string"==typeof e&&"break"===e?React__default.default.createElement(filter_option.Spacer,{key:React__default.default.useId()+"-spacer-"+t}):React__default.default.createElement(filter_option.Option,{key:e.value,onClick:P,selected:S(e.value),checkbox:f,radio:!h&&"pill"===d||!h&&_,showClose:void 0===p?0===t&&"pill"===d:p,onClose:()=>C(!1),...e})),"pill"===d&&React__default.default.createElement(filter_option.Spacer,{key:"spacer-"+u.length})],j=r&&("string"==typeof E?!!E:!!E.length);return React__default.default.createElement(Wrapper,{$sx:n,tabIndex:0,ref:m,onBlurCapture:e=>{t&&m?.current&&!m?.current?.contains(e.relatedTarget)&&C(!1)}},React__default.default.createElement(FilterTrigger,{disabled:e,graphic:a,graphicAlignment:l,label:o,onClick:()=>{e||C(e=>!e)},onReset:r?e=>{e.stopPropagation(),v&&v(e),k(h?[]:""),C(!1)}:void 0,open:R,resetGraphic:j,type:d,value:$}),R&&React__default.default.createElement(Container,{ref:x},React__default.default.createElement(React__default.default.Fragment,null,y?y({children:A}):A,"pill"===d&&b&&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),k(h?[]:""),C(!1)},size:"small",type:"text"},"Reset"),React__default.default.createElement(button.Button,{onClick:e=>{g&&g(e),C(!1)},size:"small",type:"primary"},"Apply")))))},Wrapper=styled__default.default.div`
|
|
3
3
|
position: relative;
|
|
4
4
|
display: block;
|
|
5
5
|
outline: none;
|
|
@@ -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");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Table=({border:e=!0,children:t,compact:l,footer:a,header:o,separated:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Table=({border:e=!0,children:t,compact:l,footer:a,header:o,separated:r,striped:d,sx:i,padding:n=32})=>React__default.default.createElement(box.Box,{$backgroundColor:"white",$borderRadius:"large",$display:"flex",$dir:"column",$gap:32,$padding:n,sx:l?"width: fit-content;":""},!!o&&o,React__default.default.createElement(box.Box,{$borderRadius:"small",sx:e?"border: 1px solid var(--color-grey-8);":""},React__default.default.createElement(TableElement,{$compact:l,$separated:r,$striped:d,$sx:i},t)),!!a&&a),TableElement=styled.styled.table`
|
|
3
3
|
width: 100%;
|
|
4
4
|
border-collapse: collapse;
|
|
5
5
|
border-spacing: 0;
|
|
@@ -24,10 +24,12 @@
|
|
|
24
24
|
|
|
25
25
|
& > *:first-of-type {
|
|
26
26
|
border-top-left-radius: 8px;
|
|
27
|
+
border-bottom-left-radius: 8px;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
& > *:last-of-type {
|
|
30
31
|
border-top-right-radius: 8px;
|
|
32
|
+
border-bottom-right-radius: 8px;
|
|
31
33
|
}
|
|
32
34
|
}
|
|
33
35
|
`,Body=(Head.displayName="Table.Head",Table.Head=Head,({children:e,...t})=>React__default.default.createElement(BodyElement,{...t},e)),BodyElement=styled.styled.tbody`
|
|
@@ -40,7 +42,7 @@
|
|
|
40
42
|
border-bottom-right-radius: 8px;
|
|
41
43
|
}
|
|
42
44
|
}
|
|
43
|
-
`,Foot=(Body.displayName="Table.Body",Table.Body=Body,({children:e,...t})=>React__default.default.createElement("tfoot",{...t},e)),Row=(Foot.displayName="Table.Foot",Table.Footer=Foot,({children:e,disabled:t,href:l,hoverable:a=!1,onClick:o,selected:
|
|
45
|
+
`,Foot=(Body.displayName="Table.Body",Table.Body=Body,({children:e,...t})=>React__default.default.createElement("tfoot",{...t},e)),Row=(Foot.displayName="Table.Foot",Table.Footer=Foot,({children:e,disabled:t,href:l,hoverable:a=!1,onClick:o,selected:r,sx:d,...i})=>{var n=l?e=>{e.metaKey||e.ctrlKey?window.open(l,"_blank")?.focus():window.location.href=l}:o?e=>{o(e)}:void 0;return React__default.default.createElement(RowElement,{onClick:n,$disabled:t,$hoverable:a,$isAnchor:!!l,$selected:r,$sx:d,...i},e)}),RowElement=styled.styled.tr`
|
|
44
46
|
display: table-row;
|
|
45
47
|
|
|
46
48
|
${({$disabled:e})=>e?`
|
|
@@ -73,7 +75,7 @@
|
|
|
73
75
|
}
|
|
74
76
|
}`:""}
|
|
75
77
|
${({$sx:e})=>e||""}
|
|
76
|
-
`,Cell=(Row.displayName="Table.Row",Table.Row=Row,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:
|
|
78
|
+
`,Cell=(Row.displayName="Table.Row",Table.Row=Row,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?d*(1/16)+"%":void 0;return React__default.default.createElement(CellElement,{$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},React__default.default.createElement("div",null,e))}),CellElement=styled.styled.td`
|
|
77
79
|
width: ${({$width:e})=>e};
|
|
78
80
|
height: 20px;
|
|
79
81
|
font-family: var(--font-inter);
|
|
@@ -94,7 +96,7 @@
|
|
|
94
96
|
-webkit-box-orient: vertical;
|
|
95
97
|
}`:""}
|
|
96
98
|
${({$sx:e})=>e||""}
|
|
97
|
-
`,HeaderCell=(Cell.displayName="Table.Cell",Table.Cell=Cell,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:
|
|
99
|
+
`,HeaderCell=(Cell.displayName="Table.Cell",Table.Cell=Cell,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?6.25*d+"%":void 0;return React__default.default.createElement(HeadCellElement,{as:"th",$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},e)}),HeadCellElement=styled.styled(CellElement)`
|
|
98
100
|
font-size: 16px;
|
|
99
101
|
font-weight: 700;
|
|
100
102
|
line-height: 24px;
|
|
@@ -23,9 +23,10 @@ export interface FilterProps {
|
|
|
23
23
|
applyOnClick?: (event: React.MouseEvent) => void;
|
|
24
24
|
resetOnClick?: (event: React.MouseEvent) => void;
|
|
25
25
|
applyResetActions?: boolean;
|
|
26
|
+
customerOptionWrapper?: (props: React.PropsWithChildren) => React.ReactElement;
|
|
26
27
|
}
|
|
27
28
|
declare const Filter: {
|
|
28
|
-
({ closeOnBlur, disabled, graphic, graphicAlignment, resetGraphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, isRadio, applyOnClick, resetOnClick, applyResetActions, }: FilterProps): React.JSX.Element;
|
|
29
|
+
({ closeOnBlur, disabled, graphic, graphicAlignment, resetGraphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, isRadio, applyOnClick, resetOnClick, applyResetActions, customerOptionWrapper, }: FilterProps): React.JSX.Element;
|
|
29
30
|
Trigger: {
|
|
30
31
|
({ disabled, graphic, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }: FilterTriggerProps): React.JSX.Element;
|
|
31
32
|
displayName: string;
|