@soul-refiner/design-system 2.6.13 → 2.6.15
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"),chip=require("../../feedback/chip/chip.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextInput=({bg:e="var(--color-blue-10)",disabled:t,helperText:r,icon:l,inputSx:a,label:o,maxCharacters:n,multiple:i,name:c,onChange:s,onClick:u,onFocus:d,onKeyDown:p,onBlur:f,onMultipleChange:m,placeholder:g,hasOutline:$=!0,placeIconAtTheEnd:y=!1,size:h="large",successful:b,sx:x,type:_="text",value:v,variant:k="default",warning:z})=>{const
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),chip=require("../../feedback/chip/chip.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextInput=({bg:e="var(--color-blue-10)",disabled:t,helperText:r,icon:l,inputSx:a,label:o,maxCharacters:n,multiple:i,name:c,onChange:s,onClick:u,onFocus:d,onKeyDown:p,onBlur:f,onMultipleChange:m,placeholder:g,hasOutline:$=!0,placeIconAtTheEnd:y=!1,size:h="large",successful:b,sx:x,type:_="text",value:v,variant:k="default",warning:z,triggerMultipleWithSpace:w=!1})=>{const C=React__default.default.useId();const[R,E]=React__default.default.useState("");const I=e=>{e.stopPropagation(),e.preventDefault();e=v.includes(R);m&&!e&&m([...v,R]),E("")};return React__default.default.createElement(Label,{$disabled:t,$size:h,$sx:x},React__default.default.createElement(Legend,{$bg:e,$size:h,$successful:b,$warning:z,$variant:k},o),React__default.default.createElement(InputWrapper,{$bg:e,$size:h,$successful:b,$hasOutline:$,$warning:z},!y&&l,i?React__default.default.createElement(MultipleInputWrapper,{onSubmit:I,onKeyDown:e=>{w&&" "===e.key&&I(e)}},v.filter(Boolean).map((e,t)=>React__default.default.createElement(chip.Chip,{key:C+e+t,color:"blue",size:"small",onDismiss:()=>{var t;t=e,m&&m(v.filter(e=>e!==t))}},e)),React__default.default.createElement(Input,{$size:h,$sx:a,onBlur:f,onChange:e=>{E(e.target.value)},onClick:u,onFocus:d,onKeyDown:e=>{!v.length||!m||R||"Delete"!==e.key&&"Backspace"!==e.key||m(v.slice(0,v.length-1))},value:R})):React__default.default.createElement(Input,{$size:h,$sx:a,disabled:t,name:c,..."number"===_&&{min:0},onBlur:f,onChange:s,onClick:u,onFocus:d,onKeyDown:p,placeholder:g,type:_,value:"number"!==_&&n?v?.slice(0,n-1)||"":v}),n&&"number"!==_&&!y&&React__default.default.createElement(MaxCharactersText,{$size:h},v?.length||0," / ",n),y&&l,b&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),z&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),r&&React__default.default.createElement(HelperText,{$size:h,$warning:z},z&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"}),r))},Label=styled.styled.label`
|
|
3
3
|
font-family: var(--font-inter);
|
|
4
4
|
font-size: ${({$size:e})=>"small"===e?.75:.87}rem;
|
|
5
5
|
font-weight: 400;
|
|
@@ -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:
|
|
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"),Link=require("next/link");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker),Link__default=_interopDefaultCompat(Link);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:u,dropdown:d,reactionModal:p,reactions:c,replies:s,userImageUri:f,userName:m,userReactions:_,visibilityIcon:x,customPlaceHolder:y,userProfileUri:R})=>{const[g,b]=React__default.default.useState(!1),[h,$]=React__default.default.useState({x:0,y:0}),[v,E]=React__default.default.useState("up"),[j,k]=React__default.default.useState(!1),[q,C]=React__default.default.useState(!1),[S,w]=React__default.default.useState(""),P=React__default.default.Children.toArray(s);var s=()=>{u&&u(),C(!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=!!P?.length&&0<P.length,z=W&&P.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==P.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:"comment-"+o},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:R,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),d),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(),b(e=>!e),$({y:e.clientY,x:e.clientX}),E(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>k(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),g&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:v,$top:h.y,$left:h.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),b(!1)},onClickOutside:()=>b(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),W&&q&&React__default.default.createElement(RepliesWrapper,null,z),!q&&!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))),j&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(S),w("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:y||"Write a reply",onChange:e=>{w(e.target.value)},value:S,placeIconAtTheEnd:!0,icon:x}))))},Wrapper=styled.styled.div`
|
|
3
3
|
max-width: 700px;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: row;
|
|
@@ -28,6 +28,7 @@ export type Props = {
|
|
|
28
28
|
inputSx?: string;
|
|
29
29
|
type?: 'number' | 'password' | 'text';
|
|
30
30
|
variant?: TextInputVariant;
|
|
31
|
+
triggerMultipleWithSpace?: boolean;
|
|
31
32
|
};
|
|
32
33
|
interface DisabledProps extends Props {
|
|
33
34
|
disabled?: true;
|
|
@@ -45,5 +46,5 @@ interface WarningProps extends Props {
|
|
|
45
46
|
warning?: true;
|
|
46
47
|
}
|
|
47
48
|
export type TextInputProps = DisabledProps | SuccessfulProps | WarningProps;
|
|
48
|
-
export declare const TextInput: ({ bg, disabled, helperText, icon, inputSx, label, maxCharacters, multiple, name, onChange, onClick, onFocus, onKeyDown, onBlur, onMultipleChange, placeholder, hasOutline, placeIconAtTheEnd, size, successful, sx, type, value, variant, warning, }: TextInputProps) => React.JSX.Element;
|
|
49
|
+
export declare const TextInput: ({ bg, disabled, helperText, icon, inputSx, label, maxCharacters, multiple, name, onChange, onClick, onFocus, onKeyDown, onBlur, onMultipleChange, placeholder, hasOutline, placeIconAtTheEnd, size, successful, sx, type, value, variant, warning, triggerMultipleWithSpace, }: TextInputProps) => React.JSX.Element;
|
|
49
50
|
export {};
|