@bigbinary/neeto-molecules 1.0.60 → 1.0.62

package/dist/ThemeSidebar.js

@@ -12512,6 +12512,13 @@ var bytesToSize = function bytesToSize(bytes) {
   if (i === 0) return "".concat(bytes, " ").concat(sizes[i], ")");
   return "".concat((bytes / Math.pow(1024, i)).toFixed(1), " ").concat(sizes[i]);
 };
+var scrollElementIntoView = function scrollElementIntoView(elementId) {
+  var _elementToScroll$scro;
+  var elementToScroll = document.getElementById(elementId);
+  elementToScroll === null || elementToScroll === void 0 ? void 0 : (_elementToScroll$scro = elementToScroll.scrollIntoView) === null || _elementToScroll$scro === void 0 ? void 0 : _elementToScroll$scro.call(elementToScroll, {
+    behavior: "smooth"
+  });
+};
 
 var useDropzoneWithValidation = function useDropzoneWithValidation(_ref) {
   var maxSize = _ref.maxSize,
@@ -13210,19 +13217,27 @@ var ThemeCard = function ThemeCard(_ref) {
     onEditTheme = _ref.onEditTheme,
     onApplyTheme = _ref.onApplyTheme,
     onCloneTheme = _ref.onCloneTheme,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    isHighLightedTheme = _ref.isHighLightedTheme,
+    isApplyingTheme = _ref.isApplyingTheme;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var name = theme.name,
     styles = _objectWithoutProperties(theme, _excluded);
+  var handleApplyTheme = function handleApplyTheme() {
+    if (isApplyingTheme) return;
+    onApplyTheme(theme);
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "group space-y-2",
-    "data-cy": active ? "active-theme-card" : "theme-card"
+    "data-cy": active ? "active-theme-card" : "theme-card",
+    id: theme.id
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classnames("neeto-molecules-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
       "neeto-ui-border-gray-400": !active,
       "neeto-ui-border-gray-800 neeto-molecules-theme-thumbnail--active": active,
-      "neeto-molecules-theme-thumbnail--preview-active": isPreviewing
+      "neeto-molecules-theme-thumbnail--preview-active": isPreviewing,
+      "neeto-molecules-theme-thumbnail--highlight-active": isHighLightedTheme
     }),
     style: {
       backgroundColor: path(["colorScheme", "backgroundColor"], styles),
@@ -13272,12 +13287,12 @@ var ThemeCard = function ThemeCard(_ref) {
   }) : /*#__PURE__*/React__default.createElement(Button, {
     className: "flex-shrink-0",
     "data-cy": "apply-theme-button",
+    disabled: isApplyingTheme,
     label: t("neetoMolecules.common.actions.apply"),
+    loading: isApplyingTheme,
     size: "small",
     style: "link",
-    onClick: function onClick() {
-      return onApplyTheme(theme);
-    }
+    onClick: handleApplyTheme
   }), /*#__PURE__*/React__default.createElement(Dropdown, {
     buttonProps: {
       "data-cy": "theme-card-options"
@@ -13316,7 +13331,10 @@ var Themes = function Themes(_ref) {
     onEditTheme = _ref.onEditTheme,
     onApplyTheme = _ref.onApplyTheme,
     previewingTheme = _ref.previewingTheme,
-    setPreviewingTheme = _ref.setPreviewingTheme;
+    setPreviewingTheme = _ref.setPreviewingTheme,
+    themeToHighlight = _ref.themeToHighlight,
+    didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
+    applyingThemeId = _ref.applyingThemeId;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(""),
@@ -13330,6 +13348,13 @@ var Themes = function Themes(_ref) {
     return theme.name.toLowerCase().includes(searchQuery.toLowerCase());
   });
   var isSearchFieldVisible = (customThemes === null || customThemes === void 0 ? void 0 : customThemes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
+  useEffect(function () {
+    if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
+    didScrollActiveThemeIntoView.current = true;
+    setTimeout(function () {
+      scrollElementIntoView(currentTheme.id);
+    }, 200);
+  }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-theme-design-sidebar__scroll"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -13362,6 +13387,7 @@ var Themes = function Themes(_ref) {
   }, filteredDefaultThemes.map(function (theme) {
     return /*#__PURE__*/React__default.createElement(ThemeCard, {
       active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
+      isApplyingTheme: applyingThemeId === theme.id,
       isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
       theme: theme,
@@ -13382,6 +13408,7 @@ var Themes = function Themes(_ref) {
     var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
     return /*#__PURE__*/React__default.createElement(ThemeCard, {
       active: isActive,
+      isHighLightedTheme: theme.id === themeToHighlight,
       isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
       theme: theme,
@@ -13396,7 +13423,7 @@ var Themes = function Themes(_ref) {
 
 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 = ".neeto-molecules-theme-design-sidebar{background-color:rgb(var(--neeto-ui-white));box-shadow:var(--neeto-ui-shadow-s);height:100%;width:320px}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__scroll{height:94%;overflow-y:auto}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-molecules-theme-design-preview__wrapper{background-color:rgb(var(--neeto-ui-gray-100));flex-grow:1;height:100%;position:relative}.neeto-molecules-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-molecules-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-700));box-shadow:0 0 0 1px rgb(var(--neeto-ui-gray-700))}";
+var css = ".neeto-molecules-theme-design-sidebar{background-color:rgb(var(--neeto-ui-white));box-shadow:var(--neeto-ui-shadow-s);height:100%;width:320px}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__scroll{height:94%;overflow-y:auto}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-molecules-theme-design-preview__wrapper{background-color:rgb(var(--neeto-ui-gray-100));flex-grow:1;height:100%;position:relative}.neeto-molecules-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-molecules-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-700));box-shadow:0 0 0 1px rgb(var(--neeto-ui-gray-700))}.neeto-molecules-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-success-500));box-shadow:0 0 0 1px rgb(var(--neeto-ui-success-500));transition:border-color box-shadow .1s .1s}";
 n(css,{});
 
 var TitleBar = function TitleBar(_ref) {
@@ -13464,7 +13491,8 @@ var ThemeSidebar = function ThemeSidebar(_ref) {
     editTheme = _ref.editTheme,
     applyTheme = _ref.applyTheme,
     currentTheme = _ref.currentTheme,
-    isLoadingThemes = _ref.isLoadingThemes;
+    isLoadingThemes = _ref.isLoadingThemes,
+    applyingThemeId = _ref.applyingThemeId;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(DESIGN_SCREENS.THEMES),
@@ -13475,6 +13503,11 @@ var ThemeSidebar = function ThemeSidebar(_ref) {
     _useState4 = _slicedToArray$2(_useState3, 2),
     previewingTheme = _useState4[0],
     setPreviewingTheme = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray$2(_useState5, 2),
+    themeToHighlight = _useState6[0],
+    setThemeToHighlight = _useState6[1];
+  var didScrollActiveThemeIntoView = useRef(null);
   useEffect(function () {
     isLoadingThemes && setCurrentScreen(DESIGN_SCREENS.LOADING);
   }, [isLoadingThemes]);
@@ -13485,12 +13518,6 @@ var ThemeSidebar = function ThemeSidebar(_ref) {
     setPreviewingTheme(theme);
     setCurrentScreen(DESIGN_SCREENS.CUSTOMIZE);
   };
-  var handleCloneTheme = function handleCloneTheme(data) {
-    var themeToClone = _objectSpread(_objectSpread({}, data), {}, {
-      name: "".concat(data.name, " - clone")
-    });
-    createTheme(themeToClone);
-  };
   var handleBackPress = function handleBackPress() {
     setCurrentScreen(DESIGN_SCREENS.THEMES);
     setPreviewingTheme(null);
@@ -13502,10 +13529,30 @@ var ThemeSidebar = function ThemeSidebar(_ref) {
     }));
     setCurrentScreen(DESIGN_SCREENS.CUSTOMIZE);
   };
+  var highlightTheme = function highlightTheme(themeToHighlight) {
+    setTimeout(function () {
+      scrollElementIntoView(themeToHighlight.id);
+    }, 1500);
+    setTimeout(function () {
+      setThemeToHighlight(null);
+    }, 4000);
+    setThemeToHighlight(themeToHighlight.id);
+  };
+  var createThemeCallback = function createThemeCallback(createdTheme) {
+    setCurrentScreen(DESIGN_SCREENS.THEMES);
+    setPreviewingTheme(createdTheme.id);
+    highlightTheme(createdTheme);
+  };
+  var handleCloneTheme = function handleCloneTheme(data) {
+    var themeToClone = _objectSpread(_objectSpread({}, data), {}, {
+      name: "".concat(data.name, " - clone")
+    });
+    createTheme(themeToClone, createThemeCallback);
+  };
   var handleFormSubmit = function handleFormSubmit(values) {
     var formattedValues = transformTheme(values);
     if (!(previewingTheme !== null && previewingTheme !== void 0 && previewingTheme.id)) {
-      createTheme(formattedValues);
+      createTheme(formattedValues, createThemeCallback);
     } else {
       editTheme(_objectSpread(_objectSpread({}, formattedValues), {}, {
         id: previewingTheme.id
@@ -13522,11 +13569,15 @@ var ThemeSidebar = function ThemeSidebar(_ref) {
   }), currentScreen === DESIGN_SCREENS.LOADING && /*#__PURE__*/React__default.createElement("div", {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React__default.createElement(Spinner, null)), currentScreen === DESIGN_SCREENS.THEMES && /*#__PURE__*/React__default.createElement(Themes, {
+    applyingThemeId: applyingThemeId,
     currentTheme: currentTheme,
     customThemes: customThemes,
     defaultThemes: defaultThemes,
+    didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
+    highlightTheme: highlightTheme,
     previewingTheme: previewingTheme,
     setPreviewingTheme: setPreviewingTheme,
+    themeToHighlight: themeToHighlight,
     onApplyTheme: applyTheme,
     onCloneTheme: handleCloneTheme,
     onDeleteTheme: deleteTheme,