@startlibs/components 1.1.5 → 1.2.0-rc.2

package/lib-yak/WarningDialog.mjs

@@ -0,0 +1,107 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _extends from '@babel/runtime/helpers/extends';
+import _isString from 'lodash/fp/isString';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import { willUseSharedState } from '@startlibs/core';
+import { Button } from './Button.mjs';
+import { Dialog } from './Dialog.mjs';
+import { Icon } from './Icon.mjs';
+import { useDialogWithToggle } from './useDialogWithToggle.mjs';
+import { callIfFunction, getColor } from '@startlibs/utils';
+import React from 'react';
+import { styled, css } from '@yak/react';
+
+const _excluded = ["as"];
+const WarningDialog = styled(_ref => {
+  let {
+    content,
+    footer,
+    withX,
+    closeDialog,
+    leftButton,
+    additionalContent,
+    title,
+    rightButton,
+    className,
+    color = "alert",
+    icon = "warning",
+    confirmLabel = "Entendi",
+    noActions,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    className: className,
+    closeDialog: withX && closeDialog
+  }, _isString(icon) ? /*#__PURE__*/React.createElement(WarningDialogIcon, {
+    icon: icon,
+    color: color
+  }) : icon, title && /*#__PURE__*/React.createElement(WarningDialogTitle, {
+    color: color
+  }, title), content && /*#__PURE__*/React.createElement(Content, {
+    noTitle: !title,
+    noActions: noActions
+  }, content), additionalContent, callIfFunction(leftButton, closeDialog), confirmLabel !== false && /*#__PURE__*/React.createElement(Button, {
+    highlight: true,
+    onClick: closeDialog
+  }, confirmLabel), callIfFunction(rightButton, closeDialog), callIfFunction(footer, closeDialog), children);
+}).attrs({
+  className: "styled-warning-dialog"
+})`
+  text-align: center;
+  max-width: 36rem;
+  padding: 2.5rem;
+  ${Button} {
+    margin: 0.5rem !important;
+  }
+`;
+const WarningDialogTitle = styled(yakDomTag("h3")).attrs({
+  className: "styled-warning-dialog-title"
+})`
+  color: ${props => getColor(props.color)(props)};
+  font-weight: 500;
+  font-size: 20px;
+`;
+const Content = styled(yakDomTag("div"))`
+  font-size: 15px;
+  max-width: 27rem;
+  margin: 0 auto;
+  line-height: 130%;
+  ${props => !props.noActions && css`
+    margin: 0 auto 1.5rem;
+  `}
+  ${props => props.noTitle && css`
+    font-weight: 500;
+    font-size: 16px;
+  `}
+`;
+const WarningDialogIcon = styled(Icon).attrs({
+  className: "styled-warning-dialog-icon"
+})`
+  color: ${props => getColor(props.color)(props)};;
+  font-size: 46px;
+  display: block;
+  margin-bottom: 1.25rem;
+`;
+const useWarningDialog = () => useDialogWithToggle(toggle => /*#__PURE__*/React.createElement(WarningDialog, _extends({}, toggle.isOpen, {
+  closeDialog: toggle.close
+})));
+const [useRenderDefaultWarningDialog,, _setWarningDialog] = willUseSharedState();
+const setWarningDialog = _ref2 => {
+  let {
+      as: Dialog = WarningDialog
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return _setWarningDialog(/*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
+    closeDialog: () => _setWarningDialog(null)
+  })));
+};
+const DefaultWarningDialog = () => {
+  const [warningDialog] = useRenderDefaultWarningDialog();
+  if (warningDialog) {
+    return warningDialog;
+  }
+  return null;
+};
+
+export { DefaultWarningDialog, WarningDialog, WarningDialogIcon, WarningDialogTitle, setWarningDialog, useWarningDialog };
+//# sourceMappingURL=WarningDialog.mjs.map

package/lib-yak/WarningDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningDialog.mjs","sources":["../src/WarningDialog.jsx"],"sourcesContent":["import {willUseSharedState} from '@startlibs/core'\nimport {Button} from './Button'\nimport {Dialog} from './Dialog'\nimport {Icon} from './Icon'\nimport {useDialogWithToggle} from './useDialogWithToggle'\nimport { getColor, callIfFunction } from '@startlibs/utils';\nimport React from 'react'\nimport _ from 'lodash/fp'\nimport styled from 'styled-components';\n\nexport const WarningDialog = styled(({content, footer, withX ,closeDialog,leftButton,additionalContent,title,rightButton,className, color = \"alert\", icon = \"warning\",confirmLabel = \"Entendi\",noActions,children}) => {\n  return <Dialog className={className} closeDialog={withX && closeDialog}>\n    {_.isString(icon) ? <WarningDialogIcon icon={icon} color={color}/> : icon}\n    {title && <WarningDialogTitle color={color}>{title}</WarningDialogTitle>}\n    {content && <Content noTitle={!title} noActions={noActions}>{content}</Content>}\n    {additionalContent}\n    {callIfFunction(leftButton,closeDialog)}\n    {confirmLabel !== false && <Button highlight onClick={closeDialog}>{confirmLabel}</Button>}\n    {callIfFunction(rightButton,closeDialog)}\n    {callIfFunction(footer,closeDialog)}\n    {children}\n  </Dialog>\n})`\n  text-align: center;\n  max-width: 36rem;\n  padding: 2.5rem;\n  ${Button} {\n    margin: 0.5rem !important;\n  }\n`\nexport const WarningDialogTitle = styled.h3 `\n  color: ${props => getColor(props.color)(props)};\n  font-weight: 500;\n  font-size: 20px;\n`\nconst Content = styled.div `\n  font-size: 15px;\n  max-width: 27rem;\n  margin: 0 auto;\n  line-height: 130%;\n  ${props => !props.noActions && `\n    margin: 0 auto 1.5rem;\n  `}\n  ${props => props.noTitle &&`\n    font-weight: 500;\n    font-size: 16px;\n  `}\n`\nexport const WarningDialogIcon = styled(Icon)`\n  color: ${props => getColor(props.color)(props)};;\n  font-size: 46px;\n  display: block;\n  margin-bottom: 1.25rem;\n`\n\nexport const useWarningDialog = () => useDialogWithToggle((toggle) =>\n  <WarningDialog {...toggle.isOpen} closeDialog={toggle.close} />\n\n)\nconst [useRenderDefaultWarningDialog,,_setWarningDialog] = willUseSharedState()\n\nexport const setWarningDialog = ({as: Dialog = WarningDialog,...props}) => _setWarningDialog(<Dialog {...props} closeDialog={() => _setWarningDialog(null)}/>)\n\nexport const DefaultWarningDialog = () => {\n  const [warningDialog] = useRenderDefaultWarningDialog()\n  if (warningDialog) {\n    return warningDialog\n  }\n  return null\n}"],"names":["WarningDialog","styled","_ref","content","footer","withX","closeDialog","leftButton","additionalContent","title","rightButton","className","color","icon","confirmLabel","noActions","children","React","createElement","Dialog","_isString","WarningDialogIcon","WarningDialogTitle","Content","noTitle","callIfFunction","Button","highlight","onClick","attrs","yakDomTag","props","getColor","css","Icon","useWarningDialog","useDialogWithToggle","toggle","_extends","isOpen","close","useRenderDefaultWarningDialog","_setWarningDialog","willUseSharedState","setWarningDialog","_ref2","as","_objectWithoutProperties","_excluded","DefaultWarningDialog","warningDialog"],"mappings":"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"}

package/lib-yak/alt/buttons/OnClickLoadingButton.mjs

@@ -0,0 +1,36 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import { useToggle } from '@startlibs/core';
+import { callIfFunction } from '@startlibs/utils';
+import { Button } from '../../Button.mjs';
+
+const _excluded = ["onClick", "children", "onSuccess", "as", "onFailure", "className"];
+const OnClickLoadingButton = _ref => {
+  let {
+      onClick,
+      children,
+      onSuccess,
+      as = Button,
+      onFailure,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const loading = useToggle();
+  const Element = as;
+  return /*#__PURE__*/React.createElement(Element, _extends({
+    className: className,
+    isLoading: loading.isOpen
+  }, props, {
+    onClick: e => loading.wait(onClick(e).then(async e => {
+      await callIfFunction(onSuccess, e);
+      return e;
+    }, async e => {
+      await callIfFunction(onFailure, e);
+      throw e;
+    }))
+  }), children);
+};
+
+export { OnClickLoadingButton };
+//# sourceMappingURL=OnClickLoadingButton.mjs.map

package/lib-yak/alt/buttons/OnClickLoadingButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnClickLoadingButton.mjs","sources":["../../../src/alt/buttons/OnClickLoadingButton.jsx"],"sourcesContent":["import React from 'react'\nimport {useToggle} from '@startlibs/core'\nimport {callIfFunction} from '@startlibs/utils'\nimport {Button} from '../../Button'\n\nexport const OnClickLoadingButton = ({onClick,children,onSuccess, as = Button, onFailure, className,...props}) => {\n  const loading = useToggle()\n  const Element = as\n  return <Element className={className} isLoading={loading.isOpen} {...props} onClick={(e) => loading.wait(onClick(e).then(async (e) => {\n    await callIfFunction(onSuccess,e)\n    return e\n  },async (e) => {\n    await callIfFunction(onFailure,e)\n    throw e\n  }))}>{children}</Element>\n}"],"names":["OnClickLoadingButton","_ref","onClick","children","onSuccess","as","Button","onFailure","className","props","_objectWithoutProperties","_excluded","loading","useToggle","Element","React","createElement","_extends","isLoading","isOpen","e","wait","then","callIfFunction"],"mappings":";;;;;;;;AAKaA,MAAAA,oBAAoB,GAAGC,IAAA,IAA8E;EAAA,IAA7E;MAACC,OAAO;MAACC,QAAQ;MAACC,SAAS;AAAEC,MAAAA,EAAE,GAAGC,MAAM;MAAEC,SAAS;AAAEC,MAAAA,SAAAA;AAAkB,KAAC,GAAAP,IAAA;AAANQ,IAAAA,KAAK,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;AAC1G,EAAA,MAAMC,OAAO,GAAGC,SAAS,EAAE,CAAA;EAC3B,MAAMC,OAAO,GAAGT,EAAE,CAAA;AAClB,EAAA,oBAAOU,KAAA,CAAAC,aAAA,CAACF,OAAO,EAAAG,QAAA,CAAA;AAACT,IAAAA,SAAS,EAAEA,SAAU;IAACU,SAAS,EAAEN,OAAO,CAACO,MAAAA;AAAO,GAAA,EAAKV,KAAK,EAAA;AAAEP,IAAAA,OAAO,EAAGkB,CAAC,IAAKR,OAAO,CAACS,IAAI,CAACnB,OAAO,CAACkB,CAAC,CAAC,CAACE,IAAI,CAAC,MAAOF,CAAC,IAAK;AACpI,MAAA,MAAMG,cAAc,CAACnB,SAAS,EAACgB,CAAC,CAAC,CAAA;AACjC,MAAA,OAAOA,CAAC,CAAA;KACT,EAAC,MAAOA,CAAC,IAAK;AACb,MAAA,MAAMG,cAAc,CAAChB,SAAS,EAACa,CAAC,CAAC,CAAA;AACjC,MAAA,MAAMA,CAAC,CAAA;AACT,KAAC,CAAC,CAAA;AAAE,GAAA,CAAA,EAAEjB,QAAkB,CAAC,CAAA;AAC3B;;;;"}

package/lib-yak/alt/dialogs/DialogWithImageHeader.mjs

@@ -0,0 +1,50 @@
+import 'react';
+import { styled } from '@yak/react';
+import { getColor } from '@startlibs/utils';
+import { Dialog, CloseIcon } from '../../Dialog.mjs';
+
+const DialogWithImageHeader = styled(Dialog).attrs({
+  className: "styled-dialog-with-image-header"
+})`
+  max-width: 51rem;
+  
+  ${CloseIcon} {
+    background: ${__yakProps => {
+  const v = getColor('gray240');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    text-shadow: none;
+    color: rgba(120,120,120,1);
+    font-size: 20px;
+    box-shadow: rgba(0,0,0,0.2) 0px 1px 3px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px;
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
+    transition: 0.1s ease-out;
+    &:hover {
+      background-color: rgb(230,230,230);
+    }
+    &:active {
+      background-color: rgb(220,220,220);
+      transition: 0s ease-out;
+    }
+    @supports (position: sticky) {
+      position: sticky;
+      top: -2.5rem;
+      right: 0rem;
+      float: right;
+      margin-right: -1.25rem;
+      margin-top: 0.75rem;
+    }
+    @media (max-width: 600px) {
+      @supports (position: sticky) {
+        top: 0;
+        margin-right: -1rem;
+      }
+    }
+    
+  }
+`;
+
+export { DialogWithImageHeader };
+//# sourceMappingURL=DialogWithImageHeader.mjs.map

package/lib-yak/alt/dialogs/DialogWithImageHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogWithImageHeader.mjs","sources":["../../../src/alt/dialogs/DialogWithImageHeader.jsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport {media, getColor} from '@startlibs/utils'\nimport {CloseIcon, Dialog} from '../../Dialog'\n\nexport const DialogWithImageHeader = styled(Dialog)`\n  max-width: 51rem;\n  \n  ${CloseIcon} {\n    background: ${getColor('gray240')};\n    text-shadow: none;\n    color: rgba(120,120,120,1);\n    font-size: 20px;\n    box-shadow: rgba(0,0,0,0.2) 0px 1px 3px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n    transition: 0.1s ease-out;\n    &:hover {\n      background-color: rgb(230,230,230);\n    }\n    &:active {\n      background-color: rgb(220,220,220);\n      transition: 0s ease-out;\n    }\n    @supports (position: sticky) {\n      position: sticky;\n      top: -2.5rem;\n      right: 0rem;\n      float: right;\n      margin-right: -1.25rem;\n      margin-top: 0.75rem;\n    }\n    ${media.mobile`\n      @supports (position: sticky) {\n        top: 0;\n        margin-right: -1rem;\n      }\n    `}\n    \n  }\n`"],"names":["DialogWithImageHeader","styled","Dialog","attrs","className","CloseIcon","__yakProps","v","getColor"],"mappings":";;;;;AAKO,MAAMA,qBAAqB,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAAC,KAAA,CAAA;EAAAC,SAAA,EAAA,iCAAA;AAAA,CAAA,CAAA,CAAA;AACnD;AACA;AACA,EAAA,EAAIC,SAAS,CAAA;AACb,gBAAA,EADaC,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GACKC,QAAQ,CAAC,SAAS,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/lib-yak/alt/dialogs/DialogWithSidebar.mjs

@@ -0,0 +1,193 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useRef } from 'react';
+import { styled, css } from '@yak/react';
+import { getColor, twoWayAnimation, oneWayAnimation, callIfFunction } from '@startlibs/utils';
+import { useToggle, usePopupToggle, useLazyConstant } from '@startlibs/core';
+import { CloseIcon, Dialog } from '../../Dialog.mjs';
+import { willUseFlipSwitch } from '../../Flip.mjs';
+import { Loading } from '../../Loading.mjs';
+import { DialogContainer } from '../../containers/DialogContainer.mjs';
+
+const _excluded = ["className", "style", "tabIsOpen", "menuIsOpen", "sidebar", "Content", "openTab", "children", "title"];
+const SideMenu = styled(yakDomTag("div")).attrs({
+  className: "styled-side-menu"
+})`
+  background-color: ${__yakProps => {
+  const v = getColor('lightBluishGray');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  border-top-left-radius: 18px;
+  border-bottom-left-radius: 18px;
+  width: 19rem;
+  flex-shrink: 0;
+  padding: 1.25rem 0;
+  ${props => !props.visibleOnDesktop && css`display:none;`}
+  @media (max-width: 600px) {
+    display:block;
+    position:fixed;
+    top:0;
+    left:0;
+    bottom:0;
+    z-index:1000;
+    transition: 0.25s transform ease-out;
+    background-color: ${__yakProps => {
+  const v = getColor('gray240');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    box-shadow: -5px 0 20px 5px rgba(0,0,0,0.4);
+    border-radius: 0;
+    ${props => !props.isOpen && css`
+      transform: translateX(-100%);
+      box-shadow: none;
+    `}
+  }
+`;
+const DialogTabMenu = styled(yakDomTag("ul")).attrs({
+  className: "styled-dialog-tab-menu"
+})`
+  cursor: default;
+  overflow: auto;
+  text-align: left;
+  color: inherit;
+  user-select: none;
+  li {
+    position: relative;
+    padding: 1rem 2rem 1rem 4.1rem;
+    font-size: 14px;
+    @media (max-width: 600px) {
+      font-size: 16px;
+    }
+    &:hover {
+      background-color: ${__yakProps => {
+  const v = getColor('bluishGray');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      cursor: pointer;
+    }
+    &.selected {
+      color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      background: rgba(0, 132, 214, 0.125);
+      pointer-events: none;
+    }
+  }
+  .icon{
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3rem;
+    text-align: center;
+    line-height: 0;
+    font-size: 26px;
+  }
+  ${props => props.menuTabIsOpen && css`
+    li {
+      padding: 1.25rem 2rem 1.25rem 3.25rem;
+      border-radius: 6px;
+    }
+    .icon{
+      left: 0;
+    }
+  `}
+`;
+const [fadeIn, relativeFadeout] = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;');
+const absoluteOnLeave = oneWayAnimation('position: absolute;', 'position: absolute;');
+const fadeOut = [absoluteOnLeave, relativeFadeout];
+const MENU_TAB = '$menu$';
+
+// ponytail: sem footer — padrão do dialog com barra lateral; fecha pelo X ou por fora
+const DialogWithSidebarPresentation = _ref => {
+  let {
+      className,
+      style,
+      tabIsOpen,
+      menuIsOpen,
+      sidebar,
+      Content,
+      openTab,
+      children,
+      title
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const tab = useToggle(tabIsOpen);
+  const sideMenu = usePopupToggle(menuIsOpen);
+  const ref = useRef();
+  const switchAnimation = useLazyConstant(willUseFlipSwitch);
+  const menuTabIsOpen = tab.isOpen === MENU_TAB;
+  return /*#__PURE__*/React.createElement(DialogContainer, _extends({}, props, {
+    ref: ref
+  }), _ref2 => {
+    let {
+      confirmCloseDialog
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className + " JS-has-wc",
+      style: style,
+      ref: ref
+    }, props.closeDialog && /*#__PURE__*/React.createElement(CloseIcon, {
+      onClick: confirmCloseDialog
+    }), /*#__PURE__*/React.createElement(SideMenu, {
+      isOpen: sideMenu.isOpen,
+      visibleOnDesktop: true
+    }, sidebar(tab)), /*#__PURE__*/React.createElement("div", {
+      className: (menuTabIsOpen ? "menuTabIsOpen " : "") + "main-container"
+    }, /*#__PURE__*/React.createElement("h2", null, menuTabIsOpen ? "Configurações gerais" : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "icon icon-menu mobile-only",
+      onClick: sideMenu.open
+    }), title(tab))), /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(TabContent, {
+        key: "loading",
+        switchAnimation: switchAnimation,
+        tab: tab,
+        children: /*#__PURE__*/React.createElement(Loading, {
+          absolute: true
+        })
+      })
+    }, /*#__PURE__*/React.createElement(TabContent, {
+      key: tab.isOpen,
+      switchAnimation: switchAnimation,
+      tab: tab,
+      Content: Content,
+      children: children
+    }))));
+  });
+};
+const TabContent = _ref3 => {
+  let {
+    Content,
+    children,
+    tab,
+    switchAnimation
+  } = _ref3;
+  const contentRef = useRef();
+  switchAnimation(contentRef, fadeIn, fadeOut);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: "dialog-content"
+  }, callIfFunction(Content, tab), callIfFunction(children, tab));
+};
+
+// R6: "as" não existe no yak. Dialog expõe "tagAs" no lugar (ver Dialog.jsx).
+const DialogWithSidebar = styled(props => /*#__PURE__*/React.createElement(Dialog, _extends({
+  fullscreenOnMobile: true,
+  tagAs: DialogWithSidebarPresentation
+}, props))).attrs({
+  className: "styled-dialog-with-sidebar"
+})`
+  max-width: 59rem;
+  display: flex;
+  padding: 0;
+  flex-direction: row;
+  @media (max-width: 600px) {
+    min-height: 100%;
+    overflow: hidden;
+  }
+`;
+
+export { DialogTabMenu, DialogWithSidebar, DialogWithSidebarPresentation, MENU_TAB, SideMenu };
+//# sourceMappingURL=DialogWithSidebar.mjs.map

