@plasmicapp/react-web 0.2.124 → 0.2.126

package/dist/react-web.esm.js

@@ -2,7 +2,7 @@ import classNames$1 from 'classnames';
 import _get from 'dlv';
 export { default as get } from 'dlv';
 import * as React from 'react';
-import React__default, { forwardRef, createElement, Fragment, isValidElement, useContext, createContext, useState, useRef, useMemo, useImperativeHandle, useCallback, cloneElement } from 'react';
+import React__default, { forwardRef, createElement, Fragment, isValidElement, useContext, createContext, useState, useRef, useMemo, useLayoutEffect, useEffect, useImperativeHandle, useCallback, cloneElement } from 'react';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import { PlasmicDataSourceContextProvider } from '@plasmicapp/data-sources-context';
 export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
@@ -1733,9 +1733,10 @@ function set(obj, keys, val) {
     }
   }
 }
+var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
 var mkUntrackedValue = function mkUntrackedValue(o) {
-  return typeof o === "object" ? ref(o) : o;
+  return o != null && typeof o === "object" ? ref(o) : o;
 };
 
 var transformPathStringToObj = function transformPathStringToObj(str) {
@@ -1973,11 +1974,11 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
     var path = _ref2.path,
         spec = _ref2.spec;
     var unsubscribe = subscribeKey(_get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
-      return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(path, spec))));
+      return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec))));
     });
     $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
   });
-  var initialValue = initialSpec.initFunc($$state.props, $state, getIndexes(initialStatePath, initialSpec));
+  var initialValue = initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(initialStatePath, initialSpec));
   saveStateInitialValue($$state, initialStatePath, initialSpec, initialValue);
   return initialValue;
 }
@@ -2006,7 +2007,7 @@ function saveStateInitialValue($$state, path, spec, initialValue) {
   }
 }
 
-function useDollarState(specs, props) {
+function useDollarState(specs, props, $ctx) {
   var $$state = React__default.useRef(proxy({
     stateValues: {},
     initStateValues: {},
@@ -2021,10 +2022,12 @@ function useDollarState(specs, props) {
     statesInstanceBySpec: new Map(),
     existingStates: new Map(),
     unsubscriptionsByState: {},
-    props: undefined,
+    props: {},
+    ctx: {},
     registrationsQueue: []
   })).current;
   $$state.props = mkUntrackedValue(props);
+  $$state.ctx = mkUntrackedValue($ctx != null ? $ctx : {});
   var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
     var key = JSON.stringify(path);
 
@@ -2064,7 +2067,7 @@ function useDollarState(specs, props) {
       if ((_$$state$statesInstan = $$state.statesInstanceBySpec.get(pathStr)) != null && _$$state$statesInstan.some(function (_ref3) {
         var path = _ref3.path,
             specKey = _ref3.specKey;
-        return !deepEqual(_get($$state.initStateValues, path), f(props, $state, getIndexes(path, $$state.specsByKey[specKey])));
+        return !deepEqual(_get($$state.initStateValues, path), f(props, $state, $ctx != null ? $ctx : {}, getIndexes(path, $$state.specsByKey[specKey])));
       })) {
         $$state.registrationsQueue.push({
           pathStr: pathStr,
@@ -2082,7 +2085,7 @@ function useDollarState(specs, props) {
     var spec = $$state.specsByKey[specKey];
 
     if (spec.initFunc) {
-      var newInit = spec.initFunc(props, $state, getIndexes(path, spec));
+      var newInit = spec.initFunc(props, $state, $ctx != null ? $ctx : {}, getIndexes(path, spec));
 
       if (!deepEqual(newInit, _get($$state.initStateValues, path))) {
         resetSpecs.push({
@@ -2092,7 +2095,7 @@ function useDollarState(specs, props) {
       }
     }
   });
-  React__default.useLayoutEffect(function () {
+  useIsomorphicLayoutEffect$1(function () {
     resetSpecs.forEach(function (_ref5) {
       var path = _ref5.path,
           spec = _ref5.spec;
@@ -2105,7 +2108,7 @@ function useDollarState(specs, props) {
       }
     });
   }, [props, resetSpecs]);
-  React__default.useLayoutEffect(function () {
+  useIsomorphicLayoutEffect$1(function () {
     $$state.registrationsQueue.forEach(function (_ref6) {
       var f = _ref6.f,
           pathStr = _ref6.pathStr;
@@ -2123,7 +2126,7 @@ function useDollarState(specs, props) {
   return $state;
 }
 
-function useCanvasDollarState(specs, props) {
+function useCanvasDollarState(specs, props, $ctx) {
   var $$state = proxy({
     stateValues: {},
     initStateValues: {},
@@ -2138,10 +2141,12 @@ function useCanvasDollarState(specs, props) {
     statesInstanceBySpec: new Map(),
     existingStates: new Map(),
     unsubscriptionsByState: {},
-    props: undefined,
+    props: {},
+    ctx: {},
     registrationsQueue: []
   });
   $$state.props = mkUntrackedValue(props);
+  $$state.ctx = mkUntrackedValue($ctx);
   var $state = create$StateProxy($$state, function (path, spec) {
     return {
       get: function get() {
@@ -3724,5 +3729,5 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
   };
 }
 
-export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, useButton, useCanvasDollarState, useCheckbox, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, useButton, useCanvasDollarState, useCheckbox, useDollarState, useIsSSR, useIsomorphicLayoutEffect$1 as useIsomorphicLayoutEffect, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map