@tecsinapse/react-web-kit 2.1.0 → 2.1.2

package/README.md

@@ -13,7 +13,7 @@ In addition, the design system and component library should be easy to use for d
 
 ## Quick start
 
-Here are a few helpful links for getting started with Circuit UI:
+Here are a few helpful links for getting started:
 
 - [Documentation](https://tecsinapse.github.io/design-system) - Learn how to use and view the components in Storybook.
 - [Getting started](https://tecsinapse.github.io/design-system/?path=/docs/introduction-getting-started--page) - Set up a new app with our DS or add it to an existing project.

package/dist/cjs/components/atoms/Accordion/Accordion.js

@@ -19,6 +19,7 @@ const Accordion = ({
   const [contentHeight, setContentHeight] = React.useState(0);
   const theme = react.useTheme();
   const ref = React.useRef(null);
+  const titleTransitionRef = React.useRef(null);
   React.useEffect(() => setOpen(_open), [_open]);
   React.useLayoutEffect(() => {
     const size = Array.from(
@@ -33,7 +34,7 @@ const Accordion = ({
     }
     setOpen((state) => !state);
   }, [onChange]);
-  return /* @__PURE__ */ React.createElement(styled.AccordionContainer, { ...rest }, /* @__PURE__ */ React.createElement(styled.TitleContainer, { onClick: handleClick }, /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: transition }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(styled.AccordionContainer, { ...rest }, /* @__PURE__ */ React.createElement(styled.TitleContainer, { onClick: handleClick }, /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: transition, nodeRef: titleTransitionRef }, (state) => /* @__PURE__ */ React.createElement("div", { ref: titleTransitionRef }, /* @__PURE__ */ React.createElement(
     reactCore.Text,
     {
       typography: "h4",
@@ -44,7 +45,7 @@ const Accordion = ({
       }
     },
     title
-  )), /* @__PURE__ */ React.createElement(styled.IconContainer, null, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(styled.IconContainer, null, /* @__PURE__ */ React.createElement(
     reactCore.Icon,
     {
       type: "material-community",
@@ -52,7 +53,7 @@ const Accordion = ({
       size: "kilo",
       fontColor: "medium"
     }
-  ))), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: transition }, (state) => /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: transition, nodeRef: ref }, (state) => /* @__PURE__ */ React.createElement(
     styled.ContentContainer,
     {
       ref: (htmlEl) => ref.current = htmlEl,

package/dist/cjs/components/atoms/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../src/components/atoms/Accordion/Accordion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, ThemeProp } from '@tecsinapse/react-core';\nimport {\n  AccordionContainer,\n  IconContainer,\n  TitleContainer,\n  ContentContainer,\n} from './styled';\nimport { Transition } from 'react-transition-group';\nimport {\n  contentStyle,\n  contentTransition,\n  titleStyle,\n  titleTransition,\n} from './animations';\nimport { useTheme } from '@emotion/react';\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  onChange?: () => void;\n  title: string;\n  /** Transition time for collapse effect in ms */\n  transition?: number;\n}\n\nconst Accordion: React.FC<AccordionProps> = ({\n  title,\n  open: _open = false,\n  onChange,\n  transition = 200,\n  children,\n  ...rest\n}) => {\n  const [open, setOpen] = React.useState(_open);\n  const [contentHeight, setContentHeight] = React.useState(0);\n  const theme = useTheme() as ThemeProp;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => setOpen(_open), [_open]);\n\n  React.useLayoutEffect(() => {\n    const size = Array.from(\n      (ref.current?.children || []) as HTMLCollection\n    ).reduce((prev, curr) => prev + curr.clientHeight, 0);\n    setContentHeight(size);\n  }, []);\n\n  const handleClick = React.useCallback(() => {\n    if (onChange) {\n      onChange();\n      return;\n    }\n    setOpen(state => !state);\n  }, [onChange]);\n\n  return (\n    <AccordionContainer {...rest}>\n      <TitleContainer onClick={handleClick}>\n        <Transition in={open} timeout={transition}>\n          {state => (\n            <Text\n              typography=\"h4\"\n              fontWeight=\"bold\"\n              style={{\n                ...titleStyle(transition, theme),\n                ...titleTransition(theme)[state],\n              }}\n            >\n              {title}\n            </Text>\n          )}\n        </Transition>\n        <IconContainer>\n          <Icon\n            type=\"material-community\"\n            name={open ? 'chevron-up' : 'chevron-down'}\n            size=\"kilo\"\n            fontColor=\"medium\"\n          />\n        </IconContainer>\n      </TitleContainer>\n      <Transition in={open} timeout={transition}>\n        {state => (\n          <ContentContainer\n            ref={htmlEl => (ref.current = htmlEl)}\n            style={{\n              ...contentStyle(open, transition, contentHeight, theme),\n              ...contentTransition(contentHeight, theme)[state],\n            }}\n          >\n            {children}\n          </ContentContainer>\n        )}\n      </Transition>\n    </AccordionContainer>\n  );\n};\n\nexport default Accordion;\n"],"names":["useTheme","useRef","AccordionContainer","TitleContainer","Transition","Text","titleStyle","titleTransition","IconContainer","Icon","ContentContainer","contentStyle","contentTransition"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../../src/components/atoms/Accordion/Accordion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, ThemeProp } from '@tecsinapse/react-core';\nimport {\n  AccordionContainer,\n  IconContainer,\n  TitleContainer,\n  ContentContainer,\n} from './styled';\nimport { Transition } from 'react-transition-group';\nimport {\n  contentStyle,\n  contentTransition,\n  titleStyle,\n  titleTransition,\n} from './animations';\nimport { useTheme } from '@emotion/react';\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  onChange?: () => void;\n  title: string;\n  /** Transition time for collapse effect in ms */\n  transition?: number;\n}\n\nconst Accordion: React.FC<AccordionProps> = ({\n  title,\n  open: _open = false,\n  onChange,\n  transition = 200,\n  children,\n  ...rest\n}) => {\n  const [open, setOpen] = React.useState(_open);\n  const [contentHeight, setContentHeight] = React.useState(0);\n  const theme = useTheme() as ThemeProp;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const titleTransitionRef = useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => setOpen(_open), [_open]);\n\n  React.useLayoutEffect(() => {\n    const size = Array.from(\n      (ref.current?.children || []) as HTMLCollection\n    ).reduce((prev, curr) => prev + curr.clientHeight, 0);\n    setContentHeight(size);\n  }, []);\n\n  const handleClick = React.useCallback(() => {\n    if (onChange) {\n      onChange();\n      return;\n    }\n    setOpen(state => !state);\n  }, [onChange]);\n\n  return (\n    <AccordionContainer {...rest}>\n      <TitleContainer onClick={handleClick}>\n        <Transition in={open} timeout={transition} nodeRef={titleTransitionRef}>\n          {state => (\n            <div ref={titleTransitionRef}>\n              <Text\n                typography=\"h4\"\n                fontWeight=\"bold\"\n                style={{\n                  ...titleStyle(transition, theme),\n                  ...titleTransition(theme)[state],\n                }}\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </Transition>\n        <IconContainer>\n          <Icon\n            type=\"material-community\"\n            name={open ? 'chevron-up' : 'chevron-down'}\n            size=\"kilo\"\n            fontColor=\"medium\"\n          />\n        </IconContainer>\n      </TitleContainer>\n      <Transition in={open} timeout={transition} nodeRef={ref}>\n        {state => (\n          <ContentContainer\n            ref={htmlEl => (ref.current = htmlEl)}\n            style={{\n              ...contentStyle(open, transition, contentHeight, theme),\n              ...contentTransition(contentHeight, theme)[state],\n            }}\n          >\n            {children}\n          </ContentContainer>\n        )}\n      </Transition>\n    </AccordionContainer>\n  );\n};\n\nexport default Accordion;\n"],"names":["useTheme","useRef","AccordionContainer","TitleContainer","Transition","Text","titleStyle","titleTransition","IconContainer","Icon","ContentContainer","contentStyle","contentTransition"],"mappings":"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"}

package/dist/cjs/components/atoms/Dropdown/index.d.ts

@@ -2,6 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 export interface DropdownProps {
     visible: boolean;
     setVisible: Dispatch<SetStateAction<boolean>>;
+    onClickAway?: () => void;
 }
 export declare const Dropdown: React.FC<DropdownProps & {
     children: JSX.Element;

package/dist/cjs/components/atoms/Dropdown/index.js

@@ -10,11 +10,12 @@ var useClickAwayListener = require('../../../hooks/useClickAwayListener.js');
 const Component = ({
   visible,
   setVisible,
+  onClickAway,
   children
 }) => {
   const refDropDown = React.useRef(null);
-  useClickAwayListener.useClickAwayListener(refDropDown, setVisible);
-  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: visible, timeout: 300 }, (state) => /* @__PURE__ */ React.createElement(
+  useClickAwayListener.useClickAwayListener(refDropDown, setVisible, "mousedown", onClickAway);
+  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: visible, timeout: 300, nodeRef: refDropDown }, (state) => /* @__PURE__ */ React.createElement(
     styled.StyledContainerDropdown,
     {
       style: { ...animations.defaultStyles, ...animations.transition["bottom"][state] },

package/dist/cjs/components/atoms/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n  visible,\n  setVisible,\n  children,\n}): JSX.Element => {\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setVisible);\n\n  return (\n    <Transition in={visible} timeout={300}>\n      {state => (\n        <StyledContainerDropdown\n          style={{ ...defaultStyles, ...transition['bottom'][state] }}\n          ref={refDropDown}\n        >\n          {children}\n        </StyledContainerDropdown>\n      )}\n    </Transition>\n  );\n};\n\nexport const Dropdown = Component;\n"],"names":["useClickAwayListener","Transition","StyledContainerDropdown","defaultStyles","transition"],"mappings":";;;;;;;;;AAWA,MAAM,YAAiE,CAAC;AAAA,EACtE,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmB,KAAA;AACjB,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAAA,yCAAA,CAAqB,aAAa,UAAU,CAAA,CAAA;AAE5C,EAAA,2CACGC,+BAAW,EAAA,EAAA,EAAA,EAAI,OAAS,EAAA,OAAA,EAAS,OAC/B,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,GAAGC,wBAAA,EAAe,GAAGC,qBAAW,CAAA,QAAQ,CAAE,CAAA,KAAK,CAAE,EAAA;AAAA,MAC1D,GAAK,EAAA,WAAA;AAAA,KAAA;AAAA,IAEJ,QAAA;AAAA,GAGP,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,QAAW,GAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n  onClickAway?: () => void;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n  visible,\n  setVisible,\n  onClickAway,\n  children,\n}): JSX.Element => {\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setVisible, 'mousedown', onClickAway);\n\n  return (\n    <Transition in={visible} timeout={300} nodeRef={refDropDown}>\n      {state => (\n        <StyledContainerDropdown\n          style={{ ...defaultStyles, ...transition['bottom'][state] }}\n          ref={refDropDown}\n        >\n          {children}\n        </StyledContainerDropdown>\n      )}\n    </Transition>\n  );\n};\n\nexport const Dropdown = Component;\n"],"names":["useClickAwayListener","Transition","StyledContainerDropdown","defaultStyles","transition"],"mappings":";;;;;;;;;AAYA,MAAM,YAAiE,CAAC;AAAA,EACtE,OAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AACF,CAAmB,KAAA;AACjB,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAqBA,yCAAA,CAAA,WAAA,EAAa,UAAY,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AAEtE,EACE,uBAAA,KAAA,CAAA,aAAA,CAACC,mCAAW,EAAI,EAAA,OAAA,EAAS,SAAS,GAAK,EAAA,OAAA,EAAS,eAC7C,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,GAAGC,wBAAA,EAAe,GAAGC,qBAAW,CAAA,QAAQ,CAAE,CAAA,KAAK,CAAE,EAAA;AAAA,MAC1D,GAAK,EAAA,WAAA;AAAA,KAAA;AAAA,IAEJ,QAAA;AAAA,GAGP,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,QAAW,GAAA;;;;"}

package/dist/cjs/components/atoms/Modal/Modal.js

@@ -13,9 +13,11 @@ const Modal = ({
   style,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { open, onClose, zIndex: "modal" }), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 400 }, (state) => /* @__PURE__ */ React.createElement(
+  const transitionRef = React.useRef(null);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { open, onClose, zIndex: "modal" }), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 400, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
     styled.ModalContainer,
     {
+      ref: transitionRef,
       style: {
         ...style,
         ...animations.defaultStyleOverlay,

package/dist/cjs/components/atoms/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../../src/components/atoms/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { Transition } from 'react-transition-group';\nimport { Overlay } from '../Overlay';\nimport { ModalContainer } from './styled';\nimport { defaultStyleOverlay, transitionStylesOverlay } from './animations';\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  children,\n  open,\n  onClose,\n  style,\n  ...rest\n}) => {\n  return (\n    <>\n      <Overlay open={open} onClose={onClose} zIndex=\"modal\" />\n      <Transition in={open} timeout={400}>\n        {state => (\n          <ModalContainer\n            style={{\n              ...style,\n              ...defaultStyleOverlay,\n              ...transitionStylesOverlay[state],\n            }}\n            {...rest}\n          >\n            {children}\n          </ModalContainer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Modal;\n"],"names":["Transition","ModalContainer","defaultStyleOverlay","transitionStylesOverlay"],"mappings":";;;;;;;;AAWA,MAAM,QAA8B,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAM,KAAA;AACJ,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAY,SAAkB,MAAO,EAAA,OAAA,EAAQ,CACtD,kBAAA,KAAA,CAAA,aAAA,CAACA,+BAAW,EAAA,EAAA,EAAA,EAAI,IAAM,EAAA,OAAA,EAAS,OAC5B,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,GAAGC,8BAAA;AAAA,QACH,GAAGC,mCAAwB,KAAK,CAAA;AAAA,OAClC;AAAA,MACC,GAAG,IAAA;AAAA,KAAA;AAAA,IAEH,QAAA;AAAA,GAGP,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Modal.js","sources":["../../../../../src/components/atoms/Modal/Modal.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { Overlay } from '../Overlay';\nimport { ModalContainer } from './styled';\nimport { defaultStyleOverlay, transitionStylesOverlay } from './animations';\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  children,\n  open,\n  onClose,\n  style,\n  ...rest\n}) => {\n  const transitionRef = useRef(null);\n  return (\n    <>\n      <Overlay open={open} onClose={onClose} zIndex=\"modal\" />\n      <Transition in={open} timeout={400} nodeRef={transitionRef}>\n        {state => (\n          <ModalContainer\n            ref={transitionRef}\n            style={{\n              ...style,\n              ...defaultStyleOverlay,\n              ...transitionStylesOverlay[state],\n            }}\n            {...rest}\n          >\n            {children}\n          </ModalContainer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Modal;\n"],"names":["useRef","Transition","ModalContainer","defaultStyleOverlay","transitionStylesOverlay"],"mappings":";;;;;;;;AAWA,MAAM,QAA8B,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAM,KAAA;AACJ,EAAM,MAAA,aAAA,GAAgBA,aAAO,IAAI,CAAA,CAAA;AACjC,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAY,EAAA,OAAA,EAAkB,QAAO,OAAQ,EAAA,CAAA,kBACrD,KAAA,CAAA,aAAA,CAAAC,+BAAA,EAAA,EAAW,IAAI,IAAM,EAAA,OAAA,EAAS,GAAK,EAAA,OAAA,EAAS,iBAC1C,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,aAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,GAAGC,8BAAA;AAAA,QACH,GAAGC,mCAAwB,KAAK,CAAA;AAAA,OAClC;AAAA,MACC,GAAG,IAAA;AAAA,KAAA;AAAA,IAEH,QAAA;AAAA,GAGP,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/components/atoms/Overlay/Overlay.js

@@ -12,7 +12,8 @@ const Overlay = ({
   zIndex = "default",
   children
 }) => {
-  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout }, (state) => /* @__PURE__ */ React.createElement(
+  const transitionRef = React.useRef(null);
+  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
     styled.StyledOverlay,
     {
       style: {
@@ -21,7 +22,8 @@ const Overlay = ({
       },
       onClick: open ? onClose : void 0,
       show: open,
-      zIndex
+      zIndex,
+      ref: transitionRef
     },
     children
   ));

package/dist/cjs/components/atoms/Overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../../../src/components/atoms/Overlay/Overlay.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { ZIndex } from '@tecsinapse/react-core';\nimport { defaultStyleOverlay, transitionStylesOverlay } from './animations';\nimport { StyledOverlay } from './styled';\n\nexport interface OverlayProps {\n  timeout?: number;\n  open: boolean;\n  onClose: () => void;\n  zIndex: keyof ZIndex;\n  children?: ReactNode;\n}\n\nconst Overlay = ({\n  timeout = 300,\n  open,\n  onClose,\n  zIndex = 'default',\n  children,\n}: OverlayProps): JSX.Element => {\n  return (\n    <Transition in={open} timeout={timeout}>\n      {state => (\n        <StyledOverlay\n          style={{\n            ...defaultStyleOverlay,\n            ...transitionStylesOverlay[state],\n          }}\n          onClick={open ? onClose : undefined}\n          show={open}\n          zIndex={zIndex}\n        >\n          {children}\n        </StyledOverlay>\n      )}\n    </Transition>\n  );\n};\n\nexport default Overlay;\n"],"names":["Transition","StyledOverlay","defaultStyleOverlay","transitionStylesOverlay"],"mappings":";;;;;;;AAcA,MAAM,UAAU,CAAC;AAAA,EACf,OAAU,GAAA,GAAA;AAAA,EACV,IAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAS,GAAA,SAAA;AAAA,EACT,QAAA;AACF,CAAiC,KAAA;AAC/B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,+BAAA,EAAA,EAAW,EAAI,EAAA,IAAA,EAAM,WACnB,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAGC,8BAAA;AAAA,QACH,GAAGC,mCAAwB,KAAK,CAAA;AAAA,OAClC;AAAA,MACA,OAAA,EAAS,OAAO,OAAU,GAAA,KAAA,CAAA;AAAA,MAC1B,IAAM,EAAA,IAAA;AAAA,MACN,MAAA;AAAA,KAAA;AAAA,IAEC,QAAA;AAAA,GAGP,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Overlay.js","sources":["../../../../../src/components/atoms/Overlay/Overlay.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { ZIndex } from '@tecsinapse/react-core';\nimport { defaultStyleOverlay, transitionStylesOverlay } from './animations';\nimport { StyledOverlay } from './styled';\n\nexport interface OverlayProps {\n  timeout?: number;\n  open: boolean;\n  onClose: () => void;\n  zIndex: keyof ZIndex;\n  children?: ReactNode;\n}\n\nconst Overlay = ({\n  timeout = 300,\n  open,\n  onClose,\n  zIndex = 'default',\n  children,\n}: OverlayProps): JSX.Element => {\n  const transitionRef = useRef(null);\n  return (\n    <Transition in={open} timeout={timeout} nodeRef={transitionRef}>\n      {state => (\n        <StyledOverlay\n          style={{\n            ...defaultStyleOverlay,\n            ...transitionStylesOverlay[state],\n          }}\n          onClick={open ? onClose : undefined}\n          show={open}\n          zIndex={zIndex}\n          ref={transitionRef}\n        >\n          {children}\n        </StyledOverlay>\n      )}\n    </Transition>\n  );\n};\n\nexport default Overlay;\n"],"names":["useRef","Transition","StyledOverlay","defaultStyleOverlay","transitionStylesOverlay"],"mappings":";;;;;;;AAcA,MAAM,UAAU,CAAC;AAAA,EACf,OAAU,GAAA,GAAA;AAAA,EACV,IAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAS,GAAA,SAAA;AAAA,EACT,QAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,aAAA,GAAgBA,aAAO,IAAI,CAAA,CAAA;AACjC,EAAA,2CACGC,+BAAW,EAAA,EAAA,EAAA,EAAI,MAAM,OAAkB,EAAA,OAAA,EAAS,iBAC9C,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,GAAGC,8BAAA;AAAA,QACH,GAAGC,mCAAwB,KAAK,CAAA;AAAA,OAClC;AAAA,MACA,OAAA,EAAS,OAAO,OAAU,GAAA,KAAA,CAAA;AAAA,MAC1B,IAAM,EAAA,IAAA;AAAA,MACN,MAAA;AAAA,MACA,GAAK,EAAA,aAAA;AAAA,KAAA;AAAA,IAEJ,QAAA;AAAA,GAGP,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/components/atoms/Switch/Switch.js

@@ -16,6 +16,7 @@ const Switch = ({
   ...rest
 }) => {
   const theme = reactCore.useTheme();
+  const transitionRef = React.useRef(null);
   const handleChange = React.useCallback(() => {
     if (!disabled)
       onChange(!active);
@@ -57,7 +58,7 @@ const Switch = ({
     exiting: { transform: "translateX(150%)" },
     exited: { transform: "translateX(0%)" }
   };
-  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: active, timeout: 100 }, (state) => /* @__PURE__ */ React.createElement("div", { onClick: handleChange }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: active, timeout: 100, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement("div", { onClick: handleChange, ref: transitionRef }, /* @__PURE__ */ React.createElement(
     styled.StyledSwitchContent,
     {
       ...rest,

package/dist/cjs/components/atoms/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../../src/components/atoms/Switch/Switch.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport {\n  lightenDarkenColor,\n  SwitchProps,\n  useTheme,\n} from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport { StyledSwitchContent, StyledSwitch } from './styled';\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  disabled = false,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const handleChange = useCallback(() => {\n    if (!disabled) onChange(!active);\n  }, [active, onChange]);\n\n  const defaultStyleBackground = {\n    transition: `all 300ms ease`,\n  };\n\n  const getBackgroundColor = (color: string) => {\n    return disabled\n      ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)\n      : color;\n  };\n  const transitionStylesBackground = {\n    entering: {\n      backgroundColor: getBackgroundColor(\n        theme.color[inactiveColor][inactiveColorTone]\n      ),\n    },\n    entered: {\n      backgroundColor: getBackgroundColor(\n        theme.color[activeColor][activeColorTone]\n      ),\n    },\n    exiting: {\n      backgroundColor: getBackgroundColor(\n        theme.color[activeColor][activeColorTone]\n      ),\n    },\n    exited: {\n      backgroundColor: getBackgroundColor(\n        theme.color[inactiveColor][inactiveColorTone]\n      ),\n    },\n  };\n\n  const defaultStyleCircle = {\n    transition: `transform ${100}ms ease`,\n  };\n\n  const transitionStylesCircle = {\n    entering: { transform: 'translateX(0%)' },\n    entered: { transform: 'translateX(150%)' },\n    exiting: { transform: 'translateX(150%)' },\n    exited: { transform: 'translateX(0%)' },\n  };\n\n  return (\n    <Transition in={active} timeout={100}>\n      {state => (\n        <div onClick={handleChange}>\n          <StyledSwitchContent\n            {...rest}\n            style={{\n              ...defaultStyleBackground,\n              ...transitionStylesBackground[state],\n            }}\n          >\n            <StyledSwitch\n              style={{\n                ...defaultStyleCircle,\n                ...transitionStylesCircle[state],\n              }}\n            />\n          </StyledSwitchContent>\n        </div>\n      )}\n    </Transition>\n  );\n};\n\nexport default Switch;\n"],"names":["useTheme","useCallback","lightenDarkenColor","Transition","StyledSwitchContent","StyledSwitch"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../../../src/components/atoms/Switch/Switch.tsx"],"sourcesContent":["import React, { FC, useCallback, useRef } from 'react';\nimport {\n  lightenDarkenColor,\n  SwitchProps,\n  useTheme,\n} from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport { StyledSwitchContent, StyledSwitch } from './styled';\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  disabled = false,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const transitionRef = useRef(null);\n  const handleChange = useCallback(() => {\n    if (!disabled) onChange(!active);\n  }, [active, onChange]);\n\n  const defaultStyleBackground = {\n    transition: `all 300ms ease`,\n  };\n\n  const getBackgroundColor = (color: string) => {\n    return disabled\n      ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)\n      : color;\n  };\n  const transitionStylesBackground = {\n    entering: {\n      backgroundColor: getBackgroundColor(\n        theme.color[inactiveColor][inactiveColorTone]\n      ),\n    },\n    entered: {\n      backgroundColor: getBackgroundColor(\n        theme.color[activeColor][activeColorTone]\n      ),\n    },\n    exiting: {\n      backgroundColor: getBackgroundColor(\n        theme.color[activeColor][activeColorTone]\n      ),\n    },\n    exited: {\n      backgroundColor: getBackgroundColor(\n        theme.color[inactiveColor][inactiveColorTone]\n      ),\n    },\n  };\n\n  const defaultStyleCircle = {\n    transition: `transform ${100}ms ease`,\n  };\n\n  const transitionStylesCircle = {\n    entering: { transform: 'translateX(0%)' },\n    entered: { transform: 'translateX(150%)' },\n    exiting: { transform: 'translateX(150%)' },\n    exited: { transform: 'translateX(0%)' },\n  };\n\n  return (\n    <Transition in={active} timeout={100} nodeRef={transitionRef}>\n      {state => (\n        <div onClick={handleChange} ref={transitionRef}>\n          <StyledSwitchContent\n            {...rest}\n            style={{\n              ...defaultStyleBackground,\n              ...transitionStylesBackground[state],\n            }}\n          >\n            <StyledSwitch\n              style={{\n                ...defaultStyleCircle,\n                ...transitionStylesCircle[state],\n              }}\n            />\n          </StyledSwitchContent>\n        </div>\n      )}\n    </Transition>\n  );\n};\n\nexport default Switch;\n"],"names":["useTheme","useRef","useCallback","lightenDarkenColor","Transition","StyledSwitchContent","StyledSwitch"],"mappings":"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"}

package/dist/cjs/components/atoms/Tooltip/Tooltip.d.ts

@@ -4,10 +4,12 @@ export type ComputedType = {
     height?: number;
 };
 export type Position = 'top' | 'bottom' | 'right' | 'left';
+export type MaxWidth = number;
 export interface ITooltip {
     title: string;
     position?: Position;
     children?: React.ReactNode;
+    maxWidht?: MaxWidth;
 }
 declare const Tooltip: React.FC<ITooltip>;
 export default Tooltip;

package/dist/cjs/components/atoms/Tooltip/Tooltip.js

@@ -7,6 +7,7 @@ var styled = require('./styled.js');
 const Tooltip = ({
   children,
   title,
+  maxWidht,
   position = "bottom"
 }) => {
   const spanRef = React.useRef();
@@ -22,6 +23,7 @@ const Tooltip = ({
   return /* @__PURE__ */ React.createElement(styled.Container, { position }, children, /* @__PURE__ */ React.createElement(
     styled.TooltipSpan,
     {
+      maxWidth: maxWidht,
       computed,
       position,
       ref: (ref) => spanRef.current = ref

package/dist/cjs/components/atoms/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../src/components/atoms/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { Container, TooltipSpan } from './styled';\n\nexport type ComputedType = { width?: number; height?: number };\nexport type Position = 'top' | 'bottom' | 'right' | 'left';\n\nexport interface ITooltip {\n  title: string;\n  position?: Position;\n  children?: React.ReactNode;\n}\n\nconst Tooltip: React.FC<ITooltip> = ({\n  children,\n  title,\n  position = 'bottom',\n}) => {\n  const spanRef = React.useRef<HTMLSpanElement | null>();\n  const [computed, setComputed] = React.useState<ComputedType | undefined>(\n    undefined\n  );\n\n  React.useLayoutEffect(() => {\n    setComputed({\n      width: spanRef.current?.clientWidth,\n      height: spanRef.current?.clientHeight,\n    });\n  }, []);\n\n  return (\n    <Container position={position}>\n      {children}\n      <TooltipSpan\n        computed={computed}\n        position={position}\n        ref={ref => (spanRef.current = ref)}\n      >\n        <Text\n          fontWeight=\"bold\"\n          typography=\"base\"\n          colorVariant=\"secondary\"\n          colorTone=\"xlight\"\n        >\n          {title}\n        </Text>\n      </TooltipSpan>\n    </Container>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Container","TooltipSpan","Text"],"mappings":";;;;;;AAaA,MAAM,UAA8B,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAW,GAAA,QAAA;AACb,CAAM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,MAAM,MAA+B,EAAA,CAAA;AACrD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IACpC,KAAA,CAAA;AAAA,GACF,CAAA;AAEA,EAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,IAAY,WAAA,CAAA;AAAA,MACV,KAAA,EAAO,QAAQ,OAAS,EAAA,WAAA;AAAA,MACxB,MAAA,EAAQ,QAAQ,OAAS,EAAA,YAAA;AAAA,KAC1B,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAA,KAAA,CAAA,aAAA,CAACA,gBAAU,EAAA,EAAA,QAAA,EAAA,EACR,QACD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,kBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA,EAAK,CAAQ,GAAA,KAAA,OAAA,CAAQ,OAAU,GAAA,GAAA;AAAA,KAAA;AAAA,oBAE/B,KAAA,CAAA,aAAA;AAAA,MAACC,cAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,MAAA;AAAA,QACX,UAAW,EAAA,MAAA;AAAA,QACX,YAAa,EAAA,WAAA;AAAA,QACb,SAAU,EAAA,QAAA;AAAA,OAAA;AAAA,MAET,KAAA;AAAA,KACH;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../src/components/atoms/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { Container, TooltipSpan } from './styled';\n\nexport type ComputedType = { width?: number; height?: number };\nexport type Position = 'top' | 'bottom' | 'right' | 'left';\nexport type MaxWidth = number;\n\nexport interface ITooltip {\n  title: string;\n  position?: Position;\n  children?: React.ReactNode;\n  maxWidht?: MaxWidth;\n}\n\nconst Tooltip: React.FC<ITooltip> = ({\n  children,\n  title,\n  maxWidht,\n  position = 'bottom',\n}) => {\n  const spanRef = React.useRef<HTMLSpanElement | null>();\n  const [computed, setComputed] = React.useState<ComputedType | undefined>(\n    undefined\n  );\n\n  React.useLayoutEffect(() => {\n    setComputed({\n      width: spanRef.current?.clientWidth,\n      height: spanRef.current?.clientHeight,\n    });\n  }, []);\n\n  return (\n    <Container position={position}>\n      {children}\n      <TooltipSpan\n        maxWidth={maxWidht}\n        computed={computed}\n        position={position}\n        ref={ref => (spanRef.current = ref)}\n      >\n        <Text\n          fontWeight=\"bold\"\n          typography=\"base\"\n          colorVariant=\"secondary\"\n          colorTone=\"xlight\"\n        >\n          {title}\n        </Text>\n      </TooltipSpan>\n    </Container>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Container","TooltipSpan","Text"],"mappings":";;;;;;AAeA,MAAM,UAA8B,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,QAAA;AACb,CAAM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,MAAM,MAA+B,EAAA,CAAA;AACrD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IACpC,KAAA,CAAA;AAAA,GACF,CAAA;AAEA,EAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,IAAY,WAAA,CAAA;AAAA,MACV,KAAA,EAAO,QAAQ,OAAS,EAAA,WAAA;AAAA,MACxB,MAAA,EAAQ,QAAQ,OAAS,EAAA,YAAA;AAAA,KAC1B,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAA,KAAA,CAAA,aAAA,CAACA,gBAAU,EAAA,EAAA,QAAA,EAAA,EACR,QACD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,kBAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,QAAA;AAAA,MACV,QAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA,EAAK,CAAQ,GAAA,KAAA,OAAA,CAAQ,OAAU,GAAA,GAAA;AAAA,KAAA;AAAA,oBAE/B,KAAA,CAAA,aAAA;AAAA,MAACC,cAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,MAAA;AAAA,QACX,UAAW,EAAA,MAAA;AAAA,QACX,YAAa,EAAA,WAAA;AAAA,QACb,SAAU,EAAA,QAAA;AAAA,OAAA;AAAA,MAET,KAAA;AAAA,KACH;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/components/atoms/Tooltip/styled.js

@@ -60,11 +60,13 @@ const rightArrow = (theme, position) => position === "right" && react.css`
       transparent;
   `;
 const TooltipSpan = styled("span")(
-  ({ theme, computed, position }) => {
+  ({ theme, computed, position, maxWidth }) => {
     const { width = 0, height = 0 } = computed || {};
     return react.css`
+      max-width: ${maxWidth ? `${maxWidth}px` : "auto"};
       position: absolute;
       width: max-content;
+      line-break: anywhere;
       padding: ${theme.spacing.micro} ${theme.spacing.centi};
       border-radius: ${theme.borderRadius.mili};
       opacity: 0;
@@ -100,6 +102,7 @@ const TooltipSpan = styled("span")(
 );
 const Container = styled("div")`
   position: relative;
+  width: auto;
   &:hover {
     & > span {
       opacity: 1;

package/dist/cjs/components/atoms/Tooltip/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tooltip/styled.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { StyleProps, ThemeProp } from '@tecsinapse/react-core';\nimport styled from '@emotion/styled';\nimport { ComputedType, Position } from './Tooltip';\n\ntype InjectedProps = { computed?: ComputedType; position?: Position };\n\n/** Bottom/Top commons */\nconst bottomOrTopStylesCommon = (width: number, position) =>\n  ['top', 'bottom'].includes(position as Position) &&\n  css`\n    left: 50%;\n    margin-left: -${width / 2}px;\n  `;\n\nconst bottomOrTopArrowCommon = (position?: Position) =>\n  ['top', 'bottom'].includes(position as Position) &&\n  css`\n    left: 50%;\n    margin-left: -5px;\n  `;\n\n/** Top */\nconst topStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'top' &&\n  css`\n    bottom: 100%;\n    margin-bottom: ${theme.spacing.centi};\n    transform: translateY(10%);\n  `;\n\nconst topArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'top' &&\n  css`\n    top: 100%;\n    border-color: ${theme.color.secondary.xdark} transparent transparent\n      transparent;\n  `;\n\n/** Bottom */\nconst bottomStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'bottom' &&\n  css`\n    top: 100%;\n    margin-top: ${theme.spacing.centi};\n    transform: translateY(-10%);\n  `;\n\nconst bottomArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'bottom' &&\n  css`\n    bottom: 100%;\n    border-color: transparent transparent ${theme.color.secondary.xdark}\n      transparent;\n  `;\n\n/** Bottom/Top commons */\nconst leftAndRightCommonStyles = (height: number, position?: Position) =>\n  ['right', 'left'].includes(position as Position) &&\n  css`\n    top: 50%;\n    margin-top: -${height / 2}px;\n  `;\n\nconst leftOrRightArrowCommon = (position?: Position) =>\n  ['right', 'left'].includes(position as Position) &&\n  css`\n    top: 50%;\n    margin-top: -5px;\n  `;\n\n/** Left */\nconst leftStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'left' &&\n  css`\n    right: 100%;\n    margin-right: ${theme.spacing.centi};\n    transform: translateX(10%);\n  `;\n\nconst leftArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'left' &&\n  css`\n    left: 100%;\n    border-color: transparent transparent transparent\n      ${theme.color.secondary.xdark};\n  `;\n\n/** Right */\nconst rightStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'right' &&\n  css`\n    left: 100%;\n    margin-left: ${theme.spacing.centi};\n    transform: translateX(-10%);\n  `;\n\nconst rightArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'right' &&\n  css`\n    right: 100%;\n    border-color: transparent ${theme.color.secondary.xdark} transparent\n      transparent;\n  `;\n\nexport const TooltipSpan = styled('span')<Partial<StyleProps> & InjectedProps>(\n  ({ theme, computed, position }) => {\n    const { width = 0, height = 0 } = computed || {};\n    return css`\n      position: absolute;\n      width: max-content;\n      padding: ${theme.spacing.micro} ${theme.spacing.centi};\n      border-radius: ${theme.borderRadius.mili};\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.3s, visibility 0.3s, transform 0.3s;\n      background-color: ${theme.color.secondary.xdark};\n      z-index: ${theme.zIndex.absolute};\n\n      ${bottomOrTopStylesCommon(width, position)}\n      ${bottomStyles(theme, position)}\n      ${topStyles(theme, position)}\n      \n      ${leftAndRightCommonStyles(height, position)}\n      ${leftStyles(theme, position)}\n      ${rightStyles(theme, position)}\n\n      &::after {\n        content: '';\n        position: absolute;\n        border-style: solid;\n        border-width: 5px;\n\n        ${bottomOrTopArrowCommon(position)}\n        ${bottomArrow(theme, position)}\n        ${topArrow(theme, position)}\n        \n        ${leftOrRightArrowCommon(position)}\n        ${leftArrow(theme, position)}\n        ${rightArrow(theme, position)}\n      }\n    `;\n  }\n);\n\nexport const Container = styled('div')<{ position?: Position }>`\n  position: relative;\n  &:hover {\n    & > span {\n      opacity: 1;\n      visibility: visible;\n      display: flex;\n      transform: ${({ position }) =>\n        position === 'left' || position === 'right'\n          ? 'translateX(0%)'\n          : 'translateY(0%)'};\n    }\n  }\n`;\n"],"names":["css"],"mappings":";;;;;AAQA,MAAM,uBAAA,GAA0B,CAAC,KAAA,EAAe,QAC9C,KAAA,CAAC,OAAO,QAAQ,CAAA,CAAE,QAAS,CAAA,QAAoB,CAC/C,IAAAA,SAAA,CAAA;AAAA;AAAA,kBAAA,EAEkB,QAAQ,CAAC,CAAA;AAAA,EAAA,CAAA,CAAA;AAG7B,MAAM,sBAAA,GAAyB,CAAC,QAC9B,KAAA,CAAC,OAAO,QAAQ,CAAA,CAAE,QAAS,CAAA,QAAoB,CAC/C,IAAAA,SAAA,CAAA;AAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAMF,MAAM,SAAY,GAAA,CAAC,KAAkB,EAAA,QAAA,KACnC,aAAa,KACb,IAAAA,SAAA,CAAA;AAAA;AAAA,mBAEmB,EAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAIxC,MAAM,QAAW,GAAA,CAAC,KAAkB,EAAA,QAAA,KAClC,aAAa,KACb,IAAAA,SAAA,CAAA;AAAA;AAAA,kBAEkB,EAAA,KAAA,CAAM,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAK/C,MAAM,YAAe,GAAA,CAAC,KAAkB,EAAA,QAAA,KACtC,aAAa,QACb,IAAAA,SAAA,CAAA;AAAA;AAAA,gBAEgB,EAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAIrC,MAAM,WAAc,GAAA,CAAC,KAAkB,EAAA,QAAA,KACrC,aAAa,QACb,IAAAA,SAAA,CAAA;AAAA;AAAA,0CAE0C,EAAA,KAAA,CAAM,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAKvE,MAAM,wBAAA,GAA2B,CAAC,MAAA,EAAgB,QAChD,KAAA,CAAC,SAAS,MAAM,CAAA,CAAE,QAAS,CAAA,QAAoB,CAC/C,IAAAA,SAAA,CAAA;AAAA;AAAA,iBAAA,EAEiB,SAAS,CAAC,CAAA;AAAA,EAAA,CAAA,CAAA;AAG7B,MAAM,sBAAA,GAAyB,CAAC,QAC9B,KAAA,CAAC,SAAS,MAAM,CAAA,CAAE,QAAS,CAAA,QAAoB,CAC/C,IAAAA,SAAA,CAAA;AAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAMF,MAAM,UAAa,GAAA,CAAC,KAAkB,EAAA,QAAA,KACpC,aAAa,MACb,IAAAA,SAAA,CAAA;AAAA;AAAA,kBAEkB,EAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAIvC,MAAM,SAAY,GAAA,CAAC,KAAkB,EAAA,QAAA,KACnC,aAAa,MACb,IAAAA,SAAA,CAAA;AAAA;AAAA;AAAA,MAGM,EAAA,KAAA,CAAM,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA;AAAA,EAAA,CAAA,CAAA;AAInC,MAAM,WAAc,GAAA,CAAC,KAAkB,EAAA,QAAA,KACrC,aAAa,OACb,IAAAA,SAAA,CAAA;AAAA;AAAA,iBAEiB,EAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAItC,MAAM,UAAa,GAAA,CAAC,KAAkB,EAAA,QAAA,KACpC,aAAa,OACb,IAAAA,SAAA,CAAA;AAAA;AAAA,8BAE8B,EAAA,KAAA,CAAM,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAI9C,MAAA,WAAA,GAAc,OAAO,MAAM,CAAA;AAAA,EACtC,CAAC,EAAE,KAAO,EAAA,QAAA,EAAU,UAAe,KAAA;AACjC,IAAA,MAAM,EAAE,KAAQ,GAAA,CAAA,EAAG,SAAS,CAAE,EAAA,GAAI,YAAY,EAAC,CAAA;AAC/C,IAAO,OAAAA,SAAA,CAAA;AAAA;AAAA;AAAA,eAAA,EAGM,MAAM,OAAQ,CAAA,KAAK,CAAI,CAAA,EAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA,qBACpC,EAAA,KAAA,CAAM,aAAa,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA,wBAIpB,EAAA,KAAA,CAAM,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA;AAAA,eACpC,EAAA,KAAA,CAAM,OAAO,QAAQ,CAAA;AAAA;AAAA,MAE9B,EAAA,uBAAA,CAAwB,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA,MACxC,EAAA,YAAA,CAAa,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA,MAC7B,EAAA,SAAA,CAAU,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA;AAAA,MAE1B,EAAA,wBAAA,CAAyB,MAAQ,EAAA,QAAQ,CAAC,CAAA;AAAA,MAC1C,EAAA,UAAA,CAAW,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA,MAC3B,EAAA,WAAA,CAAY,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ1B,EAAA,sBAAA,CAAuB,QAAQ,CAAC,CAAA;AAAA,QAChC,EAAA,WAAA,CAAY,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA,QAC5B,EAAA,QAAA,CAAS,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA;AAAA,QAEzB,EAAA,sBAAA,CAAuB,QAAQ,CAAC,CAAA;AAAA,QAChC,EAAA,SAAA,CAAU,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA,QAC1B,EAAA,UAAA,CAAW,KAAO,EAAA,QAAQ,CAAC,CAAA;AAAA;AAAA,IAAA,CAAA,CAAA;AAAA,GAGnC;AACF,EAAA;AAEa,MAAA,SAAA,GAAY,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOlB,EAAA,CAAC,EAAE,QAAS,EAAA,KACvB,aAAa,MAAU,IAAA,QAAA,KAAa,OAChC,GAAA,gBAAA,GACA,gBAAgB,CAAA;AAAA;AAAA;AAAA;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tooltip/styled.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { StyleProps, ThemeProp } from '@tecsinapse/react-core';\nimport styled from '@emotion/styled';\nimport { ComputedType, MaxWidth, Position } from './Tooltip';\n\ntype InjectedProps = {\n  computed?: ComputedType;\n  position?: Position;\n  maxWidth?: MaxWidth;\n};\n\n/** Bottom/Top commons */\nconst bottomOrTopStylesCommon = (width: number, position) =>\n  ['top', 'bottom'].includes(position as Position) &&\n  css`\n    left: 50%;\n    margin-left: -${width / 2}px;\n  `;\n\nconst bottomOrTopArrowCommon = (position?: Position) =>\n  ['top', 'bottom'].includes(position as Position) &&\n  css`\n    left: 50%;\n    margin-left: -5px;\n  `;\n\n/** Top */\nconst topStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'top' &&\n  css`\n    bottom: 100%;\n    margin-bottom: ${theme.spacing.centi};\n    transform: translateY(10%);\n  `;\n\nconst topArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'top' &&\n  css`\n    top: 100%;\n    border-color: ${theme.color.secondary.xdark} transparent transparent\n      transparent;\n  `;\n\n/** Bottom */\nconst bottomStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'bottom' &&\n  css`\n    top: 100%;\n    margin-top: ${theme.spacing.centi};\n    transform: translateY(-10%);\n  `;\n\nconst bottomArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'bottom' &&\n  css`\n    bottom: 100%;\n    border-color: transparent transparent ${theme.color.secondary.xdark}\n      transparent;\n  `;\n\n/** Bottom/Top commons */\nconst leftAndRightCommonStyles = (height: number, position?: Position) =>\n  ['right', 'left'].includes(position as Position) &&\n  css`\n    top: 50%;\n    margin-top: -${height / 2}px;\n  `;\n\nconst leftOrRightArrowCommon = (position?: Position) =>\n  ['right', 'left'].includes(position as Position) &&\n  css`\n    top: 50%;\n    margin-top: -5px;\n  `;\n\n/** Left */\nconst leftStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'left' &&\n  css`\n    right: 100%;\n    margin-right: ${theme.spacing.centi};\n    transform: translateX(10%);\n  `;\n\nconst leftArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'left' &&\n  css`\n    left: 100%;\n    border-color: transparent transparent transparent\n      ${theme.color.secondary.xdark};\n  `;\n\n/** Right */\nconst rightStyles = (theme: ThemeProp, position?: Position) =>\n  position === 'right' &&\n  css`\n    left: 100%;\n    margin-left: ${theme.spacing.centi};\n    transform: translateX(-10%);\n  `;\n\nconst rightArrow = (theme: ThemeProp, position?: Position) =>\n  position === 'right' &&\n  css`\n    right: 100%;\n    border-color: transparent ${theme.color.secondary.xdark} transparent\n      transparent;\n  `;\n\nexport const TooltipSpan = styled('span')<Partial<StyleProps> & InjectedProps>(\n  ({ theme, computed, position, maxWidth }) => {\n    const { width = 0, height = 0 } = computed || {};\n    return css`\n      max-width: ${maxWidth ? `${maxWidth}px` : 'auto'};\n      position: absolute;\n      width: max-content;\n      line-break: anywhere;\n      padding: ${theme.spacing.micro} ${theme.spacing.centi};\n      border-radius: ${theme.borderRadius.mili};\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.3s, visibility 0.3s, transform 0.3s;\n      background-color: ${theme.color.secondary.xdark};\n      z-index: ${theme.zIndex.absolute};\n\n      ${bottomOrTopStylesCommon(width, position)}\n      ${bottomStyles(theme, position)}\n      ${topStyles(theme, position)}\n      \n      ${leftAndRightCommonStyles(height, position)}\n      ${leftStyles(theme, position)}\n      ${rightStyles(theme, position)}\n\n      &::after {\n        content: '';\n        position: absolute;\n        border-style: solid;\n        border-width: 5px;\n\n        ${bottomOrTopArrowCommon(position)}\n        ${bottomArrow(theme, position)}\n        ${topArrow(theme, position)}\n        \n        ${leftOrRightArrowCommon(position)}\n        ${leftArrow(theme, position)}\n        ${rightArrow(theme, position)}\n      }\n    `;\n  }\n);\n\nexport const Container = styled('div')<{\n  position?: Position;\n}>`\n  position: relative;\n  width: auto;\n  &:hover {\n    & > span {\n      opacity: 1;\n      visibility: visible;\n      display: flex;\n      transform: ${({ position }) =>\n        position === 'left' || position === 'right'\n          ? 'translateX(0%)'\n          : 'translateY(0%)'};\n    }\n  }\n`;\n"],"names":["css"],"mappings":"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"}

package/dist/cjs/components/molecules/DatePicker/DatePicker.d.ts

@@ -2,5 +2,6 @@
 import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
 export type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'> & {
     callbackAfterValidated?: (valid: boolean, message?: string) => void;
+    invalidDateLabel?: string;
 };
-export declare const DatePicker: <T extends SelectionType>({ value, type, locale, onChange, callbackAfterValidated, ...rest }: WebDatePickerProps<T>) => JSX.Element;
+export declare const DatePicker: <T extends SelectionType>({ value, type, locale, onChange, callbackAfterValidated, placeholder, label, invalidDateLabel, ...rest }: WebDatePickerProps<T>) => JSX.Element;

package/dist/cjs/components/molecules/DatePicker/DatePicker.js

@@ -12,6 +12,9 @@ const DatePicker = ({
   locale,
   onChange,
   callbackAfterValidated,
+  placeholder,
+  label,
+  invalidDateLabel = "Invalid date",
   ...rest
 }) => {
   const [visible, setVisible] = React.useState(false);
@@ -41,6 +44,10 @@ const DatePicker = ({
     }
     return void 0;
   }, [value]);
+  const checksFullRange = React.useCallback(() => {
+    if (type === "range" && !value?.highest)
+      onChange?.(void 0);
+  }, [value]);
   const controlComponent = (onPress, displayValue) => {
     return /* @__PURE__ */ React.createElement(
       InputMask,
@@ -48,14 +55,14 @@ const DatePicker = ({
         onBlur: () => {
           if ((controlledInput ?? []).length < 8 && (controlledInput ?? []).length > 0) {
             setError(true);
-            callbackAfterValidated?.(false, "Data inv\xE1lida");
+            callbackAfterValidated?.(false, invalidDateLabel);
           }
           if (controlledInput?.length === 8) {
             const auxData = dateFns.parse(controlledInput, "ddMMyyyy", /* @__PURE__ */ new Date(), {
               locale
             });
             const isValidDate = dateFns.isValid(auxData);
-            callbackAfterValidated?.(isValidDate, "Data inv\xE1lida");
+            callbackAfterValidated?.(isValidDate, invalidDateLabel);
             if (isValidDate && auxData !== value) {
               setError(false);
               onChange?.(auxData);
@@ -63,12 +70,12 @@ const DatePicker = ({
           }
           if (controlledInput?.length === 0) {
             setError(true);
-            callbackAfterValidated?.(false, "Data inv\xE1lida");
+            callbackAfterValidated?.(false, invalidDateLabel);
           }
         },
         mask: reactCore.Masks.DATE,
-        value: displayValue,
-        hint: error ? "Data inv\xE1lida" : void 0,
+        value: displayValue ?? "",
+        hint: error ? invalidDateLabel : void 0,
         variant: error ? "error" : "default",
         onChange: (input) => {
           setControlledInput(input);
@@ -77,7 +84,8 @@ const DatePicker = ({
             setError(false);
           }
         },
-        placeholder: "N\xE3o informada",
+        placeholder,
+        label,
         rightComponent: /* @__PURE__ */ React.createElement(
           reactCore.Button,
           {
@@ -125,7 +133,20 @@ const DatePicker = ({
         month: getMonth,
         requestShowCalendar: show,
         requestCloseCalendar: close,
-        renderCalendar: (calendar) => /* @__PURE__ */ React.createElement(index.Dropdown, { visible, setVisible }, calendar)
+        placeholder,
+        label,
+        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
+          index.Dropdown,
+          {
+            visible,
+            setVisible,
+            onClickAway: () => {
+              handleBlur?.();
+              checksFullRange();
+            }
+          },
+          calendar
+        )
       }
     );
   }

package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  Button,\n  Calendar,\n  DatePicker as DatePickerCore,\n  DatePickerProps,\n  DateRange,\n  Masks,\n  SelectionType,\n  CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n  DatePickerProps<T>,\n  | 'CalendarComponent'\n  | 'renderCalendar'\n  | 'requestCloseCalendar'\n  | 'requestShowCalendar'\n> & {\n  callbackAfterValidated?: (valid: boolean, message?: string) => void;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n  value,\n  type,\n  locale,\n  onChange,\n  callbackAfterValidated,\n  ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n  const [visible, setVisible] = useState(false);\n  const [controlledInput, setControlledInput] = useState<string>();\n  const show = useCallback(() => setVisible(true), []);\n  const close = useCallback(() => setVisible(false), []);\n  const [error, setError] = useState<boolean>(false);\n\n  const getYear = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getFullYear();\n      } else {\n        return new Date(value as Date).getFullYear();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  const getMonth = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getMonth();\n      } else {\n        return new Date(value as Date).getMonth();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  const controlComponent = (onPress, displayValue) => {\n    return (\n      <InputMask\n        onBlur={() => {\n          if (\n            (controlledInput ?? []).length < 8 &&\n            (controlledInput ?? []).length > 0\n          ) {\n            setError(true);\n            callbackAfterValidated?.(false, 'Data inválida');\n          }\n          if (controlledInput?.length === 8) {\n            const auxData = parse(controlledInput, 'ddMMyyyy', new Date(), {\n              locale,\n            });\n            const isValidDate = isValid(auxData);\n            callbackAfterValidated?.(isValidDate, 'Data inválida');\n\n            if (isValidDate && auxData !== value) {\n              setError(false);\n              onChange?.(auxData as typeof value);\n            }\n          }\n          if (controlledInput?.length === 0) {\n            setError(true);\n            callbackAfterValidated?.(false, 'Data inválida');\n          }\n        }}\n        mask={Masks.DATE}\n        value={displayValue}\n        hint={error ? 'Data inválida' : undefined}\n        variant={error ? 'error' : 'default'}\n        onChange={input => {\n          setControlledInput(input);\n          if ((error && input.length < 8) || isValid(value)) {\n            callbackAfterValidated?.(true);\n            setError(false);\n          }\n        }}\n        placeholder={'Não informada'}\n        rightComponent={\n          <Button\n            effect={'none'}\n            variant={'text'}\n            style={{ padding: 0 }}\n            onPress={onPress}\n          >\n            <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n          </Button>\n        }\n      />\n    );\n  };\n\n  if (type === 'day') {\n    return (\n      <DatePickerCore\n        {...rest}\n        CalendarComponent={Calendar}\n        onChange={onChange}\n        locale={locale}\n        value={value}\n        type={type}\n        year={getYear}\n        format={'dd/MM/yyyy'}\n        month={getMonth}\n        requestShowCalendar={show}\n        requestCloseCalendar={close}\n        renderCalendar={calendar => (\n          <Dropdown visible={visible} setVisible={setVisible}>\n            {calendar}\n          </Dropdown>\n        )}\n        controlComponent={controlComponent}\n      />\n    );\n  } else {\n    return (\n      <DatePickerCore\n        {...rest}\n        CalendarComponent={Calendar}\n        onChange={onChange}\n        locale={locale}\n        value={value}\n        type={type}\n        year={getYear}\n        format={'dd/MM/yyyy'}\n        month={getMonth}\n        requestShowCalendar={show}\n        requestCloseCalendar={close}\n        renderCalendar={calendar => (\n          <Dropdown visible={visible} setVisible={setVisible}>\n            {calendar}\n          </Dropdown>\n        )}\n      />\n    );\n  }\n};\n"],"names":["useState","useCallback","useMemo","parse","isValid","Masks","Button","CalendarIcon","DatePickerCore","Calendar","Dropdown"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  Button,\n  Calendar,\n  DatePicker as DatePickerCore,\n  DatePickerProps,\n  DateRange,\n  Masks,\n  SelectionType,\n  CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n  DatePickerProps<T>,\n  | 'CalendarComponent'\n  | 'renderCalendar'\n  | 'requestCloseCalendar'\n  | 'requestShowCalendar'\n> & {\n  callbackAfterValidated?: (valid: boolean, message?: string) => void;\n  invalidDateLabel?: string;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n  value,\n  type,\n  locale,\n  onChange,\n  callbackAfterValidated,\n  placeholder,\n  label,\n  invalidDateLabel = 'Invalid date',\n  ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n  const [visible, setVisible] = useState(false);\n  const [controlledInput, setControlledInput] = useState<string>();\n  const show = useCallback(() => setVisible(true), []);\n  const close = useCallback(() => setVisible(false), []);\n  const [error, setError] = useState<boolean>(false);\n\n  const getYear = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getFullYear();\n      } else {\n        return new Date(value as Date).getFullYear();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  const getMonth = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getMonth();\n      } else {\n        return new Date(value as Date).getMonth();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  const checksFullRange = useCallback(() => {\n    if (type === 'range' && !(value as DateRange)?.highest)\n      onChange?.(undefined);\n  }, [value]);\n\n  const controlComponent = (onPress, displayValue) => {\n    return (\n      <InputMask\n        onBlur={() => {\n          if (\n            (controlledInput ?? []).length < 8 &&\n            (controlledInput ?? []).length > 0\n          ) {\n            setError(true);\n            callbackAfterValidated?.(false, invalidDateLabel);\n          }\n          if (controlledInput?.length === 8) {\n            const auxData = parse(controlledInput, 'ddMMyyyy', new Date(), {\n              locale,\n            });\n            const isValidDate = isValid(auxData);\n            callbackAfterValidated?.(isValidDate, invalidDateLabel);\n\n            if (isValidDate && auxData !== value) {\n              setError(false);\n              onChange?.(auxData as typeof value);\n            }\n          }\n          if (controlledInput?.length === 0) {\n            setError(true);\n            callbackAfterValidated?.(false, invalidDateLabel);\n          }\n        }}\n        mask={Masks.DATE}\n        value={displayValue ?? ''}\n        hint={error ? invalidDateLabel : undefined}\n        variant={error ? 'error' : 'default'}\n        onChange={input => {\n          setControlledInput(input);\n          if ((error && input.length < 8) || isValid(value)) {\n            callbackAfterValidated?.(true);\n            setError(false);\n          }\n        }}\n        placeholder={placeholder}\n        label={label}\n        rightComponent={\n          <Button\n            effect={'none'}\n            variant={'text'}\n            style={{ padding: 0 }}\n            onPress={onPress}\n          >\n            <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n          </Button>\n        }\n      />\n    );\n  };\n\n  if (type === 'day') {\n    return (\n      <DatePickerCore\n        {...rest}\n        CalendarComponent={Calendar}\n        onChange={onChange}\n        locale={locale}\n        value={value}\n        type={type}\n        year={getYear}\n        format={'dd/MM/yyyy'}\n        month={getMonth}\n        requestShowCalendar={show}\n        requestCloseCalendar={close}\n        renderCalendar={calendar => (\n          <Dropdown visible={visible} setVisible={setVisible}>\n            {calendar}\n          </Dropdown>\n        )}\n        controlComponent={controlComponent}\n      />\n    );\n  } else {\n    return (\n      <DatePickerCore\n        {...rest}\n        CalendarComponent={Calendar}\n        onChange={onChange}\n        locale={locale}\n        value={value}\n        type={type}\n        year={getYear}\n        format={'dd/MM/yyyy'}\n        month={getMonth}\n        requestShowCalendar={show}\n        requestCloseCalendar={close}\n        placeholder={placeholder}\n        label={label}\n        renderCalendar={(calendar, handleBlur) => (\n          <Dropdown\n            visible={visible}\n            setVisible={setVisible}\n            onClickAway={() => {\n              handleBlur?.();\n              checksFullRange();\n            }}\n          >\n            {calendar}\n          </Dropdown>\n        )}\n      />\n    );\n  }\n};\n"],"names":["useState","useCallback","useMemo","parse","isValid","Masks","Button","CalendarIcon","DatePickerCore","Calendar","Dropdown"],"mappings":"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"}

package/dist/cjs/components/molecules/Drawer/Drawer.js

@@ -14,6 +14,7 @@ const Drawer = ({
   style,
   ...rest
 }) => {
+  const transitionRef = React.useRef(null);
   const getStyles = (anchorPosition2, state) => {
     const stylesLeftRight = animations.defaultStylesLeftRight(anchorPosition2);
     const transitionLeftRight = animations.transitionStylesLeftRight(anchorPosition2);
@@ -31,9 +32,10 @@ const Drawer = ({
       };
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 300 }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 300, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
     styled.StyledContainerDrawer,
     {
+      ref: transitionRef,
       style: { ...style, ...getStyles(anchorPosition, state) },
       anchorPosition,
       onClose,

package/dist/cjs/components/molecules/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/molecules/Drawer/Drawer.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyledContainerDrawer } from './styled';\nimport { Transition, TransitionStatus } from 'react-transition-group';\nimport { Overlay } from '../../atoms/Overlay';\nimport {\n  transitionStylesTopBottom,\n  defaultStylesTopBottom,\n  defaultStylesLeftRight,\n  transitionStylesLeftRight,\n} from './animations';\n\ntype AnchorPosition = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n  anchorPosition: AnchorPosition;\n}\n\nconst Drawer: FC<DrawerProps> = ({\n  open,\n  anchorPosition = 'right',\n  onClose,\n  children,\n  style,\n  ...rest\n}) => {\n  const getStyles = (\n    anchorPosition: AnchorPosition,\n    state: TransitionStatus\n  ) => {\n    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);\n    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);\n    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);\n    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);\n\n    if (['left', 'right'].includes(anchorPosition)) {\n      return {\n        ...stylesLeftRight,\n        ...transitionLeftRight[state],\n      };\n    } else {\n      return {\n        ...stylesTopBottom,\n        ...transitionTopBottom[state],\n      };\n    }\n  };\n\n  return (\n    <>\n      <Overlay timeout={300} open={open} onClose={onClose} zIndex=\"drawer\" />\n      <Transition in={open} timeout={300}>\n        {state => (\n          <StyledContainerDrawer\n            style={{ ...style, ...getStyles(anchorPosition, state) }}\n            anchorPosition={anchorPosition}\n            onClose={onClose}\n            open={open}\n            {...rest}\n          >\n            {children}\n          </StyledContainerDrawer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Drawer;\n"],"names":["anchorPosition","defaultStylesLeftRight","transitionStylesLeftRight","defaultStylesTopBottom","transitionStylesTopBottom","Transition","StyledContainerDrawer"],"mappings":";;;;;;;;AAmBA,MAAM,SAA0B,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,cAAiB,GAAA,OAAA;AAAA,EACjB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAM,KAAA;AACJ,EAAM,MAAA,SAAA,GAAY,CAChBA,eAAAA,EACA,KACG,KAAA;AACH,IAAM,MAAA,eAAA,GAAkBC,kCAAuBD,eAAc,CAAA,CAAA;AAC7D,IAAM,MAAA,mBAAA,GAAsBE,qCAA0BF,eAAc,CAAA,CAAA;AACpE,IAAM,MAAA,eAAA,GAAkBG,kCAAuBH,eAAc,CAAA,CAAA;AAC7D,IAAM,MAAA,mBAAA,GAAsBI,qCAA0BJ,eAAc,CAAA,CAAA;AAEpE,IAAA,IAAI,CAAC,MAAQ,EAAA,OAAO,CAAE,CAAA,QAAA,CAASA,eAAc,CAAG,EAAA;AAC9C,MAAO,OAAA;AAAA,QACL,GAAG,eAAA;AAAA,QACH,GAAG,oBAAoB,KAAK,CAAA;AAAA,OAC9B,CAAA;AAAA,KACK,MAAA;AACL,MAAO,OAAA;AAAA,QACL,GAAG,eAAA;AAAA,QACH,GAAG,oBAAoB,KAAK,CAAA;AAAA,OAC9B,CAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,OAAS,EAAA,GAAA,EAAK,MAAY,OAAkB,EAAA,MAAA,EAAO,QAAS,EAAA,CAAA,sCACpEK,+BAAW,EAAA,EAAA,EAAA,EAAI,IAAM,EAAA,OAAA,EAAS,OAC5B,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,GAAG,SAAU,CAAA,cAAA,EAAgB,KAAK,CAAE,EAAA;AAAA,MACvD,cAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,KAAA;AAAA,IAEH,QAAA;AAAA,GAGP,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/molecules/Drawer/Drawer.tsx"],"sourcesContent":["import React, { FC, useRef } from 'react';\nimport { StyledContainerDrawer } from './styled';\nimport { Transition, TransitionStatus } from 'react-transition-group';\nimport { Overlay } from '../../atoms/Overlay';\nimport {\n  transitionStylesTopBottom,\n  defaultStylesTopBottom,\n  defaultStylesLeftRight,\n  transitionStylesLeftRight,\n} from './animations';\n\ntype AnchorPosition = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n  anchorPosition: AnchorPosition;\n}\n\nconst Drawer: FC<DrawerProps> = ({\n  open,\n  anchorPosition = 'right',\n  onClose,\n  children,\n  style,\n  ...rest\n}) => {\n  const transitionRef = useRef(null);\n  const getStyles = (\n    anchorPosition: AnchorPosition,\n    state: TransitionStatus\n  ) => {\n    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);\n    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);\n    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);\n    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);\n\n    if (['left', 'right'].includes(anchorPosition)) {\n      return {\n        ...stylesLeftRight,\n        ...transitionLeftRight[state],\n      };\n    } else {\n      return {\n        ...stylesTopBottom,\n        ...transitionTopBottom[state],\n      };\n    }\n  };\n\n  return (\n    <>\n      <Overlay timeout={300} open={open} onClose={onClose} zIndex=\"drawer\" />\n      <Transition in={open} timeout={300} nodeRef={transitionRef}>\n        {state => (\n          <StyledContainerDrawer\n            ref={transitionRef}\n            style={{ ...style, ...getStyles(anchorPosition, state) }}\n            anchorPosition={anchorPosition}\n            onClose={onClose}\n            open={open}\n            {...rest}\n          >\n            {children}\n          </StyledContainerDrawer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Drawer;\n"],"names":["useRef","anchorPosition","defaultStylesLeftRight","transitionStylesLeftRight","defaultStylesTopBottom","transitionStylesTopBottom","Transition","StyledContainerDrawer"],"mappings":";;;;;;;;AAmBA,MAAM,SAA0B,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,cAAiB,GAAA,OAAA;AAAA,EACjB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAM,KAAA;AACJ,EAAM,MAAA,aAAA,GAAgBA,aAAO,IAAI,CAAA,CAAA;AACjC,EAAM,MAAA,SAAA,GAAY,CAChBC,eAAAA,EACA,KACG,KAAA;AACH,IAAM,MAAA,eAAA,GAAkBC,kCAAuBD,eAAc,CAAA,CAAA;AAC7D,IAAM,MAAA,mBAAA,GAAsBE,qCAA0BF,eAAc,CAAA,CAAA;AACpE,IAAM,MAAA,eAAA,GAAkBG,kCAAuBH,eAAc,CAAA,CAAA;AAC7D,IAAM,MAAA,mBAAA,GAAsBI,qCAA0BJ,eAAc,CAAA,CAAA;AAEpE,IAAA,IAAI,CAAC,MAAQ,EAAA,OAAO,CAAE,CAAA,QAAA,CAASA,eAAc,CAAG,EAAA;AAC9C,MAAO,OAAA;AAAA,QACL,GAAG,eAAA;AAAA,QACH,GAAG,oBAAoB,KAAK,CAAA;AAAA,OAC9B,CAAA;AAAA,KACK,MAAA;AACL,MAAO,OAAA;AAAA,QACL,GAAG,eAAA;AAAA,QACH,GAAG,oBAAoB,KAAK,CAAA;AAAA,OAC9B,CAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAS,GAAK,EAAA,IAAA,EAAY,SAAkB,MAAO,EAAA,QAAA,EAAS,CACrE,kBAAA,KAAA,CAAA,aAAA,CAACK,mCAAW,EAAI,EAAA,IAAA,EAAM,SAAS,GAAK,EAAA,OAAA,EAAS,iBAC1C,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,aAAA;AAAA,MACL,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,GAAG,SAAU,CAAA,cAAA,EAAgB,KAAK,CAAE,EAAA;AAAA,MACvD,cAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,KAAA;AAAA,IAEH,QAAA;AAAA,GAGP,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/components/molecules/Menubar/Menubar.js

@@ -27,6 +27,8 @@ const Menubar = ({
   const [input, setInput] = reactCore.useDebouncedState("", setSearch);
   const [open, setOpen] = React.useState(false);
   const menuRef = React.useRef(null);
+  const transitionInputRef = React.useRef(null);
+  const transitionMenuRef = React.useRef(null);
   useClickAwayListener.useClickAwayListener(menuRef, setOpen, "mouseup");
   const toggleOpen = React.useCallback(
     () => setOpen((state) => !state),
@@ -53,30 +55,44 @@ const Menubar = ({
       type: "material-community",
       fontColor: "light"
     }
-  )), leftComponents, /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 250 }, (state) => /* @__PURE__ */ React.createElement(styled.StyledInputContainer, { style: animations.getInputContainerStyles(state) }, searchable && /* @__PURE__ */ React.createElement(
-    styled.StyledInput,
+  )), leftComponents, /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 250, nodeRef: transitionInputRef }, (state) => /* @__PURE__ */ React.createElement(
+    styled.StyledInputContainer,
     {
-      placeholder: searchPlaceholder,
-      leftComponent: /* @__PURE__ */ React.createElement(styled.StyledIconInput, null, /* @__PURE__ */ React.createElement(reactCore.Icon, { name: "magnify", type: "material-community" })),
-      value: input,
-      onChange: setInput
-    }
-  ))), rightComponents), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 250 }, (state) => /* @__PURE__ */ React.createElement(styled.StyledContainerOpenMenu, { style: animations.getContainerOpenMenuStyles(state) }, !search ? /* @__PURE__ */ React.createElement(React.Fragment, null, mostUsed && /* @__PURE__ */ React.createElement(
-    MostUsed,
-    {
-      label: mostUsedLabel,
-      data: mostUsed,
-      toggle: toggleOpen
-    }
-  ), /* @__PURE__ */ React.createElement(MenuBlock, { options, toggle: toggleOpen })) : /* @__PURE__ */ React.createElement(styled.StyledSearchResultsContainer, null, /* @__PURE__ */ React.createElement(styled.StyledSearchTextContainer, null, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold" }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React.createElement(
-    SearchResultItem,
+      style: animations.getInputContainerStyles(state),
+      ref: transitionInputRef
+    },
+    searchable && /* @__PURE__ */ React.createElement(
+      styled.StyledInput,
+      {
+        placeholder: searchPlaceholder,
+        leftComponent: /* @__PURE__ */ React.createElement(styled.StyledIconInput, null, /* @__PURE__ */ React.createElement(reactCore.Icon, { name: "magnify", type: "material-community" })),
+        value: input,
+        onChange: setInput
+      }
+    )
+  )), rightComponents), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 250, nodeRef: transitionMenuRef }, (state) => /* @__PURE__ */ React.createElement(
+    styled.StyledContainerOpenMenu,
     {
-      key: `${result.title}-${result.category}`,
-      data: result,
-      searchTerm: search,
-      toggle: toggleOpen
-    }
-  ))))));
+      style: animations.getContainerOpenMenuStyles(state),
+      ref: transitionMenuRef
+    },
+    !search ? /* @__PURE__ */ React.createElement(React.Fragment, null, mostUsed && /* @__PURE__ */ React.createElement(
+      MostUsed,
+      {
+        label: mostUsedLabel,
+        data: mostUsed,
+        toggle: toggleOpen
+      }
+    ), /* @__PURE__ */ React.createElement(MenuBlock, { options, toggle: toggleOpen })) : /* @__PURE__ */ React.createElement(styled.StyledSearchResultsContainer, null, /* @__PURE__ */ React.createElement(styled.StyledSearchTextContainer, null, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold" }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React.createElement(
+      SearchResultItem,
+      {
+        key: `${result.title}-${result.category}`,
+        data: result,
+        searchTerm: search,
+        toggle: toggleOpen
+      }
+    )))
+  )));
 };
 
 module.exports = Menubar;