package/lib-yak/alt/dialogs/DialogWithSidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogWithSidebar.mjs","sources":["../../../src/alt/dialogs/DialogWithSidebar.jsx"],"sourcesContent":["import React, {useRef} from 'react'\nimport styled from 'styled-components'\nimport {media, callIfFunction, getColor, twoWayAnimation, oneWayAnimation} from '@startlibs/utils'\nimport {useToggle, usePopupToggle, useLazyConstant} from '@startlibs/core'\nimport {CloseIcon, Dialog} from '../../Dialog'\nimport {willUseFlipSwitch} from '../../Flip'\nimport {Loading} from '../../Loading'\nimport {DialogContainer} from '../../containers/DialogContainer'\n\nexport const SideMenu = styled.div`\n  background-color: ${getColor('lightBluishGray')};\n  border-top-left-radius: 18px;\n  border-bottom-left-radius: 18px;\n  width: 19rem;\n  flex-shrink: 0;\n  padding: 1.25rem 0;\n  ${props => !props.visibleOnDesktop && 'display:none;'}\n  ${media.mobile`\n    display:block;\n    position:fixed;\n    top:0;\n    left:0;\n    bottom:0;\n    z-index:1000;\n    transition: 0.25s transform ease-out;\n    background-color: ${getColor('gray240')};\n    box-shadow: -5px 0 20px 5px rgba(0,0,0,0.4);\n    border-radius: 0;\n    ${props => !props.isOpen && `\n      transform: translateX(-100%);\n      box-shadow: none;\n    `}\n  `}\n`\nexport const DialogTabMenu = styled.ul`\n  cursor: default;\n  overflow: auto;\n  text-align: left;\n  color: inherit;\n  user-select: none;\n  li {\n    position: relative;\n    padding: 1rem 2rem 1rem 4.1rem;\n    font-size: 14px;\n    ${media.mobile`\n      font-size: 16px;\n    `}\n    &:hover {\n      background-color: ${getColor('bluishGray')};\n      cursor: pointer;\n    }\n    &.selected {\n      color: ${getColor('main')};\n      background: rgba(0, 132, 214, 0.125);\n      pointer-events: none;\n    }\n  }\n  .icon{\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3rem;\n    text-align: center;\n    line-height: 0;\n    font-size: 26px;\n  }\n  ${props => props.menuTabIsOpen && `\n    li {\n      padding: 1.25rem 2rem 1.25rem 3.25rem;\n      border-radius: 6px;\n    }\n    .icon{\n      left: 0;\n    }\n  `}\n`\n\nconst [fadeIn, relativeFadeout] = twoWayAnimation('opacity: 0;','opacity: 0;', 'opacity: 1;')\nconst absoluteOnLeave = oneWayAnimation('position: absolute;', 'position: absolute;')\nconst fadeOut = [absoluteOnLeave,relativeFadeout]\n\nexport const MENU_TAB = '$menu$'\n\n// ponytail: sem footer — padrão do dialog com barra lateral; fecha pelo X ou por fora\nexport const DialogWithSidebarPresentation = ({className, style, tabIsOpen, menuIsOpen, sidebar, Content, openTab, children, title, ...props}) => {\n  const tab = useToggle(tabIsOpen)\n  const sideMenu = usePopupToggle(menuIsOpen)\n  const ref = useRef()\n  const switchAnimation = useLazyConstant(willUseFlipSwitch)\n\n  const menuTabIsOpen = tab.isOpen === MENU_TAB\n\n  return <DialogContainer {...props} ref={ref}>{({confirmCloseDialog}) =>\n      <div className={className + \" JS-has-wc\"} style={style} ref={ref}>\n        {\n          props.closeDialog &&\n          <CloseIcon onClick={confirmCloseDialog}/>\n        }\n        <SideMenu isOpen={sideMenu.isOpen} visibleOnDesktop>\n          {sidebar(tab)}\n        </SideMenu>\n\n        <div className={(menuTabIsOpen ? \"menuTabIsOpen \" : \"\") + \"main-container\"}>\n          <h2>{\n            menuTabIsOpen ? \"Configurações gerais\" : <><span className=\"icon icon-menu mobile-only\" onClick={sideMenu.open}/>\n          {title(tab)}</>}</h2>\n          <React.Suspense fallback={<TabContent key=\"loading\" switchAnimation={switchAnimation} tab={tab} children={<Loading absolute/>} />}>\n            <TabContent key={tab.isOpen} switchAnimation={switchAnimation} tab={tab} Content={Content} children={children} />\n          </React.Suspense>\n        </div>\n      </div>\n    }</DialogContainer>\n}\n\nconst TabContent = ({Content,children,tab,switchAnimation}) => {\n  const contentRef = useRef()\n  switchAnimation(contentRef,fadeIn,fadeOut)\n\n  return <div ref={contentRef} className=\"dialog-content\">\n    {callIfFunction(Content,tab)}\n    {callIfFunction(children,tab)}\n  </div>\n}\n\n// R6: \"as\" não existe no yak. Dialog expõe \"tagAs\" no lugar (ver Dialog.jsx).\nexport const DialogWithSidebar = styled((props) => <Dialog fullscreenOnMobile tagAs={DialogWithSidebarPresentation} {...props} />)`\n  max-width: 59rem;\n  display: flex;\n  padding: 0;\n  flex-direction: row;\n  ${media.mobile`\n    min-height: 100%;\n    overflow: hidden;\n  `}\n`\n"],"names":["SideMenu","styled","yakDomTag","attrs","className","__yakProps","v","getColor","props","visibleOnDesktop","css","isOpen","DialogTabMenu","menuTabIsOpen","fadeIn","relativeFadeout","twoWayAnimation","absoluteOnLeave","oneWayAnimation","fadeOut","MENU_TAB","DialogWithSidebarPresentation","_ref","style","tabIsOpen","menuIsOpen","sidebar","Content","openTab","children","title","_objectWithoutProperties","_excluded","tab","useToggle","sideMenu","usePopupToggle","ref","useRef","switchAnimation","useLazyConstant","willUseFlipSwitch","React","createElement","DialogContainer","_extends","_ref2","confirmCloseDialog","closeDialog","CloseIcon","onClick","Fragment","open","Suspense","fallback","TabContent","key","Loading","absolute","_ref3","contentRef","callIfFunction","DialogWithSidebar","Dialog","fullscreenOnMobile","tagAs"],"mappings":"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"}

