@bigbinary/neeto-molecules 1.2.5 → 1.3.0

package/README.md

@@ -63,6 +63,7 @@ https://neeto-molecules.neeto.com/
 - [Metadata](./docs/components.md#metadata)
 - [DocumentEditor](./docs/components.md#DocumentEditor)
 - [Taxonomy](./docs/components.md#Taxonomy)
+- [SuffixedInput](./docs/components.md#SuffixedInput
 
 ## Installation Instructions
 

package/dist/SuffixedInput.js

@@ -0,0 +1,151 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { isPresent, isNotPresent } from '@bigbinary/neeto-cist';
+import { Info } from '@bigbinary/neeto-icons';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import { Input } from '@bigbinary/neetoui/formik';
+import { isEmpty } from 'ramda';
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var INPUT_FIELD_MIN_WIDTH = 60;
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".nm-suffixed-input-field{max-width:100%;min-width:0;width:-moz-max-content;width:max-content}.nm-suffixed-input-field .neeto-ui-input{align-items:stretch}.nm-suffixed-input-field .neeto-ui-input .neeto-ui-input__suffix{background-color:rgb(var(--neeto-ui-gray-200));cursor:not-allowed;margin:0 0 0 4px!important;padding:5px 8px;white-space:nowrap}.nm-suffixed-input-field input{padding-right:0!important}";
+n(css,{});
+
+var SuffixedInput = function SuffixedInput(_ref) {
+  var _placeholderRef$curre2, _placeholderRef$curre3;
+  var placeholder = _ref.placeholder,
+    helpUrl = _ref.helpUrl,
+    helpIconTooltipContent = _ref.helpIconTooltipContent,
+    label = _ref.label,
+    value = _ref.value,
+    getInputRef = _ref.getInputRef,
+    suffix = _ref.suffix,
+    _ref$isCopyToClipboar = _ref.isCopyToClipboardEnabled,
+    isCopyToClipboardEnabled = _ref$isCopyToClipboar === void 0 ? false : _ref$isCopyToClipboar,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "email" : _ref$name,
+    _ref$dataCy = _ref.dataCy,
+    dataCy = _ref$dataCy === void 0 ? "" : _ref$dataCy;
+  var _useState = useState(INPUT_FIELD_MIN_WIDTH),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialInputWidth = _useState2[0],
+    setInitialInputWidth = _useState2[1];
+  var inputRef = useRef(null);
+  var placeholderRef = useRef(null);
+  var setInputRef = function setInputRef(ref) {
+    inputRef.current = ref;
+    getInputRef === null || getInputRef === void 0 ? void 0 : getInputRef(ref);
+  };
+  useEffect(function () {
+    var _placeholderRef$curre;
+    //To handle the input width on initial render.
+    var placeholderSpanWidth = (_placeholderRef$curre = placeholderRef.current) === null || _placeholderRef$curre === void 0 ? void 0 : _placeholderRef$curre.offsetWidth;
+    setInitialInputWidth(placeholderSpanWidth);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    // Dummy element to calculate the width to be set for the input. Do not remove.
+    className: "pointer-events-none invisible absolute pl-2",
+    ref: placeholderRef
+  }, value || placeholder), /*#__PURE__*/React.createElement("div", {
+    className: "inline-flex max-w-full items-end gap-2"
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: label,
+    name: name,
+    placeholder: placeholder,
+    className: "nm-suffixed-input-field",
+    "data-cy": dataCy,
+    ref: setInputRef,
+    type: "text",
+    labelProps: {
+      helpIconProps: isPresent(helpUrl) && {
+        icon: Info,
+        className: "cursor-pointer opacity-75 hover:opacity-100 transition-opacity duration-300 ease-in-out",
+        onClick: function onClick() {
+          return window.open(helpUrl, "_blank");
+        },
+        tooltipProps: {
+          content: helpIconTooltipContent,
+          position: "right",
+          disabled: isNotPresent(helpUrl)
+        }
+      }
+    },
+    style: {
+      minWidth: isEmpty(value) ? INPUT_FIELD_MIN_WIDTH : 0,
+      width: (_placeholderRef$curre2 = (_placeholderRef$curre3 = placeholderRef.current) === null || _placeholderRef$curre3 === void 0 ? void 0 : _placeholderRef$curre3.offsetWidth) !== null && _placeholderRef$curre2 !== void 0 ? _placeholderRef$curre2 : initialInputWidth // Additional 2px to act as a buffer.
+    },
+
+    suffix:
+    /*#__PURE__*/
+    // Added onClick to focus the input even when the suffix part is clicked.
+    React.createElement("span", {
+      onClick: function onClick() {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }
+    }, suffix)
+  }), isCopyToClipboardEnabled && /*#__PURE__*/React.createElement(CopyToClipboardButton, {
+    disabled: isEmpty(value),
+    style: "text",
+    value: "".concat(value).concat(suffix)
+  })));
+};
+
+export { SuffixedInput as default };
+//# sourceMappingURL=SuffixedInput.js.map

package/dist/SuffixedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuffixedInput.js","sources":["../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js","../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js","../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js","../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js","../node_modules/@babel/runtime/helpers/esm/slicedToArray.js","../src/components/SuffixedInput/constants.js","../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js","../src/components/SuffixedInput/index.jsx"],"sourcesContent":["export default function _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}","export default function _iterableToArrayLimit(r, l) {\n  var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n  if (null != t) {\n    var e,\n      n,\n      i,\n      u,\n      a = [],\n      f = !0,\n      o = !1;\n    try {\n      if (i = (t = t.call(r)).next, 0 === l) {\n        if (Object(t) !== t) return;\n        f = !1;\n      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);\n    } catch (r) {\n      o = !0, n = r;\n    } finally {\n      try {\n        if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return;\n      } finally {\n        if (o) throw n;\n      }\n    }\n    return a;\n  }\n}","export default function _arrayLikeToArray(arr, len) {\n  if (len == null || len > arr.length) len = arr.length;\n  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n  return arr2;\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _unsupportedIterableToArray(o, minLen) {\n  if (!o) return;\n  if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n  var n = Object.prototype.toString.call(o).slice(8, -1);\n  if (n === \"Object\" && o.constructor) n = o.constructor.name;\n  if (n === \"Map\" || n === \"Set\") return Array.from(o);\n  if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}","export default function _nonIterableRest() {\n  throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","import arrayWithHoles from \"./arrayWithHoles.js\";\nimport iterableToArrayLimit from \"./iterableToArrayLimit.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableRest from \"./nonIterableRest.js\";\nexport default function _slicedToArray(arr, i) {\n  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();\n}","export const INPUT_FIELD_MIN_WIDTH = 60;\n","var e=[],t=[];function n(n,r){if(n&&\"undefined\"!=typeof document){var a,s=!0===r.prepend?\"prepend\":\"append\",d=!0===r.singleTag,i=\"string\"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName(\"head\")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement(\"style\");if(e.setAttribute(\"type\",\"text/css\"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a=\"prepend\"===s?\"afterbegin\":\"beforeend\";return i.insertAdjacentElement(a,e),e}}export{n as default};\n","import React, { useEffect, useRef, useState } from \"react\";\n\nimport { isPresent, isNotPresent } from \"neetocist\";\nimport { Info } from \"neetoicons\";\nimport CopyToClipboardButton from \"neetomolecules/CopyToClipboardButton\";\nimport { Input } from \"neetoui/formik\";\nimport PropTypes from \"prop-types\";\nimport { isEmpty } from \"ramda\";\n\nimport { INPUT_FIELD_MIN_WIDTH } from \"./constants\";\nimport \"./suffixed-input.scss\";\n\nconst SuffixedInput = ({\n  placeholder,\n  helpUrl,\n  helpIconTooltipContent,\n  label,\n  value,\n  getInputRef,\n  suffix,\n  isCopyToClipboardEnabled = false,\n  name = \"email\",\n  dataCy = \"\",\n}) => {\n  const [initialInputWidth, setInitialInputWidth] = useState(\n    INPUT_FIELD_MIN_WIDTH\n  );\n  const inputRef = useRef(null);\n  const placeholderRef = useRef(null);\n\n  const setInputRef = ref => {\n    inputRef.current = ref;\n    getInputRef?.(ref);\n  };\n\n  useEffect(() => {\n    //To handle the input width on initial render.\n    const placeholderSpanWidth = placeholderRef.current?.offsetWidth;\n    setInitialInputWidth(placeholderSpanWidth);\n  }, []);\n\n  return (\n    <>\n      <span // Dummy element to calculate the width to be set for the input. Do not remove.\n        className=\"pointer-events-none invisible absolute pl-2\"\n        ref={placeholderRef}\n      >\n        {value || placeholder}\n      </span>\n      <div className=\"inline-flex max-w-full items-end gap-2\">\n        <Input\n          {...{ label, name, placeholder }}\n          className=\"nm-suffixed-input-field\"\n          data-cy={dataCy}\n          ref={setInputRef}\n          type=\"text\"\n          labelProps={{\n            helpIconProps: isPresent(helpUrl) && {\n              icon: Info,\n              className:\n                \"cursor-pointer opacity-75 hover:opacity-100 transition-opacity duration-300 ease-in-out\",\n              onClick: () => window.open(helpUrl, \"_blank\"),\n              tooltipProps: {\n                content: helpIconTooltipContent,\n                position: \"right\",\n                disabled: isNotPresent(helpUrl),\n              },\n            },\n          }}\n          style={{\n            minWidth: isEmpty(value) ? INPUT_FIELD_MIN_WIDTH : 0,\n            width: placeholderRef.current?.offsetWidth ?? initialInputWidth, // Additional 2px to act as a buffer.\n          }}\n          suffix={\n            // Added onClick to focus the input even when the suffix part is clicked.\n            <span onClick={() => inputRef.current?.focus()}>{suffix}</span>\n          }\n        />\n        {isCopyToClipboardEnabled && (\n          <CopyToClipboardButton\n            disabled={isEmpty(value)}\n            style=\"text\"\n            value={`${value}${suffix}`}\n          />\n        )}\n      </div>\n    </>\n  );\n};\n\nSuffixedInput.propTypes = {\n  /**\n   * Placeholder of the input field.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * A help icon will be displayed next to the label if helpUrl is present. On clicking the icon will take the user to the URL.\n   */\n  helpUrl: PropTypes.string,\n  /**\n   * Text to be displayed inside the tooltip of the help icon.\n   */\n  helpIconTooltipContent: PropTypes.string,\n  /**\n   * Label of the input field.\n   */\n  label: PropTypes.string,\n  /**\n   * The value entered by the user, eg: email.\n   */\n  value: PropTypes.string,\n  /**\n   * A method to get the ref of the input field.\n   */\n  getInputRef: PropTypes.func,\n  /**\n   * Domain name to be rendered next to the input field.\n   */\n  suffix: PropTypes.string,\n  /**\n   * Whether to show the copy to clipboard button.\n   */\n  isCopyToClipboardEnabled: PropTypes.bool,\n  /**\n   * Formik field name of the input field.\n   */\n  name: PropTypes.string,\n  /**\n   * Value will be set as `data-cy` of input field.\n   */\n  dataCy: PropTypes.string,\n};\n\nexport default SuffixedInput;\n"],"names":["arrayLikeToArray","arrayWithHoles","iterableToArrayLimit","unsupportedIterableToArray","nonIterableRest","INPUT_FIELD_MIN_WIDTH","SuffixedInput","_ref","_placeholderRef$curre2","_placeholderRef$curre3","placeholder","helpUrl","helpIconTooltipContent","label","value","getInputRef","suffix","_ref$isCopyToClipboar","isCopyToClipboardEnabled","_ref$name","name","_ref$dataCy","dataCy","_useState","useState","_useState2","_slicedToArray","initialInputWidth","setInitialInputWidth","inputRef","useRef","placeholderRef","setInputRef","ref","current","useEffect","_placeholderRef$curre","placeholderSpanWidth","offsetWidth","React","createElement","Fragment","className","Input","type","labelProps","helpIconProps","isPresent","icon","Info","onClick","window","open","tooltipProps","content","position","disabled","isNotPresent","style","minWidth","isEmpty","width","_inputRef$current","focus","CopyToClipboardButton","concat"],"mappings":";;;;;;;AAAe,SAAS,eAAe,CAAC,GAAG,EAAE;AAC7C,EAAE,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC;AACrC;;ACFe,SAAS,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE;AACpD,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,IAAI,GAAG,WAAW,IAAI,OAAO,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;AACnG,EAAE,IAAI,IAAI,IAAI,CAAC,EAAE;AACjB,IAAI,IAAI,CAAC;AACT,MAAM,CAAC;AACP,MAAM,CAAC;AACP,MAAM,CAAC;AACP,MAAM,CAAC,GAAG,EAAE;AACZ,MAAM,CAAC,GAAG,CAAC,CAAC;AACZ,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACb,IAAI,IAAI;AACR,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE;AAC7C,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO;AACpC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AACf,OAAO,MAAM,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC9F,KAAK,CAAC,OAAO,CAAC,EAAE;AAChB,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AACpB,KAAK,SAAS;AACd,MAAM,IAAI;AACV,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO;AACtF,OAAO,SAAS;AAChB,QAAQ,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AACvB,OAAO;AACP,KAAK;AACL,IAAI,OAAO,CAAC,CAAC;AACb,GAAG;AACH;;AC1Be,SAAS,iBAAiB,CAAC,GAAG,EAAE,GAAG,EAAE;AACpD,EAAE,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;AACxD,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACxE,EAAE,OAAO,IAAI,CAAC;AACd;;ACHe,SAAS,2BAA2B,CAAC,CAAC,EAAE,MAAM,EAAE;AAC/D,EAAE,IAAI,CAAC,CAAC,EAAE,OAAO;AACjB,EAAE,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,OAAOA,iBAAgB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAChE,EAAE,IAAI,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACzD,EAAE,IAAI,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;AAC9D,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,KAAK,EAAE,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACvD,EAAE,IAAI,CAAC,KAAK,WAAW,IAAI,0CAA0C,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,OAAOA,iBAAgB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAClH;;ACRe,SAAS,gBAAgB,GAAG;AAC3C,EAAE,MAAM,IAAI,SAAS,CAAC,2IAA2I,CAAC,CAAC;AACnK;;ACEe,SAAS,cAAc,CAAC,GAAG,EAAE,CAAC,EAAE;AAC/C,EAAE,OAAOC,eAAc,CAAC,GAAG,CAAC,IAAIC,qBAAoB,CAAC,GAAG,EAAE,CAAC,CAAC,IAAIC,2BAA0B,CAAC,GAAG,EAAE,CAAC,CAAC,IAAIC,gBAAe,EAAE,CAAC;AACxH;;ACNO,IAAMC,qBAAqB,GAAG,EAAE;;ACAvC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAC,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;ACYruB,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAWb;EAAA,IAAAC,sBAAA,EAAAC,sBAAA,CAAA;AAAA,EAAA,IAVJC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,sBAAsB,GAAAL,IAAA,CAAtBK,sBAAsB;IACtBC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,WAAW,GAAAR,IAAA,CAAXQ,WAAW;IACXC,MAAM,GAAAT,IAAA,CAANS,MAAM;IAAAC,qBAAA,GAAAV,IAAA,CACNW,wBAAwB;AAAxBA,IAAAA,wBAAwB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;IAAAE,SAAA,GAAAZ,IAAA,CAChCa,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IAAAE,WAAA,GAAAd,IAAA,CACde,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,WAAA,CAAA;AAEX,EAAA,IAAAE,SAAA,GAAkDC,QAAQ,CACxDnB,qBACF,CAAC;IAAAoB,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAFMI,IAAAA,iBAAiB,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,oBAAoB,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAG9C,EAAA,IAAMI,QAAQ,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;AAC7B,EAAA,IAAMC,cAAc,GAAGD,MAAM,CAAC,IAAI,CAAC,CAAA;AAEnC,EAAA,IAAME,WAAW,GAAG,SAAdA,WAAWA,CAAGC,GAAG,EAAI;IACzBJ,QAAQ,CAACK,OAAO,GAAGD,GAAG,CAAA;AACtBlB,IAAAA,WAAW,aAAXA,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAXA,WAAW,CAAGkB,GAAG,CAAC,CAAA;GACnB,CAAA;AAEDE,EAAAA,SAAS,CAAC,YAAM;AAAA,IAAA,IAAAC,qBAAA,CAAA;AACd;AACA,IAAA,IAAMC,oBAAoB,GAAA,CAAAD,qBAAA,GAAGL,cAAc,CAACG,OAAO,MAAA,IAAA,IAAAE,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAtBA,qBAAA,CAAwBE,WAAW,CAAA;IAChEV,oBAAoB,CAACS,oBAAoB,CAAC,CAAA;GAC3C,EAAE,EAAE,CAAC,CAAA;EAEN,oBACEE,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACEF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAM;AACJE,IAAAA,SAAS,EAAC,6CAA6C;AACvDT,IAAAA,GAAG,EAAEF,cAAAA;AAAe,GAAA,EAEnBjB,KAAK,IAAIJ,WACN,CAAC,eACP6B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKE,IAAAA,SAAS,EAAC,wCAAA;AAAwC,GAAA,eACrDH,KAAA,CAAAC,aAAA,CAACG,KAAK,EAAA;AACE9B,IAAAA,KAAK,EAALA,KAAK;AAAEO,IAAAA,IAAI,EAAJA,IAAI;AAAEV,IAAAA,WAAW,EAAXA,WAAW;AAC9BgC,IAAAA,SAAS,EAAC,yBAAyB;AACnC,IAAA,SAAA,EAASpB,MAAO;AAChBW,IAAAA,GAAG,EAAED,WAAY;AACjBY,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,UAAU,EAAE;AACVC,MAAAA,aAAa,EAAEC,SAAS,CAACpC,OAAO,CAAC,IAAI;AACnCqC,QAAAA,IAAI,EAAEC,IAAI;AACVP,QAAAA,SAAS,EACP,yFAAyF;QAC3FQ,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,UAAA,OAAMC,MAAM,CAACC,IAAI,CAACzC,OAAO,EAAE,QAAQ,CAAC,CAAA;AAAA,SAAA;AAC7C0C,QAAAA,YAAY,EAAE;AACZC,UAAAA,OAAO,EAAE1C,sBAAsB;AAC/B2C,UAAAA,QAAQ,EAAE,OAAO;UACjBC,QAAQ,EAAEC,YAAY,CAAC9C,OAAO,CAAA;AAChC,SAAA;AACF,OAAA;KACA;AACF+C,IAAAA,KAAK,EAAE;MACLC,QAAQ,EAAEC,OAAO,CAAC9C,KAAK,CAAC,GAAGT,qBAAqB,GAAG,CAAC;MACpDwD,KAAK,EAAA,CAAArD,sBAAA,GAAAC,CAAAA,sBAAA,GAAEsB,cAAc,CAACG,OAAO,MAAAzB,IAAAA,IAAAA,sBAAA,uBAAtBA,sBAAA,CAAwB6B,WAAW,MAAA9B,IAAAA,IAAAA,sBAAA,cAAAA,sBAAA,GAAImB,iBAAiB;KAC/D;;IACFX,MAAM;AAAA;AACJ;AACAuB,IAAAA,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;MAAMU,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,QAAA,IAAAY,iBAAA,CAAA;AAAA,QAAA,OAAA,CAAAA,iBAAA,GAAMjC,QAAQ,CAACK,OAAO,MAAA,IAAA,IAAA4B,iBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,iBAAA,CAAkBC,KAAK,EAAE,CAAA;AAAA,OAAA;AAAC,KAAA,EAAE/C,MAAa,CAAA;GAEjE,CAAC,EACDE,wBAAwB,iBACvBqB,KAAA,CAAAC,aAAA,CAACwB,qBAAqB,EAAA;AACpBR,IAAAA,QAAQ,EAAEI,OAAO,CAAC9C,KAAK,CAAE;AACzB4C,IAAAA,KAAK,EAAC,MAAM;AACZ5C,IAAAA,KAAK,KAAAmD,MAAA,CAAKnD,KAAK,CAAAmD,CAAAA,MAAA,CAAGjD,MAAM,CAAA;GACzB,CAEA,CACL,CAAC,CAAA;AAEP;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/types/SuffixedInput.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+/**
+ *
+ * This component can be used to display an input where the value is customizable by the user,
+ *
+ * but not the suffix. eg: Emails, blog urls etc.
+ *
+ * @example 
+ *
+ * import SuffixedInput from "@bigbinary/neeto-molecules/SuffixedInput";
+ * 
+ * const MailboxConfiguration = () => {
+ *   return (<Form
+ *     formikProps={{
+ *       initialValues: { email: "" },
+ *       onSubmit: noop,
+ *       onreset: noop,
+ *     }}
+ *   >
+ *     {({ values: { email } }) => (
+ *       <div className="w-full p-6">
+ *         <SuffixedInput
+ *           {...{ ...args }}
+ *           value={email}
+ *           name="email"
+ *         />
+ *       </div>
+ *     )}
+ *   </Form>
+ *   );
+ * };
+ * @endexample
+*/
+const SuffixedInput: React.FC<{
+  placeholder?: string;
+  helpUrl?: string;
+  helpIconTooltipContent?: string;
+  label: string;
+  value: string;
+  getInputRef?: (ref: HTMLInputElement | null) => void;
+  suffix: string;
+  isCopyToClipboardEnabled?: boolean;
+  name?: string;
+  dataCy?: string;
+}>;
+export default SuffixedInput;