@chayns-components/core 5.0.0-beta.15 → 5.0.0-beta.153

package/lib/components/icon/utils.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getStackSizeFactor = void 0;
-
-var getStackSizeFactor = function getStackSizeFactor(icon) {
+const getStackSizeFactor = icon => {
   var _icon$match;
-
-  var sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
+  const sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
   return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;
 };
-
 exports.getStackSizeFactor = getStackSizeFactor;
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/utils.ts"],"names":["getStackSizeFactor","icon","sizeFactorString","match","parseInt","undefined"],"mappings":";;;;;;;AAAO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,IAAD,EAAkB;AAAA;;AAChD,MAAMC,gBAAgB,kBAAGD,IAAI,CAACE,KAAL,CAAW,kBAAX,CAAH,gDAAG,YAAiC,CAAjC,CAAzB;AAEA,SAAO,OAAOD,gBAAP,KAA4B,QAA5B,GAAuCE,QAAQ,CAACF,gBAAD,EAAmB,EAAnB,CAA/C,GAAwEG,SAA/E;AACH,CAJM","sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n    const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n    return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["getStackSizeFactor","icon","_icon$match","sizeFactorString","match","parseInt","undefined","exports"],"sources":["../../../src/components/icon/utils.ts"],"sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n    const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n    return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAIC,IAAY,IAAK;EAAA,IAAAC,WAAA;EAChD,MAAMC,gBAAgB,IAAAD,WAAA,GAAGD,IAAI,CAACG,KAAK,CAAC,kBAAkB,CAAC,cAAAF,WAAA,uBAA9BA,WAAA,CAAiC,CAAC,CAAC;EAE5D,OAAO,OAAOC,gBAAgB,KAAK,QAAQ,GAAGE,QAAQ,CAACF,gBAAgB,EAAE,EAAE,CAAC,GAAGG,SAAS;AAC5F,CAAC;AAACC,OAAA,CAAAP,kBAAA,GAAAA,kBAAA"}

package/lib/components/input/Input.d.ts

@@ -0,0 +1,37 @@
+import { ChangeEventHandler, FC, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler } from 'react';
+export type InputProps = {
+    /**
+     * Disables the input so that it cannot be changed anymore
+     */
+    isDisabled?: boolean;
+    /**
+     * Function that is executed when the input field loses focus
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when the text of the input changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when the input field is focused
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when a letter is pressed
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Input type set for input element (e.g. 'text', 'number' or 'password')
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Value if the input field should be controlled
+     */
+    value?: string;
+};
+declare const Input: FC<InputProps>;
+export default Input;

package/lib/components/input/Input.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Input = require("./Input.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+const Input = _ref => {
+  let {
+    isDisabled,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    placeholder,
+    type = 'text',
+    value
+  } = _ref;
+  const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
+  const handleInputFieldChange = (0, _react.useCallback)(event => {
+    setHasValue(event.target.value !== '');
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  (0, _react.useEffect)(() => {
+    if (typeof value === 'string') {
+      setHasValue(value !== '');
+    }
+  }, [value]);
+  const labelPosition = (0, _react.useMemo)(() => {
+    if (hasValue) {
+      return {
+        bottom: -8,
+        right: -6
+      };
+    }
+    return {
+      left: 0,
+      top: 0
+    };
+  }, [hasValue]);
+  return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
+    className: "beta-chayns-input",
+    isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
+    disabled: isDisabled,
+    onBlur: onBlur,
+    onChange: handleInputFieldChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    type: type
+  }), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabel, {
+    animate: {
+      scale: hasValue ? 0.6 : 1
+    },
+    layout: true,
+    style: {
+      ...labelPosition,
+      originX: 1,
+      originY: 1
+    },
+    transition: {
+      type: 'tween'
+    }
+  }, placeholder)));
+};
+Input.displayName = 'Input';
+var _default = Input;
+exports.default = _default;
+//# sourceMappingURL=Input.js.map