package/lib-yak/alt/dialogs/MobileBubbleDialog.mjs

@@ -0,0 +1,82 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useRef } from 'react';
+import { getColor, callIfFunction } from '@startlibs/utils';
+import { styled } from '@yak/react';
+import { DialogErrorContent } from '../../Dialog.mjs';
+import { DialogContainer } from '../../containers/DialogContainer.mjs';
+
+const _excluded = ["className", "footer", "Content", "children", "title", "illustration", "icon", "auxiliarActions"];
+const MobileBubbleDialogFooter = styled(yakDomTag("div"))`
+  background-color: ${__yakProps => {
+  const v = getColor('gray240');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  min-height: 5rem;
+  color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 1rem;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  &:active {
+    background: rgb(232,232,232);
+  }
+`;
+const MobileBubbleDialog = styled(_ref => {
+  let {
+      className,
+      footer,
+      Content,
+      children,
+      title,
+      illustration,
+      icon,
+      auxiliarActions
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const ref = useRef();
+  return /*#__PURE__*/React.createElement(DialogContainer, _extends({}, props, {
+    closeOnClick: true,
+    ref: ref,
+    DialogErrorContent: DialogErrorContent,
+    title: title
+  }), _ref2 => {
+    let {
+      confirmCloseDialog
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: className,
+      ref: ref
+    }, children && callIfFunction(children), /*#__PURE__*/React.createElement(MobileBubbleDialogFooter, {
+      onClick: confirmCloseDialog
+    }, "Fechar")));
+  });
+}).attrs({
+  className: "styled-mobile-bubble-dialog"
+})`
+  border-radius: 10px;
+  background-color: white;
+  width: 100%;
+  margin: auto;
+  position: relative;
+  align-self: baseline;
+  overflow: hidden;
+  @supports (flex-wrap: wrap) {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+export { MobileBubbleDialog };
+//# sourceMappingURL=MobileBubbleDialog.mjs.map

package/lib-yak/alt/dialogs/MobileBubbleDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBubbleDialog.mjs","sources":["../../../src/alt/dialogs/MobileBubbleDialog.jsx"],"sourcesContent":["import React, {useRef} from 'react'\n\nimport {callIfFunction, getColor} from '@startlibs/utils'\nimport styled from 'styled-components'\n\nimport {DialogErrorContent} from '../../Dialog'\nimport {DialogContainer} from '../../containers/DialogContainer'\n\nconst MobileBubbleDialogFooter = styled.div `\n  background-color: ${getColor('gray240')};\n  min-height: 5rem;\n  color: ${getColor('main')};\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  padding: 1rem;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-bottom-left-radius: 10px;\n  border-bottom-right-radius: 10px;\n  &:active {\n    background: rgb(232,232,232);\n  }\n`\n\nexport const MobileBubbleDialog = styled(({className, footer, Content, children, title, illustration, icon, auxiliarActions, ...props}) => {\n  const ref = useRef()\n  return <DialogContainer {...props} closeOnClick ref={ref} DialogErrorContent={DialogErrorContent} title={title}>{({confirmCloseDialog}) =>\n    <>\n    <div className={className} ref={ref}>\n      {\n        children && callIfFunction(children)\n      }\n      <MobileBubbleDialogFooter onClick={confirmCloseDialog}>\n        Fechar\n      </MobileBubbleDialogFooter>\n    </div>\n    </>\n  }</DialogContainer>\n})`\n  border-radius: 10px;\n  background-color: white;\n  width: 100%;\n  margin: auto;\n  position: relative;\n  align-self: baseline;\n  overflow: hidden;\n  @supports (flex-wrap: wrap) {\n    display: flex;\n    flex-direction: column;\n  }\n`\n\n"],"names":["MobileBubbleDialogFooter","styled","yakDomTag","__yakProps","v","getColor","MobileBubbleDialog","_ref","className","footer","Content","children","title","illustration","icon","auxiliarActions","props","_objectWithoutProperties","_excluded","ref","useRef","React","createElement","DialogContainer","_extends","closeOnClick","DialogErrorContent","_ref2","confirmCloseDialog","Fragment","callIfFunction","onClick","attrs"],"mappings":";;;;;;;;;;AAQA,MAAMA,wBAAwB,GAAGC,MAAA,CAAAC,SAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AACjC,oBAAA,EADiCC,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GACXC,QAAQ,CAAC,SAAS,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AACzC;AACA,SAAA,EAFyCD,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GAE9BC,QAAQ,CAAC,MAAM,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;MAEYE,kBAAkB,GAAGL,MAAM,CAACM,IAAA,IAAkG;EAAA,IAAjG;MAACC,SAAS;MAAEC,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,KAAK;MAAEC,YAAY;MAAEC,IAAI;AAAEC,MAAAA,eAAAA;AAAyB,KAAC,GAAAR,IAAA;AAANS,IAAAA,KAAK,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA,CAAA,CAAA;AACnI,EAAA,MAAMC,GAAG,GAAGC,MAAM,EAAE,CAAA;EACpB,oBAAOC,KAAA,CAAAC,aAAA,CAACC,eAAe,EAAAC,QAAA,KAAKR,KAAK,EAAA;IAAES,YAAY,EAAA,IAAA;AAACN,IAAAA,GAAG,EAAEA,GAAI;AAACO,IAAAA,kBAAkB,EAAEA,kBAAmB;AAACd,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,CAAA,EAAEe,KAAA,IAAA;IAAA,IAAC;AAACC,MAAAA,kBAAAA;AAAkB,KAAC,GAAAD,KAAA,CAAA;IAAA,oBACpIN,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAQ,QAAA,EAAA,IAAA,eACAR,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKd,MAAAA,SAAS,EAAEA,SAAU;AAACW,MAAAA,GAAG,EAAEA,GAAAA;KAE5BR,EAAAA,QAAQ,IAAImB,cAAc,CAACnB,QAAQ,CAAC,eAEtCU,KAAA,CAAAC,aAAA,CAACtB,wBAAwB,EAAA;AAAC+B,MAAAA,OAAO,EAAEH,kBAAAA;KAAoB,EAAA,QAE7B,CACvB,CACH,CAAC,CAAA;AAAA,GACa,CAAC,CAAA;AACrB,CAAC,CAAC,CAAAI,KAAA,CAAA;EAAAxB,SAAA,EAAA,6BAAA;AAAA,CAAA,CAAA,CAAA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}