@ntbjs/react-components 2.0.3-rc.1 → 2.0.6

package/build/hooks/useTooltipAutoShow.js

@@ -1,8 +1,17 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
 function useTooltipAutoShow(content) {
+  const displayContent = useRef(content);
   const prevContentRef = useRef(content);
   const [forceVisible, setForceVisible] = useState(false);
+  const toolTipDisabled = !content;
+  const toolTipVisible = forceVisible ? true : undefined;
+  useEffect(() => {
+    if (content) {
+      displayContent.current = content;
+    }
+    return () => {};
+  }, [content]);
   if (prevContentRef.current !== content) {
     const appeared = content && !prevContentRef.current;
     const disappeared = !content;
@@ -10,8 +19,10 @@ function useTooltipAutoShow(content) {
     prevContentRef.current = content;
   }
   return {
-    forceVisible: forceVisible && !!content,
-    onMouseLeave: () => setForceVisible(false)
+    toolTipOnMouseLeave: () => setForceVisible(false),
+    toolTipContent: displayContent.current,
+    toolTipDisabled,
+    toolTipVisible
   };
 }
 

package/build/hooks/useTooltipAutoShow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltipAutoShow.js","sources":["../../src/hooks/useTooltipAutoShow.js"],"sourcesContent":["import { useRef, useState } from 'react';\n\n/**\n * Tracks a tooltip's content and automatically forces it to be visible when the\n * content transitions from empty → non-empty, then defaults to trigger prop.\n */\nfunction useTooltipAutoShow(content) {\n  const prevContentRef = useRef(content);\n  const [forceVisible, setForceVisible] = useState(false);\n\n  if (prevContentRef.current !== content) {\n    const appeared = content && !prevContentRef.current;\n    const disappeared = !content;\n\n    if (appeared) setForceVisible(true);\n    else if (disappeared) setForceVisible(false);\n\n    prevContentRef.current = content;\n  }\n\n  return {\n    forceVisible: forceVisible && !!content,\n    onMouseLeave: () => setForceVisible(false)\n  };\n}\n\nexport default useTooltipAutoShow;\n"],"names":["useTooltipAutoShow","content","prevContentRef","useRef","forceVisible","setForceVisible","useState","current","appeared","disappeared","onMouseLeave"],"mappings":";;AAMA,SAASA,kBAAkBA,CAACC,OAAO,EAAE;AACnC,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAACF,OAAO,CAAC,CAAA;EACtC,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEvD,EAAA,IAAIJ,cAAc,CAACK,OAAO,KAAKN,OAAO,EAAE;AACtC,IAAA,MAAMO,QAAQ,GAAGP,OAAO,IAAI,CAACC,cAAc,CAACK,OAAO,CAAA;IACnD,MAAME,WAAW,GAAG,CAACR,OAAO,CAAA;AAE5B,IAAA,IAAIO,QAAQ,EAAEH,eAAe,CAAC,IAAI,CAAC,CAAC,KAC/B,IAAII,WAAW,EAAEJ,eAAe,CAAC,KAAK,CAAC,CAAA;IAE5CH,cAAc,CAACK,OAAO,GAAGN,OAAO,CAAA;AAClC,GAAA;EAEA,OAAO;AACLG,IAAAA,YAAY,EAAEA,YAAY,IAAI,CAAC,CAACH,OAAO;AACvCS,IAAAA,YAAY,EAAEA,MAAML,eAAe,CAAC,KAAK,CAAA;GAC1C,CAAA;AACH;;;;"}
+{"version":3,"file":"useTooltipAutoShow.js","sources":["../../src/hooks/useTooltipAutoShow.js"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\n/**\n * Tracks a tooltip's content and automatically forces it to be visible when the\n * content transitions from empty → non-empty, then defaults to trigger prop.\n */\nfunction useTooltipAutoShow(content) {\n  const displayContent = useRef(content);\n  const prevContentRef = useRef(content);\n  const [forceVisible, setForceVisible] = useState(false);\n\n  const toolTipDisabled = !content;\n  const toolTipVisible = forceVisible ? true : undefined;\n\n  useEffect(() => {\n    if (content) {\n      displayContent.current = content;\n    }\n\n    return () => {};\n  }, [content]);\n\n  if (prevContentRef.current !== content) {\n    const appeared = content && !prevContentRef.current;\n    const disappeared = !content;\n\n    if (appeared) setForceVisible(true);\n    else if (disappeared) setForceVisible(false);\n\n    prevContentRef.current = content;\n  }\n\n  return {\n    toolTipOnMouseLeave: () => setForceVisible(false),\n    toolTipContent: displayContent.current,\n    toolTipDisabled,\n    toolTipVisible\n  };\n}\n\nexport default useTooltipAutoShow;\n"],"names":["useTooltipAutoShow","content","displayContent","useRef","prevContentRef","forceVisible","setForceVisible","useState","toolTipDisabled","toolTipVisible","undefined","useEffect","current","appeared","disappeared","toolTipOnMouseLeave","toolTipContent"],"mappings":";;AAMA,SAASA,kBAAkBA,CAACC,OAAO,EAAE;AACnC,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAACF,OAAO,CAAC,CAAA;AACtC,EAAA,MAAMG,cAAc,GAAGD,MAAM,CAACF,OAAO,CAAC,CAAA;EACtC,MAAM,CAACI,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EAEvD,MAAMC,eAAe,GAAG,CAACP,OAAO,CAAA;AAChC,EAAA,MAAMQ,cAAc,GAAGJ,YAAY,GAAG,IAAI,GAAGK,SAAS,CAAA;AAEtDC,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIV,OAAO,EAAE;MACXC,cAAc,CAACU,OAAO,GAAGX,OAAO,CAAA;AAClC,KAAA;IAEA,OAAO,MAAM,EAAE,CAAA;AACjB,GAAC,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;AAEb,EAAA,IAAIG,cAAc,CAACQ,OAAO,KAAKX,OAAO,EAAE;AACtC,IAAA,MAAMY,QAAQ,GAAGZ,OAAO,IAAI,CAACG,cAAc,CAACQ,OAAO,CAAA;IACnD,MAAME,WAAW,GAAG,CAACb,OAAO,CAAA;AAE5B,IAAA,IAAIY,QAAQ,EAAEP,eAAe,CAAC,IAAI,CAAC,CAAC,KAC/B,IAAIQ,WAAW,EAAER,eAAe,CAAC,KAAK,CAAC,CAAA;IAE5CF,cAAc,CAACQ,OAAO,GAAGX,OAAO,CAAA;AAClC,GAAA;EAEA,OAAO;AACLc,IAAAA,mBAAmB,EAAEA,MAAMT,eAAe,CAAC,KAAK,CAAC;IACjDU,cAAc,EAAEd,cAAc,CAACU,OAAO;IACtCJ,eAAe;AACfC,IAAAA,cAAAA;GACD,CAAA;AACH;;;;"}

package/build/inputs/ActionButton/ActionButton.js

@@ -9,16 +9,18 @@ const ActionButton = React__default.forwardRef(function ActionButton({
   active,
   onClick,
   actionWidthHeight,
+  useShadow,
   backgroundColors,
   ...props
 }, forwardedRef) {
   return React__default.createElement(ActionButton$1, _extends({
     ref: forwardedRef,
     disabled: disabled,
-    active: active,
+    $active: active,
     onClick: onClick,
-    actionWidthHeight: actionWidthHeight,
-    backgroundColors: backgroundColors
+    $actionWidthHeight: actionWidthHeight,
+    $backgroundColors: backgroundColors,
+    $useShadow: useShadow
   }, props), icon);
 });
 ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -27,11 +29,13 @@ ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
   active: PropTypes.bool,
   onClick: PropTypes.func,
   backgroundColors: PropTypes.arrayOf(PropTypes.string),
-  actionWidthHeight: PropTypes.array
+  actionWidthHeight: PropTypes.array,
+  useShadow: PropTypes.bool
 } : {};
 ActionButton.defaultProps = {
   onClick: () => {},
-  actionWidthHeight: [40, 40]
+  actionWidthHeight: [40, 40],
+  useShadow: false
 };
 
 export { ActionButton as default };

package/build/inputs/ActionButton/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sources":["../../../src/components/inputs/ActionButton/ActionButton.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ActionButton.styled';\n\n/**\n * An action button.\n *\n * ### Import\n *\n * ``` js\n * import { ActionButton } from '@ntbjs/react-components/inputs'\n * // or\n * import ActionButton from '@ntbjs/react-components/inputs/ActionButton'\n * ```\n *\n * ### Props\n * ```\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `disabled={true}` to disable the button.\n * Pass `active={true}` to lock the hover state of the button.\n * Pass `onClick={() => {}}` to add an on-click effect.\n * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the button\n * ```\n */\nconst ActionButton = React.forwardRef(function ActionButton(\n  { icon, disabled, active, onClick, actionWidthHeight, backgroundColors, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ActionButton\n      ref={forwardedRef}\n      disabled={disabled}\n      active={active}\n      onClick={onClick}\n      actionWidthHeight={actionWidthHeight}\n      backgroundColors={backgroundColors}\n      {...props}\n    >\n      {icon}\n    </S.ActionButton>\n  );\n});\n\nActionButton.propTypes = {\n  /**\n   * Icon element – e.g: `icon={<SvgAddCircle />}`\n   */\n  icon: PropTypes.element.isRequired,\n  /**\n   * Disable the action button\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Locks the hover state of the `ActionButton` – this prop only affects the visual appearance of the\n   * `ActionButton`\n   */\n  active: PropTypes.bool,\n  /**\n   * On-click effect for the action button\n   */\n  onClick: PropTypes.func,\n  /**\n   * Color of the button background as an array of [darkThemeColor, lightThemeColor]\n   */\n  backgroundColors: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * Width and Height of the Action Button [50, 50]\n   */\n  actionWidthHeight: PropTypes.array\n};\n\nActionButton.defaultProps = {\n  onClick: () => {},\n  actionWidthHeight: [40, 40]\n};\n\nexport default ActionButton;\n"],"names":["ActionButton","React","forwardRef","icon","disabled","active","onClick","actionWidthHeight","backgroundColors","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","element","isRequired","bool","func","arrayOf","string","array","defaultProps"],"mappings":";;;;;AAwBMA,MAAAA,YAAY,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,YAAYA,CACzD;EAAEG,IAAI;EAAEC,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC,iBAAiB;EAAEC,gBAAgB;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAClFC,YAAY,EACZ;EACA,OACET,cAAA,CAAAU,aAAA,CAACC,cAAc,EAAAC,QAAA,CAAA;AACbC,IAAAA,GAAG,EAAEJ,YAAa;AAClBN,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCC,IAAAA,gBAAgB,EAAEA,gBAAAA;GACdC,EAAAA,KAAK,CAERN,EAAAA,IACa,CAAC,CAAA;AAErB,CAAC,EAAC;AAEFH,YAAY,CAACe,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIvBf,EAAAA,IAAI,EAAEgB,SAAS,CAACC,OAAO,CAACC,UAAU;EAIlCjB,QAAQ,EAAEe,SAAS,CAACG,IAAI;EAKxBjB,MAAM,EAAEc,SAAS,CAACG,IAAI;EAItBhB,OAAO,EAAEa,SAAS,CAACI,IAAI;EAIvBf,gBAAgB,EAAEW,SAAS,CAACK,OAAO,CAACL,SAAS,CAACM,MAAM,CAAC;EAIrDlB,iBAAiB,EAAEY,SAAS,CAACO,KAAAA;AAC/B,CAAC,GAAA,EAAA,CAAA;AAED1B,YAAY,CAAC2B,YAAY,GAAG;AAC1BrB,EAAAA,OAAO,EAAEA,MAAM,EAAE;AACjBC,EAAAA,iBAAiB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;AAC5B,CAAC;;;;"}
+{"version":3,"file":"ActionButton.js","sources":["../../../src/components/inputs/ActionButton/ActionButton.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ActionButton.styled';\n\n/**\n * An action button.\n *\n * ### Import\n *\n * ``` js\n * import { ActionButton } from '@ntbjs/react-components/inputs'\n * // or\n * import ActionButton from '@ntbjs/react-components/inputs/ActionButton'\n * ```\n *\n * ### Props\n * ```\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `disabled={true}` to disable the button.\n * Pass `active={true}` to lock the hover state of the button.\n * Pass `onClick={() => {}}` to add an on-click effect.\n * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the button\n * ```\n */\nconst ActionButton = React.forwardRef(function ActionButton(\n  { icon, disabled, active, onClick, actionWidthHeight, useShadow, backgroundColors, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ActionButton\n      ref={forwardedRef}\n      disabled={disabled}\n      $active={active}\n      onClick={onClick}\n      $actionWidthHeight={actionWidthHeight}\n      $backgroundColors={backgroundColors}\n      $useShadow={useShadow}\n      {...props}\n    >\n      {icon}\n    </S.ActionButton>\n  );\n});\n\nActionButton.propTypes = {\n  /**\n   * Icon element – e.g: `icon={<SvgAddCircle />}`\n   */\n  icon: PropTypes.element.isRequired,\n  /**\n   * Disable the action button\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Locks the hover state of the `ActionButton` – this prop only affects the visual appearance of the\n   * `ActionButton`\n   */\n  active: PropTypes.bool,\n  /**\n   * On-click effect for the action button\n   */\n  onClick: PropTypes.func,\n  /**\n   * Color of the button background as an array of [darkThemeColor, lightThemeColor]\n   */\n  backgroundColors: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * Width and Height of the Action Button [50, 50]\n   */\n  actionWidthHeight: PropTypes.array,\n  /**\n   *Use shadow for the action button\n   */\n  useShadow: PropTypes.bool\n};\n\nActionButton.defaultProps = {\n  onClick: () => {},\n  actionWidthHeight: [40, 40],\n  useShadow: false\n};\n\nexport default ActionButton;\n"],"names":["ActionButton","React","forwardRef","icon","disabled","active","onClick","actionWidthHeight","useShadow","backgroundColors","props","forwardedRef","createElement","S","_extends","ref","$active","$actionWidthHeight","$backgroundColors","$useShadow","propTypes","process","env","NODE_ENV","PropTypes","element","isRequired","bool","func","arrayOf","string","array","defaultProps"],"mappings":";;;;;AAwBMA,MAAAA,YAAY,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,YAAYA,CACzD;EAAEG,IAAI;EAAEC,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC,iBAAiB;EAAEC,SAAS;EAAEC,gBAAgB;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC7FC,YAAY,EACZ;EACA,OACEV,cAAA,CAAAW,aAAA,CAACC,cAAc,EAAAC,QAAA,CAAA;AACbC,IAAAA,GAAG,EAAEJ,YAAa;AAClBP,IAAAA,QAAQ,EAAEA,QAAS;AACnBY,IAAAA,OAAO,EAAEX,MAAO;AAChBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBW,IAAAA,kBAAkB,EAAEV,iBAAkB;AACtCW,IAAAA,iBAAiB,EAAET,gBAAiB;AACpCU,IAAAA,UAAU,EAAEX,SAAAA;GACRE,EAAAA,KAAK,CAERP,EAAAA,IACa,CAAC,CAAA;AAErB,CAAC,EAAC;AAEFH,YAAY,CAACoB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIvBpB,EAAAA,IAAI,EAAEqB,SAAS,CAACC,OAAO,CAACC,UAAU;EAIlCtB,QAAQ,EAAEoB,SAAS,CAACG,IAAI;EAKxBtB,MAAM,EAAEmB,SAAS,CAACG,IAAI;EAItBrB,OAAO,EAAEkB,SAAS,CAACI,IAAI;EAIvBnB,gBAAgB,EAAEe,SAAS,CAACK,OAAO,CAACL,SAAS,CAACM,MAAM,CAAC;EAIrDvB,iBAAiB,EAAEiB,SAAS,CAACO,KAAK;EAIlCvB,SAAS,EAAEgB,SAAS,CAACG,IAAAA;AACvB,CAAC,GAAA,EAAA,CAAA;AAED3B,YAAY,CAACgC,YAAY,GAAG;AAC1B1B,EAAAA,OAAO,EAAEA,MAAM,EAAE;AACjBC,EAAAA,iBAAiB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;AAC3BC,EAAAA,SAAS,EAAE,KAAA;AACb,CAAC;;;;"}

package/build/inputs/ActionButton/ActionButton.styled.js

@@ -2,13 +2,16 @@ import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
-const ActionButton = styled.button.attrs(applyDefaultTheme)`
+const shouldForwardProp = prop => prop !== 'theme' && !prop.startsWith('$');
+const ActionButton = styled.button.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   display: inline-flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  width: ${props => `${props.actionWidthHeight[0]}px`};
-  height: ${props => `${props.actionWidthHeight[1]}px`};
+  width: ${props => `${props.$actionWidthHeight[0]}px`};
+  height: ${props => `${props.$actionWidthHeight[1]}px`};
   border: 0;
   color: inherit;
   background-color: transparent;
@@ -20,30 +23,30 @@ const ActionButton = styled.button.attrs(applyDefaultTheme)`
   cursor: pointer;
 
   ${props => {
-  const darkThemeBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');
-  const lightThemeBgColor = props?.backgroundColors?.[1] ?? props.theme.getColor('gray-200');
+  const darkThemeBgColor = props?.$backgroundColors?.[0] ?? props.theme.getColor('gray-600');
+  const lightThemeBgColor = props?.$backgroundColors?.[1] ?? props.theme.getColor('gray-200');
   return props.theme.themeProp('background-image', `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 51%)`, `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 51%)`);
 }}
 
   &:hover:not(:disabled) {
-    background-size: ${props => Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px
-      ${props => Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px;
+    background-size: ${props => Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px
+      ${props => Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px;
 
     svg {
       ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))};
     }
   }
 
-  ${props => props.active && css`
-      background-size: ${Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px
-        ${Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px;
+  ${props => props.$active && css`
+      background-size: ${Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px
+        ${Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px;
 
       svg {
         ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))};
       }
     `}
 
-  ${props => props.useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null}
+  ${props => props.$useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null}
 
   &:disabled {
     opacity: 0.5;
@@ -53,8 +56,8 @@ const ActionButton = styled.button.attrs(applyDefaultTheme)`
 
   svg {
     width: 100%;
-    max-width: ${props => `${props.actionWidthHeight[0] - 15}px`};
-    max-height: ${props => `${props.actionWidthHeight[1] - 15}px`};
+    max-width: ${props => `${props.$actionWidthHeight[0] - 15}px`};
+    max-height: ${props => `${props.$actionWidthHeight[1] - 15}px`};
     pointer-events: none;
     transition: color 250ms;
   }

package/build/inputs/ActionButton/ActionButton.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.styled.js","sources":["../../../src/components/inputs/ActionButton/ActionButton.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const ActionButton = styled.button.attrs(applyDefaultTheme)`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  width: ${props => `${props.actionWidthHeight[0]}px`};\n  height: ${props => `${props.actionWidthHeight[1]}px`};\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ${props => {\n    const darkThemeBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');\n    const lightThemeBgColor = props?.backgroundColors?.[1] ?? props.theme.getColor('gray-200');\n    return props.theme.themeProp(\n      'background-image',\n      `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 51%)`,\n      `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 51%)`\n    );\n  }}\n\n  &:hover:not(:disabled) {\n    background-size: ${props =>\n        Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px\n      ${props => Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px;\n\n    svg {\n      ${props =>\n        props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-100'),\n          props.theme.getColor('gray-700')\n        )};\n    }\n  }\n\n  ${props =>\n    props.active &&\n    css`\n      background-size: ${Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px\n        ${Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2}px;\n\n      svg {\n        ${props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-100'),\n          props.theme.getColor('gray-700')\n        )};\n      }\n    `}\n\n  ${props =>\n    props.useShadow\n      ? props.theme.themeProp(\n          'box-shadow',\n          `0px 3px 6px ${rgba(props.theme.getColor('black'), 0.7)}`,\n          `0px 3px 6px ${props.theme.getColor('black')}`\n        )\n      : null}\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-width: ${props => `${props.actionWidthHeight[0] - 15}px`};\n    max-height: ${props => `${props.actionWidthHeight[1] - 15}px`};\n    pointer-events: none;\n    transition: color 250ms;\n  }\n`;\n"],"names":["ActionButton","styled","button","attrs","applyDefaultTheme","props","actionWidthHeight","darkThemeBgColor","backgroundColors","theme","getColor","lightThemeBgColor","themeProp","Math","max","active","css","useShadow","rgba"],"mappings":"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"}
+{"version":3,"file":"ActionButton.styled.js","sources":["../../../src/components/inputs/ActionButton/ActionButton.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => prop !== 'theme' && !prop.startsWith('$');\n\nexport const ActionButton = styled.button\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  width: ${props => `${props.$actionWidthHeight[0]}px`};\n  height: ${props => `${props.$actionWidthHeight[1]}px`};\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ${props => {\n    const darkThemeBgColor = props?.$backgroundColors?.[0] ?? props.theme.getColor('gray-600');\n    const lightThemeBgColor = props?.$backgroundColors?.[1] ?? props.theme.getColor('gray-200');\n    return props.theme.themeProp(\n      'background-image',\n      `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 51%)`,\n      `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 51%)`\n    );\n  }}\n\n  &:hover:not(:disabled) {\n    background-size: ${props =>\n      Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px\n      ${props => Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px;\n\n    svg {\n      ${props =>\n        props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-100'),\n          props.theme.getColor('gray-700')\n        )};\n    }\n  }\n\n  ${props =>\n    props.$active &&\n    css`\n      background-size: ${Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px\n        ${Math.max(props.$actionWidthHeight[0], props.$actionWidthHeight[1]) * 2}px;\n\n      svg {\n        ${props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-100'),\n          props.theme.getColor('gray-700')\n        )};\n      }\n    `}\n\n  ${props =>\n    props.$useShadow\n      ? props.theme.themeProp(\n          'box-shadow',\n          `0px 3px 6px ${rgba(props.theme.getColor('black'), 0.7)}`,\n          `0px 3px 6px ${props.theme.getColor('black')}`\n        )\n      : null}\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-width: ${props => `${props.$actionWidthHeight[0] - 15}px`};\n    max-height: ${props => `${props.$actionWidthHeight[1] - 15}px`};\n    pointer-events: none;\n    transition: color 250ms;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ActionButton","styled","button","withConfig","attrs","applyDefaultTheme","props","$actionWidthHeight","darkThemeBgColor","$backgroundColors","theme","getColor","lightThemeBgColor","themeProp","Math","max","$active","css","$useShadow","rgba"],"mappings":"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"}

package/build/inputs/CompactTextInput/CompactTextInput.js

@@ -44,8 +44,10 @@ const CompactTextInput = React__default.forwardRef(function CompactTextInput({
   const [currentValue, setCurrentValue] = useState();
   const [autoFocus, setAutoFocus] = useState(false);
   const {
-    forceVisible,
-    onMouseLeave: onTooltipMouseLeave
+    toolTipDisabled,
+    toolTipVisible,
+    toolTipOnMouseLeave,
+    toolTipContent
   } = useTooltipAutoShow(descriptionToolTip);
   useEffect(() => {
     setCurrentValue(value || defaultValue);
@@ -102,15 +104,15 @@ const CompactTextInput = React__default.forwardRef(function CompactTextInput({
   }, label, React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(InputContainer, {
     $hasLabel: !isEmpty(label)
   }, !link && React__default.createElement("div", {
-    onMouseLeave: onTooltipMouseLeave
+    onMouseLeave: toolTipOnMouseLeave
   }, React__default.createElement(Tooltip, {
-    content: descriptionToolTip,
+    content: toolTipContent,
     key: "tooltip1",
     placement: "bottom-end",
     trigger: 'mouseenter',
-    disabled: !descriptionToolTip,
+    disabled: toolTipDisabled,
     zIndex: 999999,
-    visible: forceVisible ? true : undefined
+    visible: toolTipVisible
   }, input())), link && !readOnly && React__default.createElement("div", null, React__default.createElement(Popover, {
     arrow: false,
     content: React__default.createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default.createElement(StyledLink, {

package/build/inputs/CompactTextInput/CompactTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompactTextInput.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.js"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useState, useEffect } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport { ReactComponent as LinkIcon } from '../../../icons/link.svg';\nimport { Tooltip, Popover } from '../../data';\nimport * as S from './CompactTextInput.styled';\n\n// const ConditionalWrapper = ({ condition, wrapper, children }) =>\n//   condition ? wrapper(children) : children;\n\n/**\n * Compact text inputs let users enter and edit text in the UI in a compact way. They typically appear in forms or displays of metadata.\n *\n * ### Import\n *\n * ``` js\n * import { CompactTextInput } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactTextInput from '@ntbjs/react-components/inputs/CompactTextInput'\n * ```\n */\nconst CompactTextInput = React.forwardRef(function CompactTextInput(\n  {\n    label,\n    inputType,\n    name,\n    defaultValue,\n    value,\n    placeholder,\n    link,\n    linkTarget,\n    linkHandler,\n    activeLinkHandler,\n    autoSelect,\n    readOnly,\n    disabled,\n    edit,\n    type,\n    descriptionToolTip,\n    bold,\n    hidden,\n    onChange: onChangeProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    loadingIcon,\n    successIcon,\n    ...props\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n  const [currentValue, setCurrentValue] = useState();\n  const [autoFocus, setAutoFocus] = useState(false);\n\n  const { forceVisible, onMouseLeave: onTooltipMouseLeave } = useTooltipAutoShow(descriptionToolTip);\n\n  useEffect(() => {\n    setCurrentValue(value || defaultValue);\n    setAutoFocus(false);\n  }, [value, defaultValue]);\n\n  const onChange = useCallback(\n    event => {\n      setCurrentValue(event.target.value);\n\n      if (!autoFocus) {\n        setAutoFocus(true);\n      }\n      if (isFunction(onChangeProp)) {\n        onChangeProp(event);\n      }\n    },\n    [onChangeProp]\n  );\n\n  const onFocus = useCallback(\n    event => {\n      if (autoSelect) {\n        event.target.select();\n      }\n\n      if (isFunction(onFocusProp)) {\n        onFocusProp(event);\n      }\n    },\n    [autoSelect, readOnly, onFocusProp]\n  );\n\n  const onBlur = useCallback(\n    event => {\n      if (isFunction(onBlurProp)) {\n        onBlurProp(event);\n      }\n    },\n    [onBlurProp]\n  );\n\n  const input = () => {\n    return (\n      <S.Input\n        ref={forwardedRef}\n        id={uniqueId}\n        key={uniqueId}\n        autoFocus={autoFocus}\n        inputtype={inputType}\n        name={name}\n        readOnly={readOnly}\n        disabled={disabled}\n        $edit={edit}\n        placeholder={placeholder}\n        defaultValue={defaultValue}\n        value={value}\n        $type={type}\n        $bold={bold}\n        $haslink={!isEmpty(link)}\n        onFocus={onFocus}\n        onChange={onChange}\n        onBlur={onBlur}\n      />\n    );\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.CompactTextInput {...props}>\n      {label && (\n        <S.Label htmlFor={uniqueId} disabled={disabled}>\n          {label}\n          <S.SuccessContainer>\n            {type === 'loading' && loadingIcon}\n            {type === 'success' && successIcon}\n          </S.SuccessContainer>\n        </S.Label>\n      )}\n      <S.InputContainer $hasLabel={!isEmpty(label)}>\n        {!link && (\n          <div onMouseLeave={onTooltipMouseLeave}>\n            <Tooltip\n              content={descriptionToolTip}\n              key=\"tooltip1\"\n              placement=\"bottom-end\"\n              trigger={'mouseenter'}\n              disabled={!descriptionToolTip}\n              zIndex={999999}\n              visible={forceVisible ? true : undefined}\n            >\n              {input()}\n            </Tooltip>\n          </div>\n        )}\n        {link && !readOnly && (\n          <div>\n            <Popover\n              arrow={false}\n              content={\n                <S.LinkPopoverContainer>\n                  {activeLinkHandler ? (\n                    <S.StyledLink\n                      href={link}\n                      target={linkTarget}\n                      onClick={e => {\n                        if (activeLinkHandler) {\n                          e.preventDefault();\n                          linkHandler();\n                        } else null;\n                      }}\n                      rel=\"noreferrer\"\n                    >\n                      <LinkIcon />\n                      {currentValue}\n                    </S.StyledLink>\n                  ) : (\n                    <S.StyledLink href={link} target={linkTarget} rel=\"noreferrer\">\n                      <LinkIcon />\n                      {currentValue}\n                    </S.StyledLink>\n                  )}\n                </S.LinkPopoverContainer>\n              }\n              key=\"tooltip2\"\n              placement=\"bottom-start\"\n              trigger=\"focusin\"\n              zIndex={999999}\n              interactive={true}\n            >\n              {input()}\n            </Popover>\n          </div>\n        )}\n        {link && readOnly && (\n          <S.ReadOnlyLinkContainer>\n            <S.StyledLink\n              href={link}\n              rel=\"noreferrer\"\n              style={{ display: 'inline-block' }}\n              target={linkTarget}\n            >\n              {currentValue}\n            </S.StyledLink>\n          </S.ReadOnlyLinkContainer>\n        )}\n        {!readOnly && !disabled && (\n          <>\n            <S.InputIconContainer $type={type}>\n              <EditNoteIcon />\n            </S.InputIconContainer>\n            {isEmpty(label) && (\n              <S.InputSuccessContainer>\n                {type === 'loading' && loadingIcon}\n                {type === 'success' && successIcon}\n              </S.InputSuccessContainer>\n            )}\n          </>\n        )}\n      </S.InputContainer>\n    </S.CompactTextInput>\n  );\n});\n\nCompactTextInput.propTypes = {\n  /**\n   * The label of the input field - leave `undefined` to hide the label\n   */\n  label: PropTypes.string,\n  /**\n   * Displays a light green background to show that an action was successful.\n   */\n  success: PropTypes.bool,\n  /**\n   * The input type - eg. `text`, `number`\n   */\n  inputType: PropTypes.string,\n  /**\n   * The input name\n   */\n  name: PropTypes.string,\n  /**\n   * The default value of the input - creates an uncontrolled input\n   */\n  defaultValue: PropTypes.string,\n  /**\n   * The value of the input - creates a controlled input\n   */\n  value: PropTypes.string,\n  /**\n   * The placeholder of the input\n   */\n  placeholder: PropTypes.string,\n  /**\n   * A URL associated with the input value. Creates a clickable link that accepts full or relative URL\n   */\n  link: PropTypes.string,\n  /**\n   * The target for the link. Only applies when the field is in read-only mode\n   */\n  linkTarget: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  /**\n   * Whether the link has a onClick event.\n   */\n  linkHandler: PropTypes.func,\n  /**\n   * Whether the handler should preceed the link behavior.\n   */\n  activeLinkHandler: PropTypes.bool,\n  /**\n   * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode\n   */\n  autoSelect: PropTypes.bool,\n  /**\n   * Whether the value is read only\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the value is disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Displays a grey background to show that value is editable\n   */\n  edit: PropTypes.bool,\n  /**\n   * There is an error present - 'error be prioritized over warnings if both are set to 'true'.\n   */\n  // error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  /**\n   * There is a warning present.\n   */\n  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  /**\n   * Whether to bold the input content - Slightly increases the font size and font weight of the input value\n   */\n  bold: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * Callback for `onChange`\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback for `onFocus`\n   */\n  onFocus: PropTypes.func,\n  /**\n   * Callback for `onBlur`\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Define the type based on error, warning, loading and success.\n   */\n  type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),\n  /**\n   * Description ToolTip text.\n   */\n  descriptionToolTip: PropTypes.string,\n  /**\n   * Icon element – E.g: `icon={<Spinner />}`\n   */\n  loadingIcon: PropTypes.element,\n  /**\n   * Icon element – E.g: `icon={<Check />}`\n   */\n  successIcon: PropTypes.element\n};\n\nCompactTextInput.defaultProps = {\n  inputType: 'text',\n  autoSelect: true,\n  linkTarget: '_self',\n  bold: false,\n  readOnly: false,\n  descriptionToolTip: '',\n  edit: false,\n  hidden: false,\n  type: '',\n  linkHandler: () => {},\n  activeLinkHandler: false,\n  onChange: () => {}\n};\n\nexport default CompactTextInput;\n"],"names":["CompactTextInput","React","forwardRef","label","inputType","name","defaultValue","value","placeholder","link","linkTarget","linkHandler","activeLinkHandler","autoSelect","readOnly","disabled","edit","type","descriptionToolTip","bold","hidden","onChange","onChangeProp","onFocus","onFocusProp","onBlur","onBlurProp","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","currentValue","setCurrentValue","autoFocus","setAutoFocus","forceVisible","onMouseLeave","onTooltipMouseLeave","useTooltipAutoShow","useEffect","useCallback","event","target","isFunction","select","input","createElement","S","ref","id","key","inputtype","$edit","$type","$bold","$haslink","isEmpty","htmlFor","$hasLabel","Tooltip","content","placement","trigger","zIndex","visible","undefined","Popover","arrow","href","onClick","e","preventDefault","rel","LinkIcon","interactive","style","display","Fragment","EditNoteIcon","propTypes","process","env","NODE_ENV","PropTypes","string","success","bool","oneOf","func","warning","oneOfType","element","defaultProps"],"mappings":"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"}
+{"version":3,"file":"CompactTextInput.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.js"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useState, useEffect } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport { ReactComponent as LinkIcon } from '../../../icons/link.svg';\nimport { Tooltip, Popover } from '../../data';\nimport * as S from './CompactTextInput.styled';\n\n// const ConditionalWrapper = ({ condition, wrapper, children }) =>\n//   condition ? wrapper(children) : children;\n\n/**\n * Compact text inputs let users enter and edit text in the UI in a compact way. They typically appear in forms or displays of metadata.\n *\n * ### Import\n *\n * ``` js\n * import { CompactTextInput } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactTextInput from '@ntbjs/react-components/inputs/CompactTextInput'\n * ```\n */\nconst CompactTextInput = React.forwardRef(function CompactTextInput(\n  {\n    label,\n    inputType,\n    name,\n    defaultValue,\n    value,\n    placeholder,\n    link,\n    linkTarget,\n    linkHandler,\n    activeLinkHandler,\n    autoSelect,\n    readOnly,\n    disabled,\n    edit,\n    type,\n    descriptionToolTip,\n    bold,\n    hidden,\n    onChange: onChangeProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    loadingIcon,\n    successIcon,\n    ...props\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n  const [currentValue, setCurrentValue] = useState();\n  const [autoFocus, setAutoFocus] = useState(false);\n\n  const { toolTipDisabled, toolTipVisible, toolTipOnMouseLeave, toolTipContent } =\n    useTooltipAutoShow(descriptionToolTip);\n\n  useEffect(() => {\n    setCurrentValue(value || defaultValue);\n    setAutoFocus(false);\n  }, [value, defaultValue]);\n\n  const onChange = useCallback(\n    event => {\n      setCurrentValue(event.target.value);\n\n      if (!autoFocus) {\n        setAutoFocus(true);\n      }\n      if (isFunction(onChangeProp)) {\n        onChangeProp(event);\n      }\n    },\n    [onChangeProp]\n  );\n\n  const onFocus = useCallback(\n    event => {\n      if (autoSelect) {\n        event.target.select();\n      }\n\n      if (isFunction(onFocusProp)) {\n        onFocusProp(event);\n      }\n    },\n    [autoSelect, readOnly, onFocusProp]\n  );\n\n  const onBlur = useCallback(\n    event => {\n      if (isFunction(onBlurProp)) {\n        onBlurProp(event);\n      }\n    },\n    [onBlurProp]\n  );\n\n  const input = () => {\n    return (\n      <S.Input\n        ref={forwardedRef}\n        id={uniqueId}\n        key={uniqueId}\n        autoFocus={autoFocus}\n        inputtype={inputType}\n        name={name}\n        readOnly={readOnly}\n        disabled={disabled}\n        $edit={edit}\n        placeholder={placeholder}\n        defaultValue={defaultValue}\n        value={value}\n        $type={type}\n        $bold={bold}\n        $haslink={!isEmpty(link)}\n        onFocus={onFocus}\n        onChange={onChange}\n        onBlur={onBlur}\n      />\n    );\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.CompactTextInput {...props}>\n      {label && (\n        <S.Label htmlFor={uniqueId} disabled={disabled}>\n          {label}\n          <S.SuccessContainer>\n            {type === 'loading' && loadingIcon}\n            {type === 'success' && successIcon}\n          </S.SuccessContainer>\n        </S.Label>\n      )}\n      <S.InputContainer $hasLabel={!isEmpty(label)}>\n        {!link && (\n          <div onMouseLeave={toolTipOnMouseLeave}>\n            <Tooltip\n              content={toolTipContent}\n              key=\"tooltip1\"\n              placement=\"bottom-end\"\n              trigger={'mouseenter'}\n              disabled={toolTipDisabled}\n              zIndex={999999}\n              visible={toolTipVisible}\n            >\n              {input()}\n            </Tooltip>\n          </div>\n        )}\n        {link && !readOnly && (\n          <div>\n            <Popover\n              arrow={false}\n              content={\n                <S.LinkPopoverContainer>\n                  {activeLinkHandler ? (\n                    <S.StyledLink\n                      href={link}\n                      target={linkTarget}\n                      onClick={e => {\n                        if (activeLinkHandler) {\n                          e.preventDefault();\n                          linkHandler();\n                        } else null;\n                      }}\n                      rel=\"noreferrer\"\n                    >\n                      <LinkIcon />\n                      {currentValue}\n                    </S.StyledLink>\n                  ) : (\n                    <S.StyledLink href={link} target={linkTarget} rel=\"noreferrer\">\n                      <LinkIcon />\n                      {currentValue}\n                    </S.StyledLink>\n                  )}\n                </S.LinkPopoverContainer>\n              }\n              key=\"tooltip2\"\n              placement=\"bottom-start\"\n              trigger=\"focusin\"\n              zIndex={999999}\n              interactive={true}\n            >\n              {input()}\n            </Popover>\n          </div>\n        )}\n        {link && readOnly && (\n          <S.ReadOnlyLinkContainer>\n            <S.StyledLink\n              href={link}\n              rel=\"noreferrer\"\n              style={{ display: 'inline-block' }}\n              target={linkTarget}\n            >\n              {currentValue}\n            </S.StyledLink>\n          </S.ReadOnlyLinkContainer>\n        )}\n        {!readOnly && !disabled && (\n          <>\n            <S.InputIconContainer $type={type}>\n              <EditNoteIcon />\n            </S.InputIconContainer>\n            {isEmpty(label) && (\n              <S.InputSuccessContainer>\n                {type === 'loading' && loadingIcon}\n                {type === 'success' && successIcon}\n              </S.InputSuccessContainer>\n            )}\n          </>\n        )}\n      </S.InputContainer>\n    </S.CompactTextInput>\n  );\n});\n\nCompactTextInput.propTypes = {\n  /**\n   * The label of the input field - leave `undefined` to hide the label\n   */\n  label: PropTypes.string,\n  /**\n   * Displays a light green background to show that an action was successful.\n   */\n  success: PropTypes.bool,\n  /**\n   * The input type - eg. `text`, `number`\n   */\n  inputType: PropTypes.string,\n  /**\n   * The input name\n   */\n  name: PropTypes.string,\n  /**\n   * The default value of the input - creates an uncontrolled input\n   */\n  defaultValue: PropTypes.string,\n  /**\n   * The value of the input - creates a controlled input\n   */\n  value: PropTypes.string,\n  /**\n   * The placeholder of the input\n   */\n  placeholder: PropTypes.string,\n  /**\n   * A URL associated with the input value. Creates a clickable link that accepts full or relative URL\n   */\n  link: PropTypes.string,\n  /**\n   * The target for the link. Only applies when the field is in read-only mode\n   */\n  linkTarget: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  /**\n   * Whether the link has a onClick event.\n   */\n  linkHandler: PropTypes.func,\n  /**\n   * Whether the handler should preceed the link behavior.\n   */\n  activeLinkHandler: PropTypes.bool,\n  /**\n   * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode\n   */\n  autoSelect: PropTypes.bool,\n  /**\n   * Whether the value is read only\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the value is disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Displays a grey background to show that value is editable\n   */\n  edit: PropTypes.bool,\n  /**\n   * There is an error present - 'error be prioritized over warnings if both are set to 'true'.\n   */\n  // error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  /**\n   * There is a warning present.\n   */\n  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  /**\n   * Whether to bold the input content - Slightly increases the font size and font weight of the input value\n   */\n  bold: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * Callback for `onChange`\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback for `onFocus`\n   */\n  onFocus: PropTypes.func,\n  /**\n   * Callback for `onBlur`\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Define the type based on error, warning, loading and success.\n   */\n  type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),\n  /**\n   * Description ToolTip text.\n   */\n  descriptionToolTip: PropTypes.string,\n  /**\n   * Icon element – E.g: `icon={<Spinner />}`\n   */\n  loadingIcon: PropTypes.element,\n  /**\n   * Icon element – E.g: `icon={<Check />}`\n   */\n  successIcon: PropTypes.element\n};\n\nCompactTextInput.defaultProps = {\n  inputType: 'text',\n  autoSelect: true,\n  linkTarget: '_self',\n  bold: false,\n  readOnly: false,\n  descriptionToolTip: '',\n  edit: false,\n  hidden: false,\n  type: '',\n  linkHandler: () => {},\n  activeLinkHandler: false,\n  onChange: () => {}\n};\n\nexport default CompactTextInput;\n"],"names":["CompactTextInput","React","forwardRef","label","inputType","name","defaultValue","value","placeholder","link","linkTarget","linkHandler","activeLinkHandler","autoSelect","readOnly","disabled","edit","type","descriptionToolTip","bold","hidden","onChange","onChangeProp","onFocus","onFocusProp","onBlur","onBlurProp","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","currentValue","setCurrentValue","autoFocus","setAutoFocus","toolTipDisabled","toolTipVisible","toolTipOnMouseLeave","toolTipContent","useTooltipAutoShow","useEffect","useCallback","event","target","isFunction","select","input","createElement","S","ref","id","key","inputtype","$edit","$type","$bold","$haslink","isEmpty","htmlFor","$hasLabel","onMouseLeave","Tooltip","content","placement","trigger","zIndex","visible","Popover","arrow","href","onClick","e","preventDefault","rel","LinkIcon","interactive","style","display","Fragment","EditNoteIcon","propTypes","process","env","NODE_ENV","PropTypes","string","success","bool","oneOf","func","warning","oneOfType","element","defaultProps"],"mappings":"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"}

package/build/inputs/TextArea/TextArea.js

@@ -50,8 +50,10 @@ const TextArea = React__default.forwardRef(function TextArea({
   const [autoFocus, setAutoFocus] = useState(false);
   const [uniqueId] = useState(nanoid());
   const {
-    forceVisible: forceShowTooltip,
-    onMouseLeave: onTooltipMouseLeave
+    toolTipDisabled,
+    toolTipVisible,
+    toolTipOnMouseLeave,
+    toolTipContent
   } = useTooltipAutoShow(descriptionToolTip);
   useEffect(() => {
     setAutoFocus(false);
@@ -125,15 +127,15 @@ const TextArea = React__default.forwardRef(function TextArea({
   };
   if (hidden) return null;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    onMouseLeave: onTooltipMouseLeave
+    onMouseLeave: toolTipOnMouseLeave
   }, React__default.createElement(Tooltip, {
-    content: descriptionToolTip,
+    content: toolTipContent,
     key: "tooltipTextArea1",
     placement: "bottom-end",
     trigger: 'mouseenter',
-    disabled: !descriptionToolTip,
+    disabled: toolTipDisabled,
     zIndex: 999999,
-    visible: forceShowTooltip ? true : undefined
+    visible: toolTipVisible
   }, input())));
 });
 TextArea.defaultProps = {

package/build/inputs/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/inputs/TextArea/TextArea.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\n\nimport { isEmpty } from 'lodash';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from '../../data';\n\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextArea.styled';\n\n/**\n * Text areas let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextArea } from '@ntbjs/react-components/inputs'\n * // or\n * import TextArea from '@ntbjs/react-components/inputs/TextArea'\n * ```\n */\nconst TextArea = React.forwardRef(function TextArea(\n  {\n    value,\n    defaultValue,\n    name,\n    label,\n    placeholder,\n    required,\n    disabled,\n    hidden,\n    readOnly,\n    edit,\n    autoComplete,\n    description,\n    type,\n    icon,\n    rows,\n    className,\n    style,\n    onChange,\n    onBlur,\n    noBorder,\n    loadingIcon,\n    successIcon,\n    padding,\n    descriptionToolTip,\n    borderRadius,\n    fieldLabel,\n    ...rest\n  },\n  forwardedRef\n) {\n  const textInputDomNode = useRef(null);\n  const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n\n  const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));\n  const [autoFocus, setAutoFocus] = useState(false);\n\n  const [uniqueId] = useState(nanoid());\n\n  const { forceVisible: forceShowTooltip, onMouseLeave: onTooltipMouseLeave } =\n    useTooltipAutoShow(descriptionToolTip);\n\n  useEffect(() => {\n    setAutoFocus(false);\n  }, [value, defaultValue]);\n\n  const onKeyDown = useCallback(event => {\n    if (event.key === 'Enter') {\n      event.stopPropagation();\n    }\n  }, []);\n\n  const input = () => {\n    return (\n      <S.TextAreaContainter>\n        {fieldLabel && (\n          <S.Label htmlFor={uniqueId} disabled={disabled}>\n            {fieldLabel}\n            <S.SuccessContainerLabel>\n              {type === 'loading' && loadingIcon}\n              {type === 'success' && successIcon}\n            </S.SuccessContainerLabel>\n          </S.Label>\n        )}\n        <S.TextInput\n          $fieldLabel={!isEmpty(fieldLabel)}\n          disabled={disabled}\n          readOnly={readOnly}\n          $type={type}\n          className={className}\n          style={style}\n        >\n          <S.TextInputFieldIconAlert $type={type}>{icon}</S.TextInputFieldIconAlert>\n          <S.TextInputField\n            autoFocus={autoFocus}\n            $borderRadius={borderRadius}\n            ref={textInputRef}\n            rows={rows}\n            value={value}\n            defaultValue={defaultValue}\n            name={name}\n            placeholder={placeholder || ' '}\n            required={required}\n            readOnly={readOnly}\n            disabled={disabled}\n            $edit={edit}\n            $type={type}\n            autoComplete={autoComplete}\n            $hasIcon={Boolean(icon)}\n            id={`text-input-${uniqueId}`}\n            key={uniqueId}\n            $padding={padding}\n            onChange={e => {\n              if (e.target.value) {\n                setInputIsEmpty(false);\n                if (!autoFocus) {\n                  setAutoFocus(true);\n                }\n              } else {\n                setInputIsEmpty(true);\n                if (!autoFocus) {\n                  setAutoFocus(true);\n                }\n              }\n              onChange(e);\n            }}\n            onKeyDown={onKeyDown}\n            onBlur={onBlur}\n            $noBorder={noBorder}\n            {...rest}\n          />\n          {!fieldLabel && (type === 'loading' || type === 'success') && (\n            <S.SuccessContainer>\n              {type === 'loading' && loadingIcon}\n              {type === 'success' && successIcon}\n            </S.SuccessContainer>\n          )}\n          {!readOnly && (edit || noBorder) && (\n            <S.InputIconContainer disabled={disabled}>\n              <EditNoteIcon className={padding === 'small' ? 'smallPadingIcon' : undefined} />\n            </S.InputIconContainer>\n          )}\n          {label && (\n            <S.TextInputLabel\n              htmlFor={`text-input-${uniqueId}`}\n              $hasPlaceholder={Boolean(placeholder)}\n              $hasIcon={Boolean(icon)}\n              $inputIsEmpty={inputIsEmpty}\n            >\n              {label}\n              {required && ' *'}\n            </S.TextInputLabel>\n          )}\n          {typeof description === 'string' && description.length > 0 && (\n            <S.Description $type={type}>{description}</S.Description>\n          )}\n        </S.TextInput>\n      </S.TextAreaContainter>\n    );\n  };\n\n  if (hidden) return null;\n\n  return (\n    <>\n      <div onMouseLeave={onTooltipMouseLeave}>\n        <Tooltip\n          content={descriptionToolTip}\n          key=\"tooltipTextArea1\"\n          placement=\"bottom-end\"\n          trigger={'mouseenter'}\n          disabled={!descriptionToolTip}\n          zIndex={999999}\n          visible={forceShowTooltip ? true : undefined}\n        >\n          {input()}\n        </Tooltip>\n      </div>\n    </>\n  );\n});\n\nTextArea.defaultProps = {\n  rows: 4,\n  noBorder: false,\n  readOnly: false,\n  edit: false,\n  hidden: false,\n  type: '',\n  padding: 'medium',\n  descriptionToolTip: '',\n  onChange: () => {},\n  borderRadius: 0\n};\n\nTextArea.propTypes = {\n  /**\n   * Value to be sent. Typically the content of the text area.\n   */\n  value: PropTypes.string,\n\n  /**\n   * Default value/text to be displayed in the text area by default.\n   */\n  defaultValue: PropTypes.string,\n\n  /**\n   * Name of the text area (used when sending form data)\n   */\n  name: PropTypes.string,\n\n  /**\n   * Label text for the text area. If the text area is empty (no input and no placeholder)\n   * and isn't in focus, the label text will be displayed grayed out in the text area itself.\n   * Otherwise, the label text will be displayed in the top left corner.\n   */\n  label: PropTypes.string,\n\n  /**\n   * Field Label text for the text area field. I\n   */\n  fieldLabel: PropTypes.string,\n\n  /**\n   * Placeholder text to be displayed if the text area is empty (no input)\n   */\n  placeholder: PropTypes.string,\n\n  /**\n   * Whether the user is required to fill in the text area\n   */\n  required: PropTypes.bool,\n\n  /**\n   * Whether the text area is disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * Whether the text area is read-only\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Displays a grey background to show that value is editable\n   */\n  edit: PropTypes.bool,\n  /**\n   * ?\n   */\n  autoComplete: PropTypes.string,\n  /**\n   * Descriptive text displayed below the text area\n   */\n  description: PropTypes.string,\n\n  /**\n   * Optional icon to be displayed left of the text inside the text area\n   */\n  icon: PropTypes.element,\n  /**\n   * How many rows/lines of text to be displayed by default\n   */\n  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Add custom class names to the HTML element\n   */\n  className: PropTypes.string,\n  /**\n   * Add custom CSS styling\n   */\n  style: PropTypes.object,\n  /**\n   * Add padding (small-medium-large)\n   */\n  padding: PropTypes.oneOf(['small', 'medium', 'large']),\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange: PropTypes.func,\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur: PropTypes.func,\n  noBorder: PropTypes.bool,\n  // warningAlert: PropTypes.bool,\n  // errorAlert: PropTypes.bool,\n  /**\n   * Define the type based on error,error-border , warning, loading and success.\n   */\n  type: PropTypes.oneOf([\n    '',\n    'error',\n    'error-border',\n    'warning-border',\n    'warning',\n    'loading',\n    'success'\n  ]),\n  /**\n   * Icon element â€\" E.g: `icon={<Spinner />}`\n   */\n  loadingIcon: PropTypes.element,\n  /**\n   * Icon element â€\" E.g: `icon={<Check />}`\n   */\n  successIcon: PropTypes.element,\n  /**\n   * Description ToolTip text.\n   */\n  descriptionToolTip: PropTypes.string,\n  /**\n   * Border Radius for rounded borders.\n   */\n  borderRadius: PropTypes.number\n};\n\nexport default TextArea;\n"],"names":["TextArea","React","forwardRef","value","defaultValue","name","label","placeholder","required","disabled","hidden","readOnly","edit","autoComplete","description","type","icon","rows","className","style","onChange","onBlur","noBorder","loadingIcon","successIcon","padding","descriptionToolTip","borderRadius","fieldLabel","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","inputIsEmpty","setInputIsEmpty","useState","autoFocus","setAutoFocus","uniqueId","nanoid","forceVisible","forceShowTooltip","onMouseLeave","onTooltipMouseLeave","useTooltipAutoShow","useEffect","onKeyDown","useCallback","event","key","stopPropagation","input","createElement","S","htmlFor","$fieldLabel","isEmpty","$type","_extends","$borderRadius","ref","$edit","$hasIcon","Boolean","id","$padding","e","target","$noBorder","EditNoteIcon","undefined","$hasPlaceholder","$inputIsEmpty","length","Fragment","Tooltip","content","placement","trigger","zIndex","visible","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","bool","element","oneOfType","number","object","oneOf","func"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/inputs/TextArea/TextArea.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\n\nimport { isEmpty } from 'lodash';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from '../../data';\n\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextArea.styled';\n\n/**\n * Text areas let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextArea } from '@ntbjs/react-components/inputs'\n * // or\n * import TextArea from '@ntbjs/react-components/inputs/TextArea'\n * ```\n */\nconst TextArea = React.forwardRef(function TextArea(\n  {\n    value,\n    defaultValue,\n    name,\n    label,\n    placeholder,\n    required,\n    disabled,\n    hidden,\n    readOnly,\n    edit,\n    autoComplete,\n    description,\n    type,\n    icon,\n    rows,\n    className,\n    style,\n    onChange,\n    onBlur,\n    noBorder,\n    loadingIcon,\n    successIcon,\n    padding,\n    descriptionToolTip,\n    borderRadius,\n    fieldLabel,\n    ...rest\n  },\n  forwardedRef\n) {\n  const textInputDomNode = useRef(null);\n  const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n\n  const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));\n  const [autoFocus, setAutoFocus] = useState(false);\n\n  const [uniqueId] = useState(nanoid());\n\n  const { toolTipDisabled, toolTipVisible, toolTipOnMouseLeave, toolTipContent } =\n    useTooltipAutoShow(descriptionToolTip);\n\n  useEffect(() => {\n    setAutoFocus(false);\n  }, [value, defaultValue]);\n\n  const onKeyDown = useCallback(event => {\n    if (event.key === 'Enter') {\n      event.stopPropagation();\n    }\n  }, []);\n\n  const input = () => {\n    return (\n      <S.TextAreaContainter>\n        {fieldLabel && (\n          <S.Label htmlFor={uniqueId} disabled={disabled}>\n            {fieldLabel}\n            <S.SuccessContainerLabel>\n              {type === 'loading' && loadingIcon}\n              {type === 'success' && successIcon}\n            </S.SuccessContainerLabel>\n          </S.Label>\n        )}\n        <S.TextInput\n          $fieldLabel={!isEmpty(fieldLabel)}\n          disabled={disabled}\n          readOnly={readOnly}\n          $type={type}\n          className={className}\n          style={style}\n        >\n          <S.TextInputFieldIconAlert $type={type}>{icon}</S.TextInputFieldIconAlert>\n          <S.TextInputField\n            autoFocus={autoFocus}\n            $borderRadius={borderRadius}\n            ref={textInputRef}\n            rows={rows}\n            value={value}\n            defaultValue={defaultValue}\n            name={name}\n            placeholder={placeholder || ' '}\n            required={required}\n            readOnly={readOnly}\n            disabled={disabled}\n            $edit={edit}\n            $type={type}\n            autoComplete={autoComplete}\n            $hasIcon={Boolean(icon)}\n            id={`text-input-${uniqueId}`}\n            key={uniqueId}\n            $padding={padding}\n            onChange={e => {\n              if (e.target.value) {\n                setInputIsEmpty(false);\n                if (!autoFocus) {\n                  setAutoFocus(true);\n                }\n              } else {\n                setInputIsEmpty(true);\n                if (!autoFocus) {\n                  setAutoFocus(true);\n                }\n              }\n              onChange(e);\n            }}\n            onKeyDown={onKeyDown}\n            onBlur={onBlur}\n            $noBorder={noBorder}\n            {...rest}\n          />\n          {!fieldLabel && (type === 'loading' || type === 'success') && (\n            <S.SuccessContainer>\n              {type === 'loading' && loadingIcon}\n              {type === 'success' && successIcon}\n            </S.SuccessContainer>\n          )}\n          {!readOnly && (edit || noBorder) && (\n            <S.InputIconContainer disabled={disabled}>\n              <EditNoteIcon className={padding === 'small' ? 'smallPadingIcon' : undefined} />\n            </S.InputIconContainer>\n          )}\n          {label && (\n            <S.TextInputLabel\n              htmlFor={`text-input-${uniqueId}`}\n              $hasPlaceholder={Boolean(placeholder)}\n              $hasIcon={Boolean(icon)}\n              $inputIsEmpty={inputIsEmpty}\n            >\n              {label}\n              {required && ' *'}\n            </S.TextInputLabel>\n          )}\n          {typeof description === 'string' && description.length > 0 && (\n            <S.Description $type={type}>{description}</S.Description>\n          )}\n        </S.TextInput>\n      </S.TextAreaContainter>\n    );\n  };\n\n  if (hidden) return null;\n\n  return (\n    <>\n      <div onMouseLeave={toolTipOnMouseLeave}>\n        <Tooltip\n          content={toolTipContent}\n          key=\"tooltipTextArea1\"\n          placement=\"bottom-end\"\n          trigger={'mouseenter'}\n          disabled={toolTipDisabled}\n          zIndex={999999}\n          visible={toolTipVisible}\n        >\n          {input()}\n        </Tooltip>\n      </div>\n    </>\n  );\n});\n\nTextArea.defaultProps = {\n  rows: 4,\n  noBorder: false,\n  readOnly: false,\n  edit: false,\n  hidden: false,\n  type: '',\n  padding: 'medium',\n  descriptionToolTip: '',\n  onChange: () => {},\n  borderRadius: 0\n};\n\nTextArea.propTypes = {\n  /**\n   * Value to be sent. Typically the content of the text area.\n   */\n  value: PropTypes.string,\n\n  /**\n   * Default value/text to be displayed in the text area by default.\n   */\n  defaultValue: PropTypes.string,\n\n  /**\n   * Name of the text area (used when sending form data)\n   */\n  name: PropTypes.string,\n\n  /**\n   * Label text for the text area. If the text area is empty (no input and no placeholder)\n   * and isn't in focus, the label text will be displayed grayed out in the text area itself.\n   * Otherwise, the label text will be displayed in the top left corner.\n   */\n  label: PropTypes.string,\n\n  /**\n   * Field Label text for the text area field. I\n   */\n  fieldLabel: PropTypes.string,\n\n  /**\n   * Placeholder text to be displayed if the text area is empty (no input)\n   */\n  placeholder: PropTypes.string,\n\n  /**\n   * Whether the user is required to fill in the text area\n   */\n  required: PropTypes.bool,\n\n  /**\n   * Whether the text area is disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * Whether the text area is read-only\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Displays a grey background to show that value is editable\n   */\n  edit: PropTypes.bool,\n  /**\n   * ?\n   */\n  autoComplete: PropTypes.string,\n  /**\n   * Descriptive text displayed below the text area\n   */\n  description: PropTypes.string,\n\n  /**\n   * Optional icon to be displayed left of the text inside the text area\n   */\n  icon: PropTypes.element,\n  /**\n   * How many rows/lines of text to be displayed by default\n   */\n  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Add custom class names to the HTML element\n   */\n  className: PropTypes.string,\n  /**\n   * Add custom CSS styling\n   */\n  style: PropTypes.object,\n  /**\n   * Add padding (small-medium-large)\n   */\n  padding: PropTypes.oneOf(['small', 'medium', 'large']),\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange: PropTypes.func,\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur: PropTypes.func,\n  noBorder: PropTypes.bool,\n  // warningAlert: PropTypes.bool,\n  // errorAlert: PropTypes.bool,\n  /**\n   * Define the type based on error,error-border , warning, loading and success.\n   */\n  type: PropTypes.oneOf([\n    '',\n    'error',\n    'error-border',\n    'warning-border',\n    'warning',\n    'loading',\n    'success'\n  ]),\n  /**\n   * Icon element â€\" E.g: `icon={<Spinner />}`\n   */\n  loadingIcon: PropTypes.element,\n  /**\n   * Icon element â€\" E.g: `icon={<Check />}`\n   */\n  successIcon: PropTypes.element,\n  /**\n   * Description ToolTip text.\n   */\n  descriptionToolTip: PropTypes.string,\n  /**\n   * Border Radius for rounded borders.\n   */\n  borderRadius: PropTypes.number\n};\n\nexport default TextArea;\n"],"names":["TextArea","React","forwardRef","value","defaultValue","name","label","placeholder","required","disabled","hidden","readOnly","edit","autoComplete","description","type","icon","rows","className","style","onChange","onBlur","noBorder","loadingIcon","successIcon","padding","descriptionToolTip","borderRadius","fieldLabel","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","inputIsEmpty","setInputIsEmpty","useState","autoFocus","setAutoFocus","uniqueId","nanoid","toolTipDisabled","toolTipVisible","toolTipOnMouseLeave","toolTipContent","useTooltipAutoShow","useEffect","onKeyDown","useCallback","event","key","stopPropagation","input","createElement","S","htmlFor","$fieldLabel","isEmpty","$type","_extends","$borderRadius","ref","$edit","$hasIcon","Boolean","id","$padding","e","target","$noBorder","EditNoteIcon","undefined","$hasPlaceholder","$inputIsEmpty","length","Fragment","onMouseLeave","Tooltip","content","placement","trigger","zIndex","visible","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","bool","element","oneOfType","number","object","oneOf","func"],"mappings":"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"}

package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.js

@@ -344,21 +344,21 @@ const AssetGalleryBase = React__default.forwardRef(function AssetGalleryBase({
     extendedSelectMode: Boolean(selectedAssetKeys.length),
     onAssetSelected: onAssetSelected,
     onAssetUnselected: onAssetUnselected,
-    $softSelected: softSelectedAssetKey === asset.key,
+    softSelected: softSelectedAssetKey === asset.key,
     component: component
   }) : React__default.createElement(AssetGalleryCompactCard, {
     asset: asset,
     activeSummaryCard: activeSummaryCard,
     displayIcon: displayIcon,
-    $hasHeightAndWidth: asset.layout.hasHeightAndWidth,
-    $collapseExtraInfo: asset.layout.width < 90,
+    hasHeightAndWidth: asset.layout.hasHeightAndWidth,
+    collapseExtraInfo: asset.layout.width < 90,
     selectable: 'selectable' in asset ? asset.selectable : selectable,
     selected: selectedAssetKeys.includes(asset.key),
     customSelectedBorder: customSelectedBorder,
     extendedSelectMode: Boolean(selectedAssetKeys.length),
     onAssetSelected: onAssetSelected,
     onAssetUnselected: onAssetUnselected,
-    $softSelected: softSelectedAssetKey === asset.key,
+    softSelected: softSelectedAssetKey === asset.key,
     component: component
   }))))));
 });