@bikdotai/bik-component-library 0.0.219 → 0.0.221

package/dist/cjs/components/editor/mail/mailRTE.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),s=require("emoji-picker-react"),i=require("react"),n=require("react-quill"),l=require("../../button/Button.js"),a=require("../../tooltips/Tooltip.js"),r=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),c=require("../../../assets/icons/cross.svg.js"),d=require("../../../assets/icons/paperclip.svg.js"),u=require("../../../assets/icons/smile_emoji.svg.js"),j=require("./MailRTE.styled.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=m(s),b=m(i);const h=e=>{const{fileName:s,uploadState:i,removeAttachment:n}=e;return t.jsx(t.Fragment,{children:t.jsxs(j.AttachmentContainer,{children:[t.jsx(j.AttachmentName,Object.assign({numberOfLines:1,style:{flex:1}},{children:s})),"loading"!==i.status&&t.jsx(r.BodyCaption,Object.assign({style:{flex:1}},{children:v(i.size)})),"loading"===i.status&&t.jsx(j.ProgressIndicatorContainer,{children:t.jsx(j.OuterProgressBarContainer,{children:t.jsx(j.InnerProgressBarContainer,{style:{backgroundColor:o.COLORS.background.brand,width:"60%"}})})}),t.jsx("div",Object.assign({style:{cursor:"pointer"},onClick:()=>n(s)},{children:t.jsx(c.default,{width:16,height:16})}))]})})},v=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(!+e)return"0 Bytes";const s=t<0?0:t,i=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,i)).toFixed(s))} ${["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`};exports.GmailRTE=s=>{let{isForwardMail:r,isSendDisabled:c,buttonAction:m,defaultInputText:v,isModalView:x,setErrorToast:f,uploadFile:p,isLoading:y,buttonText:O="Send",skipAttachments:q,initialHtml:C}=s;var N,k,S;const w=i.useRef(null),[B,T]=i.useState(!1),M=b.default.useRef(null),E=i.useRef(),[I,R]=i.useState({}),[_,z]=i.useState(""),[F,L]=i.useState(v||"");i.useEffect((()=>{var e,t;L(null===(t=null===(e=w.current)||void 0===e?void 0:e.unprivilegedEditor)||void 0===t?void 0:t.getText())}),[_]);const A=()=>{T(!B)},P=(null===(S=null===(k=null===(N=null==w?void 0:w.current)||void 0===N?void 0:N.editor)||void 0===k?void 0:k.container)||void 0===S?void 0:S.querySelector(".ql-editor"))||{};E.current=P;const Q=n.Quill.import("formats/font");Q.whitelist=["arial","comic-sans","courier-new","georgia","helvetica","lucida"],n.Quill.register(Q,!0);const V=n.Quill.import("formats/size");V.whitelist=["extra-small","small","medium","large"],n.Quill.register(V,!0),i.useEffect((()=>{C&&E.current&&(E.current.innerHTML=C)}),[E.current]);const G=e=>{const t=I;delete t[e],R(Object.assign({},t))};return t.jsxs(t.Fragment,{children:[t.jsxs(j.EditorContainer,Object.assign({isModalView:x},{children:[t.jsx(j.EditorInnerContainer,Object.assign({isModalView:x},{children:t.jsx(j.ReactQuilStyleContainer,{isModalView:x,ref:w,modules:{toolbar:{container:"#gmail-toolbar"}},onChange:e=>{z(e)},formats:["header","font","size","bold","italic","underline","align","strike","script","blockquote","background","list","bullet","indent","link","image","color","code-block"]})})),!q&&t.jsx("div",Object.assign({className:"attachment__container"},{children:Object.keys(I).map((e=>t.jsx(h,{fileName:e,uploadState:I[e],removeAttachment:G},e)))})),r&&t.jsx(j.ForwardMessageContainer,{children:t.jsx(j.StyledBodySecondary,Object.assign({style:{fontSize:12}},{children:"We cannot currently display the forwarded message thread. It will be visible after sending the message."}))})]})),t.jsxs("div",Object.assign({id:"gmail-toolbar",style:{border:0,display:"flex",zIndex:0,backgroundColor:o.COLORS.surface.subdued}},{children:[t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("button",{className:"ql-bold"}),t.jsx("button",{className:"ql-italic"}),t.jsx("button",{className:"ql-underline"}),t.jsx("button",{className:"ql-strike"})]})),t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("button",{className:"ql-list",value:"ordered"}),t.jsx("button",{className:"ql-list",value:"bullet"}),t.jsx("button",{className:"ql-indent",value:"-1"}),t.jsx("button",{className:"ql-indent",value:"+1"})]})),t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("button",{className:"ql-script",value:"super"}),t.jsx("button",{className:"ql-script",value:"sub"}),t.jsx("button",{className:"ql-blockquote"})]})),t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("select",{className:"ql-align"}),t.jsx("select",{className:"ql-color"}),t.jsx("select",{className:"ql-background"})]}))]})),t.jsx(j.SendConatiner,Object.assign({isModalView:!0},{children:t.jsxs(j.LeftItemsContainer,{children:[t.jsx(l.Button,{style:{marginRight:10},buttonText:O,onClick:()=>{e.__awaiter(void 0,void 0,void 0,(function*(){var e,t;const s=[];Object.keys(I).map((e=>{"finished"===I[e].status&&s.push({filename:e,path:I[e].url})})),(yield m(_,F,s))&&x&&(z(""),L(""),null===(t=null===(e=w.current)||void 0===e?void 0:e.editor)||void 0===t||t.setContents([{insert:"\n"}]),R({}))})).then()},size:"small",disabled:(null==F?void 0:F.length)<=0||c,isLoading:y}),!q&&t.jsxs(t.Fragment,{children:[t.jsx("input",{ref:M,type:"file",name:"file",multiple:!0,style:{display:"none"},onChange:t=>{const s=t.target.files;if(s){const t=[],i=[];Object.values(s).forEach((e=>{e.size<=5242880?i.push(e):t.push(e)})),t.length>0&&f("Files greater than 5mb size are ignored."),i.forEach((t=>(t=>e.__awaiter(void 0,void 0,void 0,(function*(){var e,s;const i=I;i[t.name]={status:"loading"},R(Object.assign({},i));const n=p&&(yield p(t,t.name));return(null===(e=null==n?void 0:n.data)||void 0===e?void 0:e.imageUrl)?(i[t.name]={status:"finished",url:null===(s=n.data)||void 0===s?void 0:s.imageUrl,size:null==t?void 0:t.size},R(Object.assign({},i)),n.data.imageUrl):(i[t.name]={status:"error"},R(Object.assign({},i)),null)})))(t)))}}}),p&&t.jsx(a.Tooltip,Object.assign({body:"Attach files",placement:"top"},{children:t.jsx(j.InboxIconContainer,Object.assign({onClick:()=>{(()=>{var e;null===(e=M.current)||void 0===e||e.click()})()}},{children:t.jsx(d.default,{style:{cursor:"pointer"},width:16,height:16,color:o.COLORS.content.secondary})}))}))]}),t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"row",columnGap:16,alignItems:"center"}},{children:t.jsxs("div",Object.assign({style:{position:"relative"}},{children:[t.jsx(a.Tooltip,Object.assign({body:"Emoji",placement:"top"},{children:t.jsx(j.InboxIconContainer,Object.assign({isSelected:!1,onClick:()=>{A()}},{children:t.jsx(u.default,{width:16,height:16,color:o.COLORS.content.secondary})}))})),B&&t.jsx("div",Object.assign({style:{position:"absolute",bottom:40,left:0}},{children:t.jsx(g.default,{onEmojiClick:(e,t)=>{let{emoji:s}=t;var i,n,l,a,r;null===(i=null==w?void 0:w.current)||void 0===i||i.focus();const o=null===(l=null===(n=w.current)||void 0===n?void 0:n.editor)||void 0===l?void 0:l.getSelection();o&&(null===(r=null===(a=w.current)||void 0===a?void 0:a.editor)||void 0===r||r.insertText(null==o?void 0:o.index,s)),A(),z(P.innerText)}})}))]}))}))]})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),s=require("emoji-picker-react"),i=require("react"),n=require("react-quill"),l=require("../../button/Button.js"),a=require("../../tooltips/Tooltip.js"),r=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),c=require("../../../assets/icons/cross.svg.js"),d=require("../../../assets/icons/paperclip.svg.js"),u=require("../../../assets/icons/smile_emoji.svg.js"),j=require("./MailRTE.styled.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=m(s),b=m(i);const h=e=>{const{fileName:s,uploadState:i,removeAttachment:n}=e;return t.jsx(t.Fragment,{children:t.jsxs(j.AttachmentContainer,{children:[t.jsx(j.AttachmentName,Object.assign({numberOfLines:1,style:{flex:1}},{children:s})),"loading"!==i.status&&t.jsx(r.BodyCaption,Object.assign({style:{flex:1}},{children:v(i.size)})),"loading"===i.status&&t.jsx(j.ProgressIndicatorContainer,{children:t.jsx(j.OuterProgressBarContainer,{children:t.jsx(j.InnerProgressBarContainer,{style:{backgroundColor:o.COLORS.background.brand,width:"60%"}})})}),t.jsx("div",Object.assign({style:{cursor:"pointer"},onClick:()=>n(s)},{children:t.jsx(c.default,{width:16,height:16})}))]})})},v=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(!+e)return"0 Bytes";const s=t<0?0:t,i=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,i)).toFixed(s))} ${["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`};exports.GmailRTE=s=>{let{isForwardMail:r,isSendDisabled:c,buttonAction:m,defaultInputText:v,isModalView:x,setErrorToast:f,uploadFile:p,isLoading:y,buttonText:O="Send",skipAttachments:q,initialHtml:C}=s;var N,k,S;const w=i.useRef(null),[B,T]=i.useState(!1),M=b.default.useRef(null),E=i.useRef(),[I,R]=i.useState({}),[_,z]=i.useState(""),[F,L]=i.useState(v||"");i.useEffect((()=>{var e,t;L(null===(t=null===(e=w.current)||void 0===e?void 0:e.unprivilegedEditor)||void 0===t?void 0:t.getText())}),[_]);const A=()=>{T(!B)},P=(null===(S=null===(k=null===(N=null==w?void 0:w.current)||void 0===N?void 0:N.editor)||void 0===k?void 0:k.container)||void 0===S?void 0:S.querySelector(".ql-editor"))||{};E.current=P;const Q=n.Quill.import("formats/font");Q.whitelist=["arial","comic-sans","courier-new","georgia","helvetica","lucida"],n.Quill.register(Q,!0);const V=n.Quill.import("formats/size");V.whitelist=["extra-small","small","medium","large"],n.Quill.register(V,!0),i.useEffect((()=>{C&&E.current&&(E.current.innerHTML=C)}),[E.current]);const G=e=>{const t=I;delete t[e],R(Object.assign({},t))};return t.jsxs(t.Fragment,{children:[t.jsxs(j.EditorContainer,Object.assign({isModalView:x},{children:[t.jsx(j.EditorInnerContainer,Object.assign({isModalView:x},{children:t.jsx(j.ReactQuilStyleContainer,{isModalView:x,ref:w,modules:{toolbar:{container:"#gmail-toolbar"}},onChange:e=>{z(e)},formats:["header","font","size","bold","italic","underline","align","strike","script","blockquote","background","list","bullet","indent","link","image","color","code-block"]})})),!q&&t.jsx("div",Object.assign({className:"attachment__container"},{children:Object.keys(I).map((e=>t.jsx(h,{fileName:e,uploadState:I[e],removeAttachment:G},e)))})),r&&t.jsx(j.ForwardMessageContainer,{children:t.jsx(j.StyledBodySecondary,Object.assign({style:{fontSize:12}},{children:"We cannot currently display the forwarded message thread. It will be visible after sending the message."}))})]})),t.jsxs("div",Object.assign({id:"gmail-toolbar",style:{border:0,display:"flex",zIndex:0,backgroundColor:o.COLORS.surface.subdued}},{children:[t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("button",{className:"ql-bold"}),t.jsx("button",{className:"ql-italic"}),t.jsx("button",{className:"ql-underline"}),t.jsx("button",{className:"ql-strike"})]})),t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("button",{className:"ql-list",value:"ordered"}),t.jsx("button",{className:"ql-list",value:"bullet"}),t.jsx("button",{className:"ql-indent",value:"-1"}),t.jsx("button",{className:"ql-indent",value:"+1"})]})),t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("button",{className:"ql-script",value:"super"}),t.jsx("button",{className:"ql-script",value:"sub"}),t.jsx("button",{className:"ql-blockquote"})]})),t.jsxs("span",Object.assign({className:"ql-formats"},{children:[t.jsx("select",{className:"ql-align"}),t.jsx("select",{className:"ql-color"}),t.jsx("select",{className:"ql-background"})]}))]})),t.jsx(j.SendConatiner,Object.assign({isModalView:!0},{children:t.jsxs(j.LeftItemsContainer,{children:[t.jsx(l.Button,{style:{marginRight:10},buttonText:O,onClick:()=>{e.__awaiter(void 0,void 0,void 0,(function*(){var e,t;const s=[];Object.keys(I).map((e=>{"finished"===I[e].status&&s.push({filename:e,path:I[e].url})})),(yield m(_,F,s))&&x&&(z(""),L(""),null===(t=null===(e=w.current)||void 0===e?void 0:e.editor)||void 0===t||t.setContents([{insert:"\n"}]),R({}))})).then()},size:"small",disabled:(null==F?void 0:F.length)<=0||c,isLoading:y}),!q&&t.jsxs(t.Fragment,{children:[t.jsx("input",{ref:M,type:"file",name:"file",multiple:!0,style:{display:"none"},onChange:t=>{const s=t.target.files;if(s){const t=[],i=[];Object.values(s).forEach((e=>{e.size<=5242880?i.push(e):t.push(e)})),t.length>0&&f("Files greater than 5mb size are ignored."),i.forEach((t=>(t=>e.__awaiter(void 0,void 0,void 0,(function*(){var e,s;const i=I;i[t.name]={status:"loading"},R(Object.assign({},i));const n=p&&(yield p(t,t.name));return(null===(e=null==n?void 0:n.data)||void 0===e?void 0:e.imageUrl)?(i[t.name]={status:"finished",url:null===(s=n.data)||void 0===s?void 0:s.imageUrl,size:null==t?void 0:t.size},R(Object.assign({},i)),n.data.imageUrl):(i[t.name]={status:"error"},R(Object.assign({},i)),null)})))(t)))}}}),p&&t.jsx(a.Tooltip,Object.assign({body:"Attach files",placement:"top"},{children:t.jsx(j.InboxIconContainer,Object.assign({onClick:()=>{(()=>{var e;null===(e=M.current)||void 0===e||e.click()})()}},{children:t.jsx(d.default,{style:{cursor:"pointer"},width:16,height:16,color:o.COLORS.content.secondary})}))}))]}),t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"row",columnGap:16,alignItems:"center"}},{children:t.jsxs("div",Object.assign({style:{position:"relative"}},{children:[t.jsx(a.Tooltip,Object.assign({body:"Emoji",placement:"top"},{children:t.jsx(j.InboxIconContainer,Object.assign({isSelected:!1,onClick:()=>{A()}},{children:t.jsx(u.default,{width:16,height:16,color:o.COLORS.content.secondary})}))})),B&&t.jsx("div",Object.assign({style:{position:"absolute",bottom:40,left:0}},{children:t.jsx(g.default,{onEmojiClick:e=>{var t,s,i,n,l;null===(t=null==w?void 0:w.current)||void 0===t||t.focus();const a=null===(i=null===(s=w.current)||void 0===s?void 0:s.editor)||void 0===i?void 0:i.getSelection();a&&(null===(l=null===(n=w.current)||void 0===n?void 0:n.editor)||void 0===l||l.insertText(null==a?void 0:a.index,e.emoji)),A(),z(P.innerText)}})}))]}))}))]})}))]})};

