@trops/dash-core 0.1.563 → 0.1.564

package/dist/index.esm.js

@@ -11697,7 +11697,9 @@ var PanelEditItem = function PanelEditItem(_ref) {
   var workspace = _ref.workspace,
     onUpdate = _ref.onUpdate,
     _ref$item = _ref.item,
-    item = _ref$item === void 0 ? null : _ref$item;
+    item = _ref$item === void 0 ? null : _ref$item,
+    _ref$flushRef = _ref.flushRef,
+    flushRef = _ref$flushRef === void 0 ? null : _ref$flushRef;
   var _useState = useState(item),
     _useState2 = _slicedToArray(_useState, 2),
     itemSelected = _useState2[0],
@@ -11712,6 +11714,23 @@ var PanelEditItem = function PanelEditItem(_ref) {
   var forceUpdate = useCallback(function () {
     return updateState({});
   }, []);
+
+  // Refs that mirror the latest local state. Used by the unmount
+  // cleanup and the flush handler — both run outside the normal
+  // render cycle and can't rely on the closed-over state, since
+  // closures capture state at the moment the function was created.
+  var itemSelectedRef = useRef(itemSelected);
+  var workspaceSelectedRef = useRef(workspaceSelected);
+  var onUpdateRef = useRef(onUpdate);
+  itemSelectedRef.current = itemSelected;
+  workspaceSelectedRef.current = workspaceSelected;
+  onUpdateRef.current = onUpdate;
+
+  // True when local edits have not yet been propagated to the parent.
+  // Set by handleTextChangeCustom, cleared by flushPending. The
+  // unmount cleanup (below) consults this so a tab switch or modal
+  // close doesn't drop the user's last few keystrokes.
+  var dirtyRef = useRef(false);
   useEffect(function () {
     if (deepEqual(item, itemSelected) === false) {
       setItemSelected(function () {
@@ -11727,13 +11746,55 @@ var PanelEditItem = function PanelEditItem(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspace, item]);
-  function handleUpdate(e, data) {
-    var workspaceTemp = WorkspaceModel(workspaceSelected);
-    var newLayout = replaceItemInLayout(workspaceTemp.layout, data["id"], data);
+
+  // Build the fresh workspace from the latest local item + propagate
+  // to the parent. Returns `{item, workspace}` so callers (the
+  // modal's Save handler) can read the new workspace synchronously,
+  // sidestepping React's async setState — the parent's
+  // workspaceSelected state won't reflect this call until the next
+  // render, but the caller already has the new value in hand.
+  //
+  // Returns null when there's nothing to flush.
+  function flushPending() {
+    if (!dirtyRef.current) return null;
+    var latestItem = itemSelectedRef.current;
+    var latestWorkspace = workspaceSelectedRef.current;
+    if (!latestItem || !latestWorkspace) return null;
+    var workspaceTemp = WorkspaceModel(latestWorkspace);
+    var newLayout = replaceItemInLayout(workspaceTemp.layout, latestItem["id"], latestItem);
     workspaceTemp.layout = newLayout;
-    onUpdate(data, workspaceTemp);
-    forceUpdate();
+    dirtyRef.current = false;
+    onUpdateRef.current(latestItem, workspaceTemp);
+    return {
+      item: latestItem,
+      workspace: workspaceTemp
+    };
   }
+
+  // Expose flushPending via the ref the modal passes in. This is how
+  // the modal's Save handler triggers one final propagation before
+  // calling onSaveWorkspace — without it, the modal would save the
+  // workspace as it stood before the user's last typing burst.
+  useEffect(function () {
+    if (!flushRef) return undefined;
+    flushRef.current = flushPending;
+    return function () {
+      if (flushRef.current === flushPending) flushRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flushRef]);
+
+  // Final flush on unmount. Triggers when the user switches sidebar
+  // tabs (the modal conditionally renders only the active section,
+  // so switching unmounts PanelEditItem) or closes the modal without
+  // saving. The parent modal is still mounted at this point, so
+  // calling onUpdate from cleanup is safe.
+  useEffect(function () {
+    return function () {
+      if (dirtyRef.current) flushPending();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   function renderCustomSettings() {
     if (itemSelected) {
       var componentConfig = ComponentManager.getComponent(itemSelected.component);
@@ -11742,8 +11803,15 @@ var PanelEditItem = function PanelEditItem(_ref) {
       }
       if ("userConfig" in componentConfig) {
         var userConfig = componentConfig["userConfig"];
-        var layoutItem = LayoutModel(itemSelected, workspaceSelected);
-        var userPrefs = layoutItem.userPrefs;
+        // Read userPrefs straight off the locally-tracked itemSelected.
+        // LayoutModel() resets `userPrefs` to widgetConfig template
+        // defaults and only merges back `obj.userConfigValues` (the
+        // EnhancedWidgetDropdown add-time field), silently dropping
+        // `obj.userPrefs`. Piping through it on every render strips
+        // the in-flight typed value and snaps the controlled InputText
+        // back to "", which is what made these inputs untypeable —
+        // user typing "airports" was seeing only the last char land.
+        var userPrefs = itemSelected.userPrefs && _typeof(itemSelected.userPrefs) === "object" ? itemSelected.userPrefs : {};
         return Object.keys(userConfig).map(function (key) {
           if (key in userPrefs) {
             var configItem = userConfig[key];
@@ -11764,7 +11832,18 @@ var PanelEditItem = function PanelEditItem(_ref) {
       newItem["userPrefs"] = {};
     }
     newItem["userPrefs"][key] = value;
-    handleUpdate(null, newItem);
+    // Update LOCAL state synchronously so the controlled InputText
+    // reflects the typed character on the very next render. The
+    // expensive workspace clone + parent-tree re-render is DEFERRED
+    // until Save (via flushRef) or unmount (tab switch). Pre-defer
+    // behavior: every keystroke deep-cloned the workspace and
+    // re-rendered the whole modal subtree (sidebar + body + footer),
+    // which made even short strings feel sluggish — characters
+    // landed but the input lagged.
+    setItemSelected(function () {
+      return newItem;
+    });
+    dirtyRef.current = true;
   }
   function renderFormItem(displayName, key, instructions, required, value, _onChange, configItem) {
     var _configItem$step;
@@ -14566,6 +14645,11 @@ var LayoutBuilderConfigModal = function LayoutBuilderConfigModal(_ref) {
   var forceUpdate = useCallback(function () {
     return updateState({});
   }, []);
+
+  // PanelEditItem defers per-keystroke propagation to keep typing
+  // snappy. This ref lets us trigger one final flush right before
+  // Save so the saved workspace includes any in-flight edits.
+  var panelEditFlushRef = useRef(null);
   useEffect(function () {
     if (item !== itemSelected) {
       setItemSelected(function () {
@@ -14597,7 +14681,17 @@ var LayoutBuilderConfigModal = function LayoutBuilderConfigModal(_ref) {
     forceUpdate();
   }
   function handleSaveConfig() {
-    onSaveWorkspace(workspaceSelected);
+    // Pull any pending edits out of PanelEditItem before saving.
+    // The panel propagates back via onUpdate (which sets our
+    // workspaceSelected state) but setState is async — so we read
+    // the flushed workspace directly from the return value to avoid
+    // saving a stale snapshot on the very first Save after typing.
+    var workspaceToSave = workspaceSelected;
+    if (typeof panelEditFlushRef.current === "function") {
+      var flushed = panelEditFlushRef.current();
+      if (flushed && flushed.workspace) workspaceToSave = flushed.workspace;
+    }
+    onSaveWorkspace(workspaceToSave);
   }
   var sections = itemSelected ? getSections(itemSelected) : [];
   var activeDef = sections.find(function (s) {
@@ -14662,7 +14756,8 @@ var LayoutBuilderConfigModal = function LayoutBuilderConfigModal(_ref) {
       children: [activeSection === "edit" && /*#__PURE__*/jsx(PanelEditItem, {
         item: itemSelected,
         onUpdate: handleEditChange,
-        workspace: workspaceSelected
+        workspace: workspaceSelected,
+        flushRef: panelEditFlushRef
       }), activeSection === "grid_layout" && /*#__PURE__*/jsx(PanelEditItemGrid, {
         item: itemSelected,
         onUpdate: handleEditChange,