@soul-refiner/design-system 2.4.22 → 2.4.24

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,4 +1,4 @@
1
- "use strict";var React=require("react"),plate=require("@udecode/plate"),styled=require("styled-components"),constants=require("../../constants.js"),context=require("../../context.js"),button=require("../../../actions/button/button.js"),box=require("../../../atoms/box/box.js"),hide=require("../../../atoms/hide/hide.js"),heading=require("../../../atoms/typography/heading.js"),chevron_down=require("../../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const QuestionAnswerElement=React__default.default.forwardRef(({children:e,element:t,...n},a)=>{var r=t["questionAnswerId"],{commentInputLoader:o,commentLoader:l}=React__default.default.useContext(context.EditorContext);const[u,d]=React__default.default.useState(!1);return React__default.default.createElement(plate.PlateElement,{asChild:!0,element:t,ref:a,...n},React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Question,null,React__default.default.createElement(heading.H,{as:"p",$fontSize:18,$lineHeight:26,$mediumBold:!0},e)),React__default.default.createElement(box.Box,{$dir:"column",sx:"padding: 8px 24px;",contentEditable:!1},React__default.default.createElement(button.Button,{as:"div",icon:u?React__default.default.createElement(chevron_up.ChevronUp,{color:"grey-3"}):React__default.default.createElement(chevron_down.ChevronDown,{color:"grey-3"}),onClick:()=>d(e=>!e),size:"small",sx:`
1
+ "use strict";var React=require("react"),plate=require("@udecode/plate"),styled=require("styled-components"),constants=require("../../constants.js"),context=require("../../context.js"),button=require("../../../actions/button/button.js"),box=require("../../../atoms/box/box.js"),hide=require("../../../atoms/hide/hide.js"),heading=require("../../../atoms/typography/heading.js"),chevron_down=require("../../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../../icons/arrow/chevron_up.js"),filter=(require("../../../input/checkbox/checkbox.js"),require("../../../input/date/date.js"),require("../../../input/filter/filter.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../input/radio/radio.js"),require("../../../input/search/search.js"),require("../../../input/select/select.js"),require("../../../input/text_area/text_area.js"),require("../../../input/text_input/text_input.js"),require("../../../input/calendar/calendar.js"),require("../../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField");var React__default=_interopDefaultCompat(React);const QuestionAnswerElement=React__default.default.forwardRef(({children:e,element:t,...r},a)=>{var n=t["questionAnswerId"];const[l,o]=React__default.default.useState("ALL_ANSWERS");var{commentInputLoader:u,commentLoader:i}=React__default.default.useContext(context.EditorContext);const[s,d]=React__default.default.useState(!1);return React__default.default.createElement(plate.PlateElement,{asChild:!0,element:t,ref:a,...r},React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Question,null,React__default.default.createElement(heading.H,{as:"p",$fontSize:18,$lineHeight:26,$mediumBold:!0},e)),React__default.default.createElement(box.Box,{$dir:"column",$gap:"medium",sx:"padding: 8px 24px;",contentEditable:!1},React__default.default.createElement(box.Box,{sx:"width: 100%",$justify:"space-between"},React__default.default.createElement(button.Button,{as:"div",icon:s?React__default.default.createElement(chevron_up.ChevronUp,{color:"grey-3"}):React__default.default.createElement(chevron_down.ChevronDown,{color:"grey-3"}),onClick:()=>d(e=>!e),size:"small",sx:`
2
2
  width: fit-content;
3
3
  flex-direction: row-reverse;
4
4
  color: var(--color-grey-5);
@@ -6,7 +6,7 @@
6
6
  &:not(:hover) svg {
7
7
  fill: var(--color-grey-3);
8
8
  }
9
- `,type:"text",contentEditable:!1},u?"Hide answers":"Show answers"),React__default.default.createElement(hide.HideButRender,{show:u},React__default.default.createElement(l,{questionAnswerId:r})),React__default.default.createElement(o,{questionAnswerId:r,onComment:()=>d(!0)}))))}),Question=styled.styled.div`
9
+ `,type:"text",contentEditable:!1},s?"Hide answers":"Show answers"),s&&React__default.default.createElement(filter.Filter,{label:"All Answers",sx:"padding: 1px 4px; & > * { color: var(--color-grey-5); }",optionOnChange:e=>{e=e.target.getAttribute("data-value");o(e)},options:[{label:"MeetingAnswers ",value:"MEETING_ANSWERS",sublabel:"Show only answers from member of your meeting"},{label:"My answers",value:"MY_ANSWERS",sublabel:"Show only your answers"},{label:"Most Relevant",value:"MOST_RELEVANT",sublabel:"Show the most engaging answers first"},{label:"All answers",value:"ALL_ANSWERS",sublabel:"Anyone who's ever answered"}],isRadio:!0,optionShowClose:!1,resetGraphic:!0,triggerType:"outlined"})),React__default.default.createElement(hide.HideButRender,{show:s},React__default.default.createElement(i,{questionAnswerId:n,filterType:l})),React__default.default.createElement(u,{questionAnswerId:n,onComment:()=>d(!0)}))))}),Question=styled.styled.div`
10
10
  margin-bottom: 8px;
11
11
  padding: 16px;
12
12
  border-left: 8px solid var(--color-hue-blue-1);
@@ -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,applyOnClick:_,resetOnClick:g,applyResetActions:v})=>{const b=!!f,y=React__default.default.useRef(null);var h=React__default.default.useRef(null);const[m,x]=React__default.default.useState(!1),[R,C]=React__default.default.useState(()=>c||(b?[]:"")),[E,k]=React__default.default.useState("");React__default.default.useEffect(()=>{e&&x(!1)},[e]),React__default.default.useEffect(()=>{"outlined"===d&&void 0===c&&C(b?[u[0]?.value]:u[0]?.value)},[d,c]),React__default.default.useEffect(()=>{var e;m||(R.length?(e=u.find(e=>"string"!=typeof e&&w(e.value)),"string"==typeof R?k(e.label):k(1<R.length?e.label+" +"+(R.length-1):e.label)):k(o))},[R,u,m]);const $=b?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(R)&&R.includes(t)?C(e=>e.filter(e=>e!==t)):C(e=>[t,...e]),i&&!_&&x(!1),s&&s(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";R!==t?C(t):C(""),i&&!_&&x(!1),s&&s(e)},w=e=>b?R.includes(e):e===R;var P=[...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:$,selected:w(e.value),checkbox:f,radio:!b&&"pill"===d,showClose:void 0===p?0===t&&"pill"===d:p,onClose:()=>x(!1),...e})),"pill"===d&&React__default.default.createElement(filter_option.Spacer,{key:"spacer-"+u.length})],S=r&&("string"==typeof R?!!R:!!R.length);return React__default.default.createElement(Wrapper,{$sx:n,tabIndex:0,ref:y,onBlurCapture:e=>{t&&y?.current&&!y?.current?.contains(e.relatedTarget)&&x(!1)}},React__default.default.createElement(FilterTrigger,{disabled:e,graphic:a,graphicAlignment:l,label:o,onClick:()=>{e||x(e=>!e)},onReset:r?e=>{e.stopPropagation(),g&&g(e),C(b?[]:""),x(!1)}:void 0,open:m,resetGraphic:S,type:d,value:E}),m&&React__default.default.createElement(Container,{ref:h},React__default.default.createElement(React__default.default.Fragment,null,P,"pill"===d&&v&&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=>{g&&g(e),C(b?[]:""),x(!1)},size:"small",type:"text"},"Reset"),React__default.default.createElement(button.Button,{onClick:e=>{_&&_(e),x(!1)},size:"small",type:"primary"},"Apply")))))},Wrapper=styled__default.default.div`
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 y=!!f,h=React__default.default.useRef(null);var m=React__default.default.useRef(null);const[x,R]=React__default.default.useState(!1),[C,E]=React__default.default.useState(()=>c||(y?[]:"")),[k,$]=React__default.default.useState("");React__default.default.useEffect(()=>{e&&R(!1)},[e]),React__default.default.useEffect(()=>{"outlined"===d&&void 0===c&&E(y?[u[0]?.value]:u[0]?.value)},[d,c]),React__default.default.useEffect(()=>{var e;x||(C.length?(e=u.find(e=>"string"!=typeof e&&P(e.value)),"string"==typeof C?$(e.label):$(1<C.length?e.label+" +"+(C.length-1):e.label)):$(o))},[C,u,x]);const w=y?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(C)&&C.includes(t)?E(e=>e.filter(e=>e!==t)):E(e=>[t,...e]),i&&!g&&R(!1),s&&s(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";C!==t?E(t):E(""),i&&!g&&R(!1),s&&s(e)},P=e=>y?C.includes(e):e===C;var S=[...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:w,selected:P(e.value),checkbox:f,radio:!y&&"pill"===d||!y&&_,showClose:void 0===p?0===t&&"pill"===d:p,onClose:()=>R(!1),...e})),"pill"===d&&React__default.default.createElement(filter_option.Spacer,{key:"spacer-"+u.length})],A=r&&("string"==typeof C?!!C:!!C.length);return React__default.default.createElement(Wrapper,{$sx:n,tabIndex:0,ref:h,onBlurCapture:e=>{t&&h?.current&&!h?.current?.contains(e.relatedTarget)&&R(!1)}},React__default.default.createElement(FilterTrigger,{disabled:e,graphic:a,graphicAlignment:l,label:o,onClick:()=>{e||R(e=>!e)},onReset:r?e=>{e.stopPropagation(),v&&v(e),E(y?[]:""),R(!1)}:void 0,open:x,resetGraphic:A,type:d,value:k}),x&&React__default.default.createElement(Container,{ref:m},React__default.default.createElement(React__default.default.Fragment,null,S,"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),E(y?[]:""),R(!1)},size:"small",type:"text"},"Reset"),React__default.default.createElement(button.Button,{onClick:e=>{g&&g(e),R(!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"),paragraph=require("../../atoms/typography/paragraph.js"),checkbox=require("../checkbox/checkbox.js"),radio=require("../radio/radio.js"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Option=({label:e,onClick:a,selected:t,sx:r,value:o,checkbox:c,radio:l=!1,showClose:i=!1,onClose:n})=>React__default.default.createElement(OptionWrapper,{"data-value":o,onClick:a,$selected:t,$sx:r,$hasCheckbox:!!c},c&&React__default.default.createElement(checkbox.Checkbox,{selected:t}),l&&React__default.default.createElement(radio.Radio,{checked:t,value:o}),React__default.default.createElement(box.Box,{$dir:"column",$display:"flex"},e&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},e)),i&&React__default.default.createElement(close.Close,{sx:"margin-left: auto; pointer-events: auto !important;",size:16,onClick:e=>{e.stopPropagation(),n&&n()}})),OptionWrapper=(Option.displayName="Filter.Option",styled.styled.div`
2
+ "use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),checkbox=require("../checkbox/checkbox.js"),radio=require("../radio/radio.js"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Option=({label:e,sublabel:a,onClick:t,selected:r,sx:o,value:l,checkbox:c,radio:i=!1,showClose:n=!1,onClose:p})=>React__default.default.createElement(OptionWrapper,{"data-value":l,onClick:t,$selected:r,$sx:o,$hasCheckbox:!!c},c&&React__default.default.createElement(checkbox.Checkbox,{selected:r}),i&&React__default.default.createElement(radio.Radio,{checked:r,value:l}),React__default.default.createElement(box.Box,{$dir:"column",$display:"flex"},e&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},e),a&&React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:12,$lineHeight:20,$mediumBold:!0,$textClampLines:1},a)),n&&React__default.default.createElement(close.Close,{sx:"margin-left: auto; pointer-events: auto !important;",size:16,onClick:e=>{e.stopPropagation(),p&&p()}})),OptionWrapper=(Option.displayName="Filter.Option",styled.styled.div`
3
3
  position: relative;
4
4
  z-index: 1;
5
5
  padding: 12px 16px;
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- "use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:u,reactionModal:d,reactions:p,replies:c,userImageUri:s,userName:f,userReactions:m,userProfileUri:_})=>{const[x,y]=React__default.default.useState(!1),[R,g]=React__default.default.useState({x:0,y:0}),[b,h]=React__default.default.useState("up"),[$,v]=React__default.default.useState(!1),[E,j]=React__default.default.useState(!1),[q,k]=React__default.default.useState(""),C=React__default.default.Children.toArray(c);var c=()=>{u&&u(),j(!0)},r=helpers.abbrTimeBeforeDate(r),p=p&&Object.entries(p).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>n(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:m?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),S=!!C?.length&&0<C.length,W=S&&C.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==C.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{id:o},React__default.default.createElement(avatar.Avatar,{href:_,image:s,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:S||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(paragraph.P,{$bold:!0,$color:"grey-2",$fontSize:14,$lineHeight:20},f),React__default.default.createElement(paragraph.P,{sx:"letter-spacing: -0.176px;"},a)),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:e=>{e.stopPropagation(),y(e=>!e),g({y:e.clientY,x:e.clientX}),h(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>v(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},p,d),x&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:b,$top:R.y,$left:R.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),y(!1)},onClickOutside:()=>y(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),S&&E&&React__default.default.createElement(RepliesWrapper,null,W),!E&&!l&&S&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:c,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:c,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),$&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(q),k("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:"Write a reply",onChange:e=>{k(e.target.value)},value:q}))))},Wrapper=styled.styled.div`
2
+ "use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:d,dropdown:u,reactionModal:p,reactions:c,replies:s,userImageUri:f,userName:m,userReactions:_,userProfileUri:x})=>{const[y,R]=React__default.default.useState(!1),[g,b]=React__default.default.useState({x:0,y:0}),[h,$]=React__default.default.useState("up"),[v,E]=React__default.default.useState(!1),[j,q]=React__default.default.useState(!1),[k,C]=React__default.default.useState(""),S=React__default.default.Children.toArray(s);var s=()=>{d&&d(),q(!0)},r=helpers.abbrTimeBeforeDate(r),c=c&&Object.entries(c).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>n(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:_?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),w=!!S?.length&&0<S.length,W=w&&S.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==S.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{id:o},React__default.default.createElement(avatar.Avatar,{href:x,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:w||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{$bold:!0,$color:"grey-2",$fontSize:14,$lineHeight:20},m),u),React__default.default.createElement(paragraph.P,{sx:"letter-spacing: -0.176px;"},a)),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:e=>{e.stopPropagation(),R(e=>!e),b({y:e.clientY,x:e.clientX}),$(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>E(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},c,p),y&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:h,$top:g.y,$left:g.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),R(!1)},onClickOutside:()=>R(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),w&&j&&React__default.default.createElement(RepliesWrapper,null,W),!j&&!l&&w&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),v&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(k),C("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:"Write a reply",onChange:e=>{C(e.target.value)},value:k}))))},Wrapper=styled.styled.div`
3
3
  max-width: 700px;