package/dist/esm/components/bik-layout/BikHeader.d.ts

@@ -5,5 +5,6 @@ export interface HeaderProps {
     hideBackButton?: boolean;
     rightActionButton?: JSX.Element;
     onClickingBackButton?: () => void;
+    secondaryHeader?: JSX.Element;
 }
 export declare const BikHeader: React.FC<HeaderProps>;

package/dist/esm/components/bik-layout/BikHeader.js

@@ -1 +1 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import t from"../../assets/icons/arrow_left.svg.js";import{BodyCaption as i,TitleMedium as n,TitleRegular as s}from"../TypographyStyle.js";import{BikHeaderContainer as o}from"./CommonStyles.js";const c=c=>{const{header:a,subHeader:l,hideBackButton:d=!0,rightActionButton:h,onClickingBackButton:m}=c;return r(o,{children:[r("div",Object.assign({className:"row--flex left-container"},{children:[!d&&e(t,{className:"cursor",height:24,width:24,onClick:m}),r("div",{children:[l?e(i,Object.assign({className:"brand"},{children:a})):e(n,{children:a}),e(s,{children:l})]})]})),e("div",Object.assign({className:"row--flex right-container"},{children:h}))]})};export{c as BikHeader};
+import{jsxs as e,jsx as r,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/arrow_left.svg.js";import{BodyCaption as t,TitleMedium as s,TitleRegular as c}from"../TypographyStyle.js";import{BikHeaderWrapper as o,BikHeaderContainer as a}from"./CommonStyles.js";const l=l=>{const{header:d,subHeader:h,hideBackButton:m=!0,rightActionButton:g,onClickingBackButton:f,secondaryHeader:u}=l;return e(o,{children:[e(a,{children:[e("div",Object.assign({className:"row--flex left-container"},{children:[!m&&r(n,{className:"cursor",height:24,width:24,onClick:f}),e("div",{children:[h?r(t,Object.assign({className:"brand"},{children:d})):r(s,{children:d}),r(c,{children:h})]})]})),r("div",Object.assign({className:"row--flex right-container"},{children:g}))]}),null!=u?u:r(i,{})]})};export{l as BikHeader};

package/dist/esm/components/bik-layout/CommonStyles.d.ts

@@ -15,6 +15,10 @@ export declare const BikLayoutContainer: import("@emotion/styled").StyledCompone
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BikHeaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikHeaderContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;