@vibe/core 3.13.0-alpha-b02ef.0 → 3.13.0

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 r,{forwardRef as n,useRef as o,useState as l,useEffect as a,useLayoutEffect as i}from"react";import u from"classnames";import s from"../../hooks/useMergeRef.js";import c from"./EditableTypography.module.scss.js";import{keyCodes as d}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import f from"../../hooks/usePrevious/index.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,w=void 0===C?"":C,k=n.placeholder,j=n.clearable,B=n.typographyClassName,F=n.component,N=n.isEditMode,T=n.autoSelectTextOnEditMode,D=n.onEditModeChange,K=n.tooltipProps,M=n.type,R=n.weight,S=n.multiline,A=void 0!==S&&S,H=o(null),O=s(m,H),W=l(N||!1),_=e(W,2),q=_[0],z=_[1],I=l(g),L=e(I,2),G=L[0],J=L[1],Q=o(0),U=o(0),V=f(g),X=o(null),Y=o(null);function Z(e){x||q||(e.preventDefault(),$(!0))}function $(e){null==D||D(e),z(e)}function ee(){($(!1),g!==G)&&(G||j&&k?(J(G),null==b||b(G)):J(g))}function te(){ee()}function re(e){if(e.key===d.ENTER){if(A&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ee()}e.key===d.ESCAPE&&(e.preventDefault(),e.stopPropagation(),$(!1),J(g))}function ne(e){J(e.target.value),A&&ae()}a((function(){q||g===V||g===G||J(g)}),[V,q,g,G]),a((function(){z(N)}),[N]);var oe=p(Z);function le(){var e,t;if(null===(t=null===(e=X.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),X.current){var r=X.current,n=r.value.length;r.setSelectionRange(n,n)}A&&function(){if(A&&X.current){var e=X.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,n=parseFloat(t.paddingTop)||0,o=parseFloat(t.paddingBottom)||0,l=parseFloat(t.borderTopWidth)||0,a=parseFloat(t.borderBottomWidth)||0;U.current=r,Q.current=n+o+l+a,ae()}}()}function ae(){var e;X.current&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","auto"),requestAnimationFrame((function(){var e,t=X.current;t&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","".concat(Math.max(t.scrollHeight+Q.current,U.current+Q.current),"px")))})))}return a((function(){var e,t;q&&(le(),T&&(null===(t=null===(e=X.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[T,q]),i((function(){var e;if(Y.current){var t=Y.current.getBoundingClientRect();null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px"))}}),[G,q]),r.createElement("div",{ref:O,id:v,"aria-label":w,"data-testid":y,className:u(c.editableTypography,h),role:q?null:"button",onClick:function(e){null==E||E(e),Z(e)},onKeyDown:oe},q&&(A?r.createElement("textarea",{ref:X,className:u(c.textarea,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"textbox",rows:1}):r.createElement("input",{ref:X,className:u(c.input,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"input"})),r.createElement(F,{ref:Y,"aria-hidden":q,className:u(c.typography,B,t(t(t(t({},c.hidden,q),c.disabled,x),c.placeholder,!G&&k),c.multiline,!q&&A)),tabIndex:0,tooltipProps:K,weight:R,type:M,ellipsis:!A},G||k))}));export{m as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}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 d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],g=o.value,y=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,P=o.placeholder,k=o.clearable,j=o.typographyClassName,B=o.component,F=o.isEditMode,N=o.autoSelectTextOnEditMode,T=o.onEditModeChange,D=o.tooltipProps,K=o.type,M=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(F||!1),W=e(O,2),_=W[0],q=W[1],z=a(g),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(g),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),g!==L)&&(L||k&&P?(G(L),null==y||y(L)):G(g))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ie()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),le(!1),G(g))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||g===re||g===L||G(g)}),[re,_,g,L]),l((function(){q(F)}),[F]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),N&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[N,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U},role:"input"})),r.createElement(B,{ref:ne,"aria-hidden":_,className:i(s.typography,j,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&P),s.multiline,!_&&S)),tabIndex:0,tooltipProps:D,weight:M,type:K,ellipsis:!S},L||P))}));export{f 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, useLayoutEffect } 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\";\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 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    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\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      if (multiline) {\n        resizeTextarea();\n      }\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      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        inputRef?.current?.style.setProperty(\"--input-height\", \"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          const height = Math.max(\n            textarea.scrollHeight + textareaBorderBoxSizing.current,\n            textareaLineHeight.current + textareaBorderBoxSizing.current\n          );\n          inputRef?.current?.style.setProperty(\"--input-height\", `${height}px`);\n        });\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    useLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\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              // style={{ width: inputWidth, height: inputHeight }}\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","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","style","setProperty","requestAnimationFrame","concat","Math","max","scrollHeight","select","useLayoutEffect","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","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\";\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 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    const [inputWidth, setInputWidth] = useState(0);\n    const [inputHeight, setInputHeight] = useState<number | string>(0);\n    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\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      if (multiline) {\n        resizeTextarea();\n      }\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      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        setInputHeight(\"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          setInputHeight(\n            Math.max(\n              textarea.scrollHeight + textareaBorderBoxSizing.current,\n              textareaLineHeight.current + textareaBorderBoxSizing.current\n            )\n          );\n        });\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    useEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      setInputWidth(width);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\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              style={{ width: inputWidth, height: inputHeight }}\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              style={{ width: inputWidth }}\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","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"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-be4dbaebdbfd_3_12_3";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  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 a="s_id-ae5d3ede7a9c_3_12_3";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=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, .editableTypography .textarea {\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, .editableTypography .textarea:focus, .editableTypography .textarea:active {\n  outline: none;\n}\n.editableTypography .textarea {\n  resize: none;\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/mocked_classnames/src/components/Tooltip/Tooltip.module.scss.js

