@tecsinapse/react-web-kit 1.21.3 → 1.22.0

package/dist/index.js

@@ -1,255 +1,77 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  Icon: true,
-  Text: true,
-  Accordion: true,
-  Badge: true,
-  Button: true,
-  useMouseHover: true,
-  Input: true,
-  InputMask: true,
-  Modal: true,
-  Skeleton: true,
-  Tag: true,
-  Tooltip: true,
-  Breadcrumbs: true,
-  DatePicker: true,
-  DateTimePicker: true,
-  Drawer: true,
-  Grid: true,
-  GridItem: true,
-  InputPassword: true,
-  LabeledSwitch: true,
-  Menubar: true,
-  Select: true,
-  Snackbar: true,
-  TextArea: true,
-  DataGrid: true
-};
-Object.defineProperty(exports, "Accordion", {
-  enumerable: true,
-  get: function () {
-    return _Accordion.Accordion;
-  }
-});
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () {
-    return _Badge.default;
-  }
-});
-Object.defineProperty(exports, "Breadcrumbs", {
-  enumerable: true,
-  get: function () {
-    return _Breadcrumbs.Breadcrumbs;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _Button.Button;
-  }
-});
-Object.defineProperty(exports, "DataGrid", {
-  enumerable: true,
-  get: function () {
-    return _DataGrid.DataGrid;
-  }
-});
-Object.defineProperty(exports, "DatePicker", {
-  enumerable: true,
-  get: function () {
-    return _DatePicker.DatePicker;
-  }
-});
-Object.defineProperty(exports, "DateTimePicker", {
-  enumerable: true,
-  get: function () {
-    return _DateTimePicker.DateTimePicker;
-  }
-});
-Object.defineProperty(exports, "Drawer", {
-  enumerable: true,
-  get: function () {
-    return _Drawer.Drawer;
-  }
-});
-Object.defineProperty(exports, "Grid", {
-  enumerable: true,
-  get: function () {
-    return _Grid.Grid;
-  }
-});
-Object.defineProperty(exports, "GridItem", {
-  enumerable: true,
-  get: function () {
-    return _Grid.GridItem;
-  }
-});
-Object.defineProperty(exports, "Icon", {
-  enumerable: true,
-  get: function () {
-    return _reactCore.Icon;
-  }
-});
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () {
-    return _Input.Input;
-  }
-});
-Object.defineProperty(exports, "InputMask", {
-  enumerable: true,
-  get: function () {
-    return _InputMask.InputMask;
-  }
-});
-Object.defineProperty(exports, "InputPassword", {
-  enumerable: true,
-  get: function () {
-    return _InputPassword.InputPassword;
-  }
-});
-Object.defineProperty(exports, "LabeledSwitch", {
-  enumerable: true,
-  get: function () {
-    return _LabeledSwitch.LabeledSwitch;
-  }
-});
-Object.defineProperty(exports, "Menubar", {
-  enumerable: true,
-  get: function () {
-    return _Menubar.Menubar;
-  }
-});
-Object.defineProperty(exports, "Modal", {
-  enumerable: true,
-  get: function () {
-    return _Modal.Modal;
-  }
-});
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function () {
-    return _Select.Select;
-  }
-});
-Object.defineProperty(exports, "Skeleton", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.Skeleton;
-  }
-});
-Object.defineProperty(exports, "Snackbar", {
-  enumerable: true,
-  get: function () {
-    return _Snackbar.Snackbar;
-  }
-});
-Object.defineProperty(exports, "Tag", {
-  enumerable: true,
-  get: function () {
-    return _Tag.Tag;
-  }
-});
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function () {
-    return _reactCore.Text;
-  }
-});
-Object.defineProperty(exports, "TextArea", {
-  enumerable: true,
-  get: function () {
-    return _TextArea.TextArea;
-  }
-});
-Object.defineProperty(exports, "Tooltip", {
-  enumerable: true,
-  get: function () {
-    return _Tooltip.Tooltip;
-  }
-});
-Object.defineProperty(exports, "useMouseHover", {
-  enumerable: true,
-  get: function () {
-    return _Button.useMouseHover;
-  }
-});
-
-var _reactCore = require("@tecsinapse/react-core");
-
-Object.keys(_reactCore).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _reactCore[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _reactCore[key];
-    }
-  });
-});
-
-var _Accordion = require("./components/atoms/Accordion");
-
-var _Badge = _interopRequireDefault(require("./components/atoms/Badge/Badge"));
-
-var _Button = require("./components/atoms/Button");
-
-var _Input = require("./components/atoms/Input");
-
-var _InputMask = require("./components/atoms/InputMask");
-
-var _Modal = require("./components/atoms/Modal");
-
-var _Skeleton = require("./components/atoms/Skeleton");
-
-var _Tag = require("./components/atoms/Tag");
-
-var _Tooltip = require("./components/atoms/Tooltip");
-
-var _Breadcrumbs = require("./components/molecules/Breadcrumbs");
-
-var _DatePicker = require("./components/molecules/DatePicker");
-
-var _DateTimePicker = require("./components/molecules/DateTimePicker");
-
-var _Drawer = require("./components/molecules/Drawer");
-
-var _Grid = require("./components/molecules/Grid");
-
-var _InputPassword = require("./components/molecules/InputPassword");
-
-var _LabeledSwitch = require("./components/molecules/LabeledSwitch");
-
-var _Menubar = require("./components/molecules/Menubar");
-
-var _Select = require("./components/molecules/Select");
-
-var _Snackbar = require("./components/molecules/Snackbar");
-
-var _TextArea = require("./components/molecules/TextArea");
-
-var _DataGrid = require("./components/organisms/DataGrid");
-
-var _hooks = require("./hooks");
-
-Object.keys(_hooks).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _hooks[key]) return;
-  Object.defineProperty(exports, key, {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactCore = require('@tecsinapse/react-core');
+var Accordion = require('./components/atoms/Accordion/Accordion.js');
+var Badge = require('./components/atoms/Badge/Badge.js');
+var Button = require('./components/atoms/Button/Button.js');
+var useMouseHover = require('./components/atoms/Button/hooks/useMouseHover.js');
+var Input = require('./components/atoms/Input/Input.js');
+var InputMask = require('./components/atoms/InputMask/InputMask.js');
+var Modal = require('./components/atoms/Modal/Modal.js');
+var Skeleton = require('./components/atoms/Skeleton/Skeleton.js');
+var Tag = require('./components/atoms/Tag/Tag.js');
+var Tooltip = require('./components/atoms/Tooltip/Tooltip.js');
+var Breadcrumbs = require('./components/molecules/Breadcrumbs/Breadcrumbs.js');
+var DatePicker = require('./components/molecules/DatePicker/DatePicker.js');
+var DateTimePicker = require('./components/molecules/DateTimePicker/DateTimePicker.js');
+var Drawer = require('./components/molecules/Drawer/Drawer.js');
+var Item = require('./components/molecules/Grid/Item/Item.js');
+var Grid = require('./components/molecules/Grid/Grid.js');
+var IconTextButton = require('./components/molecules/IconTextButton/IconTextButton.js');
+var InputPassword = require('./components/molecules/InputPassword/InputPassword.js');
+var LabeledSwitch = require('./components/molecules/LabeledSwitch/LabeledSwitch.js');
+var Menubar = require('./components/molecules/Menubar/Menubar.js');
+var Select = require('./components/molecules/Select/Select.js');
+var Snackbar = require('./components/molecules/Snackbar/Snackbar.js');
+var TextArea = require('./components/molecules/TextArea/TextArea.js');
+var DataGrid = require('./components/organisms/DataGrid/DataGrid.js');
+var useBreakpoints = require('./hooks/useBreakpoints.js');
+var useClickAwayListener = require('./hooks/useClickAwayListener.js');
+var useWindowSize = require('./hooks/useWindowSize.js');
+
+
+
+Object.defineProperty(exports, 'Icon', {
+  enumerable: true,
+  get: function () { return reactCore.Icon; }
+});
+Object.defineProperty(exports, 'Text', {
+  enumerable: true,
+  get: function () { return reactCore.Text; }
+});
+exports.Accordion = Accordion;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.useMouseHover = useMouseHover.useMouseHover;
+exports.Input = Input;
+exports.InputMask = InputMask;
+exports.Modal = Modal;
+exports.Skeleton = Skeleton;
+exports.Tag = Tag;
+exports.Tooltip = Tooltip;
+exports.Breadcrumbs = Breadcrumbs;
+exports.DatePicker = DatePicker.DatePicker;
+exports.DateTimePicker = DateTimePicker.DateTimePicker;
+exports.Drawer = Drawer;
+exports.GridItem = Item;
+exports.Grid = Grid;
+exports.IconTextButton = IconTextButton;
+exports.InputPassword = InputPassword;
+exports.LabeledSwitch = LabeledSwitch;
+exports.Menubar = Menubar;
+exports.Select = Select;
+exports.Snackbar = Snackbar;
+exports.TextArea = TextArea;
+exports.DataGrid = DataGrid;
+exports.useBreakpoints = useBreakpoints.useBreakpoints;
+exports.useClickAwayListener = useClickAwayListener.useClickAwayListener;
+exports.useWindowSize = useWindowSize.useWindowSize;
+Object.keys(reactCore).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: function () {
-      return _hooks[key];
-    }
+    get: function () { return reactCore[k]; }
   });
 });
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Icon, Text } from '@tecsinapse/react-core';\nexport { Accordion } from './components/atoms/Accordion';\nexport type { AccordionProps } from './components/atoms/Accordion';\nexport { default as Badge } from './components/atoms/Badge/Badge';\nexport type { BadgeWebProps } from './components/atoms/Badge/Badge';\nexport { Button, useMouseHover } from './components/atoms/Button';\nexport type { WebButtonProps } from './components/atoms/Button';\nexport { Input } from './components/atoms/Input';\nexport type { InputWebProps } from './components/atoms/Input';\nexport { InputMask } from './components/atoms/InputMask';\nexport type { InputMaskWebProps } from './components/atoms/InputMask';\nexport { Modal } from './components/atoms/Modal';\nexport type { ModalProps } from './components/atoms/Modal';\nexport { Skeleton } from './components/atoms/Skeleton';\nexport type { SkeletonProps } from './components/atoms/Skeleton';\nexport { Tag } from './components/atoms/Tag';\nexport type { TagProps } from './components/atoms/Tag';\nexport { Tooltip } from './components/atoms/Tooltip';\nexport type { ITooltip } from './components/atoms/Tooltip';\nexport { Breadcrumbs } from './components/molecules/Breadcrumbs';\nexport type {\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { DatePicker } from './components/molecules/DatePicker';\nexport type { WebDatePickerProps } from './components/molecules/DatePicker';\nexport { DateTimePicker } from './components/molecules/DateTimePicker';\nexport type { WebDateTimePickerProps } from './components/molecules/DateTimePicker';\nexport { Drawer } from './components/molecules/Drawer';\nexport type { DrawerProps } from './components/molecules/Drawer';\nexport { Grid, GridItem } from './components/molecules/Grid';\nexport type { IGridWeb, IGridItemWeb } from './components/molecules/Grid';\nexport { InputPassword } from './components/molecules/InputPassword';\nexport type { InputPasswordWebProps } from './components/molecules/InputPassword';\nexport { LabeledSwitch } from './components/molecules/LabeledSwitch';\nexport type { LabeledSwitchWebProps } from './components/molecules/LabeledSwitch';\nexport { Menubar } from './components/molecules/Menubar';\nexport type {\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n  MenubarOptionsType,\n  MenubarProps,\n} from './components/molecules/Menubar';\nexport { Select } from './components/molecules/Select';\nexport type { SelectProps } from './components/molecules/Select';\nexport { Snackbar } from './components/molecules/Snackbar';\nexport type { SnackbarWebProps } from './components/molecules/Snackbar';\nexport { TextArea } from './components/molecules/TextArea';\nexport type { TextAreaProps } from './components/molecules/TextArea';\nexport { DataGrid } from './components/organisms/DataGrid';\nexport type {\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport * from './hooks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAKA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAOA;;AAEA;;AAEA;;AAEA;;AAKA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/components/atoms/Accordion/Accordion.js

@@ -1,107 +1,93 @@
-var _excluded = ["title", "open", "onChange", "transition", "children"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { useRef } from 'react';
-import { Icon, Text } from '@tecsinapse/react-core';
-import { AccordionContainer, IconContainer, TitleContainer, ContentContainer } from "./styled";
+import { Text, Icon } from '@tecsinapse/react-core';
+import { AccordionContainer, TitleContainer, IconContainer, ContentContainer } from './styled.js';
 import { Transition } from 'react-transition-group';
-import { contentStyle, contentTransition, titleStyle, titleTransition } from "./animations";
+import { titleTransition, titleStyle, contentTransition, contentStyle } from './animations.js';
 import { useTheme } from '@emotion/react';
 
-var Accordion = function Accordion(_ref) {
-  var title = _ref.title,
-      _ref$open = _ref.open,
-      _open = _ref$open === void 0 ? false : _ref$open,
-      onChange = _ref.onChange,
-      _ref$transition = _ref.transition,
-      transition = _ref$transition === void 0 ? 200 : _ref$transition,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var _React$useState = React.useState(_open),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
-  var _React$useState3 = React.useState(0),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      contentHeight = _React$useState4[0],
-      setContentHeight = _React$useState4[1];
-
-  var theme = useTheme();
-
-  var _ref2 = useRef(null);
-
-  React.useEffect(function () {
-    return setOpen(_open);
-  }, [_open]);
-  React.useLayoutEffect(function () {
-    var _ref$current;
-
-    var size = Array.from(((_ref$current = _ref2.current) === null || _ref$current === void 0 ? void 0 : _ref$current.children) || []).reduce(function (prev, curr) {
-      return prev + curr.clientHeight;
-    }, 0);
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Accordion = (_a) => {
+  var _b = _a, {
+    title,
+    open: _open = false,
+    onChange,
+    transition = 200,
+    children
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "open",
+    "onChange",
+    "transition",
+    "children"
+  ]);
+  const [open, setOpen] = React.useState(_open);
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const theme = useTheme();
+  const ref = useRef(null);
+  React.useEffect(() => setOpen(_open), [_open]);
+  React.useLayoutEffect(() => {
+    var _a2;
+    const size = Array.from(
+      ((_a2 = ref.current) == null ? void 0 : _a2.children) || []
+    ).reduce((prev, curr) => prev + curr.clientHeight, 0);
     setContentHeight(size);
   }, []);
-  var handleClick = React.useCallback(function () {
+  const handleClick = React.useCallback(() => {
     if (onChange) {
       onChange();
       return;
     }
-
-    setOpen(function (state) {
-      return !state;
-    });
+    setOpen((state) => !state);
   }, [onChange]);
-  return React.createElement(AccordionContainer, rest, React.createElement(TitleContainer, {
+  return /* @__PURE__ */ React.createElement(AccordionContainer, __spreadValues({}, rest), /* @__PURE__ */ React.createElement(TitleContainer, {
     onClick: handleClick
-  }, React.createElement(Transition, {
-    "in": open,
+  }, /* @__PURE__ */ React.createElement(Transition, {
+    in: open,
     timeout: transition
-  }, function (state) {
-    return React.createElement(Text, {
-      typography: "h4",
-      fontWeight: "bold",
-      style: _objectSpread(_objectSpread({}, titleStyle(transition, theme)), titleTransition(theme)[state])
-    }, title);
-  }), React.createElement(IconContainer, null, React.createElement(Icon, {
+  }, (state) => /* @__PURE__ */ React.createElement(Text, {
+    typography: "h4",
+    fontWeight: "bold",
+    style: __spreadValues(__spreadValues({}, titleStyle(transition, theme)), titleTransition(theme)[state])
+  }, title)), /* @__PURE__ */ React.createElement(IconContainer, null, /* @__PURE__ */ React.createElement(Icon, {
     type: "material-community",
-    name: open ? 'chevron-up' : 'chevron-down',
+    name: open ? "chevron-up" : "chevron-down",
     size: "kilo",
     fontColor: "medium"
-  }))), React.createElement(Transition, {
-    "in": open,
+  }))), /* @__PURE__ */ React.createElement(Transition, {
+    in: open,
     timeout: transition
-  }, function (state) {
-    return React.createElement(ContentContainer, {
-      ref: function ref(htmlEl) {
-        return _ref2.current = htmlEl;
-      },
-      style: _objectSpread(_objectSpread({}, contentStyle(open, transition, contentHeight, theme)), contentTransition(contentHeight, theme)[state])
-    }, children);
-  }));
+  }, (state) => /* @__PURE__ */ React.createElement(ContentContainer, {
+    ref: (htmlEl) => ref.current = htmlEl,
+    style: __spreadValues(__spreadValues({}, contentStyle(open, transition, contentHeight, theme)), contentTransition(contentHeight, theme)[state])
+  }, children)));
 };
 
-export default Accordion;
-//# sourceMappingURL=Accordion.js.map
+export { Accordion as default };
+//# sourceMappingURL=Accordion.js.map

package/esm/components/atoms/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["React","useRef","Icon","Text","AccordionContainer","IconContainer","TitleContainer","ContentContainer","Transition","contentStyle","contentTransition","titleStyle","titleTransition","useTheme","Accordion","title","open","_open","onChange","transition","children","rest","useState","setOpen","contentHeight","setContentHeight","theme","ref","useEffect","useLayoutEffect","size","Array","from","current","reduce","prev","curr","clientHeight","handleClick","useCallback","state","htmlEl"],"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"],"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\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":["_a"],"mappings":"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"}

package/esm/components/atoms/Accordion/animations.d.ts

@@ -1,9 +1,9 @@
-export declare const contentStyle: (open: boolean, transition: number, value: number, theme: any) => {
+export declare const contentStyle: (open: boolean, transition: number, value: number, theme: ThemeProp) => {
     transition: string;
     paddingBottom: any;
     height: number;
 };
-export declare const contentTransition: (value: number, theme: any) => {
+export declare const contentTransition: (value: number, theme: ThemeProp) => {
     entering: {
         paddingBottom: any;
         height: number;
@@ -21,11 +21,11 @@ export declare const contentTransition: (value: number, theme: any) => {
         height: number;
     };
 };
-export declare const titleStyle: (transition: number, theme: any) => {
+export declare const titleStyle: (transition: number, theme: ThemeProp) => {
     transition: string;
     color: any;
 };
-export declare const titleTransition: (theme: any) => {
+export declare const titleTransition: (theme: ThemeProp) => {
     entering: {
         color: any;
     };