@chayns-components/core 5.0.0-beta.24 → 5.0.0-beta.28

package/lib/components/accordion/Accordion.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/accordion/Accordion.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/accordion/accordion-group/AccordionGroup.d.ts

@@ -13,6 +13,14 @@ declare type AccordionGroupProps = {
      * automatically closed when an `Accordion` of the group is opened.
      */
     children: ReactNode;
+    /**
+     * Function that is executed when all accordions in group are closed.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Function that is executed when any accordion in group will be opened.
+     */
+    onOpen?: VoidFunction;
 };
 declare const AccordionGroup: FC<AccordionGroupProps>;
 export default AccordionGroup;

package/lib/components/accordion/accordion-group/AccordionGroup.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -34,13 +34,16 @@ exports.AccordionGroupContext = AccordionGroupContext;
 AccordionGroupContext.displayName = 'AccordionGroupContext';
 
 var AccordionGroup = function AccordionGroup(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      onClose = _ref.onClose,
+      onOpen = _ref.onOpen;
 
   var _useState = (0, _react.useState)(undefined),
       _useState2 = _slicedToArray(_useState, 2),
       openAccordionUuid = _useState2[0],
       setOpenAccordionUuid = _useState2[1];
 
+  var isInitialRenderRef = (0, _react.useRef)(true);
   var updateOpenAccordionUuid = (0, _react.useCallback)(function (uuid) {
     var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
         shouldOnlyOpen = _ref2.shouldOnlyOpen;
@@ -53,6 +56,17 @@ var AccordionGroup = function AccordionGroup(_ref) {
       return uuid;
     });
   }, [setOpenAccordionUuid]);
