@plasmicapp/react-web 0.2.100 → 0.2.103

package/dist/react-web.esm.js

@@ -18,6 +18,8 @@ import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
 import { useSelectState } from '@react-stately/select';
 import { useSwitch as useSwitch$1 } from '@react-aria/switch';
 import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
+import _get from 'dlv';
+import { dset } from 'dset';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -845,7 +847,7 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       fullHeight = _ref.fullHeight,
       aspectRatio = _ref.aspectRatio;
 
-  var srcStr = src ? typeof src === "string" ? src : src.src : ""; // Assume external image if either dimension is null and use usual <img>
+  var srcStr = src ? typeof src === "string" ? src : typeof src.src === "string" ? src.src : src.src.src : ""; // Assume external image if either dimension is null and use usual <img>
 
   if (fullHeight == null || fullWidth == null) {
     return React__default.createElement("img", Object.assign({
@@ -862,6 +864,8 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     displayWidth = "100%";
   }
 
+  var computedDisplayWidth = displayWidth;
+
   if (fullWidth && fullHeight && (!displayWidth || displayWidth === "auto") && !!getPixelLength(displayHeight)) {
     // If there's a pixel length specified for displayHeight but not displayWidth,
     // then we can derive the pixel length for displayWidth.  Having an explicit
@@ -871,7 +875,7 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       // We shouldn't do it for SVGs though, because `fullWidth` and
       // `fullHeight` might have rounded values so the final
       // `displayWidth` could differ by 1px or so.
-      displayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
+      computedDisplayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
     }
   }
 
@@ -887,7 +891,7 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     spacerHeight = Math.round(spacerWidth / aspectRatio);
   }
 
-  var _getWidths = getWidths(displayWidth, fullWidth, {
+  var _getWidths = getWidths(computedDisplayWidth, fullWidth, {
     minWidth: displayMinWidth
   }),
       sizes = _getWidths.sizes,
@@ -1195,6 +1199,96 @@ function isInternalHref(href) {
   return /^\/(?!\/)/.test(href);
 }
 
+var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
+
+function isIterable(val) {
+  return val != null && typeof val[Symbol.iterator] === "function";
+}
+
+function genTranslatableString(elt) {
+  var components = {};
+  var componentsCount = 0;
+
+  var getText = function getText(node) {
+    if (!node) {
+      return "";
+    }
+
+    if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
+      return node.toString();
+    }
+
+    if (typeof node !== "object") {
+      return "";
+    }
+
+    if (Array.isArray(node) || isIterable(node)) {
+      return Array.from(node).map(function (child) {
+        return getText(child);
+      }).filter(function (child) {
+        return !!child;
+      }).join("");
+    }
+
+    var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
+    var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
+      return getText(child);
+    }).filter(function (child) {
+      return !!child;
+    }).join("");
+
+    if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
+      return contents;
+    }
+
+    var componentId = componentsCount + 1;
+    componentsCount++;
+    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
+      key: componentId,
+      children: undefined
+    }) : node;
+    return "<" + componentId + ">" + contents + "</" + componentId + ">";
+  };
+
+  var str = getText(elt);
+  return {
+    str: str,
+    components: components,
+    componentsCount: componentsCount
+  };
+}
+function Trans(_ref) {
+  var children = _ref.children;
+
+  var _t = React__default.useContext(PlasmicTranslatorContext);
+
+  if (!_t) {
+    warnNoTranslationFunctionAtMostOnce();
+    return children;
+  }
+
+  var _genTranslatableStrin = genTranslatableString(children),
+      str = _genTranslatableStrin.str,
+      components = _genTranslatableStrin.components,
+      componentsCount = _genTranslatableStrin.componentsCount;
+
+  return _t(str, componentsCount > 0 ? {
+    components: components
+  } : undefined);
+}
+var hasWarned = false;
+
+function warnNoTranslationFunctionAtMostOnce() {
+  if (!hasWarned) {
+    console.warn("Using Plasmic Translation but no translation function has been provided");
+    hasWarned = true;
+  }
+}
+
+function hasKey(v, key) {
+  return typeof v === "object" && v !== null && key in v;
+}
+
 function PlasmicSlot(props) {
   return renderPlasmicSlot(props);
 }
