@vibe/core 3.27.1 → 3.28.0-alpha-df61a.0

package/dist/components/EditableText/EditableText.d.ts

@@ -8,12 +8,18 @@ export interface EditableTextProps extends VibeComponentProps, EditableTypograph
      * Sets the Text type
      * */
     type?: TextType;
-    /** Sets the Text weight
+    /**
+     * Sets the Text weight
      */
     weight?: TextWeight;
-    /** Enables editing multiple lines of text
+    /**
+     * Enables editing multiple lines of text
      */
     multiline?: boolean;
+    /**
+     * Maximum number of rows for multiline text
+     */
+    multilineMaxRows?: number;
 }
 declare const _default: ((VibeComponent<EditableTextProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{
     types: typeof TextTypeEnum;

package/dist/components/EditableTypography/EditableTypography.d.ts

@@ -39,6 +39,8 @@ export interface EditableTypographyProps extends VibeComponentProps, EditableTyp
     weight?: TextWeight | HeadingWeight;
     /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */
     multiline?: boolean;
+    /** Maximum number of rows for multiline text */
+    multilineMaxRows?: number;
 }
 declare const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement>;
 export default EditableTypography;

package/dist/mocked_classnames/components/EditableText/EditableText.d.ts

@@ -8,12 +8,18 @@ export interface EditableTextProps extends VibeComponentProps, EditableTypograph
      * Sets the Text type
      * */
     type?: TextType;
-    /** Sets the Text weight
+    /**
+     * Sets the Text weight
      */
     weight?: TextWeight;
-    /** Enables editing multiple lines of text
+    /**
+     * Enables editing multiple lines of text
      */
     multiline?: boolean;
+    /**
+     * Maximum number of rows for multiline text
+     */
+    multilineMaxRows?: number;
 }
 declare const _default: ((VibeComponent<EditableTextProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{
     types: typeof TextTypeEnum;

package/dist/mocked_classnames/components/EditableTypography/EditableTypography.d.ts

@@ -39,6 +39,8 @@ export interface EditableTypographyProps extends VibeComponentProps, EditableTyp
     weight?: TextWeight | HeadingWeight;
     /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */
     multiline?: boolean;
+    /** Maximum number of rows for multiline text */
+    multilineMaxRows?: number;
 }
 declare const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement>;
 export default EditableTypography;

package/dist/mocked_classnames/src/components/DialogContentContainer/DialogContentContainer.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import{camelCase as s}from"lodash-es";import{getStyle as t}from"../../helpers/typesciptCssModulesHelper.js";import i from"classnames";import r,{forwardRef as a,useRef as o}from"react";import l from"../../hooks/useMergeRef.js";import{DialogType as d,DialogSize as m}from"../Dialog/DialogConstants.js";import{withStaticProps as p}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as n,ComponentDefaultTestId as c}from"../../tests/testIds.js";import y from"./DialogContentContainer.module.scss.js";var b=p(a((function(a,d){var m=a.className,p=void 0===m?"":m,b=a.ariaLabelledby,f=void 0===b?"":b,v=a.ariaDescribedby,j=void 0===v?"":v,u=a.type,C=void 0===u?"popover":u,g=a.size,N=void 0===g?"small":g,h=a.children,D=a.style,z=a["data-testid"],O=void 0===z?n(c.DIALOG_CONTENT_CONTAINER,a.id):z,_=e(a,["id","className","ariaLabelledby","ariaDescribedby","type","size","children","style","data-testid"]),E=o(null),I=l(d,E);return r.createElement("div",Object.assign({role:"dialog","data-testid":O,"aria-labelledby":f,"aria-describedby":j,ref:I,style:D,className:i(y.dialogContentContainer,p,t(y,s("type--"+C)),t(y,s("size--"+N)))},_),h)})),{types:d,sizes:m});export{b as default};
+import{camelCase as e}from"lodash-es";import{getStyle as s}from"../../helpers/typesciptCssModulesHelper.js";import o from"classnames";import t,{forwardRef as r,useRef as i}from"react";import a from"../../hooks/useMergeRef.js";import{DialogType as l,DialogSize as m}from"../Dialog/DialogConstants.js";import{withStaticProps as d}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as p,ComponentDefaultTestId as n}from"../../tests/testIds.js";import c from"./DialogContentContainer.module.scss.js";var f=d(r((function(r,l){var m=r.className,d=void 0===m?"":m,f=r.ariaLabelledby,v=void 0===f?"":f,y=r.ariaDescribedby,b=void 0===y?"":y,u=r.type,C=void 0===u?"popover":u,j=r.size,g=void 0===j?"small":j,N=r.children,h=r.style,D=r["data-testid"],z=void 0===D?p(n.DIALOG_CONTENT_CONTAINER,r.id):D,E=i(null),I=a(l,E);return t.createElement("div",{role:"dialog","data-testid":z,"aria-labelledby":v,"aria-describedby":b,ref:I,style:h,className:o(c.dialogContentContainer,d,s(c,e("type--"+C)),s(c,e("size--"+g)))},N)})),{types:l,sizes:m});export{f as default};
 //# sourceMappingURL=DialogContentContainer.js.map

package/dist/mocked_classnames/src/components/DialogContentContainer/DialogContentContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentContainer.js","sources":["../../../../../src/components/DialogContentContainer/DialogContentContainer.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { DialogSize as DialogSizeEnum, DialogType as DialogTypeEnum } from \"../Dialog/DialogConstants\";\nimport { DialogSize, DialogType } from \"../Dialog/Dialog.types\";\nimport { withStaticProps, VibeComponentProps, VibeComponent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./DialogContentContainer.module.scss\";\n\nexport interface DialogContentContainerProps extends VibeComponentProps {\n  children?: React.ReactNode;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  type?: DialogType;\n  size?: DialogSize;\n  style?: React.CSSProperties;\n}\n\nconst DialogContentContainer: VibeComponent<DialogContentContainerProps> & {\n  types?: typeof DialogTypeEnum;\n  sizes?: typeof DialogSizeEnum;\n} = forwardRef(\n  (\n    {\n      id,\n      className = \"\",\n      ariaLabelledby = \"\",\n      ariaDescribedby = \"\",\n      type = \"popover\",\n      size = \"small\",\n      children,\n      style,\n      \"data-testid\": dataTestId = getTestId(ComponentDefaultTestId.DIALOG_CONTENT_CONTAINER, id),\n      ...props\n    }: DialogContentContainerProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <div\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        ref={mergedRef}\n        style={style}\n        className={cx(\n          styles.dialogContentContainer,\n          className,\n          getStyle(styles, camelCase(\"type--\" + type)),\n          getStyle(styles, camelCase(\"size--\" + size))\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default withStaticProps(DialogContentContainer, {\n  types: DialogTypeEnum,\n  sizes: DialogSizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","_a$className","className","_a$ariaLabelledby","ariaLabelledby","_a$ariaDescribedby","ariaDescribedby","_a$type","type","_a$size","size","children","style","_a$dataTestid","dataTestId","getTestId","ComponentDefaultTestId","DIALOG_CONTENT_CONTAINER","id","props","__rest","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Object","assign","role","cx","styles","dialogContentContainer","getStyle","camelCase","types","DialogTypeEnum","sizes","DialogSizeEnum"],"mappings":"+kBAoBA,IA4CeA,EAAAA,EAzCXC,GACF,SACEC,EAYAC,GAZA,IACIC,EAQwFF,EAP1FG,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAO4EJ,EAN1FK,eAAAA,OAAiB,IAAHD,EAAG,GAAEA,EAAAE,EAMuEN,EAL1FO,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAKsER,EAJ1FS,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAI0EV,EAH1FW,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAE0FZ,EAF1FY,SACAC,EAC0Fb,EAD1Fa,MAAKC,EACqFd,EAA1F,eAAee,OAAaC,IAAHF,EAAGE,EAAUC,EAAuBC,yBAA6BlB,EAR1FmB,IAQ0FL,EACvFM,EAAKC,EAAArB,EAVV,sGAcMsB,EAAeC,EAAO,MACtBC,EAAYC,EAAYxB,EAAKqB,GAEnC,OACEI,EAAAC,cAAA,MAAAC,OAAAC,OAAA,CACEC,KAAK,SAAQ,cACAf,EAAU,kBACNV,EAAc,mBACbE,EAClBN,IAAKuB,EACLX,MAAOA,EACPV,UAAW4B,EACTC,EAAOC,uBACP9B,EACA+B,EAASF,EAAQG,EAAU,SAAW1B,IACtCyB,EAASF,EAAQG,EAAU,SAAWxB,MAEpCS,GAEHR,EAGP,IAGqD,CACrDwB,MAAOC,EACPC,MAAOC"}
+{"version":3,"file":"DialogContentContainer.js","sources":["../../../../../src/components/DialogContentContainer/DialogContentContainer.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { DialogSize as DialogSizeEnum, DialogType as DialogTypeEnum } from \"../Dialog/DialogConstants\";\nimport { DialogSize, DialogType } from \"../Dialog/Dialog.types\";\nimport { withStaticProps, VibeComponentProps, VibeComponent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./DialogContentContainer.module.scss\";\n\nexport interface DialogContentContainerProps extends VibeComponentProps {\n  children?: React.ReactNode;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  type?: DialogType;\n  size?: DialogSize;\n  style?: React.CSSProperties;\n}\n\nconst DialogContentContainer: VibeComponent<DialogContentContainerProps> & {\n  types?: typeof DialogTypeEnum;\n  sizes?: typeof DialogSizeEnum;\n} = forwardRef(\n  (\n    {\n      id,\n      className = \"\",\n      ariaLabelledby = \"\",\n      ariaDescribedby = \"\",\n      type = \"popover\",\n      size = \"small\",\n      children,\n      style,\n      \"data-testid\": dataTestId = getTestId(ComponentDefaultTestId.DIALOG_CONTENT_CONTAINER, id)\n    }: DialogContentContainerProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <div\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        ref={mergedRef}\n        style={style}\n        className={cx(\n          styles.dialogContentContainer,\n          className,\n          getStyle(styles, camelCase(\"type--\" + type)),\n          getStyle(styles, camelCase(\"size--\" + size))\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default withStaticProps(DialogContentContainer, {\n  types: DialogTypeEnum,\n  sizes: DialogSizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","_ref$className","className","_ref$ariaLabelledby","ariaLabelledby","_ref$ariaDescribedby","ariaDescribedby","_ref$type","type","_ref$size","size","children","style","_ref$dataTestid","dataTestId","getTestId","ComponentDefaultTestId","DIALOG_CONTENT_CONTAINER","id","componentRef","useRef","mergedRef","useMergeRef","React","createElement","role","cx","styles","dialogContentContainer","getStyle","camelCase","types","DialogTypeEnum","sizes","DialogSizeEnum"],"mappings":"0hBAoBA,IA0CeA,EAAAA,EAvCXC,GACF,SAAAC,EAYEC,GACE,IAXEC,EAAAF,EACFG,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAJ,EACdK,eAAAA,OAAiB,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACnBO,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EACpBS,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAAAV,EAChBW,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAQZ,EAARY,SACAC,EAAKb,EAALa,MAAKC,EAAAd,EACL,eAAee,OAAaC,IAAHF,EAAGE,EAAUC,EAAuBC,yBAR3DlB,EAAFmB,IAQ0FL,EAItFM,EAAeC,EAAO,MACtBC,EAAYC,EAAYtB,EAAKmB,GAEnC,OACEI,EACEC,cAAA,MAAA,CAAAC,KAAK,SACQ,cAAAX,EACI,kBAAAV,EACC,mBAAAE,EAClBN,IAAKqB,EACLT,MAAOA,EACPV,UAAWwB,EACTC,EAAOC,uBACP1B,EACA2B,EAASF,EAAQG,EAAU,SAAWtB,IACtCqB,EAASF,EAAQG,EAAU,SAAWpB,MAGvCC,EAGP,IAGqD,CACrDoB,MAAOC,EACPC,MAAOC"}