package/lib/components/input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Input","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","_ref","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","type","value","hasValue","setHasValue","useState","handleInputFieldChange","useCallback","event","target","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContent","StyledInputField","disabled","StyledMotionInputLabel","animate","scale","layout","style","originX","originY","transition","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputField,\n    StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputProps = {\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input: FC<InputProps> = ({\n    isDisabled,\n    onBlur,\n    onChange,\n    onFocus,\n    onKeyDown,\n    placeholder,\n    type = 'text',\n    value,\n}) => {\n    const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n    const handleInputFieldChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setHasValue(event.target.value !== '');\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange]\n    );\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setHasValue(value !== '');\n        }\n    }, [value]);\n\n    const labelPosition = useMemo(() => {\n        if (hasValue) {\n            return { bottom: -8, right: -6 };\n        }\n\n        return { left: 0, top: 0 };\n    }, [hasValue]);\n\n    return (\n        <StyledInput className=\"beta-chayns-input\" isDisabled={isDisabled}>\n            <StyledInputContent>\n                <StyledInputField\n                    disabled={isDisabled}\n                    onBlur={onBlur}\n                    onChange={handleInputFieldChange}\n                    onFocus={onFocus}\n                    onKeyDown={onKeyDown}\n                    value={value}\n                    type={type}\n                />\n                <StyledMotionInputLabel\n                    animate={{ scale: hasValue ? 0.6 : 1 }}\n                    layout\n                    style={{ ...labelPosition, originX: 1, originY: 1 }}\n                    transition={{ type: 'tween' }}\n                >\n                    {placeholder}\n                </StyledMotionInputLabel>\n            </StyledInputContent>\n        </StyledInput>\n    );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/components/input/Input.styles.d.ts

@@ -0,0 +1,7 @@
+import type { InputProps } from './Input';
+export declare const StyledInput: import("styled-components").StyledComponent<"div", any, Pick<InputProps, "isDisabled"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledInputContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledInputField: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StyledMotionInputLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, any, {}, never>;

package/lib/components/input/Input.styles.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionInputLabel = exports.StyledInputField = exports.StyledInputContent = exports.StyledInput = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledInput = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['100'];
+}};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-radius: 3px;
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['006'];
+}};
+    display: flex;
+    justify-content: space-between;
+    min-height: 42px;
+    opacity: ${_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled ? 0.5 : 1;
+}};
+    padding: 8px 10px;
+    transition: opacity 0.3s ease;
+    width: 100%;
+
+    &:not(&:first-child) {
+        margin-top: 8px;
+    }
+`;
+exports.StyledInput = StyledInput;
+const StyledInputContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    position: relative;
+    min-width: 0;
+`;
+exports.StyledInputContent = StyledInputContent;
+const StyledInputField = _styledComponents.default.input`
+    background: none;
+    border: none;
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.text;
+}};
+    padding: 0;
+`;
+exports.StyledInputField = StyledInputField;
+const StyledMotionInputLabel = (0, _styledComponents.default)(_framerMotion.motion.label)`
+    line-height: 1.15;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+`;
+exports.StyledMotionInputLabel = StyledMotionInputLabel;
+//# sourceMappingURL=Input.styles.js.map

package/lib/components/input/Input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledInput","styled","div","_ref","theme","_ref2","_ref3","isDisabled","exports","StyledInputContent","StyledInputField","input","_ref4","text","StyledMotionInputLabel","motion","label"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding: 8px 10px;\n    transition: opacity 0.3s ease;\n    width: 100%;\n\n    &:not(&:first-child) {\n        margin-top: 8px;\n    }\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    position: relative;\n    min-width: 0;\n`;\n\nexport const StyledInputField = styled.input`\n    background: none;\n    border: none;\n    color: ${({ theme }: StyledInputProps) => theme.text};\n    padding: 0;\n`;\n\nexport const StyledMotionInputLabel = styled(motion.label)`\n    line-height: 1.15;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAwB,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAEK,MAAMS,kBAAkB,GAAGR,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAEK,MAAMC,gBAAgB,GAAGT,yBAAM,CAACU,KAAM;AAC7C;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAER;EAAwB,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAACS,IAAI;AAAA,CAAC;AACzD;AACA,CAAC;AAACL,OAAA,CAAAE,gBAAA,GAAAA,gBAAA;AAEK,MAAMI,sBAAsB,GAAG,IAAAb,yBAAM,EAACc,oBAAM,CAACC,KAAK,CAAE;AAC3D;AACA;AACA;AACA;AACA,CAAC;AAACR,OAAA,CAAAM,sBAAA,GAAAA,sBAAA"}

package/lib/components/list/List.d.ts

@@ -8,7 +8,7 @@ interface IListContext {
     }) => void;
 }
 export declare const ListContext: React.Context<IListContext>;
