@ntbjs/react-components 2.0.2-rc.2 → 2.0.2-rc.3

package/build/inputs/ActionButton/ActionButton.js

@@ -10,15 +10,17 @@ const ActionButton = React__default.forwardRef(function ActionButton({
   onClick,
   actionWidthHeight,
   backgroundColors,
+  useShadow,
   ...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, backgroundColors, useShadow, ...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   * Apply shadow to the 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","backgroundColors","useShadow","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,gBAAgB;EAAEC,SAAS;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,EAAEV,gBAAiB;AACpCW,IAAAA,UAAU,EAAEV,SAAAA;GACRC,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;EAIvBpB,gBAAgB,EAAEgB,SAAS,CAACK,OAAO,CAACL,SAAS,CAACM,MAAM,CAAC;EAIrDvB,iBAAiB,EAAEiB,SAAS,CAACO,KAAK;EAIlCtB,SAAS,EAAEe,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;AAC3BE,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.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')}`)}
 
   &: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":";;;;AAIO,MAAMA,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAClE;AACA;AACA;AACA;AACA,SAAWC,EAAAA,KAAK,IAAI,CAAGA,EAAAA,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,CAAI,EAAA,CAAA,CAAA;AACrD,UAAYD,EAAAA,KAAK,IAAI,CAAGA,EAAAA,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,CAAI,EAAA,CAAA,CAAA;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAID,KAAK,IAAI;AACT,EAAA,MAAME,gBAAgB,GAAGF,KAAK,EAAEG,gBAAgB,GAAG,CAAC,CAAC,IAAIH,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,CAAA;AACzF,EAAA,MAAMC,iBAAiB,GAAGN,KAAK,EAAEG,gBAAgB,GAAG,CAAC,CAAC,IAAIH,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,CAAA;AAC1F,EAAA,OAAOL,KAAK,CAACI,KAAK,CAACG,SAAS,CAC1B,kBAAkB,EAClB,CAAA,kCAAA,EAAqCL,gBAAgB,CAAwB,sBAAA,CAAA,EAC7E,CAAqCI,kCAAAA,EAAAA,iBAAiB,wBACxD,CAAC,CAAA;AACH,CAAC,CAAA;AACH;AACA;AACA,qBAAuBN,EAAAA,KAAK,IACpBQ,IAAI,CAACC,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,EAAED,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAC5E,MAAQD,EAAAA,KAAK,IAAIQ,IAAI,CAACC,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,EAAED,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AACrF;AACA;AACA,MAAQD,EAAAA,KAAK,IACLA,KAAK,CAACI,KAAK,CAACG,SAAS,CACnB,OAAO,EACPP,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACT;AACA;AACA;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACU,MAAM,IACZC,GAAG,CAAA;AACP,uBAAA,EAAyBH,IAAI,CAACC,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,EAAED,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAC7F,QAAA,EAAUO,IAAI,CAACC,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,EAAED,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAC9E;AACA;AACA,QAAUD,EAAAA,KAAK,CAACI,KAAK,CAACG,SAAS,CACrB,OAAO,EACPP,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACT;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACY,SAAS,GACXZ,KAAK,CAACI,KAAK,CAACG,SAAS,CACnB,YAAY,EACZ,CAAA,YAAA,EAAeM,IAAI,CAACb,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAA,CAAE,EACzD,CAAeL,YAAAA,EAAAA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,CAC9C,CAAA,CAAC,GACD,IAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAiBL,EAAAA,KAAK,IAAI,CAAA,EAAGA,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAI,EAAA,CAAA,CAAA;AAChE,gBAAkBD,EAAAA,KAAK,IAAI,CAAA,EAAGA,KAAK,CAACC,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAI,EAAA,CAAA,CAAA;AACjE;AACA;AACA;AACA;;;;"}
+{"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.startsWith('$');\n\nexport const ActionButton = styled.button\n  .withConfig({ shouldForwardProp })\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\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

@@ -1,7 +1,7 @@
 import { isFunction, isEmpty } from 'lodash';
 import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
-import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
+import React__default, { useState, useEffect, useCallback, useMemo, memo } from 'react';
 import { ReactComponent as SvgEditNote } from '../../icons/edit-note.svg.js';
 import { ReactComponent as SvgLink } from '../../icons/link.svg.js';
 import '../../data/Alert/Alert.js';
@@ -11,7 +11,7 @@ import '../../data/Tab/Tab.js';
 import '../../data/Tabs/Tabs.js';
 import Tooltip from '../../data/Tooltip/Tooltip.js';
 import '../../data/VerificationStatusIcon/VerificationStatusIcon.js';
-import { CompactTextInput as CompactTextInput$1, Label, SuccessContainer, InputContainer, LinkPopoverContainer, StyledLink, ReadOnlyLinkContainer, InputIconContainer, InputSuccessContainer, Input } from './CompactTextInput.styled.js';
+import { LinkPopoverContainer, StyledLink, Input, CompactTextInput as CompactTextInput$2, Label, SuccessContainer, InputContainer, ReadOnlyLinkContainer, InputIconContainer, InputSuccessContainer } from './CompactTextInput.styled.js';
 
 const CompactTextInput = React__default.forwardRef(function CompactTextInput({
   label,
@@ -39,21 +39,13 @@ const CompactTextInput = React__default.forwardRef(function CompactTextInput({
   successIcon,
   ...props
 }, forwardedRef) {
-  const [uniqueId] = useState(nanoid());
-  const [currentValue, setCurrentValue] = useState();
-  const [autoFocus, setAutoFocus] = useState(false);
-  const memoizedDescriptionToolTip = useMemo(() => {
-    return descriptionToolTip;
-  }, [descriptionToolTip]);
+  const [uniqueId] = useState(() => nanoid());
+  const [currentValue, setCurrentValue] = useState(value || defaultValue);
   useEffect(() => {
     setCurrentValue(value || defaultValue);
-    setAutoFocus(false);
   }, [value, defaultValue]);
   const onChange = useCallback(event => {
     setCurrentValue(event.target.value);
-    if (!autoFocus) {
-      setAutoFocus(true);
-    }
     if (isFunction(onChangeProp)) {
       onChangeProp(event);
     }
@@ -65,78 +57,72 @@ const CompactTextInput = React__default.forwardRef(function CompactTextInput({
     if (isFunction(onFocusProp)) {
       onFocusProp(event);
     }
-  }, [autoSelect, readOnly, onFocusProp]);
+  }, [autoSelect, onFocusProp]);
   const onBlur = useCallback(event => {
     if (isFunction(onBlurProp)) {
       onBlurProp(event);
     }
   }, [onBlurProp]);
-  const input = () => {
-    return React__default.createElement(Input, {
-      ref: forwardedRef,
-      id: uniqueId,
-      key: uniqueId,
-      autoFocus: autoFocus,
-      inputtype: inputType,
-      name: name,
-      readOnly: readOnly,
-      disabled: disabled,
-      $edit: edit,
-      placeholder: placeholder,
-      defaultValue: defaultValue,
-      value: value,
-      type: type,
-      $bold: bold,
-      $haslink: !isEmpty(link),
-      onFocus: onFocus,
-      onChange: onChange,
-      onBlur: onBlur
-    });
-  };
+  const linkPopoverContent = useMemo(() => React__default.createElement(LinkPopoverContainer, null, React__default.createElement(StyledLink, {
+    href: link,
+    target: linkTarget,
+    onClick: e => {
+      if (activeLinkHandler) {
+        e.preventDefault();
+        linkHandler();
+      }
+    },
+    rel: "noreferrer"
+  }, React__default.createElement(SvgLink, null), currentValue)), [link, linkTarget, activeLinkHandler, linkHandler, currentValue]);
+  const inputElement = React__default.createElement(Input, {
+    ref: forwardedRef,
+    id: uniqueId,
+    type: inputType,
+    name: name,
+    readOnly: readOnly,
+    disabled: disabled,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    value: value,
+    $bold: bold,
+    $haslink: !isEmpty(link),
+    $edit: edit,
+    $type: type,
+    onFocus: onFocus,
+    onChange: onChange,
+    onBlur: onBlur
+  });
   if (hidden) return null;
-  return React__default.createElement(CompactTextInput$1, props, label && React__default.createElement(Label, {
+  const hasLink = link && !readOnly;
+  return React__default.createElement(CompactTextInput$2, props, label && React__default.createElement(Label, {
     htmlFor: uniqueId,
-    disabled: disabled
-  }, label, React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(InputContainer, {
+    $disabled: disabled
+  }, label, React__default.createElement(SuccessContainer, {
+    $type: type
+  }, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(InputContainer, {
     $hasLabel: !isEmpty(label)
-  }, !memoizedDescriptionToolTip && !link && React__default.createElement("div", null, input()), memoizedDescriptionToolTip && !link && React__default.createElement("div", null, React__default.createElement(Tooltip, {
-    content: memoizedDescriptionToolTip,
-    key: "tooltip1",
-    placement: "bottom-end",
-    trigger: 'mouseenter',
-    zIndex: 999999
-  }, input())), link && !readOnly && React__default.createElement("div", null, React__default.createElement(Popover, {
+  }, link && readOnly ? React__default.createElement(ReadOnlyLinkContainer, null, React__default.createElement(StyledLink, {
+    href: link,
+    rel: "noreferrer",
+    target: linkTarget
+  }, currentValue)) : React__default.createElement("div", null, hasLink ? React__default.createElement(Popover, {
     arrow: false,
-    content: React__default.createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default.createElement(StyledLink, {
-      href: link,
-      target: linkTarget,
-      onClick: e => {
-        if (activeLinkHandler) {
-          e.preventDefault();
-          linkHandler();
-        }
-      },
-      rel: "noreferrer"
-    }, React__default.createElement(SvgLink, null), currentValue) : React__default.createElement(StyledLink, {
-      href: link,
-      target: linkTarget,
-      rel: "noreferrer"
-    }, React__default.createElement(SvgLink, null), currentValue)),
-    key: "tooltip2",
+    content: linkPopoverContent,
     placement: "bottom-start",
     trigger: "focusin",
     zIndex: 999999,
     interactive: true
-  }, input())), link && readOnly && React__default.createElement(ReadOnlyLinkContainer, null, React__default.createElement(StyledLink, {
-    href: link,
-    rel: "noreferrer",
-    style: {
-      display: 'inline-block'
-    },
-    target: linkTarget
-  }, currentValue)), !readOnly && !disabled && React__default.createElement(React__default.Fragment, null, React__default.createElement(InputIconContainer, {
-    type: type
-  }, React__default.createElement(SvgEditNote, null)), isEmpty(label) && React__default.createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
+  }, inputElement) : React__default.createElement(Tooltip, {
+    content: descriptionToolTip || '',
+    placement: "bottom-end",
+    trigger: "mouseenter",
+    zIndex: 999999,
+    disabled: !descriptionToolTip
+  }, inputElement)), !readOnly && !disabled && React__default.createElement(React__default.Fragment, null, React__default.createElement(InputIconContainer, {
+    $type: type
+  }, React__default.createElement(SvgEditNote, null)), isEmpty(label) && React__default.createElement(InputSuccessContainer, {
+    $type: type
+  }, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
 });
 CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
   label: PropTypes.string,
@@ -179,6 +165,7 @@ CompactTextInput.defaultProps = {
   activeLinkHandler: false,
   onChange: () => {}
 };
+var CompactTextInput$1 = memo(CompactTextInput);
 
-export { CompactTextInput as default };
+export { CompactTextInput$1 as default };
 //# sourceMappingURL=CompactTextInput.js.map

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, useMemo } from 'react';\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 memoizedDescriptionToolTip = useMemo(() => {\n    return descriptionToolTip;\n  }, [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        {!memoizedDescriptionToolTip && !link && <div>{input()}</div>}\n        {memoizedDescriptionToolTip && !link && (\n          <div>\n            <Tooltip\n              content={memoizedDescriptionToolTip}\n              key=\"tooltip1\"\n              placement=\"bottom-end\"\n              trigger={'mouseenter'}\n              zIndex={999999}\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","memoizedDescriptionToolTip","useMemo","useEffect","useCallback","event","target","isFunction","select","input","createElement","S","ref","id","key","inputtype","$edit","$bold","$haslink","isEmpty","htmlFor","$hasLabel","Tooltip","content","placement","trigger","zIndex","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":";;;;;;;;;;;;;;;AAuBMA,MAAAA,gBAAgB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,gBAAgBA,CACjE;EACEG,KAAK;EACLC,SAAS;EACTC,IAAI;EACJC,YAAY;EACZC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,UAAU;EACVC,WAAW;EACXC,iBAAiB;EACjBC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,IAAI;EACJC,kBAAkB;EAClBC,IAAI;EACJC,MAAM;AACNC,EAAAA,QAAQ,EAAEC,YAAY;AACtBC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,MAAM,EAAEC,UAAU;EAClBC,WAAW;EACXC,WAAW;EACX,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC,CAAA;EACrC,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGH,QAAQ,EAAE,CAAA;EAClD,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEjD,EAAA,MAAMM,0BAA0B,GAAGC,OAAO,CAAC,MAAM;AAC/C,IAAA,OAAOrB,kBAAkB,CAAA;AAC3B,GAAC,EAAE,CAACA,kBAAkB,CAAC,CAAC,CAAA;AAExBsB,EAAAA,SAAS,CAAC,MAAM;AACdL,IAAAA,eAAe,CAAC5B,KAAK,IAAID,YAAY,CAAC,CAAA;IACtC+B,YAAY,CAAC,KAAK,CAAC,CAAA;AACrB,GAAC,EAAE,CAAC9B,KAAK,EAAED,YAAY,CAAC,CAAC,CAAA;AAEzB,EAAA,MAAMe,QAAQ,GAAGoB,WAAW,CAC1BC,KAAK,IAAI;AACPP,IAAAA,eAAe,CAACO,KAAK,CAACC,MAAM,CAACpC,KAAK,CAAC,CAAA;IAEnC,IAAI,CAAC6B,SAAS,EAAE;MACdC,YAAY,CAAC,IAAI,CAAC,CAAA;AACpB,KAAA;AACA,IAAA,IAAIO,UAAU,CAACtB,YAAY,CAAC,EAAE;MAC5BA,YAAY,CAACoB,KAAK,CAAC,CAAA;AACrB,KAAA;AACF,GAAC,EACD,CAACpB,YAAY,CACf,CAAC,CAAA;AAED,EAAA,MAAMC,OAAO,GAAGkB,WAAW,CACzBC,KAAK,IAAI;AACP,IAAA,IAAI7B,UAAU,EAAE;AACd6B,MAAAA,KAAK,CAACC,MAAM,CAACE,MAAM,EAAE,CAAA;AACvB,KAAA;AAEA,IAAA,IAAID,UAAU,CAACpB,WAAW,CAAC,EAAE;MAC3BA,WAAW,CAACkB,KAAK,CAAC,CAAA;AACpB,KAAA;GACD,EACD,CAAC7B,UAAU,EAAEC,QAAQ,EAAEU,WAAW,CACpC,CAAC,CAAA;AAED,EAAA,MAAMC,MAAM,GAAGgB,WAAW,CACxBC,KAAK,IAAI;AACP,IAAA,IAAIE,UAAU,CAAClB,UAAU,CAAC,EAAE;MAC1BA,UAAU,CAACgB,KAAK,CAAC,CAAA;AACnB,KAAA;AACF,GAAC,EACD,CAAChB,UAAU,CACb,CAAC,CAAA;EAED,MAAMoB,KAAK,GAAGA,MAAM;AAClB,IAAA,OACE7C,cAAA,CAAA8C,aAAA,CAACC,KAAO,EAAA;AACNC,MAAAA,GAAG,EAAEnB,YAAa;AAClBoB,MAAAA,EAAE,EAAEnB,QAAS;AACboB,MAAAA,GAAG,EAAEpB,QAAS;AACdK,MAAAA,SAAS,EAAEA,SAAU;AACrBgB,MAAAA,SAAS,EAAEhD,SAAU;AACrBC,MAAAA,IAAI,EAAEA,IAAK;AACXS,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBsC,MAAAA,KAAK,EAAErC,IAAK;AACZR,MAAAA,WAAW,EAAEA,WAAY;AACzBF,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,KAAK,EAAEA,KAAM;AACbU,MAAAA,IAAI,EAAEA,IAAK;AACXqC,MAAAA,KAAK,EAAEnC,IAAK;AACZoC,MAAAA,QAAQ,EAAE,CAACC,OAAO,CAAC/C,IAAI,CAAE;AACzBc,MAAAA,OAAO,EAAEA,OAAQ;AACjBF,MAAAA,QAAQ,EAAEA,QAAS;AACnBI,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAChB,CAAC,CAAA;GAEL,CAAA;EAED,IAAIL,MAAM,EAAE,OAAO,IAAI,CAAA;AAEvB,EAAA,OACEnB,cAAA,CAAA8C,aAAA,CAACC,kBAAkB,EAAKnB,KAAK,EAC1B1B,KAAK,IACJF,cAAA,CAAA8C,aAAA,CAACC,KAAO,EAAA;AAACS,IAAAA,OAAO,EAAE1B,QAAS;AAAChB,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EAC5CZ,KAAK,EACNF,cAAA,CAAA8C,aAAA,CAACC,gBAAkB,EAAA,IAAA,EAChB/B,IAAI,KAAK,SAAS,IAAIU,WAAW,EACjCV,IAAI,KAAK,SAAS,IAAIW,WACL,CACb,CACV,EACD3B,cAAA,CAAA8C,aAAA,CAACC,cAAgB,EAAA;AAACU,IAAAA,SAAS,EAAE,CAACF,OAAO,CAACrD,KAAK,CAAA;AAAE,GAAA,EAC1C,CAACmC,0BAA0B,IAAI,CAAC7B,IAAI,IAAIR,cAAA,CAAA8C,aAAA,CAAA,KAAA,EAAA,IAAA,EAAMD,KAAK,EAAQ,CAAC,EAC5DR,0BAA0B,IAAI,CAAC7B,IAAI,IAClCR,cAAA,CAAA8C,aAAA,CAAA,KAAA,EAAA,IAAA,EACE9C,cAAA,CAAA8C,aAAA,CAACY,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAEtB,0BAA2B;AACpCa,IAAAA,GAAG,EAAC,UAAU;AACdU,IAAAA,SAAS,EAAC,YAAY;AACtBC,IAAAA,OAAO,EAAE,YAAa;AACtBC,IAAAA,MAAM,EAAE,MAAA;AAAO,GAAA,EAEdjB,KAAK,EACC,CACN,CACN,EACArC,IAAI,IAAI,CAACK,QAAQ,IAChBb,cAAA,CAAA8C,aAAA,CAAA,KAAA,EAAA,IAAA,EACE9C,cAAA,CAAA8C,aAAA,CAACiB,OAAO,EAAA;AACNC,IAAAA,KAAK,EAAE,KAAM;AACbL,IAAAA,OAAO,EACL3D,cAAA,CAAA8C,aAAA,CAACC,oBAAsB,EACpBpC,IAAAA,EAAAA,iBAAiB,GAChBX,cAAA,CAAA8C,aAAA,CAACC,UAAY,EAAA;AACXkB,MAAAA,IAAI,EAAEzD,IAAK;AACXkC,MAAAA,MAAM,EAAEjC,UAAW;MACnByD,OAAO,EAAEC,CAAC,IAAI;AACZ,QAAA,IAAIxD,iBAAiB,EAAE;UACrBwD,CAAC,CAACC,cAAc,EAAE,CAAA;AAClB1D,UAAAA,WAAW,EAAE,CAAA;AACf,SAAW;OACX;AACF2D,MAAAA,GAAG,EAAC,YAAA;AAAY,KAAA,EAEhBrE,cAAA,CAAA8C,aAAA,CAACwB,OAAQ,MAAE,CAAC,EACXrC,YACW,CAAC,GAEfjC,cAAA,CAAA8C,aAAA,CAACC,UAAY,EAAA;AAACkB,MAAAA,IAAI,EAAEzD,IAAK;AAACkC,MAAAA,MAAM,EAAEjC,UAAW;AAAC4D,MAAAA,GAAG,EAAC,YAAA;KAChDrE,EAAAA,cAAA,CAAA8C,aAAA,CAACwB,OAAQ,MAAE,CAAC,EACXrC,YACW,CAEM,CACzB;AACDiB,IAAAA,GAAG,EAAC,UAAU;AACdU,IAAAA,SAAS,EAAC,cAAc;AACxBC,IAAAA,OAAO,EAAC,SAAS;AACjBC,IAAAA,MAAM,EAAE,MAAO;AACfS,IAAAA,WAAW,EAAE,IAAA;GAEZ1B,EAAAA,KAAK,EACC,CACN,CACN,EACArC,IAAI,IAAIK,QAAQ,IACfb,cAAA,CAAA8C,aAAA,CAACC,qBAAuB,EACtB/C,IAAAA,EAAAA,cAAA,CAAA8C,aAAA,CAACC,UAAY,EAAA;AACXkB,IAAAA,IAAI,EAAEzD,IAAK;AACX6D,IAAAA,GAAG,EAAC,YAAY;AAChBG,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE,cAAA;KAAiB;AACnC/B,IAAAA,MAAM,EAAEjC,UAAAA;GAEPwB,EAAAA,YACW,CACS,CAC1B,EACA,CAACpB,QAAQ,IAAI,CAACC,QAAQ,IACrBd,cAAA,CAAA8C,aAAA,CAAA9C,cAAA,CAAA0E,QAAA,EACE1E,IAAAA,EAAAA,cAAA,CAAA8C,aAAA,CAACC,kBAAoB,EAAA;AAAC/B,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,EAC/BhB,cAAA,CAAA8C,aAAA,CAAC6B,WAAY,MAAE,CACK,CAAC,EACtBpB,OAAO,CAACrD,KAAK,CAAC,IACbF,cAAA,CAAA8C,aAAA,CAACC,qBAAuB,EACrB/B,IAAAA,EAAAA,IAAI,KAAK,SAAS,IAAIU,WAAW,EACjCV,IAAI,KAAK,SAAS,IAAIW,WACA,CAE3B,CAEY,CACA,CAAC,CAAA;AAEzB,CAAC,EAAC;AAEF5B,gBAAgB,CAAC6E,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAI3B7E,KAAK,EAAE8E,SAAS,CAACC,MAAM;EAIvBC,OAAO,EAAEF,SAAS,CAACG,IAAI;EAIvBhF,SAAS,EAAE6E,SAAS,CAACC,MAAM;EAI3B7E,IAAI,EAAE4E,SAAS,CAACC,MAAM;EAItB5E,YAAY,EAAE2E,SAAS,CAACC,MAAM;EAI9B3E,KAAK,EAAE0E,SAAS,CAACC,MAAM;EAIvB1E,WAAW,EAAEyE,SAAS,CAACC,MAAM;EAI7BzE,IAAI,EAAEwE,SAAS,CAACC,MAAM;AAItBxE,EAAAA,UAAU,EAAEuE,SAAS,CAACI,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;EAInE1E,WAAW,EAAEsE,SAAS,CAACK,IAAI;EAI3B1E,iBAAiB,EAAEqE,SAAS,CAACG,IAAI;EAIjCvE,UAAU,EAAEoE,SAAS,CAACG,IAAI;EAI1BtE,QAAQ,EAAEmE,SAAS,CAACG,IAAI;EAIxBrE,QAAQ,EAAEkE,SAAS,CAACG,IAAI;EAIxBpE,IAAI,EAAEiE,SAAS,CAACG,IAAI;AAQpBG,EAAAA,OAAO,EAAEN,SAAS,CAACO,SAAS,CAAC,CAACP,SAAS,CAACG,IAAI,EAAEH,SAAS,CAACC,MAAM,CAAC,CAAC;EAIhE/D,IAAI,EAAE8D,SAAS,CAACG,IAAI;EAIpBhE,MAAM,EAAE6D,SAAS,CAACG,IAAI;EAItB/D,QAAQ,EAAE4D,SAAS,CAACK,IAAI;EAIxB/D,OAAO,EAAE0D,SAAS,CAACK,IAAI;EAIvB7D,MAAM,EAAEwD,SAAS,CAACK,IAAI;AAItBrE,EAAAA,IAAI,EAAEgE,SAAS,CAACI,KAAK,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;EAIrEnE,kBAAkB,EAAE+D,SAAS,CAACC,MAAM;EAIpCvD,WAAW,EAAEsD,SAAS,CAACQ,OAAO;EAI9B7D,WAAW,EAAEqD,SAAS,CAACQ,OAAAA;AACzB,CAAC,GAAA,EAAA,CAAA;AAEDzF,gBAAgB,CAAC0F,YAAY,GAAG;AAC9BtF,EAAAA,SAAS,EAAE,MAAM;AACjBS,EAAAA,UAAU,EAAE,IAAI;AAChBH,EAAAA,UAAU,EAAE,OAAO;AACnBS,EAAAA,IAAI,EAAE,KAAK;AACXL,EAAAA,QAAQ,EAAE,KAAK;AACfI,EAAAA,kBAAkB,EAAE,EAAE;AACtBF,EAAAA,IAAI,EAAE,KAAK;AACXI,EAAAA,MAAM,EAAE,KAAK;AACbH,EAAAA,IAAI,EAAE,EAAE;AACRN,EAAAA,WAAW,EAAEA,MAAM,EAAE;AACrBC,EAAAA,iBAAiB,EAAE,KAAK;EACxBS,QAAQ,EAAEA,MAAM,EAAC;AACnB,CAAC;;;;"}
+{"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, useMemo, memo } from 'react';\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\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(value || defaultValue);\n\n  // Update currentValue when value or defaultValue changes\n  useEffect(() => {\n    setCurrentValue(value || defaultValue);\n  }, [value, defaultValue]);\n\n  const onChange = useCallback(\n    event => {\n      setCurrentValue(event.target.value);\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      if (isFunction(onFocusProp)) {\n        onFocusProp(event);\n      }\n    },\n    [autoSelect, onFocusProp]\n  );\n\n  const onBlur = useCallback(\n    event => {\n      if (isFunction(onBlurProp)) {\n        onBlurProp(event);\n      }\n    },\n    [onBlurProp]\n  );\n\n  // Memoize link popover content\n  const linkPopoverContent = useMemo(\n    () => (\n      <S.LinkPopoverContainer>\n        <S.StyledLink\n          href={link}\n          target={linkTarget}\n          onClick={e => {\n            if (activeLinkHandler) {\n              e.preventDefault();\n              linkHandler();\n            }\n          }}\n          rel=\"noreferrer\"\n        >\n          <LinkIcon />\n          {currentValue}\n        </S.StyledLink>\n      </S.LinkPopoverContainer>\n    ),\n    [link, linkTarget, activeLinkHandler, linkHandler, currentValue]\n  );\n\n  // Render the input - same structure every time\n  const inputElement = (\n    <S.Input\n      ref={forwardedRef}\n      id={uniqueId}\n      type={inputType}\n      name={name}\n      readOnly={readOnly}\n      disabled={disabled}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      $bold={bold}\n      $haslink={!isEmpty(link)}\n      $edit={edit}\n      $type={type}\n      onFocus={onFocus}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n\n  if (hidden) return null;\n\n  // Determine current state\n  const hasLink = link && !readOnly;\n\n  return (\n    <S.CompactTextInput {...props}>\n      {label && (\n        <S.Label htmlFor={uniqueId} $disabled={disabled}>\n          {label}\n          <S.SuccessContainer $type={type}>\n            {type === 'loading' && loadingIcon}\n            {type === 'success' && successIcon}\n          </S.SuccessContainer>\n        </S.Label>\n      )}\n      <S.InputContainer $hasLabel={!isEmpty(label)}>\n        {link && readOnly ? (\n          <S.ReadOnlyLinkContainer>\n            <S.StyledLink href={link} rel=\"noreferrer\" target={linkTarget}>\n              {currentValue}\n            </S.StyledLink>\n          </S.ReadOnlyLinkContainer>\n        ) : (\n          <div>\n            {hasLink ? (\n              <Popover\n                arrow={false}\n                content={linkPopoverContent}\n                placement=\"bottom-start\"\n                trigger=\"focusin\"\n                zIndex={999999}\n                interactive={true}\n              >\n                {inputElement}\n              </Popover>\n            ) : (\n              <Tooltip\n                content={descriptionToolTip || ''}\n                placement=\"bottom-end\"\n                trigger=\"mouseenter\"\n                zIndex={999999}\n                disabled={!descriptionToolTip}\n              >\n                {inputElement}\n              </Tooltip>\n            )}\n          </div>\n        )}\n\n        {!readOnly && !disabled && (\n          <>\n            <S.InputIconContainer $type={type}>\n              <EditNoteIcon />\n            </S.InputIconContainer>\n            {isEmpty(label) && (\n              <S.InputSuccessContainer $type={type}>\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 memo(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","useEffect","useCallback","event","target","isFunction","select","linkPopoverContent","useMemo","createElement","S","href","onClick","e","preventDefault","rel","LinkIcon","inputElement","ref","id","$bold","$haslink","isEmpty","$edit","$type","hasLink","htmlFor","$disabled","$hasLabel","Popover","arrow","content","placement","trigger","zIndex","interactive","Tooltip","Fragment","EditNoteIcon","propTypes","process","env","NODE_ENV","PropTypes","string","success","bool","oneOf","func","warning","oneOfType","element","defaultProps","memo"],"mappings":"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"}