package/dist/mocked_classnames/src/components/EditableText/EditableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.js","sources":["../../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport React, { forwardRef } from \"react\";\nimport { VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./EditableText.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport EditableTypography, { EditableTypographyImplementationProps } from \"../EditableTypography/EditableTypography\";\nimport { TextType as TextTypeEnum, TextWeight as TextWeightEnum } from \"../Text/TextConstants\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport Text from \"../Text/Text\";\nimport cx from \"classnames\";\n\nexport interface EditableTextProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /**\n   * Sets the Text type\n   * */\n  type?: TextType;\n  /** Sets the Text weight\n   */\n  weight?: TextWeight;\n  /** Enables editing multiple lines of text\n   */\n  multiline?: boolean;\n}\n\nconst EditableText: VibeComponent<EditableTextProps, HTMLElement> & {\n  types?: typeof TextTypeEnum;\n  weights?: typeof TextWeightEnum;\n} = forwardRef(\n  (\n    {\n      type = \"text2\",\n      weight = \"normal\",\n      \"data-testid\": dataTestId,\n      id,\n      multiline,\n      ...editableTypographyProps\n    }: EditableTextProps,\n    ref\n  ) => {\n    return (\n      <EditableTypography\n        className={styles.editableText}\n        ref={ref}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_TEXT, id)}\n        component={Text}\n        typographyClassName={cx(getStyle(styles, camelCase(type + \"-\" + weight)), styles.typography)}\n        clearable\n        type={type}\n        weight={weight}\n        multiline={multiline}\n        {...editableTypographyProps}\n      />\n    );\n  }\n);\n\nexport default withStaticProps(EditableText, {\n  types: TextTypeEnum,\n  weights: TextWeightEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","type","_a$type","_a$weight","weight","dataTestId","id","multiline","editableTypographyProps","__rest","React","createElement","EditableTypography","Object","assign","className","styles","editableText","getTestId","ComponentDefaultTestId","EDITABLE_TEXT","component","Text","typographyClassName","cx","getStyle","camelCase","typography","clearable","types","TextTypeEnum","weights","TextWeightEnum"],"mappings":"mmBAyBA,IAgCeA,EAAAA,EA7BXC,GACF,SACEC,EAQAC,SAHWD,EAJTE,KAAAA,OAAO,IAAHC,EAAG,QAAOA,EAAAC,EAILJ,EAHTK,OAAAA,OAAS,IAAHD,EAAG,SAAQA,EACFE,EAENN,EAFT,eACAO,EACSP,EADTO,GACAC,EAASR,EAATQ,UACGC,EAAuBC,EAAAV,EAN5B,kDAUA,OACEW,EAAAC,cAACC,EAAkBC,OAAAC,OAAA,CACjBC,UAAWC,EAAOC,aAClBjB,IAAKA,gBACQK,GAAca,EAAUC,EAAuBC,cAAed,GAC3Ee,UAAWC,EACXC,oBAAqBC,EAAGC,EAAST,EAAQU,EAAUzB,EAAO,IAAMG,IAAUY,EAAOW,YACjFC,WAAS,EACT3B,KAAMA,EACNG,OAAQA,EACRG,UAAWA,GACPC,GAGV,IAG2C,CAC3CqB,MAAOC,EACPC,QAASC"}
+{"version":3,"file":"EditableText.js","sources":["../../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport React, { forwardRef } from \"react\";\nimport { VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./EditableText.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport EditableTypography, { EditableTypographyImplementationProps } from \"../EditableTypography/EditableTypography\";\nimport { TextType as TextTypeEnum, TextWeight as TextWeightEnum } from \"../Text/TextConstants\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport Text from \"../Text/Text\";\nimport cx from \"classnames\";\n\nexport interface EditableTextProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /**\n   * Sets the Text type\n   * */\n  type?: TextType;\n  /**\n   * Sets the Text weight\n   */\n  weight?: TextWeight;\n  /**\n   * Enables editing multiple lines of text\n   */\n  multiline?: boolean;\n  /**\n   * Maximum number of rows for multiline text\n   */\n  multilineMaxRows?: number;\n}\n\nconst EditableText: VibeComponent<EditableTextProps, HTMLElement> & {\n  types?: typeof TextTypeEnum;\n  weights?: typeof TextWeightEnum;\n} = forwardRef(\n  (\n    {\n      type = \"text2\",\n      weight = \"normal\",\n      \"data-testid\": dataTestId,\n      id,\n      multiline,\n      ...editableTypographyProps\n    }: EditableTextProps,\n    ref\n  ) => {\n    return (\n      <EditableTypography\n        className={styles.editableText}\n        ref={ref}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_TEXT, id)}\n        component={Text}\n        typographyClassName={cx(getStyle(styles, camelCase(type + \"-\" + weight)), styles.typography)}\n        clearable\n        type={type}\n        weight={weight}\n        multiline={multiline}\n        {...editableTypographyProps}\n      />\n    );\n  }\n);\n\nexport default withStaticProps(EditableText, {\n  types: TextTypeEnum,\n  weights: TextWeightEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","type","_a$type","_a$weight","weight","dataTestId","id","multiline","editableTypographyProps","__rest","React","createElement","EditableTypography","Object","assign","className","styles","editableText","getTestId","ComponentDefaultTestId","EDITABLE_TEXT","component","Text","typographyClassName","cx","getStyle","camelCase","typography","clearable","types","TextTypeEnum","weights","TextWeightEnum"],"mappings":"mmBA+BA,IAgCeA,EAAAA,EA7BXC,GACF,SACEC,EAQAC,SAHWD,EAJTE,KAAAA,OAAO,IAAHC,EAAG,QAAOA,EAAAC,EAILJ,EAHTK,OAAAA,OAAS,IAAHD,EAAG,SAAQA,EACFE,EAENN,EAFT,eACAO,EACSP,EADTO,GACAC,EAASR,EAATQ,UACGC,EAAuBC,EAAAV,EAN5B,kDAUA,OACEW,EAAAC,cAACC,EAAkBC,OAAAC,OAAA,CACjBC,UAAWC,EAAOC,aAClBjB,IAAKA,gBACQK,GAAca,EAAUC,EAAuBC,cAAed,GAC3Ee,UAAWC,EACXC,oBAAqBC,EAAGC,EAAST,EAAQU,EAAUzB,EAAO,IAAMG,IAAUY,EAAOW,YACjFC,WAAS,EACT3B,KAAMA,EACNG,OAAQA,EACRG,UAAWA,GACPC,GAGV,IAG2C,CAC3CqB,MAAOC,EACPC,QAASC"}