@@ -1,2 +1,2 @@
-var o={tooltip:"tooltip",image:"image",title:"title",content:"content",paddingSizeMd:"paddingSizeMd",tooltipWhiteLink:"tooltipWhiteLink",arrow:"arrow",dark:"dark",primary:"primary"};!function(o){const n="s_id-a3b5adff1ad8_3_12_3";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".tooltip {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--tooltip-border-radius, var(--border-radius-small));\n  box-shadow: var(--box-shadow-medium);\n  font: var(--font-text2-normal);\n  max-width: var(--tooltip-max-width, 50vw);\n  word-break: break-word;\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n  --tooltip-max-width: 240px;\n}\n.tooltip .image {\n  display: block;\n  position: relative;\n  border-top-right-radius: 2px;\n  border-top-left-radius: 2px;\n  padding: 2px 2px 0 2px;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  min-width: var(--tooltip-max-width);\n  z-index: 1;\n}\n.tooltip .title {\n  font: var(--font-text2-bold);\n}\n.tooltip .content {\n  word-break: break-word;\n  display: inline-block;\n  padding: var(--tooltip-padding, var(--spacing-small) var(--spacing-medium));\n}\n.tooltip.paddingSizeMd {\n  border-radius: var(--border-radius-medium);\n  padding: var(--spacing-medium);\n  font: var(--font-text2-normal);\n}\n.tooltip a.tooltipWhiteLink {\n  color: #fff;\n}\n.arrow,\n.dark,\n.arrow.dark {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.primary,\n.arrow.primary {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n}");export{o as default};
+var o={tooltip:"tooltip",image:"image",title:"title",content:"content",paddingSizeMd:"paddingSizeMd",tooltipWhiteLink:"tooltipWhiteLink",arrow:"arrow",dark:"dark",primary:"primary"};!function(o){const n="s_id-0ff838e09a5f_3_12_3";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".tooltip {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--tooltip-border-radius, var(--border-radius-small));\n  box-shadow: var(--box-shadow-medium);\n  font: var(--font-text2-normal);\n  max-width: var(--tooltip-max-width, 50vw);\n  word-break: break-word;\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n  --tooltip-max-width: 240px;\n  white-space: pre-wrap;\n}\n.tooltip .image {\n  display: block;\n  position: relative;\n  border-top-right-radius: 2px;\n  border-top-left-radius: 2px;\n  padding: 2px 2px 0 2px;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  min-width: var(--tooltip-max-width);\n  z-index: 1;\n}\n.tooltip .title {\n  font: var(--font-text2-bold);\n}\n.tooltip .content {\n  word-break: break-word;\n  display: inline-block;\n  padding: var(--tooltip-padding, var(--spacing-small) var(--spacing-medium));\n}\n.tooltip.paddingSizeMd {\n  border-radius: var(--border-radius-medium);\n  padding: var(--spacing-medium);\n  font: var(--font-text2-normal);\n}\n.tooltip a.tooltipWhiteLink {\n  color: #fff;\n}\n.arrow,\n.dark,\n.arrow.dark {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.primary,\n.arrow.primary {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n}");export{o as default};
 //# sourceMappingURL=Tooltip.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as n,useRef as o,useState as l,useEffect as a,useLayoutEffect as i}from"react";import u from"classnames";import s from"../../hooks/useMergeRef.js";import c from"./EditableTypography.module.scss.js";import{keyCodes as d}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import f from"../../hooks/usePrevious/index.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,w=void 0===C?"":C,k=n.placeholder,j=n.clearable,B=n.typographyClassName,F=n.component,N=n.isEditMode,T=n.autoSelectTextOnEditMode,D=n.onEditModeChange,K=n.tooltipProps,M=n.type,R=n.weight,S=n.multiline,A=void 0!==S&&S,H=o(null),O=s(m,H),W=l(N||!1),_=e(W,2),q=_[0],z=_[1],I=l(g),L=e(I,2),G=L[0],J=L[1],Q=o(0),U=o(0),V=f(g),X=o(null),Y=o(null);function Z(e){x||q||(e.preventDefault(),$(!0))}function $(e){null==D||D(e),z(e)}function ee(){($(!1),g!==G)&&(G||j&&k?(J(G),null==b||b(G)):J(g))}function te(){ee()}function re(e){if(e.key===d.ENTER){if(A&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ee()}e.key===d.ESCAPE&&(e.preventDefault(),e.stopPropagation(),$(!1),J(g))}function ne(e){J(e.target.value),A&&ae()}a((function(){q||g===V||g===G||J(g)}),[V,q,g,G]),a((function(){z(N)}),[N]);var oe=p(Z);function le(){var e,t;if(null===(t=null===(e=X.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),X.current){var r=X.current,n=r.value.length;r.setSelectionRange(n,n)}A&&function(){if(A&&X.current){var e=X.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,n=parseFloat(t.paddingTop)||0,o=parseFloat(t.paddingBottom)||0,l=parseFloat(t.borderTopWidth)||0,a=parseFloat(t.borderBottomWidth)||0;U.current=r,Q.current=n+o+l+a,ae()}}()}function ae(){var e;X.current&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","auto"),requestAnimationFrame((function(){var e,t=X.current;t&&(null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-height","".concat(Math.max(t.scrollHeight+Q.current,U.current+Q.current),"px")))})))}return a((function(){var e,t;q&&(le(),T&&(null===(t=null===(e=X.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[T,q]),i((function(){var e;if(Y.current){var t=Y.current.getBoundingClientRect();null===(e=null==X?void 0:X.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px"))}}),[G,q]),r.createElement("div",{ref:O,id:v,"aria-label":w,"data-testid":y,className:u(c.editableTypography,h),role:q?null:"button",onClick:function(e){null==E||E(e),Z(e)},onKeyDown:oe},q&&(A?r.createElement("textarea",{ref:X,className:u(c.textarea,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"textbox",rows:1}):r.createElement("input",{ref:X,className:u(c.input,B),value:G,onChange:ne,onKeyDown:re,onBlur:te,"aria-label":w,placeholder:k,role:"input"})),r.createElement(F,{ref:Y,"aria-hidden":q,className:u(c.typography,B,t(t(t(t({},c.hidden,q),c.disabled,x),c.placeholder,!G&&k),c.multiline,!q&&A)),tabIndex:0,tooltipProps:K,weight:R,type:M,ellipsis:!A},G||k))}));export{m as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}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 d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],g=o.value,y=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,P=o.placeholder,k=o.clearable,j=o.typographyClassName,B=o.component,F=o.isEditMode,N=o.autoSelectTextOnEditMode,T=o.onEditModeChange,D=o.tooltipProps,K=o.type,M=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(F||!1),W=e(O,2),_=W[0],q=W[1],z=a(g),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(g),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),g!==L)&&(L||k&&P?(G(L),null==y||y(L)):G(g))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ie()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),le(!1),G(g))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||g===re||g===L||G(g)}),[re,_,g,L]),l((function(){q(F)}),[F]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),N&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[N,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U},role:"input"})),r.createElement(B,{ref:ne,"aria-hidden":_,className:i(s.typography,j,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&P),s.multiline,!_&&S)),tabIndex:0,tooltipProps:D,weight:M,type:K,ellipsis:!S},L||P))}));export{f 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, useLayoutEffect } 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\";\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 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    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\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      if (multiline) {\n        resizeTextarea();\n      }\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      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        inputRef?.current?.style.setProperty(\"--input-height\", \"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          const height = Math.max(\n            textarea.scrollHeight + textareaBorderBoxSizing.current,\n            textareaLineHeight.current + textareaBorderBoxSizing.current\n          );\n          inputRef?.current?.style.setProperty(\"--input-height\", `${height}px`);\n        });\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    useLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\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              // style={{ width: inputWidth, height: inputHeight }}\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","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","style","setProperty","requestAnimationFrame","concat","Math","max","scrollHeight","select","useLayoutEffect","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","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\";\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 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    const [inputWidth, setInputWidth] = useState(0);\n    const [inputHeight, setInputHeight] = useState<number | string>(0);\n    const textareaBorderBoxSizing = useRef(0);\n    const textareaLineHeight = useRef(0);\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      if (multiline) {\n        resizeTextarea();\n      }\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      if (multiline) {\n        calculateTextareaHeightAttrs();\n      }\n    }\n\n    /* Dynamically resizes the textarea to fit its content */\n    function resizeTextarea() {\n      if (inputRef.current) {\n        // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n        setInputHeight(\"auto\");\n\n        requestAnimationFrame(() => {\n          const textarea = inputRef.current as HTMLTextAreaElement;\n\n          if (!textarea) {\n            return;\n          }\n\n          // Ensure we at least have 1 line\n          setInputHeight(\n            Math.max(\n              textarea.scrollHeight + textareaBorderBoxSizing.current,\n              textareaLineHeight.current + textareaBorderBoxSizing.current\n            )\n          );\n        });\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    useEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      setInputWidth(width);\n    }, [inputValue, isEditing]);\n\n    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n       This is done only on focus, so that we don't need to get the computed style every time.\n    */\n    function calculateTextareaHeightAttrs() {\n      if (multiline && inputRef.current) {\n        const textarea = inputRef.current as HTMLTextAreaElement;\n\n        if (!textarea) {\n          return;\n        }\n\n        const computedStyle = window.getComputedStyle(textarea);\n\n        // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n        // as well as the styles applied to it, such as padding and border widths.\n        const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n        textareaLineHeight.current = lineHeight;\n        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n        resizeTextarea();\n      }\n    }\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              style={{ width: inputWidth, height: inputHeight }}\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              style={{ width: inputWidth }}\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","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={editableTypography:"editableTypography_fd533ed4b4",input:"input_1319196700",textarea:"textarea_adf116ac75",typography:"typography_057ee5fa59",disabled:"disabled_e1050254a9",hidden:"hidden_322339211d",placeholder:"placeholder_5b87804f19",multiline:"multiline_0cfdb1d3a0"};!function(e){const a="s_id-be4dbaebdbfd_3_12_3";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_fd533ed4b4 {\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_fd533ed4b4 .input_1319196700,\n.editableTypography_fd533ed4b4 .textarea_adf116ac75 {\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_fd533ed4b4 .input_1319196700:focus, .editableTypography_fd533ed4b4 .input_1319196700:active,\n.editableTypography_fd533ed4b4 .textarea_adf116ac75:focus,\n.editableTypography_fd533ed4b4 .textarea_adf116ac75:active {\n  outline: none;\n}\n.editableTypography_fd533ed4b4 .textarea_adf116ac75 {\n  resize: none;\n  height: var(--input-height);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59 {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59:hover:not(.disabled_e1050254a9) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.hidden_322339211d {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.placeholder_5b87804f19 {\n  color: var(--secondary-text-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.multiline_0cfdb1d3a0 {\n  white-space: pre-wrap;\n}");export{e as default};
