@bigbinary/neeto-molecules 3.15.5 → 3.15.6

package/dist/cjs/ShareViaLink.js

@@ -95,8 +95,16 @@ var getPathname = function getPathname(url) {
 var getPrefixFromUrl = function getPrefixFromUrl(url) {
   return "".concat(new URL(url).origin, "/");
 };
-var truncatePrefix = function truncatePrefix(url) {
-  return url.length > MAX_PREFIX_SIZE ? "...".concat(url.slice(-MAX_PREFIX_SIZE)) : url;
+var truncatePrefix = function truncatePrefix(inputElement, prefixText) {
+  var parentElement = inputElement.parentElement;
+  var prefixElement = parentElement.querySelector(".neeto-ui-input__prefix");
+  var _getComputedStyle = getComputedStyle(inputElement),
+    fontSize = _getComputedStyle.fontSize;
+  var averageCharWidth = parseFloat(fontSize) * 0.6;
+  var requiredInputWidth = inputElement.value.length * averageCharWidth;
+  var prefixWidth = parentElement.offsetWidth - requiredInputWidth;
+  var maxPrefixChars = Math.max(Math.floor(prefixWidth / averageCharWidth), 5);
+  prefixElement.textContent = maxPrefixChars < prefixText.length ? "...".concat(prefixText.slice(-maxPrefixChars)) : prefixText;
 };
 
 var SOCIAL_MEDIA_OPTIONS = {
@@ -119,7 +127,6 @@ var SOCIAL_MEDIA_OPTIONS = {
 var PATH_VALIDATION_SCHEMA = yup__namespace.object().shape({
   path: yup__namespace.string().required(i18next.t("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, i18next.t("neetoMolecules.shareViaLink.editUrl.validationError"))
 });
-var MAX_PREFIX_SIZE = 30;
 
 var css = ".no-padding .neeto-ui-input.neeto-ui-input--medium input{padding:0}.no-padding .neeto-ui-input__prefix{color:rgb(var(--neeto-ui-gray-600))!important}";
 injectCss.n(css,{});
@@ -138,6 +145,18 @@ var EditURL = function EditURL(_ref) {
     t = _useTranslation.t;
   var focusRef = React.useRef(null);
   var prevIsLoadingRef = React.useRef(isLoading);
+  var prefixText = (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url);
+  var observerRef = React.useRef(new ResizeObserver(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+      entry = _ref3[0];
+    return requestAnimationFrame(function () {
+      return truncatePrefix(entry.target, prefixText);
+    });
+  }));
+  var inputRef = React.useCallback(function (inputElement) {
+    focusRef.current = inputElement;
+    inputElement ? observerRef.current.observe(inputElement) : observerRef.current.disconnect();
+  }, []);
   React.useEffect(function () {
     if (prevIsLoadingRef.current && !isLoading) onClose();
     prevIsLoadingRef.current = isLoading;
@@ -161,13 +180,13 @@ var EditURL = function EditURL(_ref) {
         path: (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.editablePath) || getPathname(url)
       },
       validationSchema: PATH_VALIDATION_SCHEMA,
-      onSubmit: function onSubmit(_ref2) {
-        var path = _ref2.path;
+      onSubmit: function onSubmit(_ref4) {
+        var path = _ref4.path;
         return handleEdit(path);
       },
-      children: function children(_ref3) {
-        var isSubmitting = _ref3.isSubmitting,
-          dirty = _ref3.dirty;
+      children: function children(_ref5) {
+        var isSubmitting = _ref5.isSubmitting,
+          dirty = _ref5.dirty;
         return /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
           children: [/*#__PURE__*/jsxRuntime.jsxs(Body, {
             className: "space-y-6",
@@ -177,8 +196,8 @@ var EditURL = function EditURL(_ref) {
               label: t("neetoMolecules.shareViaLink.editUrl.inputLabel"),
               maxLength: editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.maxLength,
               name: "path",
-              ref: focusRef,
-              prefix: truncatePrefix((editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url))
+              prefix: prefixText,
+              ref: inputRef
             }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
               className: "neeto-ui-text-gray-700",
               lineHeight: "normal",