@plasmicapp/react-web 0.2.197 → 0.2.199

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/index.cjs.js +3845 -0
  2. package/dist/index.cjs.js.map +1 -0
  3. package/dist/plume/button/index.d.ts +4 -4
  4. package/dist/plume/checkbox/index.d.ts +1 -1
  5. package/dist/plume/collection-utils.d.ts +7 -7
  6. package/dist/plume/collection-utils.spec.d.ts +1 -0
  7. package/dist/plume/menu/menu.d.ts +1 -1
  8. package/dist/plume/menu-button/menu-button.d.ts +1 -1
  9. package/dist/plume/menu-button/menu-trigger.d.ts +1 -1
  10. package/dist/plume/plume-utils.d.ts +13 -13
  11. package/dist/plume/select/select-option.d.ts +1 -1
  12. package/dist/plume/select/select.d.ts +1 -1
  13. package/dist/plume/switch/index.d.ts +1 -1
  14. package/dist/plume/text-input/index.d.ts +1 -1
  15. package/dist/plume/triggered-overlay/triggered-overlay.d.ts +1 -1
  16. package/dist/react-utils.d.ts +3 -3
  17. package/dist/react-utils.spec.d.ts +1 -0
  18. package/dist/react-web.esm.js +3615 -4538
  19. package/dist/react-web.esm.js.map +1 -1
  20. package/dist/render/PlasmicHead/index.d.ts +2 -2
  21. package/dist/render/PlasmicImg/index.d.ts +1 -1
  22. package/dist/render/Stack.d.ts +1 -1
  23. package/dist/render/elements.d.ts +12 -12
  24. package/dist/render/screen-variants.d.ts +1 -1
  25. package/dist/render/translation.d.ts +2 -2
  26. package/dist/render/triggers.d.ts +1 -1
  27. package/dist/states/helpers.d.ts +1 -1
  28. package/dist/states/types.d.ts +6 -6
  29. package/dist/stories/PlasmicImg.stories.d.ts +3 -2
  30. package/dist/stories/UseDollarState.stories.d.ts +23 -22
  31. package/package.json +15 -42
  32. package/dist/all.d.ts +0 -13357
  33. package/dist/index.js +0 -8
  34. package/dist/react-web.cjs.development.js +0 -4737
  35. package/dist/react-web.cjs.development.js.map +0 -1
  36. package/dist/react-web.cjs.production.min.js +0 -2
  37. package/dist/react-web.cjs.production.min.js.map +0 -1