+var e={editableTypography:"editableTypography_fd533ed4b4",input:"input_1319196700",textarea:"textarea_830f6de23b",typography:"typography_057ee5fa59",disabled:"disabled_e1050254a9",hidden:"hidden_322339211d",placeholder:"placeholder_5b87804f19",multiline:"multiline_0cfdb1d3a0"};!function(e){const d="s_id-ae5d3ede7a9c_3_12_3";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".editableTypography_fd533ed4b4 {\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_fd533ed4b4 .input_1319196700, .editableTypography_fd533ed4b4 .textarea_830f6de23b {\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_fd533ed4b4 .input_1319196700:focus, .editableTypography_fd533ed4b4 .input_1319196700:active, .editableTypography_fd533ed4b4 .textarea_830f6de23b:focus, .editableTypography_fd533ed4b4 .textarea_830f6de23b:active {\n  outline: none;\n}\n.editableTypography_fd533ed4b4 .textarea_830f6de23b {\n  resize: none;\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59 {\n  border: 1px solid transparent;\n  padding: 0 var(--spacing-xs);\n  border-radius: var(--border-radius-small);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59:hover:not(.disabled_e1050254a9) {\n  border-color: var(--ui-border-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.hidden_322339211d {\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.placeholder_5b87804f19 {\n  color: var(--secondary-text-color);\n}\n.editableTypography_fd533ed4b4 .typography_057ee5fa59.multiline_0cfdb1d3a0 {\n  white-space: pre-wrap;\n}");export{e as default};
 //# sourceMappingURL=EditableTypography.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var o={tooltip:"tooltip_ee4db5d798",image:"image_2be809ac51",title:"title_f12c0dd7bd",content:"content_64250cd12d",paddingSizeMd:"paddingSizeMd_b3a6c9a822",tooltipWhiteLink:"tooltipWhiteLink_dc6899b92e",arrow:"arrow_3e82629f37",dark:"dark_a07da74724",primary:"primary_ccfd9c16bb"};!function(o){const d="s_id-a3b5adff1ad8_3_12_3";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=o)}(".tooltip_ee4db5d798 {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--tooltip-border-radius, var(--border-radius-small));\n  box-shadow: var(--box-shadow-medium);\n  font: var(--font-text2-normal);\n  max-width: var(--tooltip-max-width, 50vw);\n  word-break: break-word;\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n  --tooltip-max-width: 240px;\n}\n.tooltip_ee4db5d798 .image_2be809ac51 {\n  display: block;\n  position: relative;\n  border-top-right-radius: 2px;\n  border-top-left-radius: 2px;\n  padding: 2px 2px 0 2px;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  min-width: var(--tooltip-max-width);\n  z-index: 1;\n}\n.tooltip_ee4db5d798 .title_f12c0dd7bd {\n  font: var(--font-text2-bold);\n}\n.tooltip_ee4db5d798 .content_64250cd12d {\n  word-break: break-word;\n  display: inline-block;\n  padding: var(--tooltip-padding, var(--spacing-small) var(--spacing-medium));\n}\n.tooltip_ee4db5d798.paddingSizeMd_b3a6c9a822 {\n  border-radius: var(--border-radius-medium);\n  padding: var(--spacing-medium);\n  font: var(--font-text2-normal);\n}\n.tooltip_ee4db5d798 a.tooltipWhiteLink_dc6899b92e {\n  color: #fff;\n}\n.arrow_3e82629f37,\n.dark_a07da74724,\n.arrow_3e82629f37.dark_a07da74724 {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.primary_ccfd9c16bb,\n.arrow_3e82629f37.primary_ccfd9c16bb {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n}");export{o as default};