+  (0, _react.useEffect)(function () {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (typeof openAccordionUuid === 'string') {
+      if (typeof onOpen === 'function') {
+        onOpen();
+      }
+    } else if (typeof onClose === 'function') {
+      onClose();
+    }
+  }, [onClose, onOpen, openAccordionUuid]);
   var providerValue = (0, _react.useMemo)(function () {
     return {
       openAccordionUuid: openAccordionUuid,

package/lib/components/accordion/accordion-group/AccordionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"names":["AccordionGroupContext","React","createContext","openAccordionUuid","undefined","updateOpenAccordionUuid","displayName","AccordionGroup","children","setOpenAccordionUuid","uuid","shouldOnlyOpen","currentOpenAccordionUuid","providerValue"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AASO,IAAMA,qBAAqB,gBAAGC,eAAMC,aAAN,CAA4C;AAC7EC,EAAAA,iBAAiB,EAAEC,SAD0D;AAE7EC,EAAAA,uBAAuB,EAAED;AAFoD,CAA5C,CAA9B;;;AAKPJ,qBAAqB,CAACM,WAAtB,GAAoC,uBAApC;;AAUA,IAAMC,cAAuC,GAAG,SAA1CA,cAA0C,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AAC9D,kBACI,qBAAsDJ,SAAtD,CADJ;AAAA;AAAA,MAAOD,iBAAP;AAAA,MAA0BM,oBAA1B;;AAGA,MAAMJ,uBAAuB,GAAG,wBAC5B,UAACK,IAAD,EAAmC;AAAA,oFAAP,EAAO;AAAA,QAA1BC,cAA0B,SAA1BA,cAA0B;;AAC/BF,IAAAA,oBAAoB,CAAC,UAACG,wBAAD,EAA8B;AAC/C,UAAIA,wBAAwB,KAAKF,IAA7B,IAAqCC,cAAc,KAAK,IAA5D,EAAkE;AAC9D,eAAOP,SAAP;AACH;;AAED,aAAOM,IAAP;AACH,KANmB,CAApB;AAOH,GAT2B,EAU5B,CAACD,oBAAD,CAV4B,CAAhC;AAaA,MAAMI,aAAa,GAAG,oBAClB;AAAA,WAAO;AACHV,MAAAA,iBAAiB,EAAjBA,iBADG;AAEHE,MAAAA,uBAAuB,EAAvBA;AAFG,KAAP;AAAA,GADkB,EAKlB,CAACF,iBAAD,EAAoBE,uBAApB,CALkB,CAAtB;AAQA,sBACI,6BAAC,qBAAD,CAAuB,QAAvB;AAAgC,IAAA,KAAK,EAAEQ;AAAvC,KACKL,QADL,CADJ;AAKH,CA9BD;;AAgCAD,cAAc,CAACD,WAAf,GAA6B,gBAA7B;eAEeC,c","sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n\ninterface IAccordionGroupContext {\n    openAccordionUuid: string | undefined;\n    updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n    openAccordionUuid: undefined,\n    updateOpenAccordionUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n    /**\n     * The Accordions that should be grouped. Accordions with the same group are\n     * automatically closed when an `Accordion` of the group is opened.\n     */\n    children: ReactNode;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children }) => {\n    const [openAccordionUuid, setOpenAccordionUuid] =\n        useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n\n    const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenAccordionUuid((currentOpenAccordionUuid) => {\n                if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenAccordionUuid]\n    );\n\n    const providerValue = useMemo<IAccordionGroupContext>(\n        () => ({\n            openAccordionUuid,\n            updateOpenAccordionUuid,\n        }),\n        [openAccordionUuid, updateOpenAccordionUuid]\n    );\n\n    return (\n        <AccordionGroupContext.Provider value={providerValue}>\n            {children}\n        </AccordionGroupContext.Provider>\n    );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"file":"AccordionGroup.js"}
+{"version":3,"sources":["../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"names":["AccordionGroupContext","React","createContext","openAccordionUuid","undefined","updateOpenAccordionUuid","displayName","AccordionGroup","children","onClose","onOpen","setOpenAccordionUuid","isInitialRenderRef","uuid","shouldOnlyOpen","currentOpenAccordionUuid","current","providerValue"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AASO,IAAMA,qBAAqB,gBAAGC,eAAMC,aAAN,CAA4C;AAC7EC,EAAAA,iBAAiB,EAAEC,SAD0D;AAE7EC,EAAAA,uBAAuB,EAAED;AAFoD,CAA5C,CAA9B;;;AAKPJ,qBAAqB,CAACM,WAAtB,GAAoC,uBAApC;;AAkBA,IAAMC,cAAuC,GAAG,SAA1CA,cAA0C,OAAmC;AAAA,MAAhCC,QAAgC,QAAhCA,QAAgC;AAAA,MAAtBC,OAAsB,QAAtBA,OAAsB;AAAA,MAAbC,MAAa,QAAbA,MAAa;;AAC/E,kBACI,qBAAsDN,SAAtD,CADJ;AAAA;AAAA,MAAOD,iBAAP;AAAA,MAA0BQ,oBAA1B;;AAGA,MAAMC,kBAAkB,GAAG,mBAAO,IAAP,CAA3B;AAEA,MAAMP,uBAAuB,GAAG,wBAC5B,UAACQ,IAAD,EAAmC;AAAA,oFAAP,EAAO;AAAA,QAA1BC,cAA0B,SAA1BA,cAA0B;;AAC/BH,IAAAA,oBAAoB,CAAC,UAACI,wBAAD,EAA8B;AAC/C,UAAIA,wBAAwB,KAAKF,IAA7B,IAAqCC,cAAc,KAAK,IAA5D,EAAkE;AAC9D,eAAOV,SAAP;AACH;;AAED,aAAOS,IAAP;AACH,KANmB,CAApB;AAOH,GAT2B,EAU5B,CAACF,oBAAD,CAV4B,CAAhC;AAaA,wBAAU,YAAM;AACZ,QAAIC,kBAAkB,CAACI,OAAvB,EAAgC;AAC5BJ,MAAAA,kBAAkB,CAACI,OAAnB,GAA6B,KAA7B;AACH,KAFD,MAEO,IAAI,OAAOb,iBAAP,KAA6B,QAAjC,EAA2C;AAC9C,UAAI,OAAOO,MAAP,KAAkB,UAAtB,EAAkC;AAC9BA,QAAAA,MAAM;AACT;AACJ,KAJM,MAIA,IAAI,OAAOD,OAAP,KAAmB,UAAvB,EAAmC;AACtCA,MAAAA,OAAO;AACV;AACJ,GAVD,EAUG,CAACA,OAAD,EAAUC,MAAV,EAAkBP,iBAAlB,CAVH;AAYA,MAAMc,aAAa,GAAG,oBAClB;AAAA,WAAO;AACHd,MAAAA,iBAAiB,EAAjBA,iBADG;AAEHE,MAAAA,uBAAuB,EAAvBA;AAFG,KAAP;AAAA,GADkB,EAKlB,CAACF,iBAAD,EAAoBE,uBAApB,CALkB,CAAtB;AAQA,sBACI,6BAAC,qBAAD,CAAuB,QAAvB;AAAgC,IAAA,KAAK,EAAEY;AAAvC,KACKT,QADL,CADJ;AAKH,CA5CD;;AA8CAD,cAAc,CAACD,WAAf,GAA6B,gBAA7B;eAEeC,c","sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n\ninterface IAccordionGroupContext {\n    openAccordionUuid: string | undefined;\n    updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n    openAccordionUuid: undefined,\n    updateOpenAccordionUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n    /**\n     * The Accordions that should be grouped. Accordions with the same group are\n     * automatically closed when an `Accordion` of the group is opened.\n     */\n    children: ReactNode;\n    /**\n     * Function that is executed when all accordions in group are closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when any accordion in group will be opened.\n     */\n    onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, onClose, onOpen }) => {\n    const [openAccordionUuid, setOpenAccordionUuid] =\n        useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n\n    const isInitialRenderRef = useRef(true);\n\n    const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenAccordionUuid((currentOpenAccordionUuid) => {\n                if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenAccordionUuid]\n    );\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (typeof openAccordionUuid === 'string') {\n            if (typeof onOpen === 'function') {\n                onOpen();\n            }\n        } else if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose, onOpen, openAccordionUuid]);\n\n    const providerValue = useMemo<IAccordionGroupContext>(\n        () => ({\n            openAccordionUuid,\n            updateOpenAccordionUuid,\n        }),\n        [openAccordionUuid, updateOpenAccordionUuid]\n    );\n\n    return (\n        <AccordionGroupContext.Provider value={providerValue}>\n            {children}\n        </AccordionGroupContext.Provider>\n    );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"file":"AccordionGroup.js"}

package/lib/components/accordion/accordion-head/AccordionHead.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/accordion/accordion-head/AccordionHead.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/color-scheme-provider/ColorSchemeProvider.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -19,9 +19,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 

package/lib/components/context-menu/ContextMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import { ContextMenuAlignment } from './constants/alignment';
 export declare type ContextMenuCoordinates = {
     x: number;
@@ -7,7 +7,7 @@ export declare type ContextMenuCoordinates = {
 export declare type ContextMenuItem = {
     icons: string[];
     key: string;
-    onClick: MouseEventHandler<HTMLDivElement>;
+    onClick: (event?: MouseEvent<HTMLDivElement>) => void;
     text: string;
 };
 declare type ContextMenuRef = {

package/lib/components/context-menu/ContextMenu.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -29,6 +29,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 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."); }
@@ -72,50 +76,90 @@ var ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isContentShown = _useState6[0],
       setIsContentShown = _useState6[1];
 
-  var uuid = (0, _uuid.useUuid)();
+  var uuid = (0, _uuid.useUuid)(); // ToDo: Replace with hook if new chayns api is ready
+
   var contextMenuContentRef = (0, _react.useRef)(null);
   var contextMenuRef = (0, _react.useRef)(null);
   var handleHide = (0, _react.useCallback)(function () {
     setIsContentShown(false);
   }, []);
-  var handleShow = (0, _react.useCallback)(function () {
-    if (contextMenuRef.current) {
-      var rootElement = document.querySelector('.tapp') || document.body;
-
-      var _contextMenuRef$curre = contextMenuRef.current.getBoundingClientRect(),
-          x = _contextMenuRef$curre.x,
-          y = _contextMenuRef$curre.y,
-          childrenHeight = _contextMenuRef$curre.height,
-          childrenWidth = _contextMenuRef$curre.width;
-
-      setInternalCoordinates({
-        x: x + childrenWidth / 2,
-        y: y + childrenHeight / 2
-      });
-
-      var _rootElement$getBound = rootElement.getBoundingClientRect(),
-          height = _rootElement$getBound.height,
-          width = _rootElement$getBound.width;
-
-      if (x < width / 2) {
-        if (y < height / 2) {
-          setInternalAlignment(_alignment.ContextMenuAlignment.BottomRight);
-        } else {
-          setInternalAlignment(_alignment.ContextMenuAlignment.TopRight);
+  var handleShow = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _chayns$env, isMobile, isTablet, _selection$, _yield$chayns$dialog$, buttonType, selection, _items$selection$0$va, rootElement, _contextMenuRef$curre, x, y, childrenHeight, childrenWidth, _rootElement$getBound, height, width;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _chayns$env = chayns.env, isMobile = _chayns$env.isMobile, isTablet = _chayns$env.isTablet;
+
+            if (!(isMobile || isTablet)) {
+              _context.next = 10;
+              break;
+            }
+
+            _context.next = 4;
+            return chayns.dialog.select({
+              buttons: [],
+              list: items.map(function (_ref3, index) {
+                var icons = _ref3.icons,
+                    text = _ref3.text;
+                return {
+                  name: text,
+                  value: index,
+                  icon: icons[0]
+                };
+              }),
+              type: 2
+            });
+
+          case 4:
+            _yield$chayns$dialog$ = _context.sent;
+            buttonType = _yield$chayns$dialog$.buttonType;
+            selection = _yield$chayns$dialog$.selection;
+
+            if (buttonType === 1 && typeof ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.value) === 'number') {
+              (_items$selection$0$va = items[selection[0].value]) === null || _items$selection$0$va === void 0 ? void 0 : _items$selection$0$va.onClick();
+            }
+
+            _context.next = 11;
+            break;
+
+          case 10:
+            if (contextMenuRef.current) {
+              rootElement = document.querySelector('.tapp') || document.body;
+              _contextMenuRef$curre = contextMenuRef.current.getBoundingClientRect(), x = _contextMenuRef$curre.x, y = _contextMenuRef$curre.y, childrenHeight = _contextMenuRef$curre.height, childrenWidth = _contextMenuRef$curre.width;
+              setInternalCoordinates({
+                x: x + childrenWidth / 2,
+                y: y + childrenHeight / 2
+              });
+              _rootElement$getBound = rootElement.getBoundingClientRect(), height = _rootElement$getBound.height, width = _rootElement$getBound.width;
+
+              if (x < width / 2) {
+                if (y < height / 2) {
+                  setInternalAlignment(_alignment.ContextMenuAlignment.BottomRight);
+                } else {
+                  setInternalAlignment(_alignment.ContextMenuAlignment.TopRight);
+                }
+              } else if (y < height / 2) {
+                setInternalAlignment(_alignment.ContextMenuAlignment.BottomLeft);
+              } else {
+                setInternalAlignment(_alignment.ContextMenuAlignment.TopLeft);
+              }
+
+              setIsContentShown(true);
+            }
+
+          case 11:
+          case "end":
+            return _context.stop();
         }
-      } else if (y < height / 2) {
-        setInternalAlignment(_alignment.ContextMenuAlignment.BottomLeft);
-      } else {
-        setInternalAlignment(_alignment.ContextMenuAlignment.TopLeft);
       }
-
-      setIsContentShown(true);
-    }
-  }, []);
+    }, _callee);
+  })), []);
   var handleClick = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    handleShow();
+    void handleShow();
   }, [handleShow]);
   var handleDocumentClick = (0, _react.useCallback)(function (event) {
     var _contextMenuContentRe;

package/lib/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"names":["ContextMenu","ref","alignment","children","container","document","body","coordinates","items","onHide","onShow","x","y","internalCoordinates","setInternalCoordinates","ContextMenuAlignment","TopLeft","internalAlignment","setInternalAlignment","isContentShown","setIsContentShown","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","current","rootElement","querySelector","getBoundingClientRect","childrenHeight","height","childrenWidth","width","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","portal","displayName"],"mappings":"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","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport Icon from '../icon/Icon';\nimport { ContextMenuAlignment } from './constants/alignment';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    text: string;\n};\n\ntype ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n        },\n        ref\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n\n        const uuid = useUuid();\n\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, []);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleShow();\n            },\n            [handleShow]\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                handleHide();\n            },\n            [handleHide]\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow]\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        const portal = useMemo(\n            () =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container\n                ),\n            [\n                container,\n                coordinates,\n                internalCoordinates,\n                internalAlignment,\n                isContentShown,\n                items,\n                alignment,\n                uuid,\n            ]\n        );\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    }\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"file":"ContextMenu.js"}
+{"version":3,"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"names":["ContextMenu","ref","alignment","children","container","document","body","coordinates","items","onHide","onShow","x","y","internalCoordinates","setInternalCoordinates","ContextMenuAlignment","TopLeft","internalAlignment","setInternalAlignment","isContentShown","setIsContentShown","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","chayns","env","isMobile","isTablet","dialog","select","buttons","list","map","index","icons","text","name","value","icon","type","buttonType","selection","onClick","current","rootElement","querySelector","getBoundingClientRect","childrenHeight","height","childrenWidth","width","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","portal","displayName"],"mappings":"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","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport Icon from '../icon/Icon';\nimport { ContextMenuAlignment } from './constants/alignment';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => void;\n    text: string;\n};\n\ntype ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n        },\n        ref\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const { isMobile, isTablet } = chayns.env;\n\n            if (isMobile || isTablet) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, []);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow]\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                handleHide();\n            },\n            [handleHide]\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow]\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        const portal = useMemo(\n            () =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container\n                ),\n            [\n                container,\n                coordinates,\n                internalCoordinates,\n                internalAlignment,\n                isContentShown,\n                items,\n                alignment,\n                uuid,\n            ]\n        );\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    }\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"file":"ContextMenu.js"}