@@ -1238,7 +1332,8 @@ function renderPlasmicSlot(opts) {
 
 function maybeAsString(node) {
   // Unwrap fragments
-  if (isValidElement(node) && node.type === Fragment) {
+  if (isValidElement(node) && ( // Fragment and Trans don't render DOM elements
+  node.type === Fragment || node.type === Trans)) {
     return maybeAsString(node.props.children);
   }
 
@@ -1349,96 +1444,6 @@ function createUseScreenVariants(isMulti, screenQueries) {
   };
 }
 
-var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
-
-function isIterable(val) {
-  return val != null && typeof val[Symbol.iterator] === "function";
-}
-
-function genTranslatableString(elt) {
-  var components = {};
-  var componentsCount = 0;
-
-  var getText = function getText(node) {
-    if (!node) {
-      return "";
-    }
-
-    if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
-      return node.toString();
-    }
-
-    if (typeof node !== "object") {
-      return "";
-    }
-
-    if (Array.isArray(node) || isIterable(node)) {
-      return Array.from(node).map(function (child) {
-        return getText(child);
-      }).filter(function (child) {
-        return !!child;
-      }).join("");
-    }
-
-    var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
-    var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
-      return getText(child);
-    }).filter(function (child) {
-      return !!child;
-    }).join("");
-
-    if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
-      return contents;
-    }
-
-    var componentId = componentsCount + 1;
-    componentsCount++;
-    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
-      key: componentId,
-      children: undefined
-    }) : node;
-    return "<" + componentId + ">" + contents + "</" + componentId + ">";
-  };
-
-  var str = getText(elt);
-  return {
-    str: str,
-    components: components,
-    componentsCount: componentsCount
-  };
-}
-function Trans(_ref) {
-  var children = _ref.children;
-
-  var _t = React__default.useContext(PlasmicTranslatorContext);
-
-  if (!_t) {
-    warnNoTranslationFunctionAtMostOnce();
-    return children;
-  }
-
-  var _genTranslatableStrin = genTranslatableString(children),
-      str = _genTranslatableStrin.str,
-      components = _genTranslatableStrin.components,
-      componentsCount = _genTranslatableStrin.componentsCount;
-
-  return _t(str, componentsCount > 0 ? {
-    components: components
-  } : undefined);
-}
-var hasWarned = false;
-
-function warnNoTranslationFunctionAtMostOnce() {
-  if (!hasWarned) {
-    console.warn("Using Plasmic Translation but no translation function has been provided");
-    hasWarned = true;
-  }
-}
-
-function hasKey(v, key) {
-  return typeof v === "object" && v !== null && key in v;
-}
-
 var PlasmicRootContext = /*#__PURE__*/createContext(undefined);
 function PlasmicRootProvider(props) {
   var platform = props.platform,
@@ -3113,5 +3118,382 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   };
 }
 
