@chayns-components/core 5.0.0-beta.4 → 5.0.0-beta.400

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTopRightElement = exports.StyledListItemHeadTitleText = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadRightElement = exports.StyledListItemHeadContent = exports.StyledListItemHeadBottomRightElement = exports.StyledListItemHead = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledListItemHead = exports.StyledListItemHead = _styledComponents.default.div`
+    align-items: center;
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    display: flex;
+    height: 64px;
+    padding: 12px 9px;
+
+    ${_ref2 => {
+  let {
+    isClickable
+  } = _ref2;
+  return isClickable && (0, _styledComponents.css)`
+            cursor: pointer;
+        `;
+}}
+`;
+const StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadIndicator = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    height: 26px;
+    justify-content: center;
+    width: 26px;
+`;
+const StyledListItemHeadContent = exports.StyledListItemHeadContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    font-weight: ${_ref3 => {
+  let {
+    isOpen
+  } = _ref3;
+  return isOpen ? 'bold' : 'normal';
+}};
+    justify-content: center;
+    line-height: normal;
+    margin-left: ${_ref4 => {
+  let {
+    isIconOrImageGiven
+  } = _ref4;
+  return isIconOrImageGiven ? '10px' : undefined;
+}};
+    min-width: 0;
+`;
+const StyledListItemHeadTitle = exports.StyledListItemHeadTitle = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+`;
+const StyledListItemHeadTitleText = exports.StyledListItemHeadTitleText = _styledComponents.default.span`
+    flex: 1 1 auto;
+    min-width: 0;
+`;
+const StyledListItemHeadSubtitle = exports.StyledListItemHeadSubtitle = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2px;
+    opacity: 0.75;
+`;
+const StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitleText = _styledComponents.default.span`
+    flex: 1 1 auto;
+    font-size: 85%;
+    min-width: 0;
+`;
+const StyledListItemHeadTopRightElement = exports.StyledListItemHeadTopRightElement = _styledComponents.default.div`
+    flex: 0 0 auto;
+    font-size: 85%;
+    margin-left: 8px;
+    opacity: 0.75;
+`;
+const StyledListItemHeadBottomRightElement = exports.StyledListItemHeadBottomRightElement = _styledComponents.default.div`
+    flex: 0 0 auto;
+    margin-left: 8px;
+    font-size: 85%;
+`;
+const StyledListItemHeadRightElement = exports.StyledListItemHeadRightElement = _styledComponents.default.div`
+    flex: 0 0 auto;
+    margin-left: 8px;
+`;
+const StyledMotionListItemHeadHoverItem = exports.StyledMotionListItemHeadHoverItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    overflow: hidden;
+`;
+//# sourceMappingURL=ListItemHead.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledListItemHead","exports","styled","div","_ref","theme","text","_ref2","isClickable","css","StyledMotionListItemHeadIndicator","motion","StyledListItemHeadContent","_ref3","isOpen","_ref4","isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    isClickable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ isClickable }) =>\n        isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n    isIconOrImageGiven: boolean;\n    isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ isOpen }) => (isOpen ? 'bold' : 'normal')};\n    justify-content: center;\n    line-height: normal;\n    margin-left: ${({ isIconOrImageGiven }) => (isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n"],"mappings":"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"}

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ListItemIconProps = {
+    icons: string[];
+};
+declare const ListItemIcon: React.FC<ListItemIconProps>;
+export default ListItemIcon;

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../../../icon/Icon"));
+var _ListItemIcon = require("./ListItemIcon.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ListItemIcon = _ref => {
+  let {
+    icons
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_ListItemIcon.StyledListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: icons,
+    size: 22
+  }));
+};
+ListItemIcon.displayName = 'ListItemIcon';
+var _default = exports.default = ListItemIcon;
+//# sourceMappingURL=ListItemIcon.js.map

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemIcon.js","names":["_react","_interopRequireDefault","require","_Icon","_ListItemIcon","obj","__esModule","default","ListItemIcon","_ref","icons","createElement","StyledListItemIcon","size","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Icon from '../../../../icon/Icon';\nimport { StyledListItemIcon } from './ListItemIcon.styles';\n\ntype ListItemIconProps = {\n    icons: string[];\n};\n\nconst ListItemIcon: React.FC<ListItemIconProps> = ({ icons }) => (\n    <StyledListItemIcon>\n        <Icon icons={icons} size={22} />\n    </StyledListItemIcon>\n);\n\nListItemIcon.displayName = 'ListItemIcon';\n\nexport default ListItemIcon;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAA2D,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAM3D,MAAMG,YAAyC,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,oBACxDT,MAAA,CAAAO,OAAA,CAAAI,aAAA,CAACP,aAAA,CAAAQ,kBAAkB,qBACfZ,MAAA,CAAAO,OAAA,CAAAI,aAAA,CAACR,KAAA,CAAAI,OAAI;IAACG,KAAK,EAAEA,KAAM;IAACG,IAAI,EAAE;EAAG,CAAE,CACf,CAAC;AAAA,CACxB;AAEDL,YAAY,CAACM,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAE3BC,YAAY"}

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledListItemIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledListItemIcon = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledListItemIcon = exports.StyledListItemIcon = _styledComponents.default.div`
+    align-items: center;
+    background-color: rgba(${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['text-rgb'];
+}}, 0.1);
+    box-shadow: 0 0 0 1px rgba(${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['009-rgb'];
+}}, 0.08)
+        inset;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    margin-right: 10px;
+    width: 40px;
+`;
+//# sourceMappingURL=ListItemIcon.styles.js.map

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemIcon.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledListItemIcon","exports","styled","div","_ref","theme","_ref2"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<unknown>;\n\nexport const StyledListItemIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08)\n        inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC7C;AACA,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACvF,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAA+B,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ListItemImageProps = {
+    images: string[];
+    shouldShowRoundImage: boolean;
+};
+declare const ListItemImage: React.FC<ListItemImageProps>;
+export default ListItemImage;

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GridImage = _interopRequireDefault(require("../../../../grid-image/GridImage"));
+var _ListItemImage = require("./ListItemImage.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ListItemImage = _ref => {
+  let {
+    images,
+    shouldShowRoundImage
+  } = _ref;
+  const [hasLoadedImage, setHasLoadedImage] = (0, _react.useState)(false);
+  const handleImageLoaded = (0, _react.useCallback)(() => {
+    setHasLoadedImage(true);
+  }, []);
+  if (images && images[0] && images[1] && images[2]) {
+    const gridImages = [images[0], images[1], images[2]];
+    return /*#__PURE__*/_react.default.createElement(_GridImage.default, {
+      images: gridImages,
+      shouldShowRoundImage: shouldShowRoundImage,
+      size: 40
+    });
+  }
+  if (images && images[0]) {
+    return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImageWrapper, {
+      shouldShowRoundImage: shouldShowRoundImage
+    }, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImage, {
+      isHidden: !hasLoadedImage,
+      onLoad: handleImageLoaded,
+      src: images[0]
+    }));
+  }
+  return null;
+};
+ListItemImage.displayName = 'ListItemImage';
+var _default = exports.default = ListItemImage;
+//# sourceMappingURL=ListItemImage.js.map

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_interopRequireDefault","_ListItemImage","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ListItemImage","_ref","images","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","gridImages","createElement","size","StyledListItemHeadImageWrapper","StyledListItemHeadImage","isHidden","onLoad","src","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    images: string[];\n    shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({ images, shouldShowRoundImage }) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage images={gridImages} shouldShowRoundImage={shouldShowRoundImage} size={40} />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper shouldShowRoundImage={shouldShowRoundImage}>\n                <StyledListItemHeadImage\n                    isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAAiG,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAOjG,MAAMY,aAA2C,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EACjF,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACxCH,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IAC/C,MAAMO,UAAU,GAAG,CAACP,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpD,oBACI9B,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAACnC,UAAA,CAAAK,OAAS;MAACsB,MAAM,EAAEO,UAAW;MAACN,oBAAoB,EAAEA,oBAAqB;MAACQ,IAAI,EAAE;IAAG,CAAE,CAAC;EAE/F;EAEA,IAAIT,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,oBACI9B,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAACjC,cAAA,CAAAmC,8BAA8B;MAACT,oBAAoB,EAAEA;IAAqB,gBACvE/B,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAACjC,cAAA,CAAAoC,uBAAuB;MACpBC,QAAQ,EAAE,CAACV,cAAe;MAC1BW,MAAM,EAAER,iBAAkB;MAC1BS,GAAG,EAAEd,MAAM,CAAC,CAAC;IAAE,CAClB,CAC2B,CAAC;EAEzC;EAEA,OAAO,IAAI;AACf,CAAC;AAEDF,aAAa,CAACiB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAE7BoB,aAAa"}

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';
+type StyledListItemHeadImageWrapperProps = WithTheme<{
+    shouldShowRoundImage?: boolean;
+}>;
+export declare const StyledListItemHeadImageWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledListItemHeadImageWrapperProps>>;
+type StyledListItemHeadImageProps = {
+    isHidden: boolean;
+};
+export declare const StyledListItemHeadImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledListItemHeadImageProps>>;
+export {};

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledListItemHeadImageWrapper = exports.StyledListItemHeadImageWrapper = _styledComponents.default.div`
+    background-color: rgba(
+        ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['text-rgb'];
+}},
+        0.1
+    );
+    border-radius: ${_ref2 => {
+  let {
+    shouldShowRoundImage
+  } = _ref2;
+  return shouldShowRoundImage ? '50%' : undefined;
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    transition: border-radius 0.3s ease;
+    width: 40px;
+`;
+const StyledListItemHeadImage = exports.StyledListItemHeadImage = _styledComponents.default.img`
+    height: 100%;
+    object-fit: cover;
+    opacity: ${_ref4 => {
+  let {
+    isHidden
+  } = _ref4;
+  return isHidden ? 0 : 1;
+}};
+    transition: opacity 0.4s ease;
+    width: 100%;
+`;
+//# sourceMappingURL=ListItemImage.styles.js.map

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledListItemHeadImageWrapper","exports","styled","div","_ref","theme","_ref2","shouldShowRoundImage","undefined","_ref3","StyledListItemHeadImage","img","_ref4","isHidden"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    background-color: rgba(\n        ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOhC,MAAMG,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAyC;AAC9F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAChF;AACA;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAA2C,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMK,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAkC;AAChF;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAMC,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA,CAAC"}

package/lib/components/mention-finder/MentionFinder.d.ts

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import type { MentionFinderPopupAlignment } from './constants/alignment';
+export type MentionMember = {
+    id: string;
+    info: string;
+    imageUrl: string;
+    name: string;
+};
+export type MentionFinderProps = {
+    /**
+     * The text from the input field
+     */
+    inputValue: string;
+    /**
+     * Members that can be selected
+     */
+    members: MentionMember[];
+    /**
+     * Function to be executed when a member is selected
+     */
+    onSelect: ({ fullMatch, member }: {
+        fullMatch: string;
+        member: MentionMember;
+    }) => void;
+    /**
+     * Alignment of the popup
+     */
+    popupAlignment: MentionFinderPopupAlignment;
+};
+declare const MentionFinder: FC<MentionFinderProps>;
+export default MentionFinder;

package/lib/components/mention-finder/MentionFinder.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _MentionFinderItem = _interopRequireDefault(require("./mention-finder-item/MentionFinderItem"));
+var _MentionFinder = require("./MentionFinder.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const MentionFinder = _ref => {
+  let {
+    inputValue,
+    members,
+    onSelect,
+    popupAlignment
+  } = _ref;
+  const [activeMember, setActiveMember] = (0, _react.useState)(members[0]);
+  const [fullMatch, searchString] = (0, _react.useMemo)(() => {
+    // eslint-disable-next-line no-irregular-whitespace
+    const regExpMatchArray = inputValue.match(/@([^\s​]*)/);
+    return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];
+  }, [inputValue]);
+  const filteredMembers = (0, _react.useMemo)(() => searchString !== '' ? members.filter(_ref2 => {
+    let {
+      id,
+      info,
+      name
+    } = _ref2;
+    return id.toLowerCase().includes(searchString) || info.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString);
+  }) : members, [members, searchString]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    let shouldPreventDefault = false;
+    if (event.key === 'ArrowUp') {
+      const currentIndex = filteredMembers.findIndex(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id === activeMember?.id;
+      });
+      const prevIndex = Math.max(currentIndex - 1, 0);
+      const member = filteredMembers[prevIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'ArrowDown') {
+      const currentIndex = filteredMembers.findIndex(_ref4 => {
+        let {
+          id
+        } = _ref4;
+        return id === activeMember?.id;
+      });
+      const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);
+      const member = filteredMembers[nextIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'Enter') {
+      if (fullMatch && activeMember) {
+        onSelect({
+          fullMatch,
+          member: activeMember
+        });
+        shouldPreventDefault = true;
+      }
+    }
+    if (shouldPreventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [activeMember, filteredMembers, fullMatch, onSelect]);
+  const handleMemberClick = (0, _react.useCallback)(member => {
+    if (fullMatch) {
+      onSelect({
+        fullMatch,
+        member
+      });
+    }
+  }, [fullMatch, onSelect]);
+  const handleMemberHover = (0, _react.useCallback)(member => {
+    setActiveMember(member);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (filteredMembers.length > 0) {
+      const isActiveMemberShown = filteredMembers.some(_ref5 => {
+        let {
+          id
+        } = _ref5;
+        return id === activeMember?.id;
+      });
+      if (!isActiveMemberShown) {
+        setActiveMember(filteredMembers[0]);
+      }
+    }
+  }, [activeMember?.id, filteredMembers]);
+  const items = (0, _react.useMemo)(() => filteredMembers.map(member => /*#__PURE__*/_react.default.createElement(_MentionFinderItem.default, {
+    isActive: member.id === activeMember?.id,
+    key: member.id,
+    member: member,
+    onClick: handleMemberClick,
+    onHover: handleMemberHover
+  })), [activeMember, filteredMembers, handleMemberClick, handleMemberHover]);
+  const shouldShowPopup = (0, _react.useMemo)(() => fullMatch && items.length > 0, [fullMatch, items.length]);
+  (0, _react.useEffect)(() => {
+    if (shouldShowPopup) {
+      window.addEventListener('keydown', handleKeyDown, true);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [handleKeyDown, shouldShowPopup]);
+  return /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMentionFinder, {
+    className: "beta-chayns-mention-finder"
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMotionMentionFinderPopup, {
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
+    className: "prevent-lose-focus",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    popupAlignment: popupAlignment,
+    transition: {
+      duration: 0.15
+    }
+  }, items)));
+};
+MentionFinder.displayName = 'MentionFinder';
+var _default = exports.default = MentionFinder;
+//# sourceMappingURL=MentionFinder.js.map

package/lib/components/mention-finder/MentionFinder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_MentionFinderItem","_interopRequireDefault","_MentionFinder","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","useState","fullMatch","searchString","useMemo","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","replace","handleKeyDown","useCallback","event","shouldPreventDefault","key","currentIndex","findIndex","_ref3","prevIndex","Math","max","member","_ref4","nextIndex","min","length","preventDefault","stopPropagation","handleMemberClick","handleMemberHover","useEffect","isActiveMemberShown","some","_ref5","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","StyledMentionFinder","className","AnimatePresence","initial","StyledMotionMentionFinderPopup","animate","height","opacity","exit","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from './constants/alignment';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info: string;\n    imageUrl: string;\n    name: string;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        // eslint-disable-next-line no-irregular-whitespace\n        const regExpMatchArray = inputValue.match(/@([^\\s​]*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info.replace('chayns', '').toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString)\n                  )\n                : members,\n        [members, searchString]\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            let shouldPreventDefault = false;\n\n            if (event.key === 'ArrowUp') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const prevIndex = Math.max(currentIndex - 1, 0);\n\n                const member = filteredMembers[prevIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'ArrowDown') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);\n\n                const member = filteredMembers[nextIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'Enter') {\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n\n                    shouldPreventDefault = true;\n                }\n            }\n\n            if (shouldPreventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n        },\n        [activeMember, filteredMembers, fullMatch, onSelect]\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect]\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover]\n    );\n\n    const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            window.addEventListener('keydown', handleKeyDown, true);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown, true);\n        };\n    }, [handleKeyDown, shouldShowPopup]);\n\n    return (\n        <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionMentionFinderPopup\n                        animate={{ height: 'auto', opacity: 1 }}\n                        className=\"prevent-lose-focus\"\n                        exit={{ height: 0, opacity: 0 }}\n                        initial={{ height: 0, opacity: 0 }}\n                        popupAlignment={popupAlignment}\n                        transition={{ duration: 0.15 }}\n                    >\n                        {items}\n                    </StyledMotionMentionFinderPopup>\n                )}\n            </AnimatePresence>\n        </StyledMentionFinder>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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"}