+var o={tooltip:"tooltip_4943b384c0",image:"image_2be809ac51",title:"title_f12c0dd7bd",content:"content_64250cd12d",paddingSizeMd:"paddingSizeMd_b3a6c9a822",tooltipWhiteLink:"tooltipWhiteLink_dc6899b92e",arrow:"arrow_81199f0418",dark:"dark_a07da74724",primary:"primary_ccfd9c16bb"};!function(o){const n="s_id-0ff838e09a5f_3_12_3";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".tooltip_4943b384c0 {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--tooltip-border-radius, var(--border-radius-small));\n  box-shadow: var(--box-shadow-medium);\n  font: var(--font-text2-normal);\n  max-width: var(--tooltip-max-width, 50vw);\n  word-break: break-word;\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n  --tooltip-max-width: 240px;\n  white-space: pre-wrap;\n}\n.tooltip_4943b384c0 .image_2be809ac51 {\n  display: block;\n  position: relative;\n  border-top-right-radius: 2px;\n  border-top-left-radius: 2px;\n  padding: 2px 2px 0 2px;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  min-width: var(--tooltip-max-width);\n  z-index: 1;\n}\n.tooltip_4943b384c0 .title_f12c0dd7bd {\n  font: var(--font-text2-bold);\n}\n.tooltip_4943b384c0 .content_64250cd12d {\n  word-break: break-word;\n  display: inline-block;\n  padding: var(--tooltip-padding, var(--spacing-small) var(--spacing-medium));\n}\n.tooltip_4943b384c0.paddingSizeMd_b3a6c9a822 {\n  border-radius: var(--border-radius-medium);\n  padding: var(--spacing-medium);\n  font: var(--font-text2-normal);\n}\n.tooltip_4943b384c0 a.tooltipWhiteLink_dc6899b92e {\n  color: #fff;\n}\n.arrow_81199f0418,\n.dark_a07da74724,\n.arrow_81199f0418.dark_a07da74724 {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.primary_ccfd9c16bb,\n.arrow_81199f0418.primary_ccfd9c16bb {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n}");export{o as default};
 //# sourceMappingURL=Tooltip.module.scss.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.13.0-alpha-b02ef.0",
+  "version": "3.13.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -268,5 +268,5 @@
   "browserslist": [
     "extends browserslist-config-monday"
   ],
-  "gitHead": "62e013ce884f8cc4a2c6ddfdd9e3cc76c437fcfd"
+  "gitHead": "1bb3fbeb3ed8b398ea903efebfc2726fdbdf9a67"
 }