@chayns-components/core 5.0.0-beta.362 → 5.0.0-beta.363

package/lib/components/truncation/Truncation.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _truncation = require("../../utils/truncation");
 var _Truncation = require("./Truncation.styles");
 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; }
@@ -19,7 +20,11 @@ const Truncation = _ref => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [showClamp, setShowClamp] = (0, _react.useState)(true);
   const [newCollapsedHeight, setNewCollapsedHeight] = (0, _react.useState)(collapsedHeight);
+  const [originalHeight, setOriginalHeight] = (0, _react.useState)(0);
+  const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = (0, _react.useState)(true);
   const pseudoChildrenRef = (0, _react.useRef)(null);
+  const childrenRef = (0, _react.useRef)(null);
+  const originalChildrenRef = (0, _react.useRef)(null);
 
   // Changes the state of the truncation
   const handleClampClick = (0, _react.useCallback)(event => {
@@ -30,63 +35,64 @@ const Truncation = _ref => {
       return !current;
     });
   }, [onChange]);
+  const handleAnimationEnd = (0, _react.useCallback)(() => {
+    if (!isOpen) {
+      setShouldShowCollapsedElement(true);
+    } else {
+      setShouldShowCollapsedElement(false);
+    }
+  }, [isOpen]);
   (0, _react.useEffect)(() => {
     if (!pseudoChildrenRef.current) {
       return;
     }
-    let summedHeight = 0;
-    const elementChildren = pseudoChildrenRef.current.children;
-    if (!elementChildren[0]) {
-      return;
-    }
-    const element = Array.from(elementChildren[0].children);
-    const heights = element.map((child, index) => {
-      const computedStyle = window.getComputedStyle(child);
-      const marginTop = parseFloat(computedStyle.marginTop);
-      const marginBottom = parseFloat(computedStyle.marginBottom);
-
-      // Höhe des Elements inklusive Margin berechnen
-      const totalHeight = child.clientHeight + marginTop + marginBottom;
-      return {
-        index,
-        height: totalHeight
-      };
-    });
-    let isSummedHeightCalculated = false;
-    heights.forEach(_ref2 => {
-      let {
-        height
-      } = _ref2;
-      if (summedHeight + height <= collapsedHeight && !isSummedHeightCalculated) {
-        summedHeight += height;
-        return;
-      }
-      isSummedHeightCalculated = true;
-    });
-    setNewCollapsedHeight(summedHeight > 0 ? summedHeight : collapsedHeight);
+    setOriginalHeight(pseudoChildrenRef.current.offsetHeight);
+    (0, _truncation.truncateElement)(pseudoChildrenRef.current, collapsedHeight);
+    setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);
   }, [collapsedHeight, pseudoChildrenRef]);
 
   // Checks if the clamp should be shown
   (0, _react.useEffect)(() => {
     if (pseudoChildrenRef.current) {
-      setShowClamp(pseudoChildrenRef.current.offsetHeight > newCollapsedHeight);
+      setShowClamp(originalHeight > newCollapsedHeight);
+    }
+  }, [collapsedHeight, newCollapsedHeight, originalHeight]);
+  (0, _react.useEffect)(() => {
+    if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {
+      if (shouldShowCollapsedElement && !isOpen) {
+        while (childrenRef.current.firstChild) {
+          childrenRef.current.removeChild(childrenRef.current.firstChild);
+        }
+        childrenRef.current.appendChild(pseudoChildrenRef.current);
+        childrenRef.current.children[0].style.visibility = 'visible';
+      } else {
+        while (childrenRef.current.firstChild) {
+          childrenRef.current.removeChild(childrenRef.current.firstChild);
+        }
+        childrenRef.current.appendChild(originalChildrenRef.current);
+        childrenRef.current.children[0].style.visibility = 'visible';
+      }
     }
-  }, [collapsedHeight, newCollapsedHeight]);
+  }, [children, isOpen, shouldShowCollapsedElement]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncation, {
     className: "beta-chayns-truncation"
   }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationPseudoContent, {
     ref: pseudoChildrenRef
+  }, children), /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationPseudoContent, {
+    ref: originalChildrenRef
   }, children), /*#__PURE__*/_react.default.createElement(_Truncation.StyledMotionTruncationContent, {
     animate: {
-      height: isOpen ? 'auto' : newCollapsedHeight
+      height: isOpen ? originalHeight : newCollapsedHeight
     },
     initial: false,
     transition: {
       type: 'tween'
-    }
-  }, children), showClamp && /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClamp, {
+    },
+    onAnimationComplete: handleAnimationEnd,
+    ref: childrenRef
+  }), showClamp && /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClamp, {
     onClick: handleClampClick
-  }, isOpen ? lessLabel : moreLabel)), [children, handleClampClick, isOpen, lessLabel, moreLabel, newCollapsedHeight, showClamp]);
+  }, isOpen ? lessLabel : moreLabel)), [children, handleAnimationEnd, handleClampClick, isOpen, lessLabel, moreLabel, newCollapsedHeight, originalHeight, showClamp]);
 };
 var _default = exports.default = Truncation;
 //# sourceMappingURL=Truncation.js.map