-export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+function generateStateOnChangeProp($state, stateName, dataReps) {
+  return function (val, path) {
+    return dset($state, [stateName].concat(dataReps, path), val);
+  };
+}
+/**
+ * This function generate the state value prop for repeated states
+ * Example:
+ *   - parent[][].counter[].count
+ * We need to pass `parent[index1][index2].counter to the child component
+ */
+
+function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
+) {
+  return _get($state, path);
+}
+
+var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
+
+function shallowEqual(a1, a2) {
+  if (a1.length !== a2.length) {
+    return false;
+  }
+
+  for (var i = 0; i < a1.length; i++) {
+    if (a1[i] !== a2[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+var isNum = function isNum(value) {
+  return typeof value === "symbol" ? false : !isNaN(+value);
+};
+
+function mkProxy(specs, maybeHandlers) {
+  var handlers = maybeHandlers != null ? maybeHandlers : function () {
+    return {
+      get: function get(target, property) {
+        return target[property];
+      },
+      set: function set(target, property, value) {
+        return (target[property] = value) || true;
+      }
+    };
+  };
+
+  var rec = function rec(currPath) {
+    var nextParts = Object.fromEntries(specs.filter(function (spec) {
+      return shallowEqual(currPath.map(function (p) {
+        return isNum(p) ? "[]" : p;
+      }), spec.path.slice(0, currPath.length));
+    }).map(function (spec) {
+      var nextPart = spec.path[currPath.length];
+
+      if (spec.path.length === currPath.length + 1) {
+        return [nextPart, {
+          isLast: true,
+          spec: spec
+        }];
+      } else {
+        return [nextPart, {
+          isLast: false,
+          spec: spec
+        }];
+      }
+    }));
+    return new Proxy("[]" in nextParts ? [] : {}, {
+      get: function get(target, property, receiver) {
+        if ("[]" in nextParts && isNum(property)) {
+          if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [+property]));
+          }
+        } else if (property in nextParts) {
+          if (nextParts[property].isLast) {
+            var _handlers$get, _handlers;
+
+            return handlers == null ? void 0 : (_handlers$get = (_handlers = handlers({
+              path: [].concat(currPath, [property]),
+              spec: nextParts[property].spec
+            })).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
+          } else if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [property]));
+          }
+        }
+
+        return target[property];
+      },
+      set: function set(target, property, value, receiver) {
+        if (!(property in target) && property in nextParts) {
+          if (nextParts[property].isLast) {
+            var _handlers$set, _handlers$set2, _handlers2;
+
+            return (_handlers$set = (_handlers$set2 = (_handlers2 = handlers({
+              path: [].concat(currPath, [property]),
+              spec: nextParts[property].spec
+            })).set) == null ? void 0 : _handlers$set2.call(_handlers2, target, property, value, receiver)) != null ? _handlers$set : false;
+          } else {
+            throw new Error("You can't set a value in the middle of the path");
+          }
+        } else {
+          target[property] = value;
+          return true;
+        }
+      }
+    });
+  };
+
+  return rec([]);
+}
+
+function cloneProxy(specs, states, obj) {
+  var newObj = mkProxy(specs);
+  Object.values(states).forEach(function (_ref) {
+    var path = _ref.path;
+
+    dset(newObj, path, _get(obj, path));
+  });
+  return newObj;
+}
+
+function saveState(state, states) {
+  states[JSON.stringify(state.path)] = state;
+}
+
+function hasState(state, states) {
+  return JSON.stringify(state.path) in states;
+}
+
+var transformPathStringToObj = function transformPathStringToObj(str) {
+  // "c[][]" -> ["c", "[]", "[]"]
+  var splitStatePathPart = function splitStatePathPart(state) {
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+  };
+
+  return str.split(".").flatMap(splitStatePathPart);
+};
+
+function useVanillaDollarState(_specs, props) {
+  var specs = _specs.map(function (_ref2) {
+    var pathStr = _ref2.path,
+        spec = _objectWithoutPropertiesLoose(_ref2, ["path"]);
+
+    return _extends({}, spec, {
+      pathStr: pathStr,
+      path: transformPathStringToObj(pathStr),
+      isRepeated: pathStr.split(".").some(function (part) {
+        return part.endsWith("[]");
+      })
+    });
+  });
+
+  var _React$useState = React__default.useState(function () {
+    var stateValues = mkProxy(specs);
+    var initStates = {};
+
+    for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
+      var spec = _step.value;
+
+      if (spec.valueProp || spec.isRepeated) {
+        continue;
+      } else if (spec.initFunc) {
+        dset(stateValues, spec.path, UNINITIALIZED);
+      } else {
+        var _spec$initVal;
+
+        dset(stateValues, spec.path, (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined);
+      }
+
+      saveState({
+        path: spec.path,
+        spec: spec
+      }, initStates);
+    }
+
+    var deps = fillUninitializedStateValues(specs, props, stateValues, initStates);
+    return {
+      stateValues: stateValues,
+      initStateDeps: deps,
+      initStateValues: cloneProxy(specs, initStates, stateValues),
+      states: initStates
+    };
+  }),
+      $$state = _React$useState[0],
+      set$$State = _React$useState[1];
+
+  var $state = mkProxy(specs, function (state) {
+    return {
+      get: function get(_target, _property) {
+        if (state.spec.valueProp) {
+          if (!state.spec.isRepeated) {
+            return props[state.spec.valueProp];
+          } else {
+            return _get(props[state.spec.valueProp], state.path.slice(1));
+          }
+        }
+
+        if (!hasState(state, $$state.states)) {
+          var _state$spec$initVal;
+
+          saveState(state, $$state.states);
+
+          dset($$state.stateValues, state.path, state.spec.initFunc ? UNINITIALIZED : (_state$spec$initVal = state.spec.initVal) != null ? _state$spec$initVal : undefined);
+
+          var deps = state.spec.initFunc ? fillUninitializedStateValues(specs, props, $$state.stateValues, $$state.states) : {};
+
+          dset($$state.initStateValues, state.path, _get($$state.stateValues, state.path));
+
+          set$$State(function (prev) {
+            return {
+              initStateValues: cloneProxy(specs, prev.states, prev.stateValues),
+              stateValues: cloneProxy(specs, prev.states, prev.initStateValues),
+              initStateDeps: _extends({}, prev.initStateDeps, deps),
+              states: _extends({}, prev.states)
+            };
+          });
+        }
+
+        return _get($$state.stateValues, state.path);
+      },
+      set: function set(_target, _property, newValue) {
+        saveState(state, $$state.states);
+
+        if (newValue !== _get($$state.stateValues, state.path)) {
+          dset($$state.stateValues, state.path, newValue);
+
+          for (var _i = 0, _Object$entries = Object.entries($$state.initStateDeps); _i < _Object$entries.length; _i++) {
+            var _Object$entries$_i = _Object$entries[_i],
+                key = _Object$entries$_i[0],
+                deps = _Object$entries$_i[1];
+
+            if (deps.includes(JSON.stringify(state.path))) {
+              dset($$state.stateValues, JSON.parse(key), UNINITIALIZED);
+            }
+          }
+
+          var newDeps = fillUninitializedStateValues(specs, props, $$state.stateValues, $$state.states);
+          set$$State(function (prev) {
+            return {
+              initStateValues: _extends({}, prev.initStateValues),
+              stateValues: cloneProxy(specs, prev.states, prev.stateValues),
+              initStateDeps: _extends({}, prev.initStateDeps, newDeps),
+              states: _extends({}, prev.states)
+            };
+          });
+
+          if (state.spec.onChangeProp) {
+            var _props$state$spec$onC;
+
+            (_props$state$spec$onC = props[state.spec.onChangeProp]) == null ? void 0 : _props$state$spec$onC.call(props, newValue, state.path);
+          }
+        }
+
+        return true;
+      }
+    };
+  }); // For each spec with an initFunc, evaluate it and see if
+  // the init value has changed. If so, reset its state.
+
+  var newStateValues = undefined;
+  var resetSpecs = [];
+
+  for (var _i2 = 0, _Object$values = Object.values($$state.states); _i2 < _Object$values.length; _i2++) {
+    var _Object$values$_i = _Object$values[_i2],
+        path = _Object$values$_i.path,
+        spec = _Object$values$_i.spec;
+
+    if (spec.initFunc) {
+      var newInit = spec.initFunc(props, $state);
+
+      if (newInit !== _get($$state.initStateValues, path)) {
+        console.log("init changed for " + JSON.stringify(path) + " from " + _get($$state.initStateValues, path) + " to " + newInit + "; resetting state");
+        resetSpecs.push({
+          path: path,
+          spec: spec
+        });
+
+        if (!newStateValues) {
+          newStateValues = cloneProxy(specs, $$state.states, $$state.stateValues);
+        }
+
+        dset(newStateValues, path, UNINITIALIZED);
+      }
+    }
+  }
+
+  React__default.useLayoutEffect(function () {
+    if (newStateValues !== undefined) {
+      var newDeps = fillUninitializedStateValues(specs, props, newStateValues, $$state.states);
+      set$$State(function (prev) {
+        var initStateValues = cloneProxy(specs, prev.states, prev.initStateValues);
+        resetSpecs.forEach(function (_ref3) {
+          var path = _ref3.path;
+
+          dset(initStateValues, path, _get(newStateValues, path));
+        });
+        return {
+          stateValues: cloneProxy(specs, prev.states, newStateValues),
+          initStateDeps: _extends({}, prev.initStateDeps, newDeps),
+          initStateValues: initStateValues,
+          states: _extends({}, prev.states)
+        };
+      });
+
+      for (var _iterator2 = _createForOfIteratorHelperLoose(resetSpecs), _step2; !(_step2 = _iterator2()).done;) {
+        var _step2$value = _step2.value,
+            _path = _step2$value.path,
+            _spec = _step2$value.spec;
+
+        if (_spec.onChangeProp) {
+          var _props$_spec$onChange;
+
+          console.log("Firing onChange for reset init value: " + _spec.path, _get(newStateValues, _path));
+          (_props$_spec$onChange = props[_spec.onChangeProp]) == null ? void 0 : _props$_spec$onChange.call(props, _get(newStateValues, _path));
+        }
+      }
+    }
+  }, [newStateValues, props, resetSpecs, specs]);
+  return $state;
+}
+
+function fillUninitializedStateValues(specs, props, stateValues, states) {
+  var stateAccessStack = [new Set()];
+  var initFuncDeps = {};
+  var $state = mkProxy(specs, function (state) {
+    return {
+      get: function get(_target, _property) {
+        if (state.spec.valueProp) {
+          if (!state.spec.isRepeated) {
+            return props[state.spec.valueProp];
+          } else {
+            return _get(props[state.spec.valueProp], state.path.slice(1));
+          }
+        }
+
+        var value = _get(stateValues, state.path);
+
+        if (value === UNINITIALIZED) {
+          // This value has a init expression; need to be evaluated.
+          value = tracked(state);
+
+          dset(stateValues, state.path, value);
+        } // Record that this field had just been accessed; for
+        // trackInit() to know what fields were used to compute
+        // the init value
+
+
+        stateAccessStack[stateAccessStack.length - 1].add(JSON.stringify(state.path));
+        return value;
+      },
+      set: function set() {
+        throw new Error("Cannot update state values during initialization");
+      }
+    };
+  });
+
+  function tracked(state) {
+    stateAccessStack.push(new Set());
+    var res = state.spec.initFunc(props, $state);
+    var deps = stateAccessStack.pop();
+    initFuncDeps[JSON.stringify(state.path)] = [].concat(deps.values());
+    return res;
+  }
+
+  for (var _i3 = 0, _Object$values2 = Object.values(states); _i3 < _Object$values2.length; _i3++) {
+    var path = _Object$values2[_i3].path;
+
+    if (_get(stateValues, path) === UNINITIALIZED) {
+      _get($state, path);
+    }
+  }
+
+  return initFuncDeps;
+}
+
+export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useVanillaDollarState as useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map