-declare type ListProps = {
+type ListProps = {
     /**
      * The items of the list
      */

package/lib/components/list/List.js

@@ -1,90 +1,53 @@
 "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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ListContext = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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 _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; }
-
-var ListContext = /*#__PURE__*/_react.default.createContext({
-  incrementExpandableItemCount: function incrementExpandableItemCount() {
-    return function () {};
-  },
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+const ListContext = /*#__PURE__*/_react.default.createContext({
+  incrementExpandableItemCount: () => () => {},
   isAnyItemExpandable: false,
   openItemUuid: undefined,
-  updateOpenItemUuid: function updateOpenItemUuid() {}
+  updateOpenItemUuid: () => {}
 });
-
 exports.ListContext = ListContext;
 ListContext.displayName = 'ListContext';
-
-var List = function List(_ref) {
-  var children = _ref.children;
-
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      openItemUuid = _useState2[0],
-      setOpenItemUuid = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      expandableItemCount = _useState4[0],
-      setExpandableItemCount = _useState4[1];
-
-  var updateOpenItemUuid = (0, _react.useCallback)(function (uuid) {
-    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        shouldOnlyOpen = _ref2.shouldOnlyOpen;
-
-    setOpenItemUuid(function (currentOpenItemUuid) {
+const List = _ref => {
+  let {
+    children
+  } = _ref;
+  const [openItemUuid, setOpenItemUuid] = (0, _react.useState)(undefined);
+  const [expandableItemCount, setExpandableItemCount] = (0, _react.useState)(0);
+  const updateOpenItemUuid = (0, _react.useCallback)(function (uuid) {
+    let {
+      shouldOnlyOpen
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    setOpenItemUuid(currentOpenItemUuid => {
       if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {
         return undefined;
       }
-
       return uuid;
     });
   }, [setOpenItemUuid]);
-  var incrementExpandableItemCount = (0, _react.useCallback)(function () {
-    setExpandableItemCount(function (count) {
-      return count + 1;
-    });
-    return function () {
-      setExpandableItemCount(function (count) {
-        return count - 1;
-      });
+  const incrementExpandableItemCount = (0, _react.useCallback)(() => {
+    setExpandableItemCount(count => count + 1);
+    return () => {
+      setExpandableItemCount(count => count - 1);
     };
   }, [setExpandableItemCount]);
-  var providerValue = (0, _react.useMemo)(function () {
-    return {
-      isAnyItemExpandable: expandableItemCount > 0,
-      updateOpenItemUuid: updateOpenItemUuid,
-      openItemUuid: openItemUuid,
-      incrementExpandableItemCount: incrementExpandableItemCount
-    };
-  }, [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]);
+  const providerValue = (0, _react.useMemo)(() => ({
+    isAnyItemExpandable: expandableItemCount > 0,
+    updateOpenItemUuid,
+    openItemUuid,
+    incrementExpandableItemCount
+  }), [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]);
   return /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
     value: providerValue
   }, children);
 };
-
 List.displayName = 'List';
 var _default = List;
 exports.default = _default;

package/lib/components/list/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/list/List.tsx"],"names":["ListContext","React","createContext","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","undefined","updateOpenItemUuid","displayName","List","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","currentOpenItemUuid","count","providerValue"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AASO,IAAMA,WAAW,gBAAGC,eAAMC,aAAN,CAAkC;AACzDC,EAAAA,4BAA4B,EAAE;AAAA,WAAM,YAAM,CAAE,CAAd;AAAA,GAD2B;AAEzDC,EAAAA,mBAAmB,EAAE,KAFoC;AAGzDC,EAAAA,YAAY,EAAEC,SAH2C;AAIzDC,EAAAA,kBAAkB,EAAE,8BAAM,CAAE;AAJ6B,CAAlC,CAApB;;;AAOPP,WAAW,CAACQ,WAAZ,GAA0B,aAA1B;;AASA,IAAMC,IAAmB,GAAG,SAAtBA,IAAsB,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AAC1C,kBAAwC,qBAAuCJ,SAAvC,CAAxC;AAAA;AAAA,MAAOD,YAAP;AAAA,MAAqBM,eAArB;;AACA,mBAAsD,qBAAiB,CAAjB,CAAtD;AAAA;AAAA,MAAOC,mBAAP;AAAA,MAA4BC,sBAA5B;;AAEA,MAAMN,kBAAkB,GAAG,wBACvB,UAACO,IAAD,EAAmC;AAAA,oFAAP,EAAO;AAAA,QAA1BC,cAA0B,SAA1BA,cAA0B;;AAC/BJ,IAAAA,eAAe,CAAC,UAACK,mBAAD,EAAyB;AACrC,UAAIA,mBAAmB,KAAKF,IAAxB,IAAgCC,cAAc,KAAK,IAAvD,EAA6D;AACzD,eAAOT,SAAP;AACH;;AAED,aAAOQ,IAAP;AACH,KANc,CAAf;AAOH,GATsB,EAUvB,CAACH,eAAD,CAVuB,CAA3B;AAaA,MAAMR,4BAA4B,GAAG,wBAAY,YAAM;AACnDU,IAAAA,sBAAsB,CAAC,UAACI,KAAD;AAAA,aAAWA,KAAK,GAAG,CAAnB;AAAA,KAAD,CAAtB;AAEA,WAAO,YAAM;AACTJ,MAAAA,sBAAsB,CAAC,UAACI,KAAD;AAAA,eAAWA,KAAK,GAAG,CAAnB;AAAA,OAAD,CAAtB;AACH,KAFD;AAGH,GANoC,EAMlC,CAACJ,sBAAD,CANkC,CAArC;AAQA,MAAMK,aAAa,GAAG,oBAClB;AAAA,WAAO;AACHd,MAAAA,mBAAmB,EAAEQ,mBAAmB,GAAG,CADxC;AAEHL,MAAAA,kBAAkB,EAAlBA,kBAFG;AAGHF,MAAAA,YAAY,EAAZA,YAHG;AAIHF,MAAAA,4BAA4B,EAA5BA;AAJG,KAAP;AAAA,GADkB,EAOlB,CAACS,mBAAD,EAAsBT,4BAAtB,EAAoDE,YAApD,EAAkEE,kBAAlE,CAPkB,CAAtB;AAUA,sBAAO,6BAAC,WAAD,CAAa,QAAb;AAAsB,IAAA,KAAK,EAAEW;AAA7B,KAA6CR,QAA7C,CAAP;AACH,CApCD;;AAsCAD,IAAI,CAACD,WAAL,GAAmB,MAAnB;eAEeC,I","sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n};\n\nconst List: FC<ListProps> = ({ children }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid]\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            isAnyItemExpandable: expandableItemCount > 0,\n            updateOpenItemUuid,\n            openItemUuid,\n            incrementExpandableItemCount,\n        }),\n        [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]\n    );\n\n    return <ListContext.Provider value={providerValue}>{children}</ListContext.Provider>;\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"file":"List.js"}
+{"version":3,"file":"List.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ListContext","React","createContext","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","undefined","updateOpenItemUuid","exports","displayName","List","_ref","children","setOpenItemUuid","useState","expandableItemCount","setExpandableItemCount","useCallback","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n};\n\nconst List: FC<ListProps> = ({ children }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid]\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            isAnyItemExpandable: expandableItemCount > 0,\n            updateOpenItemUuid,\n            openItemUuid,\n            incrementExpandableItemCount,\n        }),\n        [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]\n    );\n\n    return <ListContext.Provider value={providerValue}>{children}</ListContext.Provider>;\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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"}

package/lib/components/list/list-item/ListItem.d.ts

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, ReactNode, TouchEventHandler } from 'react';
-declare type ListItemProps = {
+type ListItemProps = {
     /**
      * The content of the `ListItem` body. When the `ListItem` has children,
      * it can be opened and also gets an icon as an indicator automatically.
@@ -15,7 +15,7 @@ declare type ListItemProps = {
      * of the header. Multiple icons are stacked. See the `Icon` component
      * documentation for more information.
      */
-    icons?: [string, ...string[]];
+    icons?: string[];
     /**
      * A list of image URLs that are displayed on the left side of the header.
      * If multiple URLs are passed, the image is assembled from the first three
@@ -26,6 +26,10 @@ declare type ListItemProps = {
      * This can be used to automatically expand the `ListItem` during the first render.
      */
     isDefaultOpen?: boolean;
+    /**
+     * This overrides the internal opening state of the item and makes it controlled.
+     */
+    isOpen?: boolean;
     /**
      * Function to be executed when the header of the `ListItem` was clicked
      */
@@ -35,6 +39,11 @@ declare type ListItemProps = {
      * 400 milliseconds.
      */
     onLongPress?: TouchEventHandler<HTMLDivElement>;
+    /**
+     * Elements that are displayed on the left side of the header. If multiple
+     * elements are specified, they are displayed one aside the other.
+     */
+    leftElements?: [ReactNode, ...ReactNode[]];
     /**
      * Elements that are displayed on the right side of the header. If multiple
      * elements are specified, they are displayed one below the other.

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

@@ -1,103 +1,89 @@
 "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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _framerMotion = require("framer-motion");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _uuid = require("../../../hooks/uuid");
-
 var _List = require("../List");
-
 var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBody"));
-
 var _ListItemHead = _interopRequireDefault(require("./list-item-head/ListItemHead"));
-
 var _ListItem = require("./ListItem.styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-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; }
-
-var ListItem = function ListItem(_ref) {
-  var children = _ref.children,
-      hoverItem = _ref.hoverItem,
-      icons = _ref.icons,
-      images = _ref.images,
-      isDefaultOpen = _ref.isDefaultOpen,
-      onClick = _ref.onClick,
-      onLongPress = _ref.onLongPress,
-      rightElements = _ref.rightElements,
-      subtitle = _ref.subtitle,
-      shouldShowRoundImage = _ref.shouldShowRoundImage,
-      title = _ref.title;
-
-  var _useContext = (0, _react.useContext)(_List.ListContext),
-      incrementExpandableItemCount = _useContext.incrementExpandableItemCount,
-      isAnyItemExpandable = _useContext.isAnyItemExpandable,
-      openItemUuid = _useContext.openItemUuid,
-      updateOpenItemUuid = _useContext.updateOpenItemUuid;
-
-  var uuid = (0, _uuid.useUuid)();
-  var isExpandable = children !== undefined;
-  var isOpen = openItemUuid === uuid;
-  var handleHeadClick = (0, _react.useCallback)(function (event) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+const ListItem = _ref => {
+  let {
+    children,
+    hoverItem,
+    icons,
+    images,
+    isDefaultOpen,
+    isOpen,
+    onClick,
+    onLongPress,
+    leftElements,
+    rightElements,
+    subtitle,
+    shouldShowRoundImage,
+    title
+  } = _ref;
+  const {
+    incrementExpandableItemCount,
+    isAnyItemExpandable,
+    openItemUuid,
+    updateOpenItemUuid
+  } = (0, _react.useContext)(_List.ListContext);
+  const uuid = (0, _uuid.useUuid)();
+  const isExpandable = children !== undefined;
+  const isItemOpen = isOpen !== null && isOpen !== void 0 ? isOpen : openItemUuid === uuid;
+  const handleHeadClick = (0, _react.useCallback)(event => {
     if (isExpandable) {
       updateOpenItemUuid(uuid);
     }
-
     if (typeof onClick === 'function') {
       onClick(event);
     }
   }, [isExpandable, onClick, updateOpenItemUuid, uuid]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (isExpandable) {
       // The incrementExpandableItemCount function returns an cleanup
       // function to decrement expandableItemCount if component unmounts
       return incrementExpandableItemCount();
     }
-
     return undefined;
   }, [incrementExpandableItemCount, isExpandable]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (isDefaultOpen) {
       updateOpenItemUuid(uuid, {
         shouldOnlyOpen: true
       });
     }
   }, [isDefaultOpen, updateOpenItemUuid, uuid]);
-  return /*#__PURE__*/_react.default.createElement(_framerMotion.MotionConfig, {
-    transition: {
-      duration: 0.3
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ListItem.StyledListItem, {
+  return /*#__PURE__*/_react.default.createElement(_ListItem.StyledListItem, {
     className: "beta-chayns-list-item",
     isClickable: typeof onClick === 'function' || isExpandable,
-    isOpen: isOpen
+    isOpen: isItemOpen
   }, /*#__PURE__*/_react.default.createElement(_ListItemHead.default, {
     hoverItem: hoverItem,
     icons: icons,
     images: images,
     isAnyItemExpandable: isAnyItemExpandable,
     isExpandable: isExpandable,
-    isOpen: isOpen,
+    isOpen: isItemOpen,
     onClick: handleHeadClick,
     onLongPress: onLongPress,
+    leftElements: leftElements,
     rightElements: rightElements,
     subtitle: subtitle,
     shouldShowRoundImage: shouldShowRoundImage,
     title: title
-  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, isOpen && /*#__PURE__*/_react.default.createElement(_ListItemBody.default, null, children))));
+  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, isExpandable && isItemOpen && /*#__PURE__*/_react.default.createElement(_ListItemBody.default, null, children)));
 };
-
 ListItem.displayName = 'ListItem';
 var _default = ListItem;
 exports.default = _default;