package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/grid-image/GridImage.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/icon/Icon.d.ts

@@ -21,7 +21,7 @@ export declare type IconProps = {
      */
     onClick?: MouseEventHandler<HTMLSpanElement>;
     /**
-     * Function to be executed when the icon was double clicked
+     * Function to be executed when the icon was double-clicked
      */
     onDoubleClick?: MouseEventHandler<HTMLSpanElement>;
     /**

package/lib/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/Icon.tsx"],"names":["Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","undefined","map","iconClasses","includes","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAyCA,IAAMA,IAAmB,GAAG,SAAtBA,IAAsB,OAUtB;AAAA,MATFC,SASE,QATFA,SASE;AAAA,MARFC,KAQE,QARFA,KAQE;AAAA,MAPFC,KAOE,QAPFA,KAOE;AAAA,MANFC,UAME,QANFA,UAME;AAAA,MALFC,OAKE,QALFA,OAKE;AAAA,MAJFC,aAIE,QAJFA,aAIE;AAAA,MAHFC,WAGE,QAHFA,WAGE;AAAA,uBAFFC,IAEE;AAAA,MAFFA,IAEE,0BAFK,EAEL;AAAA,MADFC,qBACE,QADFA,qBACE;;AACF,MAAMC,WAA+C,GAAG,SAAlDA,WAAkD,CAACC,KAAD,EAAW;AAC/D,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACM,KAAD,CAAP;AACH;AACJ,GARD;;AAUA,MAAME,iBAAqD,GAAG,SAAxDA,iBAAwD,CAACF,KAAD,EAAW;AACrE,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAON,aAAP,KAAyB,UAA7B,EAAyC;AACrCA,MAAAA,aAAa,CAACK,KAAD,CAAb;AACH;AACJ,GARD;;AAUA,MAAIG,kBAAkB,GAAG,CAAzB;AAEAX,EAAAA,KAAK,CAACY,OAAN,CAAc,UAACC,IAAD,EAAU;AACpB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;;AAEA,QAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAzC,EAA6D;AACzDA,MAAAA,kBAAkB,GAAGG,eAArB;AACH;AACJ,GAND;AAQA,MAAMC,oBAAoB,GAAGf,KAAK,CAACgB,MAAN,GAAe,CAA5C;AAEA,MAAMC,cAAc,GAAG,mBACnB,kBADmB,EAEnBF,oBAAoB,GAAG,UAAH,GAAgB,EAFjB,EAGnBjB,SAHmB,CAAvB;AAMA,sBACI,6BAAC,uBAAD;AACI,IAAA,SAAS,EAAEmB,cADf;AAEI,IAAA,UAAU,EAAEhB,UAFhB;AAGI,IAAA,OAAO,EAAE,OAAOC,OAAP,KAAmB,UAAnB,GAAgCK,WAAhC,GAA8CW,SAH3D;AAII,IAAA,aAAa,EAAE,OAAOf,aAAP,KAAyB,UAAzB,GAAsCO,iBAAtC,GAA0DQ,SAJ7E;AAKI,IAAA,WAAW,EAAEd,WALjB;AAMI,IAAA,IAAI,EAAEC;AANV,KAQKL,KAAK,CAACmB,GAAN,CAAU,UAACN,IAAD,EAAU;AACjB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;AAEA,QAAMO,WAAW,GAAG,mBAAKP,IAAL,EAAWf,SAAX,EAAsB;AACtC,qBAAeiB,oBAAoB,IAAID,eAAe,KAAKI;AADrB,KAAtB,CAApB;AAIA,wBACI,6BAAC,gBAAD;AACI,MAAA,SAAS,EAAEE,WADf;AAEI,MAAA,KAAK,EAAEP,IAAI,CAACQ,QAAL,CAAc,YAAd,IAA8B,OAA9B,GAAwCtB,KAFnD;AAGI,MAAA,QAAQ,EAAG,CAACe,eAAe,IAAI,CAApB,IAAyBH,kBAA1B,GAAgDN,IAH9D;AAII,MAAA,SAAS,EAAEU,oBAJf;AAKI,MAAA,GAAG,EAAEF,IALT;AAMI,MAAA,IAAI,EAAER;AANV,MADJ;AAUH,GAjBA,CARL,CADJ;AA6BH,CA9ED;;AAgFAR,IAAI,CAACyB,WAAL,GAAmB,MAAnB;eAEezB,I","sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: string[];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(icon, className, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"file":"Icon.js"}
+{"version":3,"sources":["../../../src/components/icon/Icon.tsx"],"names":["Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","undefined","map","iconClasses","includes","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAyCA,IAAMA,IAAmB,GAAG,SAAtBA,IAAsB,OAUtB;AAAA,MATFC,SASE,QATFA,SASE;AAAA,MARFC,KAQE,QARFA,KAQE;AAAA,MAPFC,KAOE,QAPFA,KAOE;AAAA,MANFC,UAME,QANFA,UAME;AAAA,MALFC,OAKE,QALFA,OAKE;AAAA,MAJFC,aAIE,QAJFA,aAIE;AAAA,MAHFC,WAGE,QAHFA,WAGE;AAAA,uBAFFC,IAEE;AAAA,MAFFA,IAEE,0BAFK,EAEL;AAAA,MADFC,qBACE,QADFA,qBACE;;AACF,MAAMC,WAA+C,GAAG,SAAlDA,WAAkD,CAACC,KAAD,EAAW;AAC/D,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACM,KAAD,CAAP;AACH;AACJ,GARD;;AAUA,MAAME,iBAAqD,GAAG,SAAxDA,iBAAwD,CAACF,KAAD,EAAW;AACrE,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAON,aAAP,KAAyB,UAA7B,EAAyC;AACrCA,MAAAA,aAAa,CAACK,KAAD,CAAb;AACH;AACJ,GARD;;AAUA,MAAIG,kBAAkB,GAAG,CAAzB;AAEAX,EAAAA,KAAK,CAACY,OAAN,CAAc,UAACC,IAAD,EAAU;AACpB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;;AAEA,QAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAzC,EAA6D;AACzDA,MAAAA,kBAAkB,GAAGG,eAArB;AACH;AACJ,GAND;AAQA,MAAMC,oBAAoB,GAAGf,KAAK,CAACgB,MAAN,GAAe,CAA5C;AAEA,MAAMC,cAAc,GAAG,mBACnB,kBADmB,EAEnBF,oBAAoB,GAAG,UAAH,GAAgB,EAFjB,EAGnBjB,SAHmB,CAAvB;AAMA,sBACI,6BAAC,uBAAD;AACI,IAAA,SAAS,EAAEmB,cADf;AAEI,IAAA,UAAU,EAAEhB,UAFhB;AAGI,IAAA,OAAO,EAAE,OAAOC,OAAP,KAAmB,UAAnB,GAAgCK,WAAhC,GAA8CW,SAH3D;AAII,IAAA,aAAa,EAAE,OAAOf,aAAP,KAAyB,UAAzB,GAAsCO,iBAAtC,GAA0DQ,SAJ7E;AAKI,IAAA,WAAW,EAAEd,WALjB;AAMI,IAAA,IAAI,EAAEC;AANV,KAQKL,KAAK,CAACmB,GAAN,CAAU,UAACN,IAAD,EAAU;AACjB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;AAEA,QAAMO,WAAW,GAAG,mBAAKP,IAAL,EAAWf,SAAX,EAAsB;AACtC,qBAAeiB,oBAAoB,IAAID,eAAe,KAAKI;AADrB,KAAtB,CAApB;AAIA,wBACI,6BAAC,gBAAD;AACI,MAAA,SAAS,EAAEE,WADf;AAEI,MAAA,KAAK,EAAEP,IAAI,CAACQ,QAAL,CAAc,YAAd,IAA8B,OAA9B,GAAwCtB,KAFnD;AAGI,MAAA,QAAQ,EAAG,CAACe,eAAe,IAAI,CAApB,IAAyBH,kBAA1B,GAAgDN,IAH9D;AAII,MAAA,SAAS,EAAEU,oBAJf;AAKI,MAAA,GAAG,EAAEF,IALT;AAMI,MAAA,IAAI,EAAER;AANV,MADJ;AAUH,GAjBA,CARL,CADJ;AA6BH,CA9ED;;AAgFAR,IAAI,CAACyB,WAAL,GAAmB,MAAnB;eAEezB,I","sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: string[];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double-clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(icon, className, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"file":"Icon.js"}

package/lib/components/icon/Icon.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/list/List.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/list/list-item/ListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -91,9 +91,9 @@ var ListItem = function ListItem(_ref) {
     subtitle: subtitle,
     shouldShowRoundImage: shouldShowRoundImage,
     title: title
-  }), isExpandable && /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
-  }, isOpen && /*#__PURE__*/_react.default.createElement(_ListItemBody.default, null, children)));
+  }, isExpandable && isOpen && /*#__PURE__*/_react.default.createElement(_ListItemBody.default, null, children)));
 };
 
 ListItem.displayName = 'ListItem';