package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as n,useRef as l,useState as r,useEffect as a}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import d from"../../hooks/usePrevious/index.js";import f from"../../hooks/ssr/useIsomorphicLayoutEffect.js";var m=n((function(n,m){var v=n.id,h=n.className,y=n["data-testid"],g=n.value,b=n.onChange,E=n.onClick,P=n.readOnly,x=void 0!==P&&P,C=n.ariaLabel,k=void 0===C?"":C,j=n.placeholder,w=n.clearable,N=n.typographyClassName,D=n.component,B=n.isEditMode,K=n.autoSelectTextOnEditMode,T=n.onEditModeChange,M=n.tooltipProps,R=n.type,S=n.weight,A=n.multiline,H=void 0!==A&&A,I=l(null),L=u(m,I),O=r(B||!1),_=e(O,2),z=_[0],F=_[1],q=r(g),G=e(q,2),J=G[0],Q=G[1],U=d(g),V=l(null),W=l(null);function X(e){x||z||(e.preventDefault(),Y(!0))}function Y(e){null==T||T(e),F(e)}function Z(){(Y(!1),g!==J)&&(J||w&&j?(Q(J),null==b||b(J)):Q(g))}function $(){Z()}function ee(e){if(e.key===c.ENTER){if(H&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),Z()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),Y(!1),Q(g))}function te(e){Q(e.target.value)}a((function(){z||g===U||g===J||Q(g)}),[U,z,g,J]),a((function(){F(B)}),[B]);var oe=p(X);return a((function(){var e,t;z&&(!function(){var e,t;if(null===(t=null===(e=V.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),V.current){var o=V.current,n=o.value.length;o.setSelectionRange(n,n)}}(),K&&(null===(t=null===(e=V.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[K,z]),f((function(){var e;if(W.current){var t=W.current.getBoundingClientRect();if(null===(e=null==V?void 0:V.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px")),H){var o=null==V?void 0:V.current;null==o||o.style.setProperty("--input-height","auto"),null==o||o.style.setProperty("--input-height","".concat(o.scrollHeight+2,"px"))}}}),[J,z]),o.createElement("div",{ref:L,id:v,"aria-label":k,"data-testid":y,className:i(s.editableTypography,h),role:z?null:"button",onClick:function(e){null==E||E(e),X(e)},onKeyDown:oe},z&&(H?o.createElement("textarea",{ref:V,className:i(s.textarea,N),value:J,onChange:te,onKeyDown:ee,onBlur:$,"aria-label":k,placeholder:j,role:"textbox",rows:1}):o.createElement("input",{ref:V,className:i(s.input,N),value:J,onChange:te,onKeyDown:ee,onBlur:$,"aria-label":k,placeholder:j,role:"input"})),o.createElement(D,{ref:W,"aria-hidden":z,className:i(s.typography,N,t(t(t(t({},s.hidden,z),s.disabled,x),s.placeholder,!J&&j),s.multiline,!z&&H)),tabIndex:0,tooltipProps:M,weight:S,type:R,ellipsis:!H},J||j))}));export{m as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as n,useRef as l,useState as r,useEffect as a}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import d from"../../hooks/usePrevious/index.js";import f from"../../hooks/ssr/useIsomorphicLayoutEffect.js";var m=n((function(n,m){var h=n.id,v=n.className,y=n["data-testid"],g=n.value,b=n.onChange,E=n.onClick,x=n.readOnly,P=void 0!==x&&x,C=n.ariaLabel,k=void 0===C?"":C,w=n.placeholder,j=n.clearable,N=n.typographyClassName,D=n.component,M=n.isEditMode,B=n.autoSelectTextOnEditMode,K=n.onEditModeChange,R=n.tooltipProps,T=n.type,L=n.weight,S=n.multiline,A=void 0!==S&&S,H=n.multilineMaxRows,I=l(null),O=u(m,I),_=r(M||!1),z=e(_,2),F=z[0],q=z[1],G=r(g),J=e(G,2),Q=J[0],U=J[1],V=d(g),W=l(null),X=l(null);function Y(e){P||F||(e.preventDefault(),Z(!0))}function Z(e){null==K||K(e),q(e)}function $(){(Z(!1),g!==Q)&&(Q||j&&w?(U(Q),null==b||b(Q)):U(g))}function ee(){$()}function te(e){if(e.key===c.ENTER){if(A&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),$()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),Z(!1),U(g))}function oe(e){U(e.target.value)}a((function(){F||g===V||g===Q||U(g)}),[V,F,g,Q]),a((function(){q(M)}),[M]);var ne=p(Y);return a((function(){var e,t;F&&(!function(){var e,t;if(null===(t=null===(e=W.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),W.current){var o=W.current,n=o.value.length;o.setSelectionRange(n,n)}}(),B&&(null===(t=null===(e=W.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[B,F]),f((function(){var e;if(X.current){var t=X.current.getBoundingClientRect();if(null===(e=null==W?void 0:W.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px")),A&&!H){var o=null==W?void 0:W.current;null==o||o.style.setProperty("--input-height","auto"),null==o||o.style.setProperty("--input-height","".concat(o.scrollHeight+2,"px"))}}}),[Q,F]),o.createElement("div",{ref:O,id:h,"aria-label":k,"data-testid":y,className:i(s.editableTypography,v),role:F?null:"button",onClick:function(e){null==E||E(e),Y(e)},onKeyDown:ne},F&&(A?o.createElement("textarea",{ref:W,className:i(s.textarea,N),value:Q,onChange:oe,onKeyDown:te,onBlur:ee,"aria-label":k,placeholder:w,role:"textbox",rows:H?Math.min(Q.split("\n").length,H):1}):o.createElement("input",{ref:W,className:i(s.input,N),value:Q,onChange:oe,onKeyDown:te,onBlur:ee,"aria-label":k,placeholder:w,role:"input"})),o.createElement(D,{ref:X,"aria-hidden":F,className:i(s.typography,N,t(t(t(t({},s.hidden,F),s.disabled,P),s.placeholder,!Q&&w),s.multiline,!F&&A)),tabIndex:0,tooltipProps:R,weight:L,type:T,maxLines:H},Q||w))}));export{m as default};
 //# sourceMappingURL=EditableTypography.js.map

package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n}\n\nconst PADDING_OFFSET = 2;\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n\n      if (multiline) {\n        const textareaElement = inputRef?.current as HTMLTextAreaElement;\n        textareaElement?.style.setProperty(\"--input-height\", \"auto\");\n        textareaElement?.style.setProperty(\"--input-height\", `${textareaElement.scrollHeight + PADDING_OFFSET}px`);\n      }\n    }, [inputValue, isEditing]);\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"textbox\"\n              rows={1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          ellipsis={!multiline}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","_b","current","_a","focus","inputElement","textLength","length","setSelectionRange","select","useIsomorphicLayoutEffect","_typographyRef$curren","getBoundingClientRect","style","setProperty","concat","width","textareaElement","scrollHeight","React","createElement","cx","styles","editableTypography","role","onKeyDown","textarea","onBlur","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
+{"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n  /** Maximum number of rows for multiline text */\n  multilineMaxRows?: number;\n}\n\nconst PADDING_OFFSET = 2;\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false,\n      multilineMaxRows\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n\n      if (multiline && !multilineMaxRows) {\n        const textareaElement = inputRef?.current as HTMLTextAreaElement;\n        textareaElement?.style.setProperty(\"--input-height\", \"auto\");\n        textareaElement?.style.setProperty(\"--input-height\", `${textareaElement.scrollHeight + PADDING_OFFSET}px`);\n      }\n    }, [inputValue, isEditing]);\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"textbox\"\n              rows={multilineMaxRows ? Math.min(inputValue.split(\"\\n\").length, multilineMaxRows) : 1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          maxLines={multilineMaxRows}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","multilineMaxRows","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","_b","current","_a","focus","inputElement","textLength","length","setSelectionRange","select","useIsomorphicLayoutEffect","_typographyRef$curren","getBoundingClientRect","style","setProperty","concat","width","textareaElement","scrollHeight","React","createElement","cx","styles","editableTypography","role","onKeyDown","textarea","onBlur","rows","Math","min","split","input","typography","_defineProperty","hidden","disabled","tabIndex","maxLines"],"mappings":"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"}

package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.module.scss.js

@@ -1,2 +1,2 @@
-var e={editableTypography:"editableTypography",input:"input",textarea:"textarea",typography:"typography",disabled:"disabled",hidden:"hidden",placeholder:"placeholder",multiline:"multiline"};!function(e){const n="s_id-34ea4bd39075_3_27_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".editableTypography {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography .input,\n.editableTypography .textarea {\n  width: var(--input-width);\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography .input:focus, .editableTypography .input:active,\n.editableTypography .textarea:focus,\n.editableTypography .textarea:active {\n  outline: none;\n}\n.editableTypography .textarea {\n  resize: none;\n  overflow: hidden;\n  height: var(--input-height);\n}\n.editableTypography .typography {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography .typography:hover:not(.disabled) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography .typography.hidden {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography .typography.placeholder {\n  color: var(--secondary-text-color);\n}\n.editableTypography .typography.multiline {\n  white-space: pre-wrap;\n}");export{e as default};
+var e={editableTypography:"editableTypography",input:"input",textarea:"textarea",typography:"typography",disabled:"disabled",hidden:"hidden",placeholder:"placeholder",multiline:"multiline"};!function(e){const n="s_id-f317f7834cdd_3_27_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".editableTypography {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography .input,\n.editableTypography .textarea {\n  width: var(--input-width);\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography .input:focus, .editableTypography .input:active,\n.editableTypography .textarea:focus,\n.editableTypography .textarea:active {\n  outline: none;\n}\n.editableTypography .textarea {\n  resize: none;\n  overflow: auto;\n  height: var(--input-height);\n}\n.editableTypography .typography {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography .typography:hover:not(.disabled) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography .typography.hidden {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography .typography.placeholder {\n  color: var(--secondary-text-color);\n}\n.editableTypography .typography.multiline {\n  white-space: pre-wrap;\n}");export{e as default};
 //# sourceMappingURL=EditableTypography.module.scss.js.map

package/dist/src/components/DialogContentContainer/DialogContentContainer.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import{camelCase as s}from"lodash-es";import{getStyle as t}from"../../helpers/typesciptCssModulesHelper.js";import i from"classnames";import r,{forwardRef as a,useRef as o}from"react";import l from"../../hooks/useMergeRef.js";import{DialogType as d,DialogSize as m}from"../Dialog/DialogConstants.js";import{withStaticProps as p}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as n,ComponentDefaultTestId as c}from"../../tests/testIds.js";import y from"./DialogContentContainer.module.scss.js";var b=p(a((function(a,d){var m=a.className,p=void 0===m?"":m,b=a.ariaLabelledby,f=void 0===b?"":b,v=a.ariaDescribedby,j=void 0===v?"":v,u=a.type,C=void 0===u?"popover":u,g=a.size,N=void 0===g?"small":g,h=a.children,D=a.style,z=a["data-testid"],O=void 0===z?n(c.DIALOG_CONTENT_CONTAINER,a.id):z,_=e(a,["id","className","ariaLabelledby","ariaDescribedby","type","size","children","style","data-testid"]),E=o(null),I=l(d,E);return r.createElement("div",Object.assign({role:"dialog","data-testid":O,"aria-labelledby":f,"aria-describedby":j,ref:I,style:D,className:i(y.dialogContentContainer,p,t(y,s("type--"+C)),t(y,s("size--"+N)))},_),h)})),{types:d,sizes:m});export{b as default};
+import{camelCase as e}from"lodash-es";import{getStyle as s}from"../../helpers/typesciptCssModulesHelper.js";import o from"classnames";import t,{forwardRef as r,useRef as i}from"react";import a from"../../hooks/useMergeRef.js";import{DialogType as l,DialogSize as m}from"../Dialog/DialogConstants.js";import{withStaticProps as d}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as p,ComponentDefaultTestId as n}from"../../tests/testIds.js";import c from"./DialogContentContainer.module.scss.js";var f=d(r((function(r,l){var m=r.className,d=void 0===m?"":m,f=r.ariaLabelledby,v=void 0===f?"":f,y=r.ariaDescribedby,b=void 0===y?"":y,u=r.type,C=void 0===u?"popover":u,j=r.size,g=void 0===j?"small":j,N=r.children,h=r.style,D=r["data-testid"],z=void 0===D?p(n.DIALOG_CONTENT_CONTAINER,r.id):D,E=i(null),I=a(l,E);return t.createElement("div",{role:"dialog","data-testid":z,"aria-labelledby":v,"aria-describedby":b,ref:I,style:h,className:o(c.dialogContentContainer,d,s(c,e("type--"+C)),s(c,e("size--"+g)))},N)})),{types:l,sizes:m});export{f as default};
 //# sourceMappingURL=DialogContentContainer.js.map

package/dist/src/components/DialogContentContainer/DialogContentContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentContainer.js","sources":["../../../../src/components/DialogContentContainer/DialogContentContainer.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { DialogSize as DialogSizeEnum, DialogType as DialogTypeEnum } from \"../Dialog/DialogConstants\";\nimport { DialogSize, DialogType } from \"../Dialog/Dialog.types\";\nimport { withStaticProps, VibeComponentProps, VibeComponent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./DialogContentContainer.module.scss\";\n\nexport interface DialogContentContainerProps extends VibeComponentProps {\n  children?: React.ReactNode;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  type?: DialogType;\n  size?: DialogSize;\n  style?: React.CSSProperties;\n}\n\nconst DialogContentContainer: VibeComponent<DialogContentContainerProps> & {\n  types?: typeof DialogTypeEnum;\n  sizes?: typeof DialogSizeEnum;\n} = forwardRef(\n  (\n    {\n      id,\n      className = \"\",\n      ariaLabelledby = \"\",\n      ariaDescribedby = \"\",\n      type = \"popover\",\n      size = \"small\",\n      children,\n      style,\n      \"data-testid\": dataTestId = getTestId(ComponentDefaultTestId.DIALOG_CONTENT_CONTAINER, id),\n      ...props\n    }: DialogContentContainerProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <div\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        ref={mergedRef}\n        style={style}\n        className={cx(\n          styles.dialogContentContainer,\n          className,\n          getStyle(styles, camelCase(\"type--\" + type)),\n          getStyle(styles, camelCase(\"size--\" + size))\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default withStaticProps(DialogContentContainer, {\n  types: DialogTypeEnum,\n  sizes: DialogSizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","_a$className","className","_a$ariaLabelledby","ariaLabelledby","_a$ariaDescribedby","ariaDescribedby","_a$type","type","_a$size","size","children","style","_a$dataTestid","dataTestId","getTestId","ComponentDefaultTestId","DIALOG_CONTENT_CONTAINER","id","props","__rest","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Object","assign","role","cx","styles","dialogContentContainer","getStyle","camelCase","types","DialogTypeEnum","sizes","DialogSizeEnum"],"mappings":"+kBAoBA,IA4CeA,EAAAA,EAzCXC,GACF,SACEC,EAYAC,GAZA,IACIC,EAQwFF,EAP1FG,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAO4EJ,EAN1FK,eAAAA,OAAiB,IAAHD,EAAG,GAAEA,EAAAE,EAMuEN,EAL1FO,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAKsER,EAJ1FS,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAI0EV,EAH1FW,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAE0FZ,EAF1FY,SACAC,EAC0Fb,EAD1Fa,MAAKC,EACqFd,EAA1F,eAAee,OAAaC,IAAHF,EAAGE,EAAUC,EAAuBC,yBAA6BlB,EAR1FmB,IAQ0FL,EACvFM,EAAKC,EAAArB,EAVV,sGAcMsB,EAAeC,EAAO,MACtBC,EAAYC,EAAYxB,EAAKqB,GAEnC,OACEI,EAAAC,cAAA,MAAAC,OAAAC,OAAA,CACEC,KAAK,SAAQ,cACAf,EAAU,kBACNV,EAAc,mBACbE,EAClBN,IAAKuB,EACLX,MAAOA,EACPV,UAAW4B,EACTC,EAAOC,uBACP9B,EACA+B,EAASF,EAAQG,EAAU,SAAW1B,IACtCyB,EAASF,EAAQG,EAAU,SAAWxB,MAEpCS,GAEHR,EAGP,IAGqD,CACrDwB,MAAOC,EACPC,MAAOC"}
+{"version":3,"file":"DialogContentContainer.js","sources":["../../../../src/components/DialogContentContainer/DialogContentContainer.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { DialogSize as DialogSizeEnum, DialogType as DialogTypeEnum } from \"../Dialog/DialogConstants\";\nimport { DialogSize, DialogType } from \"../Dialog/Dialog.types\";\nimport { withStaticProps, VibeComponentProps, VibeComponent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./DialogContentContainer.module.scss\";\n\nexport interface DialogContentContainerProps extends VibeComponentProps {\n  children?: React.ReactNode;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  type?: DialogType;\n  size?: DialogSize;\n  style?: React.CSSProperties;\n}\n\nconst DialogContentContainer: VibeComponent<DialogContentContainerProps> & {\n  types?: typeof DialogTypeEnum;\n  sizes?: typeof DialogSizeEnum;\n} = forwardRef(\n  (\n    {\n      id,\n      className = \"\",\n      ariaLabelledby = \"\",\n      ariaDescribedby = \"\",\n      type = \"popover\",\n      size = \"small\",\n      children,\n      style,\n      \"data-testid\": dataTestId = getTestId(ComponentDefaultTestId.DIALOG_CONTENT_CONTAINER, id)\n    }: DialogContentContainerProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <div\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        ref={mergedRef}\n        style={style}\n        className={cx(\n          styles.dialogContentContainer,\n          className,\n          getStyle(styles, camelCase(\"type--\" + type)),\n          getStyle(styles, camelCase(\"size--\" + size))\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default withStaticProps(DialogContentContainer, {\n  types: DialogTypeEnum,\n  sizes: DialogSizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","_ref$className","className","_ref$ariaLabelledby","ariaLabelledby","_ref$ariaDescribedby","ariaDescribedby","_ref$type","type","_ref$size","size","children","style","_ref$dataTestid","dataTestId","getTestId","ComponentDefaultTestId","DIALOG_CONTENT_CONTAINER","id","componentRef","useRef","mergedRef","useMergeRef","React","createElement","role","cx","styles","dialogContentContainer","getStyle","camelCase","types","DialogTypeEnum","sizes","DialogSizeEnum"],"mappings":"0hBAoBA,IA0CeA,EAAAA,EAvCXC,GACF,SAAAC,EAYEC,GACE,IAXEC,EAAAF,EACFG,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAJ,EACdK,eAAAA,OAAiB,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACnBO,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EACpBS,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAAAV,EAChBW,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAQZ,EAARY,SACAC,EAAKb,EAALa,MAAKC,EAAAd,EACL,eAAee,OAAaC,IAAHF,EAAGE,EAAUC,EAAuBC,yBAR3DlB,EAAFmB,IAQ0FL,EAItFM,EAAeC,EAAO,MACtBC,EAAYC,EAAYtB,EAAKmB,GAEnC,OACEI,EACEC,cAAA,MAAA,CAAAC,KAAK,SACQ,cAAAX,EACI,kBAAAV,EACC,mBAAAE,EAClBN,IAAKqB,EACLT,MAAOA,EACPV,UAAWwB,EACTC,EAAOC,uBACP1B,EACA2B,EAASF,EAAQG,EAAU,SAAWtB,IACtCqB,EAASF,EAAQG,EAAU,SAAWpB,MAGvCC,EAGP,IAGqD,CACrDoB,MAAOC,EACPC,MAAOC"}

package/dist/src/components/EditableText/EditableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.js","sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport React, { forwardRef } from \"react\";\nimport { VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./EditableText.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport EditableTypography, { EditableTypographyImplementationProps } from \"../EditableTypography/EditableTypography\";\nimport { TextType as TextTypeEnum, TextWeight as TextWeightEnum } from \"../Text/TextConstants\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport Text from \"../Text/Text\";\nimport cx from \"classnames\";\n\nexport interface EditableTextProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /**\n   * Sets the Text type\n   * */\n  type?: TextType;\n  /** Sets the Text weight\n   */\n  weight?: TextWeight;\n  /** Enables editing multiple lines of text\n   */\n  multiline?: boolean;\n}\n\nconst EditableText: VibeComponent<EditableTextProps, HTMLElement> & {\n  types?: typeof TextTypeEnum;\n  weights?: typeof TextWeightEnum;\n} = forwardRef(\n  (\n    {\n      type = \"text2\",\n      weight = \"normal\",\n      \"data-testid\": dataTestId,\n      id,\n      multiline,\n      ...editableTypographyProps\n    }: EditableTextProps,\n    ref\n  ) => {\n    return (\n      <EditableTypography\n        className={styles.editableText}\n        ref={ref}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_TEXT, id)}\n        component={Text}\n        typographyClassName={cx(getStyle(styles, camelCase(type + \"-\" + weight)), styles.typography)}\n        clearable\n        type={type}\n        weight={weight}\n        multiline={multiline}\n        {...editableTypographyProps}\n      />\n    );\n  }\n);\n\nexport default withStaticProps(EditableText, {\n  types: TextTypeEnum,\n  weights: TextWeightEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","type","_a$type","_a$weight","weight","dataTestId","id","multiline","editableTypographyProps","__rest","React","createElement","EditableTypography","Object","assign","className","styles","editableText","getTestId","ComponentDefaultTestId","EDITABLE_TEXT","component","Text","typographyClassName","cx","getStyle","camelCase","typography","clearable","types","TextTypeEnum","weights","TextWeightEnum"],"mappings":"mmBAyBA,IAgCeA,EAAAA,EA7BXC,GACF,SACEC,EAQAC,SAHWD,EAJTE,KAAAA,OAAO,IAAHC,EAAG,QAAOA,EAAAC,EAILJ,EAHTK,OAAAA,OAAS,IAAHD,EAAG,SAAQA,EACFE,EAENN,EAFT,eACAO,EACSP,EADTO,GACAC,EAASR,EAATQ,UACGC,EAAuBC,EAAAV,EAN5B,kDAUA,OACEW,EAAAC,cAACC,EAAkBC,OAAAC,OAAA,CACjBC,UAAWC,EAAOC,aAClBjB,IAAKA,gBACQK,GAAca,EAAUC,EAAuBC,cAAed,GAC3Ee,UAAWC,EACXC,oBAAqBC,EAAGC,EAAST,EAAQU,EAAUzB,EAAO,IAAMG,IAAUY,EAAOW,YACjFC,WAAS,EACT3B,KAAMA,EACNG,OAAQA,EACRG,UAAWA,GACPC,GAGV,IAG2C,CAC3CqB,MAAOC,EACPC,QAASC"}
+{"version":3,"file":"EditableText.js","sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport React, { forwardRef } from \"react\";\nimport { VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./EditableText.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport EditableTypography, { EditableTypographyImplementationProps } from \"../EditableTypography/EditableTypography\";\nimport { TextType as TextTypeEnum, TextWeight as TextWeightEnum } from \"../Text/TextConstants\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport Text from \"../Text/Text\";\nimport cx from \"classnames\";\n\nexport interface EditableTextProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /**\n   * Sets the Text type\n   * */\n  type?: TextType;\n  /**\n   * Sets the Text weight\n   */\n  weight?: TextWeight;\n  /**\n   * Enables editing multiple lines of text\n   */\n  multiline?: boolean;\n  /**\n   * Maximum number of rows for multiline text\n   */\n  multilineMaxRows?: number;\n}\n\nconst EditableText: VibeComponent<EditableTextProps, HTMLElement> & {\n  types?: typeof TextTypeEnum;\n  weights?: typeof TextWeightEnum;\n} = forwardRef(\n  (\n    {\n      type = \"text2\",\n      weight = \"normal\",\n      \"data-testid\": dataTestId,\n      id,\n      multiline,\n      ...editableTypographyProps\n    }: EditableTextProps,\n    ref\n  ) => {\n    return (\n      <EditableTypography\n        className={styles.editableText}\n        ref={ref}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_TEXT, id)}\n        component={Text}\n        typographyClassName={cx(getStyle(styles, camelCase(type + \"-\" + weight)), styles.typography)}\n        clearable\n        type={type}\n        weight={weight}\n        multiline={multiline}\n        {...editableTypographyProps}\n      />\n    );\n  }\n);\n\nexport default withStaticProps(EditableText, {\n  types: TextTypeEnum,\n  weights: TextWeightEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","type","_a$type","_a$weight","weight","dataTestId","id","multiline","editableTypographyProps","__rest","React","createElement","EditableTypography","Object","assign","className","styles","editableText","getTestId","ComponentDefaultTestId","EDITABLE_TEXT","component","Text","typographyClassName","cx","getStyle","camelCase","typography","clearable","types","TextTypeEnum","weights","TextWeightEnum"],"mappings":"mmBA+BA,IAgCeA,EAAAA,EA7BXC,GACF,SACEC,EAQAC,SAHWD,EAJTE,KAAAA,OAAO,IAAHC,EAAG,QAAOA,EAAAC,EAILJ,EAHTK,OAAAA,OAAS,IAAHD,EAAG,SAAQA,EACFE,EAENN,EAFT,eACAO,EACSP,EADTO,GACAC,EAASR,EAATQ,UACGC,EAAuBC,EAAAV,EAN5B,kDAUA,OACEW,EAAAC,cAACC,EAAkBC,OAAAC,OAAA,CACjBC,UAAWC,EAAOC,aAClBjB,IAAKA,gBACQK,GAAca,EAAUC,EAAuBC,cAAed,GAC3Ee,UAAWC,EACXC,oBAAqBC,EAAGC,EAAST,EAAQU,EAAUzB,EAAO,IAAMG,IAAUY,EAAOW,YACjFC,WAAS,EACT3B,KAAMA,EACNG,OAAQA,EACRG,UAAWA,GACPC,GAGV,IAG2C,CAC3CqB,MAAOC,EACPC,QAASC"}

package/dist/src/components/EditableTypography/EditableTypography.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as n,useRef as l,useState as r,useEffect as a}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import d from"../../hooks/usePrevious/index.js";import f from"../../hooks/ssr/useIsomorphicLayoutEffect.js";var m=n((function(n,m){var v=n.id,h=n.className,y=n["data-testid"],g=n.value,b=n.onChange,E=n.onClick,P=n.readOnly,x=void 0!==P&&P,C=n.ariaLabel,k=void 0===C?"":C,j=n.placeholder,w=n.clearable,N=n.typographyClassName,D=n.component,B=n.isEditMode,K=n.autoSelectTextOnEditMode,T=n.onEditModeChange,M=n.tooltipProps,R=n.type,S=n.weight,A=n.multiline,H=void 0!==A&&A,I=l(null),L=u(m,I),O=r(B||!1),_=e(O,2),z=_[0],F=_[1],q=r(g),G=e(q,2),J=G[0],Q=G[1],U=d(g),V=l(null),W=l(null);function X(e){x||z||(e.preventDefault(),Y(!0))}function Y(e){null==T||T(e),F(e)}function Z(){(Y(!1),g!==J)&&(J||w&&j?(Q(J),null==b||b(J)):Q(g))}function $(){Z()}function ee(e){if(e.key===c.ENTER){if(H&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),Z()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),Y(!1),Q(g))}function te(e){Q(e.target.value)}a((function(){z||g===U||g===J||Q(g)}),[U,z,g,J]),a((function(){F(B)}),[B]);var oe=p(X);return a((function(){var e,t;z&&(!function(){var e,t;if(null===(t=null===(e=V.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),V.current){var o=V.current,n=o.value.length;o.setSelectionRange(n,n)}}(),K&&(null===(t=null===(e=V.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[K,z]),f((function(){var e;if(W.current){var t=W.current.getBoundingClientRect();if(null===(e=null==V?void 0:V.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px")),H){var o=null==V?void 0:V.current;null==o||o.style.setProperty("--input-height","auto"),null==o||o.style.setProperty("--input-height","".concat(o.scrollHeight+2,"px"))}}}),[J,z]),o.createElement("div",{ref:L,id:v,"aria-label":k,"data-testid":y,className:i(s.editableTypography,h),role:z?null:"button",onClick:function(e){null==E||E(e),X(e)},onKeyDown:oe},z&&(H?o.createElement("textarea",{ref:V,className:i(s.textarea,N),value:J,onChange:te,onKeyDown:ee,onBlur:$,"aria-label":k,placeholder:j,role:"textbox",rows:1}):o.createElement("input",{ref:V,className:i(s.input,N),value:J,onChange:te,onKeyDown:ee,onBlur:$,"aria-label":k,placeholder:j,role:"input"})),o.createElement(D,{ref:W,"aria-hidden":z,className:i(s.typography,N,t(t(t(t({},s.hidden,z),s.disabled,x),s.placeholder,!J&&j),s.multiline,!z&&H)),tabIndex:0,tooltipProps:M,weight:S,type:R,ellipsis:!H},J||j))}));export{m as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as n,useRef as l,useState as r,useEffect as a}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import d from"../../hooks/usePrevious/index.js";import f from"../../hooks/ssr/useIsomorphicLayoutEffect.js";var m=n((function(n,m){var h=n.id,v=n.className,y=n["data-testid"],g=n.value,b=n.onChange,E=n.onClick,x=n.readOnly,P=void 0!==x&&x,C=n.ariaLabel,k=void 0===C?"":C,w=n.placeholder,j=n.clearable,N=n.typographyClassName,D=n.component,M=n.isEditMode,B=n.autoSelectTextOnEditMode,K=n.onEditModeChange,R=n.tooltipProps,T=n.type,L=n.weight,S=n.multiline,A=void 0!==S&&S,H=n.multilineMaxRows,I=l(null),O=u(m,I),_=r(M||!1),z=e(_,2),F=z[0],q=z[1],G=r(g),J=e(G,2),Q=J[0],U=J[1],V=d(g),W=l(null),X=l(null);function Y(e){P||F||(e.preventDefault(),Z(!0))}function Z(e){null==K||K(e),q(e)}function $(){(Z(!1),g!==Q)&&(Q||j&&w?(U(Q),null==b||b(Q)):U(g))}function ee(){$()}function te(e){if(e.key===c.ENTER){if(A&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),$()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),Z(!1),U(g))}function oe(e){U(e.target.value)}a((function(){F||g===V||g===Q||U(g)}),[V,F,g,Q]),a((function(){q(M)}),[M]);var ne=p(Y);return a((function(){var e,t;F&&(!function(){var e,t;if(null===(t=null===(e=W.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),W.current){var o=W.current,n=o.value.length;o.setSelectionRange(n,n)}}(),B&&(null===(t=null===(e=W.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[B,F]),f((function(){var e;if(X.current){var t=X.current.getBoundingClientRect();if(null===(e=null==W?void 0:W.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px")),A&&!H){var o=null==W?void 0:W.current;null==o||o.style.setProperty("--input-height","auto"),null==o||o.style.setProperty("--input-height","".concat(o.scrollHeight+2,"px"))}}}),[Q,F]),o.createElement("div",{ref:O,id:h,"aria-label":k,"data-testid":y,className:i(s.editableTypography,v),role:F?null:"button",onClick:function(e){null==E||E(e),Y(e)},onKeyDown:ne},F&&(A?o.createElement("textarea",{ref:W,className:i(s.textarea,N),value:Q,onChange:oe,onKeyDown:te,onBlur:ee,"aria-label":k,placeholder:w,role:"textbox",rows:H?Math.min(Q.split("\n").length,H):1}):o.createElement("input",{ref:W,className:i(s.input,N),value:Q,onChange:oe,onKeyDown:te,onBlur:ee,"aria-label":k,placeholder:w,role:"input"})),o.createElement(D,{ref:X,"aria-hidden":F,className:i(s.typography,N,t(t(t(t({},s.hidden,F),s.disabled,P),s.placeholder,!Q&&w),s.multiline,!F&&A)),tabIndex:0,tooltipProps:R,weight:L,type:T,maxLines:H},Q||w))}));export{m as default};
 //# sourceMappingURL=EditableTypography.js.map

package/dist/src/components/EditableTypography/EditableTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableTypography.js","sources":["../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n}\n\nconst PADDING_OFFSET = 2;\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n\n      if (multiline) {\n        const textareaElement = inputRef?.current as HTMLTextAreaElement;\n        textareaElement?.style.setProperty(\"--input-height\", \"auto\");\n        textareaElement?.style.setProperty(\"--input-height\", `${textareaElement.scrollHeight + PADDING_OFFSET}px`);\n      }\n    }, [inputValue, isEditing]);\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"textbox\"\n              rows={1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          ellipsis={!multiline}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","_b","current","_a","focus","inputElement","textLength","length","setSelectionRange","select","useIsomorphicLayoutEffect","_typographyRef$curren","getBoundingClientRect","style","setProperty","concat","width","textareaElement","scrollHeight","React","createElement","cx","styles","editableTypography","role","onKeyDown","textarea","onBlur","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
+{"version":3,"file":"EditableTypography.js","sources":["../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nexport interface EditableTypographyImplementationProps {\n  /** Value of the text */\n  value: string;\n  /** Will be called whenever the current value changes to a non-empty value */\n  onChange?: (value: string) => void;\n  /** Will be called whenever the component gets clicked */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /** Disables editing mode - component will be just a typography element */\n  readOnly?: boolean;\n  /** Shown in edit mode when the text value is empty */\n  placeholder?: string;\n  /** ARIA Label */\n  ariaLabel?: string;\n  /** Controls the mode of the component (i.e. view/edit mode) */\n  isEditMode?: boolean;\n  /** If true, automatically select all text when entering edit mode */\n  autoSelectTextOnEditMode?: boolean;\n  /** Will be called when the mode of the component changes */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /** Override Tooltip props when needed */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /** A typography component that is being rendered in view mode */\n  component: ElementType;\n  /** Controls the style of the typography component in view mode */\n  typographyClassName: string;\n  /** Shows placeholder when empty, if provided */\n  clearable?: boolean;\n  /** Sets the Text/Heading type */\n  type?: TextType | HeadingType;\n  /** Sets the Text/Heading weight */\n  weight?: TextWeight | HeadingWeight;\n  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n  multiline?: boolean;\n  /** Maximum number of rows for multiline text */\n  multilineMaxRows?: number;\n}\n\nconst PADDING_OFFSET = 2;\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      readOnly = false,\n      ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false,\n      multilineMaxRows\n    }: EditableTypographyProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n\n      if (multiline && !multilineMaxRows) {\n        const textareaElement = inputRef?.current as HTMLTextAreaElement;\n        textareaElement?.style.setProperty(\"--input-height\", \"auto\");\n        textareaElement?.style.setProperty(\"--input-height\", `${textareaElement.scrollHeight + PADDING_OFFSET}px`);\n      }\n    }, [inputValue, isEditing]);\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"textbox\"\n              rows={multilineMaxRows ? Math.min(inputValue.split(\"\\n\").length, multilineMaxRows) : 1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          maxLines={multilineMaxRows}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","multilineMaxRows","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","_b","current","_a","focus","inputElement","textLength","length","setSelectionRange","select","useIsomorphicLayoutEffect","_typographyRef$curren","getBoundingClientRect","style","setProperty","concat","width","textareaElement","scrollHeight","React","createElement","cx","styles","editableTypography","role","onKeyDown","textarea","onBlur","rows","Math","min","split","input","typography","_defineProperty","hidden","disabled","tabIndex","maxLines"],"mappings":"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"}

package/dist/src/components/EditableTypography/EditableTypography.module.scss.js

@@ -1,2 +1,2 @@
-var e={editableTypography:"editableTypography_37edc92e4c",input:"input_97d8ff41d3",textarea:"textarea_b9a635ede3",typography:"typography_38a8c4809a",disabled:"disabled_bc7bca25ba",hidden:"hidden_057794b8f8",placeholder:"placeholder_adc9331a03",multiline:"multiline_46411918e8"};!function(e){const a="s_id-34ea4bd39075_3_27_0";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+a))return;const n=document.createElement("style");n.id=a,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".editableTypography_37edc92e4c {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography_37edc92e4c .input_97d8ff41d3,\n.editableTypography_37edc92e4c .textarea_b9a635ede3 {\n  width: var(--input-width);\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography_37edc92e4c .input_97d8ff41d3:focus, .editableTypography_37edc92e4c .input_97d8ff41d3:active,\n.editableTypography_37edc92e4c .textarea_b9a635ede3:focus,\n.editableTypography_37edc92e4c .textarea_b9a635ede3:active {\n  outline: none;\n}\n.editableTypography_37edc92e4c .textarea_b9a635ede3 {\n  resize: none;\n  overflow: hidden;\n  height: var(--input-height);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a:hover:not(.disabled_bc7bca25ba) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a.hidden_057794b8f8 {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a.placeholder_adc9331a03 {\n  color: var(--secondary-text-color);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a.multiline_46411918e8 {\n  white-space: pre-wrap;\n}");export{e as default};
+var e={editableTypography:"editableTypography_37edc92e4c",input:"input_97d8ff41d3",textarea:"textarea_b9a635ede3",typography:"typography_38a8c4809a",disabled:"disabled_bc7bca25ba",hidden:"hidden_057794b8f8",placeholder:"placeholder_adc9331a03",multiline:"multiline_46411918e8"};!function(e){const a="s_id-f317f7834cdd_3_27_0";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+a))return;const n=document.createElement("style");n.id=a,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".editableTypography_37edc92e4c {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  margin-left: -6px;\n  overflow: hidden;\n  position: relative;\n}\n.editableTypography_37edc92e4c .input_97d8ff41d3,\n.editableTypography_37edc92e4c .textarea_b9a635ede3 {\n  width: var(--input-width);\n  display: inline-block;\n  max-width: 100%;\n  min-width: 64px;\n  padding: 0 var(--spacing-xs);\n  outline: none;\n  border: 1px solid var(--primary-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.editableTypography_37edc92e4c .input_97d8ff41d3:focus, .editableTypography_37edc92e4c .input_97d8ff41d3:active,\n.editableTypography_37edc92e4c .textarea_b9a635ede3:focus,\n.editableTypography_37edc92e4c .textarea_b9a635ede3:active {\n  outline: none;\n}\n.editableTypography_37edc92e4c .textarea_b9a635ede3 {\n  resize: none;\n  overflow: auto;\n  height: var(--input-height);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a:hover:not(.disabled_bc7bca25ba) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a.hidden_057794b8f8 {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a.placeholder_adc9331a03 {\n  color: var(--secondary-text-color);\n}\n.editableTypography_37edc92e4c .typography_38a8c4809a.multiline_46411918e8 {\n  white-space: pre-wrap;\n}");export{e as default};
 //# sourceMappingURL=EditableTypography.module.scss.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.27.1",
+  "version": "3.28.0-alpha-df61a.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "@vibe/icons": "1.5.0",
+    "@vibe/icons": "1.4.0",
     "a11y-dialog": "^7.5.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist-config-monday": "1.0.6",
@@ -268,5 +268,5 @@
   "browserslist": [
     "extends browserslist-config-monday"
   ],
-  "gitHead": "de341954ff08ab1eaa1a98433dc8bf61e4641840"
+  "gitHead": "f2fd044651ecb9806e47ed1dbd8ffc5e8699ac0a"
 }