@bigbinary/neeto-molecules 3.15.5 → 3.15.6

package/dist/ShareViaLink.js

@@ -1,7 +1,7 @@
 import { slugify, isPresent, noop } from '@bigbinary/neeto-cist';
 import { omit } from 'ramda';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useRef, useEffect, useState, createElement } from 'react';
+import React__default, { useRef, useCallback, useEffect, useState, createElement } from 'react';
 import ExternalLink from '@bigbinary/neeto-icons/ExternalLink';
 import Button from '@bigbinary/neetoui/Button';
 import { useTranslation, Trans } from 'react-i18next';
@@ -74,8 +74,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 = {
@@ -98,7 +106,6 @@ var SOCIAL_MEDIA_OPTIONS = {
 var PATH_VALIDATION_SCHEMA = yup.object().shape({
   path: yup.string().required(t("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, 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}";
 n(css,{});
@@ -117,6 +124,18 @@ var EditURL = function EditURL(_ref) {
     t = _useTranslation.t;
   var focusRef = useRef(null);
   var prevIsLoadingRef = useRef(isLoading);
+  var prefixText = (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url);
+  var observerRef = useRef(new ResizeObserver(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+      entry = _ref3[0];
+    return requestAnimationFrame(function () {
+      return truncatePrefix(entry.target, prefixText);
+    });
+  }));
+  var inputRef = useCallback(function (inputElement) {
+    focusRef.current = inputElement;
+    inputElement ? observerRef.current.observe(inputElement) : observerRef.current.disconnect();
+  }, []);
   useEffect(function () {
     if (prevIsLoadingRef.current && !isLoading) onClose();
     prevIsLoadingRef.current = isLoading;
@@ -140,13 +159,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__*/jsxs(Form, {
           children: [/*#__PURE__*/jsxs(Body, {
             className: "space-y-6",
@@ -156,8 +175,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__*/jsx(Typography, {
               className: "neeto-ui-text-gray-700",
               lineHeight: "normal",