4
4
  display: flex;
5
5
  flex-direction: row;
@@ -1,15 +1,20 @@
1
1
  import React from 'react';
2
+ export type TCustomFilter = 'MEETING_ANSWERS' | 'MY_ANSWERS' | 'MOST_RELEVANT' | 'ALL_ANSWERS';
3
+ interface CommentLoaderProps {
4
+ questionAnswerId: string;
5
+ filterType: TCustomFilter;
6
+ }
7
+ interface CommentInputProps {
8
+ onComment: () => void;
9
+ questionAnswerId: string;
10
+ }
2
11
  export declare const EditorContext: React.Context<{
3
- commentInputLoader: (props: {
4
- onComment: () => void;
5
- questionAnswerId: string;
6
- }) => React.ReactElement;
7
- commentLoader: (props: {
8
- questionAnswerId: string;
9
- }) => React.ReactElement;
12
+ commentInputLoader: (props: CommentInputProps) => React.ReactElement;
13
+ commentLoader: (props: CommentLoaderProps) => React.ReactElement;
10
14
  handleVideoClick?: ((id: number) => void) | undefined;
11
15
  imageSrcLoader: (id: number) => Promise<string>;
12
16
  videoTitleLoader: (props: {
13
17
  courseMediaId: number;
14
18
  }) => React.ReactElement;
15
19
  }>;