package/lib/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/list/list-item/ListItem.tsx"],"names":["ListItem","children","hoverItem","icons","images","isDefaultOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","ListContext","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isOpen","handleHeadClick","event","shouldOnlyOpen","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AA0DA,IAAMA,QAA2B,GAAG,SAA9BA,QAA8B,OAY9B;AAAA,MAXFC,QAWE,QAXFA,QAWE;AAAA,MAVFC,SAUE,QAVFA,SAUE;AAAA,MATFC,KASE,QATFA,KASE;AAAA,MARFC,MAQE,QARFA,MAQE;AAAA,MAPFC,aAOE,QAPFA,aAOE;AAAA,MANFC,OAME,QANFA,OAME;AAAA,MALFC,WAKE,QALFA,WAKE;AAAA,MAJFC,aAIE,QAJFA,aAIE;AAAA,MAHFC,QAGE,QAHFA,QAGE;AAAA,MAFFC,oBAEE,QAFFA,oBAEE;AAAA,MADFC,KACE,QADFA,KACE;;AACF,oBACI,uBAAWC,iBAAX,CADJ;AAAA,MAAQC,4BAAR,eAAQA,4BAAR;AAAA,MAAsCC,mBAAtC,eAAsCA,mBAAtC;AAAA,MAA2DC,YAA3D,eAA2DA,YAA3D;AAAA,MAAyEC,kBAAzE,eAAyEA,kBAAzE;;AAGA,MAAMC,IAAI,GAAG,oBAAb;AAEA,MAAMC,YAAY,GAAGjB,QAAQ,KAAKkB,SAAlC;AACA,MAAMC,MAAM,GAAGL,YAAY,KAAKE,IAAhC;AAEA,MAAMI,eAAe,GAAG,wBACpB,UAACC,KAAD,EAAW;AACP,QAAIJ,YAAJ,EAAkB;AACdF,MAAAA,kBAAkB,CAACC,IAAD,CAAlB;AACH;;AAED,QAAI,OAAOX,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACgB,KAAD,CAAP;AACH;AACJ,GATmB,EAUpB,CAACJ,YAAD,EAAeZ,OAAf,EAAwBU,kBAAxB,EAA4CC,IAA5C,CAVoB,CAAxB;AAaA,wBAAU,YAAM;AACZ,QAAIC,YAAJ,EAAkB;AACd;AACA;AACA,aAAOL,4BAA4B,EAAnC;AACH;;AAED,WAAOM,SAAP;AACH,GARD,EAQG,CAACN,4BAAD,EAA+BK,YAA/B,CARH;AAUA,wBAAU,YAAM;AACZ,QAAIb,aAAJ,EAAmB;AACfW,MAAAA,kBAAkB,CAACC,IAAD,EAAO;AAAEM,QAAAA,cAAc,EAAE;AAAlB,OAAP,CAAlB;AACH;AACJ,GAJD,EAIG,CAAClB,aAAD,EAAgBW,kBAAhB,EAAoCC,IAApC,CAJH;AAMA,sBACI,6BAAC,wBAAD;AACI,IAAA,SAAS,EAAC,uBADd;AAEI,IAAA,WAAW,EAAE,OAAOX,OAAP,KAAmB,UAAnB,IAAiCY,YAFlD;AAGI,IAAA,MAAM,EAAEE;AAHZ,kBAKI,6BAAC,qBAAD;AACI,IAAA,SAAS,EAAElB,SADf;AAEI,IAAA,KAAK,EAAEC,KAFX;AAGI,IAAA,MAAM,EAAEC,MAHZ;AAII,IAAA,mBAAmB,EAAEU,mBAJzB;AAKI,IAAA,YAAY,EAAEI,YALlB;AAMI,IAAA,MAAM,EAAEE,MANZ;AAOI,IAAA,OAAO,EAAEC,eAPb;AAQI,IAAA,WAAW,EAAEd,WARjB;AASI,IAAA,aAAa,EAAEC,aATnB;AAUI,IAAA,QAAQ,EAAEC,QAVd;AAWI,IAAA,oBAAoB,EAAEC,oBAX1B;AAYI,IAAA,KAAK,EAAEC;AAZX,IALJ,EAmBKO,YAAY,iBACT,6BAAC,6BAAD;AAAiB,IAAA,OAAO,EAAE;AAA1B,KACKE,MAAM,iBAAI,6BAAC,qBAAD,QAAenB,QAAf,CADf,CApBR,CADJ;AA2BH,CA7ED;;AA+EAD,QAAQ,CAACwB,WAAT,GAAuB,UAAvB;eAEexB,Q","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem } from './ListItem.styles';\n\ntype ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: [ReactNode, ...ReactNode[]];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const { incrementExpandableItemCount, isAnyItemExpandable, openItemUuid, updateOpenItemUuid } =\n        useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isOpen = openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid]\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    return (\n        <StyledListItem\n            className=\"beta-chayns-list-item\"\n            isClickable={typeof onClick === 'function' || isExpandable}\n            isOpen={isOpen}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isOpen}\n                onClick={handleHeadClick}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                title={title}\n            />\n            {isExpandable && (\n                <AnimatePresence initial={false}>\n                    {isOpen && <ListItemBody>{children}</ListItemBody>}\n                </AnimatePresence>\n            )}\n        </StyledListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"ListItem.js"}
+{"version":3,"sources":["../../../../src/components/list/list-item/ListItem.tsx"],"names":["ListItem","children","hoverItem","icons","images","isDefaultOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","ListContext","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isOpen","handleHeadClick","event","shouldOnlyOpen","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AA0DA,IAAMA,QAA2B,GAAG,SAA9BA,QAA8B,OAY9B;AAAA,MAXFC,QAWE,QAXFA,QAWE;AAAA,MAVFC,SAUE,QAVFA,SAUE;AAAA,MATFC,KASE,QATFA,KASE;AAAA,MARFC,MAQE,QARFA,MAQE;AAAA,MAPFC,aAOE,QAPFA,aAOE;AAAA,MANFC,OAME,QANFA,OAME;AAAA,MALFC,WAKE,QALFA,WAKE;AAAA,MAJFC,aAIE,QAJFA,aAIE;AAAA,MAHFC,QAGE,QAHFA,QAGE;AAAA,MAFFC,oBAEE,QAFFA,oBAEE;AAAA,MADFC,KACE,QADFA,KACE;;AACF,oBACI,uBAAWC,iBAAX,CADJ;AAAA,MAAQC,4BAAR,eAAQA,4BAAR;AAAA,MAAsCC,mBAAtC,eAAsCA,mBAAtC;AAAA,MAA2DC,YAA3D,eAA2DA,YAA3D;AAAA,MAAyEC,kBAAzE,eAAyEA,kBAAzE;;AAGA,MAAMC,IAAI,GAAG,oBAAb;AAEA,MAAMC,YAAY,GAAGjB,QAAQ,KAAKkB,SAAlC;AACA,MAAMC,MAAM,GAAGL,YAAY,KAAKE,IAAhC;AAEA,MAAMI,eAAe,GAAG,wBACpB,UAACC,KAAD,EAAW;AACP,QAAIJ,YAAJ,EAAkB;AACdF,MAAAA,kBAAkB,CAACC,IAAD,CAAlB;AACH;;AAED,QAAI,OAAOX,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACgB,KAAD,CAAP;AACH;AACJ,GATmB,EAUpB,CAACJ,YAAD,EAAeZ,OAAf,EAAwBU,kBAAxB,EAA4CC,IAA5C,CAVoB,CAAxB;AAaA,wBAAU,YAAM;AACZ,QAAIC,YAAJ,EAAkB;AACd;AACA;AACA,aAAOL,4BAA4B,EAAnC;AACH;;AAED,WAAOM,SAAP;AACH,GARD,EAQG,CAACN,4BAAD,EAA+BK,YAA/B,CARH;AAUA,wBAAU,YAAM;AACZ,QAAIb,aAAJ,EAAmB;AACfW,MAAAA,kBAAkB,CAACC,IAAD,EAAO;AAAEM,QAAAA,cAAc,EAAE;AAAlB,OAAP,CAAlB;AACH;AACJ,GAJD,EAIG,CAAClB,aAAD,EAAgBW,kBAAhB,EAAoCC,IAApC,CAJH;AAMA,sBACI,6BAAC,wBAAD;AACI,IAAA,SAAS,EAAC,uBADd;AAEI,IAAA,WAAW,EAAE,OAAOX,OAAP,KAAmB,UAAnB,IAAiCY,YAFlD;AAGI,IAAA,MAAM,EAAEE;AAHZ,kBAKI,6BAAC,qBAAD;AACI,IAAA,SAAS,EAAElB,SADf;AAEI,IAAA,KAAK,EAAEC,KAFX;AAGI,IAAA,MAAM,EAAEC,MAHZ;AAII,IAAA,mBAAmB,EAAEU,mBAJzB;AAKI,IAAA,YAAY,EAAEI,YALlB;AAMI,IAAA,MAAM,EAAEE,MANZ;AAOI,IAAA,OAAO,EAAEC,eAPb;AAQI,IAAA,WAAW,EAAEd,WARjB;AASI,IAAA,aAAa,EAAEC,aATnB;AAUI,IAAA,QAAQ,EAAEC,QAVd;AAWI,IAAA,oBAAoB,EAAEC,oBAX1B;AAYI,IAAA,KAAK,EAAEC;AAZX,IALJ,eAmBI,6BAAC,6BAAD;AAAiB,IAAA,OAAO,EAAE;AAA1B,KACKO,YAAY,IAAIE,MAAhB,iBAA0B,6BAAC,qBAAD,QAAenB,QAAf,CAD/B,CAnBJ,CADJ;AAyBH,CA3ED;;AA6EAD,QAAQ,CAACwB,WAAT,GAAuB,UAAvB;eAEexB,Q","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem } from './ListItem.styles';\n\ntype ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: [ReactNode, ...ReactNode[]];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const { incrementExpandableItemCount, isAnyItemExpandable, openItemUuid, updateOpenItemUuid } =\n        useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isOpen = openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid]\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    return (\n        <StyledListItem\n            className=\"beta-chayns-list-item\"\n            isClickable={typeof onClick === 'function' || isExpandable}\n            isOpen={isOpen}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isOpen}\n                onClick={handleHeadClick}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                title={title}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isOpen && <ListItemBody>{children}</ListItemBody>}\n            </AnimatePresence>\n        </StyledListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"ListItem.js"}

package/lib/components/list/list-item/ListItem.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/list/list-item/list-item-body/ListItemBody.js

@@ -18,7 +18,7 @@ var ListItemBody = function ListItemBody(_ref) {
       height: 'auto',
       opacity: 1
     },
-    className: "beta-chayns-accordion-body",
+    className: "beta-chayns-list-item-body",
     exit: {
       height: 0,
       opacity: 0

package/lib/components/list/list-item/list-item-body/ListItemBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"names":["ListItemBody","children","height","opacity","type","displayName"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,YAAgB,GAAG,SAAnBA,YAAmB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACrB,6BAAC,sCAAD;AACI,IAAA,OAAO,EAAE;AAAEC,MAAAA,MAAM,EAAE,MAAV;AAAkBC,MAAAA,OAAO,EAAE;AAA3B,KADb;AAEI,IAAA,SAAS,EAAC,4BAFd;AAGI,IAAA,IAAI,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB,KAHV;AAII,IAAA,OAAO,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB,KAJb;AAKI,IAAA,UAAU,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AALhB,KAOKH,QAPL,CADqB;AAAA,CAAzB;;AAYAD,YAAY,CAACK,WAAb,GAA2B,cAA3B;eAEeL,Y","sourcesContent":["import React, { FC } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\nconst ListItemBody: FC = ({ children }) => (\n    <StyledMotionListItemBody\n        animate={{ height: 'auto', opacity: 1 }}\n        className=\"beta-chayns-accordion-body\"\n        exit={{ height: 0, opacity: 0 }}\n        initial={{ height: 0, opacity: 0 }}\n        transition={{ type: 'tween' }}\n    >\n        {children}\n    </StyledMotionListItemBody>\n);\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"file":"ListItemBody.js"}
+{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"names":["ListItemBody","children","height","opacity","type","displayName"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,YAAgB,GAAG,SAAnBA,YAAmB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACrB,6BAAC,sCAAD;AACI,IAAA,OAAO,EAAE;AAAEC,MAAAA,MAAM,EAAE,MAAV;AAAkBC,MAAAA,OAAO,EAAE;AAA3B,KADb;AAEI,IAAA,SAAS,EAAC,4BAFd;AAGI,IAAA,IAAI,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB,KAHV;AAII,IAAA,OAAO,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB,KAJb;AAKI,IAAA,UAAU,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AALhB,KAOKH,QAPL,CADqB;AAAA,CAAzB;;AAYAD,YAAY,CAACK,WAAb,GAA2B,cAA3B;eAEeL,Y","sourcesContent":["import React, { FC } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\nconst ListItemBody: FC = ({ children }) => (\n    <StyledMotionListItemBody\n        animate={{ height: 'auto', opacity: 1 }}\n        className=\"beta-chayns-list-item-body\"\n        exit={{ height: 0, opacity: 0 }}\n        initial={{ height: 0, opacity: 0 }}\n        transition={{ type: 'tween' }}\n    >\n        {children}\n    </StyledMotionListItemBody>\n);\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"file":"ListItemBody.js"}

package/lib/components/list/list-item/list-item-head/ListItemHead.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/types/chayns.d.ts

@@ -0,0 +1,56 @@
+declare global {
+    let chayns: Chayns;
+}
+export interface Chayns {
+    dialog: Dialog;
+    env: Env;
+}
+export interface Dialog {
+    select(config: {
+        title?: string;
+        message?: string;
+        list: Array<SelectDialogItem>;
+        multiselect?: boolean;
+        type?: SelectType;
+        preventCloseOnClick?: boolean;
+        buttons?: DialogButton[];
+        selectAllButton?: string;
+    }): Promise<SelectDialogResult>;
+}
+declare enum ButtonText {
+    Cancel = "Abbrechen",
+    No = "Nein",
+    Ok = "OK",
+    Yes = "Ja"
+}
+export declare enum ButtonType {
+    Cancel = -1,
+    Negative = 0,
+    Positive = 1
+}
+export interface DialogButton {
+    text: ButtonText | string;
+    buttonType: ButtonType | number;
+    collapseTime?: number;
+    textColor?: string;
+    backgroundColor?: string;
+}
+export interface SelectDialogItem {
+    name: string;
+    value: string | number;
+    isSelected?: boolean;
+}
+export interface SelectDialogResult {
+    buttonType: ButtonType | number;
+    selection: Array<SelectDialogItem>;
+}
+declare enum SelectType {
+    Default = 0,
+    Icon = 1,
+    IconAndText
+}
+export interface Env {
+    isMobile: boolean;
+    isTablet: boolean;
+}
+export {};

package/lib/types/chayns.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonType = void 0;
+var ButtonType;
+exports.ButtonType = ButtonType;
+
+(function (ButtonType) {
+  ButtonType[ButtonType["Cancel"] = -1] = "Cancel";
+  ButtonType[ButtonType["Negative"] = 0] = "Negative";
+  ButtonType[ButtonType["Positive"] = 1] = "Positive";
+})(ButtonType || (exports.ButtonType = ButtonType = {}));
+//# sourceMappingURL=chayns.js.map

package/lib/types/chayns.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/chayns.ts"],"names":["ButtonType"],"mappings":";;;;;;IA6BYA,U;;;WAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,0BAAAA,U","sourcesContent":["declare global {\n    let chayns: Chayns;\n}\n\nexport interface Chayns {\n    dialog: Dialog;\n    env: Env;\n}\n\nexport interface Dialog {\n    select(config: {\n        title?: string;\n        message?: string;\n        list: Array<SelectDialogItem>;\n        multiselect?: boolean;\n        type?: SelectType;\n        preventCloseOnClick?: boolean;\n        buttons?: DialogButton[];\n        selectAllButton?: string;\n    }): Promise<SelectDialogResult>;\n}\n\ndeclare enum ButtonText {\n    Cancel = 'Abbrechen',\n    No = 'Nein',\n    Ok = 'OK',\n    Yes = 'Ja',\n}\n\nexport enum ButtonType {\n    Cancel = -1,\n    Negative = 0,\n    Positive = 1,\n}\n\nexport interface DialogButton {\n    text: ButtonText | string;\n    buttonType: ButtonType | number;\n    collapseTime?: number;\n    textColor?: string;\n    backgroundColor?: string;\n}\n\nexport interface SelectDialogItem {\n    name: string;\n    value: string | number;\n    isSelected?: boolean;\n}\n\nexport interface SelectDialogResult {\n    buttonType: ButtonType | number;\n    selection: Array<SelectDialogItem>;\n}\n\ndeclare enum SelectType {\n    Default = 0,\n    Icon = 1,\n    IconAndText,\n}\n\nexport interface Env {\n    isMobile: boolean;\n    isTablet: boolean;\n}\n"],"file":"chayns.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.24",
+    "version": "5.0.0-beta.28",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -33,25 +33,25 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.15.7",
-        "@babel/core": "^7.15.8",
-        "@babel/preset-env": "^7.15.8",
-        "@babel/preset-react": "^7.14.5",
-        "@babel/preset-typescript": "^7.15.0",
-        "@types/react": "^17.0.27",
-        "@types/react-dom": "^17.0.9",
-        "@types/styled-components": "^5.1.15",
-        "@types/uuid": "^8.3.1",
-        "babel-loader": "^8.2.2",
+        "@babel/cli": "^7.17.3",
+        "@babel/core": "^7.17.5",
+        "@babel/preset-env": "^7.16.11",
+        "@babel/preset-react": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.11",
+        "@types/styled-components": "^5.1.23",
+        "@types/uuid": "^8.3.4",
+        "babel-loader": "^8.2.3",
         "lerna": "^4.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "typescript": "^4.4.3"
+        "typescript": "^4.5.5"
     },
     "dependencies": {
         "clsx": "^1.1.1",
-        "framer-motion": "^4.1.17",
-        "styled-components": "^5.3.1",
+        "framer-motion": "^6.2.6",
+        "styled-components": "^5.3.3",
         "uuid": "^8.3.2"
     },
     "peerDependencies": {
@@ -61,5 +61,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "25ce67f034604002e951be063b7467bf77e444ce"
+    "gitHead": "c079761890efa42986a19739df1210ad46862df3"
 }