package/lib/components/truncation/Truncation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_Truncation","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Truncation","_ref","collapsedHeight","moreLabel","lessLabel","onChange","children","isOpen","setIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","pseudoChildrenRef","useRef","handleClampClick","useCallback","event","current","useEffect","summedHeight","elementChildren","element","Array","from","heights","map","child","index","computedStyle","window","getComputedStyle","marginTop","parseFloat","marginBottom","totalHeight","clientHeight","height","isSummedHeightCalculated","forEach","_ref2","offsetHeight","useMemo","createElement","StyledTruncation","className","StyledTruncationPseudoContent","ref","StyledMotionTruncationContent","animate","initial","transition","type","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        let summedHeight = 0;\n\n        const elementChildren = pseudoChildrenRef.current.children;\n\n        if (!elementChildren[0]) {\n            return;\n        }\n\n        const element = Array.from(elementChildren[0].children);\n\n        const heights = element.map((child, index) => {\n            const computedStyle = window.getComputedStyle(child);\n            const marginTop = parseFloat(computedStyle.marginTop);\n            const marginBottom = parseFloat(computedStyle.marginBottom);\n\n            // Höhe des Elements inklusive Margin berechnen\n            const totalHeight = child.clientHeight + marginTop + marginBottom;\n\n            return {\n                index,\n                height: totalHeight,\n            };\n        });\n\n        let isSummedHeightCalculated = false;\n\n        heights.forEach(({ height }) => {\n            if (summedHeight + height <= collapsedHeight && !isSummedHeightCalculated) {\n                summedHeight += height;\n\n                return;\n            }\n\n            isSummedHeightCalculated = true;\n        });\n\n        setNewCollapsedHeight(summedHeight > 0 ? summedHeight : collapsedHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current) {\n            setShowClamp(pseudoChildrenRef.current.offsetHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, newCollapsedHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\">\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: isOpen ? 'auto' : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                >\n                    {children}\n                </StyledMotionTruncationContent>\n                {showClamp && (\n                    <StyledTruncationClamp onClick={handleClampClick}>\n                        {isOpen ? lessLabel : moreLabel}\n                    </StyledTruncationClamp>\n                )}\n            </StyledTruncation>\n        ),\n        [children, handleClampClick, isOpen, lessLabel, moreLabel, newCollapsedHeight, showClamp],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}
+{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_Truncation","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Truncation","_ref","collapsedHeight","moreLabel","lessLabel","onChange","children","isOpen","setIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","pseudoChildrenRef","useRef","childrenRef","originalChildrenRef","handleClampClick","useCallback","event","current","handleAnimationEnd","useEffect","offsetHeight","truncateElement","firstChild","removeChild","appendChild","style","visibility","useMemo","createElement","StyledTruncation","className","StyledTruncationPseudoContent","ref","StyledMotionTruncationContent","animate","height","initial","transition","type","onAnimationComplete","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        if (!isOpen) {\n            setShouldShowCollapsedElement(true);\n        } else {\n            setShouldShowCollapsedElement(false);\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            if (shouldShowCollapsedElement && !isOpen) {\n                while (childrenRef.current.firstChild) {\n                    childrenRef.current.removeChild(childrenRef.current.firstChild);\n                }\n\n                childrenRef.current.appendChild(pseudoChildrenRef.current);\n\n                (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n            } else {\n                while (childrenRef.current.firstChild) {\n                    childrenRef.current.removeChild(childrenRef.current.firstChild);\n                }\n\n                childrenRef.current.appendChild(originalChildrenRef.current);\n\n                (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n            }\n        }\n    }, [children, isOpen, shouldShowCollapsedElement]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\">\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: isOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                    onAnimationComplete={handleAnimationEnd}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClamp onClick={handleClampClick}>\n                        {isOpen ? lessLabel : moreLabel}\n                    </StyledTruncationClamp>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            handleAnimationEnd,\n            handleClampClick,\n            isOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}

package/lib/utils/truncation.d.ts

@@ -0,0 +1 @@
+export declare const truncateElement: (element: HTMLElement, referenceHeight: number) => void;

package/lib/utils/truncation.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.truncateElement = void 0;
+const doesElementOverflow = (element, referenceHeight) => element.scrollHeight > referenceHeight;
+const doesElementHasOnlyText = element => {
+  // Check if element has no child elements.
+  if (element.children.length === 0) {
+    // If element has text (not empty), it is only text.
+    return element.textContent !== '';
+  }
+  // Element has child elements or no text, so it's not only text.
+  return false;
+};
+const removeLastLeafElement = element => {
+  // remove last element of html element where the last element is a leaf element and its content is a string
+  const lastChild = element.lastElementChild;
+  if (lastChild && !doesElementHasOnlyText(lastChild) && lastChild.hasChildNodes()) {
+    removeLastLeafElement(lastChild);
+  } else if (lastChild && doesElementHasOnlyText(lastChild) && lastChild.textContent && lastChild.textContent.length > 25) {
+    lastChild.textContent = `${lastChild.textContent.substring(0, lastChild.textContent.length - 25)} ...`;
+  } else if (lastChild) {
+    element.removeChild(lastChild);
+  }
+};
+const truncateElement = (element, referenceHeight) => {
+  while (doesElementOverflow(element, referenceHeight)) {
+    removeLastLeafElement(element);
+  }
+};
+exports.truncateElement = truncateElement;
+//# sourceMappingURL=truncation.js.map

package/lib/utils/truncation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncation.js","names":["doesElementOverflow","element","referenceHeight","scrollHeight","doesElementHasOnlyText","children","length","textContent","removeLastLeafElement","lastChild","lastElementChild","hasChildNodes","substring","removeChild","truncateElement","exports"],"sources":["../../src/utils/truncation.ts"],"sourcesContent":["const doesElementOverflow = (element: HTMLElement, referenceHeight: number): boolean =>\n    element.scrollHeight > referenceHeight;\n\nconst doesElementHasOnlyText = (element: HTMLElement): boolean => {\n    // Check if element has no child elements.\n    if (element.children.length === 0) {\n        // If element has text (not empty), it is only text.\n        return element.textContent !== '';\n    }\n    // Element has child elements or no text, so it's not only text.\n    return false;\n};\n\nconst removeLastLeafElement = (element: HTMLElement) => {\n    // remove last element of html element where the last element is a leaf element and its content is a string\n    const lastChild: Element | null = element.lastElementChild;\n    if (\n        lastChild &&\n        !doesElementHasOnlyText(lastChild as HTMLElement) &&\n        lastChild.hasChildNodes()\n    ) {\n        removeLastLeafElement(lastChild as HTMLElement);\n    } else if (\n        lastChild &&\n        doesElementHasOnlyText(lastChild as HTMLElement) &&\n        lastChild.textContent &&\n        lastChild.textContent.length > 25\n    ) {\n        lastChild.textContent = `${lastChild.textContent.substring(\n            0,\n            lastChild.textContent.length - 25,\n        )} ...`;\n    } else if (lastChild) {\n        element.removeChild(lastChild);\n    }\n};\nexport const truncateElement = (element: HTMLElement, referenceHeight: number) => {\n    while (doesElementOverflow(element, referenceHeight)) {\n        removeLastLeafElement(element);\n    }\n};\n"],"mappings":";;;;;;AAAA,MAAMA,mBAAmB,GAAGA,CAACC,OAAoB,EAAEC,eAAuB,KACtED,OAAO,CAACE,YAAY,GAAGD,eAAe;AAE1C,MAAME,sBAAsB,GAAIH,OAAoB,IAAc;EAC9D;EACA,IAAIA,OAAO,CAACI,QAAQ,CAACC,MAAM,KAAK,CAAC,EAAE;IAC/B;IACA,OAAOL,OAAO,CAACM,WAAW,KAAK,EAAE;EACrC;EACA;EACA,OAAO,KAAK;AAChB,CAAC;AAED,MAAMC,qBAAqB,GAAIP,OAAoB,IAAK;EACpD;EACA,MAAMQ,SAAyB,GAAGR,OAAO,CAACS,gBAAgB;EAC1D,IACID,SAAS,IACT,CAACL,sBAAsB,CAACK,SAAwB,CAAC,IACjDA,SAAS,CAACE,aAAa,CAAC,CAAC,EAC3B;IACEH,qBAAqB,CAACC,SAAwB,CAAC;EACnD,CAAC,MAAM,IACHA,SAAS,IACTL,sBAAsB,CAACK,SAAwB,CAAC,IAChDA,SAAS,CAACF,WAAW,IACrBE,SAAS,CAACF,WAAW,CAACD,MAAM,GAAG,EAAE,EACnC;IACEG,SAAS,CAACF,WAAW,GAAI,GAAEE,SAAS,CAACF,WAAW,CAACK,SAAS,CACtD,CAAC,EACDH,SAAS,CAACF,WAAW,CAACD,MAAM,GAAG,EACnC,CAAE,MAAK;EACX,CAAC,MAAM,IAAIG,SAAS,EAAE;IAClBR,OAAO,CAACY,WAAW,CAACJ,SAAS,CAAC;EAClC;AACJ,CAAC;AACM,MAAMK,eAAe,GAAGA,CAACb,OAAoB,EAAEC,eAAuB,KAAK;EAC9E,OAAOF,mBAAmB,CAACC,OAAO,EAAEC,eAAe,CAAC,EAAE;IAClDM,qBAAqB,CAACP,OAAO,CAAC;EAClC;AACJ,CAAC;AAACc,OAAA,CAAAD,eAAA,GAAAA,eAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.362",
+    "version": "5.0.0-beta.363",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "62bb4ee52839e065d0ce342a80648b56e371bfe0"
+    "gitHead": "c50d2de2bcafd9742450849f4dc09e5e26ab0925"
 }