20
+ export {};
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { TElement } from '@udecode/plate';
3
+ import { TCustomFilter } from './context';
3
4
  export interface EditorProps {
4
5
  commentInputLoader: (props: {
5
6
  onComment: () => void;
@@ -7,6 +8,7 @@ export interface EditorProps {
7
8
  }) => React.ReactElement;
8
9
  commentLoader: (props: {
9
10
  questionAnswerId: string;
11
+ filterType: TCustomFilter;
10
12
  }) => React.ReactElement;
11
13
  editable: boolean;
12
14
  handleVideoClick: (id: number) => void;
@@ -19,12 +19,13 @@ export interface FilterProps {
19
19
  optionOnChange?: (event: React.MouseEvent) => void;
20
20
  optionShowClose?: boolean;
21
21
  checkbox?: boolean;
22
+ isRadio?: boolean;
22
23
  applyOnClick?: (event: React.MouseEvent) => void;
23
24
  resetOnClick?: (event: React.MouseEvent) => void;
24
25
  applyResetActions?: boolean;
25
26
  }
26
27
  declare const Filter: {
27
- ({ closeOnBlur, disabled, graphic, graphicAlignment, resetGraphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }: FilterProps): React.JSX.Element;
28
+ ({ closeOnBlur, disabled, graphic, graphicAlignment, resetGraphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, isRadio, applyOnClick, resetOnClick, applyResetActions, }: FilterProps): React.JSX.Element;
28
29
  Trigger: {
29
30
  ({ disabled, graphic, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }: FilterTriggerProps): React.JSX.Element;
30
31
  displayName: string;
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  export interface FilterOptionProps {
3
3
  color?: string;
4
4
  label: string;
5
+ sublabel?: string;
5
6
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
6
7
  selected: boolean;
7
8
  sx?: string;
@@ -12,7 +13,7 @@ export interface FilterOptionProps {
12
13
  onClose?: () => void;
13
14
  }
14
15
  declare const Option: {
15
- ({ label, onClick, selected, sx, value, checkbox, radio, showClose, onClose, }: FilterOptionProps): React.JSX.Element;
16
+ ({ label, sublabel, onClick, selected, sx, value, checkbox, radio, showClose, onClose, }: FilterOptionProps): React.JSX.Element;
16
17
  displayName: string;
17
18
  };
18
19
  export interface FilterSpacerProps {
@@ -3,8 +3,10 @@ export interface CommentProps {
3
3
  avatarTooltipContent?: React.ReactElement;
4
4
  avatarTooltipSx?: string;
5
5
  content: string;
6
+ filterType?: string;
6
7
  createdDate: Date;
7
8
  hasMoreReplies?: boolean;
9
+ dropdown?: React.ReactElement;
8
10
  id?: string;
9
11
  onComment: (comment: string, id?: string) => void;
10
12
  onReact: (reaction: string) => void;
@@ -17,4 +19,4 @@ export interface CommentProps {
17
19
  userReactions?: string[];
18
20
  userProfileUri: string;
19
21
  }
20
- export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;
22
+ export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soul-refiner/design-system",
3
- "version": "2.4.22",
3
+ "version": "2.4.24",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/src/index.d.ts",
6
6
  "license": "MIT",