@plasmicapp/react-web 0.2.116 → 0.2.117

package/dist/all.d.ts

@@ -35,6 +35,7 @@ interface $StateSpec<T> {
     type: "private" | "readonly" | "writable";
     valueProp?: string;
     onChangeProp?: string;
+    isArray?: boolean;
 }
 declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>): any;
 

package/dist/index.d.ts

@@ -9,5 +9,3 @@ export * from "./plume/select";
 export * from "./plume/switch";
 export * from "./plume/text-input";
 export * from "./plume/triggered-overlay";
-export * from "./states/helpers";
-export { $State, default as useDollarState, useCanvasDollarState, } from "./states/valtio";

package/dist/react-web.cjs.development.js

@@ -1982,13 +1982,33 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
     });
     $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
   });
-  var untrackedInitialValue = mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(initialStatePath, initialSpec)));
+  var initialValue = initialSpec.initFunc($$state.props, $state, getIndexes(initialStatePath, initialSpec));
+  saveStateInitialValue($$state, initialStatePath, initialSpec, initialValue);
+  return initialValue;
+}
+
+function saveStateInitialValue($$state, path, spec, initialValue) {
+  // array states are a special case.Wwe listen for changes in the array and in the array cells.
+  // for example: $state.people.push(...), $state.people.splice(...), $state.people[0] = ...
+  // that's why we need to track the array object
+  if (spec.isArray && Array.isArray(initialValue)) {
+    var array = initialValue.map(function (val) {
+      return mkUntrackedValue(val);
+    });
+
+    set($$state.stateValues, path, array); // we need to make the array untracked for initStateValues
+    // so we can distinguish between stateValue and initStateValue.
+    // otherwise they would reference the same array.
 
-  set($$state.initStateValues, initialStatePath, untrackedInitialValue);
 
-  set($$state.stateValues, initialStatePath, untrackedInitialValue);
+    set($$state.initStateValues, path, mkUntrackedValue(array));
+  } else {
+    var untrackedValue = mkUntrackedValue(initialValue);
+
+    set($$state.stateValues, path, untrackedValue);
 
-  return untrackedInitialValue;
+    set($$state.initStateValues, path, untrackedValue);
+  }
 }
 
 function useDollarState(specs, props) {
@@ -2017,11 +2037,8 @@ function useDollarState(specs, props) {
       var _spec$initVal;
 
       saveNewState($$state, path, spec);
-      var untrackedValue = !spec.initFunc ? mkUntrackedValue((_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined) : initializeStateValue($$state, path, spec);
-
-      set($$state.stateValues, path, untrackedValue);
-
-      set($$state.initStateValues, path, untrackedValue);
+      var initialValue = !spec.initFunc ? (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined : initializeStateValue($$state, path, spec);
+      saveStateInitialValue($$state, path, spec, initialValue);
     }
 
     return {
@@ -2318,9 +2335,7 @@ function useCheckbox(plasmicClass, props, config, ref) {
       ref: rootRef
     }),
     wrapChildren: function wrapChildren(children) {
-      return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, {
-        isFocusable: true
-      }, React.createElement("input", Object.assign({}, inputProps, {
+      return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, null, React.createElement("input", Object.assign({}, inputProps, {
         ref: inputRef
       }))), children);
     }
@@ -3461,9 +3476,7 @@ function useSwitch(plasmicClass, props, config, ref) {
       ref: rootRef
     }),
     wrapChildren: function wrapChildren(children) {
-      return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, {
-        isFocusable: true
-      }, React.createElement("input", Object.assign({}, inputProps, {
+      return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, null, React.createElement("input", Object.assign({}, inputProps, {
         ref: inputRef
       }))), children);
     }