@@ -1,4737 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
- var classNames$1 = _interopDefault(require('classnames'));
8
- var dataSourcesContext = require('@plasmicapp/data-sources-context');
9
- var React = require('react');
10
- var React__default = _interopDefault(React);
11
- var _get = _interopDefault(require('dlv'));
12
- var ReactDOM = require('react-dom');
13
- var ReactDOM__default = _interopDefault(ReactDOM);
14
- var ssr = require('@react-aria/ssr');
15
- var focus = require('@react-aria/focus');
16
- var valtio = require('valtio');
17
- var clone = _interopDefault(require('clone'));
18
- var deepEqual = _interopDefault(require('fast-deep-equal'));
19
- var checkbox = require('@react-aria/checkbox');
20
- var visuallyHidden = require('@react-aria/visually-hidden');
21
- var toggle = require('@react-stately/toggle');
22
- var menu = require('@react-aria/menu');
23
- var tree = require('@react-stately/tree');
24
- var collections = require('@react-stately/collections');
25
- var separator = require('@react-aria/separator');
26
- var menu$1 = require('@react-stately/menu');
27
- var interactions = require('@react-aria/interactions');
28
- var host = require('@plasmicapp/host');
29
- var listbox = require('@react-aria/listbox');
30
- var select = require('@react-aria/select');
31
- var select$1 = require('@react-stately/select');
32
- var _switch = require('@react-aria/switch');
33
- var overlays = require('@react-aria/overlays');
34
-
35
- function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
36
- try {
37
- var info = gen[key](arg);
38
- var value = info.value;
39
- } catch (error) {
40
- reject(error);
41
- return;
42
- }
43
- if (info.done) {
44
- resolve(value);
45
- } else {
46
- Promise.resolve(value).then(_next, _throw);
47
- }
48
- }
49
- function _asyncToGenerator(fn) {
50
- return function () {
51
- var self = this,
52
- args = arguments;
53
- return new Promise(function (resolve, reject) {
54
- var gen = fn.apply(self, args);
55
- function _next(value) {
56
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
57
- }
58
- function _throw(err) {
59
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
60
- }
61
- _next(undefined);
62
- });
63
- };
64
- }
65
- function _extends() {
66
- _extends = Object.assign ? Object.assign.bind() : function (target) {
67
- for (var i = 1; i < arguments.length; i++) {
68
- var source = arguments[i];
69
- for (var key in source) {
70
- if (Object.prototype.hasOwnProperty.call(source, key)) {
71
- target[key] = source[key];
72
- }
73
- }
74
- }
75
- return target;
76
- };
77
- return _extends.apply(this, arguments);
78
- }
79
- function _inheritsLoose(subClass, superClass) {
80
- subClass.prototype = Object.create(superClass.prototype);
81
- subClass.prototype.constructor = subClass;
82
- _setPrototypeOf(subClass, superClass);
83
- }
84
- function _getPrototypeOf(o) {
85
- _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
86
- return o.__proto__ || Object.getPrototypeOf(o);
87
- };
88
- return _getPrototypeOf(o);
89
- }
90
- function _setPrototypeOf(o, p) {
91
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
92
- o.__proto__ = p;
93
- return o;
94
- };
95
- return _setPrototypeOf(o, p);
96
- }
97
- function _isNativeReflectConstruct() {
98
- if (typeof Reflect === "undefined" || !Reflect.construct) return false;
99
- if (Reflect.construct.sham) return false;
100
- if (typeof Proxy === "function") return true;
101
- try {
102
- Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
103
- return true;
104
- } catch (e) {
105
- return false;
106
- }
107
- }
108
- function _construct(Parent, args, Class) {
109
- if (_isNativeReflectConstruct()) {
110
- _construct = Reflect.construct.bind();
111
- } else {
112
- _construct = function _construct(Parent, args, Class) {
113
- var a = [null];
114
- a.push.apply(a, args);
115
- var Constructor = Function.bind.apply(Parent, a);
116
- var instance = new Constructor();
117
- if (Class) _setPrototypeOf(instance, Class.prototype);
118
- return instance;
119
- };
120
- }
121
- return _construct.apply(null, arguments);
122
- }
123
- function _isNativeFunction(fn) {
124
- return Function.toString.call(fn).indexOf("[native code]") !== -1;
125
- }
126
- function _wrapNativeSuper(Class) {
127
- var _cache = typeof Map === "function" ? new Map() : undefined;
128
- _wrapNativeSuper = function _wrapNativeSuper(Class) {
129
- if (Class === null || !_isNativeFunction(Class)) return Class;
130
- if (typeof Class !== "function") {
131
- throw new TypeError("Super expression must either be null or a function");
132
- }
133
- if (typeof _cache !== "undefined") {
134
- if (_cache.has(Class)) return _cache.get(Class);
135
- _cache.set(Class, Wrapper);
136
- }
137
- function Wrapper() {
138
- return _construct(Class, arguments, _getPrototypeOf(this).constructor);
139
- }
140
- Wrapper.prototype = Object.create(Class.prototype, {
141
- constructor: {
142
- value: Wrapper,
143
- enumerable: false,
144
- writable: true,
145
- configurable: true
146
- }
147
- });
148
- return _setPrototypeOf(Wrapper, Class);
149
- };
150
- return _wrapNativeSuper(Class);
151
- }
152
- function _objectWithoutPropertiesLoose(source, excluded) {
153
- if (source == null) return {};
154
- var target = {};
155
- var sourceKeys = Object.keys(source);
156
- var key, i;
157
- for (i = 0; i < sourceKeys.length; i++) {
158
- key = sourceKeys[i];
159
- if (excluded.indexOf(key) >= 0) continue;
160
- target[key] = source[key];
161
- }
162
- return target;
163
- }
164
- function _unsupportedIterableToArray(o, minLen) {
165
- if (!o) return;
166
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
167
- var n = Object.prototype.toString.call(o).slice(8, -1);
168
- if (n === "Object" && o.constructor) n = o.constructor.name;
169
- if (n === "Map" || n === "Set") return Array.from(o);
170
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
171
- }
172
- function _arrayLikeToArray(arr, len) {
173
- if (len == null || len > arr.length) len = arr.length;
174
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
175
- return arr2;
176
- }
177
- function _createForOfIteratorHelperLoose(o, allowArrayLike) {
178
- var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
179
- if (it) return (it = it.call(o)).next.bind(it);
180
- if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
181
- if (it) o = it;
182
- var i = 0;
183
- return function () {
184
- if (i >= o.length) return {
185
- done: true
186
- };
187
- return {
188
- done: false,
189
- value: o[i++]
190
- };
191
- };
192
- }
193
- throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
194
- }
195
-
196
- function createCommonjsModule(fn, module) {
197
- return module = { exports: {} }, fn(module, module.exports), module.exports;
198
- }
199
-
200
- var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
201
- /**
202
- * Copyright (c) 2014-present, Facebook, Inc.
203
- *
204
- * This source code is licensed under the MIT license found in the
205
- * LICENSE file in the root directory of this source tree.
206
- */
207
-
208
- var runtime = function (exports) {
209
-
210
- var Op = Object.prototype;
211
- var hasOwn = Op.hasOwnProperty;
212
- var undefined$1; // More compressible than void 0.
213
- var $Symbol = typeof Symbol === "function" ? Symbol : {};
214
- var iteratorSymbol = $Symbol.iterator || "@@iterator";
215
- var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
216
- var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
217
- function define(obj, key, value) {
218
- Object.defineProperty(obj, key, {
219
- value: value,
220
- enumerable: true,
221
- configurable: true,
222
- writable: true
223
- });
224
- return obj[key];
225
- }
226
- try {
227
- // IE 8 has a broken Object.defineProperty that only works on DOM objects.
228
- define({}, "");
229
- } catch (err) {
230
- define = function define(obj, key, value) {
231
- return obj[key] = value;
232
- };
233
- }
234
- function wrap(innerFn, outerFn, self, tryLocsList) {
235
- // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
236
- var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
237
- var generator = Object.create(protoGenerator.prototype);
238
- var context = new Context(tryLocsList || []);
239
-
240
- // The ._invoke method unifies the implementations of the .next,
241
- // .throw, and .return methods.
242
- generator._invoke = makeInvokeMethod(innerFn, self, context);
243
- return generator;
244
- }
245
- exports.wrap = wrap;
246
-
247
- // Try/catch helper to minimize deoptimizations. Returns a completion
248
- // record like context.tryEntries[i].completion. This interface could
249
- // have been (and was previously) designed to take a closure to be
250
- // invoked without arguments, but in all the cases we care about we
251
- // already have an existing method we want to call, so there's no need
252
- // to create a new function object. We can even get away with assuming
253
- // the method takes exactly one argument, since that happens to be true
254
- // in every case, so we don't have to touch the arguments object. The
255
- // only additional allocation required is the completion record, which
256
- // has a stable shape and so hopefully should be cheap to allocate.
257
- function tryCatch(fn, obj, arg) {
258
- try {
259
- return {
260
- type: "normal",
261
- arg: fn.call(obj, arg)
262
- };
263
- } catch (err) {
264
- return {
265
- type: "throw",
266
- arg: err
267
- };
268
- }
269
- }
270
- var GenStateSuspendedStart = "suspendedStart";
271
- var GenStateSuspendedYield = "suspendedYield";
272
- var GenStateExecuting = "executing";
273
- var GenStateCompleted = "completed";
274
-
275
- // Returning this object from the innerFn has the same effect as
276
- // breaking out of the dispatch switch statement.
277
- var ContinueSentinel = {};
278
-
279
- // Dummy constructor functions that we use as the .constructor and
280
- // .constructor.prototype properties for functions that return Generator
281
- // objects. For full spec compliance, you may wish to configure your
282
- // minifier not to mangle the names of these two functions.
283
- function Generator() {}
284
- function GeneratorFunction() {}
285
- function GeneratorFunctionPrototype() {}
286
-
287
- // This is a polyfill for %IteratorPrototype% for environments that
288
- // don't natively support it.
289
- var IteratorPrototype = {};
290
- define(IteratorPrototype, iteratorSymbol, function () {
291
- return this;
292
- });
293
- var getProto = Object.getPrototypeOf;
294
- var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
295
- if (NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
296
- // This environment has a native %IteratorPrototype%; use it instead
297
- // of the polyfill.
298
- IteratorPrototype = NativeIteratorPrototype;
299
- }
300
- var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
301
- GeneratorFunction.prototype = GeneratorFunctionPrototype;
302
- define(Gp, "constructor", GeneratorFunctionPrototype);
303
- define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
304
- GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction");
305
-
306
- // Helper for defining the .next, .throw, and .return methods of the
307
- // Iterator interface in terms of a single ._invoke method.
308
- function defineIteratorMethods(prototype) {
309
- ["next", "throw", "return"].forEach(function (method) {
310
- define(prototype, method, function (arg) {
311
- return this._invoke(method, arg);
312
- });
313
- });
314
- }
315
- exports.isGeneratorFunction = function (genFun) {
316
- var ctor = typeof genFun === "function" && genFun.constructor;
317
- return ctor ? ctor === GeneratorFunction ||
318
- // For the native GeneratorFunction constructor, the best we can
319
- // do is to check its .name property.
320
- (ctor.displayName || ctor.name) === "GeneratorFunction" : false;
321
- };
322
- exports.mark = function (genFun) {
323
- if (Object.setPrototypeOf) {
324
- Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
325
- } else {
326
- genFun.__proto__ = GeneratorFunctionPrototype;
327
- define(genFun, toStringTagSymbol, "GeneratorFunction");
328
- }
329
- genFun.prototype = Object.create(Gp);
330
- return genFun;
331
- };
332
-
333
- // Within the body of any async function, `await x` is transformed to
334
- // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
335
- // `hasOwn.call(value, "__await")` to determine if the yielded value is
336
- // meant to be awaited.
337
- exports.awrap = function (arg) {
338
- return {
339
- __await: arg
340
- };
341
- };
342
- function AsyncIterator(generator, PromiseImpl) {
343
- function invoke(method, arg, resolve, reject) {
344
- var record = tryCatch(generator[method], generator, arg);
345
- if (record.type === "throw") {
346
- reject(record.arg);
347
- } else {
348
- var result = record.arg;
349
- var value = result.value;
350
- if (value && typeof value === "object" && hasOwn.call(value, "__await")) {
351
- return PromiseImpl.resolve(value.__await).then(function (value) {
352
- invoke("next", value, resolve, reject);
353
- }, function (err) {
354
- invoke("throw", err, resolve, reject);
355
- });
356
- }
357
- return PromiseImpl.resolve(value).then(function (unwrapped) {
358
- // When a yielded Promise is resolved, its final value becomes
359
- // the .value of the Promise<{value,done}> result for the
360
- // current iteration.
361
- result.value = unwrapped;
362
- resolve(result);
363
- }, function (error) {
364
- // If a rejected Promise was yielded, throw the rejection back
365
- // into the async generator function so it can be handled there.
366
- return invoke("throw", error, resolve, reject);
367
- });
368
- }
369
- }
370
- var previousPromise;
371
- function enqueue(method, arg) {
372
- function callInvokeWithMethodAndArg() {
373
- return new PromiseImpl(function (resolve, reject) {
374
- invoke(method, arg, resolve, reject);
375
- });
376
- }
377
- return previousPromise =
378
- // If enqueue has been called before, then we want to wait until
379
- // all previous Promises have been resolved before calling invoke,
380
- // so that results are always delivered in the correct order. If
381
- // enqueue has not been called before, then it is important to
382
- // call invoke immediately, without waiting on a callback to fire,
383
- // so that the async generator function has the opportunity to do
384
- // any necessary setup in a predictable way. This predictability
385
- // is why the Promise constructor synchronously invokes its
386
- // executor callback, and why async functions synchronously
387
- // execute code before the first await. Since we implement simple
388
- // async functions in terms of async generators, it is especially
389
- // important to get this right, even though it requires care.
390
- previousPromise ? previousPromise.then(callInvokeWithMethodAndArg,
391
- // Avoid propagating failures to Promises returned by later
392
- // invocations of the iterator.
393
- callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
394
- }
395
-
396
- // Define the unified helper method that is used to implement .next,
397
- // .throw, and .return (see defineIteratorMethods).
398
- this._invoke = enqueue;
399
- }
400
- defineIteratorMethods(AsyncIterator.prototype);
401
- define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
402
- return this;
403
- });
404
- exports.AsyncIterator = AsyncIterator;
405
-
406
- // Note that simple async functions are implemented on top of
407
- // AsyncIterator objects; they just return a Promise for the value of
408
- // the final result produced by the iterator.
409
- exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
410
- if (PromiseImpl === void 0) PromiseImpl = Promise;
411
- var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
412
- return exports.isGeneratorFunction(outerFn) ? iter // If outerFn is a generator, return the full iterator.
413
- : iter.next().then(function (result) {
414
- return result.done ? result.value : iter.next();
415
- });
416
- };
417
- function makeInvokeMethod(innerFn, self, context) {
418
- var state = GenStateSuspendedStart;
419
- return function invoke(method, arg) {
420
- if (state === GenStateExecuting) {
421
- throw new Error("Generator is already running");
422
- }
423
- if (state === GenStateCompleted) {
424
- if (method === "throw") {
425
- throw arg;
426
- }
427
-
428
- // Be forgiving, per 25.3.3.3.3 of the spec:
429
- // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
430
- return doneResult();
431
- }
432
- context.method = method;
433
- context.arg = arg;
434
- while (true) {
435
- var delegate = context.delegate;
436
- if (delegate) {
437
- var delegateResult = maybeInvokeDelegate(delegate, context);
438
- if (delegateResult) {
439
- if (delegateResult === ContinueSentinel) continue;
440
- return delegateResult;
441
- }
442
- }
443
- if (context.method === "next") {
444
- // Setting context._sent for legacy support of Babel's
445
- // function.sent implementation.
446
- context.sent = context._sent = context.arg;
447
- } else if (context.method === "throw") {
448
- if (state === GenStateSuspendedStart) {
449
- state = GenStateCompleted;
450
- throw context.arg;
451
- }
452
- context.dispatchException(context.arg);
453
- } else if (context.method === "return") {
454
- context.abrupt("return", context.arg);
455
- }
456
- state = GenStateExecuting;
457
- var record = tryCatch(innerFn, self, context);
458
- if (record.type === "normal") {
459
- // If an exception is thrown from innerFn, we leave state ===
460
- // GenStateExecuting and loop back for another invocation.
461
- state = context.done ? GenStateCompleted : GenStateSuspendedYield;
462
- if (record.arg === ContinueSentinel) {
463
- continue;
464
- }
465
- return {
466
- value: record.arg,
467
- done: context.done
468
- };
469
- } else if (record.type === "throw") {
470
- state = GenStateCompleted;
471
- // Dispatch the exception by looping back around to the
472
- // context.dispatchException(context.arg) call above.
473
- context.method = "throw";
474
- context.arg = record.arg;
475
- }
476
- }
477
- };
478
- }
479
-
480
- // Call delegate.iterator[context.method](context.arg) and handle the
481
- // result, either by returning a { value, done } result from the
482
- // delegate iterator, or by modifying context.method and context.arg,
483
- // setting context.delegate to null, and returning the ContinueSentinel.
484
- function maybeInvokeDelegate(delegate, context) {
485
- var method = delegate.iterator[context.method];
486
- if (method === undefined$1) {
487
- // A .throw or .return when the delegate iterator has no .throw
488
- // method always terminates the yield* loop.
489
- context.delegate = null;
490
- if (context.method === "throw") {
491
- // Note: ["return"] must be used for ES3 parsing compatibility.
492
- if (delegate.iterator["return"]) {
493
- // If the delegate iterator has a return method, give it a
494
- // chance to clean up.
495
- context.method = "return";
496
- context.arg = undefined$1;
497
- maybeInvokeDelegate(delegate, context);
498
- if (context.method === "throw") {
499
- // If maybeInvokeDelegate(context) changed context.method from
500
- // "return" to "throw", let that override the TypeError below.
501
- return ContinueSentinel;
502
- }
503
- }
504
- context.method = "throw";
505
- context.arg = new TypeError("The iterator does not provide a 'throw' method");
506
- }
507
- return ContinueSentinel;
508
- }
509
- var record = tryCatch(method, delegate.iterator, context.arg);
510
- if (record.type === "throw") {
511
- context.method = "throw";
512
- context.arg = record.arg;
513
- context.delegate = null;
514
- return ContinueSentinel;
515
- }
516
- var info = record.arg;
517
- if (!info) {
518
- context.method = "throw";
519
- context.arg = new TypeError("iterator result is not an object");
520
- context.delegate = null;
521
- return ContinueSentinel;
522
- }
523
- if (info.done) {
524
- // Assign the result of the finished delegate to the temporary
525
- // variable specified by delegate.resultName (see delegateYield).
526
- context[delegate.resultName] = info.value;
527
-
528
- // Resume execution at the desired location (see delegateYield).
529
- context.next = delegate.nextLoc;
530
-
531
- // If context.method was "throw" but the delegate handled the
532
- // exception, let the outer generator proceed normally. If
533
- // context.method was "next", forget context.arg since it has been
534
- // "consumed" by the delegate iterator. If context.method was
535
- // "return", allow the original .return call to continue in the
536
- // outer generator.
537
- if (context.method !== "return") {
538
- context.method = "next";
539
- context.arg = undefined$1;
540
- }
541
- } else {
542
- // Re-yield the result returned by the delegate method.
543
- return info;
544
- }
545
-
546
- // The delegate iterator is finished, so forget it and continue with
547
- // the outer generator.
548
- context.delegate = null;
549
- return ContinueSentinel;
550
- }
551
-
552
- // Define Generator.prototype.{next,throw,return} in terms of the
553
- // unified ._invoke helper method.
554
- defineIteratorMethods(Gp);
555
- define(Gp, toStringTagSymbol, "Generator");
556
-
557
- // A Generator should always return itself as the iterator object when the
558
- // @@iterator function is called on it. Some browsers' implementations of the
559
- // iterator prototype chain incorrectly implement this, causing the Generator
560
- // object to not be returned from this call. This ensures that doesn't happen.
561
- // See https://github.com/facebook/regenerator/issues/274 for more details.
562
- define(Gp, iteratorSymbol, function () {
563
- return this;
564
- });
565
- define(Gp, "toString", function () {
566
- return "[object Generator]";
567
- });
568
- function pushTryEntry(locs) {
569
- var entry = {
570
- tryLoc: locs[0]
571
- };
572
- if (1 in locs) {
573
- entry.catchLoc = locs[1];
574
- }
575
- if (2 in locs) {
576
- entry.finallyLoc = locs[2];
577
- entry.afterLoc = locs[3];
578
- }
579
- this.tryEntries.push(entry);
580
- }
581
- function resetTryEntry(entry) {
582
- var record = entry.completion || {};
583
- record.type = "normal";
584
- delete record.arg;
585
- entry.completion = record;
586
- }
587
- function Context(tryLocsList) {
588
- // The root entry object (effectively a try statement without a catch
589
- // or a finally block) gives us a place to store values thrown from
590
- // locations where there is no enclosing try statement.
591
- this.tryEntries = [{
592
- tryLoc: "root"
593
- }];
594
- tryLocsList.forEach(pushTryEntry, this);
595
- this.reset(true);
596
- }
597
- exports.keys = function (object) {
598
- var keys = [];
599
- for (var key in object) {
600
- keys.push(key);
601
- }
602
- keys.reverse();
603
-
604
- // Rather than returning an object with a next method, we keep
605
- // things simple and return the next function itself.
606
- return function next() {
607
- while (keys.length) {
608
- var key = keys.pop();
609
- if (key in object) {
610
- next.value = key;
611
- next.done = false;
612
- return next;
613
- }
614
- }
615
-
616
- // To avoid creating an additional object, we just hang the .value
617
- // and .done properties off the next function object itself. This
618
- // also ensures that the minifier will not anonymize the function.
619
- next.done = true;
620
- return next;
621
- };
622
- };
623
- function values(iterable) {
624
- if (iterable) {
625
- var iteratorMethod = iterable[iteratorSymbol];
626
- if (iteratorMethod) {
627
- return iteratorMethod.call(iterable);
628
- }
629
- if (typeof iterable.next === "function") {
630
- return iterable;
631
- }
632
- if (!isNaN(iterable.length)) {
633
- var i = -1,
634
- next = function next() {
635
- while (++i < iterable.length) {
636
- if (hasOwn.call(iterable, i)) {
637
- next.value = iterable[i];
638
- next.done = false;
639
- return next;
640
- }
641
- }
642
- next.value = undefined$1;
643
- next.done = true;
644
- return next;
645
- };
646
- return next.next = next;
647
- }
648
- }
649
-
650
- // Return an iterator with no values.
651
- return {
652
- next: doneResult
653
- };
654
- }
655
- exports.values = values;
656
- function doneResult() {
657
- return {
658
- value: undefined$1,
659
- done: true
660
- };
661
- }
662
- Context.prototype = {
663
- constructor: Context,
664
- reset: function reset(skipTempReset) {
665
- this.prev = 0;
666
- this.next = 0;
667
- // Resetting context._sent for legacy support of Babel's
668
- // function.sent implementation.
669
- this.sent = this._sent = undefined$1;
670
- this.done = false;
671
- this.delegate = null;
672
- this.method = "next";
673
- this.arg = undefined$1;
674
- this.tryEntries.forEach(resetTryEntry);
675
- if (!skipTempReset) {
676
- for (var name in this) {
677
- // Not sure about the optimal order of these conditions:
678
- if (name.charAt(0) === "t" && hasOwn.call(this, name) && !isNaN(+name.slice(1))) {
679
- this[name] = undefined$1;
680
- }
681
- }
682
- }
683
- },
684
- stop: function stop() {
685
- this.done = true;
686
- var rootEntry = this.tryEntries[0];
687
- var rootRecord = rootEntry.completion;
688
- if (rootRecord.type === "throw") {
689
- throw rootRecord.arg;
690
- }
691
- return this.rval;
692
- },
693
- dispatchException: function dispatchException(exception) {
694
- if (this.done) {
695
- throw exception;
696
- }
697
- var context = this;
698
- function handle(loc, caught) {
699
- record.type = "throw";
700
- record.arg = exception;
701
- context.next = loc;
702
- if (caught) {
703
- // If the dispatched exception was caught by a catch block,
704
- // then let that catch block handle the exception normally.
705
- context.method = "next";
706
- context.arg = undefined$1;
707
- }
708
- return !!caught;
709
- }
710
- for (var i = this.tryEntries.length - 1; i >= 0; --i) {
711
- var entry = this.tryEntries[i];
712
- var record = entry.completion;
713
- if (entry.tryLoc === "root") {
714
- // Exception thrown outside of any try block that could handle
715
- // it, so set the completion value of the entire function to
716
- // throw the exception.
717
- return handle("end");
718
- }
719
- if (entry.tryLoc <= this.prev) {
720
- var hasCatch = hasOwn.call(entry, "catchLoc");
721
- var hasFinally = hasOwn.call(entry, "finallyLoc");
722
- if (hasCatch && hasFinally) {
723
- if (this.prev < entry.catchLoc) {
724
- return handle(entry.catchLoc, true);
725
- } else if (this.prev < entry.finallyLoc) {
726
- return handle(entry.finallyLoc);
727
- }
728
- } else if (hasCatch) {
729
- if (this.prev < entry.catchLoc) {
730
- return handle(entry.catchLoc, true);
731
- }
732
- } else if (hasFinally) {
733
- if (this.prev < entry.finallyLoc) {
734
- return handle(entry.finallyLoc);
735
- }
736
- } else {
737
- throw new Error("try statement without catch or finally");
738
- }
739
- }
740
- }
741
- },
742
- abrupt: function abrupt(type, arg) {
743
- for (var i = this.tryEntries.length - 1; i >= 0; --i) {
744
- var entry = this.tryEntries[i];
745
- if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
746
- var finallyEntry = entry;
747
- break;
748
- }
749
- }
750
- if (finallyEntry && (type === "break" || type === "continue") && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc) {
751
- // Ignore the finally entry if control is not jumping to a
752
- // location outside the try/catch block.
753
- finallyEntry = null;
754
- }
755
- var record = finallyEntry ? finallyEntry.completion : {};
756
- record.type = type;
757
- record.arg = arg;
758
- if (finallyEntry) {
759
- this.method = "next";
760
- this.next = finallyEntry.finallyLoc;
761
- return ContinueSentinel;
762
- }
763
- return this.complete(record);
764
- },
765
- complete: function complete(record, afterLoc) {
766
- if (record.type === "throw") {
767
- throw record.arg;
768
- }
769
- if (record.type === "break" || record.type === "continue") {
770
- this.next = record.arg;
771
- } else if (record.type === "return") {
772
- this.rval = this.arg = record.arg;
773
- this.method = "return";
774
- this.next = "end";
775
- } else if (record.type === "normal" && afterLoc) {
776
- this.next = afterLoc;
777
- }
778
- return ContinueSentinel;
779
- },
780
- finish: function finish(finallyLoc) {
781
- for (var i = this.tryEntries.length - 1; i >= 0; --i) {
782
- var entry = this.tryEntries[i];
783
- if (entry.finallyLoc === finallyLoc) {
784
- this.complete(entry.completion, entry.afterLoc);
785
- resetTryEntry(entry);
786
- return ContinueSentinel;
787
- }
788
- }
789
- },
790
- "catch": function _catch(tryLoc) {
791
- for (var i = this.tryEntries.length - 1; i >= 0; --i) {
792
- var entry = this.tryEntries[i];
793
- if (entry.tryLoc === tryLoc) {
794
- var record = entry.completion;
795
- if (record.type === "throw") {
796
- var thrown = record.arg;
797
- resetTryEntry(entry);
798
- }
799
- return thrown;
800
- }
801
- }
802
-
803
- // The context.catch method must only be called with a location
804
- // argument that corresponds to a known catch block.
805
- throw new Error("illegal catch attempt");
806
- },
807
- delegateYield: function delegateYield(iterable, resultName, nextLoc) {
808
- this.delegate = {
809
- iterator: values(iterable),
810
- resultName: resultName,
811
- nextLoc: nextLoc
812
- };
813
- if (this.method === "next") {
814
- // Deliberately forget the last sent value so that we don't
815
- // accidentally pass it on to the delegate.
816
- this.arg = undefined$1;
817
- }
818
- return ContinueSentinel;
819
- }
820
- };
821
-
822
- // Regardless of whether this script is executing as a CommonJS module
823
- // or not, return the runtime object so that we can declare the variable
824
- // regeneratorRuntime in the outer scope, which allows this module to be
825
- // injected easily by `bin/regenerator --include-runtime script.js`.
826
- return exports;
827
- }(
828
- // If this script is executing as a CommonJS module, use module.exports
829
- // as the regeneratorRuntime namespace. Otherwise create a new empty
830
- // object. Either way, the resulting object will be used to initialize
831
- // the regeneratorRuntime variable at the top of this file.
832
- module.exports );
833
- try {
834
- regeneratorRuntime = runtime;
835
- } catch (accidentalStrictMode) {
836
- // This module should not be running in strict mode, so the above
837
- // assignment should always work unless something is misconfigured. Just
838
- // in case runtime.js accidentally runs in strict mode, in modern engines
839
- // we can explicitly access globalThis. In older engines we can escape
840
- // strict mode using a global Function call. This could conceivably fail
841
- // if a Content Security Policy forbids using Function, but in that case
842
- // the proper solution is to fix the accidental strict mode problem. If
843
- // you've misconfigured your bundler to force strict mode and applied a
844
- // CSP to forbid Function, and you're not willing to fix either of those
845
- // problems, please detail your unique predicament in a GitHub issue.
846
- if (typeof globalThis === "object") {
847
- globalThis.regeneratorRuntime = runtime;
848
- } else {
849
- Function("r", "regeneratorRuntime = r")(runtime);
850
- }
851
- }
852
- });
853
-
854
- // https://stackoverflow.com/a/2117523
855
- function uuidv4() {
856
- // @ts-ignore
857
- return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
858
- return (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16);
859
- });
860
- }
861
- function triggerLogin(_x, _x2, _x3) {
862
- return _triggerLogin.apply(this, arguments);
863
- }
864
- function _triggerLogin() {
865
- _triggerLogin = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(appId, authorizeEndpoint, redirectUri) {
866
- var sha256, _sha, continueTo, state, code_verifier, code_challenge, params, url;
867
- return runtime_1.wrap(function _callee2$(_context2) {
868
- while (1) {
869
- switch (_context2.prev = _context2.next) {
870
- case 0:
871
- _sha = function _sha3() {
872
- _sha = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(text) {
873
- var encoder, data, hashBuffer, hashArray, hashHex;
874
- return runtime_1.wrap(function _callee$(_context) {
875
- while (1) {
876
- switch (_context.prev = _context.next) {
877
- case 0:
878
- encoder = new TextEncoder();
879
- data = encoder.encode(text);
880
- _context.next = 4;
881
- return crypto.subtle.digest("SHA-256", data);
882
- case 4:
883
- hashBuffer = _context.sent;
884
- hashArray = Array.from(new Uint8Array(hashBuffer));
885
- hashHex = hashArray.map(function (b) {
886
- return b.toString(16).padStart(2, "0");
887
- }).join("");
888
- return _context.abrupt("return", hashHex);
889
- case 8:
890
- case "end":
891
- return _context.stop();
892
- }
893
- }
894
- }, _callee);
895
- }));
896
- return _sha.apply(this, arguments);
897
- };
898
- sha256 = function _sha2(_x4) {
899
- return _sha.apply(this, arguments);
900
- };
901
- continueTo = window.location.href;
902
- state = JSON.stringify({
903
- continueTo: continueTo
904
- });
905
- code_verifier = uuidv4();
906
- localStorage.setItem("code_verifier", code_verifier);
907
- _context2.next = 8;
908
- return sha256(code_verifier);
909
- case 8:
910
- code_challenge = _context2.sent;
911
- params = new URLSearchParams();
912
- params.set("client_id", appId);
913
- params.set("state", state);
914
- params.set("response_type", "code");
915
- params.set("code_challenge", code_challenge);
916
- params.set("code_challenge_method", "S256");
917
- if (redirectUri) {
918
- params.set("redirect_uri", redirectUri);
919
- }
920
- url = authorizeEndpoint + "?" + params.toString();
921
- window.location.href = url;
922
- case 18:
923
- case "end":
924
- return _context2.stop();
925
- }
926
- }
927
- }, _callee2);
928
- }));
929
- return _triggerLogin.apply(this, arguments);
930
- }
931
- function PlasmicPageGuard(props) {
932
- var appId = props.appId,
933
- authorizeEndpoint = props.authorizeEndpoint,
934
- minRole = props.minRole,
935
- canTriggerLogin = props.canTriggerLogin,
936
- children = props.children;
937
- var dataSourceCtxValue = dataSourcesContext.usePlasmicDataSourceContext();
938
- React__default.useEffect(function () {
939
- if (canTriggerLogin) {
940
- if (minRole && dataSourceCtxValue && "isUserLoading" in dataSourceCtxValue && !dataSourceCtxValue.isUserLoading && !dataSourceCtxValue.user) {
941
- triggerLogin(appId, authorizeEndpoint, dataSourceCtxValue.authRedirectUri);
942
- }
943
- }
944
- }, [dataSourceCtxValue, appId, authorizeEndpoint, canTriggerLogin, minRole]);
945
- function canUserViewPage() {
946
- if (!minRole) {
947
- return true;
948
- }
949
- if (!dataSourceCtxValue) {
950
- return false;
951
- }
952
- if (!dataSourceCtxValue.user) {
953
- return false;
954
- }
955
- if (!("roleIds" in dataSourceCtxValue.user)) {
956
- return false;
957
- }
958
- if (!Array.isArray(dataSourceCtxValue.user.roleIds)) {
959
- return false;
960
- }
961
- return dataSourceCtxValue.user.roleIds.includes(minRole);
962
- }
963
- if (!dataSourceCtxValue || dataSourceCtxValue.isUserLoading || !dataSourceCtxValue.user && minRole && canTriggerLogin) {
964
- return null;
965
- }
966
- if (!canUserViewPage()) {
967
- return React__default.createElement("div", null, "You don't have access to this page");
968
- }
969
- return React__default.createElement(React__default.Fragment, null, children);
970
- }
971
- function withPlasmicPageGuard(WrappedComponent, options) {
972
- var PageGuard = function PageGuard(props) {
973
- return React__default.createElement(PlasmicPageGuard, Object.assign({}, options), React__default.createElement(WrappedComponent, Object.assign({}, props)));
974
- };
975
- return PageGuard;
976
- }
977
-
978
- function notNil(x) {
979
- return x != null;
980
- }
981
- function pick(obj) {
982
- if (Object.keys(obj).length === 0) {
983
- return obj;
984
- }
985
- var res = {};
986
- for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
987
- keys[_key - 1] = arguments[_key];
988
- }
989
- for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
990
- var key = _keys[_i];
991
- if (key in obj) {
992
- res[key] = obj[key];
993
- }
994
- }
995
- return res;
996
- }
997
- function pickBy(obj, func) {
998
- var res = {};
999
- for (var _i2 = 0, _Object$entries = Object.entries(obj); _i2 < _Object$entries.length; _i2++) {
1000
- var _Object$entries$_i = _Object$entries[_i2],
1001
- key = _Object$entries$_i[0],
1002
- val = _Object$entries$_i[1];
1003
- if (func(key, val)) {
1004
- res[key] = obj[key];
1005
- }
1006
- }
1007
- return res;
1008
- }
1009
- function omit(obj) {
1010
- if (Object.keys(obj).length === 0) {
1011
- return obj;
1012
- }
1013
- var res = {};
1014
- for (var _len2 = arguments.length, keys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
1015
- keys[_key2 - 1] = arguments[_key2];
1016
- }
1017
- for (var _i3 = 0, _Object$keys = Object.keys(obj); _i3 < _Object$keys.length; _i3++) {
1018
- var key = _Object$keys[_i3];
1019
- if (!keys.includes(key)) {
1020
- res[key] = obj[key];
1021
- }
1022
- }
1023
- return res;
1024
- }
1025
- function isSubset(a1, a2) {
1026
- return a1.every(function (x) {
1027
- return a2.includes(x);
1028
- });
1029
- }
1030
- function chainSingleArgFuncs() {
1031
- for (var _len3 = arguments.length, funcs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
1032
- funcs[_key3] = arguments[_key3];
1033
- }
1034
- if (funcs.length === 0) {
1035
- return undefined;
1036
- }
1037
- return function (arg) {
1038
- var res = arg;
1039
- for (var _i4 = 0, _funcs = funcs; _i4 < _funcs.length; _i4++) {
1040
- var func = _funcs[_i4];
1041
- res = func(res);
1042
- }
1043
- return res;
1044
- };
1045
- }
1046
- function ensure(x) {
1047
- if (x === null || x === undefined) {
1048
- debugger;
1049
- throw new Error("Value must not be undefined or null");
1050
- } else {
1051
- return x;
1052
- }
1053
- }
1054
- function isString(x) {
1055
- return typeof x === "string";
1056
- }
1057
- function groupBy(collection, keyFunc) {
1058
- var result = {};
1059
- for (var _iterator = _createForOfIteratorHelperLoose(collection), _step; !(_step = _iterator()).done;) {
1060
- var obj = _step.value;
1061
- var key = keyFunc(obj);
1062
- if (key in result) {
1063
- result[key].push(obj);
1064
- } else {
1065
- result[key] = [obj];
1066
- }
1067
- }
1068
- return result;
1069
- }
1070
- function mapValues(obj, mapper) {
1071
- var result = {};
1072
- for (var key in obj) {
1073
- result[key] = mapper(obj[key]);
1074
- }
1075
- return result;
1076
- }
1077
-
1078
- var isBrowser = typeof window !== "undefined";
1079
- var NONE = /*#__PURE__*/Symbol("NONE");
1080
- var useIsomorphicLayoutEffect = isBrowser ? React__default.useLayoutEffect : React__default.useEffect;
1081
- function createElementWithChildren(elementType, props, children) {
1082
- if (Array.isArray(children)) {
1083
- return React__default.createElement.apply(React__default, [elementType, props].concat(children));
1084
- } else if (children || "children" in props) {
1085
- // Only call React.createElement with `children` if there are actual children,
1086
- // or if there was an explicit (albeit undefined) children passed via
1087
- // props. Otherwise, if you pass `undefined` as the children argument
1088
- // to React.createElement, the created element will have prop {children: undefined}.
1089
- // If the `root` is an PlasmicGeneratedComponent, and these props with {children: undefined}
1090
- // are used, then it will be taken as a `children` override, and will thus blank out
1091
- // everything under the root node.
1092
- return React__default.createElement(elementType, props, children);
1093
- } else {
1094
- return React__default.createElement(elementType, props);
1095
- }
1096
- }
1097
- function ensureNotArray(children) {
1098
- if (Array.isArray(children)) {
1099
- if (children.length === 1) {
1100
- return children[0];
1101
- } else {
1102
- return React__default.createElement.apply(React__default, [React__default.Fragment, {}].concat(children));
1103
- }
1104
- } else {
1105
- return children;
1106
- }
1107
- }
1108
- /**
1109
- * Flattens ReactNode into an array of ReactChild, but does NOT replace
1110
- * missing keys with array index, as React.Children.toArray() does.
1111
- */
1112
- function toChildArray(children) {
1113
- if (isReactChild(children)) {
1114
- return [children];
1115
- } else if (Array.isArray(children)) {
1116
- return children.flatMap(toChildArray);
1117
- } else {
1118
- return [];
1119
- }
1120
- }
1121
- function isReactText(child) {
1122
- return typeof child === "string" || typeof child === "number";
1123
- }
1124
- function isReactChild(child) {
1125
- return React__default.isValidElement(child) || isReactText(child);
1126
- }
1127
- function isReactNode(x) {
1128
- return typeof x === "string" || typeof x === "number" || React__default.isValidElement(x);
1129
- }
1130
- function mergeProps(props) {
1131
- for (var _len = arguments.length, restProps = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
1132
- restProps[_key - 1] = arguments[_key];
1133
- }
1134
- if (restProps.every(function (rest) {
1135
- return Object.keys(rest).length === 0;
1136
- })) {
1137
- return props;
1138
- }
1139
- var result = _extends({}, props);
1140
- for (var _i = 0, _restProps = restProps; _i < _restProps.length; _i++) {
1141
- var rest = _restProps[_i];
1142
- for (var _i2 = 0, _Object$keys = Object.keys(rest); _i2 < _Object$keys.length; _i2++) {
1143
- var key = _Object$keys[_i2];
1144
- result[key] = mergePropVals(key, result[key], rest[key]);
1145
- }
1146
- }
1147
- return result;
1148
- }
1149
- function updateRef(ref, value) {
1150
- if (!ref) {
1151
- return;
1152
- }
1153
- if (typeof ref === "function") {
1154
- ref(value);
1155
- } else {
1156
- if (!Object.isFrozen(ref)) {
1157
- ref.current = value;
1158
- }
1159
- }
1160
- }
1161
- function mergeRefs() {
1162
- for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
1163
- refs[_key2] = arguments[_key2];
1164
- }
1165
- return function (value) {
1166
- for (var _i3 = 0, _refs = refs; _i3 < _refs.length; _i3++) {
1167
- var ref = _refs[_i3];
1168
- updateRef(ref, value);
1169
- }
1170
- };
1171
- }
1172
- function mergePropVals(name, val1, val2) {
1173
- if (val1 === NONE || val2 === NONE) {
1174
- // The NONE sentinel always skips all merging and returns null
1175
- return null;
1176
- } else if (val1 == null) {
1177
- // If either of them is nil, prefer the other
1178
- return val2;
1179
- } else if (val2 == null) {
1180
- return val1;
1181
- } else if (name === "className") {
1182
- // Special case for className -- always combine both class names
1183
- return classNames$1(val1, val2);
1184
- } else if (name === "style") {
1185
- // Special case for style -- always shallow-merge style dicts
1186
- return _extends({}, val1, val2);
1187
- } else if (name === "ref") {
1188
- // Special case for ref
1189
- return mergeRefs(val1, val2);
1190
- } else if (typeof val1 !== typeof val2) {
1191
- // If the type of the two values are different, then no way to merge them.
1192
- // Prefer val2.
1193
- return val2;
1194
- } else if (name.startsWith("on") && typeof val1 === "function") {
1195
- // Special case for event handlers -- always call both handlers
1196
- return function () {
1197
- var res;
1198
- if (typeof val1 === "function") {
1199
- res = val1.apply(void 0, arguments);
1200
- }
1201
- if (typeof val2 === "function") {
1202
- res = val2.apply(void 0, arguments);
1203
- }
1204
- return res;
1205
- };
1206
- } else {
1207
- // For all else, prefer val2
1208
- return val2;
1209
- }
1210
- }
1211
- function getElementTypeName(element) {
1212
- if (typeof element.type === "string") {
1213
- return element.type;
1214
- } else {
1215
- var _ref, _ref2, _comp$displayName, _comp$render;
1216
- var comp = element.type;
1217
- return (_ref = (_ref2 = (_comp$displayName = comp.displayName) != null ? _comp$displayName : comp.name) != null ? _ref2 : (_comp$render = comp.render) == null ? void 0 : _comp$render.name) != null ? _ref : "Component";
1218
- }
1219
- }
1220
-
1221
- var _excluded = ["children"],
1222
- _excluded2 = ["as", "hasGap"],
1223
- _excluded3 = ["hasGap"];
1224
- function renderStack(as, props, hasGap, ref) {
1225
- var children = props.children,
1226
- rest = _objectWithoutPropertiesLoose(props, _excluded);
1227
- var wrappedChildren = wrapFlexContainerChildren(children, hasGap != null ? hasGap : false);
1228
- return createElementWithChildren(as, _extends({
1229
- ref: ref
1230
- }, rest), wrappedChildren);
1231
- }
1232
- function FlexStack_(props, outerRef) {
1233
- var as = props.as,
1234
- hasGap = props.hasGap,
1235
- rest = _objectWithoutPropertiesLoose(props, _excluded2);
1236
- return renderStack(as != null ? as : "div", rest, hasGap, outerRef);
1237
- }
1238
- var FlexStack = /*#__PURE__*/React.forwardRef(FlexStack_);
1239
- var makeStackImpl = function makeStackImpl(as) {
1240
- return React.forwardRef(function (props, ref) {
1241
- var hasGap = props.hasGap,
1242
- rest = _objectWithoutPropertiesLoose(props, _excluded3);
1243
- return renderStack(as, rest, hasGap, ref);
1244
- });
1245
- };
1246
- var Stack = /*#__PURE__*/Object.assign(FlexStack, {
1247
- div: /*#__PURE__*/makeStackImpl("div"),
1248
- a: /*#__PURE__*/makeStackImpl("a"),
1249
- button: /*#__PURE__*/makeStackImpl("button"),
1250
- h1: /*#__PURE__*/makeStackImpl("h1"),
1251
- h2: /*#__PURE__*/makeStackImpl("h2"),
1252
- h3: /*#__PURE__*/makeStackImpl("h3"),
1253
- h4: /*#__PURE__*/makeStackImpl("h4"),
1254
- h5: /*#__PURE__*/makeStackImpl("h5"),
1255
- h6: /*#__PURE__*/makeStackImpl("h6"),
1256
- label: /*#__PURE__*/makeStackImpl("label"),
1257
- form: /*#__PURE__*/makeStackImpl("form"),
1258
- section: /*#__PURE__*/makeStackImpl("section"),
1259
- head: /*#__PURE__*/makeStackImpl("head"),
1260
- main: /*#__PURE__*/makeStackImpl("main"),
1261
- nav: /*#__PURE__*/makeStackImpl("nav")
1262
- });
1263
-
1264
- function hasVariant(variants, groupName, variant) {
1265
- if (variants == null) {
1266
- return false;
1267
- }
1268
- var groupVariants = variants[groupName];
1269
- if (groupVariants == null) {
1270
- return false;
1271
- } else if (groupVariants === true) {
1272
- return variant === groupName;
1273
- } else if (groupVariants === false) {
1274
- return false;
1275
- } else if (Array.isArray(groupVariants)) {
1276
- return groupVariants.includes(variant);
1277
- } else if (typeof groupVariants === "string") {
1278
- return groupVariants === variant;
1279
- } else {
1280
- return groupVariants[variant] !== undefined && groupVariants[variant] !== false;
1281
- }
1282
- }
1283
- function wrapFlexContainerChildren(children, hasGap) {
1284
- // We need to always wrap the children, even if there are no gaps, because
1285
- // otherwise if we toggle between with and without gap, React reconciliation
1286
- // will blow away the children tree and all state if we switch from having
1287
- // a wrapper and not.
1288
- var className = hasGap ? "__wab_flex-container" : "__wab_passthrough";
1289
- if (!children) {
1290
- return null;
1291
- } else if (Array.isArray(children)) {
1292
- return React.createElement.apply(React, ["div", {
1293
- className: className
1294
- }].concat(children));
1295
- } else {
1296
- return React.createElement("div", {
1297
- className: className
1298
- }, children);
1299
- }
1300
- }
1301
- function createPlasmicElement(override, defaultRoot, defaultProps, wrapChildrenInFlex) {
1302
- if (!override || Object.keys(override).length === 0) {
1303
- return createElementWithChildren(defaultRoot, defaultProps, defaultProps.children);
1304
- }
1305
- var override2 = deriveOverride(override);
1306
- var props = mergeOverrideProps(defaultProps, override2.props);
1307
- if (override2.type === "render") {
1308
- return override2.render(props, defaultRoot);
1309
- }
1310
- var root = defaultRoot;
1311
- if (override2.type === "as" && override2.as) {
1312
- if (defaultRoot === Stack) {
1313
- // If there was an "as" override specified, but the default type is
1314
- // a Stack, then we don't want to switch to using "as" as the root,
1315
- // because then we'd lose the flex wrapper that Stack provides.
1316
- // Instead, we specify the "as" as the "as" prop to Stack.
1317
- props.as = override2.as;
1318
- } else {
1319
- root = override2.as;
1320
- }
1321
- }
1322
- var children = props.children;
1323
- if (override2.wrapChildren) {
1324
- children = override2.wrapChildren(ensureNotArray(children));
1325
- }
1326
- if (wrapChildrenInFlex) {
1327
- // For legacy, we still support data-plasmic-wrap-flex-children
1328
- children = wrapFlexContainerChildren(children, true);
1329
- }
1330
- var result = createElementWithChildren(root, props, children);
1331
- if (override2.wrap) {
1332
- result = override2.wrap(result);
1333
- }
1334
- return result;
1335
- }
1336
- // We use data-plasmic-XXX attributes for custom properties since Typescript doesn't
1337
- // support type check on jsx pragma. See https://github.com/microsoft/TypeScript/issues/21699
1338
- // for more info.
1339
- var seenElements = /*#__PURE__*/new Map();
1340
- function createPlasmicElementProxy(defaultElement, props) {
1341
- // We use seenElements to keep track of elements that has been rendered by
1342
- // createPlasmicElementProxy(). When a JSX tree is evaluated, the JSX factory
1343
- // is invoked from the leaf to the root as the last call. So we can store
1344
- // all the elements we've created until we encounter the leaf, at which point
1345
- // we will clear this map. We are guaranteed that this map will only contain
1346
- // elements from one Plasmic* component at a time, because we're just creating
1347
- // elements and not "rendering" at this point; even if this JSX tree references
1348
- // other Plasmic* elements, we'll just create an element referencing that component,
1349
- // rather than following into the content of that component.
1350
- //
1351
- // TODO: is this ConcurrentMode friendly?
1352
- if (props == null) {
1353
- props = {};
1354
- }
1355
- var name = props["data-plasmic-name"];
1356
- var isRoot = props["data-plasmic-root"];
1357
- var forNodeName = props["data-plasmic-for-node"];
1358
- delete props["data-plasmic-name"];
1359
- delete props["data-plasmic-root"];
1360
- delete props["data-plasmic-for-node"];
1361
- for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
1362
- children[_key - 2] = arguments[_key];
1363
- }
1364
- var element = createPlasmicElementFromJsx.apply(void 0, [defaultElement, props].concat(children));
1365
- if (name) {
1366
- seenElements.set(name, element);
1367
- }
1368
- if (isRoot) {
1369
- var _seenElements$get;
1370
- // If this is the root, and we requested a specific node by specifying data-plasmic-for-node,
1371
- // then return that node instead
1372
- var forNode = forNodeName ? (_seenElements$get = seenElements.get(forNodeName)) != null ? _seenElements$get : null : element;
1373
- // Clear out the seenElements map, as we're done rendering this Plasmic* component.
1374
- seenElements.clear();
1375
- return forNode;
1376
- }
1377
- return element;
1378
- }
1379
- function createPlasmicElementFromJsx(defaultElement, props) {
1380
- var _props$dataPlasmicT;
1381
- var override = props["data-plasmic-override"];
1382
- var wrapFlexChild = props["data-plasmic-wrap-flex-child"];
1383
- var triggerProps = (_props$dataPlasmicT = props["data-plasmic-trigger-props"]) != null ? _props$dataPlasmicT : [];
1384
- delete props["data-plasmic-override"];
1385
- delete props["data-plasmic-wrap-flex-child"];
1386
- delete props["data-plasmic-trigger-props"];
1387
- for (var _len2 = arguments.length, children = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
1388
- children[_key2 - 2] = arguments[_key2];
1389
- }
1390
- return createPlasmicElement(override, defaultElement, mergeProps.apply(void 0, [props, children.length === 0 ? {} : {
1391
- children: children.length === 1 ? children[0] : children
1392
- }].concat(triggerProps)), wrapFlexChild);
1393
- }
1394
- function makeFragment() {
1395
- for (var _len3 = arguments.length, children = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
1396
- children[_key3] = arguments[_key3];
1397
- }
1398
- return React.createElement.apply(React, [React.Fragment, {}].concat(children));
1399
- }
1400
- var UNSET = /*#__PURE__*/Symbol("UNSET");
1401
- function mergeOverrideProps(defaults, overrides) {
1402
- if (!overrides) {
1403
- return defaults;
1404
- }
1405
- var result = _extends({}, defaults);
1406
- for (var _i = 0, _Object$keys = Object.keys(overrides); _i < _Object$keys.length; _i++) {
1407
- var key = _Object$keys[_i];
1408
- var defaultVal = defaults[key];
1409
- var overrideVal = overrides[key];
1410
- if (overrideVal === UNSET) {
1411
- delete result[key];
1412
- } else {
1413
- // We use the NONE sentinel if the overrideVal is nil, and is not one of the
1414
- // props that we merge by default -- which are className, style, and
1415
- // event handlers. This means for all other "normal" props -- like children,
1416
- // title, etc -- a nil value will unset the default.
1417
- if (overrideVal == null && key !== "className" && key !== "style" && !(key.startsWith("on") && typeof defaultVal === "function")) {
1418
- overrideVal = NONE;
1419
- }
1420
- result[key] = mergePropVals(key, defaultVal, overrideVal);
1421
- }
1422
- }
1423
- return result;
1424
- }
1425
- function wrapWithClassName(element, className) {
1426
- var key = React.isValidElement(element) ? element.key || undefined : undefined;
1427
- return React.createElement("div", {
1428
- key: key,
1429
- className: className,
1430
- style: {
1431
- display: "grid"
1432
- }
1433
- }, element);
1434
- }
1435
- function deriveOverride(x) {
1436
- if (!x) {
1437
- // undefined Binding is an empty Binding
1438
- return {
1439
- type: "default",
1440
- props: {}
1441
- };
1442
- } else if (isReactNode(x)) {
1443
- // If ReactNode, then assume this is the children
1444
- return {
1445
- type: "default",
1446
- props: {
1447
- children: x
1448
- }
1449
- };
1450
- } else if (typeof x === "object") {
1451
- // If any of the overrideKeys is a key of this object, then assume
1452
- // this is a full Override
1453
- if ("as" in x) {
1454
- return _extends({}, x, {
1455
- props: x.props || {},
1456
- type: "as"
1457
- });
1458
- } else if ("render" in x) {
1459
- return _extends({}, x, {
1460
- type: "render"
1461
- });
1462
- } else if ("props" in x) {
1463
- return _extends({}, x, {
1464
- props: x.props || {},
1465
- type: "default"
1466
- });
1467
- } else if (isSubset(Object.keys(x), ["wrap", "wrapChildren"])) {
1468
- // Only twiddling functions present, so assume no props overrides
1469
- // (otherwise we'd assume these were props).
1470
- return _extends({}, x, {
1471
- props: {},
1472
- type: "default"
1473
- });
1474
- }
1475
- // Else, assume this is just a props object.
1476
- return {
1477
- type: "default",
1478
- props: x
1479
- };
1480
- } else if (typeof x === "function") {
1481
- return {
1482
- type: "render",
1483
- render: x
1484
- };
1485
- }
1486
- throw new Error("Unexpected override: " + x);
1487
- }
1488
- function mergeVariants(v1, v2) {
1489
- if (!v1 || !v2) {
1490
- return v1 || v2 || {};
1491
- }
1492
- return _extends({}, v1, v2);
1493
- }
1494
- function mergeVariantsWithStates(variants, $state, linkedStates) {
1495
- return _extends({}, variants, Object.fromEntries(linkedStates.map(function (_ref) {
1496
- var variantGroup = _ref.variantGroup,
1497
- statePath = _ref.statePath;
1498
- return [variantGroup, _get($state, statePath)];
1499
- })));
1500
- }
1501
- function mergeArgs(a1, a2) {
1502
- if (!a1 || !a2) {
1503
- return a1 || a2 || {};
1504
- }
1505
- return _extends({}, a1, a2);
1506
- }
1507
- function mergeFlexOverrides(o1, o2) {
1508
- if (!o2) {
1509
- return o1;
1510
- }
1511
- var keys = Array.from(new Set([].concat(Object.keys(o1), Object.keys(o2))));
1512
- var merged = {};
1513
- for (var _i2 = 0, _keys = keys; _i2 < _keys.length; _i2++) {
1514
- var key = _keys[_i2];
1515
- merged[key] = mergeFlexOverride(o1[key], o2[key]);
1516
- }
1517
- return merged;
1518
- }
1519
- function mergeFlexOverride(fo1, fo2) {
1520
- var _o1$props, _ref2;
1521
- if (!fo1) {
1522
- return fo2;
1523
- }
1524
- if (!fo2) {
1525
- return fo1;
1526
- }
1527
- var o1 = deriveOverride(fo1);
1528
- var o2 = deriveOverride(fo2);
1529
- var wrap = chainSingleArgFuncs.apply(void 0, [o1.wrap, o2.wrap].filter(notNil));
1530
- var wrapChildren = chainSingleArgFuncs.apply(void 0, [o1.wrapChildren, o2.wrapChildren].filter(notNil));
1531
- // "render" type always takes precedence, but we still merge the props
1532
- var props = mergeOverrideProps((_o1$props = o1.props) != null ? _o1$props : {}, o2.props);
1533
- if (o2.type === "render") {
1534
- return {
1535
- render: o2.render,
1536
- props: props,
1537
- wrap: wrap,
1538
- wrapChildren: wrapChildren
1539
- };
1540
- }
1541
- if (o1.type === "render") {
1542
- return {
1543
- render: o1.render,
1544
- props: props,
1545
- wrap: wrap,
1546
- wrapChildren: wrapChildren
1547
- };
1548
- }
1549
- // "as" will take precedence
1550
- var as = (_ref2 = o2.type === "as" ? o2.as : undefined) != null ? _ref2 : o1.type === "as" ? o1.as : undefined;
1551
- return _extends({
1552
- props: props,
1553
- wrap: wrap,
1554
- wrapChildren: wrapChildren
1555
- }, as ? {
1556
- as: as
1557
- } : {});
1558
- }
1559
- function deriveRenderOpts(props, config) {
1560
- var name = config.name,
1561
- descendantNames = config.descendantNames,
1562
- internalVariantPropNames = config.internalVariantPropNames,
1563
- internalArgPropNames = config.internalArgPropNames;
1564
- var reservedPropNames = ["variants", "args", "overrides"];
1565
- var variants = mergeVariants(omit.apply(void 0, [pick.apply(void 0, [props].concat(internalVariantPropNames))].concat(reservedPropNames)), props.variants);
1566
- var args = mergeArgs(omit.apply(void 0, [pick.apply(void 0, [props].concat(internalArgPropNames))].concat(reservedPropNames)), props.args);
1567
- var overrides = mergeFlexOverrides(omit.apply(void 0, [pick.apply(void 0, [props].concat(descendantNames))].concat(internalArgPropNames, internalVariantPropNames, reservedPropNames)), props.overrides);
1568
- var leftoverProps = omit.apply(void 0, [props, "variants", "args", "overrides"].concat(descendantNames, internalVariantPropNames, internalArgPropNames));
1569
- if (Object.keys(leftoverProps).length > 0) {
1570
- var _mergeFlexOverrides;
1571
- overrides = mergeFlexOverrides(overrides, (_mergeFlexOverrides = {}, _mergeFlexOverrides[name] = {
1572
- props: leftoverProps
1573
- }, _mergeFlexOverrides));
1574
- }
1575
- return {
1576
- variants: variants,
1577
- args: args,
1578
- overrides: overrides
1579
- };
1580
- }
1581
-
1582
- var isDefaultValue = function isDefaultValue(val) {
1583
- return val === "PLEASE_RENDER_INSIDE_PROVIDER";
1584
- };
1585
- var seenDefaultVariants = {};
1586
- function ensureGlobalVariants(globalVariantValues) {
1587
- Object.entries(globalVariantValues).filter(function (_ref) {
1588
- var value = _ref[1];
1589
- return isDefaultValue(value);
1590
- }).forEach(function (_ref2) {
1591
- var key = _ref2[0];
1592
- globalVariantValues[key] = undefined;
1593
- if (!seenDefaultVariants[key] && "development" === "development") {
1594
- seenDefaultVariants[key] = true;
1595
- var providerName = "" + key[0].toUpperCase() + key.substring(1) + "Context.Provider";
1596
- console.warn("Plasmic context value for global variant \"" + key + "\" was not provided; please use " + providerName + " at the root of your React app. Learn More: https://www.plasmic.app/learn/other-assets/#global-variants");
1597
- }
1598
- });
1599
- return globalVariantValues;
1600
- }
1601
-
1602
- var PlasmicHeadContext = /*#__PURE__*/React.createContext(undefined);
1603
- function PlasmicHead(props) {
1604
- var Head = React.useContext(PlasmicHeadContext);
1605
- if (!Head) {
1606
- console.warn("Plasmic: Head meta tags are being ignored. To make them work, pass a Head component into PlasmicRootProvider.");
1607
- // TODO: Link to doc about Head.
1608
- return null;
1609
- }
1610
- // Helmet does not support React.Fragments, so we need to use `[<meta />,
1611
- // <meta />]` instead of `<><meta /><meta /></>`.
1612
- return React.createElement(Head, null, props.image ? [React.createElement("meta", {
1613
- key: "twitter:card",
1614
- name: "twitter:card",
1615
- content: "summary_large_image"
1616
- }), React.createElement("meta", {
1617
- key: "og:image",
1618
- property: "og:image",
1619
- content: props.image
1620
- }), React.createElement("meta", {
1621
- key: "twitter:image",
1622
- name: "twitter:image",
1623
- content: props.image
1624
- })] : React.createElement("meta", {
1625
- key: "twitter:card",
1626
- name: "twitter:card",
1627
- content: "summary"
1628
- }), props.title && [React.createElement("title", {
1629
- key: "title"
1630
- }, props.title), React.createElement("meta", {
1631
- key: "og:title",
1632
- property: "og:title",
1633
- content: props.title
1634
- }), React.createElement("meta", {
1635
- key: "twitter:title",
1636
- property: "twitter:title",
1637
- content: props.title
1638
- })], props.description && [React.createElement("meta", {
1639
- key: "description",
1640
- name: "description",
1641
- content: props.description
1642
- }), React.createElement("meta", {
1643
- key: "og:description",
1644
- property: "og:description",
1645
- content: props.description
1646
- }), React.createElement("meta", {
1647
- key: "twitter:description",
1648
- name: "twitter:description",
1649
- content: props.description
1650
- })], props.canonical && React.createElement("link", {
1651
- key: "canonical",
1652
- ref: "canonical",
1653
- href: props.canonical
1654
- }));
1655
- }
1656
- var plasmicHeadMeta = {
1657
- name: "hostless-plasmic-head",
1658
- displayName: "Head",
1659
- description: "Used to add page metadata to HTML <head />.",
1660
- importName: "PlasmicHead",
1661
- importPath: "@plasmicapp/react-web",
1662
- isRepeatable: false,
1663
- styleSections: false,
1664
- props: {
1665
- title: {
1666
- type: "string",
1667
- displayName: "Title"
1668
- },
1669
- description: {
1670
- type: "string",
1671
- displayName: "Description"
1672
- },
1673
- image: {
1674
- type: "imageUrl",
1675
- displayName: "Image"
1676
- },
1677
- canonical: {
1678
- type: "string",
1679
- displayName: "Canonical URL"
1680
- }
1681
- }
1682
- };
1683
-
1684
- var _excluded$1 = ["PlasmicIconType"];
1685
- function PlasmicIcon(props) {
1686
- var PlasmicIconType = props.PlasmicIconType,
1687
- rest = _objectWithoutPropertiesLoose(props, _excluded$1);
1688
- return React.createElement(PlasmicIconType, Object.assign({}, rest));
1689
- }
1690
-
1691
- var _excluded$2 = ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"];
1692
- // Default image sizes to snap to
1693
- // TODO: make this configurable?
1694
- var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
1695
- var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
1696
- var ALL_SIZES = /*#__PURE__*/[].concat(IMG_SIZES, DEVICE_SIZES);
1697
- var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(props, outerRef) {
1698
- var src = props.src,
1699
- className = props.className,
1700
- displayWidth = props.displayWidth,
1701
- displayHeight = props.displayHeight,
1702
- displayMinWidth = props.displayMinWidth,
1703
- displayMinHeight = props.displayMinHeight,
1704
- displayMaxWidth = props.displayMaxWidth,
1705
- displayMaxHeight = props.displayMaxHeight,
1706
- quality = props.quality,
1707
- loader = props.loader,
1708
- imgRef = props.imgRef,
1709
- style = props.style,
1710
- loading = props.loading,
1711
- rest = _objectWithoutPropertiesLoose(props, _excluded$2);
1712
- var imgProps = Object.assign({}, rest, {
1713
- // Default loading to "lazy" if not specified (which is different from the
1714
- // html img, which defaults to eager!)
1715
- loading: loading != null ? loading : "lazy"
1716
- });
1717
- var _ref = typeof src === "string" || !src ? {
1718
- fullWidth: undefined,
1719
- fullHeight: undefined,
1720
- aspectRatio: undefined
1721
- } : src,
1722
- fullWidth = _ref.fullWidth,
1723
- fullHeight = _ref.fullHeight,
1724
- aspectRatio = _ref.aspectRatio;
1725
- var srcStr = src ? typeof src === "string" ? src : typeof src.src === "string" ? src.src : src.src.src : "";
1726
- // Assume external image if either dimension is null and use usual <img>
1727
- if (fullHeight == null || fullWidth == null) {
1728
- return React__default.createElement("img", Object.assign({
1729
- src: srcStr,
1730
- className: className,
1731
- style: style
1732
- }, imgProps, {
1733
- loading: loading,
1734
- ref: mergeRefs(imgRef, outerRef)
1735
- }));
1736
- }
1737
- if (isSvg(srcStr) && (displayHeight == null || displayHeight === "auto") && (displayWidth == null || displayWidth === "auto")) {
1738
- displayWidth = "100%";
1739
- }
1740
- var computedDisplayWidth = displayWidth;
1741
- if (fullWidth && fullHeight && (!displayWidth || displayWidth === "auto") && !!getPixelLength(displayHeight)) {
1742
- // If there's a pixel length specified for displayHeight but not displayWidth,
1743
- // then we can derive the pixel length for displayWidth. Having an explicit
1744
- // displayWidth makes this a fixed-size image, which makes it possible for us to
1745
- // generate better markup!
1746
- if (!isSvg(srcStr)) {
1747
- // We shouldn't do it for SVGs though, because `fullWidth` and
1748
- // `fullHeight` might have rounded values so the final
1749
- // `displayWidth` could differ by 1px or so.
1750
- computedDisplayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
1751
- }
1752
- }
1753
- var spacerWidth = fullWidth;
1754
- var spacerHeight = fullHeight;
1755
- if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {
1756
- // For SVGs, fullWidth and fullHeight can be rounded values, which would
1757
- // cause some discrepancy between the actual aspect ratio and the aspect
1758
- // ratio from those values. So, for those cases, we set large width / height
1759
- // values to get a more precise ratio from the spacer.
1760
- spacerWidth = DEFAULT_SVG_WIDTH;
1761
- spacerHeight = Math.round(spacerWidth / aspectRatio);
1762
- }
1763
- var _getWidths = getWidths(computedDisplayWidth, fullWidth, {
1764
- minWidth: displayMinWidth
1765
- }),
1766
- sizes = _getWidths.sizes,
1767
- widthDescs = _getWidths.widthDescs;
1768
- var imageLoader = getImageLoader(loader);
1769
- var spacerSvg = "<svg width=\"" + spacerWidth + "\" height=\"" + spacerHeight + "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>";
1770
- var spacerSvgBase64 = typeof window === "undefined" ? Buffer.from(spacerSvg).toString("base64") : window.btoa(spacerSvg);
1771
- var wrapperStyle = _extends({}, style || {});
1772
- var spacerStyle = _extends({}, pick(style || {}, "objectFit", "objectPosition"));
1773
- if (displayWidth != null && displayWidth !== "auto") {
1774
- // If width is set, set it on the wrapper along with min/max width
1775
- // and just use `width: 100%` on the spacer
1776
- spacerStyle.width = "100%";
1777
- // Rely on the styles set by `classname` on the wrapper:
1778
- // wrapperStyle.width = displayWidth;
1779
- // wrapperStyle.minWidth = displayMinWidth;
1780
- // wrapperStyle.maxWidth = displayMaxWidth;
1781
- } else {
1782
- // Otherwise, we want auto sizing from the spacer, so set width there.
1783
- //
1784
- // But if we have min/max width, it should be set in the wrapper and it
1785
- // can be percentage values (and we add corresponding min/max width to
1786
- // 100% in the spacer). In general it ends up with the correct effect,
1787
- // but some edge cases might make `min-width: 100%` shrink the image more
1788
- // than it should.
1789
- spacerStyle.width = displayWidth;
1790
- wrapperStyle.width = "auto";
1791
- if (displayMinWidth) {
1792
- spacerStyle.minWidth = "100%";
1793
- // Rely on min-width set by `classname` on the wrapper:
1794
- // wrapperStyle.minWidth = displayMinWidth;
1795
- }
1796
-
1797
- if (displayMaxWidth != null && displayMaxWidth !== "none") {
1798
- spacerStyle.maxWidth = "100%";
1799
- // Rely on max-width set by `classname` on the wrapper:
1800
- // wrapperStyle.maxWidth = displayMaxWidth;
1801
- }
1802
- }
1803
-
1804
- if (displayHeight != null && displayHeight !== "auto") {
1805
- spacerStyle.height = "100%";
1806
- // wrapperStyle.height = displayHeight;
1807
- // wrapperStyle.minHeight = displayMinHeight;
1808
- // wrapperStyle.maxHeight = displayMaxHeight;
1809
- } else {
1810
- spacerStyle.height = displayHeight;
1811
- wrapperStyle.height = "auto";
1812
- if (displayMinHeight) {
1813
- spacerStyle.minHeight = "100%";
1814
- // wrapperStyle.minHeight = displayMinHeight;
1815
- }
1816
-
1817
- if (displayMaxHeight != null && displayMaxHeight !== "none") {
1818
- spacerStyle.maxHeight = "100%";
1819
- // wrapperStyle.maxHeight = displayMaxHeight;
1820
- }
1821
- }
1822
-
1823
- return React__default.createElement("div", {
1824
- className: classNames$1(className, "__wab_img-wrapper"),
1825
- ref: outerRef,
1826
- style: wrapperStyle
1827
- }, React__default.createElement("img", {
1828
- alt: "",
1829
- "aria-hidden": true,
1830
- className: "__wab_img-spacer-svg",
1831
- src: "data:image/svg+xml;base64," + spacerSvgBase64,
1832
- style: spacerStyle
1833
- }), makePicture({
1834
- imageLoader: imageLoader,
1835
- widthDescs: widthDescs,
1836
- sizes: sizes,
1837
- src: srcStr,
1838
- quality: quality,
1839
- ref: imgRef,
1840
- style: style ? pick(style, "objectFit", "objectPosition") : undefined,
1841
- imgProps: imgProps,
1842
- className: "__wab_img"
1843
- }));
1844
- });
1845
- function makePicture(opts) {
1846
- // If imageLoader is undefined, then this renders to just a normal
1847
- // <img />. Else it will render to a <picture> with a <source> for
1848
- // webp, and srcSet/sizes set according to width requirements.
1849
- var imageLoader = opts.imageLoader,
1850
- widthDescs = opts.widthDescs,
1851
- src = opts.src,
1852
- quality = opts.quality,
1853
- style = opts.style,
1854
- className = opts.className,
1855
- sizes = opts.sizes,
1856
- imgProps = opts.imgProps,
1857
- ref = opts.ref;
1858
- return React__default.createElement("picture", {
1859
- className: "__wab_picture"
1860
- }, imageLoader && imageLoader.supportsUrl(src) && React__default.createElement("source", {
1861
- type: "image/webp",
1862
- srcSet: widthDescs.map(function (wd) {
1863
- return imageLoader.transformUrl({
1864
- src: src,
1865
- quality: quality,
1866
- width: wd.width,
1867
- format: "webp"
1868
- }) + " " + wd.desc;
1869
- }).join(", ")
1870
- }), React__default.createElement("img", Object.assign({}, imgProps, {
1871
- ref: ref,
1872
- className: className,
1873
- decoding: "async",
1874
- src: imageLoader && imageLoader.supportsUrl(src) ? imageLoader.transformUrl({
1875
- src: src,
1876
- quality: quality,
1877
- width: widthDescs[widthDescs.length - 1].width
1878
- }) : src,
1879
- srcSet: imageLoader && imageLoader.supportsUrl(src) ? widthDescs.map(function (wd) {
1880
- return imageLoader.transformUrl({
1881
- src: src,
1882
- quality: quality,
1883
- width: wd.width
1884
- }) + " " + wd.desc;
1885
- }).join(", ") : undefined,
1886
- sizes: imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined,
1887
- style: _extends({}, style ? pick(style, "objectFit", "objectPosition") : {}, {
1888
- width: 0,
1889
- height: 0
1890
- })
1891
- })));
1892
- }
1893
- var DEFAULT_SVG_WIDTH = 10000;
1894
- function isSvg(src) {
1895
- return src.endsWith(".svg") || src.startsWith("data:image/svg");
1896
- }
1897
- function getClosestPresetSize(width, fullWidth) {
1898
- var _ALL_SIZES$findIndex;
1899
- var nextBiggerIndex = (_ALL_SIZES$findIndex = ALL_SIZES.findIndex(function (w) {
1900
- return w >= width;
1901
- })) != null ? _ALL_SIZES$findIndex : ALL_SIZES.length - 1;
1902
- var nextBigger = ALL_SIZES[nextBiggerIndex];
1903
- if (nextBigger >= fullWidth) {
1904
- // If the requested width is larger than the fullWidth,
1905
- // we just use the original width instead. It's impossible
1906
- // to make an image bigger than fullWidth!
1907
- return undefined;
1908
- } else if (nextBiggerIndex + 1 < ALL_SIZES.length && fullWidth <= ALL_SIZES[nextBiggerIndex + 1]) {
1909
- // If the fullWidth is just between nextBigger and the one after that,
1910
- // then also might as well just use the original size (so, width is 30,
1911
- // nextBigger is 32, then we just use the original as long as fullWidth is
1912
- // less than 48)
1913
- return undefined;
1914
- }
1915
- return nextBigger;
1916
- }
1917
- /**
1918
- * Computes the appropriate srcSet and sizes to use
1919
- */
1920
- function getWidths(width, fullWidth, extra) {
1921
- var minWidth = extra == null ? void 0 : extra.minWidth;
1922
- var pixelWidth = getPixelLength(width);
1923
- var pixelMinWidth = getPixelLength(minWidth);
1924
- if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
1925
- // If there's an exact width, then we just need to display it at 1x and 2x density
1926
- return {
1927
- widthDescs: [{
1928
- width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0), fullWidth),
1929
- desc: "1x"
1930
- }, {
1931
- width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0) * 2, fullWidth),
1932
- desc: "2x"
1933
- }],
1934
- sizes: undefined
1935
- };
1936
- }
1937
- // Otherwise we don't know what sizes we'll end up, so we just cap it at
1938
- // device width. TODO: do better!
1939
- var usefulSizes = DEVICE_SIZES.filter(function (size) {
1940
- return !fullWidth || size < fullWidth;
1941
- });
1942
- if (!!fullWidth && usefulSizes.length === 0) {
1943
- // image fullWidth is smaller than all device sizes. So all we can do
1944
- // is offer 1x
1945
- return {
1946
- widthDescs: [{
1947
- width: getClosestPresetSize(fullWidth, fullWidth),
1948
- desc: "1x"
1949
- }],
1950
- sizes: undefined
1951
- };
1952
- }
1953
- return {
1954
- widthDescs: usefulSizes.map(function (size) {
1955
- return {
1956
- width: getClosestPresetSize(size, fullWidth),
1957
- // If this is the last (buggest) useful width, but it is
1958
- // still within the bounds set by DEVICE_SIZES, then just
1959
- // use the original, unresized image. This means if we match
1960
- // the largest size, we use unresized and best quality image.
1961
- // We only do this, though, if fullWidth is "reasonable" --
1962
- // smaller than the largest size we would consider.
1963
- // i === usefulSizes.length - 1 &&
1964
- // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]
1965
- // ? undefined
1966
- // : size,
1967
- desc: size + "w"
1968
- };
1969
- }),
1970
- sizes: "100vw"
1971
- };
1972
- }
1973
- function getPixelLength(length) {
1974
- if (length == null || length == "") {
1975
- return undefined;
1976
- }
1977
- if (typeof length === "number") {
1978
- return length;
1979
- }
1980
- var parsed = parseNumeric(length);
1981
- if (parsed && (!parsed.units || parsed.units === "px")) {
1982
- return parsed.num;
1983
- }
1984
- return undefined;
1985
- }
1986
- function parseNumeric(val) {
1987
- // Parse strings like "30", "30px", "30%", "30px /* blah blah */"
1988
- var res = val.match(/^\s*(-?(?:\d+\.\d*|\d*\.\d+|\d+))\s*([a-z]*|%)\s*(?:\/\*.*)?$/i);
1989
- if (res == null) {
1990
- return undefined;
1991
- }
1992
- var num = res[1];
1993
- var units = res[2];
1994
- return {
1995
- num: +num,
1996
- units: units
1997
- };
1998
- }
1999
- function getImageLoader(loader) {
2000
- if (loader == null) {
2001
- return undefined;
2002
- } else if (loader === "plasmic") {
2003
- return PLASMIC_IMAGE_LOADER;
2004
- } else {
2005
- return loader;
2006
- }
2007
- }
2008
- var PLASMIC_IMAGE_LOADER = {
2009
- supportsUrl: function supportsUrl(src) {
2010
- return src.startsWith("https://img.plasmic.app") && !isSvg(src);
2011
- },
2012
- transformUrl: function transformUrl(opts) {
2013
- var _opts$quality;
2014
- var params = [opts.width ? "w=" + opts.width : undefined, "q=" + ((_opts$quality = opts.quality) != null ? _opts$quality : 75), opts.format ? "f=" + opts.format : undefined].filter(function (x) {
2015
- return !!x;
2016
- });
2017
- return opts.src + "?" + params.join("&");
2018
- }
2019
- };
2020
-
2021
- var PlasmicLink = /*#__PURE__*/React__default.forwardRef(function PlasmicLink(props, ref) {
2022
- // props.href is required for nextjs; if no props.href,
2023
- // then we just render the default anchor element
2024
- if (props.platform === "nextjs" && props.href) {
2025
- var nextjsProps = ["href", "replace", "scroll", "shallow", "passHref", "prefetch", "locale"];
2026
- return React__default.createElement(props.component, _extends({}, pick.apply(void 0, [props].concat(nextjsProps)), {
2027
- legacyBehavior: true
2028
- }), React__default.createElement("a", Object.assign({}, omit.apply(void 0, [props, "component", "platform"].concat(nextjsProps)), {
2029
- ref: ref
2030
- })));
2031
- }
2032
- if (props.platform === "gatsby" && isInternalHref(props.href)) {
2033
- return React__default.createElement(props.component, _extends({}, omit(props, "component", "platform", "href"), {
2034
- to: props.href,
2035
- ref: ref
2036
- }));
2037
- }
2038
- return React__default.createElement("a", Object.assign({}, omit(props, "component", "platform"), {
2039
- ref: ref
2040
- }));
2041
- });
2042
- function isInternalHref(href) {
2043
- return /^\/(?!\/)/.test(href);
2044
- }
2045
-
2046
- var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
2047
- function isIterable(val) {
2048
- return val != null && typeof val[Symbol.iterator] === "function";
2049
- }
2050
- function genTranslatableString(elt) {
2051
- var components = {};
2052
- var componentsCount = 0;
2053
- var getText = function getText(node) {
2054
- if (!node) {
2055
- return "";
2056
- }
2057
- if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
2058
- return node.toString();
2059
- }
2060
- if (typeof node !== "object") {
2061
- return "";
2062
- }
2063
- if (Array.isArray(node) || isIterable(node)) {
2064
- return Array.from(node).map(function (child) {
2065
- return getText(child);
2066
- }).filter(function (child) {
2067
- return !!child;
2068
- }).join("");
2069
- }
2070
- var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
2071
- var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
2072
- return getText(child);
2073
- }).filter(function (child) {
2074
- return !!child;
2075
- }).join("");
2076
- if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
2077
- return contents;
2078
- }
2079
- var componentId = componentsCount + 1;
2080
- componentsCount++;
2081
- components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
2082
- key: componentId,
2083
- children: undefined
2084
- }) : node;
2085
- return "<" + componentId + ">" + contents + "</" + componentId + ">";
2086
- };
2087
- var str = getText(elt);
2088
- return {
2089
- str: str,
2090
- components: components,
2091
- componentsCount: componentsCount
2092
- };
2093
- }
2094
- function Trans(_ref) {
2095
- var transKey = _ref.transKey,
2096
- children = _ref.children;
2097
- var _t = React__default.useContext(PlasmicTranslatorContext);
2098
- if (!_t) {
2099
- warnNoTranslationFunctionAtMostOnce();
2100
- return children;
2101
- }
2102
- var _genTranslatableStrin = genTranslatableString(children),
2103
- str = _genTranslatableStrin.str,
2104
- components = _genTranslatableStrin.components,
2105
- componentsCount = _genTranslatableStrin.componentsCount;
2106
- return _t(transKey != null ? transKey : str, componentsCount > 0 ? {
2107
- components: components
2108
- } : undefined);
2109
- }
2110
- var hasWarned = false;
2111
- function warnNoTranslationFunctionAtMostOnce() {
2112
- if (!hasWarned) {
2113
- console.warn("Using Plasmic Translation but no translation function has been provided");
2114
- hasWarned = true;
2115
- }
2116
- }
2117
- function hasKey(v, key) {
2118
- return typeof v === "object" && v !== null && key in v;
2119
- }
2120
-
2121
- var _excluded$3 = ["as", "defaultContents", "value"];
2122
- function PlasmicSlot(props) {
2123
- return renderPlasmicSlot(props);
2124
- }
2125
- function renderPlasmicSlot(opts) {
2126
- var as = opts.as,
2127
- defaultContents = opts.defaultContents,
2128
- value = opts.value,
2129
- rest = _objectWithoutPropertiesLoose(opts, _excluded$3);
2130
- var content = value === undefined ? defaultContents : value;
2131
- if (!content || Array.isArray(content) && content.length === 0) {
2132
- return null;
2133
- }
2134
- // If the content is a raw string, then we need to wrap the raw string
2135
- // into an element, in case the slot is inside a flex-gap
2136
- // container (you cannot apply margin to just a text node).
2137
- var maybeString = maybeAsString(content);
2138
- if (maybeString) {
2139
- content = React.createElement("span", {
2140
- className: "__wab_slot-string-wrapper"
2141
- }, maybeString);
2142
- }
2143
- var nonEmptyProps = Object.keys(rest).filter(function (p) {
2144
- return !!rest[p];
2145
- });
2146
- if (nonEmptyProps.length === 0) {
2147
- // No attrs to apply to the slot (which means the slot is unstyled), then
2148
- // just render the content directly; no need for style wrapper.
2149
- return React.createElement(React.Fragment, null, content);
2150
- }
2151
- return React.createElement(as || "span", mergeProps({
2152
- className: "__wab_slot"
2153
- }, rest), content);
2154
- }
2155
- function maybeAsString(node) {
2156
- // Unwrap fragments
2157
- if (React.isValidElement(node)) {
2158
- // Fragment doesn't render DOM elements
2159
- if (node.type === React.Fragment) {
2160
- return maybeAsString(node.props.children);
2161
- } else if (node.type === Trans) {
2162
- // Trans also doesn't render DOM elements. But we don't want to just render
2163
- // its content string, because we want to keep the <Trans/> for the localization.
2164
- // So we render the same node, to be wrapped into __wab_slot-string-wrapper.
2165
- return node;
2166
- }
2167
- }
2168
- if (typeof node === "string") {
2169
- return node;
2170
- }
2171
- if (Array.isArray(node) && node.length === 1 && typeof node[0] === "string") {
2172
- return node[0];
2173
- }
2174
- return undefined;
2175
- }
2176
-
2177
- var listeners = [];
2178
- var queries = {};
2179
- function matchScreenVariants() {
2180
- if (!isBrowser) {
2181
- return [];
2182
- }
2183
- return Object.entries(queries).filter(function (_ref) {
2184
- var query = _ref[1];
2185
- return window.matchMedia(query).matches;
2186
- }).map(function (_ref2) {
2187
- var name = _ref2[0];
2188
- return name;
2189
- });
2190
- }
2191
- // undefined if screen variants have never been calculated
2192
- var curScreenVariants = undefined;
2193
- function recalculateScreenVariants() {
2194
- var screenVariant = matchScreenVariants();
2195
- if (!curScreenVariants || screenVariant.join("") !== curScreenVariants.join("")) {
2196
- curScreenVariants = screenVariant;
2197
- ReactDOM__default.unstable_batchedUpdates(function () {
2198
- return listeners.forEach(function (listener) {
2199
- return listener();
2200
- });
2201
- });
2202
- }
2203
- }
2204
- function ensureInitCurScreenVariants() {
2205
- // Initializes curScreenVariants if it hadn't been before. Note that this must
2206
- // be called from within an effect.
2207
- if (curScreenVariants === undefined) {
2208
- curScreenVariants = matchScreenVariants();
2209
- }
2210
- }
2211
- if (isBrowser) {
2212
- window.addEventListener("resize", recalculateScreenVariants);
2213
- }
2214
- function createUseScreenVariants(isMulti, screenQueries) {
2215
- Object.assign(queries, screenQueries);
2216
- curScreenVariants = undefined;
2217
- return function () {
2218
- // It is important that upon first render, we return [] or undefined, because
2219
- // that is what SSR will use, and the client must match. In an effect (which
2220
- // only happens on the client), we then actually ask for the real screen variant
2221
- // and, if different from [] or undefined, forces a re-render.
2222
- var _React$useState = React.useState(),
2223
- updateState = _React$useState[1];
2224
- var lastScreenVariantsRef = React.useRef(curScreenVariants || []);
2225
- // We do useLayoutEffect instead of useEffect to immediately
2226
- // register our forceUpdate. This ensures that if there was
2227
- // a window resize event between render and effects, that the
2228
- // listener will be registered in time
2229
- useIsomorphicLayoutEffect(function () {
2230
- var updateIfChanged = function updateIfChanged() {
2231
- if (curScreenVariants && lastScreenVariantsRef.current.join("") !== curScreenVariants.join("")) {
2232
- lastScreenVariantsRef.current = curScreenVariants;
2233
- // Force update
2234
- updateState({});
2235
- }
2236
- };
2237
- // Listeners are invoked whenever the window is resized
2238
- listeners.push(updateIfChanged);
2239
- // Initialize the curScreenVariants for the first time. We don't need
2240
- // to invoke the listeners here because all components will already
2241
- // have this effect running and will re-render if the real screen
2242
- // variant is non-empty.
2243
- ensureInitCurScreenVariants();
2244
- // Now, if the curScreenVariants differs from what we returned last,
2245
- // then force a re-render.
2246
- updateIfChanged();
2247
- return function () {
2248
- // Remove our listener on unmount
2249
- listeners.splice(listeners.indexOf(updateIfChanged), 1);
2250
- };
2251
- }, []);
2252
- if (isMulti) {
2253
- return curScreenVariants || [];
2254
- } else if (curScreenVariants) {
2255
- return curScreenVariants[curScreenVariants.length - 1];
2256
- } else {
2257
- return undefined;
2258
- }
2259
- };
2260
- }
2261
-
2262
- var PlasmicRootContext = /*#__PURE__*/React.createContext(undefined);
2263
- function PlasmicRootProvider(props) {
2264
- var platform = props.platform,
2265
- children = props.children,
2266
- userAuthToken = props.userAuthToken,
2267
- isUserLoading = props.isUserLoading,
2268
- authRedirectUri = props.authRedirectUri,
2269
- user = props.user;
2270
- var context = React.useMemo(function () {
2271
- return {
2272
- platform: platform
2273
- };
2274
- }, [platform]);
2275
- var dataSourceContextValue = React.useMemo(function () {
2276
- return {
2277
- userAuthToken: userAuthToken,
2278
- user: user,
2279
- isUserLoading: isUserLoading,
2280
- authRedirectUri: authRedirectUri
2281
- };
2282
- }, [userAuthToken, isUserLoading, user, authRedirectUri]);
2283
- return React.createElement(PlasmicRootContext.Provider, {
2284
- value: context
2285
- }, React.createElement(ssr.SSRProvider, null, React.createElement(dataSourcesContext.PlasmicDataSourceContextProvider, {
2286
- value: dataSourceContextValue
2287
- }, React.createElement(PlasmicTranslatorContext.Provider, {
2288
- value: props.translator
2289
- }, React.createElement(PlasmicHeadContext.Provider, {
2290
- value: props.Head
2291
- }, children)))));
2292
- }
2293
- var useIsSSR = ssr.useIsSSR;
2294
- function useHasPlasmicRoot() {
2295
- return !!React.useContext(PlasmicRootContext);
2296
- }
2297
- var hasWarnedSSR = false;
2298
- /**
2299
- * Warns the user if PlasmicRootProvider is not used
2300
- */
2301
- function useEnsureSSRProvider() {
2302
- var hasRoot = useHasPlasmicRoot();
2303
- if (hasRoot || hasWarnedSSR || "development" !== "development") {
2304
- return;
2305
- }
2306
- hasWarnedSSR = true;
2307
- console.warn("Plasmic: To ensure your components work correctly with server-side rendering, please use PlasmicRootProvider at the root of your application. See https://docs.plasmic.app/learn/ssr");
2308
- }
2309
-
2310
- function useFocused(opts) {
2311
- var _useAriaFocusRing = focus.useFocusRing({
2312
- within: false,
2313
- isTextInput: opts.isTextInput
2314
- }),
2315
- isFocused = _useAriaFocusRing.isFocused,
2316
- focusProps = _useAriaFocusRing.focusProps;
2317
- return [isFocused, focusProps];
2318
- }
2319
- function useFocusVisible(opts) {
2320
- var _useAriaFocusRing2 = focus.useFocusRing({
2321
- within: false,
2322
- isTextInput: opts.isTextInput
2323
- }),
2324
- isFocusVisible = _useAriaFocusRing2.isFocusVisible,
2325
- focusProps = _useAriaFocusRing2.focusProps;
2326
- return [isFocusVisible, focusProps];
2327
- }
2328
- function useFocusedWithin(opts) {
2329
- var _useAriaFocusRing3 = focus.useFocusRing({
2330
- within: true,
2331
- isTextInput: opts.isTextInput
2332
- }),
2333
- isFocused = _useAriaFocusRing3.isFocused,
2334
- focusProps = _useAriaFocusRing3.focusProps;
2335
- return [isFocused, focusProps];
2336
- }
2337
- function useFocusVisibleWithin(opts) {
2338
- var _useAriaFocusRing4 = focus.useFocusRing({
2339
- within: true,
2340
- isTextInput: opts.isTextInput
2341
- }),
2342
- isFocusVisible = _useAriaFocusRing4.isFocusVisible,
2343
- focusProps = _useAriaFocusRing4.focusProps;
2344
- return [isFocusVisible, focusProps];
2345
- }
2346
- function useHover() {
2347
- var _React$useState = React.useState(false),
2348
- isHover = _React$useState[0],
2349
- setHover = _React$useState[1];
2350
- return [isHover, {
2351
- onMouseEnter: function onMouseEnter() {
2352
- return setHover(true);
2353
- },
2354
- onMouseLeave: function onMouseLeave() {
2355
- return setHover(false);
2356
- }
2357
- }];
2358
- }
2359
- function usePressed() {
2360
- var _React$useState2 = React.useState(false),
2361
- isPressed = _React$useState2[0],
2362
- setPressed = _React$useState2[1];
2363
- return [isPressed, {
2364
- onMouseDown: function onMouseDown() {
2365
- return setPressed(true);
2366
- },
2367
- onMouseUp: function onMouseUp() {
2368
- return setPressed(false);
2369
- }
2370
- }];
2371
- }
2372
- var TRIGGER_TO_HOOK = {
2373
- useHover: useHover,
2374
- useFocused: useFocused,
2375
- useFocusVisible: useFocusVisible,
2376
- useFocusedWithin: useFocusedWithin,
2377
- useFocusVisibleWithin: useFocusVisibleWithin,
2378
- usePressed: usePressed
2379
- };
2380
- /**
2381
- * Installs argment trigger. All the useTrigger calls must use hardcoded `trigger` arg,
2382
- * as it's not valid to install variable React hooks!
2383
- */
2384
- function useTrigger(trigger, opts) {
2385
- return TRIGGER_TO_HOOK[trigger](opts);
2386
- }
2387
-
2388
- var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
2389
- var PLASMIC_STATE_PROXY_SYMBOL = /*#__PURE__*/Symbol("plasmic.state.proxy");
2390
- var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
2391
-
2392
- var CyclicStatesReferencesError = /*#__PURE__*/function (_Error2) {
2393
- _inheritsLoose(CyclicStatesReferencesError, _Error2);
2394
- function CyclicStatesReferencesError(stateAccessCycle) {
2395
- return _Error2.call(this, "Cyclic reference found in state initialization: " + stateAccessCycle.join(" -> ")) || this;
2396
- }
2397
- return CyclicStatesReferencesError;
2398
- }( /*#__PURE__*/_wrapNativeSuper(Error));
2399
- var InvalidOperation = /*#__PURE__*/function (_Error3) {
2400
- _inheritsLoose(InvalidOperation, _Error3);
2401
- function InvalidOperation(msg) {
2402
- return _Error3.call(this, msg) || this;
2403
- }
2404
- return InvalidOperation;
2405
- }( /*#__PURE__*/_wrapNativeSuper(Error));
2406
- var UnknownError = /*#__PURE__*/function (_Error4) {
2407
- _inheritsLoose(UnknownError, _Error4);
2408
- function UnknownError(msg) {
2409
- return _Error4.call(this, msg) || this;
2410
- }
2411
- return UnknownError;
2412
- }( /*#__PURE__*/_wrapNativeSuper(Error));
2413
-
2414
- var StateSpecNode = /*#__PURE__*/function () {
2415
- function StateSpecNode(specs) {
2416
- this._specs = specs;
2417
- this._edges = new Map();
2418
- }
2419
- var _proto = StateSpecNode.prototype;
2420
- _proto.setSpecs = function setSpecs(specs) {
2421
- this._specs = specs;
2422
- };
2423
- _proto.edges = function edges() {
2424
- return this._edges;
2425
- };
2426
- _proto.hasEdge = function hasEdge(key) {
2427
- return this._edges.has(key);
2428
- };
2429
- _proto.addEdge = function addEdge(key, node) {
2430
- this._edges.set(key, node);
2431
- };
2432
- _proto.clearEdges = function clearEdges() {
2433
- this._edges = new Map();
2434
- };
2435
- _proto.children = function children() {
2436
- return this._edges.values();
2437
- };
2438
- _proto.makeTransition = function makeTransition(key) {
2439
- key = isNum$1(key) ? ARRAY_SYMBOL : key;
2440
- return this._edges.get(key);
2441
- };
2442
- _proto.isLeaf = function isLeaf() {
2443
- return this._edges.size === 0 && this.getAllSpecs().length > 0;
2444
- };
2445
- _proto.hasArrayTransition = function hasArrayTransition() {
2446
- return this._edges.has(ARRAY_SYMBOL);
2447
- };
2448
- _proto.getSpec = function getSpec() {
2449
- return this._specs[0];
2450
- };
2451
- _proto.getAllSpecs = function getAllSpecs() {
2452
- return this._specs;
2453
- };
2454
- return StateSpecNode;
2455
- }();
2456
- var transformPathStringToObj = function transformPathStringToObj(str) {
2457
- var splitStatePathPart = function splitStatePathPart(state) {
2458
- return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), [ARRAY_SYMBOL]) : [state];
2459
- };
2460
- return str.split(".").flatMap(splitStatePathPart);
2461
- };
2462
- function buildTree(specs) {
2463
- var internalSpec = specs.map(function (spec) {
2464
- return _extends({}, spec, {
2465
- pathObj: transformPathStringToObj(spec.path),
2466
- isRepeated: spec.path.split(".").some(function (part) {
2467
- return part.endsWith("[]");
2468
- })
2469
- });
2470
- });
2471
- var rec = function rec(currentPath) {
2472
- var node = new StateSpecNode(internalSpec.filter(function (spec) {
2473
- return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
2474
- }));
2475
- node.getAllSpecs().forEach(function (spec) {
2476
- if (spec.pathObj.length > currentPath.length) {
2477
- var nextKey = spec.pathObj[currentPath.length];
2478
- if (!node.hasEdge(nextKey)) {
2479
- node.addEdge(nextKey, rec([].concat(currentPath, [nextKey])));
2480
- }
2481
- }
2482
- });
2483
- return node;
2484
- };
2485
- return rec([]);
2486
- }
2487
- function updateTree(root, specs) {
2488
- var internalSpec = specs.map(function (spec) {
2489
- return _extends({}, spec, {
2490
- pathObj: transformPathStringToObj(spec.path),
2491
- isRepeated: spec.path.split(".").some(function (part) {
2492
- return part.endsWith("[]");
2493
- })
2494
- });
2495
- });
2496
- var rec = function rec(oldNode, currentPath) {
2497
- var nodeSpecs = internalSpec.filter(function (spec) {
2498
- return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
2499
- });
2500
- var node = oldNode != null ? oldNode : new StateSpecNode(nodeSpecs);
2501
- node.setSpecs(nodeSpecs);
2502
- var oldEdges = oldNode == null ? void 0 : oldNode.edges();
2503
- node.clearEdges();
2504
- node.getAllSpecs().forEach(function (spec) {
2505
- if (spec.pathObj.length > currentPath.length) {
2506
- var nextKey = spec.pathObj[currentPath.length];
2507
- if (!node.hasEdge(nextKey)) {
2508
- node.addEdge(nextKey, rec(oldEdges == null ? void 0 : oldEdges.get(nextKey), [].concat(currentPath, [nextKey])));
2509
- }
2510
- }
2511
- });
2512
- return node;
2513
- };
2514
- return rec(root, []);
2515
- }
2516
- function getSpecTreeLeaves(root) {
2517
- var leaves = [];
2518
- var rec = function rec(node) {
2519
- for (var _iterator = _createForOfIteratorHelperLoose(node.children()), _step; !(_step = _iterator()).done;) {
2520
- var child = _step.value;
2521
- rec(child);
2522
- }
2523
- if (node.isLeaf() && node.getAllSpecs().length > 0) {
2524
- leaves.push(node);
2525
- }
2526
- };
2527
- rec(root);
2528
- return leaves;
2529
- }
2530
- function findStateCell(root, pathStr, repetitionIndex) {
2531
- var realPath = [];
2532
- var pathObj = transformPathStringToObj(pathStr);
2533
- var currRepIndex = 0;
2534
- for (var _iterator2 = _createForOfIteratorHelperLoose(pathObj), _step2; !(_step2 = _iterator2()).done;) {
2535
- var part = _step2.value;
2536
- if (typeof part === "symbol") {
2537
- if (!root.hasArrayTransition() || !repetitionIndex || currRepIndex > repetitionIndex.length) {
2538
- throw new Error("transition not found: pathStr " + pathStr + " part " + (typeof part === "symbol" ? "[]" : part));
2539
- }
2540
- realPath.push(repetitionIndex[currRepIndex++]);
2541
- root = root.makeTransition(ARRAY_SYMBOL);
2542
- } else {
2543
- if (!root.hasEdge(part)) {
2544
- throw new Error("transition not found: pathStr " + pathStr + " part " + (typeof part === "symbol" ? "[]" : part));
2545
- }
2546
- realPath.push(part);
2547
- root = root.makeTransition(part);
2548
- }
2549
- }
2550
- return {
2551
- node: root,
2552
- realPath: realPath
2553
- };
2554
- }
2555
-
2556
- function isNum(value) {
2557
- return typeof value === "symbol" ? false : !isNaN(+value);
2558
- }
2559
- function canProxy(value) {
2560
- return typeof value === "object" && value != null;
2561
- }
2562
- var proxyObjToStateCell = /*#__PURE__*/new WeakMap();
2563
- var valtioSubscriptions = /*#__PURE__*/new WeakMap();
2564
- function ensureStateCell(target, property, path, node) {
2565
- if (!proxyObjToStateCell.has(target)) {
2566
- proxyObjToStateCell.set(target, {});
2567
- }
2568
- var stateCell = proxyObjToStateCell.get(target);
2569
- if (!(property in stateCell)) {
2570
- var _node$getSpec$initFun;
2571
- stateCell[property] = {
2572
- listeners: [],
2573
- initialValue: UNINITIALIZED,
2574
- path: path,
2575
- node: node,
2576
- initFunc: node.getSpec().initFunc,
2577
- initFuncHash: (_node$getSpec$initFun = node.getSpec().initFuncHash) != null ? _node$getSpec$initFun : ""
2578
- };
2579
- }
2580
- return stateCell[property];
2581
- }
2582
- function getStateCell(target, property) {
2583
- var _proxyObjToStateCell$;
2584
- return (_proxyObjToStateCell$ = proxyObjToStateCell.get(target)) == null ? void 0 : _proxyObjToStateCell$[property];
2585
- }
2586
- function tryGetStateCellFrom$StateRoot($state, path) {
2587
- if (path.length === 0) {
2588
- throw new UnknownError("expected a path with length greater than 0");
2589
- }
2590
- var target = _get($state, path.slice(0, -1));
2591
- _get(target, path.slice(-1)); // create state cell;
2592
- return getStateCell(target, path.slice(-1)[0]);
2593
- }
2594
- function getStateCellFrom$StateRoot($state, path) {
2595
- return ensure(tryGetStateCellFrom$StateRoot($state, path));
2596
- }
2597
- function unsubscribeToValtio($$state, statePath) {
2598
- var oldValue = _get($$state.stateValues, statePath);
2599
- if (valtio.getVersion(oldValue)) {
2600
- var _valtioSubscriptions$;
2601
- (_valtioSubscriptions$ = valtioSubscriptions.get(oldValue)) == null ? void 0 : _valtioSubscriptions$.forEach(function (f) {
2602
- return f();
2603
- });
2604
- valtioSubscriptions["delete"](oldValue);
2605
- }
2606
- }
2607
- function subscribeToValtio($$state, statePath, node) {
2608
- var spec = node.getSpec();
2609
- var maybeValtioProxy = spec.valueProp ? $$state.env.$props[spec.valueProp] : _get($$state.stateValues, statePath);
2610
- if (valtio.getVersion(maybeValtioProxy) && spec.onChangeProp) {
2611
- var unsub = valtio.subscribe(maybeValtioProxy, function () {
2612
- var _$$state$env$$props$s, _$$state$env$$props;
2613
- (_$$state$env$$props$s = (_$$state$env$$props = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s.call(_$$state$env$$props, spec.valueProp ? $$state.env.$props[spec.valueProp] : _get($$state.stateValues, statePath));
2614
- });
2615
- if (!valtioSubscriptions.has(maybeValtioProxy)) {
2616
- valtioSubscriptions.set(maybeValtioProxy, []);
2617
- }
2618
- ensure(valtioSubscriptions.get(maybeValtioProxy)).push(unsub);
2619
- }
2620
- }
2621
- function initializeStateValue($$state, initialStateCell, proxyRoot) {
2622
- var _initialStateCell$ove2;
2623
- var initialStateName = initialStateCell.node.getSpec().path;
2624
- var stateAccess = new Set();
2625
- $$state.stateInitializationEnv.visited.add(initialStateName);
2626
- $$state.stateInitializationEnv.stack.push(initialStateName);
2627
- var $state = create$StateProxy($$state, function (internalStateCell) {
2628
- return {
2629
- get: function get() {
2630
- var spec = internalStateCell.node.getSpec();
2631
- if ($$state.stateInitializationEnv.visited.has(spec.path)) {
2632
- // cyclic reference found
2633
- var stateAccessCycle = [spec.path];
2634
- while ($$state.stateInitializationEnv.stack.length > 0) {
2635
- var curr = $$state.stateInitializationEnv.stack.pop();
2636
- if (!curr) {
2637
- break;
2638
- }
2639
- stateAccessCycle.push(curr);
2640
- if (curr === spec.path) {
2641
- throw new CyclicStatesReferencesError(stateAccessCycle);
2642
- }
2643
- }
2644
- throw new UnknownError("Internal error: cycle not found");
2645
- }
2646
- var stateCell = getStateCellFrom$StateRoot(proxyRoot, internalStateCell.path);
2647
- stateAccess.add({
2648
- stateCell: stateCell
2649
- });
2650
- if (spec.valueProp) {
2651
- return $$state.env.$props[spec.valueProp];
2652
- } else if (spec.initFunc && stateCell.initialValue === UNINITIALIZED) {
2653
- return initializeStateValue($$state, stateCell, proxyRoot);
2654
- }
2655
- return _get(proxyRoot, stateCell.path);
2656
- },
2657
- set: function set() {
2658
- throw new InvalidOperation("Cannot update state values during initialization");
2659
- }
2660
- };
2661
- });
2662
- stateAccess.forEach(function (_ref) {
2663
- var stateCell = _ref.stateCell;
2664
- stateCell.listeners.push(function () {
2665
- var _initialStateCell$ove;
2666
- var newValue = invokeInitFuncBackwardsCompatible(initialStateCell.node.getSpec().initFunc, _extends({
2667
- $state: $state
2668
- }, (_initialStateCell$ove = initialStateCell.overrideEnv) != null ? _initialStateCell$ove : $$state.env));
2669
- set(proxyRoot, initialStateCell.path, newValue);
2670
- });
2671
- });
2672
- var initialValue = invokeInitFuncBackwardsCompatible(initialStateCell.initFunc, _extends({
2673
- $state: $state
2674
- }, (_initialStateCell$ove2 = initialStateCell.overrideEnv) != null ? _initialStateCell$ove2 : $$state.env));
2675
- initialStateCell.initialValue = clone(initialValue);
2676
- var initialSpec = initialStateCell.node.getSpec();
2677
- var value = initialSpec.isImmutable ? mkUntrackedValue(initialValue) : clone(initialValue);
2678
- set(proxyRoot, initialStateCell.path, value);
2679
- //immediately fire onChange
2680
- if (initialSpec.onChangeProp) {
2681
- var _$$state$env$$props$i, _$$state$env$$props2;
2682
- (_$$state$env$$props$i = (_$$state$env$$props2 = $$state.env.$props)[initialSpec.onChangeProp]) == null ? void 0 : _$$state$env$$props$i.call(_$$state$env$$props2, initialValue);
2683
- }
2684
- $$state.stateInitializationEnv.visited["delete"](initialStateName);
2685
- $$state.stateInitializationEnv.stack.pop();
2686
- return initialValue;
2687
- }
2688
- function create$StateProxy($$state, leafHandlers) {
2689
- var proxyRoot;
2690
- var rec = function rec(currPath, currNode) {
2691
- var getNextPath = function getNextPath(property) {
2692
- return [].concat(currPath, [isNum(property) ? +property : property]);
2693
- };
2694
- var spec = currNode.getSpec();
2695
- var handlers = {
2696
- deleteProperty: function deleteProperty(target, property) {
2697
- if (!currNode.isLeaf() && !currNode.hasArrayTransition() && !isNum(property)) {
2698
- throw new InvalidOperation("Can't delete a property in the middle of the state spec");
2699
- }
2700
- delete _get($$state.stateValues, currPath)[property];
2701
- if (spec.onChangeProp) {
2702
- var _$$state$env$$props$s2, _$$state$env$$props3;
2703
- //we are always in a leaf, since we only have two cases:
2704
- // 1 - delete properties outside the state tree
2705
- // 2 - delete indices in repeated implicit states, but these can't be exposed, so they don't have onChangeProp
2706
- (_$$state$env$$props$s2 = (_$$state$env$$props3 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s2.call(_$$state$env$$props3, _get(proxyRoot, currPath.slice(spec.pathObj.length)));
2707
- }
2708
- return Reflect.deleteProperty(target, property);
2709
- },
2710
- get: function get(target, property, receiver) {
2711
- if (property === PLASMIC_STATE_PROXY_SYMBOL) {
2712
- return {
2713
- node: currNode,
2714
- path: currPath
2715
- };
2716
- }
2717
- var nextPath = getNextPath(property);
2718
- var nextNode = currNode.makeTransition(property);
2719
- if (nextNode != null && nextNode.isLeaf()) {
2720
- var _leafHandlers$get, _leafHandlers;
2721
- return (_leafHandlers$get = (_leafHandlers = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).get) == null ? void 0 : _leafHandlers$get.call(_leafHandlers, target, property, receiver);
2722
- } else if (nextNode && !(property in target)) {
2723
- target[property] = rec(nextPath, nextNode);
2724
- }
2725
- return Reflect.get(target, property, receiver);
2726
- },
2727
- set: function set$1(target, property, value, receiver) {
2728
- var nextPath = getNextPath(property);
2729
- var nextNode = currNode.makeTransition(property);
2730
- var nextSpec = nextNode == null ? void 0 : nextNode.getSpec();
2731
- if (property === "registerInitFunc" && currPath.length === 0) {
2732
- return Reflect.set(target, property, value, receiver);
2733
- }
2734
- if (!nextNode && currNode.hasArrayTransition()) {
2735
- set($$state.stateValues, nextPath, value);
2736
- //array can set his own properties such as length, map, ...
2737
- return Reflect.set(target, property, value, receiver);
2738
- }
2739
- if (nextNode != null && nextNode.isLeaf()) {
2740
- var _leafHandlers$set, _leafHandlers2;
2741
- (_leafHandlers$set = (_leafHandlers2 = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
2742
- Reflect.set(target, property, value, receiver);
2743
- if (nextSpec != null && nextSpec.onChangeProp) {
2744
- var _$$state$env$$props$n, _$$state$env$$props4;
2745
- (_$$state$env$$props$n = (_$$state$env$$props4 = $$state.env.$props)[nextSpec.onChangeProp]) == null ? void 0 : _$$state$env$$props$n.call(_$$state$env$$props4, value);
2746
- }
2747
- }
2748
- if (!nextNode) {
2749
- // can't set an unknown field in $state
2750
- return false;
2751
- }
2752
- if (canProxy(value) && !nextNode.isLeaf()) {
2753
- target[property] = rec(nextPath, nextNode);
2754
- Reflect.ownKeys(value).forEach(function (key) {
2755
- target[property][key] = value[key];
2756
- });
2757
- } else if (!nextNode.isLeaf()) {
2758
- throw new InvalidOperation("inserting a primitive value into a non-leaf");
2759
- }
2760
- var newValue = nextNode.isLeaf() && nextSpec != null && nextSpec.isImmutable ? mkUntrackedValue(value) : value;
2761
- unsubscribeToValtio($$state, nextPath);
2762
- set($$state.stateValues, nextPath, newValue);
2763
- subscribeToValtio($$state, nextPath, nextNode);
2764
- return true;
2765
- }
2766
- };
2767
- var baseObject = currNode.hasArrayTransition() ? [] : {};
2768
- var proxyObj = new Proxy(baseObject, handlers);
2769
- if (currPath.length === 0) {
2770
- proxyRoot = proxyObj;
2771
- }
2772
- return proxyObj;
2773
- };
2774
- return rec([], $$state.rootSpecTree);
2775
- }
2776
- var mkUntrackedValue = function mkUntrackedValue(o) {
2777
- return o != null && typeof o === "object" ? valtio.ref(o) : o;
2778
- };
2779
- var envFieldsAreNonNill = function envFieldsAreNonNill(env) {
2780
- var _env$$ctx, _env$$queries;
2781
- return {
2782
- $props: env.$props,
2783
- $ctx: (_env$$ctx = env.$ctx) != null ? _env$$ctx : {},
2784
- $queries: (_env$$queries = env.$queries) != null ? _env$$queries : {}
2785
- };
2786
- };
2787
- /**
2788
- * We need to support two versions with different parameters to be backward compatible
2789
- * {
2790
- * specs: $StateSpec<any>[],
2791
- * props: Record<string, any>,
2792
- * $ctx?: Record<string, any>,
2793
- * opts?: { inCanvas: boolean; }
2794
- * }
2795
- * {
2796
- * specs: $StateSpec<any>[],
2797
- * env: { $props; $queries; $ctx },
2798
- * opts?: { inCanvas: boolean }
2799
- * }
2800
- */
2801
- function extractDollarStateParametersBackwardCompatible() {
2802
- if ("$props" in (arguments.length <= 0 ? undefined : arguments[0])) {
2803
- // latest version
2804
- return {
2805
- env: arguments.length <= 0 ? undefined : arguments[0],
2806
- opts: arguments.length <= 1 ? undefined : arguments[1]
2807
- };
2808
- } else {
2809
- return {
2810
- env: {
2811
- $props: arguments.length <= 0 ? undefined : arguments[0],
2812
- $ctx: arguments.length <= 1 ? undefined : arguments[1],
2813
- $queries: {}
2814
- },
2815
- opts: arguments.length <= 2 ? undefined : arguments[2]
2816
- };
2817
- }
2818
- }
2819
- function invokeInitFuncBackwardsCompatible(initFunc, env) {
2820
- if (initFunc.length > 1) {
2821
- return initFunc(env.$props, env.$state, env.$ctx);
2822
- } else {
2823
- return initFunc(env);
2824
- }
2825
- }
2826
- function useDollarState(specs) {
2827
- for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
2828
- rest[_key - 1] = arguments[_key];
2829
- }
2830
- var _extractDollarStatePa = extractDollarStateParametersBackwardCompatible.apply(void 0, rest),
2831
- env = _extractDollarStatePa.env,
2832
- opts = _extractDollarStatePa.opts;
2833
- var $$state = React__default.useRef(function () {
2834
- var rootSpecTree = buildTree(specs);
2835
- return {
2836
- rootSpecTree: rootSpecTree,
2837
- specTreeLeaves: getSpecTreeLeaves(rootSpecTree),
2838
- stateValues: valtio.proxy({}),
2839
- env: envFieldsAreNonNill(env),
2840
- specs: [],
2841
- registrationsQueue: valtio.proxy([]),
2842
- stateInitializationEnv: {
2843
- stack: [],
2844
- visited: new Set()
2845
- }
2846
- };
2847
- }()).current;
2848
- $$state.env = envFieldsAreNonNill(env);
2849
- $$state.specs = specs;
2850
- var create$State = React__default.useCallback(function () {
2851
- var $state = Object.assign(create$StateProxy($$state, function (stateCell) {
2852
- var spec = stateCell.node.getSpec();
2853
- if (stateCell.initialValue === UNINITIALIZED && spec.initFunc) {
2854
- initializeStateValue($$state, stateCell, $state);
2855
- } else if (stateCell.initialValue === UNINITIALIZED && !spec.valueProp) {
2856
- stateCell.initialValue = spec.initVal;
2857
- set($state, stateCell.path, spec.initVal);
2858
- }
2859
- return {
2860
- get: function get() {
2861
- var spec = stateCell.node.getSpec();
2862
- if (spec.valueProp) {
2863
- var valueProp = $$state.env.$props[spec.valueProp];
2864
- subscribeToValtio($$state, stateCell.path, stateCell.node);
2865
- return valueProp;
2866
- } else {
2867
- return _get($$state.stateValues, stateCell.path);
2868
- }
2869
- }
2870
- };
2871
- }), {
2872
- registerInitFunc: function registerInitFunc(pathStr, f, repetitionIndex, overrideEnv) {
2873
- var _findStateCell = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex),
2874
- node = _findStateCell.node,
2875
- realPath = _findStateCell.realPath;
2876
- var stateCell = getStateCellFrom$StateRoot($state, realPath);
2877
- var env = overrideEnv ? envFieldsAreNonNill(overrideEnv) : $$state.env;
2878
- if (!deepEqual(stateCell.initialValue, f(_extends({
2879
- $state: $state
2880
- }, env)))) {
2881
- $$state.registrationsQueue.push(mkUntrackedValue({
2882
- node: node,
2883
- path: realPath,
2884
- f: f,
2885
- overrideEnv: overrideEnv ? envFieldsAreNonNill(overrideEnv) : undefined
2886
- }));
2887
- }
2888
- }
2889
- });
2890
- return $state;
2891
- }, []);
2892
- var ref = React__default.useRef(undefined);
2893
- if (!ref.current) {
2894
- ref.current = create$State();
2895
- }
2896
- var $state = ref.current;
2897
- if (opts != null && opts.inCanvas) {
2898
- $$state.rootSpecTree = updateTree($$state.rootSpecTree, specs);
2899
- var newLeaves = getSpecTreeLeaves($$state.rootSpecTree);
2900
- if (!arrayEq(newLeaves, $$state.specTreeLeaves)) {
2901
- var old$state = $state;
2902
- $state = ref.current = create$State();
2903
- $$state.specTreeLeaves = newLeaves;
2904
- getStateCells(old$state, $$state.rootSpecTree).forEach(function (_ref2) {
2905
- var path = _ref2.path;
2906
- var oldStateCell = tryGetStateCellFrom$StateRoot(old$state, path);
2907
- if (oldStateCell) {
2908
- set($state, path, _get(old$state, path));
2909
- var newStateCell = getStateCellFrom$StateRoot($state, path);
2910
- newStateCell.initialValue = oldStateCell.initialValue;
2911
- }
2912
- });
2913
- }
2914
- // we need to eager initialize all states in canvas to populate the data picker
2915
- $$state.specTreeLeaves.forEach(function (node) {
2916
- var _newSpec$initFuncHash, _newSpec$initFuncHash2;
2917
- var spec = node.getSpec();
2918
- if (spec.isRepeated) {
2919
- return;
2920
- }
2921
- var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
2922
- var newSpec = specs.find(function (sp) {
2923
- return sp.path === spec.path;
2924
- });
2925
- if (!newSpec || stateCell.initFuncHash === ((_newSpec$initFuncHash = newSpec == null ? void 0 : newSpec.initFuncHash) != null ? _newSpec$initFuncHash : "") && stateCell.initialValue !== UNINITIALIZED) {
2926
- return;
2927
- }
2928
- stateCell.initFunc = newSpec.initFunc;
2929
- stateCell.initFuncHash = (_newSpec$initFuncHash2 = newSpec.initFuncHash) != null ? _newSpec$initFuncHash2 : "";
2930
- var init = spec.valueProp ? $$state.env.$props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, stateCell, $state) : spec.initVal;
2931
- set($state, spec.pathObj, init);
2932
- });
2933
- }
2934
- // For each spec with an initFunc, evaluate it and see if
2935
- // the init value has changed. If so, reset its state.
2936
- var resetSpecs = [];
2937
- getStateCells($state, $$state.rootSpecTree).forEach(function (stateCell) {
2938
- if (stateCell.initFunc) {
2939
- var _stateCell$overrideEn;
2940
- var newInit = invokeInitFuncBackwardsCompatible(stateCell.initFunc, _extends({
2941
- $state: $state
2942
- }, (_stateCell$overrideEn = stateCell.overrideEnv) != null ? _stateCell$overrideEn : envFieldsAreNonNill(env)));
2943
- if (!deepEqual(newInit, stateCell.initialValue)) {
2944
- resetSpecs.push({
2945
- stateCell: stateCell
2946
- });
2947
- }
2948
- }
2949
- });
2950
- var reInitializeState = function reInitializeState(stateCell) {
2951
- var newInit = initializeStateValue($$state, stateCell, $state);
2952
- var spec = stateCell.node.getSpec();
2953
- if (spec.onChangeProp) {
2954
- var _$$state$env$$props$s3, _$$state$env$$props5;
2955
- (_$$state$env$$props$s3 = (_$$state$env$$props5 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s3.call(_$$state$env$$props5, newInit);
2956
- }
2957
- };
2958
- useIsomorphicLayoutEffect$1(function () {
2959
- resetSpecs.forEach(function (_ref3) {
2960
- var stateCell = _ref3.stateCell;
2961
- reInitializeState(stateCell);
2962
- });
2963
- }, [env.$props, resetSpecs]);
2964
- useIsomorphicLayoutEffect$1(function () {
2965
- while ($$state.registrationsQueue.length) {
2966
- var _$$state$registration = $$state.registrationsQueue.shift(),
2967
- path = _$$state$registration.path,
2968
- f = _$$state$registration.f,
2969
- overrideEnv = _$$state$registration.overrideEnv;
2970
- var stateCell = getStateCellFrom$StateRoot($state, path);
2971
- stateCell.initFunc = f;
2972
- stateCell.overrideEnv = overrideEnv;
2973
- reInitializeState(stateCell);
2974
- }
2975
- }, [$$state.registrationsQueue.length]);
2976
- // immediately initialize exposed non-private states
2977
- useIsomorphicLayoutEffect$1(function () {
2978
- $$state.specTreeLeaves.forEach(function (node) {
2979
- var spec = node.getSpec();
2980
- if (!spec.isRepeated && spec.type !== "private" && spec.initFunc) {
2981
- var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
2982
- initializeStateValue($$state, stateCell, $state);
2983
- }
2984
- });
2985
- }, []);
2986
- // Re-render if any value changed in one of these objects
2987
- valtio.useSnapshot($$state.stateValues, {
2988
- sync: true
2989
- });
2990
- valtio.useSnapshot($$state.registrationsQueue, {
2991
- sync: true
2992
- });
2993
- return $state;
2994
- }
2995
-
2996
- function initializeCodeComponentStates($state, states, repetitionIndex, componentHelpers, child$Props) {
2997
- var _componentHelpers$sta;
2998
- var stateHelpers = (_componentHelpers$sta = componentHelpers == null ? void 0 : componentHelpers.states) != null ? _componentHelpers$sta : {};
2999
- var _loop = function _loop() {
3000
- var _step$value = _step.value,
3001
- name = _step$value.name,
3002
- plasmicStateName = _step$value.plasmicStateName;
3003
- if (name in stateHelpers && "initFunc" in stateHelpers[name]) {
3004
- $state.registerInitFunc == null ? void 0 : $state.registerInitFunc(plasmicStateName, function (_ref) {
3005
- var _stateHelpers$name$in, _stateHelpers$name;
3006
- var $props = _ref.$props;
3007
- return (_stateHelpers$name$in = (_stateHelpers$name = stateHelpers[name]).initFunc) == null ? void 0 : _stateHelpers$name$in.call(_stateHelpers$name, $props);
3008
- }, repetitionIndex != null ? repetitionIndex : [], {
3009
- $props: child$Props
3010
- });
3011
- }
3012
- };
3013
- for (var _iterator = _createForOfIteratorHelperLoose(states), _step; !(_step = _iterator()).done;) {
3014
- _loop();
3015
- }
3016
- }
3017
- function initializePlasmicStates($state, states, repetitionIndex) {
3018
- for (var _iterator2 = _createForOfIteratorHelperLoose(states), _step2; !(_step2 = _iterator2()).done;) {
3019
- var _step2$value = _step2.value,
3020
- name = _step2$value.name,
3021
- initFunc = _step2$value.initFunc;
3022
- $state.registerInitFunc == null ? void 0 : $state.registerInitFunc(name, initFunc, repetitionIndex != null ? repetitionIndex : []);
3023
- }
3024
- }
3025
- function generateStateOnChangeProp($state, path) {
3026
- return function (val) {
3027
- return set($state, path, val);
3028
- };
3029
- }
3030
- function generateStateOnChangePropForCodeComponents($state, stateName, plasmicStatePath, componentHelpers) {
3031
- var _componentHelpers$sta2, _componentHelpers$sta3;
3032
- var onChangeArgsToValue = componentHelpers == null ? void 0 : (_componentHelpers$sta2 = componentHelpers.states) == null ? void 0 : (_componentHelpers$sta3 = _componentHelpers$sta2[stateName]) == null ? void 0 : _componentHelpers$sta3.onChangeArgsToValue;
3033
- if (!onChangeArgsToValue || typeof onChangeArgsToValue !== "function") {
3034
- return generateStateOnChangeProp($state, plasmicStatePath);
3035
- }
3036
- return function () {
3037
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
3038
- args[_key] = arguments[_key];
3039
- }
3040
- return generateStateOnChangeProp($state, plasmicStatePath)(onChangeArgsToValue.apply(null, args));
3041
- };
3042
- }
3043
- function generateStateValueProp($state, path) {
3044
- return _get($state, path);
3045
- }
3046
- var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
3047
- function isPlasmicStateProxy(obj) {
3048
- return obj != null && typeof obj === "object" && !!obj[PLASMIC_STATE_PROXY_SYMBOL];
3049
- }
3050
- function is$StateProxy(obj) {
3051
- return obj != null && typeof obj === "object" && (!!obj[PLASMIC_STATE_PROXY_SYMBOL] || valtio.getVersion(obj));
3052
- }
3053
- function getStateCells($state, root) {
3054
- if ($state == null || typeof $state !== "object") {
3055
- return [];
3056
- }
3057
- if (root.hasArrayTransition()) {
3058
- return Object.keys($state).flatMap(function (key) {
3059
- return getStateCells($state[key], ensure(root.makeTransition(ARRAY_SYMBOL)));
3060
- });
3061
- } else {
3062
- var _proxyObjToStateCell$;
3063
- var stateCell = (_proxyObjToStateCell$ = proxyObjToStateCell.get($state)) != null ? _proxyObjToStateCell$ : {};
3064
- var stateCells = [];
3065
- for (var _iterator3 = _createForOfIteratorHelperLoose(root.edges().entries()), _step3; !(_step3 = _iterator3()).done;) {
3066
- var _step3$value = _step3.value,
3067
- key = _step3$value[0],
3068
- child = _step3$value[1];
3069
- if (typeof key === "string" && key in $state) {
3070
- stateCells.push.apply(stateCells, getStateCells($state[key], child));
3071
- if (key in stateCell) {
3072
- stateCells.push(stateCell[key]);
3073
- }
3074
- }
3075
- }
3076
- return stateCells;
3077
- }
3078
- }
3079
- function getStateCellsInPlasmicProxy(obj) {
3080
- if (!isPlasmicStateProxy(obj)) {
3081
- return [];
3082
- }
3083
- var _obj$PLASMIC_STATE_PR = obj[PLASMIC_STATE_PROXY_SYMBOL],
3084
- rootNode = _obj$PLASMIC_STATE_PR.node,
3085
- rootPath = _obj$PLASMIC_STATE_PR.path,
3086
- isOutside = _obj$PLASMIC_STATE_PR.isOutside;
3087
- if (isOutside) {
3088
- return [];
3089
- }
3090
- return getStateCells(obj, rootNode).map(function (stateCell) {
3091
- return {
3092
- path: stateCell.node.getSpec().path,
3093
- realPath: stateCell.path.slice(rootPath.length)
3094
- };
3095
- });
3096
- }
3097
- function getStateSpecInPlasmicProxy(obj, path) {
3098
- obj = _get(obj, path.slice(0, path.length - 1));
3099
- if (!isPlasmicStateProxy(obj)) {
3100
- return undefined;
3101
- }
3102
- var node = obj[PLASMIC_STATE_PROXY_SYMBOL].node;
3103
- var nextNode = node.makeTransition(path[path.length - 1]);
3104
- if (node.isLeaf() || !nextNode) {
3105
- return undefined;
3106
- }
3107
- return {
3108
- spec: nextNode.getSpec(),
3109
- isImplicitStateArray: nextNode.hasArrayTransition()
3110
- };
3111
- }
3112
- function getCurrentInitialValue(obj, path) {
3113
- var _tryGetStateCellFrom$;
3114
- if (!isPlasmicStateProxy(obj)) {
3115
- return undefined;
3116
- }
3117
- return (_tryGetStateCellFrom$ = tryGetStateCellFrom$StateRoot(obj, path)) == null ? void 0 : _tryGetStateCellFrom$.initialValue;
3118
- }
3119
- function resetToInitialValue(obj, path) {
3120
- var stateCell = tryGetStateCellFrom$StateRoot(obj, path);
3121
- if (stateCell) {
3122
- set(obj, path, stateCell.initialValue);
3123
- }
3124
- }
3125
- function shallowEqual(a1, a2) {
3126
- if (a1.length !== a2.length) {
3127
- return false;
3128
- }
3129
- for (var i = 0; i < a1.length; i++) {
3130
- if (a1[i] !== a2[i]) {
3131
- return false;
3132
- }
3133
- }
3134
- return true;
3135
- }
3136
- /**
3137
- * Shallow comparison of arrays.
3138
- */
3139
- function arrayEq(xs, ys) {
3140
- return xs.length === ys.length && xs.every(function (_, index) {
3141
- return xs[index] === ys[index];
3142
- });
3143
- }
3144
- function isNum$1(value) {
3145
- return typeof value === "symbol" ? false : !isNaN(+value);
3146
- }
3147
- /**
3148
- * Forked from https://github.com/lukeed/dset
3149
- * Changes: fixed setting a deep value to a proxy object
3150
- */
3151
- function set(obj, keys, val) {
3152
- keys = keys.split ? keys.split(".") : keys;
3153
- var i = 0,
3154
- l = keys.length,
3155
- t = obj,
3156
- x,
3157
- k;
3158
- while (i < l) {
3159
- k = keys[i++];
3160
- if (k === "__proto__" || k === "constructor" || k === "prototype") break;
3161
- var newValue = i === l ? val : typeof (x = t[k]) === typeof keys ? x : keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".") ? {} : [];
3162
- assignValue(t, k, newValue);
3163
- t = t[k];
3164
- }
3165
- }
3166
- /**
3167
- * Forked from lodash
3168
- */
3169
- function baseAssignValue(object, key, value) {
3170
- if (key == "__proto__") {
3171
- Object.defineProperty(object, key, {
3172
- configurable: true,
3173
- enumerable: true,
3174
- value: value,
3175
- writable: true
3176
- });
3177
- } else {
3178
- object[key] = value;
3179
- }
3180
- }
3181
- function eq(value, other) {
3182
- return value === other || value !== value && other !== other;
3183
- }
3184
- function assignValue(object, key, value) {
3185
- var objValue = object[key];
3186
- if (!(Object.prototype.hasOwnProperty.call(object, key) && eq(objValue, value)) || value === undefined && !(key in object)) {
3187
- baseAssignValue(object, key, value);
3188
- }
3189
- }
3190
-
3191
- // Utilities used by generated code
3192
- var classNames = classNames$1;
3193
-
3194
- var PLUME_STRICT_MODE = true;
3195
- function setPlumeStrictMode(mode) {
3196
- PLUME_STRICT_MODE = mode;
3197
- }
3198
- function mergeVariantToggles() {
3199
- for (var _len = arguments.length, toggles = new Array(_len), _key = 0; _key < _len; _key++) {
3200
- toggles[_key] = arguments[_key];
3201
- }
3202
- var definedToggles = toggles.filter(function (x) {
3203
- return !!x.def;
3204
- });
3205
- var grouped = groupBy(definedToggles, function (_ref) {
3206
- var def = _ref.def;
3207
- return def.group;
3208
- });
3209
- return mapValues(grouped, function (subToggles) {
3210
- return Object.fromEntries(subToggles.map(function (_ref2) {
3211
- var def = _ref2.def,
3212
- active = _ref2.active;
3213
- return [def.variant, !!active];
3214
- }));
3215
- });
3216
- }
3217
- function noOutline() {
3218
- return {
3219
- outline: "none"
3220
- };
3221
- }
3222
- function getPlumeType(child) {
3223
- if (!React.isValidElement(child)) {
3224
- return undefined;
3225
- }
3226
- var childType = child.type;
3227
- return childType.__plumeType || (childType.getPlumeType == null ? void 0 : childType.getPlumeType(child.props));
3228
- }
3229
-
3230
- var _excluded$4 = ["link", "isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "children"];
3231
- function useButton(plasmicClass, props, config, ref) {
3232
- var _ref, _ref2, _extends2, _overrides;
3233
- if (ref === void 0) {
3234
- ref = null;
3235
- }
3236
- var link = props.link,
3237
- isDisabled = props.isDisabled,
3238
- startIcon = props.startIcon,
3239
- endIcon = props.endIcon,
3240
- showStartIcon = props.showStartIcon,
3241
- showEndIcon = props.showEndIcon,
3242
- children = props.children,
3243
- rest = _objectWithoutPropertiesLoose(props, _excluded$4);
3244
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
3245
- def: config.showStartIconVariant,
3246
- active: showStartIcon
3247
- }, {
3248
- def: config.showEndIconVariant,
3249
- active: showEndIcon
3250
- }, {
3251
- def: config.isDisabledVariant,
3252
- active: isDisabled
3253
- }));
3254
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2), (_extends2 = {}, _extends2[config.contentSlot] = children, _extends2));
3255
- var overrides = (_overrides = {}, _overrides[config.root] = {
3256
- as: !!link ? "a" : "button",
3257
- props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps, plasmicClass.internalVariantProps)), {
3258
- ref: ref,
3259
- disabled: isDisabled
3260
- }, !!link && {
3261
- href: link
3262
- })
3263
- }, _overrides);
3264
- return {
3265
- plasmicProps: {
3266
- variants: variants,
3267
- args: args,
3268
- overrides: overrides
3269
- }
3270
- };
3271
- }
3272
-
3273
- function getStyleProps(props) {
3274
- return pick(props, "className", "style");
3275
- }
3276
- function getDefaultPlasmicProps(plasmicClass, props) {
3277
- return {
3278
- plasmicProps: {
3279
- variants: pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)),
3280
- args: pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)),
3281
- overrides: {}
3282
- }
3283
- };
3284
- }
3285
- var RE_DATA_PROP = /^(data-.*)$/;
3286
- function getDataProps(props) {
3287
- return pickBy(props, function (k) {
3288
- return RE_DATA_PROP.test(k);
3289
- });
3290
- }
3291
-
3292
- function asAriaCheckboxProps(props) {
3293
- var ariaProps = _extends({}, props, {
3294
- isSelected: props.isChecked,
3295
- defaultSelected: props.defaultChecked
3296
- });
3297
- delete ariaProps["isChecked"];
3298
- delete ariaProps["defaultChecked"];
3299
- return ariaProps;
3300
- }
3301
- function useCheckbox(plasmicClass, props, config, ref) {
3302
- var _overrides, _ref;
3303
- if (ref === void 0) {
3304
- ref = null;
3305
- }
3306
- var children = props.children,
3307
- isDisabled = props.isDisabled,
3308
- isIndeterminate = props.isIndeterminate;
3309
- useEnsureSSRProvider();
3310
- var inputRef = React.useRef(null);
3311
- var rootRef = React.useRef(null);
3312
- var ariaProps = asAriaCheckboxProps(props);
3313
- var state = toggle.useToggleState(ariaProps);
3314
- var _useAriaCheckbox = checkbox.useCheckbox(ariaProps, state, inputRef),
3315
- inputProps = _useAriaCheckbox.inputProps;
3316
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
3317
- def: config.isDisabledVariant,
3318
- active: isDisabled
3319
- }, {
3320
- def: config.isCheckedVariant,
3321
- active: state.isSelected
3322
- }, {
3323
- def: config.isIndeterminateVariant,
3324
- active: isIndeterminate
3325
- }, {
3326
- def: config.noLabelVariant,
3327
- active: !children
3328
- }));
3329
- var overrides = (_overrides = {}, _overrides[config.root] = {
3330
- as: "label",
3331
- props: mergeProps(getStyleProps(props), {
3332
- ref: rootRef
3333
- }),
3334
- wrapChildren: function wrapChildren(children) {
3335
- return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, null, React.createElement("input", Object.assign({}, inputProps, {
3336
- ref: inputRef
3337
- }))), children);
3338
- }
3339
- }, _overrides);
3340
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.labelSlot ? (_ref = {}, _ref[config.labelSlot] = children, _ref) : {});
3341
- var plumeState = React.useMemo(function () {
3342
- return {
3343
- setChecked: function setChecked(checked) {
3344
- return state.setSelected(checked);
3345
- }
3346
- };
3347
- }, [state]);
3348
- React.useImperativeHandle(ref, function () {
3349
- return {
3350
- getRoot: function getRoot() {
3351
- return rootRef.current;
3352
- },
3353
- focus: function focus() {
3354
- var _inputRef$current;
3355
- return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
3356
- },
3357
- blur: function blur() {
3358
- var _inputRef$current2;
3359
- return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
3360
- },
3361
- setChecked: function setChecked(checked) {
3362
- return plumeState.setChecked(checked);
3363
- }
3364
- };
3365
- }, [rootRef, inputRef, plumeState]);
3366
- return {
3367
- plasmicProps: {
3368
- variants: variants,
3369
- overrides: overrides,
3370
- args: args
3371
- },
3372
- state: plumeState
3373
- };
3374
- }
3375
-
3376
- function deriveItemsFromProps(props, opts) {
3377
- if (opts.itemsProp && opts.itemsProp in props) {
3378
- if (!opts.ItemComponent || !opts.SectionComponent) {
3379
- throw new Error("You may need to re-generate your Plasmic* files");
3380
- }
3381
- var items = props[opts.itemsProp];
3382
- return deriveItemsFromItemsProp(items, {
3383
- ItemComponent: opts.ItemComponent,
3384
- SectionComponent: opts.SectionComponent
3385
- });
3386
- } else {
3387
- return deriveItemsFromChildren(props.children, opts);
3388
- }
3389
- }
3390
- function deriveItemsFromItemsProp(items, opts) {
3391
- var _items$map;
3392
- var ItemComponent = opts.ItemComponent,
3393
- SectionComponent = opts.SectionComponent;
3394
- var disabledKeys = [];
3395
- var transform = function transform(item) {
3396
- if (typeof item === "string") {
3397
- return React__default.createElement(ItemComponent, {
3398
- key: item,
3399
- value: item
3400
- }, item);
3401
- } else if ("children" in item) {
3402
- return React__default.createElement(SectionComponent, {
3403
- key: item.title,
3404
- title: item.title
3405
- }, item.children.map(function (x) {
3406
- return transform(x);
3407
- }));
3408
- } else {
3409
- var _item$label;
3410
- if (item.isDisabled) {
3411
- disabledKeys.push(item.value);
3412
- }
3413
- return React__default.createElement(ItemComponent, {
3414
- key: item.value,
3415
- value: item.value,
3416
- textValue: item.textValue,
3417
- isDisabled: item.isDisabled
3418
- }, (_item$label = item.label) != null ? _item$label : item.value);
3419
- }
3420
- };
3421
- return {
3422
- items: (_items$map = items == null ? void 0 : items.map(function (x) {
3423
- return transform(x);
3424
- })) != null ? _items$map : [],
3425
- disabledKeys: disabledKeys
3426
- };
3427
- }
3428
- /**
3429
- * Given children of a component like Select or Menu, derive the items
3430
- * that we will pass into the Collections API. These will be
3431
- * ReactElement<ItemLikeProps|SectionLikeProps>[].
3432
- *
3433
- * Will also assign keys to items by their index in the collection,
3434
- * and collect the keys of disabled items.
3435
- */
3436
- function deriveItemsFromChildren(children, opts) {
3437
- if (!children) {
3438
- return {
3439
- items: [],
3440
- disabledKeys: []
3441
- };
3442
- }
3443
- var itemPlumeType = opts.itemPlumeType,
3444
- sectionPlumeType = opts.sectionPlumeType,
3445
- invalidChildError = opts.invalidChildError;
3446
- // For Plume items without an explicit key, we assign a key as the index
3447
- // of the collection.
3448
- var itemCount = 0;
3449
- var sectionCount = 0;
3450
- var ensureValue = function ensureValue(element) {
3451
- if (!propInChild(element, "value")) {
3452
- if (opts.requireItemValue && PLUME_STRICT_MODE) {
3453
- throw new Error("Must specify a \"value\" prop for " + getElementTypeName(element));
3454
- } else {
3455
- return cloneChild(element, {
3456
- value: "" + itemCount++
3457
- });
3458
- }
3459
- } else {
3460
- // Still increment count even if key is present, so that the
3461
- // auto-assigned key really reflects the index
3462
- itemCount++;
3463
- return element;
3464
- }
3465
- };
3466
- var disabledKeys = [];
3467
- var flattenedChildren = function flattenedChildren(children) {
3468
- return toChildArray(children).flatMap(function (child) {
3469
- if (React__default.isValidElement(child)) {
3470
- if (child.type === React__default.Fragment) {
3471
- return flattenedChildren(child.props.children);
3472
- }
3473
- var type = getPlumeType(child);
3474
- if (type === itemPlumeType) {
3475
- child = ensureValue(child);
3476
- var childKey = getItemLikeKey(child);
3477
- if (getChildProp(child, "isDisabled") && !!childKey) {
3478
- disabledKeys.push(childKey);
3479
- }
3480
- return [child];
3481
- }
3482
- if (type === sectionPlumeType) {
3483
- var _child$key;
3484
- return [cloneChild(child, {
3485
- // key of section doesn't actually matter, just needs
3486
- // to be unique
3487
- key: (_child$key = child.key) != null ? _child$key : "section-" + sectionCount++,
3488
- children: flattenedChildren(getChildProp(child, "children"))
3489
- })];
3490
- }
3491
- }
3492
- if (PLUME_STRICT_MODE) {
3493
- throw new Error(invalidChildError != null ? invalidChildError : "Unexpected child");
3494
- } else {
3495
- return [];
3496
- }
3497
- });
3498
- };
3499
- return {
3500
- items: flattenedChildren(children),
3501
- disabledKeys: disabledKeys
3502
- };
3503
- }
3504
- function useDerivedItems(props, opts) {
3505
- var children = props.children;
3506
- var itemPlumeType = opts.itemPlumeType,
3507
- sectionPlumeType = opts.sectionPlumeType,
3508
- invalidChildError = opts.invalidChildError,
3509
- requireItemValue = opts.requireItemValue,
3510
- ItemComponent = opts.ItemComponent,
3511
- SectionComponent = opts.SectionComponent,
3512
- itemsProp = opts.itemsProp;
3513
- var items = itemsProp ? props[itemsProp] : undefined;
3514
- return React__default.useMemo(function () {
3515
- return deriveItemsFromProps(props, {
3516
- itemPlumeType: itemPlumeType,
3517
- sectionPlumeType: sectionPlumeType,
3518
- invalidChildError: invalidChildError,
3519
- requireItemValue: requireItemValue,
3520
- itemsProp: itemsProp,
3521
- ItemComponent: ItemComponent,
3522
- SectionComponent: SectionComponent
3523
- });
3524
- }, [children, items, itemPlumeType, sectionPlumeType, invalidChildError, requireItemValue, ItemComponent, SectionComponent]);
3525
- }
3526
- function useDerivedItemsFromChildren(children, opts) {
3527
- var itemPlumeType = opts.itemPlumeType,
3528
- sectionPlumeType = opts.sectionPlumeType,
3529
- invalidChildError = opts.invalidChildError,
3530
- requireItemValue = opts.requireItemValue;
3531
- return React__default.useMemo(function () {
3532
- return deriveItemsFromChildren(children, {
3533
- itemPlumeType: itemPlumeType,
3534
- sectionPlumeType: sectionPlumeType,
3535
- invalidChildError: invalidChildError,
3536
- requireItemValue: requireItemValue
3537
- });
3538
- }, [children, itemPlumeType, sectionPlumeType, invalidChildError, requireItemValue]);
3539
- }
3540
- /**
3541
- * Given a Collection node, create the React element that we should use
3542
- * to render it.
3543
- */
3544
- function renderCollectionNode(node) {
3545
- // node.rendered should already have our item-like or section-like Plume
3546
- // component elements, so we just need to clone them with a secret
3547
- // _node prop that we use to render.
3548
- return cloneChild(node.rendered, {
3549
- _node: node,
3550
- key: node.key
3551
- });
3552
- }
3553
- /**
3554
- * Renders a item-like or section-like Plume component element into an
3555
- * Item or a Section element.
3556
- */
3557
- function renderAsCollectionChild(child, opts) {
3558
- var plumeType = getPlumeType(child);
3559
- if (plumeType === opts.itemPlumeType) {
3560
- var _getChildProp;
3561
- var option = child;
3562
- // We look at the children passed to the item-like element, and derive key
3563
- // or textValue from it if it is a string
3564
- var content = getChildProp(option, "children");
3565
- // The children render prop needs to return an <Item/>
3566
- return React__default.createElement(collections.Item
3567
- // We use ItemLike.value if the user explicitly specified a value,
3568
- // and we fallback to key. If the user specified neither, then
3569
- // the Collections API will generate a unique key for this item.
3570
- , {
3571
- // We use ItemLike.value if the user explicitly specified a value,
3572
- // and we fallback to key. If the user specified neither, then
3573
- // the Collections API will generate a unique key for this item.
3574
- key: getItemLikeKey(option),
3575
- // textValue is either explicitly specified by the user, or we
3576
- // try to derive it if `content` is a string.
3577
- textValue: (_getChildProp = getChildProp(option, "textValue")) != null ? _getChildProp : isString(content) ? content : propInChild(option, "value") ? getChildProp(option, "value") : option.key,
3578
- "aria-label": getChildProp(option, "aria-label")
3579
- }, option);
3580
- } else {
3581
- var group = child;
3582
- return React__default.createElement(collections.Section
3583
- // Note that we are using the whole section-like element as the title
3584
- // here, and not group.props.title; we want the entire section-like
3585
- // Plume element to end up as Node.rendered.
3586
- , {
3587
- // Note that we are using the whole section-like element as the title
3588
- // here, and not group.props.title; we want the entire section-like
3589
- // Plume element to end up as Node.rendered.
3590
- title: group,
3591
- "aria-label": getChildProp(group, "aria-label"),
3592
- // We are flattening and deriving the descendant Options as items here.
3593
- // group.props.children should've already been cleaned up by
3594
- // deriveItemsFromChildren()
3595
- items: getChildProp(group, "children")
3596
- }, function (c) {
3597
- return renderAsCollectionChild(c, opts);
3598
- });
3599
- }
3600
- }
3601
- function getItemLikeKey(element) {
3602
- var _getChildProp2;
3603
- return (_getChildProp2 = getChildProp(element, "value")) != null ? _getChildProp2 : element.key;
3604
- }
3605
- // PlasmicLoader-aware function to get prop from child.
3606
- function getChildProp(child, prop) {
3607
- return "componentProps" in child.props ? child.props.componentProps[prop] : child.props[prop];
3608
- }
3609
- // PlasmicLoader-aware function to check `if (prop in element.props)`.
3610
- function propInChild(child, prop) {
3611
- return "componentProps" in child.props ? prop in child.props.componentProps : prop in child.props;
3612
- }
3613
- // PlasmicLoader-aware function to clone React element.
3614
- function cloneChild(child, props) {
3615
- if (child.type.getPlumeType) {
3616
- // If React element has getPlumeType(), assume that it is PlasmicLoader,
3617
- // so add nodeProps to componentProps instead of element props.
3618
- return React__default.cloneElement(child, _extends({
3619
- componentProps: _extends({}, child.props.componentProps, props)
3620
- }, props.key ? {
3621
- key: props.key
3622
- } : {}));
3623
- }
3624
- return React__default.cloneElement(child, props);
3625
- }
3626
-
3627
- var TriggeredOverlayContext = /*#__PURE__*/React.createContext(undefined);
3628
-
3629
- var MenuContext = /*#__PURE__*/React.createContext(undefined);
3630
-
3631
- var _excluded$5 = ["children"];
3632
- var COLLECTION_OPTS = {
3633
- itemPlumeType: "menu-item",
3634
- sectionPlumeType: "menu-group"
3635
- };
3636
- /**
3637
- * Converts props from BaseMenuProps to react-aria's useMenu() props.
3638
- */
3639
- function asAriaMenuProps(props) {
3640
- var children = props.children,
3641
- rest = _objectWithoutPropertiesLoose(props, _excluded$5);
3642
- var _useDerivedItemsFromC = useDerivedItemsFromChildren(children, _extends({}, COLLECTION_OPTS, {
3643
- invalidChildError: "Can only use Menu.Item and Menu.Group as children to Menu",
3644
- requireItemValue: false
3645
- })),
3646
- items = _useDerivedItemsFromC.items,
3647
- disabledKeys = _useDerivedItemsFromC.disabledKeys;
3648
- var collectionChildRenderer = React.useCallback(function (child) {
3649
- return renderAsCollectionChild(child, COLLECTION_OPTS);
3650
- }, []);
3651
- return {
3652
- ariaProps: _extends({}, rest, {
3653
- children: collectionChildRenderer,
3654
- items: items,
3655
- disabledKeys: disabledKeys
3656
- })
3657
- };
3658
- }
3659
- function useMenu(plasmicClass, props, config, ref) {
3660
- var _overrides, _extends2;
3661
- if (ref === void 0) {
3662
- ref = null;
3663
- }
3664
- useEnsureSSRProvider();
3665
- var _asAriaMenuProps = asAriaMenuProps(props),
3666
- ariaProps = _asAriaMenuProps.ariaProps;
3667
- var triggerContext = React.useContext(TriggeredOverlayContext);
3668
- var rootRef = React.useRef(null);
3669
- var state = tree.useTreeState(ariaProps);
3670
- var menuListRef = React.useRef(null);
3671
- var _useAriaMenu = menu.useMenu(_extends({}, ariaProps, {
3672
- autoFocus: triggerContext == null ? void 0 : triggerContext.autoFocus
3673
- }), state, menuListRef),
3674
- menuProps = _useAriaMenu.menuProps;
3675
- var contextValue = React.useMemo(function () {
3676
- return {
3677
- state: state,
3678
- menuProps: props
3679
- };
3680
- }, [state, props]);
3681
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)));
3682
- var overrides = (_overrides = {}, _overrides[config.root] = {
3683
- props: mergeProps(getStyleProps(props), {
3684
- ref: rootRef
3685
- })
3686
- }, _overrides[config.itemsContainer] = {
3687
- as: "ul",
3688
- props: mergeProps(menuProps, {
3689
- ref: menuListRef,
3690
- style: _extends({}, noOutline())
3691
- })
3692
- }, _overrides);
3693
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.itemsSlot] = React.createElement(MenuContext.Provider, {
3694
- value: contextValue
3695
- }, Array.from(state.collection).map(function (node) {
3696
- return renderCollectionNode(node);
3697
- })), _extends2));
3698
- var plumeState = React.useMemo(function () {
3699
- return {
3700
- getFocusedValue: function getFocusedValue() {
3701
- return state.selectionManager.focusedKey;
3702
- },
3703
- setFocusedValue: function setFocusedValue(value) {
3704
- return state.selectionManager.setFocusedKey(value);
3705
- }
3706
- };
3707
- }, [state]);
3708
- React.useImperativeHandle(ref, function () {
3709
- return {
3710
- getRoot: function getRoot() {
3711
- return rootRef.current;
3712
- },
3713
- getFocusedValue: function getFocusedValue() {
3714
- return plumeState.getFocusedValue();
3715
- },
3716
- setFocusedValue: function setFocusedValue(key) {
3717
- return plumeState.setFocusedValue(key);
3718
- }
3719
- };
3720
- }, [rootRef, plumeState]);
3721
- return {
3722
- plasmicProps: {
3723
- variants: variants,
3724
- args: args,
3725
- overrides: overrides
3726
- },
3727
- state: plumeState
3728
- };
3729
- }
3730
-
3731
- function useMenuGroup(plasmicClass, props, config) {
3732
- var _extends2, _overrides;
3733
- var context = React.useContext(MenuContext);
3734
- var node = props._node;
3735
- if (!context || !node) {
3736
- if (PLUME_STRICT_MODE) {
3737
- throw new Error("You can only use a Menu.Group within a Menu component.");
3738
- }
3739
- return getDefaultPlasmicProps(plasmicClass, props);
3740
- }
3741
- var _useMenuSection = menu.useMenuSection({
3742
- heading: props.title,
3743
- "aria-label": props["aria-label"]
3744
- }),
3745
- headingProps = _useMenuSection.headingProps,
3746
- groupProps = _useMenuSection.groupProps;
3747
- var _useSeparator = separator.useSeparator({
3748
- elementType: "li"
3749
- }),
3750
- separatorProps = _useSeparator.separatorProps;
3751
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
3752
- def: config.noTitleVariant,
3753
- active: !props.title
3754
- }, {
3755
- def: config.isFirstVariant,
3756
- active: context.state.collection.getFirstKey() === node.key
3757
- }));
3758
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.titleSlot] = props.title, _extends2[config.itemsSlot] = Array.from(node.childNodes).map(function (childNode) {
3759
- return renderCollectionNode(childNode);
3760
- }), _extends2));
3761
- var overrides = (_overrides = {}, _overrides[config.root] = {
3762
- props: getStyleProps(props)
3763
- }, _overrides[config.separator] = {
3764
- props: _extends({}, separatorProps),
3765
- as: "li"
3766
- }, _overrides[config.titleContainer] = _extends({
3767
- props: _extends({
3768
- role: "presentation"
3769
- }, headingProps)
3770
- }, !props.title && {
3771
- render: function render() {
3772
- return null;
3773
- }
3774
- }), _overrides[config.itemsContainer] = {
3775
- props: _extends({}, groupProps),
3776
- as: "ul"
3777
- }, _overrides);
3778
- return {
3779
- plasmicProps: {
3780
- variants: variants,
3781
- args: args,
3782
- overrides: overrides
3783
- }
3784
- };
3785
- }
3786
-
3787
- function useMenuItem(plasmicClass, props, config) {
3788
- var _extends2, _overrides;
3789
- var menuContext = React.useContext(MenuContext);
3790
- var triggerContext = React.useContext(TriggeredOverlayContext);
3791
- if (!menuContext) {
3792
- if (PLUME_STRICT_MODE) {
3793
- throw new Error("You can only use a Menu.Item within a Menu component.");
3794
- }
3795
- return getDefaultPlasmicProps(plasmicClass, props);
3796
- }
3797
- var children = props.children,
3798
- onAction = props.onAction;
3799
- var state = menuContext.state,
3800
- menuProps = menuContext.menuProps;
3801
- // We pass in the Node secretly as an undocumented prop from <Select />
3802
- var node = props._node;
3803
- var isDisabled = state.disabledKeys.has(node.key);
3804
- var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
3805
- var ref = React.useRef(null);
3806
- var _useAriaMenuItem = menu.useMenuItem(mergeProps({
3807
- // We need to merge both the onAction on MenuItem and the onAction
3808
- // on Menu
3809
- onAction: onAction
3810
- }, {
3811
- onAction: menuProps.onAction,
3812
- onClose: triggerContext == null ? void 0 : triggerContext.state.close
3813
- }, {
3814
- isDisabled: isDisabled,
3815
- "aria-label": node && node["aria-label"],
3816
- key: node.key,
3817
- isVirtualized: false,
3818
- closeOnSelect: true
3819
- }), state, ref),
3820
- menuItemProps = _useAriaMenuItem.menuItemProps,
3821
- labelProps = _useAriaMenuItem.labelProps;
3822
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
3823
- def: config.isDisabledVariant,
3824
- active: isDisabled
3825
- }, {
3826
- def: config.isHighlightedVariant,
3827
- active: isHighlighted
3828
- }));
3829
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.labelSlot] = children, _extends2));
3830
- var overrides = (_overrides = {}, _overrides[config.root] = {
3831
- as: "li",
3832
- props: mergeProps(menuItemProps, {
3833
- ref: ref,
3834
- style: noOutline()
3835
- })
3836
- }, _overrides[config.labelContainer] = {
3837
- props: _extends({}, labelProps)
3838
- }, _overrides);
3839
- return {
3840
- plasmicProps: {
3841
- variants: variants,
3842
- args: args,
3843
- overrides: overrides
3844
- }
3845
- };
3846
- }
3847
-
3848
- /**
3849
- * A menu trigger hook that combines react-aria's useMenuTrigger, useAriaMenuTrigger,
3850
- * useOverlayPosition, useOverlay, and usePress
3851
- */
3852
- function useMenuTrigger(opts, state) {
3853
- var triggerRef = opts.triggerRef,
3854
- isDisabled = opts.isDisabled,
3855
- placement = opts.placement,
3856
- menuMatchTriggerWidth = opts.menuMatchTriggerWidth,
3857
- menuWidth = opts.menuWidth,
3858
- menu$1 = opts.menu;
3859
- var _useAriaMenuTrigger = menu.useMenuTrigger({
3860
- type: "menu",
3861
- isDisabled: isDisabled
3862
- }, state, triggerRef),
3863
- triggerPressProps = _useAriaMenuTrigger.menuTriggerProps,
3864
- menuProps = _useAriaMenuTrigger.menuProps;
3865
- var _usePress = interactions.usePress(_extends({}, triggerPressProps, {
3866
- isDisabled: isDisabled
3867
- })),
3868
- triggerProps = _usePress.pressProps;
3869
- var makeMenu = function makeMenu() {
3870
- var realMenu = typeof menu$1 === "function" ? menu$1() : menu$1;
3871
- if (!realMenu) {
3872
- return null;
3873
- }
3874
- if (getPlumeType(realMenu) !== "menu") {
3875
- if (PLUME_STRICT_MODE) {
3876
- throw new Error("Must use an instance of the Menu component.");
3877
- }
3878
- return null;
3879
- }
3880
- return React.cloneElement(realMenu, mergeProps(realMenu.props, menuProps));
3881
- };
3882
- var triggerContext = React.useMemo(function () {
3883
- var _state$focusStrategy;
3884
- return {
3885
- triggerRef: triggerRef,
3886
- state: state,
3887
- autoFocus: (_state$focusStrategy = state.focusStrategy) != null ? _state$focusStrategy : true,
3888
- placement: placement,
3889
- overlayMatchTriggerWidth: menuMatchTriggerWidth,
3890
- overlayMinTriggerWidth: true,
3891
- overlayWidth: menuWidth
3892
- };
3893
- }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
3894
- return {
3895
- triggerProps: triggerProps,
3896
- makeMenu: makeMenu,
3897
- triggerContext: triggerContext
3898
- };
3899
- }
3900
-
3901
- function DropdownMenu(props) {
3902
- var isOpen = props.isOpen,
3903
- defaultOpen = props.defaultOpen,
3904
- onOpenChange = props.onOpenChange,
3905
- children = props.children,
3906
- placement = props.placement,
3907
- menu = props.menu;
3908
- var triggerRef = React.useRef(null);
3909
- var state = menu$1.useMenuTriggerState({
3910
- isOpen: isOpen,
3911
- defaultOpen: defaultOpen,
3912
- onOpenChange: onOpenChange,
3913
- shouldFlip: true
3914
- });
3915
- var _useMenuTrigger = useMenuTrigger({
3916
- triggerRef: triggerRef,
3917
- placement: placement,
3918
- menu: menu
3919
- }, state),
3920
- triggerProps = _useMenuTrigger.triggerProps,
3921
- makeMenu = _useMenuTrigger.makeMenu,
3922
- triggerContext = _useMenuTrigger.triggerContext;
3923
- return React.createElement(TriggeredOverlayContext.Provider, {
3924
- value: triggerContext
3925
- }, React.cloneElement(children, mergeProps(children.props, triggerProps, {
3926
- ref: triggerRef
3927
- })), state.isOpen && makeMenu());
3928
- }
3929
-
3930
- function useMenuButton(plasmicClass, props, config, outerRef) {
3931
- var _extends2, _overrides;
3932
- if (outerRef === void 0) {
3933
- outerRef = null;
3934
- }
3935
- var placement = props.placement,
3936
- isOpen = props.isOpen,
3937
- defaultOpen = props.defaultOpen,
3938
- onOpenChange = props.onOpenChange,
3939
- isDisabled = props.isDisabled,
3940
- menu = props.menu,
3941
- autoFocus = props.autoFocus,
3942
- menuMatchTriggerWidth = props.menuMatchTriggerWidth,
3943
- menuWidth = props.menuWidth;
3944
- useEnsureSSRProvider();
3945
- var rootRef = React.useRef(null);
3946
- var triggerRef = React.useRef(null);
3947
- var state = menu$1.useMenuTriggerState({
3948
- isOpen: isOpen,
3949
- defaultOpen: defaultOpen,
3950
- onOpenChange: onOpenChange,
3951
- shouldFlip: true
3952
- });
3953
- var _useMenuTrigger = useMenuTrigger({
3954
- isDisabled: isDisabled,
3955
- triggerRef: triggerRef,
3956
- placement: placement,
3957
- menuMatchTriggerWidth: menuMatchTriggerWidth,
3958
- menuWidth: menuWidth,
3959
- menu: menu
3960
- }, state),
3961
- triggerProps = _useMenuTrigger.triggerProps,
3962
- makeMenu = _useMenuTrigger.makeMenu,
3963
- triggerContext = _useMenuTrigger.triggerContext;
3964
- var _useFocusable = focus.useFocusable(props, triggerRef),
3965
- triggerFocusProps = _useFocusable.focusableProps;
3966
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
3967
- def: config.isOpenVariant,
3968
- active: state.isOpen
3969
- }, {
3970
- def: config.isDisabledVariant,
3971
- active: isDisabled
3972
- }));
3973
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.menuSlot] = state.isOpen ? makeMenu() : undefined, _extends2));
3974
- var overrides = (_overrides = {}, _overrides[config.root] = {
3975
- wrapChildren: function wrapChildren(children) {
3976
- return React.createElement(TriggeredOverlayContext.Provider, {
3977
- value: triggerContext
3978
- }, children);
3979
- },
3980
- props: {
3981
- ref: rootRef
3982
- }
3983
- }, _overrides[config.trigger] = {
3984
- props: mergeProps(triggerProps, triggerFocusProps, getStyleProps(props), pick(props, "title"), {
3985
- ref: triggerRef,
3986
- autoFocus: autoFocus,
3987
- disabled: !!isDisabled,
3988
- // Make sure this button is not interpreted as submit
3989
- type: "button"
3990
- })
3991
- }, _overrides);
3992
- var plumeState = React.useMemo(function () {
3993
- return {
3994
- open: function open() {
3995
- return state.open();
3996
- },
3997
- close: function close() {
3998
- return state.close();
3999
- },
4000
- isOpen: function isOpen() {
4001
- return state.isOpen;
4002
- }
4003
- };
4004
- }, [state]);
4005
- React.useImperativeHandle(outerRef, function () {
4006
- return {
4007
- getRoot: function getRoot() {
4008
- return rootRef.current;
4009
- },
4010
- getTrigger: function getTrigger() {
4011
- return triggerRef.current;
4012
- },
4013
- focus: function focus() {
4014
- return triggerRef.current && triggerRef.current.focus();
4015
- },
4016
- blur: function blur() {
4017
- return triggerRef.current && triggerRef.current.blur();
4018
- },
4019
- open: plumeState.open,
4020
- close: plumeState.close,
4021
- isOpen: plumeState.isOpen
4022
- };
4023
- }, [rootRef, triggerRef, plumeState]);
4024
- return {
4025
- plasmicProps: {
4026
- variants: variants,
4027
- args: args,
4028
- overrides: overrides
4029
- },
4030
- state: plumeState
4031
- };
4032
- }
4033
-
4034
- var SelectContext = /*#__PURE__*/React.createContext(undefined);
4035
-
4036
- var _excluded$6 = ["value", "defaultValue", "children", "onChange", "placement", "menuMatchTriggerWidth", "menuWidth"];
4037
- var COLLECTION_OPTS$1 = {
4038
- itemPlumeType: "select-option",
4039
- sectionPlumeType: "select-option-group"
4040
- };
4041
- /**
4042
- * Converts props in our BaseSelectProps into props that react-aria's
4043
- * useSelect() understands.
4044
- *
4045
- * Because we're not exposing the Collections API (see ./index.tsx),
4046
- * we are converting our own API into props for useSelect.
4047
- *
4048
- * Specifically, in Plume's API,
4049
- * - `children` flattens to a list of ReactElements of type Select.Option
4050
- * or Select.OptionGroup
4051
- *
4052
- * and we map it this way to the Collections API:
4053
- * - `items` is a list of those flattened ReactElements from `children`!
4054
- * - `children`, as a render prop, is supposed to take one of the `items`
4055
- * and return a `Section` or `Item` element. We take an Option/OptionGroup
4056
- * element, and use its props to render the appropriate `Section` or
4057
- * `Item`. The "trick" here is that we then stuff the Option element as
4058
- * `Item.children`, and the OptionGroup element as `Section.title`.
4059
- *
4060
- * When the Collections API does its work deriving `Node`s, the corresponding
4061
- * Option/OptionGroup ReactElements will end up as `Node.rendered`.
4062
- *
4063
- * Then, when we are actually rendering the content of the dropdown, we
4064
- * iterate through each collected `Node`, and renders
4065
- * React.cloneElement(Node.rendered, {_node: node}). This "secretly" passes
4066
- * the derived collection `Node` as a prop to Option and OptionGroup, and they
4067
- * can make use of the derived `Node.key` etc in their rendering functions.
4068
- *
4069
- * One thing to note here is that we never "rendered" the Option/OptionGroup
4070
- * React elements that the user constructed; instead, we just looked at the
4071
- * props used on those elements, and passed those onto the Collections API.
4072
- * What gets rendered to the screen is the cloned version of these elements
4073
- * with the secret derived `_node` prop. That means Option and OptionGroup
4074
- * render functions can assume that _node is passed in.
4075
- */
4076
- function useAriaSelectProps(props, config) {
4077
- var value = props.value,
4078
- defaultValue = props.defaultValue,
4079
- onChange = props.onChange,
4080
- rest = _objectWithoutPropertiesLoose(props, _excluded$6);
4081
- var _useDerivedItems = useDerivedItems(props, _extends({}, COLLECTION_OPTS$1, {
4082
- invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select",
4083
- requireItemValue: true,
4084
- ItemComponent: config.OptionComponent,
4085
- SectionComponent: config.OptionGroupComponent,
4086
- itemsProp: "options"
4087
- })),
4088
- items = _useDerivedItems.items,
4089
- disabledKeys = _useDerivedItems.disabledKeys;
4090
- var collectionChildRenderer = React.useCallback(function (child) {
4091
- return renderAsCollectionChild(child, COLLECTION_OPTS$1);
4092
- }, []);
4093
- var onSelectionChange = React.useMemo(function () {
4094
- if (onChange) {
4095
- return function (val) {
4096
- return onChange(val == null || val === "null" ? null : val);
4097
- };
4098
- } else {
4099
- return undefined;
4100
- }
4101
- }, [onChange]);
4102
- return {
4103
- ariaProps: _extends({}, rest, {
4104
- children: collectionChildRenderer,
4105
- onSelectionChange: onSelectionChange,
4106
- items: items,
4107
- disabledKeys: disabledKeys,
4108
- defaultSelectedKey: defaultValue
4109
- }, "value" in props && {
4110
- selectedKey: value != null ? value : null
4111
- })
4112
- };
4113
- }
4114
- function useSelect(plasmicClass, props, config, ref) {
4115
- var _overrides, _extends2;
4116
- if (ref === void 0) {
4117
- ref = null;
4118
- }
4119
- useEnsureSSRProvider();
4120
- var _useAriaSelectProps = useAriaSelectProps(props, config),
4121
- ariaProps = _useAriaSelectProps.ariaProps;
4122
- var placement = props.placement;
4123
- var state = select$1.useSelectState(ariaProps);
4124
- var triggerRef = React.useRef(null);
4125
- var rootRef = React.useRef(null);
4126
- var isDisabled = props.isDisabled,
4127
- name = props.name,
4128
- menuWidth = props.menuWidth,
4129
- menuMatchTriggerWidth = props.menuMatchTriggerWidth,
4130
- autoFocus = props.autoFocus,
4131
- placeholder = props.placeholder,
4132
- selectedContent = props.selectedContent;
4133
- var canvasCtx = host.usePlasmicCanvasContext();
4134
- var _useAriaSelect = select.useSelect(ariaProps, state, triggerRef),
4135
- triggerPressProps = _useAriaSelect.triggerProps,
4136
- menuProps = _useAriaSelect.menuProps;
4137
- var _usePress = interactions.usePress(_extends({}, triggerPressProps, {
4138
- isDisabled: isDisabled
4139
- })),
4140
- triggerProps = _usePress.pressProps;
4141
- var triggerContent = state.selectedItem ? selectedContent != null ? selectedContent : getChildProp(state.selectedItem.value, "children") : null;
4142
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
4143
- def: config.isOpenVariant,
4144
- active: state.isOpen
4145
- }, {
4146
- def: config.placeholderVariant,
4147
- active: !state.selectedItem
4148
- }, {
4149
- def: config.isDisabledVariant,
4150
- active: isDisabled
4151
- }));
4152
- var triggerContext = React.useMemo(function () {
4153
- return {
4154
- triggerRef: triggerRef,
4155
- state: state,
4156
- placement: placement,
4157
- overlayMatchTriggerWidth: menuMatchTriggerWidth,
4158
- overlayMinTriggerWidth: true,
4159
- overlayWidth: menuWidth
4160
- };
4161
- }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
4162
- var overrides = (_overrides = {}, _overrides[config.root] = {
4163
- props: mergeProps(getStyleProps(props), {
4164
- ref: rootRef
4165
- }),
4166
- wrapChildren: function wrapChildren(children) {
4167
- return React.createElement(React.Fragment, null, !canvasCtx && React.createElement(select.HiddenSelect, {
4168
- state: state,
4169
- triggerRef: triggerRef,
4170
- name: name,
4171
- isDisabled: isDisabled
4172
- }), children);
4173
- }
4174
- }, _overrides[config.trigger] = {
4175
- props: mergeProps(canvasCtx ? {} : triggerProps, {
4176
- ref: triggerRef,
4177
- autoFocus: autoFocus,
4178
- disabled: !!isDisabled,
4179
- // Don't trigger form submission!
4180
- type: "button"
4181
- })
4182
- }, _overrides[config.overlay] = {
4183
- wrap: function wrap(content) {
4184
- return React.createElement(TriggeredOverlayContext.Provider, {
4185
- value: triggerContext
4186
- }, content);
4187
- }
4188
- }, _overrides[config.optionsContainer] = {
4189
- wrap: function wrap(content) {
4190
- return React.createElement(ListBoxWrapper, {
4191
- state: state,
4192
- menuProps: menuProps
4193
- }, content);
4194
- }
4195
- }, _overrides);
4196
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.triggerContentSlot] = triggerContent, _extends2[config.placeholderSlot] = placeholder, _extends2[config.optionsSlot] = React.createElement(SelectContext.Provider, {
4197
- value: state
4198
- }, Array.from(state.collection).map(function (node) {
4199
- return renderCollectionNode(node);
4200
- })), _extends2));
4201
- var plumeState = React.useMemo(function () {
4202
- return {
4203
- open: function open() {
4204
- return state.open();
4205
- },
4206
- close: function close() {
4207
- return state.close();
4208
- },
4209
- isOpen: function isOpen() {
4210
- return state.isOpen;
4211
- },
4212
- getSelectedValue: function getSelectedValue() {
4213
- return state.selectedKey ? "" + state.selectedKey : null;
4214
- },
4215
- setSelectedValue: function setSelectedValue(key) {
4216
- return state.setSelectedKey(key);
4217
- }
4218
- };
4219
- }, [state]);
4220
- React.useImperativeHandle(ref, function () {
4221
- return {
4222
- getRoot: function getRoot() {
4223
- return rootRef.current;
4224
- },
4225
- getTrigger: function getTrigger() {
4226
- return triggerRef.current;
4227
- },
4228
- focus: function focus() {
4229
- var _triggerRef$current;
4230
- return (_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.focus();
4231
- },
4232
- blur: function blur() {
4233
- var _triggerRef$current2;
4234
- return (_triggerRef$current2 = triggerRef.current) == null ? void 0 : _triggerRef$current2.blur();
4235
- },
4236
- open: function open() {
4237
- return plumeState.open();
4238
- },
4239
- close: function close() {
4240
- return plumeState.close();
4241
- },
4242
- isOpen: function isOpen() {
4243
- return plumeState.isOpen();
4244
- },
4245
- getSelectedValue: function getSelectedValue() {
4246
- return plumeState.getSelectedValue();
4247
- },
4248
- setSelectedValue: function setSelectedValue(key) {
4249
- return plumeState.setSelectedValue(key);
4250
- }
4251
- };
4252
- }, [rootRef, triggerRef, plumeState]);
4253
- return {
4254
- plasmicProps: {
4255
- variants: variants,
4256
- args: args,
4257
- overrides: overrides
4258
- },
4259
- state: plumeState
4260
- };
4261
- }
4262
- function ListBoxWrapper(props) {
4263
- var state = props.state,
4264
- menuProps = props.menuProps,
4265
- children = props.children;
4266
- var ref = React.useRef(null);
4267
- var canvasCtx = host.usePlasmicCanvasContext();
4268
- var _useListBox = listbox.useListBox(_extends({}, menuProps, {
4269
- isVirtualized: false,
4270
- autoFocus: state.focusStrategy || true,
4271
- disallowEmptySelection: true
4272
- }), state, ref),
4273
- listBoxProps = _useListBox.listBoxProps;
4274
- return React.cloneElement(children, mergeProps(children.props, canvasCtx ? {} : listBoxProps, {
4275
- style: noOutline(),
4276
- ref: ref
4277
- }));
4278
- }
4279
-
4280
- function useSelectOption(plasmicClass, props, config, outerRef) {
4281
- var _extends2, _overrides;
4282
- if (outerRef === void 0) {
4283
- outerRef = null;
4284
- }
4285
- var state = React.useContext(SelectContext);
4286
- if (!state) {
4287
- // If no context, then we are being incorrectly used. Complain or just don't
4288
- // bother installing any hooks. It's okay to violate rules of hooks here
4289
- // because this instance won't suddenly be used correctly in another render.
4290
- if (PLUME_STRICT_MODE) {
4291
- throw new Error("You can only use a Select.Option within a Select component.");
4292
- }
4293
- return getDefaultPlasmicProps(plasmicClass, props);
4294
- }
4295
- var children = props.children;
4296
- var canvasCtx = host.usePlasmicCanvasContext();
4297
- var rootRef = React.useRef(null);
4298
- var onRef = mergeRefs(rootRef, outerRef);
4299
- // We pass in the Node secretly as an undocumented prop from <Select />
4300
- var node = props._node;
4301
- var isSelected = state.selectionManager.isSelected(node.key);
4302
- var isDisabled = state.disabledKeys.has(node.key);
4303
- var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
4304
- var _useAriaOption = listbox.useOption({
4305
- isSelected: isSelected,
4306
- isDisabled: isDisabled,
4307
- "aria-label": node && node["aria-label"],
4308
- key: node.key,
4309
- shouldSelectOnPressUp: true,
4310
- shouldFocusOnHover: true,
4311
- isVirtualized: false,
4312
- shouldUseVirtualFocus: !!canvasCtx
4313
- }, state, rootRef),
4314
- optionProps = _useAriaOption.optionProps,
4315
- labelProps = _useAriaOption.labelProps;
4316
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
4317
- def: config.isSelectedVariant,
4318
- active: isSelected
4319
- }, {
4320
- def: config.isDisabledVariant,
4321
- active: isDisabled
4322
- }, {
4323
- def: config.isHighlightedVariant,
4324
- active: isHighlighted
4325
- }));
4326
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.labelSlot] = children, _extends2));
4327
- var overrides = (_overrides = {}, _overrides[config.root] = {
4328
- props: mergeProps(canvasCtx ? {} : optionProps, getStyleProps(props), {
4329
- ref: onRef,
4330
- style: noOutline()
4331
- })
4332
- }, _overrides[config.labelContainer] = {
4333
- props: labelProps
4334
- }, _overrides);
4335
- return {
4336
- plasmicProps: {
4337
- variants: variants,
4338
- args: args,
4339
- overrides: overrides
4340
- }
4341
- };
4342
- }
4343
-
4344
- function useSelectOptionGroup(plasmicClass, props, config) {
4345
- var _extends2, _overrides;
4346
- var state = React.useContext(SelectContext);
4347
- // `node` should exist if the OptionGroup was instantiated properly
4348
- // within a Select
4349
- var node = props._node;
4350
- if (!state || !node) {
4351
- if (PLUME_STRICT_MODE) {
4352
- throw new Error("You can only use a Select.OptionGroup within a Select component.");
4353
- }
4354
- return getDefaultPlasmicProps(plasmicClass, props);
4355
- }
4356
- var _useListBoxSection = listbox.useListBoxSection({
4357
- heading: props.title,
4358
- "aria-label": props["aria-label"]
4359
- }),
4360
- headingProps = _useListBoxSection.headingProps,
4361
- groupProps = _useListBoxSection.groupProps;
4362
- var _useSeparator = separator.useSeparator({
4363
- elementType: "li"
4364
- }),
4365
- separatorProps = _useSeparator.separatorProps;
4366
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
4367
- def: config.noTitleVariant,
4368
- active: !props.title
4369
- }, {
4370
- def: config.isFirstVariant,
4371
- active: state.collection.getFirstKey() === node.key
4372
- }));
4373
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.titleSlot] = props.title, _extends2[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
4374
- return renderCollectionNode(childNode);
4375
- }), _extends2));
4376
- var overrides = (_overrides = {}, _overrides[config.root] = {
4377
- props: getStyleProps(props)
4378
- }, _overrides[config.separator] = {
4379
- props: _extends({}, separatorProps)
4380
- }, _overrides[config.titleContainer] = _extends({
4381
- props: _extends({
4382
- role: "presentation"
4383
- }, headingProps)
4384
- }, !props.title && {
4385
- render: function render() {
4386
- return null;
4387
- }
4388
- }), _overrides[config.optionsContainer] = {
4389
- props: _extends({}, groupProps)
4390
- }, _overrides);
4391
- return {
4392
- plasmicProps: {
4393
- variants: variants,
4394
- args: args,
4395
- overrides: overrides
4396
- }
4397
- };
4398
- }
4399
-
4400
- function asAriaSwitchProps(props) {
4401
- var ariaProps = _extends({}, props, {
4402
- isSelected: props.isChecked,
4403
- defaultSelected: props.defaultChecked
4404
- });
4405
- delete ariaProps["isChecked"];
4406
- delete ariaProps["defaultChecked"];
4407
- return ariaProps;
4408
- }
4409
- function useSwitch(plasmicClass, props, config, ref) {
4410
- var _overrides, _ref;
4411
- if (ref === void 0) {
4412
- ref = null;
4413
- }
4414
- var children = props.children,
4415
- isDisabled = props.isDisabled;
4416
- useEnsureSSRProvider();
4417
- var inputRef = React.useRef(null);
4418
- var rootRef = React.useRef(null);
4419
- var ariaProps = asAriaSwitchProps(props);
4420
- var state = toggle.useToggleState(ariaProps);
4421
- var _useAriaSwitch = _switch.useSwitch(ariaProps, state, inputRef),
4422
- inputProps = _useAriaSwitch.inputProps;
4423
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
4424
- def: config.isDisabledVariant,
4425
- active: isDisabled
4426
- }, {
4427
- def: config.isCheckedVariant,
4428
- active: state.isSelected
4429
- }, {
4430
- def: config.noLabelVariant,
4431
- active: !children
4432
- }));
4433
- var overrides = (_overrides = {}, _overrides[config.root] = {
4434
- as: "label",
4435
- props: mergeProps(getStyleProps(props), {
4436
- ref: rootRef
4437
- }),
4438
- wrapChildren: function wrapChildren(children) {
4439
- return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, null, React.createElement("input", Object.assign({}, inputProps, {
4440
- ref: inputRef
4441
- }))), children);
4442
- }
4443
- }, _overrides);
4444
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.labelSlot ? (_ref = {}, _ref[config.labelSlot] = children, _ref) : {});
4445
- var plumeState = React.useMemo(function () {
4446
- return {
4447
- setChecked: function setChecked(checked) {
4448
- return state.setSelected(checked);
4449
- }
4450
- };
4451
- }, [state]);
4452
- React.useImperativeHandle(ref, function () {
4453
- return {
4454
- getRoot: function getRoot() {
4455
- return rootRef.current;
4456
- },
4457
- focus: function focus() {
4458
- var _inputRef$current;
4459
- return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
4460
- },
4461
- blur: function blur() {
4462
- var _inputRef$current2;
4463
- return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
4464
- },
4465
- setChecked: function setChecked(checked) {
4466
- return plumeState.setChecked(checked);
4467
- }
4468
- };
4469
- }, [rootRef, inputRef, plumeState]);
4470
- return {
4471
- plasmicProps: {
4472
- variants: variants,
4473
- overrides: overrides,
4474
- args: args
4475
- },
4476
- state: plumeState
4477
- };
4478
- }
4479
-
4480
- var _excluded$7 = ["isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "className", "style", "inputClassName", "inputStyle"];
4481
- function useTextInput(plasmicClass, props, config, ref) {
4482
- var _ref, _ref2, _overrides;
4483
- if (ref === void 0) {
4484
- ref = null;
4485
- }
4486
- var isDisabled = props.isDisabled,
4487
- startIcon = props.startIcon,
4488
- endIcon = props.endIcon,
4489
- showStartIcon = props.showStartIcon,
4490
- showEndIcon = props.showEndIcon,
4491
- className = props.className,
4492
- style = props.style,
4493
- inputClassName = props.inputClassName,
4494
- inputStyle = props.inputStyle,
4495
- rest = _objectWithoutPropertiesLoose(props, _excluded$7);
4496
- var rootRef = React.useRef(null);
4497
- var inputRef = React.useRef(null);
4498
- React.useImperativeHandle(ref, function () {
4499
- return {
4500
- focus: function focus() {
4501
- var _inputRef$current;
4502
- (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
4503
- },
4504
- blur: function blur() {
4505
- var _inputRef$current2;
4506
- (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
4507
- },
4508
- getRoot: function getRoot() {
4509
- return rootRef.current;
4510
- },
4511
- getInput: function getInput() {
4512
- return inputRef.current;
4513
- }
4514
- };
4515
- }, [rootRef, inputRef]);
4516
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
4517
- def: config.showStartIconVariant,
4518
- active: showStartIcon
4519
- }, {
4520
- def: config.showEndIconVariant,
4521
- active: showEndIcon
4522
- }, {
4523
- def: config.isDisabledVariant,
4524
- active: isDisabled
4525
- }));
4526
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2));
4527
- var overrides = (_overrides = {}, _overrides[config.root] = {
4528
- props: {
4529
- ref: rootRef,
4530
- className: className,
4531
- style: style
4532
- }
4533
- }, _overrides[config.input] = {
4534
- props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps.filter(function (prop) {
4535
- return prop !== "required";
4536
- }), plasmicClass.internalVariantProps)), {
4537
- disabled: isDisabled,
4538
- ref: inputRef,
4539
- className: inputClassName,
4540
- style: inputStyle
4541
- })
4542
- }, _overrides);
4543
- return {
4544
- plasmicProps: {
4545
- variants: variants,
4546
- args: args,
4547
- overrides: overrides
4548
- }
4549
- };
4550
- }
4551
-
4552
- function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissable) {
4553
- var _extends2, _overrides;
4554
- if (outerRef === void 0) {
4555
- outerRef = null;
4556
- }
4557
- if (isDismissable === void 0) {
4558
- isDismissable = true;
4559
- }
4560
- var overlayRef = React.useRef(null);
4561
- var onOverlayRef = mergeRefs(overlayRef, outerRef);
4562
- var context = React.useContext(TriggeredOverlayContext);
4563
- if (!context) {
4564
- // If no context, then we are not being correctly used. Either complain, or
4565
- // exit early. It's okay to exit early and break the rules of React hooks
4566
- // because we won't suddenly have the appropriate context anyway for this instance.
4567
- if (PLUME_STRICT_MODE) {
4568
- throw new Error("You can only use a triggered overlay with a TriggeredOverlayContext");
4569
- }
4570
- return getDefaultPlasmicProps(plasmicClass, props);
4571
- }
4572
- var children = props.children;
4573
- var triggerRef = context.triggerRef,
4574
- placement = context.placement,
4575
- overlayMatchTriggerWidth = context.overlayMatchTriggerWidth,
4576
- overlayMinTriggerWidth = context.overlayMinTriggerWidth,
4577
- overlayWidth = context.overlayWidth,
4578
- state = context.state;
4579
- // Measure the width of the trigger to inform the width of the menu (below).
4580
- var _React$useState = React.useState(false),
4581
- isRendered = _React$useState[0],
4582
- setRendered = _React$useState[1];
4583
- var triggerWidth = triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth) ? triggerRef.current.offsetWidth : undefined;
4584
- useIsomorphicLayoutEffect(function () {
4585
- if (!isRendered && triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)) {
4586
- setRendered(true);
4587
- }
4588
- }, [triggerRef, isRendered, overlayMatchTriggerWidth, overlayMinTriggerWidth]);
4589
- var _useOverlay = overlays.useOverlay({
4590
- isOpen: state.isOpen,
4591
- onClose: state.close,
4592
- isDismissable: isDismissable,
4593
- shouldCloseOnBlur: true
4594
- }, overlayRef),
4595
- overlayAriaProps = _useOverlay.overlayProps;
4596
- var _useOverlayPosition = overlays.useOverlayPosition({
4597
- targetRef: triggerRef,
4598
- overlayRef: overlayRef,
4599
- placement: placement != null ? placement : "bottom left",
4600
- shouldFlip: true,
4601
- isOpen: state.isOpen,
4602
- onClose: state.close,
4603
- containerPadding: 0
4604
- }),
4605
- overlayPositionProps = _useOverlayPosition.overlayProps,
4606
- updatePosition = _useOverlayPosition.updatePosition,
4607
- placementAxis = _useOverlayPosition.placement;
4608
- useIsomorphicLayoutEffect(function () {
4609
- if (state.isOpen) {
4610
- requestAnimationFrame(function () {
4611
- updatePosition();
4612
- });
4613
- }
4614
- }, [state.isOpen, updatePosition]);
4615
- var overlayProps = mergeProps({
4616
- style: {
4617
- left: "auto",
4618
- right: "auto",
4619
- top: "auto",
4620
- bottom: "auto",
4621
- position: "absolute",
4622
- width: overlayWidth != null ? overlayWidth : overlayMatchTriggerWidth ? triggerWidth : "auto",
4623
- minWidth: overlayMinTriggerWidth ? triggerWidth : "auto"
4624
- }
4625
- }, overlayAriaProps, overlayPositionProps);
4626
- var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
4627
- def: config.isPlacedTopVariant,
4628
- active: placementAxis === "top"
4629
- }, {
4630
- def: config.isPlacedBottomVariant,
4631
- active: placementAxis === "bottom"
4632
- }, {
4633
- def: config.isPlacedLeftVariant,
4634
- active: placementAxis === "left"
4635
- }, {
4636
- def: config.isPlacedRightVariant,
4637
- active: placementAxis === "right"
4638
- }));
4639
- var canvasCtx = host.usePlasmicCanvasContext();
4640
- var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = canvasCtx ? children : React.createElement(focus.FocusScope, {
4641
- restoreFocus: true
4642
- }, React.createElement(overlays.DismissButton, {
4643
- onDismiss: state.close
4644
- }), children), _extends2));
4645
- var overrides = (_overrides = {}, _overrides[config.root] = {
4646
- props: mergeProps(overlayProps, getStyleProps(props), {
4647
- ref: onOverlayRef
4648
- }),
4649
- wrap: function wrap(root) {
4650
- if (typeof document !== "undefined") {
4651
- return ReactDOM.createPortal(root, document.body);
4652
- } else {
4653
- // Possibly being invoked on the server during SSR; no need to
4654
- // bother with a portal in that case.
4655
- return root;
4656
- }
4657
- }
4658
- }, _overrides);
4659
- return {
4660
- plasmicProps: {
4661
- variants: variants,
4662
- args: args,
4663
- overrides: overrides
4664
- }
4665
- };
4666
- }
4667
-
4668
- Object.defineProperty(exports, 'PlasmicDataSourceContextProvider', {
4669
- enumerable: true,
4670
- get: function () {
4671
- return dataSourcesContext.PlasmicDataSourceContextProvider;
4672
- }
4673
- });
4674
- Object.defineProperty(exports, 'useCurrentUser', {
4675
- enumerable: true,
4676
- get: function () {
4677
- return dataSourcesContext.useCurrentUser;
4678
- }
4679
- });
4680
- exports.get = _get;
4681
- exports.DropdownMenu = DropdownMenu;
4682
- exports.PlasmicHead = PlasmicHead;
4683
- exports.PlasmicIcon = PlasmicIcon;
4684
- exports.PlasmicImg = PlasmicImg;
4685
- exports.PlasmicLink = PlasmicLink;
4686
- exports.PlasmicPageGuard = PlasmicPageGuard;
4687
- exports.PlasmicRootProvider = PlasmicRootProvider;
4688
- exports.PlasmicSlot = PlasmicSlot;
4689
- exports.SelectContext = SelectContext;
4690
- exports.Stack = Stack;
4691
- exports.Trans = Trans;
4692
- exports.TriggeredOverlayContext = TriggeredOverlayContext;
4693
- exports.classNames = classNames;
4694
- exports.createPlasmicElementProxy = createPlasmicElementProxy;
4695
- exports.createUseScreenVariants = createUseScreenVariants;
4696
- exports.deriveRenderOpts = deriveRenderOpts;
4697
- exports.ensureGlobalVariants = ensureGlobalVariants;
4698
- exports.genTranslatableString = genTranslatableString;
4699
- exports.generateStateOnChangeProp = generateStateOnChangeProp;
4700
- exports.generateStateOnChangePropForCodeComponents = generateStateOnChangePropForCodeComponents;
4701
- exports.generateStateValueProp = generateStateValueProp;
4702
- exports.getCurrentInitialValue = getCurrentInitialValue;
4703
- exports.getDataProps = getDataProps;
4704
- exports.getStateCellsInPlasmicProxy = getStateCellsInPlasmicProxy;
4705
- exports.getStateSpecInPlasmicProxy = getStateSpecInPlasmicProxy;
4706
- exports.hasVariant = hasVariant;
4707
- exports.initializeCodeComponentStates = initializeCodeComponentStates;
4708
- exports.initializePlasmicStates = initializePlasmicStates;
4709
- exports.is$StateProxy = is$StateProxy;
4710
- exports.isPlasmicStateProxy = isPlasmicStateProxy;
4711
- exports.makeFragment = makeFragment;
4712
- exports.mergeVariantsWithStates = mergeVariantsWithStates;
4713
- exports.omit = omit;
4714
- exports.pick = pick;
4715
- exports.plasmicHeadMeta = plasmicHeadMeta;
4716
- exports.renderPlasmicSlot = renderPlasmicSlot;
4717
- exports.resetToInitialValue = resetToInitialValue;
4718
- exports.set = set;
4719
- exports.setPlumeStrictMode = setPlumeStrictMode;
4720
- exports.useButton = useButton;
4721
- exports.useCheckbox = useCheckbox;
4722
- exports.useDollarState = useDollarState;
4723
- exports.useIsSSR = useIsSSR;
4724
- exports.useMenu = useMenu;
4725
- exports.useMenuButton = useMenuButton;
4726
- exports.useMenuGroup = useMenuGroup;
4727
- exports.useMenuItem = useMenuItem;
4728
- exports.useSelect = useSelect;
4729
- exports.useSelectOption = useSelectOption;
4730
- exports.useSelectOptionGroup = useSelectOptionGroup;
4731
- exports.useSwitch = useSwitch;
4732
- exports.useTextInput = useTextInput;
4733
- exports.useTrigger = useTrigger;
4734
- exports.useTriggeredOverlay = useTriggeredOverlay;
4735
- exports.withPlasmicPageGuard = withPlasmicPageGuard;
4736
- exports.wrapWithClassName = wrapWithClassName;
4737
- //# sourceMappingURL=react-web.cjs.development.js.map