|
- var __create = Object.create;
- var __defProp = Object.defineProperty;
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
- var __getOwnPropNames = Object.getOwnPropertyNames;
- var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
- var __require = /* @__PURE__ */ ((x2) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(x2, {
- get: (a2, b2) => (typeof require < "u" ? require : a2)[b2]
- }) : x2)(function(x2) {
- if (typeof require < "u") return require.apply(this, arguments);
- throw Error('Dynamic require of "' + x2 + '" is not supported');
- });
- var __esm = (fn, res) => function() {
- return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
- };
- var __commonJS = (cb, mod) => function() {
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
- };
- var __export = (target, all) => {
- for (var name in all)
- __defProp(target, name, { get: all[name], enumerable: !0 });
- }, __copyProps = (to, from, except, desc) => {
- if (from && typeof from == "object" || typeof from == "function")
- for (let key of __getOwnPropNames(from))
- !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
- return to;
- };
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
- // If the importer is in node compatibility mode or this is not an ESM
- // file that has been converted to a CommonJS file using a Babel-
- // compatible transform (i.e. "__esModule" has not been set), then set
- // "default" to the CommonJS "module.exports" for node compatibility.
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
- mod
- )), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
-
- // global-externals:react
- var react_exports = {};
- __export(react_exports, {
- Children: () => Children,
- Component: () => Component,
- Fragment: () => Fragment,
- Profiler: () => Profiler,
- PureComponent: () => PureComponent,
- StrictMode: () => StrictMode,
- Suspense: () => Suspense,
- __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: () => __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
- act: () => act,
- cloneElement: () => cloneElement,
- createContext: () => createContext,
- createElement: () => createElement,
- createFactory: () => createFactory,
- createRef: () => createRef,
- default: () => react_default,
- forwardRef: () => forwardRef,
- isValidElement: () => isValidElement,
- lazy: () => lazy,
- memo: () => memo,
- startTransition: () => startTransition,
- unstable_act: () => unstable_act,
- useCallback: () => useCallback,
- useContext: () => useContext,
- useDebugValue: () => useDebugValue,
- useDeferredValue: () => useDeferredValue,
- useEffect: () => useEffect,
- useId: () => useId,
- useImperativeHandle: () => useImperativeHandle,
- useInsertionEffect: () => useInsertionEffect,
- useLayoutEffect: () => useLayoutEffect,
- useMemo: () => useMemo,
- useReducer: () => useReducer,
- useRef: () => useRef,
- useState: () => useState,
- useSyncExternalStore: () => useSyncExternalStore,
- useTransition: () => useTransition,
- version: () => version
- });
- var react_default, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version, init_react = __esm({
- "global-externals:react"() {
- react_default = __REACT__, { Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_act, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version } = __REACT__;
- }
- });
-
- // ../../node_modules/prop-types/lib/ReactPropTypesSecret.js
- var require_ReactPropTypesSecret = __commonJS({
- "../../node_modules/prop-types/lib/ReactPropTypesSecret.js"(exports, module) {
- "use strict";
- var ReactPropTypesSecret = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
- module.exports = ReactPropTypesSecret;
- }
- });
-
- // ../../node_modules/prop-types/factoryWithThrowingShims.js
- var require_factoryWithThrowingShims = __commonJS({
- "../../node_modules/prop-types/factoryWithThrowingShims.js"(exports, module) {
- "use strict";
- var ReactPropTypesSecret = require_ReactPropTypesSecret();
- function emptyFunction() {
- }
- function emptyFunctionWithReset() {
- }
- emptyFunctionWithReset.resetWarningCache = emptyFunction;
- module.exports = function() {
- function shim(props, propName, componentName, location2, propFullName, secret) {
- if (secret !== ReactPropTypesSecret) {
- var err = new Error(
- "Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
- );
- throw err.name = "Invariant Violation", err;
- }
- }
- shim.isRequired = shim;
- function getShim() {
- return shim;
- }
- var ReactPropTypes = {
- array: shim,
- bigint: shim,
- bool: shim,
- func: shim,
- number: shim,
- object: shim,
- string: shim,
- symbol: shim,
- any: shim,
- arrayOf: getShim,
- element: shim,
- elementType: shim,
- instanceOf: getShim,
- node: shim,
- objectOf: getShim,
- oneOf: getShim,
- oneOfType: getShim,
- shape: getShim,
- exact: getShim,
- checkPropTypes: emptyFunctionWithReset,
- resetWarningCache: emptyFunction
- };
- return ReactPropTypes.PropTypes = ReactPropTypes, ReactPropTypes;
- };
- }
- });
-
- // ../../node_modules/prop-types/index.js
- var require_prop_types = __commonJS({
- "../../node_modules/prop-types/index.js"(exports, module) {
- module.exports = require_factoryWithThrowingShims()();
- var ReactIs, throwOnDirectAccess;
- }
- });
-
- // ../../node_modules/react-fast-compare/index.js
- var require_react_fast_compare = __commonJS({
- "../../node_modules/react-fast-compare/index.js"(exports, module) {
- var hasElementType = typeof Element < "u", hasMap = typeof Map == "function", hasSet = typeof Set == "function", hasArrayBuffer = typeof ArrayBuffer == "function" && !!ArrayBuffer.isView;
- function equal3(a2, b2) {
- if (a2 === b2) return !0;
- if (a2 && b2 && typeof a2 == "object" && typeof b2 == "object") {
- if (a2.constructor !== b2.constructor) return !1;
- var length, i2, keys;
- if (Array.isArray(a2)) {
- if (length = a2.length, length != b2.length) return !1;
- for (i2 = length; i2-- !== 0; )
- if (!equal3(a2[i2], b2[i2])) return !1;
- return !0;
- }
- var it;
- if (hasMap && a2 instanceof Map && b2 instanceof Map) {
- if (a2.size !== b2.size) return !1;
- for (it = a2.entries(); !(i2 = it.next()).done; )
- if (!b2.has(i2.value[0])) return !1;
- for (it = a2.entries(); !(i2 = it.next()).done; )
- if (!equal3(i2.value[1], b2.get(i2.value[0]))) return !1;
- return !0;
- }
- if (hasSet && a2 instanceof Set && b2 instanceof Set) {
- if (a2.size !== b2.size) return !1;
- for (it = a2.entries(); !(i2 = it.next()).done; )
- if (!b2.has(i2.value[0])) return !1;
- return !0;
- }
- if (hasArrayBuffer && ArrayBuffer.isView(a2) && ArrayBuffer.isView(b2)) {
- if (length = a2.length, length != b2.length) return !1;
- for (i2 = length; i2-- !== 0; )
- if (a2[i2] !== b2[i2]) return !1;
- return !0;
- }
- if (a2.constructor === RegExp) return a2.source === b2.source && a2.flags === b2.flags;
- if (a2.valueOf !== Object.prototype.valueOf && typeof a2.valueOf == "function" && typeof b2.valueOf == "function") return a2.valueOf() === b2.valueOf();
- if (a2.toString !== Object.prototype.toString && typeof a2.toString == "function" && typeof b2.toString == "function") return a2.toString() === b2.toString();
- if (keys = Object.keys(a2), length = keys.length, length !== Object.keys(b2).length) return !1;
- for (i2 = length; i2-- !== 0; )
- if (!Object.prototype.hasOwnProperty.call(b2, keys[i2])) return !1;
- if (hasElementType && a2 instanceof Element) return !1;
- for (i2 = length; i2-- !== 0; )
- if (!((keys[i2] === "_owner" || keys[i2] === "__v" || keys[i2] === "__o") && a2.$$typeof) && !equal3(a2[keys[i2]], b2[keys[i2]]))
- return !1;
- return !0;
- }
- return a2 !== a2 && b2 !== b2;
- }
- module.exports = function(a2, b2) {
- try {
- return equal3(a2, b2);
- } catch (error) {
- if ((error.message || "").match(/stack|recursion/i))
- return console.warn("react-fast-compare cannot handle circular refs"), !1;
- throw error;
- }
- };
- }
- });
-
- // ../../node_modules/invariant/browser.js
- var require_browser = __commonJS({
- "../../node_modules/invariant/browser.js"(exports, module) {
- "use strict";
- var invariant = function(condition, format, a2, b2, c2, d2, e2, f2) {
- if (!condition) {
- var error;
- if (format === void 0)
- error = new Error(
- "Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings."
- );
- else {
- var args = [a2, b2, c2, d2, e2, f2], argIndex = 0;
- error = new Error(
- format.replace(/%s/g, function() {
- return args[argIndex++];
- })
- ), error.name = "Invariant Violation";
- }
- throw error.framesToPop = 1, error;
- }
- };
- module.exports = invariant;
- }
- });
-
- // ../../node_modules/shallowequal/index.js
- var require_shallowequal = __commonJS({
- "../../node_modules/shallowequal/index.js"(exports, module) {
- module.exports = function(objA, objB, compare, compareContext) {
- var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
- if (ret !== void 0)
- return !!ret;
- if (objA === objB)
- return !0;
- if (typeof objA != "object" || !objA || typeof objB != "object" || !objB)
- return !1;
- var keysA = Object.keys(objA), keysB = Object.keys(objB);
- if (keysA.length !== keysB.length)
- return !1;
- for (var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB), idx = 0; idx < keysA.length; idx++) {
- var key = keysA[idx];
- if (!bHasOwnProperty(key))
- return !1;
- var valueA = objA[key], valueB = objB[key];
- if (ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0, ret === !1 || ret === void 0 && valueA !== valueB)
- return !1;
- }
- return !0;
- };
- }
- });
-
- // ../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
- var require_use_sync_external_store_shim_production = __commonJS({
- "../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
- "use strict";
- var React = (init_react(), __toCommonJS(react_exports));
- function is4(x2, y2) {
- return x2 === y2 && (x2 !== 0 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
- }
- var objectIs = typeof Object.is == "function" ? Object.is : is4, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
- function useSyncExternalStore$2(subscribe, getSnapshot) {
- var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
- return useLayoutEffect2(
- function() {
- inst.value = value, inst.getSnapshot = getSnapshot, checkIfSnapshotChanged(inst) && forceUpdate({ inst });
- },
- [subscribe, value, getSnapshot]
- ), useEffect2(
- function() {
- return checkIfSnapshotChanged(inst) && forceUpdate({ inst }), subscribe(function() {
- checkIfSnapshotChanged(inst) && forceUpdate({ inst });
- });
- },
- [subscribe]
- ), useDebugValue2(value), value;
- }
- function checkIfSnapshotChanged(inst) {
- var latestGetSnapshot = inst.getSnapshot;
- inst = inst.value;
- try {
- var nextValue = latestGetSnapshot();
- return !objectIs(inst, nextValue);
- } catch {
- return !0;
- }
- }
- function useSyncExternalStore$1(subscribe, getSnapshot) {
- return getSnapshot();
- }
- var shim = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? useSyncExternalStore$1 : useSyncExternalStore$2;
- exports.useSyncExternalStore = React.useSyncExternalStore !== void 0 ? React.useSyncExternalStore : shim;
- }
- });
-
- // ../../node_modules/use-sync-external-store/shim/index.js
- var require_shim = __commonJS({
- "../../node_modules/use-sync-external-store/shim/index.js"(exports, module) {
- "use strict";
- module.exports = require_use_sync_external_store_shim_production();
- }
- });
-
- // ../../node_modules/memoizerific/memoizerific.js
- var require_memoizerific = __commonJS({
- "../../node_modules/memoizerific/memoizerific.js"(exports, module) {
- (function(f2) {
- if (typeof exports == "object" && typeof module < "u")
- module.exports = f2();
- else if (typeof define == "function" && define.amd)
- define([], f2);
- else {
- var g2;
- typeof window < "u" ? g2 = window : typeof global < "u" ? g2 = global : typeof self < "u" ? g2 = self : g2 = this, g2.memoizerific = f2();
- }
- })(function() {
- var define2, module2, exports2;
- return (function e2(t2, n3, r4) {
- function s2(o4, u2) {
- if (!n3[o4]) {
- if (!t2[o4]) {
- var a2 = typeof __require == "function" && __require;
- if (!u2 && a2) return a2(o4, !0);
- if (i2) return i2(o4, !0);
- var f2 = new Error("Cannot find module '" + o4 + "'");
- throw f2.code = "MODULE_NOT_FOUND", f2;
- }
- var l3 = n3[o4] = { exports: {} };
- t2[o4][0].call(l3.exports, function(e3) {
- var n4 = t2[o4][1][e3];
- return s2(n4 || e3);
- }, l3, l3.exports, e2, t2, n3, r4);
- }
- return n3[o4].exports;
- }
- for (var i2 = typeof __require == "function" && __require, o3 = 0; o3 < r4.length; o3++) s2(r4[o3]);
- return s2;
- })({ 1: [function(_dereq_, module3, exports3) {
- module3.exports = function(forceSimilar) {
- if (typeof Map != "function" || forceSimilar) {
- var Similar = _dereq_("./similar");
- return new Similar();
- } else
- return /* @__PURE__ */ new Map();
- };
- }, { "./similar": 2 }], 2: [function(_dereq_, module3, exports3) {
- function Similar() {
- return this.list = [], this.lastItem = void 0, this.size = 0, this;
- }
- Similar.prototype.get = function(key) {
- var index;
- if (this.lastItem && this.isEqual(this.lastItem.key, key))
- return this.lastItem.val;
- if (index = this.indexOf(key), index >= 0)
- return this.lastItem = this.list[index], this.list[index].val;
- }, Similar.prototype.set = function(key, val) {
- var index;
- return this.lastItem && this.isEqual(this.lastItem.key, key) ? (this.lastItem.val = val, this) : (index = this.indexOf(key), index >= 0 ? (this.lastItem = this.list[index], this.list[index].val = val, this) : (this.lastItem = { key, val }, this.list.push(this.lastItem), this.size++, this));
- }, Similar.prototype.delete = function(key) {
- var index;
- if (this.lastItem && this.isEqual(this.lastItem.key, key) && (this.lastItem = void 0), index = this.indexOf(key), index >= 0)
- return this.size--, this.list.splice(index, 1)[0];
- }, Similar.prototype.has = function(key) {
- var index;
- return this.lastItem && this.isEqual(this.lastItem.key, key) ? !0 : (index = this.indexOf(key), index >= 0 ? (this.lastItem = this.list[index], !0) : !1);
- }, Similar.prototype.forEach = function(callback, thisArg) {
- var i2;
- for (i2 = 0; i2 < this.size; i2++)
- callback.call(thisArg || this, this.list[i2].val, this.list[i2].key, this);
- }, Similar.prototype.indexOf = function(key) {
- var i2;
- for (i2 = 0; i2 < this.size; i2++)
- if (this.isEqual(this.list[i2].key, key))
- return i2;
- return -1;
- }, Similar.prototype.isEqual = function(val1, val2) {
- return val1 === val2 || val1 !== val1 && val2 !== val2;
- }, module3.exports = Similar;
- }, {}], 3: [function(_dereq_, module3, exports3) {
- var MapOrSimilar = _dereq_("map-or-similar");
- module3.exports = function(limit) {
- var cache = new MapOrSimilar(!1), lru = [];
- return function(fn) {
- var memoizerific3 = function() {
- var currentCache = cache, newMap, fnResult, argsLengthMinusOne = arguments.length - 1, lruPath = Array(argsLengthMinusOne + 1), isMemoized = !0, i2;
- if ((memoizerific3.numArgs || memoizerific3.numArgs === 0) && memoizerific3.numArgs !== argsLengthMinusOne + 1)
- throw new Error("Memoizerific functions should always be called with the same number of arguments");
- for (i2 = 0; i2 < argsLengthMinusOne; i2++) {
- if (lruPath[i2] = {
- cacheItem: currentCache,
- arg: arguments[i2]
- }, currentCache.has(arguments[i2])) {
- currentCache = currentCache.get(arguments[i2]);
- continue;
- }
- isMemoized = !1, newMap = new MapOrSimilar(!1), currentCache.set(arguments[i2], newMap), currentCache = newMap;
- }
- return isMemoized && (currentCache.has(arguments[argsLengthMinusOne]) ? fnResult = currentCache.get(arguments[argsLengthMinusOne]) : isMemoized = !1), isMemoized || (fnResult = fn.apply(null, arguments), currentCache.set(arguments[argsLengthMinusOne], fnResult)), limit > 0 && (lruPath[argsLengthMinusOne] = {
- cacheItem: currentCache,
- arg: arguments[argsLengthMinusOne]
- }, isMemoized ? moveToMostRecentLru(lru, lruPath) : lru.push(lruPath), lru.length > limit && removeCachedResult(lru.shift())), memoizerific3.wasMemoized = isMemoized, memoizerific3.numArgs = argsLengthMinusOne + 1, fnResult;
- };
- return memoizerific3.limit = limit, memoizerific3.wasMemoized = !1, memoizerific3.cache = cache, memoizerific3.lru = lru, memoizerific3;
- };
- };
- function moveToMostRecentLru(lru, lruPath) {
- var lruLen = lru.length, lruPathLen = lruPath.length, isMatch, i2, ii;
- for (i2 = 0; i2 < lruLen; i2++) {
- for (isMatch = !0, ii = 0; ii < lruPathLen; ii++)
- if (!isEqual2(lru[i2][ii].arg, lruPath[ii].arg)) {
- isMatch = !1;
- break;
- }
- if (isMatch)
- break;
- }
- lru.push(lru.splice(i2, 1)[0]);
- }
- function removeCachedResult(removedLru) {
- var removedLruLen = removedLru.length, currentLru = removedLru[removedLruLen - 1], tmp, i2;
- for (currentLru.cacheItem.delete(currentLru.arg), i2 = removedLruLen - 2; i2 >= 0 && (currentLru = removedLru[i2], tmp = currentLru.cacheItem.get(currentLru.arg), !tmp || !tmp.size); i2--)
- currentLru.cacheItem.delete(currentLru.arg);
- }
- function isEqual2(val1, val2) {
- return val1 === val2 || val1 !== val1 && val2 !== val2;
- }
- }, { "map-or-similar": 1 }] }, {}, [3])(3);
- });
- }
- });
-
- // ../../node_modules/picocolors/picocolors.browser.js
- var require_picocolors_browser = __commonJS({
- "../../node_modules/picocolors/picocolors.browser.js"(exports, module) {
- var x2 = String, create4 = function() {
- return { isColorSupported: !1, reset: x2, bold: x2, dim: x2, italic: x2, underline: x2, inverse: x2, hidden: x2, strikethrough: x2, black: x2, red: x2, green: x2, yellow: x2, blue: x2, magenta: x2, cyan: x2, white: x2, gray: x2, bgBlack: x2, bgRed: x2, bgGreen: x2, bgYellow: x2, bgBlue: x2, bgMagenta: x2, bgCyan: x2, bgWhite: x2, blackBright: x2, redBright: x2, greenBright: x2, yellowBright: x2, blueBright: x2, magentaBright: x2, cyanBright: x2, whiteBright: x2, bgBlackBright: x2, bgRedBright: x2, bgGreenBright: x2, bgYellowBright: x2, bgBlueBright: x2, bgMagentaBright: x2, bgCyanBright: x2, bgWhiteBright: x2 };
- };
- module.exports = create4();
- module.exports.createColors = create4;
- }
- });
-
- // ../../node_modules/scroll/index.js
- var require_scroll = __commonJS({
- "../../node_modules/scroll/index.js"(exports, module) {
- var E_NOSCROLL = new Error("Element already at target scroll position"), E_CANCELLED = new Error("Scroll cancelled"), min = Math.min, ms = Date.now;
- module.exports = {
- left: make("scrollLeft"),
- top: make("scrollTop")
- };
- function make(prop) {
- return function(el, to, opts, cb) {
- opts = opts || {}, typeof opts == "function" && (cb = opts, opts = {}), typeof cb != "function" && (cb = noop5);
- var start = ms(), from = el[prop], ease = opts.ease || inOutSine, duration = isNaN(opts.duration) ? 350 : +opts.duration, cancelled = !1;
- return from === to ? cb(E_NOSCROLL, el[prop]) : requestAnimationFrame(animate), cancel;
- function cancel() {
- cancelled = !0;
- }
- function animate(timestamp) {
- if (cancelled) return cb(E_CANCELLED, el[prop]);
- var now = ms(), time = min(1, (now - start) / duration), eased = ease(time);
- el[prop] = eased * (to - from) + from, time < 1 ? requestAnimationFrame(animate) : requestAnimationFrame(function() {
- cb(null, el[prop]);
- });
- }
- };
- }
- function inOutSine(n3) {
- return 0.5 * (1 - Math.cos(Math.PI * n3));
- }
- function noop5() {
- }
- }
- });
-
- // ../../node_modules/scrollparent/scrollparent.js
- var require_scrollparent = __commonJS({
- "../../node_modules/scrollparent/scrollparent.js"(exports, module) {
- (function(root2, factory) {
- typeof define == "function" && define.amd ? define([], factory) : typeof module == "object" && module.exports ? module.exports = factory() : root2.Scrollparent = factory();
- })(exports, function() {
- function isScrolling(node) {
- var overflow = getComputedStyle(node, null).getPropertyValue("overflow");
- return overflow.indexOf("scroll") > -1 || overflow.indexOf("auto") > -1;
- }
- function scrollParent2(node) {
- if (node instanceof HTMLElement || node instanceof SVGElement) {
- for (var current = node.parentNode; current.parentNode; ) {
- if (isScrolling(current))
- return current;
- current = current.parentNode;
- }
- return document.scrollingElement || document.documentElement;
- }
- }
- return scrollParent2;
- });
- }
- });
-
- // ../../node_modules/react-innertext/index.js
- var require_react_innertext = __commonJS({
- "../../node_modules/react-innertext/index.js"(exports, module) {
- "use strict";
- var hasProps = function(jsx2) {
- return Object.prototype.hasOwnProperty.call(jsx2, "props");
- }, reduceJsxToString = function(previous, current) {
- return previous + innerText2(current);
- }, innerText2 = function(jsx2) {
- return jsx2 === null || typeof jsx2 == "boolean" || typeof jsx2 > "u" ? "" : typeof jsx2 == "number" ? jsx2.toString() : typeof jsx2 == "string" ? jsx2 : Array.isArray(jsx2) ? jsx2.reduce(reduceJsxToString, "") : hasProps(jsx2) && Object.prototype.hasOwnProperty.call(jsx2.props, "children") ? innerText2(jsx2.props.children) : "";
- };
- innerText2.default = innerText2;
- module.exports = innerText2;
- }
- });
-
- // ../../node_modules/deepmerge/dist/cjs.js
- var require_cjs = __commonJS({
- "../../node_modules/deepmerge/dist/cjs.js"(exports, module) {
- "use strict";
- var isMergeableObject = function(value) {
- return isNonNullObject(value) && !isSpecial(value);
- };
- function isNonNullObject(value) {
- return !!value && typeof value == "object";
- }
- function isSpecial(value) {
- var stringValue = Object.prototype.toString.call(value);
- return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
- }
- var canUseSymbol = typeof Symbol == "function" && Symbol.for, REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for("react.element") : 60103;
- function isReactElement(value) {
- return value.$$typeof === REACT_ELEMENT_TYPE;
- }
- function emptyTarget(val) {
- return Array.isArray(val) ? [] : {};
- }
- function cloneUnlessOtherwiseSpecified(value, options2) {
- return options2.clone !== !1 && options2.isMergeableObject(value) ? deepmerge4(emptyTarget(value), value, options2) : value;
- }
- function defaultArrayMerge(target, source, options2) {
- return target.concat(source).map(function(element) {
- return cloneUnlessOtherwiseSpecified(element, options2);
- });
- }
- function getMergeFunction(key, options2) {
- if (!options2.customMerge)
- return deepmerge4;
- var customMerge = options2.customMerge(key);
- return typeof customMerge == "function" ? customMerge : deepmerge4;
- }
- function getEnumerableOwnPropertySymbols(target) {
- return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
- return Object.propertyIsEnumerable.call(target, symbol);
- }) : [];
- }
- function getKeys(target) {
- return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
- }
- function propertyIsOnObject(object, property) {
- try {
- return property in object;
- } catch {
- return !1;
- }
- }
- function propertyIsUnsafe(target, key) {
- return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
- }
- function mergeObject(target, source, options2) {
- var destination = {};
- return options2.isMergeableObject(target) && getKeys(target).forEach(function(key) {
- destination[key] = cloneUnlessOtherwiseSpecified(target[key], options2);
- }), getKeys(source).forEach(function(key) {
- propertyIsUnsafe(target, key) || (propertyIsOnObject(target, key) && options2.isMergeableObject(source[key]) ? destination[key] = getMergeFunction(key, options2)(target[key], source[key], options2) : destination[key] = cloneUnlessOtherwiseSpecified(source[key], options2));
- }), destination;
- }
- function deepmerge4(target, source, options2) {
- options2 = options2 || {}, options2.arrayMerge = options2.arrayMerge || defaultArrayMerge, options2.isMergeableObject = options2.isMergeableObject || isMergeableObject, options2.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
- var sourceIsArray = Array.isArray(source), targetIsArray = Array.isArray(target), sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
- return sourceAndTargetTypesMatch ? sourceIsArray ? options2.arrayMerge(target, source, options2) : mergeObject(target, source, options2) : cloneUnlessOtherwiseSpecified(source, options2);
- }
- deepmerge4.all = function(array, options2) {
- if (!Array.isArray(array))
- throw new Error("first argument should be an array");
- return array.reduce(function(prev, next) {
- return deepmerge4(prev, next, options2);
- }, {});
- };
- var deepmerge_1 = deepmerge4;
- module.exports = deepmerge_1;
- }
- });
-
- // ../../node_modules/downshift/node_modules/react-is/cjs/react-is.production.min.js
- var require_react_is_production_min = __commonJS({
- "../../node_modules/downshift/node_modules/react-is/cjs/react-is.production.min.js"(exports) {
- "use strict";
- var b2 = Symbol.for("react.element"), c2 = Symbol.for("react.portal"), d2 = Symbol.for("react.fragment"), e2 = Symbol.for("react.strict_mode"), f2 = Symbol.for("react.profiler"), g2 = Symbol.for("react.provider"), h2 = Symbol.for("react.context"), k2 = Symbol.for("react.server_context"), l3 = Symbol.for("react.forward_ref"), m2 = Symbol.for("react.suspense"), n3 = Symbol.for("react.suspense_list"), p2 = Symbol.for("react.memo"), q2 = Symbol.for("react.lazy"), t2 = Symbol.for("react.offscreen"), u2;
- u2 = Symbol.for("react.module.reference");
- function v2(a2) {
- if (typeof a2 == "object" && a2 !== null) {
- var r4 = a2.$$typeof;
- switch (r4) {
- case b2:
- switch (a2 = a2.type, a2) {
- case d2:
- case f2:
- case e2:
- case m2:
- case n3:
- return a2;
- default:
- switch (a2 = a2 && a2.$$typeof, a2) {
- case k2:
- case h2:
- case l3:
- case q2:
- case p2:
- case g2:
- return a2;
- default:
- return r4;
- }
- }
- case c2:
- return r4;
- }
- }
- }
- exports.ContextConsumer = h2;
- exports.ContextProvider = g2;
- exports.Element = b2;
- exports.ForwardRef = l3;
- exports.Fragment = d2;
- exports.Lazy = q2;
- exports.Memo = p2;
- exports.Portal = c2;
- exports.Profiler = f2;
- exports.StrictMode = e2;
- exports.Suspense = m2;
- exports.SuspenseList = n3;
- exports.isAsyncMode = function() {
- return !1;
- };
- exports.isConcurrentMode = function() {
- return !1;
- };
- exports.isContextConsumer = function(a2) {
- return v2(a2) === h2;
- };
- exports.isContextProvider = function(a2) {
- return v2(a2) === g2;
- };
- exports.isElement = function(a2) {
- return typeof a2 == "object" && a2 !== null && a2.$$typeof === b2;
- };
- exports.isForwardRef = function(a2) {
- return v2(a2) === l3;
- };
- exports.isFragment = function(a2) {
- return v2(a2) === d2;
- };
- exports.isLazy = function(a2) {
- return v2(a2) === q2;
- };
- exports.isMemo = function(a2) {
- return v2(a2) === p2;
- };
- exports.isPortal = function(a2) {
- return v2(a2) === c2;
- };
- exports.isProfiler = function(a2) {
- return v2(a2) === f2;
- };
- exports.isStrictMode = function(a2) {
- return v2(a2) === e2;
- };
- exports.isSuspense = function(a2) {
- return v2(a2) === m2;
- };
- exports.isSuspenseList = function(a2) {
- return v2(a2) === n3;
- };
- exports.isValidElementType = function(a2) {
- return typeof a2 == "string" || typeof a2 == "function" || a2 === d2 || a2 === f2 || a2 === e2 || a2 === m2 || a2 === n3 || a2 === t2 || typeof a2 == "object" && a2 !== null && (a2.$$typeof === q2 || a2.$$typeof === p2 || a2.$$typeof === g2 || a2.$$typeof === h2 || a2.$$typeof === l3 || a2.$$typeof === u2 || a2.getModuleId !== void 0);
- };
- exports.typeOf = v2;
- }
- });
-
- // ../../node_modules/downshift/node_modules/react-is/index.js
- var require_react_is = __commonJS({
- "../../node_modules/downshift/node_modules/react-is/index.js"(exports, module) {
- "use strict";
- module.exports = require_react_is_production_min();
- }
- });
-
- // ../../node_modules/fuse.js/dist/fuse.js
- var require_fuse = __commonJS({
- "../../node_modules/fuse.js/dist/fuse.js"(exports, module) {
- (function(e2, t2) {
- typeof exports == "object" && typeof module == "object" ? module.exports = t2() : typeof define == "function" && define.amd ? define("Fuse", [], t2) : typeof exports == "object" ? exports.Fuse = t2() : e2.Fuse = t2();
- })(exports, function() {
- return (function(e2) {
- var t2 = {};
- function r4(n3) {
- if (t2[n3]) return t2[n3].exports;
- var o3 = t2[n3] = { i: n3, l: !1, exports: {} };
- return e2[n3].call(o3.exports, o3, o3.exports, r4), o3.l = !0, o3.exports;
- }
- return r4.m = e2, r4.c = t2, r4.d = function(e3, t3, n3) {
- r4.o(e3, t3) || Object.defineProperty(e3, t3, { enumerable: !0, get: n3 });
- }, r4.r = function(e3) {
- typeof Symbol < "u" && Symbol.toStringTag && Object.defineProperty(e3, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e3, "__esModule", { value: !0 });
- }, r4.t = function(e3, t3) {
- if (1 & t3 && (e3 = r4(e3)), 8 & t3 || 4 & t3 && typeof e3 == "object" && e3 && e3.__esModule) return e3;
- var n3 = /* @__PURE__ */ Object.create(null);
- if (r4.r(n3), Object.defineProperty(n3, "default", { enumerable: !0, value: e3 }), 2 & t3 && typeof e3 != "string") for (var o3 in e3) r4.d(n3, o3, function(t4) {
- return e3[t4];
- }.bind(null, o3));
- return n3;
- }, r4.n = function(e3) {
- var t3 = e3 && e3.__esModule ? function() {
- return e3.default;
- } : function() {
- return e3;
- };
- return r4.d(t3, "a", t3), t3;
- }, r4.o = function(e3, t3) {
- return Object.prototype.hasOwnProperty.call(e3, t3);
- }, r4.p = "", r4(r4.s = 0);
- })([function(e2, t2, r4) {
- function n3(e3) {
- return (n3 = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e4) {
- return typeof e4;
- } : function(e4) {
- return e4 && typeof Symbol == "function" && e4.constructor === Symbol && e4 !== Symbol.prototype ? "symbol" : typeof e4;
- })(e3);
- }
- function o3(e3, t3) {
- for (var r5 = 0; r5 < t3.length; r5++) {
- var n4 = t3[r5];
- n4.enumerable = n4.enumerable || !1, n4.configurable = !0, "value" in n4 && (n4.writable = !0), Object.defineProperty(e3, n4.key, n4);
- }
- }
- var i2 = r4(1), a2 = r4(7), s2 = a2.get, c2 = (a2.deepValue, a2.isArray), h2 = (function() {
- function e3(t4, r6) {
- var n4 = r6.location, o4 = n4 === void 0 ? 0 : n4, i3 = r6.distance, a4 = i3 === void 0 ? 100 : i3, c3 = r6.threshold, h3 = c3 === void 0 ? 0.6 : c3, l3 = r6.maxPatternLength, u2 = l3 === void 0 ? 32 : l3, f2 = r6.caseSensitive, v2 = f2 !== void 0 && f2, p2 = r6.tokenSeparator, d2 = p2 === void 0 ? / +/g : p2, g2 = r6.findAllMatches, y2 = g2 !== void 0 && g2, m2 = r6.minMatchCharLength, k2 = m2 === void 0 ? 1 : m2, b2 = r6.id, S2 = b2 === void 0 ? null : b2, x2 = r6.keys, M2 = x2 === void 0 ? [] : x2, _2 = r6.shouldSort, w2 = _2 === void 0 || _2, L3 = r6.getFn, A3 = L3 === void 0 ? s2 : L3, O2 = r6.sortFn, C2 = O2 === void 0 ? function(e4, t5) {
- return e4.score - t5.score;
- } : O2, j2 = r6.tokenize, P3 = j2 !== void 0 && j2, I2 = r6.matchAllTokens, F2 = I2 !== void 0 && I2, T3 = r6.includeMatches, N2 = T3 !== void 0 && T3, z2 = r6.includeScore, E2 = z2 !== void 0 && z2, W2 = r6.verbose, K2 = W2 !== void 0 && W2;
- (function(e4, t5) {
- if (!(e4 instanceof t5)) throw new TypeError("Cannot call a class as a function");
- })(this, e3), this.options = { location: o4, distance: a4, threshold: h3, maxPatternLength: u2, isCaseSensitive: v2, tokenSeparator: d2, findAllMatches: y2, minMatchCharLength: k2, id: S2, keys: M2, includeMatches: N2, includeScore: E2, shouldSort: w2, getFn: A3, sortFn: C2, verbose: K2, tokenize: P3, matchAllTokens: F2 }, this.setCollection(t4), this._processKeys(M2);
- }
- var t3, r5, a3;
- return t3 = e3, (r5 = [{ key: "setCollection", value: function(e4) {
- return this.list = e4, e4;
- } }, { key: "_processKeys", value: function(e4) {
- if (this._keyWeights = {}, this._keyNames = [], e4.length && typeof e4[0] == "string") for (var t4 = 0, r6 = e4.length; t4 < r6; t4 += 1) {
- var n4 = e4[t4];
- this._keyWeights[n4] = 1, this._keyNames.push(n4);
- }
- else {
- for (var o4 = null, i3 = null, a4 = 0, s3 = 0, c3 = e4.length; s3 < c3; s3 += 1) {
- var h3 = e4[s3];
- if (!h3.hasOwnProperty("name")) throw new Error('Missing "name" property in key object');
- var l3 = h3.name;
- if (this._keyNames.push(l3), !h3.hasOwnProperty("weight")) throw new Error('Missing "weight" property in key object');
- var u2 = h3.weight;
- if (u2 < 0 || u2 > 1) throw new Error('"weight" property in key must bein the range of [0, 1)');
- i3 = i3 == null ? u2 : Math.max(i3, u2), o4 = o4 == null ? u2 : Math.min(o4, u2), this._keyWeights[l3] = u2, a4 += u2;
- }
- if (a4 > 1) throw new Error("Total of weights cannot exceed 1");
- }
- } }, { key: "search", value: function(e4) {
- var t4 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { limit: !1 };
- this._log(`---------
- Search pattern: "`.concat(e4, '"'));
- var r6 = this._prepareSearchers(e4), n4 = r6.tokenSearchers, o4 = r6.fullSearcher, i3 = this._search(n4, o4);
- return this._computeScore(i3), this.options.shouldSort && this._sort(i3), t4.limit && typeof t4.limit == "number" && (i3 = i3.slice(0, t4.limit)), this._format(i3);
- } }, { key: "_prepareSearchers", value: function() {
- var e4 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", t4 = [];
- if (this.options.tokenize) for (var r6 = e4.split(this.options.tokenSeparator), n4 = 0, o4 = r6.length; n4 < o4; n4 += 1) t4.push(new i2(r6[n4], this.options));
- return { tokenSearchers: t4, fullSearcher: new i2(e4, this.options) };
- } }, { key: "_search", value: function() {
- var e4 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], t4 = arguments.length > 1 ? arguments[1] : void 0, r6 = this.list, n4 = {}, o4 = [];
- if (typeof r6[0] == "string") {
- for (var i3 = 0, a4 = r6.length; i3 < a4; i3 += 1) this._analyze({ key: "", value: r6[i3], record: i3, index: i3 }, { resultMap: n4, results: o4, tokenSearchers: e4, fullSearcher: t4 });
- return o4;
- }
- for (var s3 = 0, c3 = r6.length; s3 < c3; s3 += 1) for (var h3 = r6[s3], l3 = 0, u2 = this._keyNames.length; l3 < u2; l3 += 1) {
- var f2 = this._keyNames[l3];
- this._analyze({ key: f2, value: this.options.getFn(h3, f2), record: h3, index: s3 }, { resultMap: n4, results: o4, tokenSearchers: e4, fullSearcher: t4 });
- }
- return o4;
- } }, { key: "_analyze", value: function(e4, t4) {
- var r6 = this, n4 = e4.key, o4 = e4.arrayIndex, i3 = o4 === void 0 ? -1 : o4, a4 = e4.value, s3 = e4.record, h3 = e4.index, l3 = t4.tokenSearchers, u2 = l3 === void 0 ? [] : l3, f2 = t4.fullSearcher, v2 = t4.resultMap, p2 = v2 === void 0 ? {} : v2, d2 = t4.results, g2 = d2 === void 0 ? [] : d2;
- (function e5(t5, o5, i4, a5) {
- if (o5 != null) {
- if (typeof o5 == "string") {
- var s4 = !1, h4 = -1, l4 = 0;
- r6._log(`
- Key: `.concat(n4 === "" ? "--" : n4));
- var v3 = f2.search(o5);
- if (r6._log('Full text: "'.concat(o5, '", score: ').concat(v3.score)), r6.options.tokenize) {
- for (var d3 = o5.split(r6.options.tokenSeparator), y2 = d3.length, m2 = [], k2 = 0, b2 = u2.length; k2 < b2; k2 += 1) {
- var S2 = u2[k2];
- r6._log(`
- Pattern: "`.concat(S2.pattern, '"'));
- for (var x2 = !1, M2 = 0; M2 < y2; M2 += 1) {
- var _2 = d3[M2], w2 = S2.search(_2), L3 = {};
- w2.isMatch ? (L3[_2] = w2.score, s4 = !0, x2 = !0, m2.push(w2.score)) : (L3[_2] = 1, r6.options.matchAllTokens || m2.push(1)), r6._log('Token: "'.concat(_2, '", score: ').concat(L3[_2]));
- }
- x2 && (l4 += 1);
- }
- h4 = m2[0];
- for (var A3 = m2.length, O2 = 1; O2 < A3; O2 += 1) h4 += m2[O2];
- h4 /= A3, r6._log("Token score average:", h4);
- }
- var C2 = v3.score;
- h4 > -1 && (C2 = (C2 + h4) / 2), r6._log("Score average:", C2);
- var j2 = !r6.options.tokenize || !r6.options.matchAllTokens || l4 >= u2.length;
- if (r6._log(`
- Check Matches: `.concat(j2)), (s4 || v3.isMatch) && j2) {
- var P3 = { key: n4, arrayIndex: t5, value: o5, score: C2 };
- r6.options.includeMatches && (P3.matchedIndices = v3.matchedIndices);
- var I2 = p2[a5];
- I2 ? I2.output.push(P3) : (p2[a5] = { item: i4, output: [P3] }, g2.push(p2[a5]));
- }
- } else if (c2(o5)) for (var F2 = 0, T3 = o5.length; F2 < T3; F2 += 1) e5(F2, o5[F2], i4, a5);
- }
- })(i3, a4, s3, h3);
- } }, { key: "_computeScore", value: function(e4) {
- this._log(`
-
- Computing score:
- `);
- for (var t4 = this._keyWeights, r6 = !!Object.keys(t4).length, n4 = 0, o4 = e4.length; n4 < o4; n4 += 1) {
- for (var i3 = e4[n4], a4 = i3.output, s3 = a4.length, c3 = 1, h3 = 0; h3 < s3; h3 += 1) {
- var l3 = a4[h3], u2 = l3.key, f2 = r6 ? t4[u2] : 1, v2 = l3.score === 0 && t4 && t4[u2] > 0 ? Number.EPSILON : l3.score;
- c3 *= Math.pow(v2, f2);
- }
- i3.score = c3, this._log(i3);
- }
- } }, { key: "_sort", value: function(e4) {
- this._log(`
-
- Sorting....`), e4.sort(this.options.sortFn);
- } }, { key: "_format", value: function(e4) {
- var t4 = [];
- if (this.options.verbose) {
- var r6 = [];
- this._log(`
-
- Output:
-
- `, JSON.stringify(e4, function(e5, t5) {
- if (n3(t5) === "object" && t5 !== null) {
- if (r6.indexOf(t5) !== -1) return;
- r6.push(t5);
- }
- return t5;
- }, 2)), r6 = null;
- }
- var o4 = [];
- this.options.includeMatches && o4.push(function(e5, t5) {
- var r7 = e5.output;
- t5.matches = [];
- for (var n4 = 0, o5 = r7.length; n4 < o5; n4 += 1) {
- var i4 = r7[n4];
- if (i4.matchedIndices.length !== 0) {
- var a5 = { indices: i4.matchedIndices, value: i4.value };
- i4.key && (a5.key = i4.key), i4.hasOwnProperty("arrayIndex") && i4.arrayIndex > -1 && (a5.arrayIndex = i4.arrayIndex), t5.matches.push(a5);
- }
- }
- }), this.options.includeScore && o4.push(function(e5, t5) {
- t5.score = e5.score;
- });
- for (var i3 = 0, a4 = e4.length; i3 < a4; i3 += 1) {
- var s3 = e4[i3];
- if (this.options.id && (s3.item = this.options.getFn(s3.item, this.options.id)[0]), o4.length) {
- for (var c3 = { item: s3.item }, h3 = 0, l3 = o4.length; h3 < l3; h3 += 1) o4[h3](s3, c3);
- t4.push(c3);
- } else t4.push(s3.item);
- }
- return t4;
- } }, { key: "_log", value: function() {
- var e4;
- this.options.verbose && (e4 = console).log.apply(e4, arguments);
- } }]) && o3(t3.prototype, r5), a3 && o3(t3, a3), e3;
- })();
- e2.exports = h2;
- }, function(e2, t2, r4) {
- function n3(e3, t3) {
- for (var r5 = 0; r5 < t3.length; r5++) {
- var n4 = t3[r5];
- n4.enumerable = n4.enumerable || !1, n4.configurable = !0, "value" in n4 && (n4.writable = !0), Object.defineProperty(e3, n4.key, n4);
- }
- }
- var o3 = r4(2), i2 = r4(3), a2 = r4(6), s2 = (function() {
- function e3(t4, r6) {
- var n4 = r6.location, o4 = n4 === void 0 ? 0 : n4, i3 = r6.distance, s4 = i3 === void 0 ? 100 : i3, c2 = r6.threshold, h2 = c2 === void 0 ? 0.6 : c2, l3 = r6.maxPatternLength, u2 = l3 === void 0 ? 32 : l3, f2 = r6.isCaseSensitive, v2 = f2 !== void 0 && f2, p2 = r6.tokenSeparator, d2 = p2 === void 0 ? / +/g : p2, g2 = r6.findAllMatches, y2 = g2 !== void 0 && g2, m2 = r6.minMatchCharLength, k2 = m2 === void 0 ? 1 : m2, b2 = r6.includeMatches, S2 = b2 !== void 0 && b2;
- (function(e4, t5) {
- if (!(e4 instanceof t5)) throw new TypeError("Cannot call a class as a function");
- })(this, e3), this.options = { location: o4, distance: s4, threshold: h2, maxPatternLength: u2, isCaseSensitive: v2, tokenSeparator: d2, findAllMatches: y2, includeMatches: S2, minMatchCharLength: k2 }, this.pattern = v2 ? t4 : t4.toLowerCase(), this.pattern.length <= u2 && (this.patternAlphabet = a2(this.pattern));
- }
- var t3, r5, s3;
- return t3 = e3, (r5 = [{ key: "search", value: function(e4) {
- var t4 = this.options, r6 = t4.isCaseSensitive, n4 = t4.includeMatches;
- if (r6 || (e4 = e4.toLowerCase()), this.pattern === e4) {
- var a3 = { isMatch: !0, score: 0 };
- return n4 && (a3.matchedIndices = [[0, e4.length - 1]]), a3;
- }
- var s4 = this.options, c2 = s4.maxPatternLength, h2 = s4.tokenSeparator;
- if (this.pattern.length > c2) return o3(e4, this.pattern, h2);
- var l3 = this.options, u2 = l3.location, f2 = l3.distance, v2 = l3.threshold, p2 = l3.findAllMatches, d2 = l3.minMatchCharLength;
- return i2(e4, this.pattern, this.patternAlphabet, { location: u2, distance: f2, threshold: v2, findAllMatches: p2, minMatchCharLength: d2, includeMatches: n4 });
- } }]) && n3(t3.prototype, r5), s3 && n3(t3, s3), e3;
- })();
- e2.exports = s2;
- }, function(e2, t2) {
- var r4 = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
- e2.exports = function(e3, t3) {
- var n3 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : / +/g, o3 = new RegExp(t3.replace(r4, "\\$&").replace(n3, "|")), i2 = e3.match(o3), a2 = !!i2, s2 = [];
- if (a2) for (var c2 = 0, h2 = i2.length; c2 < h2; c2 += 1) {
- var l3 = i2[c2];
- s2.push([e3.indexOf(l3), l3.length - 1]);
- }
- return { score: a2 ? 0.5 : 1, isMatch: a2, matchedIndices: s2 };
- };
- }, function(e2, t2, r4) {
- var n3 = r4(4), o3 = r4(5);
- e2.exports = function(e3, t3, r5, i2) {
- for (var a2 = i2.location, s2 = a2 === void 0 ? 0 : a2, c2 = i2.distance, h2 = c2 === void 0 ? 100 : c2, l3 = i2.threshold, u2 = l3 === void 0 ? 0.6 : l3, f2 = i2.findAllMatches, v2 = f2 !== void 0 && f2, p2 = i2.minMatchCharLength, d2 = p2 === void 0 ? 1 : p2, g2 = i2.includeMatches, y2 = g2 !== void 0 && g2, m2 = s2, k2 = e3.length, b2 = u2, S2 = e3.indexOf(t3, m2), x2 = t3.length, M2 = [], _2 = 0; _2 < k2; _2 += 1) M2[_2] = 0;
- if (S2 !== -1) {
- var w2 = n3(t3, { errors: 0, currentLocation: S2, expectedLocation: m2, distance: h2 });
- if (b2 = Math.min(w2, b2), (S2 = e3.lastIndexOf(t3, m2 + x2)) !== -1) {
- var L3 = n3(t3, { errors: 0, currentLocation: S2, expectedLocation: m2, distance: h2 });
- b2 = Math.min(L3, b2);
- }
- }
- S2 = -1;
- for (var A3 = [], O2 = 1, C2 = x2 + k2, j2 = 1 << (x2 <= 31 ? x2 - 1 : 30), P3 = 0; P3 < x2; P3 += 1) {
- for (var I2 = 0, F2 = C2; I2 < F2; )
- n3(t3, { errors: P3, currentLocation: m2 + F2, expectedLocation: m2, distance: h2 }) <= b2 ? I2 = F2 : C2 = F2, F2 = Math.floor((C2 - I2) / 2 + I2);
- C2 = F2;
- var T3 = Math.max(1, m2 - F2 + 1), N2 = v2 ? k2 : Math.min(m2 + F2, k2) + x2, z2 = Array(N2 + 2);
- z2[N2 + 1] = (1 << P3) - 1;
- for (var E2 = N2; E2 >= T3; E2 -= 1) {
- var W2 = E2 - 1, K2 = r5[e3.charAt(W2)];
- if (K2 && (M2[W2] = 1), z2[E2] = (z2[E2 + 1] << 1 | 1) & K2, P3 !== 0 && (z2[E2] |= (A3[E2 + 1] | A3[E2]) << 1 | 1 | A3[E2 + 1]), z2[E2] & j2 && (O2 = n3(t3, { errors: P3, currentLocation: W2, expectedLocation: m2, distance: h2 })) <= b2) {
- if (b2 = O2, (S2 = W2) <= m2) break;
- T3 = Math.max(1, 2 * m2 - S2);
- }
- }
- if (n3(t3, { errors: P3 + 1, currentLocation: m2, expectedLocation: m2, distance: h2 }) > b2) break;
- A3 = z2;
- }
- var $ = { isMatch: S2 >= 0, score: O2 === 0 ? 1e-3 : O2 };
- return y2 && ($.matchedIndices = o3(M2, d2)), $;
- };
- }, function(e2, t2) {
- e2.exports = function(e3, t3) {
- var r4 = t3.errors, n3 = r4 === void 0 ? 0 : r4, o3 = t3.currentLocation, i2 = o3 === void 0 ? 0 : o3, a2 = t3.expectedLocation, s2 = a2 === void 0 ? 0 : a2, c2 = t3.distance, h2 = c2 === void 0 ? 100 : c2, l3 = n3 / e3.length, u2 = Math.abs(s2 - i2);
- return h2 ? l3 + u2 / h2 : u2 ? 1 : l3;
- };
- }, function(e2, t2) {
- e2.exports = function() {
- for (var e3 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], t3 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1, r4 = [], n3 = -1, o3 = -1, i2 = 0, a2 = e3.length; i2 < a2; i2 += 1) {
- var s2 = e3[i2];
- s2 && n3 === -1 ? n3 = i2 : s2 || n3 === -1 || ((o3 = i2 - 1) - n3 + 1 >= t3 && r4.push([n3, o3]), n3 = -1);
- }
- return e3[i2 - 1] && i2 - n3 >= t3 && r4.push([n3, i2 - 1]), r4;
- };
- }, function(e2, t2) {
- e2.exports = function(e3) {
- for (var t3 = {}, r4 = e3.length, n3 = 0; n3 < r4; n3 += 1) t3[e3.charAt(n3)] = 0;
- for (var o3 = 0; o3 < r4; o3 += 1) t3[e3.charAt(o3)] |= 1 << r4 - o3 - 1;
- return t3;
- };
- }, function(e2, t2) {
- var r4 = function(e3) {
- return Array.isArray ? Array.isArray(e3) : Object.prototype.toString.call(e3) === "[object Array]";
- }, n3 = function(e3) {
- return e3 == null ? "" : (function(e4) {
- if (typeof e4 == "string") return e4;
- var t3 = e4 + "";
- return t3 == "0" && 1 / e4 == -1 / 0 ? "-0" : t3;
- })(e3);
- }, o3 = function(e3) {
- return typeof e3 == "string";
- }, i2 = function(e3) {
- return typeof e3 == "number";
- };
- e2.exports = { get: function(e3, t3) {
- var a2 = [];
- return (function e4(t4, s2) {
- if (s2) {
- var c2 = s2.indexOf("."), h2 = s2, l3 = null;
- c2 !== -1 && (h2 = s2.slice(0, c2), l3 = s2.slice(c2 + 1));
- var u2 = t4[h2];
- if (u2 != null) if (l3 || !o3(u2) && !i2(u2)) if (r4(u2)) for (var f2 = 0, v2 = u2.length; f2 < v2; f2 += 1) e4(u2[f2], l3);
- else l3 && e4(u2, l3);
- else a2.push(n3(u2));
- } else a2.push(t4);
- })(e3, t3), a2;
- }, isArray: r4, isString: o3, isNum: i2, toString: n3 };
- }]);
- });
- }
- });
-
- // ../../node_modules/store2/dist/store2.js
- var require_store2 = __commonJS({
- "../../node_modules/store2/dist/store2.js"(exports, module) {
- (function(window2, define2) {
- var _2 = {
- version: "2.14.4",
- areas: {},
- apis: {},
- nsdelim: ".",
- // utilities
- inherit: function(api, o3) {
- for (var p2 in api)
- o3.hasOwnProperty(p2) || Object.defineProperty(o3, p2, Object.getOwnPropertyDescriptor(api, p2));
- return o3;
- },
- stringify: function(d2, fn) {
- return d2 === void 0 || typeof d2 == "function" ? d2 + "" : JSON.stringify(d2, fn || _2.replace);
- },
- parse: function(s2, fn) {
- try {
- return JSON.parse(s2, fn || _2.revive);
- } catch {
- return s2;
- }
- },
- // extension hooks
- fn: function(name, fn) {
- _2.storeAPI[name] = fn;
- for (var api in _2.apis)
- _2.apis[api][name] = fn;
- },
- get: function(area, key) {
- return area.getItem(key);
- },
- set: function(area, key, string) {
- area.setItem(key, string);
- },
- remove: function(area, key) {
- area.removeItem(key);
- },
- key: function(area, i2) {
- return area.key(i2);
- },
- length: function(area) {
- return area.length;
- },
- clear: function(area) {
- area.clear();
- },
- // core functions
- Store: function(id, area, namespace) {
- var store3 = _2.inherit(_2.storeAPI, function(key, data, overwrite) {
- return arguments.length === 0 ? store3.getAll() : typeof data == "function" ? store3.transact(key, data, overwrite) : data !== void 0 ? store3.set(key, data, overwrite) : typeof key == "string" || typeof key == "number" ? store3.get(key) : typeof key == "function" ? store3.each(key) : key ? store3.setAll(key, data) : store3.clear();
- });
- store3._id = id;
- try {
- var testKey = "__store2_test";
- area.setItem(testKey, "ok"), store3._area = area, area.removeItem(testKey);
- } catch {
- store3._area = _2.storage("fake");
- }
- return store3._ns = namespace || "", _2.areas[id] || (_2.areas[id] = store3._area), _2.apis[store3._ns + store3._id] || (_2.apis[store3._ns + store3._id] = store3), store3;
- },
- storeAPI: {
- // admin functions
- area: function(id, area) {
- var store3 = this[id];
- return (!store3 || !store3.area) && (store3 = _2.Store(id, area, this._ns), this[id] || (this[id] = store3)), store3;
- },
- namespace: function(namespace, singleArea, delim) {
- if (delim = delim || this._delim || _2.nsdelim, !namespace)
- return this._ns ? this._ns.substring(0, this._ns.length - delim.length) : "";
- var ns = namespace, store3 = this[ns];
- if ((!store3 || !store3.namespace) && (store3 = _2.Store(this._id, this._area, this._ns + ns + delim), store3._delim = delim, this[ns] || (this[ns] = store3), !singleArea))
- for (var name in _2.areas)
- store3.area(name, _2.areas[name]);
- return store3;
- },
- isFake: function(force) {
- return force ? (this._real = this._area, this._area = _2.storage("fake")) : force === !1 && (this._area = this._real || this._area), this._area.name === "fake";
- },
- toString: function() {
- return "store" + (this._ns ? "." + this.namespace() : "") + "[" + this._id + "]";
- },
- // storage functions
- has: function(key) {
- return this._area.has ? this._area.has(this._in(key)) : this._in(key) in this._area;
- },
- size: function() {
- return this.keys().length;
- },
- each: function(fn, fill) {
- for (var i2 = 0, m2 = _2.length(this._area); i2 < m2; i2++) {
- var key = this._out(_2.key(this._area, i2));
- if (key !== void 0 && fn.call(this, key, this.get(key), fill) === !1)
- break;
- m2 > _2.length(this._area) && (m2--, i2--);
- }
- return fill || this;
- },
- keys: function(fillList) {
- return this.each(function(k2, v2, list) {
- list.push(k2);
- }, fillList || []);
- },
- get: function(key, alt) {
- var s2 = _2.get(this._area, this._in(key)), fn;
- return typeof alt == "function" && (fn = alt, alt = null), s2 !== null ? _2.parse(s2, fn) : alt ?? s2;
- },
- getAll: function(fillObj) {
- return this.each(function(k2, v2, all) {
- all[k2] = v2;
- }, fillObj || {});
- },
- transact: function(key, fn, alt) {
- var val = this.get(key, alt), ret = fn(val);
- return this.set(key, ret === void 0 ? val : ret), this;
- },
- set: function(key, data, overwrite) {
- var d2 = this.get(key), replacer;
- return d2 != null && overwrite === !1 ? data : (typeof overwrite == "function" && (replacer = overwrite, overwrite = void 0), _2.set(this._area, this._in(key), _2.stringify(data, replacer), overwrite) || d2);
- },
- setAll: function(data, overwrite) {
- var changed, val;
- for (var key in data)
- val = data[key], this.set(key, val, overwrite) !== val && (changed = !0);
- return changed;
- },
- add: function(key, data, replacer) {
- var d2 = this.get(key);
- if (d2 instanceof Array)
- data = d2.concat(data);
- else if (d2 !== null) {
- var type = typeof d2;
- if (type === typeof data && type === "object") {
- for (var k2 in data)
- d2[k2] = data[k2];
- data = d2;
- } else
- data = d2 + data;
- }
- return _2.set(this._area, this._in(key), _2.stringify(data, replacer)), data;
- },
- remove: function(key, alt) {
- var d2 = this.get(key, alt);
- return _2.remove(this._area, this._in(key)), d2;
- },
- clear: function() {
- return this._ns ? this.each(function(k2) {
- _2.remove(this._area, this._in(k2));
- }, 1) : _2.clear(this._area), this;
- },
- clearAll: function() {
- var area = this._area;
- for (var id in _2.areas)
- _2.areas.hasOwnProperty(id) && (this._area = _2.areas[id], this.clear());
- return this._area = area, this;
- },
- // internal use functions
- _in: function(k2) {
- return typeof k2 != "string" && (k2 = _2.stringify(k2)), this._ns ? this._ns + k2 : k2;
- },
- _out: function(k2) {
- return this._ns ? k2 && k2.indexOf(this._ns) === 0 ? k2.substring(this._ns.length) : void 0 : (
- // so each() knows to skip it
- k2
- );
- }
- },
- // end _.storeAPI
- storage: function(name) {
- return _2.inherit(_2.storageAPI, { items: {}, name });
- },
- storageAPI: {
- length: 0,
- has: function(k2) {
- return this.items.hasOwnProperty(k2);
- },
- key: function(i2) {
- var c2 = 0;
- for (var k2 in this.items)
- if (this.has(k2) && i2 === c2++)
- return k2;
- },
- setItem: function(k2, v2) {
- this.has(k2) || this.length++, this.items[k2] = v2;
- },
- removeItem: function(k2) {
- this.has(k2) && (delete this.items[k2], this.length--);
- },
- getItem: function(k2) {
- return this.has(k2) ? this.items[k2] : null;
- },
- clear: function() {
- for (var k2 in this.items)
- this.removeItem(k2);
- }
- }
- // end _.storageAPI
- }, store2 = (
- // safely set this up (throws error in IE10/32bit mode for local files)
- _2.Store("local", (function() {
- try {
- return localStorage;
- } catch {
- }
- })())
- );
- store2.local = store2, store2._ = _2, store2.area("session", (function() {
- try {
- return sessionStorage;
- } catch {
- }
- })()), store2.area("page", _2.storage("page")), typeof define2 == "function" && define2.amd !== void 0 ? define2("store2", [], function() {
- return store2;
- }) : typeof module < "u" && module.exports ? module.exports = store2 : (window2.store && (_2.conflict = window2.store), window2.store = store2);
- })(exports, exports && exports.define);
- }
- });
-
- // src/manager/runtime.tsx
- init_react();
-
- // global-externals:storybook/internal/channels
- var channels_default = __STORYBOOK_CHANNELS__, { Channel, HEARTBEAT_INTERVAL, HEARTBEAT_MAX_LATENCY, PostMessageTransport, WebsocketTransport, createBrowserChannel } = __STORYBOOK_CHANNELS__;
-
- // global-externals:storybook/internal/core-events
- var core_events_default = __STORYBOOK_CORE_EVENTS__, { AI_PROMPT_NUDGE, AI_SETUP_ANALYTICS_REQUEST, AI_SETUP_ANALYTICS_RESPONSE, ARGTYPES_INFO_REQUEST, ARGTYPES_INFO_RESPONSE, CHANNEL_CREATED, CHANNEL_WS_DISCONNECT, CONFIG_ERROR, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, CURRENT_STORY_WAS_SET, DOCS_PREPARED, DOCS_RENDERED, FILE_COMPONENT_SEARCH_REQUEST, FILE_COMPONENT_SEARCH_RESPONSE, FORCE_REMOUNT, FORCE_RE_RENDER, GHOST_STORIES_REQUEST, GHOST_STORIES_RESPONSE, GLOBALS_UPDATED, MANAGER_INERT_ATTRIBUTE_CHANGED, NAVIGATE_URL, OPEN_IN_EDITOR_REQUEST, OPEN_IN_EDITOR_RESPONSE, PLAY_FUNCTION_THREW_EXCEPTION, PRELOAD_ENTRIES, PREVIEW_BUILDER_PROGRESS, PREVIEW_INITIALIZED, PREVIEW_KEYDOWN, REGISTER_SUBSCRIPTION, REQUEST_WHATS_NEW_DATA, RESET_STORY_ARGS, RESULT_WHATS_NEW_DATA, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, SELECT_STORY, SET_CONFIG, SET_CURRENT_STORY, SET_FILTER, SET_GLOBALS, SET_INDEX, SET_STORIES, SET_WHATS_NEW_CACHE, SHARED_STATE_CHANGED, SHARED_STATE_SET, SHARE_ISOLATE_MODE, SIDEBAR_FILTER_CHANGED, STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL, STORY_ARGS_UPDATED, STORY_CHANGED, STORY_ERRORED, STORY_FINISHED, STORY_HOT_UPDATED, STORY_INDEX_INVALIDATED, STORY_MISSING, STORY_PREPARED, STORY_RENDERED, STORY_RENDER_PHASE_CHANGED, STORY_SPECIFIED, STORY_THREW_EXCEPTION, STORY_UNCHANGED, TELEMETRY_ERROR, TOGGLE_WHATS_NEW_NOTIFICATIONS, UNHANDLED_ERRORS_WHILE_PLAYING, UPDATE_GLOBALS, UPDATE_QUERY_PARAMS, UPDATE_STORY_ARGS } = __STORYBOOK_CORE_EVENTS__;
-
- // ../../node_modules/@storybook/global/dist/index.mjs
- var scope = (() => {
- let win;
- return typeof window < "u" ? win = window : typeof globalThis < "u" ? win = globalThis : typeof global < "u" ? win = global : typeof self < "u" ? win = self : win = {}, win;
- })();
-
- // global-externals:@storybook/icons
- var icons_exports = {};
- __export(icons_exports, {
- AccessibilityAltIcon: () => AccessibilityAltIcon,
- AccessibilityIcon: () => AccessibilityIcon,
- AccessibilityIgnoredIcon: () => AccessibilityIgnoredIcon,
- AddIcon: () => AddIcon,
- AdminIcon: () => AdminIcon,
- AlertAltIcon: () => AlertAltIcon,
- AlertIcon: () => AlertIcon,
- AlignLeftIcon: () => AlignLeftIcon,
- AlignRightIcon: () => AlignRightIcon,
- AppleIcon: () => AppleIcon,
- ArrowBottomLeftIcon: () => ArrowBottomLeftIcon,
- ArrowBottomRightIcon: () => ArrowBottomRightIcon,
- ArrowDownIcon: () => ArrowDownIcon,
- ArrowLeftIcon: () => ArrowLeftIcon,
- ArrowRightIcon: () => ArrowRightIcon,
- ArrowSolidDownIcon: () => ArrowSolidDownIcon,
- ArrowSolidLeftIcon: () => ArrowSolidLeftIcon,
- ArrowSolidRightIcon: () => ArrowSolidRightIcon,
- ArrowSolidUpIcon: () => ArrowSolidUpIcon,
- ArrowTopLeftIcon: () => ArrowTopLeftIcon,
- ArrowTopRightIcon: () => ArrowTopRightIcon,
- ArrowUpIcon: () => ArrowUpIcon,
- AzureDevOpsIcon: () => AzureDevOpsIcon,
- BackIcon: () => BackIcon,
- BasketIcon: () => BasketIcon,
- BatchAcceptIcon: () => BatchAcceptIcon,
- BatchDenyIcon: () => BatchDenyIcon,
- BeakerIcon: () => BeakerIcon,
- BellIcon: () => BellIcon,
- BitbucketIcon: () => BitbucketIcon,
- BoldIcon: () => BoldIcon,
- BookIcon: () => BookIcon,
- BookmarkHollowIcon: () => BookmarkHollowIcon,
- BookmarkIcon: () => BookmarkIcon,
- BottomBarIcon: () => BottomBarIcon,
- BottomBarToggleIcon: () => BottomBarToggleIcon,
- BoxIcon: () => BoxIcon,
- BranchIcon: () => BranchIcon,
- BrowserIcon: () => BrowserIcon,
- BugIcon: () => BugIcon,
- ButtonIcon: () => ButtonIcon,
- CPUIcon: () => CPUIcon,
- CalendarIcon: () => CalendarIcon,
- CameraIcon: () => CameraIcon,
- CameraStabilizeIcon: () => CameraStabilizeIcon,
- CategoryIcon: () => CategoryIcon,
- CertificateIcon: () => CertificateIcon,
- ChangedIcon: () => ChangedIcon,
- ChatIcon: () => ChatIcon,
- CheckIcon: () => CheckIcon,
- ChecklistIcon: () => ChecklistIcon,
- ChevronDownIcon: () => ChevronDownIcon,
- ChevronLeftIcon: () => ChevronLeftIcon,
- ChevronRightIcon: () => ChevronRightIcon,
- ChevronSmallDownIcon: () => ChevronSmallDownIcon,
- ChevronSmallLeftIcon: () => ChevronSmallLeftIcon,
- ChevronSmallRightIcon: () => ChevronSmallRightIcon,
- ChevronSmallUpIcon: () => ChevronSmallUpIcon,
- ChevronUpIcon: () => ChevronUpIcon,
- ChromaticIcon: () => ChromaticIcon,
- ChromeIcon: () => ChromeIcon,
- CircleHollowIcon: () => CircleHollowIcon,
- CircleIcon: () => CircleIcon,
- ClearIcon: () => ClearIcon,
- CloseAltIcon: () => CloseAltIcon,
- CloseIcon: () => CloseIcon,
- CloudHollowIcon: () => CloudHollowIcon,
- CloudIcon: () => CloudIcon,
- CogIcon: () => CogIcon,
- CollapseIcon: () => CollapseIcon,
- CommandIcon: () => CommandIcon,
- CommentAddIcon: () => CommentAddIcon,
- CommentIcon: () => CommentIcon,
- CommentsIcon: () => CommentsIcon,
- CommitIcon: () => CommitIcon,
- CompassIcon: () => CompassIcon,
- ComponentDrivenIcon: () => ComponentDrivenIcon,
- ComponentIcon: () => ComponentIcon,
- ContrastIcon: () => ContrastIcon,
- ContrastIgnoredIcon: () => ContrastIgnoredIcon,
- ControlsIcon: () => ControlsIcon,
- CopyIcon: () => CopyIcon,
- CreditIcon: () => CreditIcon,
- CrossIcon: () => CrossIcon,
- DashboardIcon: () => DashboardIcon,
- DatabaseIcon: () => DatabaseIcon,
- DeleteIcon: () => DeleteIcon,
- DiamondIcon: () => DiamondIcon,
- DirectionIcon: () => DirectionIcon,
- DiscordIcon: () => DiscordIcon,
- DocChartIcon: () => DocChartIcon,
- DocListIcon: () => DocListIcon,
- DocumentIcon: () => DocumentIcon,
- DownloadIcon: () => DownloadIcon,
- DragIcon: () => DragIcon,
- EditIcon: () => EditIcon,
- EditorIcon: () => EditorIcon,
- EllipsisIcon: () => EllipsisIcon,
- EmailIcon: () => EmailIcon,
- ExpandAltIcon: () => ExpandAltIcon,
- ExpandIcon: () => ExpandIcon,
- EyeCloseIcon: () => EyeCloseIcon,
- EyeIcon: () => EyeIcon,
- FaceHappyIcon: () => FaceHappyIcon,
- FaceNeutralIcon: () => FaceNeutralIcon,
- FaceSadIcon: () => FaceSadIcon,
- FacebookIcon: () => FacebookIcon,
- FailedIcon: () => FailedIcon,
- FastForwardIcon: () => FastForwardIcon,
- FigmaIcon: () => FigmaIcon,
- FilesIcon: () => FilesIcon,
- FilterIcon: () => FilterIcon,
- FlagIcon: () => FlagIcon,
- FolderIcon: () => FolderIcon,
- FormIcon: () => FormIcon,
- GDriveIcon: () => GDriveIcon,
- GiftIcon: () => GiftIcon,
- GithubIcon: () => GithubIcon,
- GitlabIcon: () => GitlabIcon,
- GlobeIcon: () => GlobeIcon,
- GoogleIcon: () => GoogleIcon,
- GraphBarIcon: () => GraphBarIcon,
- GraphLineIcon: () => GraphLineIcon,
- GraphqlIcon: () => GraphqlIcon,
- GridAltIcon: () => GridAltIcon,
- GridIcon: () => GridIcon,
- GrowIcon: () => GrowIcon,
- HeartHollowIcon: () => HeartHollowIcon,
- HeartIcon: () => HeartIcon,
- HomeIcon: () => HomeIcon,
- HourglassIcon: () => HourglassIcon,
- InfoIcon: () => InfoIcon,
- ItalicIcon: () => ItalicIcon,
- JumpToIcon: () => JumpToIcon,
- KeyIcon: () => KeyIcon,
- LightningIcon: () => LightningIcon,
- LightningOffIcon: () => LightningOffIcon,
- LinkBrokenIcon: () => LinkBrokenIcon,
- LinkIcon: () => LinkIcon,
- LinkedinIcon: () => LinkedinIcon,
- LinuxIcon: () => LinuxIcon,
- ListOrderedIcon: () => ListOrderedIcon,
- ListUnorderedIcon: () => ListUnorderedIcon,
- LocationIcon: () => LocationIcon,
- LockIcon: () => LockIcon,
- MarkdownIcon: () => MarkdownIcon,
- MarkupIcon: () => MarkupIcon,
- MediumIcon: () => MediumIcon,
- MemoryIcon: () => MemoryIcon,
- MenuIcon: () => MenuIcon,
- MergeIcon: () => MergeIcon,
- MirrorIcon: () => MirrorIcon,
- MobileIcon: () => MobileIcon,
- MoonIcon: () => MoonIcon,
- NutIcon: () => NutIcon,
- OutboxIcon: () => OutboxIcon,
- OutlineIcon: () => OutlineIcon,
- PaintBrushAltIcon: () => PaintBrushAltIcon,
- PaintBrushIcon: () => PaintBrushIcon,
- PaperClipIcon: () => PaperClipIcon,
- ParagraphIcon: () => ParagraphIcon,
- PassedIcon: () => PassedIcon,
- PhoneIcon: () => PhoneIcon,
- PhotoDragIcon: () => PhotoDragIcon,
- PhotoIcon: () => PhotoIcon,
- PhotoStabilizeIcon: () => PhotoStabilizeIcon,
- PinAltIcon: () => PinAltIcon,
- PinIcon: () => PinIcon,
- PlayAllHollowIcon: () => PlayAllHollowIcon,
- PlayBackIcon: () => PlayBackIcon,
- PlayHollowIcon: () => PlayHollowIcon,
- PlayIcon: () => PlayIcon,
- PlayNextIcon: () => PlayNextIcon,
- PlusIcon: () => PlusIcon,
- PointerDefaultIcon: () => PointerDefaultIcon,
- PointerHandIcon: () => PointerHandIcon,
- PopOutIcon: () => PopOutIcon,
- PowerIcon: () => PowerIcon,
- PrintIcon: () => PrintIcon,
- ProceedIcon: () => ProceedIcon,
- ProfileIcon: () => ProfileIcon,
- PullRequestIcon: () => PullRequestIcon,
- QuestionIcon: () => QuestionIcon,
- RSSIcon: () => RSSIcon,
- RedirectIcon: () => RedirectIcon,
- ReduxIcon: () => ReduxIcon,
- RefreshIcon: () => RefreshIcon,
- ReplyIcon: () => ReplyIcon,
- RepoIcon: () => RepoIcon,
- RequestChangeIcon: () => RequestChangeIcon,
- RewindIcon: () => RewindIcon,
- RulerIcon: () => RulerIcon,
- SaveIcon: () => SaveIcon,
- SearchIcon: () => SearchIcon,
- ShareAltIcon: () => ShareAltIcon,
- ShareIcon: () => ShareIcon,
- ShieldIcon: () => ShieldIcon,
- SideBySideIcon: () => SideBySideIcon,
- SidebarAltIcon: () => SidebarAltIcon,
- SidebarAltToggleIcon: () => SidebarAltToggleIcon,
- SidebarIcon: () => SidebarIcon,
- SidebarToggleIcon: () => SidebarToggleIcon,
- SortDownIcon: () => SortDownIcon,
- SortUpIcon: () => SortUpIcon,
- SpeakerIcon: () => SpeakerIcon,
- StackedIcon: () => StackedIcon,
- StarHollowIcon: () => StarHollowIcon,
- StarIcon: () => StarIcon,
- StatusFailIcon: () => StatusFailIcon,
- StatusIcon: () => StatusIcon,
- StatusNewIcon: () => StatusNewIcon,
- StatusPassIcon: () => StatusPassIcon,
- StatusWarnIcon: () => StatusWarnIcon,
- StickerIcon: () => StickerIcon,
- StopAltHollowIcon: () => StopAltHollowIcon,
- StopAltIcon: () => StopAltIcon,
- StopIcon: () => StopIcon,
- StorybookIcon: () => StorybookIcon,
- StructureIcon: () => StructureIcon,
- SubtractIcon: () => SubtractIcon,
- SunIcon: () => SunIcon,
- SupportIcon: () => SupportIcon,
- SweepIcon: () => SweepIcon,
- SwitchAltIcon: () => SwitchAltIcon,
- SyncIcon: () => SyncIcon,
- TabletIcon: () => TabletIcon,
- ThumbsUpIcon: () => ThumbsUpIcon,
- TimeIcon: () => TimeIcon,
- TimerIcon: () => TimerIcon,
- TransferIcon: () => TransferIcon,
- TrashIcon: () => TrashIcon,
- TwitterIcon: () => TwitterIcon,
- TypeIcon: () => TypeIcon,
- UbuntuIcon: () => UbuntuIcon,
- UndoIcon: () => UndoIcon,
- UnfoldIcon: () => UnfoldIcon,
- UnlockIcon: () => UnlockIcon,
- UnpinIcon: () => UnpinIcon,
- UploadIcon: () => UploadIcon,
- UserAddIcon: () => UserAddIcon,
- UserAltIcon: () => UserAltIcon,
- UserIcon: () => UserIcon,
- UsersIcon: () => UsersIcon,
- VSCodeIcon: () => VSCodeIcon,
- VerifiedIcon: () => VerifiedIcon,
- VideoIcon: () => VideoIcon,
- WandIcon: () => WandIcon,
- WatchIcon: () => WatchIcon,
- WindowsIcon: () => WindowsIcon,
- WrenchIcon: () => WrenchIcon,
- XIcon: () => XIcon,
- YoutubeIcon: () => YoutubeIcon,
- ZoomIcon: () => ZoomIcon,
- ZoomOutIcon: () => ZoomOutIcon,
- ZoomResetIcon: () => ZoomResetIcon,
- default: () => icons_default,
- iconList: () => iconList
- });
- var icons_default = __STORYBOOK_ICONS__, { AccessibilityAltIcon, AccessibilityIcon, AccessibilityIgnoredIcon, AddIcon, AdminIcon, AlertAltIcon, AlertIcon, AlignLeftIcon, AlignRightIcon, AppleIcon, ArrowBottomLeftIcon, ArrowBottomRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowSolidDownIcon, ArrowSolidLeftIcon, ArrowSolidRightIcon, ArrowSolidUpIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowUpIcon, AzureDevOpsIcon, BackIcon, BasketIcon, BatchAcceptIcon, BatchDenyIcon, BeakerIcon, BellIcon, BitbucketIcon, BoldIcon, BookIcon, BookmarkHollowIcon, BookmarkIcon, BottomBarIcon, BottomBarToggleIcon, BoxIcon, BranchIcon, BrowserIcon, BugIcon, ButtonIcon, CPUIcon, CalendarIcon, CameraIcon, CameraStabilizeIcon, CategoryIcon, CertificateIcon, ChangedIcon, ChatIcon, CheckIcon, ChecklistIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronSmallDownIcon, ChevronSmallLeftIcon, ChevronSmallRightIcon, ChevronSmallUpIcon, ChevronUpIcon, ChromaticIcon, ChromeIcon, CircleHollowIcon, CircleIcon, ClearIcon, CloseAltIcon, CloseIcon, CloudHollowIcon, CloudIcon, CogIcon, CollapseIcon, CommandIcon, CommentAddIcon, CommentIcon, CommentsIcon, CommitIcon, CompassIcon, ComponentDrivenIcon, ComponentIcon, ContrastIcon, ContrastIgnoredIcon, ControlsIcon, CopyIcon, CreditIcon, CrossIcon, DashboardIcon, DatabaseIcon, DeleteIcon, DiamondIcon, DirectionIcon, DiscordIcon, DocChartIcon, DocListIcon, DocumentIcon, DownloadIcon, DragIcon, EditIcon, EditorIcon, EllipsisIcon, EmailIcon, ExpandAltIcon, ExpandIcon, EyeCloseIcon, EyeIcon, FaceHappyIcon, FaceNeutralIcon, FaceSadIcon, FacebookIcon, FailedIcon, FastForwardIcon, FigmaIcon, FilesIcon, FilterIcon, FlagIcon, FolderIcon, FormIcon, GDriveIcon, GiftIcon, GithubIcon, GitlabIcon, GlobeIcon, GoogleIcon, GraphBarIcon, GraphLineIcon, GraphqlIcon, GridAltIcon, GridIcon, GrowIcon, HeartHollowIcon, HeartIcon, HomeIcon, HourglassIcon, InfoIcon, ItalicIcon, JumpToIcon, KeyIcon, LightningIcon, LightningOffIcon, LinkBrokenIcon, LinkIcon, LinkedinIcon, LinuxIcon, ListOrderedIcon, ListUnorderedIcon, LocationIcon, LockIcon, MarkdownIcon, MarkupIcon, MediumIcon, MemoryIcon, MenuIcon, MergeIcon, MirrorIcon, MobileIcon, MoonIcon, NutIcon, OutboxIcon, OutlineIcon, PaintBrushAltIcon, PaintBrushIcon, PaperClipIcon, ParagraphIcon, PassedIcon, PhoneIcon, PhotoDragIcon, PhotoIcon, PhotoStabilizeIcon, PinAltIcon, PinIcon, PlayAllHollowIcon, PlayBackIcon, PlayHollowIcon, PlayIcon, PlayNextIcon, PlusIcon, PointerDefaultIcon, PointerHandIcon, PopOutIcon, PowerIcon, PrintIcon, ProceedIcon, ProfileIcon, PullRequestIcon, QuestionIcon, RSSIcon, RedirectIcon, ReduxIcon, RefreshIcon, ReplyIcon, RepoIcon, RequestChangeIcon, RewindIcon, RulerIcon, SaveIcon, SearchIcon, ShareAltIcon, ShareIcon, ShieldIcon, SideBySideIcon, SidebarAltIcon, SidebarAltToggleIcon, SidebarIcon, SidebarToggleIcon, SortDownIcon, SortUpIcon, SpeakerIcon, StackedIcon, StarHollowIcon, StarIcon, StatusFailIcon, StatusIcon, StatusNewIcon, StatusPassIcon, StatusWarnIcon, StickerIcon, StopAltHollowIcon, StopAltIcon, StopIcon, StorybookIcon, StructureIcon, SubtractIcon, SunIcon, SupportIcon, SweepIcon, SwitchAltIcon, SyncIcon, TabletIcon, ThumbsUpIcon, TimeIcon, TimerIcon, TransferIcon, TrashIcon, TwitterIcon, TypeIcon, UbuntuIcon, UndoIcon, UnfoldIcon, UnlockIcon, UnpinIcon, UploadIcon, UserAddIcon, UserAltIcon, UserIcon, UsersIcon, VSCodeIcon, VerifiedIcon, VideoIcon, WandIcon, WatchIcon, WindowsIcon, WrenchIcon, XIcon, YoutubeIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon, iconList } = __STORYBOOK_ICONS__;
-
- // global-externals:storybook/manager-api
- var manager_api_default = __STORYBOOK_API__, { ActiveTabs, Consumer, ManagerContext, Provider, RequestResponseError, Tag, addons, combineParameters, controlOrMetaKey, controlOrMetaSymbol, eventMatchesShortcut, eventToShortcut, experimental_MockUniversalStore, experimental_UniversalStore, experimental_getStatusStore, experimental_getTestProviderStore, experimental_requestResponse, experimental_useStatusStore, experimental_useTestProviderStore, experimental_useUniversalStore, internal_checklistStore, internal_fullStatusStore, internal_fullTestProviderStore, internal_universalChecklistStore, internal_universalStatusStore, internal_universalTestProviderStore, isMacLike, isShortcutTaken, keyToSymbol, merge, mockChannel, optionOrAltSymbol, shortcutMatchesShortcut, shortcutToAriaKeyshortcuts, shortcutToHumanString, types, useAddonState, useArgTypes, useArgs, useChannel, useGlobalTypes, useGlobals, useParameter, useSharedState, useStoryPrepared, useStorybookApi, useStorybookState } = __STORYBOOK_API__;
-
- // global-externals:storybook/theming
- var theming_default = __STORYBOOK_THEMING__, { CacheProvider, ClassNames, Global, ThemeProvider, background, color, convert, create, createCache, createGlobal, createReset, css, darken, ensure, getPreferredColorScheme, ignoreSsrWarning, isPropValid, jsx, keyframes, lighten, srOnlyStyles, styled, themes, tokens, typography, useTheme, withTheme } = __STORYBOOK_THEMING__;
-
- // src/toolbar/components/ToolbarManager.tsx
- init_react();
-
- // global-externals:storybook/internal/components
- var components_default = __STORYBOOK_COMPONENTS__, { A, AbstractToolbar, ActionBar, ActionList, AddonPanel, Badge, Bar, Blockquote, Button, Card, ClipboardCode, Code, Collapsible, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link, ListItem, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, PopoverProvider, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, StatelessTabPanel, StatelessTabsView, StorybookIcon: StorybookIcon2, StorybookLogo, SyntaxHighlighter, TT, TabBar, TabButton, TabList, TabPanel, TabWrapper, Table, Tabs, TabsState, TabsView, ToggleButton, Toolbar, Tooltip, TooltipLinkList, TooltipMessage, TooltipNote, TooltipProvider, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset } = __STORYBOOK_COMPONENTS__;
-
- // src/toolbar/utils/normalize-toolbar-arg-type.ts
- var defaultItemValues = {
- type: "item",
- value: ""
- }, normalizeArgType = (key, argType) => {
- let toolbar = argType.toolbar;
- return toolbar ? {
- ...argType,
- name: argType.name || key,
- description: argType.description || key,
- toolbar: {
- ...argType.toolbar,
- items: toolbar.items.map((_item) => {
- let item = typeof _item == "string" ? { value: _item, title: _item } : _item;
- return item.type === "reset" && toolbar.icon && (item.icon = toolbar.icon, item.hideIcon = !0, item.value = void 0), { ...defaultItemValues, ...item };
- })
- }
- } : null;
- };
-
- // src/toolbar/components/ToolbarMenuSelect.tsx
- init_react();
-
- // src/components/components/icon/icon.tsx
- init_react();
-
- // global-externals:storybook/internal/client-logger
- var client_logger_default = __STORYBOOK_CLIENT_LOGGER__, { deprecate, logger, once, pretty } = __STORYBOOK_CLIENT_LOGGER__;
-
- // src/components/components/icon/icon.tsx
- var NEW_ICON_MAP = icons_exports, Svg = styled.svg`
- display: inline-block;
- shape-rendering: inherit;
- vertical-align: middle;
- fill: currentColor;
- path {
- fill: currentColor;
- }
- `, Icons = ({
- icon,
- useSymbol,
- __suppressDeprecationWarning = !1,
- ...props
- }) => {
- __suppressDeprecationWarning || deprecate(
- `Use of the deprecated Icons ${`(${icon})` || ""} component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated`
- );
- let findIcon = icons[icon] || null;
- if (!findIcon)
- return logger.warn(
- `Use of an unknown prop ${`(${icon})` || ""} in the Icons component. The Icons component is deprecated. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated`
- ), null;
- let Icon = NEW_ICON_MAP[findIcon];
- return react_default.createElement(Icon, { ...props });
- }, Symbols = memo(function({ icons: keys = Object.keys(icons) }) {
- return react_default.createElement(
- Svg,
- {
- viewBox: "0 0 14 14",
- style: { position: "absolute", width: 0, height: 0 },
- "data-chromatic": "ignore"
- },
- keys.map((key) => react_default.createElement("symbol", { id: `icon--${key}`, key }, icons[key]))
- );
- }), icons = {
- user: "UserIcon",
- useralt: "UserAltIcon",
- useradd: "UserAddIcon",
- users: "UsersIcon",
- profile: "ProfileIcon",
- facehappy: "FaceHappyIcon",
- faceneutral: "FaceNeutralIcon",
- facesad: "FaceSadIcon",
- accessibility: "AccessibilityIcon",
- accessibilityalt: "AccessibilityAltIcon",
- arrowup: "ChevronUpIcon",
- arrowdown: "ChevronDownIcon",
- arrowleft: "ChevronLeftIcon",
- arrowright: "ChevronRightIcon",
- arrowupalt: "ArrowUpIcon",
- arrowdownalt: "ArrowDownIcon",
- arrowleftalt: "ArrowLeftIcon",
- arrowrightalt: "ArrowRightIcon",
- expandalt: "ExpandAltIcon",
- collapse: "CollapseIcon",
- expand: "ExpandIcon",
- unfold: "UnfoldIcon",
- transfer: "TransferIcon",
- redirect: "RedirectIcon",
- undo: "UndoIcon",
- reply: "ReplyIcon",
- sync: "SyncIcon",
- upload: "UploadIcon",
- download: "DownloadIcon",
- back: "BackIcon",
- proceed: "ProceedIcon",
- refresh: "RefreshIcon",
- globe: "GlobeIcon",
- compass: "CompassIcon",
- location: "LocationIcon",
- pin: "PinIcon",
- time: "TimeIcon",
- dashboard: "DashboardIcon",
- timer: "TimerIcon",
- home: "HomeIcon",
- admin: "AdminIcon",
- info: "InfoIcon",
- question: "QuestionIcon",
- support: "SupportIcon",
- alert: "AlertIcon",
- email: "EmailIcon",
- phone: "PhoneIcon",
- link: "LinkIcon",
- unlink: "LinkBrokenIcon",
- bell: "BellIcon",
- rss: "RSSIcon",
- sharealt: "ShareAltIcon",
- share: "ShareIcon",
- circle: "CircleIcon",
- circlehollow: "CircleHollowIcon",
- bookmarkhollow: "BookmarkHollowIcon",
- bookmark: "BookmarkIcon",
- hearthollow: "HeartHollowIcon",
- heart: "HeartIcon",
- starhollow: "StarHollowIcon",
- star: "StarIcon",
- certificate: "CertificateIcon",
- verified: "VerifiedIcon",
- thumbsup: "ThumbsUpIcon",
- shield: "ShieldIcon",
- basket: "BasketIcon",
- beaker: "BeakerIcon",
- hourglass: "HourglassIcon",
- flag: "FlagIcon",
- cloudhollow: "CloudHollowIcon",
- edit: "EditIcon",
- cog: "CogIcon",
- nut: "NutIcon",
- wrench: "WrenchIcon",
- ellipsis: "EllipsisIcon",
- check: "CheckIcon",
- form: "FormIcon",
- batchdeny: "BatchDenyIcon",
- batchaccept: "BatchAcceptIcon",
- controls: "ControlsIcon",
- plus: "PlusIcon",
- closeAlt: "CloseAltIcon",
- cross: "CrossIcon",
- trash: "TrashIcon",
- pinalt: "PinAltIcon",
- unpin: "UnpinIcon",
- add: "AddIcon",
- subtract: "SubtractIcon",
- close: "CloseIcon",
- delete: "DeleteIcon",
- passed: "PassedIcon",
- changed: "ChangedIcon",
- failed: "FailedIcon",
- clear: "ClearIcon",
- comment: "CommentIcon",
- commentadd: "CommentAddIcon",
- requestchange: "RequestChangeIcon",
- comments: "CommentsIcon",
- lock: "LockIcon",
- unlock: "UnlockIcon",
- key: "KeyIcon",
- outbox: "OutboxIcon",
- credit: "CreditIcon",
- button: "ButtonIcon",
- type: "TypeIcon",
- pointerdefault: "PointerDefaultIcon",
- pointerhand: "PointerHandIcon",
- browser: "BrowserIcon",
- tablet: "TabletIcon",
- mobile: "MobileIcon",
- watch: "WatchIcon",
- sidebar: "SidebarIcon",
- sidebaralt: "SidebarAltIcon",
- sidebaralttoggle: "SidebarAltToggleIcon",
- sidebartoggle: "SidebarToggleIcon",
- bottombar: "BottomBarIcon",
- bottombartoggle: "BottomBarToggleIcon",
- cpu: "CPUIcon",
- database: "DatabaseIcon",
- memory: "MemoryIcon",
- structure: "StructureIcon",
- box: "BoxIcon",
- power: "PowerIcon",
- photo: "PhotoIcon",
- component: "ComponentIcon",
- grid: "GridIcon",
- outline: "OutlineIcon",
- photodrag: "PhotoDragIcon",
- search: "SearchIcon",
- zoom: "ZoomIcon",
- zoomout: "ZoomOutIcon",
- zoomreset: "ZoomResetIcon",
- eye: "EyeIcon",
- eyeclose: "EyeCloseIcon",
- lightning: "LightningIcon",
- lightningoff: "LightningOffIcon",
- contrast: "ContrastIcon",
- switchalt: "SwitchAltIcon",
- mirror: "MirrorIcon",
- grow: "GrowIcon",
- paintbrush: "PaintBrushIcon",
- ruler: "RulerIcon",
- stop: "StopIcon",
- camera: "CameraIcon",
- video: "VideoIcon",
- speaker: "SpeakerIcon",
- play: "PlayIcon",
- playback: "PlayBackIcon",
- playnext: "PlayNextIcon",
- rewind: "RewindIcon",
- fastforward: "FastForwardIcon",
- stopalt: "StopAltIcon",
- sidebyside: "SideBySideIcon",
- stacked: "StackedIcon",
- sun: "SunIcon",
- moon: "MoonIcon",
- book: "BookIcon",
- document: "DocumentIcon",
- copy: "CopyIcon",
- category: "CategoryIcon",
- folder: "FolderIcon",
- print: "PrintIcon",
- graphline: "GraphLineIcon",
- calendar: "CalendarIcon",
- graphbar: "GraphBarIcon",
- menu: "MenuIcon",
- menualt: "MenuIcon",
- filter: "FilterIcon",
- docchart: "DocChartIcon",
- doclist: "DocListIcon",
- markup: "MarkupIcon",
- bold: "BoldIcon",
- paperclip: "PaperClipIcon",
- listordered: "ListOrderedIcon",
- listunordered: "ListUnorderedIcon",
- paragraph: "ParagraphIcon",
- markdown: "MarkdownIcon",
- repository: "RepoIcon",
- commit: "CommitIcon",
- branch: "BranchIcon",
- pullrequest: "PullRequestIcon",
- merge: "MergeIcon",
- apple: "AppleIcon",
- linux: "LinuxIcon",
- ubuntu: "UbuntuIcon",
- windows: "WindowsIcon",
- storybook: "StorybookIcon",
- azuredevops: "AzureDevOpsIcon",
- bitbucket: "BitbucketIcon",
- chrome: "ChromeIcon",
- chromatic: "ChromaticIcon",
- componentdriven: "ComponentDrivenIcon",
- discord: "DiscordIcon",
- facebook: "FacebookIcon",
- figma: "FigmaIcon",
- gdrive: "GDriveIcon",
- github: "GithubIcon",
- gitlab: "GitlabIcon",
- google: "GoogleIcon",
- graphql: "GraphqlIcon",
- medium: "MediumIcon",
- redux: "ReduxIcon",
- twitter: "TwitterIcon",
- youtube: "YoutubeIcon",
- vscode: "VSCodeIcon"
- };
-
- // src/toolbar/utils/get-selected.ts
- var getSelectedItem = ({ currentValue, items }) => items.find((item) => item.value === currentValue && item.type !== "reset");
-
- // src/toolbar/constants.ts
- var TOOLBAR_ID = "toolbar";
-
- // src/toolbar/utils/register-shortcuts.ts
- var registerShortcuts = async (api, id, shortcuts) => {
- shortcuts.next && await api.setAddonShortcut(TOOLBAR_ID, {
- label: shortcuts.next.label,
- defaultShortcut: shortcuts.next.keys,
- actionName: `${id}:next`,
- action: shortcuts.next.action
- }), shortcuts.previous && await api.setAddonShortcut(TOOLBAR_ID, {
- label: shortcuts.previous.label,
- defaultShortcut: shortcuts.previous.keys,
- actionName: `${id}:previous`,
- action: shortcuts.previous.action
- }), shortcuts.reset && await api.setAddonShortcut(TOOLBAR_ID, {
- label: shortcuts.reset.label,
- defaultShortcut: shortcuts.reset.keys,
- actionName: `${id}:reset`,
- action: shortcuts.reset.action
- });
- };
-
- // src/toolbar/components/ToolbarMenuSelect.tsx
- var ToolbarMenuItemContainer = styled("div")({
- width: "100%",
- display: "flex",
- alignItems: "center",
- gap: 8
- }), ToolbarMenuItemMiddle = styled("div")({
- flex: 1
- }), ToolbarMenuSelect = ({
- id,
- name,
- description,
- toolbar: {
- icon: _icon,
- items,
- title: _title,
- preventDynamicIcon,
- dynamicTitle = !0,
- shortcuts
- }
- }) => {
- let api = useStorybookApi(), [globals, updateGlobals, storyGlobals] = useGlobals(), currentValue = globals[id], isOverridden = id in storyGlobals, icon = _icon, title2 = _title;
- preventDynamicIcon || (icon = getSelectedItem({ currentValue, items })?.icon || icon), dynamicTitle && (title2 = getSelectedItem({ currentValue, items })?.title || title2), !title2 && !icon && console.warn(`Toolbar '${name}' has no title or icon`);
- let resetItem = items.find((item) => item.type === "reset"), resetLabel = resetItem?.title, options2 = react_default.useMemo(
- () => items.filter((item) => item.type === "item").map((item) => {
- let itemTitle = item.title ?? item.value ?? "Untitled", iconComponent = !item.hideIcon && item.icon ? react_default.createElement(Icons, { icon: item.icon, __suppressDeprecationWarning: !0 }) : void 0;
- return item.right ? {
- title: itemTitle,
- value: item.value,
- children: react_default.createElement(ToolbarMenuItemContainer, null, iconComponent, react_default.createElement(ToolbarMenuItemMiddle, null, item.title ?? item.value), item.right)
- } : {
- title: itemTitle,
- value: item.value,
- icon: iconComponent
- };
- }),
- [items]
- );
- react_default.useEffect(() => {
- if (shortcuts) {
- let length = options2.length;
- registerShortcuts(api, id, {
- next: {
- ...shortcuts.next,
- action: () => {
- let idx = options2.findIndex((i2) => i2.value === globals[id]), nextIdx = idx < 0 ? 0 : (idx + 1) % length;
- updateGlobals({ [id]: options2[nextIdx].value });
- }
- },
- previous: {
- ...shortcuts.previous,
- action: () => {
- let idx = options2.findIndex((i2) => i2.value === globals[id]), previousIdx = idx < 0 ? length - 1 : (idx + length - 1) % length;
- updateGlobals({ [id]: options2[previousIdx].value });
- }
- },
- reset: {
- ...shortcuts.reset,
- action: () => {
- updateGlobals({ [id]: void 0 });
- }
- }
- });
- }
- }, [api, id, shortcuts, globals, options2, updateGlobals]);
- let ariaLabel = description || title2 || name || id;
- return react_default.createElement(
- Select,
- {
- defaultOptions: [currentValue],
- options: options2,
- disabled: isOverridden,
- ariaLabel,
- tooltip: ariaLabel,
- resetLabel,
- onReset: resetItem ? () => updateGlobals({ [id]: resetItem?.value }) : void 0,
- onSelect: (selected) => updateGlobals({ [id]: selected }),
- icon: icon && react_default.createElement(Icons, { icon, __suppressDeprecationWarning: !0 }),
- showSelectedOptionTitle: dynamicTitle
- },
- title2
- );
- };
-
- // src/toolbar/components/ToolbarManager.tsx
- var ToolbarManager = () => {
- let globalTypes = useGlobalTypes();
- return Object.keys(globalTypes).some((id) => !!globalTypes[id].toolbar) ? react_default.createElement(react_default.Fragment, null, react_default.createElement(Separator, null), Object.keys(globalTypes).map((id) => {
- let normalizedArgType = normalizeArgType(id, globalTypes[id]);
- return normalizedArgType && react_default.createElement(ToolbarMenuSelect, { key: id, id, ...normalizedArgType });
- })) : null;
- };
-
- // src/manager/index.tsx
- init_react();
-
- // global-externals:react-dom/client
- var client_default = __REACT_DOM_CLIENT__, { createRoot, hydrateRoot } = __REACT_DOM_CLIENT__;
-
- // global-externals:storybook/internal/manager-errors
- var manager_errors_default = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__, { Category, ProviderDoesNotExtendBaseProviderError, StatusTypeIdMismatchError, UncaughtManagerError } = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__;
-
- // global-externals:storybook/internal/router
- var router_default = __STORYBOOK_ROUTER__, { BaseLocationProvider, DEEPLY_EQUAL, Link: Link2, Location, LocationProvider, Match, MemoryRouter, Route, buildArgsParam, deepDiff, getMatch, parsePath, queryFromLocation, stringifyQuery, useNavigate } = __STORYBOOK_ROUTER__;
-
- // ../../node_modules/react-helmet-async/lib/index.module.js
- init_react();
- var import_prop_types = __toESM(require_prop_types()), import_react_fast_compare = __toESM(require_react_fast_compare()), import_invariant = __toESM(require_browser()), import_shallowequal = __toESM(require_shallowequal());
- function a() {
- return a = Object.assign || function(t2) {
- for (var e2 = 1; e2 < arguments.length; e2++) {
- var r4 = arguments[e2];
- for (var n3 in r4) Object.prototype.hasOwnProperty.call(r4, n3) && (t2[n3] = r4[n3]);
- }
- return t2;
- }, a.apply(this, arguments);
- }
- function s(t2, e2) {
- t2.prototype = Object.create(e2.prototype), t2.prototype.constructor = t2, c(t2, e2);
- }
- function c(t2, e2) {
- return c = Object.setPrototypeOf || function(t3, e3) {
- return t3.__proto__ = e3, t3;
- }, c(t2, e2);
- }
- function u(t2, e2) {
- if (t2 == null) return {};
- var r4, n3, i2 = {}, o3 = Object.keys(t2);
- for (n3 = 0; n3 < o3.length; n3++) e2.indexOf(r4 = o3[n3]) >= 0 || (i2[r4] = t2[r4]);
- return i2;
- }
- var l = { BASE: "base", BODY: "body", HEAD: "head", HTML: "html", LINK: "link", META: "meta", NOSCRIPT: "noscript", SCRIPT: "script", STYLE: "style", TITLE: "title", FRAGMENT: "Symbol(react.fragment)" }, p = { rel: ["amphtml", "canonical", "alternate"] }, f = { type: ["application/ld+json"] }, d = { charset: "", name: ["robots", "description"], property: ["og:type", "og:title", "og:url", "og:image", "og:image:alt", "og:description", "twitter:url", "twitter:title", "twitter:description", "twitter:image", "twitter:image:alt", "twitter:card", "twitter:site"] }, h = Object.keys(l).map(function(t2) {
- return l[t2];
- }), m = { accesskey: "accessKey", charset: "charSet", class: "className", contenteditable: "contentEditable", contextmenu: "contextMenu", "http-equiv": "httpEquiv", itemprop: "itemProp", tabindex: "tabIndex" }, y = Object.keys(m).reduce(function(t2, e2) {
- return t2[m[e2]] = e2, t2;
- }, {}), T = function(t2, e2) {
- for (var r4 = t2.length - 1; r4 >= 0; r4 -= 1) {
- var n3 = t2[r4];
- if (Object.prototype.hasOwnProperty.call(n3, e2)) return n3[e2];
- }
- return null;
- }, g = function(t2) {
- var e2 = T(t2, l.TITLE), r4 = T(t2, "titleTemplate");
- if (Array.isArray(e2) && (e2 = e2.join("")), r4 && e2) return r4.replace(/%s/g, function() {
- return e2;
- });
- var n3 = T(t2, "defaultTitle");
- return e2 || n3 || void 0;
- }, b = function(t2) {
- return T(t2, "onChangeClientState") || function() {
- };
- }, v = function(t2, e2) {
- return e2.filter(function(e3) {
- return e3[t2] !== void 0;
- }).map(function(e3) {
- return e3[t2];
- }).reduce(function(t3, e3) {
- return a({}, t3, e3);
- }, {});
- }, A2 = function(t2, e2) {
- return e2.filter(function(t3) {
- return t3[l.BASE] !== void 0;
- }).map(function(t3) {
- return t3[l.BASE];
- }).reverse().reduce(function(e3, r4) {
- if (!e3.length) for (var n3 = Object.keys(r4), i2 = 0; i2 < n3.length; i2 += 1) {
- var o3 = n3[i2].toLowerCase();
- if (t2.indexOf(o3) !== -1 && r4[o3]) return e3.concat(r4);
- }
- return e3;
- }, []);
- }, C = function(t2, e2, r4) {
- var n3 = {};
- return r4.filter(function(e3) {
- return !!Array.isArray(e3[t2]) || (e3[t2] !== void 0 && console && typeof console.warn == "function" && console.warn("Helmet: " + t2 + ' should be of type "Array". Instead found type "' + typeof e3[t2] + '"'), !1);
- }).map(function(e3) {
- return e3[t2];
- }).reverse().reduce(function(t3, r5) {
- var i2 = {};
- r5.filter(function(t4) {
- for (var r6, o4 = Object.keys(t4), a2 = 0; a2 < o4.length; a2 += 1) {
- var s3 = o4[a2], c3 = s3.toLowerCase();
- e2.indexOf(c3) === -1 || r6 === "rel" && t4[r6].toLowerCase() === "canonical" || c3 === "rel" && t4[c3].toLowerCase() === "stylesheet" || (r6 = c3), e2.indexOf(s3) === -1 || s3 !== "innerHTML" && s3 !== "cssText" && s3 !== "itemprop" || (r6 = s3);
- }
- if (!r6 || !t4[r6]) return !1;
- var u3 = t4[r6].toLowerCase();
- return n3[r6] || (n3[r6] = {}), i2[r6] || (i2[r6] = {}), !n3[r6][u3] && (i2[r6][u3] = !0, !0);
- }).reverse().forEach(function(e3) {
- return t3.push(e3);
- });
- for (var o3 = Object.keys(i2), s2 = 0; s2 < o3.length; s2 += 1) {
- var c2 = o3[s2], u2 = a({}, n3[c2], i2[c2]);
- n3[c2] = u2;
- }
- return t3;
- }, []).reverse();
- }, O = function(t2, e2) {
- if (Array.isArray(t2) && t2.length) {
- for (var r4 = 0; r4 < t2.length; r4 += 1) if (t2[r4][e2]) return !0;
- }
- return !1;
- }, S = function(t2) {
- return Array.isArray(t2) ? t2.join("") : t2;
- }, E = function(t2, e2) {
- return Array.isArray(t2) ? t2.reduce(function(t3, r4) {
- return (function(t4, e3) {
- for (var r5 = Object.keys(t4), n3 = 0; n3 < r5.length; n3 += 1) if (e3[r5[n3]] && e3[r5[n3]].includes(t4[r5[n3]])) return !0;
- return !1;
- })(r4, e2) ? t3.priority.push(r4) : t3.default.push(r4), t3;
- }, { priority: [], default: [] }) : { default: t2 };
- }, I = function(t2, e2) {
- var r4;
- return a({}, t2, ((r4 = {})[e2] = void 0, r4));
- }, P2 = [l.NOSCRIPT, l.SCRIPT, l.STYLE], w = function(t2, e2) {
- return e2 === void 0 && (e2 = !0), e2 === !1 ? String(t2) : String(t2).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
- }, x = function(t2) {
- return Object.keys(t2).reduce(function(e2, r4) {
- var n3 = t2[r4] !== void 0 ? r4 + '="' + t2[r4] + '"' : "" + r4;
- return e2 ? e2 + " " + n3 : n3;
- }, "");
- }, L = function(t2, e2) {
- return e2 === void 0 && (e2 = {}), Object.keys(t2).reduce(function(e3, r4) {
- return e3[m[r4] || r4] = t2[r4], e3;
- }, e2);
- }, j = function(e2, r4) {
- return r4.map(function(r5, n3) {
- var i2, o3 = ((i2 = { key: n3 })["data-rh"] = !0, i2);
- return Object.keys(r5).forEach(function(t2) {
- var e3 = m[t2] || t2;
- e3 === "innerHTML" || e3 === "cssText" ? o3.dangerouslySetInnerHTML = { __html: r5.innerHTML || r5.cssText } : o3[e3] = r5[t2];
- }), react_default.createElement(e2, o3);
- });
- }, M = function(e2, r4, n3) {
- switch (e2) {
- case l.TITLE:
- return { toComponent: function() {
- return n4 = r4.titleAttributes, (i2 = { key: e3 = r4.title })["data-rh"] = !0, o3 = L(n4, i2), [react_default.createElement(l.TITLE, o3, e3)];
- var e3, n4, i2, o3;
- }, toString: function() {
- return (function(t2, e3, r5, n4) {
- var i2 = x(r5), o3 = S(e3);
- return i2 ? "<" + t2 + ' data-rh="true" ' + i2 + ">" + w(o3, n4) + "</" + t2 + ">" : "<" + t2 + ' data-rh="true">' + w(o3, n4) + "</" + t2 + ">";
- })(e2, r4.title, r4.titleAttributes, n3);
- } };
- case "bodyAttributes":
- case "htmlAttributes":
- return { toComponent: function() {
- return L(r4);
- }, toString: function() {
- return x(r4);
- } };
- default:
- return { toComponent: function() {
- return j(e2, r4);
- }, toString: function() {
- return (function(t2, e3, r5) {
- return e3.reduce(function(e4, n4) {
- var i2 = Object.keys(n4).filter(function(t3) {
- return !(t3 === "innerHTML" || t3 === "cssText");
- }).reduce(function(t3, e5) {
- var i3 = n4[e5] === void 0 ? e5 : e5 + '="' + w(n4[e5], r5) + '"';
- return t3 ? t3 + " " + i3 : i3;
- }, ""), o3 = n4.innerHTML || n4.cssText || "", a2 = P2.indexOf(t2) === -1;
- return e4 + "<" + t2 + ' data-rh="true" ' + i2 + (a2 ? "/>" : ">" + o3 + "</" + t2 + ">");
- }, "");
- })(e2, r4, n3);
- } };
- }
- }, k = function(t2) {
- var e2 = t2.baseTag, r4 = t2.bodyAttributes, n3 = t2.encode, i2 = t2.htmlAttributes, o3 = t2.noscriptTags, a2 = t2.styleTags, s2 = t2.title, c2 = s2 === void 0 ? "" : s2, u2 = t2.titleAttributes, h2 = t2.linkTags, m2 = t2.metaTags, y2 = t2.scriptTags, T3 = { toComponent: function() {
- }, toString: function() {
- return "";
- } };
- if (t2.prioritizeSeoTags) {
- var g2 = (function(t3) {
- var e3 = t3.linkTags, r5 = t3.scriptTags, n4 = t3.encode, i3 = E(t3.metaTags, d), o4 = E(e3, p), a3 = E(r5, f);
- return { priorityMethods: { toComponent: function() {
- return [].concat(j(l.META, i3.priority), j(l.LINK, o4.priority), j(l.SCRIPT, a3.priority));
- }, toString: function() {
- return M(l.META, i3.priority, n4) + " " + M(l.LINK, o4.priority, n4) + " " + M(l.SCRIPT, a3.priority, n4);
- } }, metaTags: i3.default, linkTags: o4.default, scriptTags: a3.default };
- })(t2);
- T3 = g2.priorityMethods, h2 = g2.linkTags, m2 = g2.metaTags, y2 = g2.scriptTags;
- }
- return { priority: T3, base: M(l.BASE, e2, n3), bodyAttributes: M("bodyAttributes", r4, n3), htmlAttributes: M("htmlAttributes", i2, n3), link: M(l.LINK, h2, n3), meta: M(l.META, m2, n3), noscript: M(l.NOSCRIPT, o3, n3), script: M(l.SCRIPT, y2, n3), style: M(l.STYLE, a2, n3), title: M(l.TITLE, { title: c2, titleAttributes: u2 }, n3) };
- }, H = [], N = function(t2, e2) {
- var r4 = this;
- e2 === void 0 && (e2 = typeof document < "u"), this.instances = [], this.value = { setHelmet: function(t3) {
- r4.context.helmet = t3;
- }, helmetInstances: { get: function() {
- return r4.canUseDOM ? H : r4.instances;
- }, add: function(t3) {
- (r4.canUseDOM ? H : r4.instances).push(t3);
- }, remove: function(t3) {
- var e3 = (r4.canUseDOM ? H : r4.instances).indexOf(t3);
- (r4.canUseDOM ? H : r4.instances).splice(e3, 1);
- } } }, this.context = t2, this.canUseDOM = e2, e2 || (t2.helmet = k({ baseTag: [], bodyAttributes: {}, encodeSpecialCharacters: !0, htmlAttributes: {}, linkTags: [], metaTags: [], noscriptTags: [], scriptTags: [], styleTags: [], title: "", titleAttributes: {} }));
- }, R = react_default.createContext({}), D = import_prop_types.default.shape({ setHelmet: import_prop_types.default.func, helmetInstances: import_prop_types.default.shape({ get: import_prop_types.default.func, add: import_prop_types.default.func, remove: import_prop_types.default.func }) }), U = typeof document < "u", q = (function(e2) {
- function r4(t2) {
- var n3;
- return (n3 = e2.call(this, t2) || this).helmetData = new N(n3.props.context, r4.canUseDOM), n3;
- }
- return s(r4, e2), r4.prototype.render = function() {
- return react_default.createElement(R.Provider, { value: this.helmetData.value }, this.props.children);
- }, r4;
- })(Component);
- q.canUseDOM = U, q.propTypes = { context: import_prop_types.default.shape({ helmet: import_prop_types.default.shape() }), children: import_prop_types.default.node.isRequired }, q.defaultProps = { context: {} }, q.displayName = "HelmetProvider";
- var Y = function(t2, e2) {
- var r4, n3 = document.head || document.querySelector(l.HEAD), i2 = n3.querySelectorAll(t2 + "[data-rh]"), o3 = [].slice.call(i2), a2 = [];
- return e2 && e2.length && e2.forEach(function(e3) {
- var n4 = document.createElement(t2);
- for (var i3 in e3) Object.prototype.hasOwnProperty.call(e3, i3) && (i3 === "innerHTML" ? n4.innerHTML = e3.innerHTML : i3 === "cssText" ? n4.styleSheet ? n4.styleSheet.cssText = e3.cssText : n4.appendChild(document.createTextNode(e3.cssText)) : n4.setAttribute(i3, e3[i3] === void 0 ? "" : e3[i3]));
- n4.setAttribute("data-rh", "true"), o3.some(function(t3, e4) {
- return r4 = e4, n4.isEqualNode(t3);
- }) ? o3.splice(r4, 1) : a2.push(n4);
- }), o3.forEach(function(t3) {
- return t3.parentNode.removeChild(t3);
- }), a2.forEach(function(t3) {
- return n3.appendChild(t3);
- }), { oldTags: o3, newTags: a2 };
- }, B = function(t2, e2) {
- var r4 = document.getElementsByTagName(t2)[0];
- if (r4) {
- for (var n3 = r4.getAttribute("data-rh"), i2 = n3 ? n3.split(",") : [], o3 = [].concat(i2), a2 = Object.keys(e2), s2 = 0; s2 < a2.length; s2 += 1) {
- var c2 = a2[s2], u2 = e2[c2] || "";
- r4.getAttribute(c2) !== u2 && r4.setAttribute(c2, u2), i2.indexOf(c2) === -1 && i2.push(c2);
- var l3 = o3.indexOf(c2);
- l3 !== -1 && o3.splice(l3, 1);
- }
- for (var p2 = o3.length - 1; p2 >= 0; p2 -= 1) r4.removeAttribute(o3[p2]);
- i2.length === o3.length ? r4.removeAttribute("data-rh") : r4.getAttribute("data-rh") !== a2.join(",") && r4.setAttribute("data-rh", a2.join(","));
- }
- }, K = function(t2, e2) {
- var r4 = t2.baseTag, n3 = t2.htmlAttributes, i2 = t2.linkTags, o3 = t2.metaTags, a2 = t2.noscriptTags, s2 = t2.onChangeClientState, c2 = t2.scriptTags, u2 = t2.styleTags, p2 = t2.title, f2 = t2.titleAttributes;
- B(l.BODY, t2.bodyAttributes), B(l.HTML, n3), (function(t3, e3) {
- t3 !== void 0 && document.title !== t3 && (document.title = S(t3)), B(l.TITLE, e3);
- })(p2, f2);
- var d2 = { baseTag: Y(l.BASE, r4), linkTags: Y(l.LINK, i2), metaTags: Y(l.META, o3), noscriptTags: Y(l.NOSCRIPT, a2), scriptTags: Y(l.SCRIPT, c2), styleTags: Y(l.STYLE, u2) }, h2 = {}, m2 = {};
- Object.keys(d2).forEach(function(t3) {
- var e3 = d2[t3], r5 = e3.newTags, n4 = e3.oldTags;
- r5.length && (h2[t3] = r5), n4.length && (m2[t3] = d2[t3].oldTags);
- }), e2 && e2(), s2(t2, h2, m2);
- }, _ = null, z = (function(t2) {
- function e2() {
- for (var e3, r5 = arguments.length, n3 = new Array(r5), i2 = 0; i2 < r5; i2++) n3[i2] = arguments[i2];
- return (e3 = t2.call.apply(t2, [this].concat(n3)) || this).rendered = !1, e3;
- }
- s(e2, t2);
- var r4 = e2.prototype;
- return r4.shouldComponentUpdate = function(t3) {
- return !(0, import_shallowequal.default)(t3, this.props);
- }, r4.componentDidUpdate = function() {
- this.emitChange();
- }, r4.componentWillUnmount = function() {
- this.props.context.helmetInstances.remove(this), this.emitChange();
- }, r4.emitChange = function() {
- var t3, e3, r5 = this.props.context, n3 = r5.setHelmet, i2 = null, o3 = (t3 = r5.helmetInstances.get().map(function(t4) {
- var e4 = a({}, t4.props);
- return delete e4.context, e4;
- }), { baseTag: A2(["href"], t3), bodyAttributes: v("bodyAttributes", t3), defer: T(t3, "defer"), encode: T(t3, "encodeSpecialCharacters"), htmlAttributes: v("htmlAttributes", t3), linkTags: C(l.LINK, ["rel", "href"], t3), metaTags: C(l.META, ["name", "charset", "http-equiv", "property", "itemprop"], t3), noscriptTags: C(l.NOSCRIPT, ["innerHTML"], t3), onChangeClientState: b(t3), scriptTags: C(l.SCRIPT, ["src", "innerHTML"], t3), styleTags: C(l.STYLE, ["cssText"], t3), title: g(t3), titleAttributes: v("titleAttributes", t3), prioritizeSeoTags: O(t3, "prioritizeSeoTags") });
- q.canUseDOM ? (e3 = o3, _ && cancelAnimationFrame(_), e3.defer ? _ = requestAnimationFrame(function() {
- K(e3, function() {
- _ = null;
- });
- }) : (K(e3), _ = null)) : k && (i2 = k(o3)), n3(i2);
- }, r4.init = function() {
- this.rendered || (this.rendered = !0, this.props.context.helmetInstances.add(this), this.emitChange());
- }, r4.render = function() {
- return this.init(), null;
- }, e2;
- })(Component);
- z.propTypes = { context: D.isRequired }, z.displayName = "HelmetDispatcher";
- var F = ["children"], G = ["children"], W = (function(e2) {
- function r4() {
- return e2.apply(this, arguments) || this;
- }
- s(r4, e2);
- var o3 = r4.prototype;
- return o3.shouldComponentUpdate = function(t2) {
- return !(0, import_react_fast_compare.default)(I(this.props, "helmetData"), I(t2, "helmetData"));
- }, o3.mapNestedChildrenToProps = function(t2, e3) {
- if (!e3) return null;
- switch (t2.type) {
- case l.SCRIPT:
- case l.NOSCRIPT:
- return { innerHTML: e3 };
- case l.STYLE:
- return { cssText: e3 };
- default:
- throw new Error("<" + t2.type + " /> elements are self-closing and can not contain children. Refer to our API for more information.");
- }
- }, o3.flattenArrayTypeChildren = function(t2) {
- var e3, r5 = t2.child, n3 = t2.arrayTypeChildren;
- return a({}, n3, ((e3 = {})[r5.type] = [].concat(n3[r5.type] || [], [a({}, t2.newChildProps, this.mapNestedChildrenToProps(r5, t2.nestedChildren))]), e3));
- }, o3.mapObjectTypeChildren = function(t2) {
- var e3, r5, n3 = t2.child, i2 = t2.newProps, o4 = t2.newChildProps, s2 = t2.nestedChildren;
- switch (n3.type) {
- case l.TITLE:
- return a({}, i2, ((e3 = {})[n3.type] = s2, e3.titleAttributes = a({}, o4), e3));
- case l.BODY:
- return a({}, i2, { bodyAttributes: a({}, o4) });
- case l.HTML:
- return a({}, i2, { htmlAttributes: a({}, o4) });
- default:
- return a({}, i2, ((r5 = {})[n3.type] = a({}, o4), r5));
- }
- }, o3.mapArrayTypeChildrenToProps = function(t2, e3) {
- var r5 = a({}, e3);
- return Object.keys(t2).forEach(function(e4) {
- var n3;
- r5 = a({}, r5, ((n3 = {})[e4] = t2[e4], n3));
- }), r5;
- }, o3.warnOnInvalidChildren = function(t2, e3) {
- return (0, import_invariant.default)(h.some(function(e4) {
- return t2.type === e4;
- }), typeof t2.type == "function" ? "You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information." : "Only elements types " + h.join(", ") + " are allowed. Helmet does not support rendering <" + t2.type + "> elements. Refer to our API for more information."), (0, import_invariant.default)(!e3 || typeof e3 == "string" || Array.isArray(e3) && !e3.some(function(t3) {
- return typeof t3 != "string";
- }), "Helmet expects a string as a child of <" + t2.type + ">. Did you forget to wrap your children in braces? ( <" + t2.type + ">{``}</" + t2.type + "> ) Refer to our API for more information."), !0;
- }, o3.mapChildrenToProps = function(e3, r5) {
- var n3 = this, i2 = {};
- return react_default.Children.forEach(e3, function(t2) {
- if (t2 && t2.props) {
- var e4 = t2.props, o4 = e4.children, a2 = u(e4, F), s2 = Object.keys(a2).reduce(function(t3, e5) {
- return t3[y[e5] || e5] = a2[e5], t3;
- }, {}), c2 = t2.type;
- switch (typeof c2 == "symbol" ? c2 = c2.toString() : n3.warnOnInvalidChildren(t2, o4), c2) {
- case l.FRAGMENT:
- r5 = n3.mapChildrenToProps(o4, r5);
- break;
- case l.LINK:
- case l.META:
- case l.NOSCRIPT:
- case l.SCRIPT:
- case l.STYLE:
- i2 = n3.flattenArrayTypeChildren({ child: t2, arrayTypeChildren: i2, newChildProps: s2, nestedChildren: o4 });
- break;
- default:
- r5 = n3.mapObjectTypeChildren({ child: t2, newProps: r5, newChildProps: s2, nestedChildren: o4 });
- }
- }
- }), this.mapArrayTypeChildrenToProps(i2, r5);
- }, o3.render = function() {
- var e3 = this.props, r5 = e3.children, n3 = u(e3, G), i2 = a({}, n3), o4 = n3.helmetData;
- return r5 && (i2 = this.mapChildrenToProps(r5, i2)), !o4 || o4 instanceof N || (o4 = new N(o4.context, o4.instances)), o4 ? react_default.createElement(z, a({}, i2, { context: o4.value, helmetData: void 0 })) : react_default.createElement(R.Consumer, null, function(e4) {
- return react_default.createElement(z, a({}, i2, { context: e4 }));
- });
- }, r4;
- })(Component);
- W.propTypes = { base: import_prop_types.default.object, bodyAttributes: import_prop_types.default.object, children: import_prop_types.default.oneOfType([import_prop_types.default.arrayOf(import_prop_types.default.node), import_prop_types.default.node]), defaultTitle: import_prop_types.default.string, defer: import_prop_types.default.bool, encodeSpecialCharacters: import_prop_types.default.bool, htmlAttributes: import_prop_types.default.object, link: import_prop_types.default.arrayOf(import_prop_types.default.object), meta: import_prop_types.default.arrayOf(import_prop_types.default.object), noscript: import_prop_types.default.arrayOf(import_prop_types.default.object), onChangeClientState: import_prop_types.default.func, script: import_prop_types.default.arrayOf(import_prop_types.default.object), style: import_prop_types.default.arrayOf(import_prop_types.default.object), title: import_prop_types.default.string, titleAttributes: import_prop_types.default.object, titleTemplate: import_prop_types.default.string, prioritizeSeoTags: import_prop_types.default.bool, helmetData: import_prop_types.default.object }, W.defaultProps = { defer: !0, encodeSpecialCharacters: !0, prioritizeSeoTags: !1 }, W.displayName = "Helmet";
-
- // src/manager/App.tsx
- init_react();
-
- // src/manager/components/error-boundary/ManagerErrorBoundary.tsx
- init_react();
-
- // ../../node_modules/@babel/runtime/helpers/esm/extends.js
- function _extends() {
- return _extends = Object.assign ? Object.assign.bind() : function(n3) {
- for (var e2 = 1; e2 < arguments.length; e2++) {
- var t2 = arguments[e2];
- for (var r4 in t2) ({}).hasOwnProperty.call(t2, r4) && (n3[r4] = t2[r4]);
- }
- return n3;
- }, _extends.apply(null, arguments);
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
- function _assertThisInitialized(e2) {
- if (e2 === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
- return e2;
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
- function _setPrototypeOf(t2, e2) {
- return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t3, e3) {
- return t3.__proto__ = e3, t3;
- }, _setPrototypeOf(t2, e2);
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
- function _inheritsLoose(t2, o3) {
- t2.prototype = Object.create(o3.prototype), t2.prototype.constructor = t2, _setPrototypeOf(t2, o3);
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
- function _getPrototypeOf(t2) {
- return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t3) {
- return t3.__proto__ || Object.getPrototypeOf(t3);
- }, _getPrototypeOf(t2);
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
- function _isNativeFunction(t2) {
- try {
- return Function.toString.call(t2).indexOf("[native code]") !== -1;
- } catch {
- return typeof t2 == "function";
- }
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
- function _isNativeReflectConstruct() {
- try {
- var t2 = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
- }));
- } catch {
- }
- return (_isNativeReflectConstruct = function() {
- return !!t2;
- })();
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/construct.js
- function _construct(t2, e2, r4) {
- if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
- var o3 = [null];
- o3.push.apply(o3, e2);
- var p2 = new (t2.bind.apply(t2, o3))();
- return r4 && _setPrototypeOf(p2, r4.prototype), p2;
- }
-
- // ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
- function _wrapNativeSuper(t2) {
- var r4 = typeof Map == "function" ? /* @__PURE__ */ new Map() : void 0;
- return _wrapNativeSuper = function(t3) {
- if (t3 === null || !_isNativeFunction(t3)) return t3;
- if (typeof t3 != "function") throw new TypeError("Super expression must either be null or a function");
- if (r4 !== void 0) {
- if (r4.has(t3)) return r4.get(t3);
- r4.set(t3, Wrapper9);
- }
- function Wrapper9() {
- return _construct(t3, arguments, _getPrototypeOf(this).constructor);
- }
- return Wrapper9.prototype = Object.create(t3.prototype, {
- constructor: {
- value: Wrapper9,
- enumerable: !1,
- writable: !0,
- configurable: !0
- }
- }), _setPrototypeOf(Wrapper9, t3);
- }, _wrapNativeSuper(t2);
- }
-
- // ../../node_modules/polished/dist/polished.esm.js
- var PolishedError = (function(_Error) {
- _inheritsLoose(PolishedError2, _Error);
- function PolishedError2(code) {
- var _this;
- if (1)
- _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
- else
- for (var _len2, args, _key2; _key2 < _len2; _key2++)
- ;
- return _assertThisInitialized(_this);
- }
- return PolishedError2;
- })(_wrapNativeSuper(Error));
- function endsWith(string, suffix) {
- return string.substr(-suffix.length) === suffix;
- }
- var cssRegex$1 = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
- function stripUnit(value) {
- if (typeof value != "string") return value;
- var matchedValue = value.match(cssRegex$1);
- return matchedValue ? parseFloat(value) : value;
- }
- var pxtoFactory = function(to) {
- return function(pxval, base) {
- base === void 0 && (base = "16px");
- var newPxval = pxval, newBase = base;
- if (typeof pxval == "string") {
- if (!endsWith(pxval, "px"))
- throw new PolishedError(69, to, pxval);
- newPxval = stripUnit(pxval);
- }
- if (typeof base == "string") {
- if (!endsWith(base, "px"))
- throw new PolishedError(70, to, base);
- newBase = stripUnit(base);
- }
- if (typeof newPxval == "string")
- throw new PolishedError(71, pxval, to);
- if (typeof newBase == "string")
- throw new PolishedError(72, base, to);
- return "" + newPxval / newBase + to;
- };
- }, pixelsto = pxtoFactory, em = pixelsto("em");
- var rem = pixelsto("rem");
- function colorToInt(color2) {
- return Math.round(color2 * 255);
- }
- function convertToInt(red, green, blue) {
- return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
- }
- function hslToRgb(hue, saturation, lightness, convert2) {
- if (convert2 === void 0 && (convert2 = convertToInt), saturation === 0)
- return convert2(lightness, lightness, lightness);
- var huePrime = (hue % 360 + 360) % 360 / 60, chroma = (1 - Math.abs(2 * lightness - 1)) * saturation, secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1)), red = 0, green = 0, blue = 0;
- huePrime >= 0 && huePrime < 1 ? (red = chroma, green = secondComponent) : huePrime >= 1 && huePrime < 2 ? (red = secondComponent, green = chroma) : huePrime >= 2 && huePrime < 3 ? (green = chroma, blue = secondComponent) : huePrime >= 3 && huePrime < 4 ? (green = secondComponent, blue = chroma) : huePrime >= 4 && huePrime < 5 ? (red = secondComponent, blue = chroma) : huePrime >= 5 && huePrime < 6 && (red = chroma, blue = secondComponent);
- var lightnessModification = lightness - chroma / 2, finalRed = red + lightnessModification, finalGreen = green + lightnessModification, finalBlue = blue + lightnessModification;
- return convert2(finalRed, finalGreen, finalBlue);
- }
- var namedColorMap = {
- aliceblue: "f0f8ff",
- antiquewhite: "faebd7",
- aqua: "00ffff",
- aquamarine: "7fffd4",
- azure: "f0ffff",
- beige: "f5f5dc",
- bisque: "ffe4c4",
- black: "000",
- blanchedalmond: "ffebcd",
- blue: "0000ff",
- blueviolet: "8a2be2",
- brown: "a52a2a",
- burlywood: "deb887",
- cadetblue: "5f9ea0",
- chartreuse: "7fff00",
- chocolate: "d2691e",
- coral: "ff7f50",
- cornflowerblue: "6495ed",
- cornsilk: "fff8dc",
- crimson: "dc143c",
- cyan: "00ffff",
- darkblue: "00008b",
- darkcyan: "008b8b",
- darkgoldenrod: "b8860b",
- darkgray: "a9a9a9",
- darkgreen: "006400",
- darkgrey: "a9a9a9",
- darkkhaki: "bdb76b",
- darkmagenta: "8b008b",
- darkolivegreen: "556b2f",
- darkorange: "ff8c00",
- darkorchid: "9932cc",
- darkred: "8b0000",
- darksalmon: "e9967a",
- darkseagreen: "8fbc8f",
- darkslateblue: "483d8b",
- darkslategray: "2f4f4f",
- darkslategrey: "2f4f4f",
- darkturquoise: "00ced1",
- darkviolet: "9400d3",
- deeppink: "ff1493",
- deepskyblue: "00bfff",
- dimgray: "696969",
- dimgrey: "696969",
- dodgerblue: "1e90ff",
- firebrick: "b22222",
- floralwhite: "fffaf0",
- forestgreen: "228b22",
- fuchsia: "ff00ff",
- gainsboro: "dcdcdc",
- ghostwhite: "f8f8ff",
- gold: "ffd700",
- goldenrod: "daa520",
- gray: "808080",
- green: "008000",
- greenyellow: "adff2f",
- grey: "808080",
- honeydew: "f0fff0",
- hotpink: "ff69b4",
- indianred: "cd5c5c",
- indigo: "4b0082",
- ivory: "fffff0",
- khaki: "f0e68c",
- lavender: "e6e6fa",
- lavenderblush: "fff0f5",
- lawngreen: "7cfc00",
- lemonchiffon: "fffacd",
- lightblue: "add8e6",
- lightcoral: "f08080",
- lightcyan: "e0ffff",
- lightgoldenrodyellow: "fafad2",
- lightgray: "d3d3d3",
- lightgreen: "90ee90",
- lightgrey: "d3d3d3",
- lightpink: "ffb6c1",
- lightsalmon: "ffa07a",
- lightseagreen: "20b2aa",
- lightskyblue: "87cefa",
- lightslategray: "789",
- lightslategrey: "789",
- lightsteelblue: "b0c4de",
- lightyellow: "ffffe0",
- lime: "0f0",
- limegreen: "32cd32",
- linen: "faf0e6",
- magenta: "f0f",
- maroon: "800000",
- mediumaquamarine: "66cdaa",
- mediumblue: "0000cd",
- mediumorchid: "ba55d3",
- mediumpurple: "9370db",
- mediumseagreen: "3cb371",
- mediumslateblue: "7b68ee",
- mediumspringgreen: "00fa9a",
- mediumturquoise: "48d1cc",
- mediumvioletred: "c71585",
- midnightblue: "191970",
- mintcream: "f5fffa",
- mistyrose: "ffe4e1",
- moccasin: "ffe4b5",
- navajowhite: "ffdead",
- navy: "000080",
- oldlace: "fdf5e6",
- olive: "808000",
- olivedrab: "6b8e23",
- orange: "ffa500",
- orangered: "ff4500",
- orchid: "da70d6",
- palegoldenrod: "eee8aa",
- palegreen: "98fb98",
- paleturquoise: "afeeee",
- palevioletred: "db7093",
- papayawhip: "ffefd5",
- peachpuff: "ffdab9",
- peru: "cd853f",
- pink: "ffc0cb",
- plum: "dda0dd",
- powderblue: "b0e0e6",
- purple: "800080",
- rebeccapurple: "639",
- red: "f00",
- rosybrown: "bc8f8f",
- royalblue: "4169e1",
- saddlebrown: "8b4513",
- salmon: "fa8072",
- sandybrown: "f4a460",
- seagreen: "2e8b57",
- seashell: "fff5ee",
- sienna: "a0522d",
- silver: "c0c0c0",
- skyblue: "87ceeb",
- slateblue: "6a5acd",
- slategray: "708090",
- slategrey: "708090",
- snow: "fffafa",
- springgreen: "00ff7f",
- steelblue: "4682b4",
- tan: "d2b48c",
- teal: "008080",
- thistle: "d8bfd8",
- tomato: "ff6347",
- turquoise: "40e0d0",
- violet: "ee82ee",
- wheat: "f5deb3",
- white: "fff",
- whitesmoke: "f5f5f5",
- yellow: "ff0",
- yellowgreen: "9acd32"
- };
- function nameToHex(color2) {
- if (typeof color2 != "string") return color2;
- var normalizedColorName = color2.toLowerCase();
- return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
- }
- var hexRegex = /^#[a-fA-F0-9]{6}$/, hexRgbaRegex = /^#[a-fA-F0-9]{8}$/, reducedHexRegex = /^#[a-fA-F0-9]{3}$/, reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/, rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i, rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i, hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i, hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
- function parseToRgb(color2) {
- if (typeof color2 != "string")
- throw new PolishedError(3);
- var normalizedColor = nameToHex(color2);
- if (normalizedColor.match(hexRegex))
- return {
- red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
- green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
- blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
- };
- if (normalizedColor.match(hexRgbaRegex)) {
- var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
- return {
- red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
- green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
- blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
- alpha
- };
- }
- if (normalizedColor.match(reducedHexRegex))
- return {
- red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
- green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
- blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
- };
- if (normalizedColor.match(reducedRgbaHexRegex)) {
- var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
- return {
- red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
- green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
- blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
- alpha: _alpha
- };
- }
- var rgbMatched = rgbRegex.exec(normalizedColor);
- if (rgbMatched)
- return {
- red: parseInt("" + rgbMatched[1], 10),
- green: parseInt("" + rgbMatched[2], 10),
- blue: parseInt("" + rgbMatched[3], 10)
- };
- var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
- if (rgbaMatched)
- return {
- red: parseInt("" + rgbaMatched[1], 10),
- green: parseInt("" + rgbaMatched[2], 10),
- blue: parseInt("" + rgbaMatched[3], 10),
- alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
- };
- var hslMatched = hslRegex.exec(normalizedColor);
- if (hslMatched) {
- var hue = parseInt("" + hslMatched[1], 10), saturation = parseInt("" + hslMatched[2], 10) / 100, lightness = parseInt("" + hslMatched[3], 10) / 100, rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")", hslRgbMatched = rgbRegex.exec(rgbColorString);
- if (!hslRgbMatched)
- throw new PolishedError(4, normalizedColor, rgbColorString);
- return {
- red: parseInt("" + hslRgbMatched[1], 10),
- green: parseInt("" + hslRgbMatched[2], 10),
- blue: parseInt("" + hslRgbMatched[3], 10)
- };
- }
- var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
- if (hslaMatched) {
- var _hue = parseInt("" + hslaMatched[1], 10), _saturation = parseInt("" + hslaMatched[2], 10) / 100, _lightness = parseInt("" + hslaMatched[3], 10) / 100, _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")", _hslRgbMatched = rgbRegex.exec(_rgbColorString);
- if (!_hslRgbMatched)
- throw new PolishedError(4, normalizedColor, _rgbColorString);
- return {
- red: parseInt("" + _hslRgbMatched[1], 10),
- green: parseInt("" + _hslRgbMatched[2], 10),
- blue: parseInt("" + _hslRgbMatched[3], 10),
- alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
- };
- }
- throw new PolishedError(5);
- }
- function rgbToHsl(color2) {
- var red = color2.red / 255, green = color2.green / 255, blue = color2.blue / 255, max = Math.max(red, green, blue), min = Math.min(red, green, blue), lightness = (max + min) / 2;
- if (max === min)
- return color2.alpha !== void 0 ? {
- hue: 0,
- saturation: 0,
- lightness,
- alpha: color2.alpha
- } : {
- hue: 0,
- saturation: 0,
- lightness
- };
- var hue, delta = max - min, saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
- switch (max) {
- case red:
- hue = (green - blue) / delta + (green < blue ? 6 : 0);
- break;
- case green:
- hue = (blue - red) / delta + 2;
- break;
- default:
- hue = (red - green) / delta + 4;
- break;
- }
- return hue *= 60, color2.alpha !== void 0 ? {
- hue,
- saturation,
- lightness,
- alpha: color2.alpha
- } : {
- hue,
- saturation,
- lightness
- };
- }
- function parseToHsl(color2) {
- return rgbToHsl(parseToRgb(color2));
- }
- var reduceHexValue = function(value) {
- return value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6] ? "#" + value[1] + value[3] + value[5] : value;
- }, reduceHexValue$1 = reduceHexValue;
- function numberToHex(value) {
- var hex = value.toString(16);
- return hex.length === 1 ? "0" + hex : hex;
- }
- function colorToHex(color2) {
- return numberToHex(Math.round(color2 * 255));
- }
- function convertToHex(red, green, blue) {
- return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
- }
- function hslToHex(hue, saturation, lightness) {
- return hslToRgb(hue, saturation, lightness, convertToHex);
- }
- function hsl(value, saturation, lightness) {
- if (typeof value == "number" && typeof saturation == "number" && typeof lightness == "number")
- return hslToHex(value, saturation, lightness);
- if (typeof value == "object" && saturation === void 0 && lightness === void 0)
- return hslToHex(value.hue, value.saturation, value.lightness);
- throw new PolishedError(1);
- }
- function hsla(value, saturation, lightness, alpha) {
- if (typeof value == "number" && typeof saturation == "number" && typeof lightness == "number" && typeof alpha == "number")
- return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
- if (typeof value == "object" && saturation === void 0 && lightness === void 0 && alpha === void 0)
- return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
- throw new PolishedError(2);
- }
- function rgb(value, green, blue) {
- if (typeof value == "number" && typeof green == "number" && typeof blue == "number")
- return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
- if (typeof value == "object" && green === void 0 && blue === void 0)
- return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
- throw new PolishedError(6);
- }
- function rgba(firstValue, secondValue, thirdValue, fourthValue) {
- if (typeof firstValue == "string" && typeof secondValue == "number") {
- var rgbValue = parseToRgb(firstValue);
- return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
- } else {
- if (typeof firstValue == "number" && typeof secondValue == "number" && typeof thirdValue == "number" && typeof fourthValue == "number")
- return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
- if (typeof firstValue == "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0)
- return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
- }
- throw new PolishedError(7);
- }
- var isRgb = function(color2) {
- return typeof color2.red == "number" && typeof color2.green == "number" && typeof color2.blue == "number" && (typeof color2.alpha != "number" || typeof color2.alpha > "u");
- }, isRgba = function(color2) {
- return typeof color2.red == "number" && typeof color2.green == "number" && typeof color2.blue == "number" && typeof color2.alpha == "number";
- }, isHsl = function(color2) {
- return typeof color2.hue == "number" && typeof color2.saturation == "number" && typeof color2.lightness == "number" && (typeof color2.alpha != "number" || typeof color2.alpha > "u");
- }, isHsla = function(color2) {
- return typeof color2.hue == "number" && typeof color2.saturation == "number" && typeof color2.lightness == "number" && typeof color2.alpha == "number";
- };
- function toColorString(color2) {
- if (typeof color2 != "object") throw new PolishedError(8);
- if (isRgba(color2)) return rgba(color2);
- if (isRgb(color2)) return rgb(color2);
- if (isHsla(color2)) return hsla(color2);
- if (isHsl(color2)) return hsl(color2);
- throw new PolishedError(8);
- }
- function curried(f2, length, acc) {
- return function() {
- var combined = acc.concat(Array.prototype.slice.call(arguments));
- return combined.length >= length ? f2.apply(this, combined) : curried(f2, length, combined);
- };
- }
- function curry(f2) {
- return curried(f2, f2.length, []);
- }
- function adjustHue(degree, color2) {
- if (color2 === "transparent") return color2;
- var hslColor = parseToHsl(color2);
- return toColorString(_extends({}, hslColor, {
- hue: hslColor.hue + parseFloat(degree)
- }));
- }
- var curriedAdjustHue = curry(adjustHue);
- function guard(lowerBoundary, upperBoundary, value) {
- return Math.max(lowerBoundary, Math.min(upperBoundary, value));
- }
- function darken2(amount, color2) {
- if (color2 === "transparent") return color2;
- var hslColor = parseToHsl(color2);
- return toColorString(_extends({}, hslColor, {
- lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
- }));
- }
- var curriedDarken = curry(darken2), curriedDarken$1 = curriedDarken;
- function desaturate(amount, color2) {
- if (color2 === "transparent") return color2;
- var hslColor = parseToHsl(color2);
- return toColorString(_extends({}, hslColor, {
- saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))
- }));
- }
- var curriedDesaturate = curry(desaturate);
- function lighten2(amount, color2) {
- if (color2 === "transparent") return color2;
- var hslColor = parseToHsl(color2);
- return toColorString(_extends({}, hslColor, {
- lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))
- }));
- }
- var curriedLighten = curry(lighten2), curriedLighten$1 = curriedLighten;
- function mix(weight, color2, otherColor) {
- if (color2 === "transparent") return otherColor;
- if (otherColor === "transparent") return color2;
- if (weight === 0) return otherColor;
- var parsedColor1 = parseToRgb(color2), color1 = _extends({}, parsedColor1, {
- alpha: typeof parsedColor1.alpha == "number" ? parsedColor1.alpha : 1
- }), parsedColor2 = parseToRgb(otherColor), color22 = _extends({}, parsedColor2, {
- alpha: typeof parsedColor2.alpha == "number" ? parsedColor2.alpha : 1
- }), alphaDelta = color1.alpha - color22.alpha, x2 = parseFloat(weight) * 2 - 1, y2 = x2 * alphaDelta === -1 ? x2 : x2 + alphaDelta, z2 = 1 + x2 * alphaDelta, weight1 = (y2 / z2 + 1) / 2, weight2 = 1 - weight1, mixedColor = {
- red: Math.floor(color1.red * weight1 + color22.red * weight2),
- green: Math.floor(color1.green * weight1 + color22.green * weight2),
- blue: Math.floor(color1.blue * weight1 + color22.blue * weight2),
- alpha: color1.alpha * parseFloat(weight) + color22.alpha * (1 - parseFloat(weight))
- };
- return rgba(mixedColor);
- }
- var curriedMix = curry(mix), mix$1 = curriedMix;
- function opacify(amount, color2) {
- if (color2 === "transparent") return color2;
- var parsedColor = parseToRgb(color2), alpha = typeof parsedColor.alpha == "number" ? parsedColor.alpha : 1, colorWithAlpha = _extends({}, parsedColor, {
- alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
- });
- return rgba(colorWithAlpha);
- }
- var curriedOpacify = curry(opacify);
- function saturate(amount, color2) {
- if (color2 === "transparent") return color2;
- var hslColor = parseToHsl(color2);
- return toColorString(_extends({}, hslColor, {
- saturation: guard(0, 1, hslColor.saturation + parseFloat(amount))
- }));
- }
- var curriedSaturate = curry(saturate);
- function setHue(hue, color2) {
- return color2 === "transparent" ? color2 : toColorString(_extends({}, parseToHsl(color2), {
- hue: parseFloat(hue)
- }));
- }
- var curriedSetHue = curry(setHue);
- function setLightness(lightness, color2) {
- return color2 === "transparent" ? color2 : toColorString(_extends({}, parseToHsl(color2), {
- lightness: parseFloat(lightness)
- }));
- }
- var curriedSetLightness = curry(setLightness);
- function setSaturation(saturation, color2) {
- return color2 === "transparent" ? color2 : toColorString(_extends({}, parseToHsl(color2), {
- saturation: parseFloat(saturation)
- }));
- }
- var curriedSetSaturation = curry(setSaturation);
- function shade(percentage, color2) {
- return color2 === "transparent" ? color2 : mix$1(parseFloat(percentage), "rgb(0, 0, 0)", color2);
- }
- var curriedShade = curry(shade);
- function tint(percentage, color2) {
- return color2 === "transparent" ? color2 : mix$1(parseFloat(percentage), "rgb(255, 255, 255)", color2);
- }
- var curriedTint = curry(tint);
- function transparentize(amount, color2) {
- if (color2 === "transparent") return color2;
- var parsedColor = parseToRgb(color2), alpha = typeof parsedColor.alpha == "number" ? parsedColor.alpha : 1, colorWithAlpha = _extends({}, parsedColor, {
- alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
- });
- return rgba(colorWithAlpha);
- }
- var curriedTransparentize = curry(transparentize), curriedTransparentize$1 = curriedTransparentize;
-
- // src/manager/components/error-boundary/ManagerErrorBoundary.tsx
- var Container = styled.div(({ theme }) => ({
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- width: "100vw",
- height: "100vh",
- backgroundColor: theme.background.app,
- color: theme.color.defaultText,
- fontFamily: theme.typography.fonts.base
- })), Content = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- justifyContent: "space-between",
- width: "80%",
- height: "80%",
- padding: 20,
- gap: 20,
- backgroundColor: theme.background.content,
- borderRadius: theme.appBorderRadius,
- border: `1px solid ${theme.color.negative}`,
- boxShadow: "0 0 64px rgba(0, 0, 0, 0.1)",
- overflow: "auto"
- })), Info = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- alignItems: "start",
- gap: 15
- })), Heading = styled.h1(({ theme }) => ({
- display: "flex",
- alignItems: "center",
- margin: 0,
- gap: 10,
- fontSize: theme.typography.size.s2,
- fontWeight: theme.typography.weight.bold,
- color: theme.color.defaultText
- })), SubHeading = styled.p(({ theme }) => ({
- fontSize: theme.typography.size.s2,
- color: theme.textMutedColor,
- margin: 0,
- lineHeight: 1.4,
- textWrap: "balance"
- })), ErrorWrapper = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column-reverse",
- width: "100%",
- flex: "0 0 auto",
- border: `1px solid ${theme.appBorderColor}`,
- borderRadius: theme.appBorderRadius,
- pre: {
- borderRadius: 0
- }
- })), CollapseToggle = styled.div(({ theme }) => ({
- flex: "0 0 auto",
- display: "flex",
- alignItems: "center",
- gap: 10,
- height: 40,
- width: "100%",
- padding: "0 10px",
- cursor: "pointer",
- fontSize: theme.typography.size.s2,
- fontWeight: theme.typography.weight.bold,
- color: theme.color.defaultText,
- userSelect: "none",
- "&:hover": {
- backgroundColor: theme.base === "light" ? "rgba(0, 0, 0, 0.02)" : "rgba(255, 255, 255, 0.03)"
- },
- svg: {
- color: theme.textMutedColor
- }
- })), ErrorMessage = styled.pre(({ theme }) => ({
- order: 1,
- padding: "11px 15px",
- margin: 0,
- fontSize: theme.typography.size.s1,
- color: theme.color.negativeText,
- backgroundColor: curriedTransparentize$1(theme.base === "light" ? 0.95 : 0.9, theme.color.negative),
- borderBottom: `1px solid ${theme.appBorderColor}`,
- whiteSpace: "pre-wrap",
- wordBreak: "break-word",
- fontFamily: theme.typography.fonts.mono,
- lineHeight: "18px"
- })), ErrorStack = styled.pre(({ theme }) => ({
- padding: 15,
- margin: 0,
- fontSize: theme.typography.size.s1,
- color: theme.textMutedColor,
- borderBottom: `1px solid ${theme.appBorderColor}`,
- borderRadius: 0,
- whiteSpace: "pre-wrap",
- wordBreak: "break-word",
- fontFamily: theme.typography.fonts.mono
- })), ErrorFallback = ({ error, errorInfo }) => react_default.createElement(Container, { "data-testid": "manager-error-boundary" }, react_default.createElement(Content, null, react_default.createElement(Info, null, react_default.createElement(Heading, null, react_default.createElement(Badge, { status: "negative" }, "Error"), react_default.createElement("span", null, "Something went wrong")), react_default.createElement(SubHeading, null, "The Storybook Manager UI encountered an error. This is usually caused by custom addon code or configuration. Please check your browser console for more details. Try clearing browser storage if the issue persists."), react_default.createElement(Button, { asChild: !0, size: "medium" }, react_default.createElement("a", { href: window.location.origin + window.location.pathname.replace("iframe.html", "") }, react_default.createElement(SyncIcon, { size: 14 }), "Reload Storybook"))), react_default.createElement(ErrorWrapper, null, react_default.createElement(ErrorMessage, null, error.message || "Unknown error"), react_default.createElement(
- Collapsible,
- {
- collapsed: !0,
- summary: ({ isCollapsed, toggleCollapsed }) => react_default.createElement(CollapseToggle, { onClick: toggleCollapsed }, react_default.createElement(UnfoldIcon, null), isCollapsed ? "Expand error" : "Collapse error")
- },
- (error.stack || errorInfo?.componentStack) && react_default.createElement(ErrorStack, null, error.stack, errorInfo?.componentStack && `
-
- Component Stack:${errorInfo.componentStack}`)
- )))), ManagerErrorBoundary = class extends Component {
- constructor(props) {
- super(props), this.state = { hasError: !1, error: null, errorInfo: null };
- }
- static getDerivedStateFromError(error) {
- return { hasError: !0, error };
- }
- componentDidCatch(error, errorInfo) {
- console.error("Storybook Manager UI Error:", error), console.error("Component Stack:", errorInfo.componentStack), this.setState({ errorInfo }), typeof globalThis.sendTelemetryError == "function" && globalThis.sendTelemetryError(error);
- }
- render() {
- let { hasError, error, errorInfo } = this.state, { children } = this.props;
- return hasError && error ? react_default.createElement(ErrorFallback, { error, errorInfo }) : children;
- }
- };
-
- // src/manager/components/layout/Layout.tsx
- init_react();
-
- // src/manager/constants.ts
- var MEDIA_DESKTOP_BREAKPOINT = "@media (min-width: 600px)";
-
- // src/manager/container/Notifications.tsx
- init_react();
-
- // src/manager/components/notifications/NotificationList.tsx
- init_react();
-
- // src/manager/components/layout/LayoutProvider.tsx
- init_react();
-
- // src/manager/hooks/useMedia.tsx
- init_react();
- function useMediaQuery(query) {
- let getMatches = (queryMatch) => typeof window < "u" ? window.matchMedia(queryMatch).matches : !1, [matches, setMatches] = useState(getMatches(query));
- function handleChange() {
- setMatches(getMatches(query));
- }
- return useEffect(() => {
- let matchMedia = window.matchMedia(query);
- return handleChange(), matchMedia.addEventListener("change", handleChange), () => {
- matchMedia.removeEventListener("change", handleChange);
- };
- }, [query]), matches;
- }
-
- // src/manager/components/layout/LayoutProvider.tsx
- var LayoutContext = createContext({
- isMobileMenuOpen: !1,
- setMobileMenuOpen: () => {
- },
- isMobileAboutOpen: !1,
- setMobileAboutOpen: () => {
- },
- isMobilePanelOpen: !1,
- setMobilePanelOpen: () => {
- },
- isDesktop: !1,
- isMobile: !1
- }), LayoutProvider = ({ children, forceDesktop }) => {
- let [isMobileMenuOpen, setMobileMenuOpen] = useState(!1), [isMobileAboutOpen, setMobileAboutOpen] = useState(!1), [isMobilePanelOpen, setMobilePanelOpen] = useState(!1), isDesktop = forceDesktop ?? useMediaQuery(`(min-width: ${600}px)`), isMobile2 = !isDesktop, contextValue = useMemo(
- () => ({
- isMobileMenuOpen,
- setMobileMenuOpen,
- isMobileAboutOpen,
- setMobileAboutOpen,
- isMobilePanelOpen,
- setMobilePanelOpen,
- isDesktop,
- isMobile: isMobile2
- }),
- [
- isMobileMenuOpen,
- setMobileMenuOpen,
- isMobileAboutOpen,
- setMobileAboutOpen,
- isMobilePanelOpen,
- setMobilePanelOpen,
- isDesktop,
- isMobile2
- ]
- );
- return react_default.createElement(LayoutContext.Provider, { value: contextValue }, children);
- }, useLayout = () => useContext(LayoutContext);
-
- // src/manager/components/notifications/NotificationItem.tsx
- init_react();
- var slideIn = keyframes({
- "0%": {
- opacity: 0,
- transform: "translateY(30px)"
- },
- "100%": {
- opacity: 1,
- transform: "translateY(0)"
- }
- }), grow = keyframes({
- "0%": {
- width: "0%"
- },
- "100%": {
- width: "100%"
- }
- }), Notification = styled.div(
- ({ theme }) => ({
- position: "relative",
- display: "flex",
- border: `1px solid ${theme.appBorderColor}`,
- padding: "12px 6px 12px 12px",
- borderRadius: theme.appBorderRadius + 1,
- alignItems: "center",
- animation: `${slideIn} 500ms`,
- background: theme.base === "light" ? "hsla(203, 50%, 20%, .97)" : "hsla(203, 30%, 95%, .97)",
- boxShadow: "0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1)",
- color: theme.color.inverseText,
- textDecoration: "none",
- overflow: "hidden",
- [MEDIA_DESKTOP_BREAKPOINT]: {
- boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`
- }
- }),
- ({ duration, theme }) => duration && {
- "&::after": {
- content: '""',
- display: "block",
- position: "absolute",
- bottom: 0,
- left: 0,
- height: 3,
- background: theme.color.secondary,
- animation: `${grow} ${duration}ms linear forwards reverse`
- }
- }
- ), NotificationWithInteractiveStates = styled(Notification)({
- cursor: "pointer",
- border: "none",
- outline: "none",
- textAlign: "left",
- transition: "all 150ms ease-out",
- transform: "translate3d(0, 0, 0)",
- "&:hover": {
- transform: "translate3d(0, -3px, 0)",
- boxShadow: "0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"
- },
- "&:active": {
- transform: "translate3d(0, 0, 0)",
- boxShadow: "0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"
- },
- "&:focus": {
- boxShadow: "rgba(2,156,253,1) 0 0 0 1px inset, 0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)"
- }
- }), NotificationButton = NotificationWithInteractiveStates.withComponent("div"), NotificationLink = NotificationWithInteractiveStates.withComponent(Link2), NotificationIconWrapper = styled.div({
- display: "flex",
- marginRight: 10,
- alignItems: "center",
- svg: {
- width: 16,
- height: 16
- }
- }), NotificationTextWrapper = styled.div(({ theme }) => ({
- width: "100%",
- display: "flex",
- flexDirection: "column",
- color: theme.color.inverseText
- })), Headline = styled.div(({ theme }) => ({
- height: "100%",
- alignItems: "center",
- whiteSpace: "balance",
- overflow: "hidden",
- textOverflow: "ellipsis",
- fontSize: theme.typography.size.s1,
- lineHeight: "16px",
- fontWeight: theme.typography.weight.bold
- })), SubHeadline = styled.div(({ theme }) => ({
- color: curriedTransparentize$1(0.25, theme.color.inverseText),
- fontSize: theme.typography.size.s1 - 1,
- lineHeight: "14px",
- marginTop: 2,
- whiteSpace: "balance"
- })), ItemContent = ({
- icon,
- content: { headline, subHeadline }
- }) => react_default.createElement(react_default.Fragment, null, !icon || react_default.createElement(NotificationIconWrapper, null, icon), react_default.createElement(NotificationTextWrapper, null, react_default.createElement(Headline, { title: headline }, headline), subHeadline && react_default.createElement(SubHeadline, null, subHeadline))), DismissButtonWrapper = styled(Button)(({ theme }) => ({
- width: 28,
- alignSelf: "center",
- marginTop: 0,
- color: theme.base === "light" ? "rgba(255,255,255,0.7)" : " #999999"
- })), DismissNotificationItem = ({ onDismiss }) => react_default.createElement(
- DismissButtonWrapper,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "Dismiss notification",
- onClick: (e2) => {
- e2.preventDefault(), e2.stopPropagation(), onDismiss();
- }
- },
- react_default.createElement(CloseAltIcon, { size: 12 })
- ), NotificationItemSpacer = styled.div({
- height: 48
- }), NotificationItem = ({
- notification: { content, duration, link, onClear, onClick, id, icon },
- onDismissNotification,
- zIndex
- }) => {
- let onTimeout = useCallback(() => {
- onDismissNotification(id), onClear && onClear({ dismissed: !1, timeout: !0 });
- }, [id, onDismissNotification, onClear]), timer = useRef(null);
- useEffect(() => {
- if (duration)
- return timer.current = setTimeout(onTimeout, duration), () => clearTimeout(timer.current);
- }, [duration, onTimeout]);
- let onDismiss = useCallback(() => {
- clearTimeout(timer.current), onDismissNotification(id), onClear && onClear({ dismissed: !0, timeout: !1 });
- }, [id, onDismissNotification, onClear]);
- return link ? react_default.createElement(NotificationLink, { to: link, duration, style: { zIndex } }, react_default.createElement(ItemContent, { icon, content }), react_default.createElement(DismissNotificationItem, { onDismiss })) : onClick ? react_default.createElement(
- NotificationButton,
- {
- duration,
- onClick: () => onClick({ onDismiss }),
- style: { zIndex }
- },
- react_default.createElement(ItemContent, { icon, content }),
- react_default.createElement(DismissNotificationItem, { onDismiss })
- ) : react_default.createElement(Notification, { duration, style: { zIndex } }, react_default.createElement(ItemContent, { icon, content }), react_default.createElement(DismissNotificationItem, { onDismiss }));
- }, NotificationItem_default = NotificationItem;
-
- // src/manager/components/notifications/NotificationList.tsx
- var NotificationList = ({
- notifications,
- clearNotification
- }) => {
- let { isMobile: isMobile2 } = useLayout();
- return react_default.createElement(List, { isMobile: isMobile2 }, notifications && notifications.map((notification, index) => react_default.createElement(
- NotificationItem_default,
- {
- key: notification.id,
- onDismissNotification: (id) => clearNotification(id),
- notification,
- zIndex: notifications.length - index
- }
- )));
- }, List = styled.div(
- {
- zIndex: 200,
- "> * + *": {
- marginTop: 12
- },
- "&:empty": {
- display: "none"
- }
- },
- ({ isMobile: isMobile2 }) => isMobile2 && {
- position: "fixed",
- bottom: 40,
- margin: 20
- }
- );
-
- // src/manager/container/Notifications.tsx
- var mapper = ({ state, api }) => ({
- notifications: state.notifications,
- clearNotification: api.clearNotification
- }), Notifications = (props) => react_default.createElement(Consumer, { filter: mapper }, (fromState) => react_default.createElement(NotificationList, { ...props, ...fromState }));
-
- // src/manager/components/mobile/navigation/MobileNavigation.tsx
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useLayoutEffect.mjs
- init_react();
- var $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document < "u" ? react_default.useLayoutEffect : () => {
- };
-
- // ../../node_modules/@react-aria/utils/dist/useValueEffect.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useId.mjs
- init_react();
-
- // ../../node_modules/@react-aria/ssr/dist/SSRProvider.mjs
- init_react();
- var $b5e257d569688ac6$var$defaultContext = {
- prefix: String(Math.round(Math.random() * 1e10)),
- current: 0
- }, $b5e257d569688ac6$var$SSRContext = react_default.createContext($b5e257d569688ac6$var$defaultContext), $b5e257d569688ac6$var$IsSSRContext = react_default.createContext(!1);
- var $b5e257d569688ac6$var$canUseDOM = !!(typeof window < "u" && window.document && window.document.createElement), $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
- function $b5e257d569688ac6$var$useCounter(isDisabled = !1) {
- let ctx = useContext($b5e257d569688ac6$var$SSRContext), ref = useRef(null);
- if (ref.current === null && !isDisabled) {
- var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
- let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = react_default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 || (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
- if (currentOwner) {
- let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
- prevComponentValue == null ? $b5e257d569688ac6$var$componentIds.set(currentOwner, {
- id: ctx.current,
- state: currentOwner.memoizedState
- }) : currentOwner.memoizedState !== prevComponentValue.state && (ctx.current = prevComponentValue.id, $b5e257d569688ac6$var$componentIds.delete(currentOwner));
- }
- ref.current = ++ctx.current;
- }
- return ref.current;
- }
- function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
- let ctx = useContext($b5e257d569688ac6$var$SSRContext), counter = $b5e257d569688ac6$var$useCounter(!!defaultId), prefix = `react-aria${ctx.prefix}`;
- return defaultId || `${prefix}-${counter}`;
- }
- function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
- let id = react_default.useId(), [didSSR] = useState($b5e257d569688ac6$export$535bd6ca7f90a273()), prefix = didSSR ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
- return defaultId || `${prefix}-${id}`;
- }
- var $b5e257d569688ac6$export$619500959fc48b26 = typeof react_default.useId == "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
- function $b5e257d569688ac6$var$getSnapshot() {
- return !1;
- }
- function $b5e257d569688ac6$var$getServerSnapshot() {
- return !0;
- }
- function $b5e257d569688ac6$var$subscribe(onStoreChange) {
- return () => {
- };
- }
- function $b5e257d569688ac6$export$535bd6ca7f90a273() {
- return typeof react_default.useSyncExternalStore == "function" ? react_default.useSyncExternalStore($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot) : useContext($b5e257d569688ac6$var$IsSSRContext);
- }
-
- // ../../node_modules/@react-aria/utils/dist/useId.mjs
- var $bdb11010cef70236$var$canUseDOM = !!(typeof window < "u" && window.document && window.document.createElement), $bdb11010cef70236$export$d41a04c74483c6ef = /* @__PURE__ */ new Map(), $bdb11010cef70236$var$registry;
- typeof FinalizationRegistry < "u" && ($bdb11010cef70236$var$registry = new FinalizationRegistry((heldValue) => {
- $bdb11010cef70236$export$d41a04c74483c6ef.delete(heldValue);
- }));
- function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
- let [value, setValue] = useState(defaultId), nextId = useRef(null), res = $b5e257d569688ac6$export$619500959fc48b26(value), cleanupRef = useRef(null);
- if ($bdb11010cef70236$var$registry && $bdb11010cef70236$var$registry.register(cleanupRef, res), $bdb11010cef70236$var$canUseDOM) {
- let cacheIdRef = $bdb11010cef70236$export$d41a04c74483c6ef.get(res);
- cacheIdRef && !cacheIdRef.includes(nextId) ? cacheIdRef.push(nextId) : $bdb11010cef70236$export$d41a04c74483c6ef.set(res, [
- nextId
- ]);
- }
- return $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
- let r4 = res;
- return () => {
- $bdb11010cef70236$var$registry && $bdb11010cef70236$var$registry.unregister(cleanupRef), $bdb11010cef70236$export$d41a04c74483c6ef.delete(r4);
- };
- }, [
- res
- ]), useEffect(() => {
- let newId = nextId.current;
- return newId && setValue(newId), () => {
- newId && (nextId.current = null);
- };
- }), res;
- }
- function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
- if (idA === idB) return idA;
- let setIdsA = $bdb11010cef70236$export$d41a04c74483c6ef.get(idA);
- if (setIdsA)
- return setIdsA.forEach((ref) => ref.current = idB), idB;
- let setIdsB = $bdb11010cef70236$export$d41a04c74483c6ef.get(idB);
- return setIdsB ? (setIdsB.forEach((ref) => ref.current = idA), idA) : idB;
- }
-
- // ../../node_modules/@react-aria/utils/dist/chain.mjs
- function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
- return (...args) => {
- for (let callback of callbacks) typeof callback == "function" && callback(...args);
- };
- }
-
- // ../../node_modules/@react-aria/utils/dist/domHelpers.mjs
- var $431fbd86ca7dc216$export$b204af158042fbac = (el) => {
- var _el_ownerDocument;
- return (_el_ownerDocument = el?.ownerDocument) !== null && _el_ownerDocument !== void 0 ? _el_ownerDocument : document;
- }, $431fbd86ca7dc216$export$f21a1ffae260145a = (el) => el && "window" in el && el.window === el ? el : $431fbd86ca7dc216$export$b204af158042fbac(el).defaultView || window;
- function $431fbd86ca7dc216$var$isNode(value) {
- return value !== null && typeof value == "object" && "nodeType" in value && typeof value.nodeType == "number";
- }
- function $431fbd86ca7dc216$export$af51f0f06c0f328a(node) {
- return $431fbd86ca7dc216$var$isNode(node) && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in node;
- }
-
- // ../../node_modules/@react-stately/flags/dist/import.mjs
- var $f4e2df6bd15f8569$var$_shadowDOM = !1;
- function $f4e2df6bd15f8569$export$98658e8c59125e6a() {
- return $f4e2df6bd15f8569$var$_shadowDOM;
- }
-
- // ../../node_modules/@react-aria/utils/dist/DOMFunctions.mjs
- function $d4ee10de306f2510$export$4282f70798064fe0(node, otherNode) {
- if (!$f4e2df6bd15f8569$export$98658e8c59125e6a()) return otherNode && node ? node.contains(otherNode) : !1;
- if (!node || !otherNode) return !1;
- let currentNode = otherNode;
- for (; currentNode !== null; ) {
- if (currentNode === node) return !0;
- currentNode.tagName === "SLOT" && currentNode.assignedSlot ? currentNode = currentNode.assignedSlot.parentNode : $431fbd86ca7dc216$export$af51f0f06c0f328a(currentNode) ? currentNode = currentNode.host : currentNode = currentNode.parentNode;
- }
- return !1;
- }
- var $d4ee10de306f2510$export$cd4e5573fbe2b576 = (doc = document) => {
- var _activeElement_shadowRoot;
- if (!$f4e2df6bd15f8569$export$98658e8c59125e6a()) return doc.activeElement;
- let activeElement = doc.activeElement;
- for (; activeElement && "shadowRoot" in activeElement && (!((_activeElement_shadowRoot = activeElement.shadowRoot) === null || _activeElement_shadowRoot === void 0) && _activeElement_shadowRoot.activeElement); ) activeElement = activeElement.shadowRoot.activeElement;
- return activeElement;
- };
- function $d4ee10de306f2510$export$e58f029f0fbfdb29(event) {
- return $f4e2df6bd15f8569$export$98658e8c59125e6a() && event.target.shadowRoot && event.composedPath ? event.composedPath()[0] : event.target;
- }
-
- // ../../node_modules/clsx/dist/clsx.mjs
- function r2(e2) {
- var t2, f2, n3 = "";
- if (typeof e2 == "string" || typeof e2 == "number") n3 += e2;
- else if (typeof e2 == "object") if (Array.isArray(e2)) {
- var o3 = e2.length;
- for (t2 = 0; t2 < o3; t2++) e2[t2] && (f2 = r2(e2[t2])) && (n3 && (n3 += " "), n3 += f2);
- } else for (f2 in e2) e2[f2] && (n3 && (n3 += " "), n3 += f2);
- return n3;
- }
- function clsx() {
- for (var e2, t2, f2 = 0, n3 = "", o3 = arguments.length; f2 < o3; f2++) (e2 = arguments[f2]) && (t2 = r2(e2)) && (n3 && (n3 += " "), n3 += t2);
- return n3;
- }
- var clsx_default = clsx;
-
- // ../../node_modules/@react-aria/utils/dist/mergeProps.mjs
- function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
- let result = {
- ...args[0]
- };
- for (let i2 = 1; i2 < args.length; i2++) {
- let props = args[i2];
- for (let key in props) {
- let a2 = result[key], b2 = props[key];
- typeof a2 == "function" && typeof b2 == "function" && // This is a lot faster than a regex.
- key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= /* 'A' */
- 65 && key.charCodeAt(2) <= /* 'Z' */
- 90 ? result[key] = $ff5963eb1fccf552$export$e08e3b67e392101e(a2, b2) : (key === "className" || key === "UNSAFE_className") && typeof a2 == "string" && typeof b2 == "string" ? result[key] = clsx_default(a2, b2) : key === "id" && a2 && b2 ? result.id = $bdb11010cef70236$export$cd8c9cb68f842629(a2, b2) : result[key] = b2 !== void 0 ? b2 : a2;
- }
- }
- return result;
- }
-
- // ../../node_modules/@react-aria/utils/dist/mergeRefs.mjs
- function $5dc95899b306f630$export$c9058316764c140e(...refs) {
- return refs.length === 1 && refs[0] ? refs[0] : (value) => {
- let hasCleanup = !1, cleanups = refs.map((ref) => {
- let cleanup = $5dc95899b306f630$var$setRef(ref, value);
- return hasCleanup || (hasCleanup = typeof cleanup == "function"), cleanup;
- });
- if (hasCleanup) return () => {
- cleanups.forEach((cleanup, i2) => {
- typeof cleanup == "function" ? cleanup() : $5dc95899b306f630$var$setRef(refs[i2], null);
- });
- };
- };
- }
- function $5dc95899b306f630$var$setRef(ref, value) {
- if (typeof ref == "function") return ref(value);
- ref != null && (ref.current = value);
- }
-
- // ../../node_modules/@react-aria/utils/dist/filterDOMProps.mjs
- var $65484d02dcb7eb3e$var$DOMPropNames = /* @__PURE__ */ new Set([
- "id"
- ]), $65484d02dcb7eb3e$var$labelablePropNames = /* @__PURE__ */ new Set([
- "aria-label",
- "aria-labelledby",
- "aria-describedby",
- "aria-details"
- ]), $65484d02dcb7eb3e$var$linkPropNames = /* @__PURE__ */ new Set([
- "href",
- "hrefLang",
- "target",
- "rel",
- "download",
- "ping",
- "referrerPolicy"
- ]), $65484d02dcb7eb3e$var$globalAttrs = /* @__PURE__ */ new Set([
- "dir",
- "lang",
- "hidden",
- "inert",
- "translate"
- ]), $65484d02dcb7eb3e$var$globalEvents = /* @__PURE__ */ new Set([
- "onClick",
- "onAuxClick",
- "onContextMenu",
- "onDoubleClick",
- "onMouseDown",
- "onMouseEnter",
- "onMouseLeave",
- "onMouseMove",
- "onMouseOut",
- "onMouseOver",
- "onMouseUp",
- "onTouchCancel",
- "onTouchEnd",
- "onTouchMove",
- "onTouchStart",
- "onPointerDown",
- "onPointerMove",
- "onPointerUp",
- "onPointerCancel",
- "onPointerEnter",
- "onPointerLeave",
- "onPointerOver",
- "onPointerOut",
- "onGotPointerCapture",
- "onLostPointerCapture",
- "onScroll",
- "onWheel",
- "onAnimationStart",
- "onAnimationEnd",
- "onAnimationIteration",
- "onTransitionCancel",
- "onTransitionEnd",
- "onTransitionRun",
- "onTransitionStart"
- ]), $65484d02dcb7eb3e$var$propRe = /^(data-.*)$/;
- function $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, opts = {}) {
- let { labelable, isLink, global: global2, events: events2 = global2, propNames } = opts, filteredProps = {};
- for (let prop in props) Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || isLink && $65484d02dcb7eb3e$var$linkPropNames.has(prop) || global2 && $65484d02dcb7eb3e$var$globalAttrs.has(prop) || events2 && ($65484d02dcb7eb3e$var$globalEvents.has(prop) || prop.endsWith("Capture") && $65484d02dcb7eb3e$var$globalEvents.has(prop.slice(0, -7))) || propNames?.has(prop) || $65484d02dcb7eb3e$var$propRe.test(prop)) && (filteredProps[prop] = props[prop]);
- return filteredProps;
- }
-
- // ../../node_modules/@react-aria/utils/dist/focusWithoutScrolling.mjs
- function $7215afc6de606d6b$export$de79e2c695e052f3(element) {
- if ($7215afc6de606d6b$var$supportsPreventScroll()) element.focus({
- preventScroll: !0
- });
- else {
- let scrollableElements = $7215afc6de606d6b$var$getScrollableElements(element);
- element.focus(), $7215afc6de606d6b$var$restoreScrollPosition(scrollableElements);
- }
- }
- var $7215afc6de606d6b$var$supportsPreventScrollCached = null;
- function $7215afc6de606d6b$var$supportsPreventScroll() {
- if ($7215afc6de606d6b$var$supportsPreventScrollCached == null) {
- $7215afc6de606d6b$var$supportsPreventScrollCached = !1;
- try {
- document.createElement("div").focus({
- get preventScroll() {
- return $7215afc6de606d6b$var$supportsPreventScrollCached = !0, !0;
- }
- });
- } catch {
- }
- }
- return $7215afc6de606d6b$var$supportsPreventScrollCached;
- }
- function $7215afc6de606d6b$var$getScrollableElements(element) {
- let parent = element.parentNode, scrollableElements = [], rootScrollingElement = document.scrollingElement || document.documentElement;
- for (; parent instanceof HTMLElement && parent !== rootScrollingElement; )
- (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) && scrollableElements.push({
- element: parent,
- scrollTop: parent.scrollTop,
- scrollLeft: parent.scrollLeft
- }), parent = parent.parentNode;
- return rootScrollingElement instanceof HTMLElement && scrollableElements.push({
- element: rootScrollingElement,
- scrollTop: rootScrollingElement.scrollTop,
- scrollLeft: rootScrollingElement.scrollLeft
- }), scrollableElements;
- }
- function $7215afc6de606d6b$var$restoreScrollPosition(scrollableElements) {
- for (let { element, scrollTop, scrollLeft } of scrollableElements)
- element.scrollTop = scrollTop, element.scrollLeft = scrollLeft;
- }
-
- // ../../node_modules/@react-aria/utils/dist/platform.mjs
- function $c87311424ea30a05$var$testUserAgent(re) {
- var _window_navigator_userAgentData;
- if (typeof window > "u" || window.navigator == null) return !1;
- let brands = (_window_navigator_userAgentData = window.navigator.userAgentData) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.brands;
- return Array.isArray(brands) && brands.some((brand) => re.test(brand.brand)) || re.test(window.navigator.userAgent);
- }
- function $c87311424ea30a05$var$testPlatform(re) {
- var _window_navigator_userAgentData;
- return typeof window < "u" && window.navigator != null ? re.test(((_window_navigator_userAgentData = window.navigator.userAgentData) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.platform) || window.navigator.platform) : !1;
- }
- function $c87311424ea30a05$var$cached(fn) {
- let res = null;
- return () => (res == null && (res = fn()), res);
- }
- var $c87311424ea30a05$export$9ac100e40613ea10 = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$var$testPlatform(/^Mac/i);
- }), $c87311424ea30a05$export$186c6964ca17d99 = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$var$testPlatform(/^iPhone/i);
- }), $c87311424ea30a05$export$7bef049ce92e4224 = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$var$testPlatform(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
- $c87311424ea30a05$export$9ac100e40613ea10() && navigator.maxTouchPoints > 1;
- }), $c87311424ea30a05$export$fedb369cb70207f1 = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$export$186c6964ca17d99() || $c87311424ea30a05$export$7bef049ce92e4224();
- }), $c87311424ea30a05$export$e1865c3bedcd822b = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$export$9ac100e40613ea10() || $c87311424ea30a05$export$fedb369cb70207f1();
- }), $c87311424ea30a05$export$78551043582a6a98 = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$var$testUserAgent(/AppleWebKit/i) && !$c87311424ea30a05$export$6446a186d09e379e();
- }), $c87311424ea30a05$export$6446a186d09e379e = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$var$testUserAgent(/Chrome/i);
- }), $c87311424ea30a05$export$a11b0059900ceec8 = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$var$testUserAgent(/Android/i);
- }), $c87311424ea30a05$export$b7d78993b74f766d = $c87311424ea30a05$var$cached(function() {
- return $c87311424ea30a05$var$testUserAgent(/Firefox/i);
- });
-
- // ../../node_modules/@react-aria/utils/dist/openLink.mjs
- init_react();
- var $ea8dcbcb9ea1b556$var$RouterContext = createContext({
- isNative: !0,
- open: $ea8dcbcb9ea1b556$var$openSyntheticLink,
- useHref: (href) => href
- });
- function $ea8dcbcb9ea1b556$export$95185d699e05d4d7(target, modifiers2, setOpening = !0) {
- var _window_event_type, _window_event;
- let { metaKey, ctrlKey, altKey, shiftKey } = modifiers2;
- $c87311424ea30a05$export$b7d78993b74f766d() && (!((_window_event = window.event) === null || _window_event === void 0 || (_window_event_type = _window_event.type) === null || _window_event_type === void 0) && _window_event_type.startsWith("key")) && target.target === "_blank" && ($c87311424ea30a05$export$9ac100e40613ea10() ? metaKey = !0 : ctrlKey = !0);
- let event = $c87311424ea30a05$export$78551043582a6a98() && $c87311424ea30a05$export$9ac100e40613ea10() && !$c87311424ea30a05$export$7bef049ce92e4224() ? new KeyboardEvent("keydown", {
- keyIdentifier: "Enter",
- metaKey,
- ctrlKey,
- altKey,
- shiftKey
- }) : new MouseEvent("click", {
- metaKey,
- ctrlKey,
- altKey,
- shiftKey,
- detail: 1,
- bubbles: !0,
- cancelable: !0
- });
- $ea8dcbcb9ea1b556$export$95185d699e05d4d7.isOpening = setOpening, $7215afc6de606d6b$export$de79e2c695e052f3(target), target.dispatchEvent(event), $ea8dcbcb9ea1b556$export$95185d699e05d4d7.isOpening = !1;
- }
- $ea8dcbcb9ea1b556$export$95185d699e05d4d7.isOpening = !1;
- function $ea8dcbcb9ea1b556$var$getSyntheticLink(target, open) {
- if (target instanceof HTMLAnchorElement) open(target);
- else if (target.hasAttribute("data-href")) {
- let link = document.createElement("a");
- link.href = target.getAttribute("data-href"), target.hasAttribute("data-target") && (link.target = target.getAttribute("data-target")), target.hasAttribute("data-rel") && (link.rel = target.getAttribute("data-rel")), target.hasAttribute("data-download") && (link.download = target.getAttribute("data-download")), target.hasAttribute("data-ping") && (link.ping = target.getAttribute("data-ping")), target.hasAttribute("data-referrer-policy") && (link.referrerPolicy = target.getAttribute("data-referrer-policy")), target.appendChild(link), open(link), target.removeChild(link);
- }
- }
- function $ea8dcbcb9ea1b556$var$openSyntheticLink(target, modifiers2) {
- $ea8dcbcb9ea1b556$var$getSyntheticLink(target, (link) => $ea8dcbcb9ea1b556$export$95185d699e05d4d7(link, modifiers2));
- }
-
- // ../../node_modules/@react-aria/utils/dist/runAfterTransition.mjs
- var $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map(), $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
- function $bbed8b41f857bcc0$var$setupGlobalEvents() {
- if (typeof window > "u") return;
- function isTransitionEvent(event) {
- return "propertyName" in event;
- }
- let onTransitionStart = (e2) => {
- if (!isTransitionEvent(e2) || !e2.target) return;
- let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e2.target);
- transitions || (transitions = /* @__PURE__ */ new Set(), $bbed8b41f857bcc0$var$transitionsByElement.set(e2.target, transitions), e2.target.addEventListener("transitioncancel", onTransitionEnd, {
- once: !0
- })), transitions.add(e2.propertyName);
- }, onTransitionEnd = (e2) => {
- if (!isTransitionEvent(e2) || !e2.target) return;
- let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e2.target);
- if (properties && (properties.delete(e2.propertyName), properties.size === 0 && (e2.target.removeEventListener("transitioncancel", onTransitionEnd), $bbed8b41f857bcc0$var$transitionsByElement.delete(e2.target)), $bbed8b41f857bcc0$var$transitionsByElement.size === 0)) {
- for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks) cb();
- $bbed8b41f857bcc0$var$transitionCallbacks.clear();
- }
- };
- document.body.addEventListener("transitionrun", onTransitionStart), document.body.addEventListener("transitionend", onTransitionEnd);
- }
- typeof document < "u" && (document.readyState !== "loading" ? $bbed8b41f857bcc0$var$setupGlobalEvents() : document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents));
- function $bbed8b41f857bcc0$var$cleanupDetachedElements() {
- for (let [eventTarget] of $bbed8b41f857bcc0$var$transitionsByElement)
- "isConnected" in eventTarget && !eventTarget.isConnected && $bbed8b41f857bcc0$var$transitionsByElement.delete(eventTarget);
- }
- function $bbed8b41f857bcc0$export$24490316f764c430(fn) {
- requestAnimationFrame(() => {
- $bbed8b41f857bcc0$var$cleanupDetachedElements(), $bbed8b41f857bcc0$var$transitionsByElement.size === 0 ? fn() : $bbed8b41f857bcc0$var$transitionCallbacks.add(fn);
- });
- }
-
- // ../../node_modules/@react-aria/utils/dist/useDrag1D.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useGlobalListeners.mjs
- init_react();
- function $03deb23ff14920c4$export$4eaf04e54aa8eed6() {
- let globalListeners = useRef(/* @__PURE__ */ new Map()), addGlobalListener = useCallback((eventTarget, type, listener, options2) => {
- let fn = options2?.once ? (...args) => {
- globalListeners.current.delete(listener), listener(...args);
- } : listener;
- globalListeners.current.set(listener, {
- type,
- eventTarget,
- fn,
- options: options2
- }), eventTarget.addEventListener(type, fn, options2);
- }, []), removeGlobalListener = useCallback((eventTarget, type, listener, options2) => {
- var _globalListeners_current_get;
- let fn = ((_globalListeners_current_get = globalListeners.current.get(listener)) === null || _globalListeners_current_get === void 0 ? void 0 : _globalListeners_current_get.fn) || listener;
- eventTarget.removeEventListener(type, fn, options2), globalListeners.current.delete(listener);
- }, []), removeAllGlobalListeners = useCallback(() => {
- globalListeners.current.forEach((value, key) => {
- removeGlobalListener(value.eventTarget, value.type, key, value.options);
- });
- }, [
- removeGlobalListener
- ]);
- return useEffect(() => removeAllGlobalListeners, [
- removeAllGlobalListeners
- ]), {
- addGlobalListener,
- removeGlobalListener,
- removeAllGlobalListeners
- };
- }
-
- // ../../node_modules/@react-aria/utils/dist/useObjectRef.mjs
- init_react();
- function $df56164dff5785e2$export$4338b53315abf666(ref) {
- let objRef = useRef(null), cleanupRef = useRef(void 0), refEffect = useCallback((instance) => {
- if (typeof ref == "function") {
- let refCallback = ref, refCleanup = refCallback(instance);
- return () => {
- typeof refCleanup == "function" ? refCleanup() : refCallback(null);
- };
- } else if (ref)
- return ref.current = instance, () => {
- ref.current = null;
- };
- }, [
- ref
- ]);
- return useMemo(() => ({
- get current() {
- return objRef.current;
- },
- set current(value) {
- objRef.current = value, cleanupRef.current && (cleanupRef.current(), cleanupRef.current = void 0), value != null && (cleanupRef.current = refEffect(value));
- }
- }), [
- refEffect
- ]);
- }
-
- // ../../node_modules/@react-aria/utils/dist/useEffectEvent.mjs
- init_react();
- var $8ae05eaa5c114e9c$var$_React_useInsertionEffect, $8ae05eaa5c114e9c$var$useEarlyEffect = ($8ae05eaa5c114e9c$var$_React_useInsertionEffect = react_default.useInsertionEffect) !== null && $8ae05eaa5c114e9c$var$_React_useInsertionEffect !== void 0 ? $8ae05eaa5c114e9c$var$_React_useInsertionEffect : $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c;
- function $8ae05eaa5c114e9c$export$7f54fc3180508a52(fn) {
- let ref = useRef(null);
- return $8ae05eaa5c114e9c$var$useEarlyEffect(() => {
- ref.current = fn;
- }, [
- fn
- ]), useCallback((...args) => {
- let f2 = ref.current;
- return f2?.(...args);
- }, []);
- }
-
- // ../../node_modules/@react-aria/utils/dist/useUpdateEffect.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useUpdateLayoutEffect.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useResizeObserver.mjs
- init_react();
- function $9daab02d461809db$var$hasResizeObserver() {
- return typeof window.ResizeObserver < "u";
- }
- function $9daab02d461809db$export$683480f191c0e3ea(options2) {
- let { ref, box, onResize } = options2, onResizeEvent = $8ae05eaa5c114e9c$export$7f54fc3180508a52(onResize);
- useEffect(() => {
- let element = ref?.current;
- if (element)
- if ($9daab02d461809db$var$hasResizeObserver()) {
- let resizeObserverInstance = new window.ResizeObserver((entries) => {
- entries.length && onResizeEvent();
- });
- return resizeObserverInstance.observe(element, {
- box
- }), () => {
- element && resizeObserverInstance.unobserve(element);
- };
- } else
- return window.addEventListener("resize", onResizeEvent, !1), () => {
- window.removeEventListener("resize", onResizeEvent, !1);
- };
- }, [
- ref,
- box
- ]);
- }
-
- // ../../node_modules/@react-aria/utils/dist/useSyncRef.mjs
- function $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref) {
- $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
- if (context && context.ref && ref)
- return context.ref.current = ref.current, () => {
- context.ref && (context.ref.current = null);
- };
- });
- }
-
- // ../../node_modules/@react-aria/utils/dist/useViewportSize.mjs
- init_react();
- var $5df64b3807dc15ee$var$visualViewport = typeof document < "u" && window.visualViewport;
-
- // ../../node_modules/@react-aria/utils/dist/useDescription.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useEvent.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/isVirtualEvent.mjs
- function $6a7db85432448f7f$export$60278871457622de(event) {
- return event.pointerType === "" && event.isTrusted ? !0 : $c87311424ea30a05$export$a11b0059900ceec8() && event.pointerType ? event.type === "click" && event.buttons === 1 : event.detail === 0 && !event.pointerType;
- }
- function $6a7db85432448f7f$export$29bf1b5f2c56cf63(event) {
- return !$c87311424ea30a05$export$a11b0059900ceec8() && event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "mouse";
- }
-
- // ../../node_modules/@react-aria/utils/dist/useDeepMemo.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useFormReset.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useLoadMore.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/useLoadMoreSentinel.mjs
- init_react();
-
- // ../../node_modules/@react-aria/utils/dist/inertValue.mjs
- init_react();
-
- // global-externals:react-dom
- var react_dom_default = __REACT_DOM__, { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED2, createPortal, createRoot: createRoot2, findDOMNode, flushSync, hydrate, hydrateRoot: hydrateRoot2, render, unmountComponentAtNode, unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, version: version2 } = __REACT_DOM__;
-
- // ../../node_modules/@react-aria/utils/dist/animation.mjs
- init_react();
- function $d3f049242431219c$export$6d3443f2c48bfc20(ref, isReady = !0) {
- let [isEntering, setEntering] = useState(!0), isAnimationReady = isEntering && isReady;
- return $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
- if (isAnimationReady && ref.current && "getAnimations" in ref.current)
- for (let animation of ref.current.getAnimations()) animation instanceof CSSTransition && animation.cancel();
- }, [
- ref,
- isAnimationReady
- ]), $d3f049242431219c$var$useAnimation(ref, isAnimationReady, useCallback(() => setEntering(!1), [])), isAnimationReady;
- }
- function $d3f049242431219c$export$45fda7c47f93fd48(ref, isOpen) {
- let [exitState, setExitState] = useState(isOpen ? "open" : "closed");
- switch (exitState) {
- case "open":
- isOpen || setExitState("exiting");
- break;
- case "closed":
- case "exiting":
- isOpen && setExitState("open");
- break;
- }
- let isExiting = exitState === "exiting";
- return $d3f049242431219c$var$useAnimation(ref, isExiting, useCallback(() => {
- setExitState((state) => state === "exiting" ? "closed" : state);
- }, [])), isExiting;
- }
- function $d3f049242431219c$var$useAnimation(ref, isActive, onEnd) {
- $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
- if (isActive && ref.current) {
- if (!("getAnimations" in ref.current)) {
- onEnd();
- return;
- }
- let animations = ref.current.getAnimations();
- if (animations.length === 0) {
- onEnd();
- return;
- }
- let canceled = !1;
- return Promise.all(animations.map((a2) => a2.finished)).then(() => {
- canceled || flushSync(() => {
- onEnd();
- });
- }).catch(() => {
- }), () => {
- canceled = !0;
- };
- }
- }, [
- ref,
- isActive,
- onEnd
- ]);
- }
-
- // ../../node_modules/@react-aria/utils/dist/isElementVisible.mjs
- var $7d2416ea0959daaa$var$supportsCheckVisibility = typeof Element < "u" && "checkVisibility" in Element.prototype;
- function $7d2416ea0959daaa$var$isStyleVisible(element) {
- let windowObject = $431fbd86ca7dc216$export$f21a1ffae260145a(element);
- if (!(element instanceof windowObject.HTMLElement) && !(element instanceof windowObject.SVGElement)) return !1;
- let { display, visibility } = element.style, isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse";
- if (isVisible) {
- let { getComputedStyle: getComputedStyle2 } = element.ownerDocument.defaultView, { display: computedDisplay, visibility: computedVisibility } = getComputedStyle2(element);
- isVisible = computedDisplay !== "none" && computedVisibility !== "hidden" && computedVisibility !== "collapse";
- }
- return isVisible;
- }
- function $7d2416ea0959daaa$var$isAttributeVisible(element, childElement) {
- return !element.hasAttribute("hidden") && // Ignore HiddenSelect when tree walking.
- !element.hasAttribute("data-react-aria-prevent-focus") && (element.nodeName === "DETAILS" && childElement && childElement.nodeName !== "SUMMARY" ? element.hasAttribute("open") : !0);
- }
- function $7d2416ea0959daaa$export$e989c0fffaa6b27a(element, childElement) {
- return $7d2416ea0959daaa$var$supportsCheckVisibility ? element.checkVisibility({
- visibilityProperty: !0
- }) && !element.closest("[data-react-aria-prevent-focus]") : element.nodeName !== "#comment" && $7d2416ea0959daaa$var$isStyleVisible(element) && $7d2416ea0959daaa$var$isAttributeVisible(element, childElement) && (!element.parentElement || $7d2416ea0959daaa$export$e989c0fffaa6b27a(element.parentElement, element));
- }
-
- // ../../node_modules/@react-aria/utils/dist/isFocusable.mjs
- var $b4b717babfbb907b$var$focusableElements = [
- "input:not([disabled]):not([type=hidden])",
- "select:not([disabled])",
- "textarea:not([disabled])",
- "button:not([disabled])",
- "a[href]",
- "area[href]",
- "summary",
- "iframe",
- "object",
- "embed",
- "audio[controls]",
- "video[controls]",
- '[contenteditable]:not([contenteditable^="false"])',
- "permission"
- ], $b4b717babfbb907b$var$FOCUSABLE_ELEMENT_SELECTOR = $b4b717babfbb907b$var$focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
- $b4b717babfbb907b$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
- var $b4b717babfbb907b$var$TABBABLE_ELEMENT_SELECTOR = $b4b717babfbb907b$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
- function $b4b717babfbb907b$export$4c063cf1350e6fed(element) {
- return element.matches($b4b717babfbb907b$var$FOCUSABLE_ELEMENT_SELECTOR) && $7d2416ea0959daaa$export$e989c0fffaa6b27a(element) && !$b4b717babfbb907b$var$isInert(element);
- }
- function $b4b717babfbb907b$var$isInert(element) {
- let node = element;
- for (; node != null; ) {
- if (node instanceof node.ownerDocument.defaultView.HTMLElement && node.inert) return !0;
- node = node.parentElement;
- }
- return !1;
- }
-
- // ../../node_modules/@react-stately/utils/dist/useControlledState.mjs
- init_react();
- var $458b0a5536c1a7cf$var$_React_useInsertionEffect, $458b0a5536c1a7cf$var$useEarlyEffect = typeof document < "u" ? ($458b0a5536c1a7cf$var$_React_useInsertionEffect = react_default.useInsertionEffect) !== null && $458b0a5536c1a7cf$var$_React_useInsertionEffect !== void 0 ? $458b0a5536c1a7cf$var$_React_useInsertionEffect : react_default.useLayoutEffect : () => {
- };
- function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
- let [stateValue, setStateValue] = useState(value || defaultValue), valueRef = useRef(stateValue), isControlledRef = useRef(value !== void 0), isControlled = value !== void 0;
- useEffect(() => {
- let wasControlled = isControlledRef.current;
- isControlledRef.current = isControlled;
- }, [
- isControlled
- ]);
- let currentValue = isControlled ? value : stateValue;
- $458b0a5536c1a7cf$var$useEarlyEffect(() => {
- valueRef.current = currentValue;
- });
- let [, forceUpdate] = useReducer(() => ({}), {}), setValue = useCallback((value2, ...args) => {
- let newValue = typeof value2 == "function" ? value2(valueRef.current) : value2;
- Object.is(valueRef.current, newValue) || (valueRef.current = newValue, setStateValue(newValue), forceUpdate(), onChange?.(newValue, ...args));
- }, [
- onChange
- ]);
- return [
- currentValue,
- setValue
- ];
- }
-
- // ../../node_modules/@react-stately/utils/dist/number.mjs
- function $9446cca9a3875146$export$7d15b64cf5a3a4c4(value, min = -1 / 0, max = 1 / 0) {
- return Math.min(Math.max(value, min), max);
- }
-
- // ../../node_modules/@react-aria/landmark/dist/useLandmark.mjs
- init_react();
- var import_shim = __toESM(require_shim(), 1), $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION = 1, $a86207c5d7f7e1fb$var$landmarkSymbol = Symbol.for("react-aria-landmark-manager");
- function $a86207c5d7f7e1fb$var$subscribe(fn) {
- return document.addEventListener("react-aria-landmark-manager-change", fn), () => document.removeEventListener("react-aria-landmark-manager-change", fn);
- }
- function $a86207c5d7f7e1fb$var$getLandmarkManager() {
- if (typeof document > "u") return null;
- let instance = document[$a86207c5d7f7e1fb$var$landmarkSymbol];
- return instance && instance.version >= $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION ? instance : (document[$a86207c5d7f7e1fb$var$landmarkSymbol] = new $a86207c5d7f7e1fb$var$LandmarkManager(), document.dispatchEvent(new CustomEvent("react-aria-landmark-manager-change")), document[$a86207c5d7f7e1fb$var$landmarkSymbol]);
- }
- function $a86207c5d7f7e1fb$var$useLandmarkManager() {
- return (0, import_shim.useSyncExternalStore)($a86207c5d7f7e1fb$var$subscribe, $a86207c5d7f7e1fb$var$getLandmarkManager, $a86207c5d7f7e1fb$var$getLandmarkManager);
- }
- var $a86207c5d7f7e1fb$var$LandmarkManager = class {
- setupIfNeeded() {
- this.isListening || (document.addEventListener("keydown", this.f6Handler, {
- capture: !0
- }), document.addEventListener("focusin", this.focusinHandler, {
- capture: !0
- }), document.addEventListener("focusout", this.focusoutHandler, {
- capture: !0
- }), this.isListening = !0);
- }
- teardownIfNeeded() {
- !this.isListening || this.landmarks.length > 0 || this.refCount > 0 || (document.removeEventListener("keydown", this.f6Handler, {
- capture: !0
- }), document.removeEventListener("focusin", this.focusinHandler, {
- capture: !0
- }), document.removeEventListener("focusout", this.focusoutHandler, {
- capture: !0
- }), this.isListening = !1);
- }
- focusLandmark(landmark, direction) {
- var _this_landmarks_find_focus, _this_landmarks_find;
- (_this_landmarks_find = this.landmarks.find((l3) => l3.ref.current === landmark)) === null || _this_landmarks_find === void 0 || (_this_landmarks_find_focus = _this_landmarks_find.focus) === null || _this_landmarks_find_focus === void 0 || _this_landmarks_find_focus.call(_this_landmarks_find, direction);
- }
- /**
- * Return set of landmarks with a specific role.
- */
- getLandmarksByRole(role) {
- return new Set(this.landmarks.filter((l3) => l3.role === role));
- }
- /**
- * Return first landmark with a specific role.
- */
- getLandmarkByRole(role) {
- return this.landmarks.find((l3) => l3.role === role);
- }
- addLandmark(newLandmark) {
- if (this.setupIfNeeded(), this.landmarks.find((landmark) => landmark.ref === newLandmark.ref) || !newLandmark.ref.current) return;
- if (this.landmarks.filter((landmark) => landmark.role === "main").length > 1, this.landmarks.length === 0) {
- this.landmarks = [
- newLandmark
- ], this.checkLabels(newLandmark.role);
- return;
- }
- let start = 0, end = this.landmarks.length - 1;
- for (; start <= end; ) {
- let mid = Math.floor((start + end) / 2), comparedPosition = newLandmark.ref.current.compareDocumentPosition(this.landmarks[mid].ref.current);
- !!(comparedPosition & Node.DOCUMENT_POSITION_PRECEDING || comparedPosition & Node.DOCUMENT_POSITION_CONTAINS) ? start = mid + 1 : end = mid - 1;
- }
- this.landmarks.splice(start, 0, newLandmark), this.checkLabels(newLandmark.role);
- }
- updateLandmark(landmark) {
- let index = this.landmarks.findIndex((l3) => l3.ref === landmark.ref);
- index >= 0 && (this.landmarks[index] = {
- ...this.landmarks[index],
- ...landmark
- }, this.checkLabels(this.landmarks[index].role));
- }
- removeLandmark(ref) {
- this.landmarks = this.landmarks.filter((landmark) => landmark.ref !== ref), this.teardownIfNeeded();
- }
- /**
- * Warn if there are 2+ landmarks with the same role but no label.
- * Labels for landmarks with the same role must also be unique.
- *
- * See https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/.
- */
- checkLabels(role) {
- let landmarksWithRole = this.getLandmarksByRole(role);
- landmarksWithRole.size > 1 && [
- ...landmarksWithRole
- ].filter((landmark) => !landmark.label).length > 0;
- }
- /**
- * Get the landmark that is the closest parent in the DOM.
- * Returns undefined if no parent is a landmark.
- */
- closestLandmark(element) {
- let landmarkMap = new Map(this.landmarks.map((l3) => [
- l3.ref.current,
- l3
- ])), currentElement = element;
- for (; currentElement && !landmarkMap.has(currentElement) && currentElement !== document.body && currentElement.parentElement; ) currentElement = currentElement.parentElement;
- return landmarkMap.get(currentElement);
- }
- /**
- * Gets the next landmark, in DOM focus order, or previous if backwards is specified.
- * If last landmark, next should be the first landmark.
- * If not inside a landmark, will return first landmark.
- * Returns undefined if there are no landmarks.
- */
- getNextLandmark(element, { backward }) {
- var _this_landmarks_nextLandmarkIndex_ref_current;
- let currentLandmark = this.closestLandmark(element), nextLandmarkIndex = backward ? this.landmarks.length - 1 : 0;
- currentLandmark && (nextLandmarkIndex = this.landmarks.indexOf(currentLandmark) + (backward ? -1 : 1));
- let wrapIfNeeded = () => {
- if (nextLandmarkIndex < 0) {
- if (!element.dispatchEvent(new CustomEvent("react-aria-landmark-navigation", {
- detail: {
- direction: "backward"
- },
- bubbles: !0,
- cancelable: !0
- }))) return !0;
- nextLandmarkIndex = this.landmarks.length - 1;
- } else if (nextLandmarkIndex >= this.landmarks.length) {
- if (!element.dispatchEvent(new CustomEvent("react-aria-landmark-navigation", {
- detail: {
- direction: "forward"
- },
- bubbles: !0,
- cancelable: !0
- }))) return !0;
- nextLandmarkIndex = 0;
- }
- return nextLandmarkIndex < 0 || nextLandmarkIndex >= this.landmarks.length;
- };
- if (wrapIfNeeded()) return;
- let i2 = nextLandmarkIndex;
- for (; !((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0) && _this_landmarks_nextLandmarkIndex_ref_current.closest("[aria-hidden=true]"); ) {
- if (nextLandmarkIndex += backward ? -1 : 1, wrapIfNeeded()) return;
- if (nextLandmarkIndex === i2) break;
- }
- return this.landmarks[nextLandmarkIndex];
- }
- /**
- * Look at next landmark. If an element was previously focused inside, restore focus there.
- * If not, focus the landmark itself.
- * If no landmarks at all, or none with focusable elements, don't move focus.
- */
- f6Handler(e2) {
- e2.key === "F6" && (e2.altKey ? this.focusMain() : this.navigate(e2.target, e2.shiftKey)) && (e2.preventDefault(), e2.stopPropagation());
- }
- focusMain() {
- let main = this.getLandmarkByRole("main");
- return main && main.ref.current && document.contains(main.ref.current) ? (this.focusLandmark(main.ref.current, "forward"), !0) : !1;
- }
- navigate(from, backward) {
- let nextLandmark = this.getNextLandmark(from, {
- backward
- });
- if (!nextLandmark) return !1;
- if (nextLandmark.lastFocused) {
- let lastFocused = nextLandmark.lastFocused;
- if (document.body.contains(lastFocused))
- return lastFocused.focus(), !0;
- }
- return nextLandmark.ref.current && document.contains(nextLandmark.ref.current) ? (this.focusLandmark(nextLandmark.ref.current, backward ? "backward" : "forward"), !0) : !1;
- }
- /**
- * Sets lastFocused for a landmark, if focus is moved within that landmark.
- * Lets the last focused landmark know it was blurred if something else is focused.
- */
- focusinHandler(e2) {
- let currentLandmark = this.closestLandmark(e2.target);
- currentLandmark && currentLandmark.ref.current !== e2.target && this.updateLandmark({
- ref: currentLandmark.ref,
- lastFocused: e2.target
- });
- let previousFocusedElement = e2.relatedTarget;
- if (previousFocusedElement) {
- let closestPreviousLandmark = this.closestLandmark(previousFocusedElement);
- closestPreviousLandmark && closestPreviousLandmark.ref.current === previousFocusedElement && closestPreviousLandmark.blur();
- }
- }
- /**
- * Track if the focus is lost to the body. If it is, do cleanup on the landmark that last had focus.
- */
- focusoutHandler(e2) {
- let previousFocusedElement = e2.target, nextFocusedElement = e2.relatedTarget;
- if (!nextFocusedElement || nextFocusedElement === document) {
- let closestPreviousLandmark = this.closestLandmark(previousFocusedElement);
- closestPreviousLandmark && closestPreviousLandmark.ref.current === previousFocusedElement && closestPreviousLandmark.blur();
- }
- }
- createLandmarkController() {
- let instance = this;
- return instance.refCount++, instance.setupIfNeeded(), {
- navigate(direction, opts) {
- let element = opts?.from || document.activeElement;
- return instance.navigate(element, direction === "backward");
- },
- focusNext(opts) {
- let element = opts?.from || document.activeElement;
- return instance.navigate(element, !1);
- },
- focusPrevious(opts) {
- let element = opts?.from || document.activeElement;
- return instance.navigate(element, !0);
- },
- focusMain() {
- return instance.focusMain();
- },
- dispose() {
- instance && (instance.refCount--, instance.teardownIfNeeded(), instance = null);
- }
- };
- }
- registerLandmark(landmark) {
- return this.landmarks.find((l3) => l3.ref === landmark.ref) ? this.updateLandmark(landmark) : this.addLandmark(landmark), () => this.removeLandmark(landmark.ref);
- }
- constructor() {
- this.landmarks = [], this.isListening = !1, this.refCount = 0, this.version = $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION, this.f6Handler = this.f6Handler.bind(this), this.focusinHandler = this.focusinHandler.bind(this), this.focusoutHandler = this.focusoutHandler.bind(this);
- }
- };
- function $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref) {
- let { role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, focus } = props, manager = $a86207c5d7f7e1fb$var$useLandmarkManager(), label = ariaLabel || ariaLabelledby, [isLandmarkFocused, setIsLandmarkFocused] = useState(!1), defaultFocus = useCallback(() => {
- setIsLandmarkFocused(!0);
- }, [
- setIsLandmarkFocused
- ]), blur = useCallback(() => {
- setIsLandmarkFocused(!1);
- }, [
- setIsLandmarkFocused
- ]);
- return $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
- if (manager) return manager.registerLandmark({
- ref,
- label,
- role,
- focus: focus || defaultFocus,
- blur
- });
- }, [
- manager,
- label,
- ref,
- role,
- focus,
- defaultFocus,
- blur
- ]), useEffect(() => {
- var _ref_current;
- isLandmarkFocused && ((_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.focus());
- }, [
- isLandmarkFocused,
- ref
- ]), {
- landmarkProps: {
- role,
- tabIndex: isLandmarkFocused ? -1 : void 0,
- "aria-label": ariaLabel,
- "aria-labelledby": ariaLabelledby
- }
- };
- }
-
- // src/manager/hooks/useLandmark.ts
- function useLandmark(props, ref) {
- let { landmarkProps } = $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref);
- return {
- landmarkProps: {
- ...landmarkProps,
- "data-sb-landmark": !0
- }
- };
- }
-
- // src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx
- init_react();
- var MobileAddonsDrawer = ({
- children,
- id,
- isOpen,
- onOpenChange
- }) => react_default.createElement(
- Modal,
- {
- ariaLabel: "Addon panel",
- transitionDuration: 300,
- variant: "bottom-drawer",
- height: "42vh",
- id,
- open: isOpen,
- onOpenChange
- },
- children
- );
-
- // src/manager/components/mobile/navigation/MobileMenuDrawer.tsx
- init_react();
-
- // src/manager/components/mobile/about/MobileAbout.tsx
- init_react();
-
- // ../../node_modules/react-transition-state/dist/esm/hooks/useTransitionState.mjs
- init_react();
-
- // ../../node_modules/react-transition-state/dist/esm/hooks/utils.mjs
- var STATUS = ["preEnter", "entering", "entered", "preExit", "exiting", "exited", "unmounted"], getState = (status) => ({
- _s: status,
- status: STATUS[status],
- isEnter: status < 3,
- isMounted: status !== 6,
- isResolved: status === 2 || status > 4
- }), startOrEnd = (unmounted) => unmounted ? 6 : 5, getEndStatus = (status, unmountOnExit) => {
- switch (status) {
- case 1:
- case 0:
- return 2;
- case 4:
- case 3:
- return startOrEnd(unmountOnExit);
- }
- }, getTimeout = (timeout) => typeof timeout == "object" ? [timeout.enter, timeout.exit] : [timeout, timeout], nextTick = (transitState, status) => setTimeout(() => {
- isNaN(document.body.offsetTop) || transitState(status + 1);
- }, 0);
-
- // ../../node_modules/react-transition-state/dist/esm/hooks/useTransitionState.mjs
- var updateState = (status, setState, latestState, timeoutId, onChange) => {
- clearTimeout(timeoutId.current);
- let state = getState(status);
- setState(state), latestState.current = state, onChange && onChange({
- current: state
- });
- }, useTransitionState = ({
- enter = !0,
- exit = !0,
- preEnter,
- preExit,
- timeout,
- initialEntered,
- mountOnEnter,
- unmountOnExit,
- onStateChange: onChange
- } = {}) => {
- let [state, setState] = useState(() => getState(initialEntered ? 2 : startOrEnd(mountOnEnter))), latestState = useRef(state), timeoutId = useRef(), [enterTimeout, exitTimeout] = getTimeout(timeout), endTransition = useCallback(() => {
- let status = getEndStatus(latestState.current._s, unmountOnExit);
- status && updateState(status, setState, latestState, timeoutId, onChange);
- }, [onChange, unmountOnExit]), toggle = useCallback((toEnter) => {
- let transitState = (status) => {
- switch (updateState(status, setState, latestState, timeoutId, onChange), status) {
- case 1:
- enterTimeout >= 0 && (timeoutId.current = setTimeout(endTransition, enterTimeout));
- break;
- case 4:
- exitTimeout >= 0 && (timeoutId.current = setTimeout(endTransition, exitTimeout));
- break;
- case 0:
- case 3:
- timeoutId.current = nextTick(transitState, status);
- break;
- }
- }, enterStage = latestState.current.isEnter;
- typeof toEnter != "boolean" && (toEnter = !enterStage), toEnter ? !enterStage && transitState(enter ? preEnter ? 0 : 1 : 2) : enterStage && transitState(exit ? preExit ? 3 : 4 : startOrEnd(unmountOnExit));
- }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
- return [state, toggle, endTransition];
- };
-
- // ../../node_modules/react-transition-state/dist/esm/hooks/useTransitionMap.mjs
- init_react();
- var updateState2 = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
- clearTimeout(timeoutId);
- let state = getState(status), stateMap = new Map(latestStateMap.current);
- stateMap.set(key, state), setStateMap(stateMap), latestStateMap.current = stateMap, onChange && onChange({
- key,
- current: state
- });
- }, useTransitionMap = ({
- allowMultiple,
- enter = !0,
- exit = !0,
- preEnter,
- preExit,
- timeout,
- initialEntered,
- mountOnEnter,
- unmountOnExit,
- onStateChange: onChange
- } = {}) => {
- let [stateMap, setStateMap] = useState(/* @__PURE__ */ new Map()), latestStateMap = useRef(stateMap), configMap = useRef(/* @__PURE__ */ new Map()), [enterTimeout, exitTimeout] = getTimeout(timeout), setItem = useCallback((key, config) => {
- let {
- initialEntered: _initialEntered = initialEntered
- } = config || {}, status = _initialEntered ? 2 : startOrEnd(mountOnEnter);
- updateState2(key, status, setStateMap, latestStateMap), configMap.current.set(key, {});
- }, [initialEntered, mountOnEnter]), deleteItem = useCallback((key) => {
- let newStateMap = new Map(latestStateMap.current);
- return newStateMap.delete(key) ? (setStateMap(newStateMap), latestStateMap.current = newStateMap, configMap.current.delete(key), !0) : !1;
- }, []), endTransition = useCallback((key) => {
- let stateObj = latestStateMap.current.get(key);
- if (!stateObj)
- return;
- let {
- timeoutId
- } = configMap.current.get(key), status = getEndStatus(stateObj._s, unmountOnExit);
- status && updateState2(key, status, setStateMap, latestStateMap, timeoutId, onChange);
- }, [onChange, unmountOnExit]), toggle = useCallback((key, toEnter) => {
- let stateObj = latestStateMap.current.get(key);
- if (!stateObj)
- return;
- let config = configMap.current.get(key), transitState = (status) => {
- switch (updateState2(key, status, setStateMap, latestStateMap, config.timeoutId, onChange), status) {
- case 1:
- enterTimeout >= 0 && (config.timeoutId = setTimeout(() => endTransition(key), enterTimeout));
- break;
- case 4:
- exitTimeout >= 0 && (config.timeoutId = setTimeout(() => endTransition(key), exitTimeout));
- break;
- case 0:
- case 3:
- config.timeoutId = nextTick(transitState, status);
- break;
- }
- }, enterStage = stateObj.isEnter;
- typeof toEnter != "boolean" && (toEnter = !enterStage), toEnter ? enterStage || (transitState(enter ? preEnter ? 0 : 1 : 2), !allowMultiple && latestStateMap.current.forEach((_2, _key) => _key !== key && toggle(_key, !1))) : enterStage && transitState(exit ? preExit ? 3 : 4 : startOrEnd(unmountOnExit));
- }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]), toggleAll = useCallback((toEnter) => {
- if (!(!allowMultiple && toEnter !== !1))
- for (let key of latestStateMap.current.keys()) toggle(key, toEnter);
- }, [allowMultiple, toggle]);
- return {
- stateMap,
- toggle,
- toggleAll,
- endTransition,
- setItem,
- deleteItem
- };
- };
-
- // src/manager/components/upgrade/UpgradeBlock.tsx
- init_react();
- var UpgradeBlock = ({ onNavigateToWhatsNew }) => {
- let api = useStorybookApi(), [activeTab, setActiveTab] = useState("npm");
- return react_default.createElement(Container2, null, react_default.createElement("strong", null, "You are on Storybook ", api.getCurrentVersion().version), react_default.createElement("p", null, "Run the following script to check for updates and upgrade to the latest version."), react_default.createElement(Tabs2, null, react_default.createElement(ButtonTab, { active: activeTab === "npm", onClick: () => setActiveTab("npm") }, "npm"), react_default.createElement(ButtonTab, { active: activeTab === "yarn", onClick: () => setActiveTab("yarn") }, "yarn"), react_default.createElement(ButtonTab, { active: activeTab === "pnpm", onClick: () => setActiveTab("pnpm") }, "pnpm")), react_default.createElement(Code2, null, activeTab === "npm" ? "npx storybook@latest upgrade" : `${activeTab} dlx storybook@latest upgrade`), onNavigateToWhatsNew && react_default.createElement(Link, { onClick: onNavigateToWhatsNew }, "See what's new in Storybook"));
- }, Container2 = styled.div(({ theme }) => ({
- border: "1px solid",
- borderRadius: 5,
- padding: 20,
- marginTop: 0,
- borderColor: theme.appBorderColor,
- fontSize: theme.typography.size.s2,
- width: "100%",
- [MEDIA_DESKTOP_BREAKPOINT]: {
- maxWidth: 400
- }
- })), Tabs2 = styled.div({
- display: "flex",
- gap: 2
- }), Code2 = styled.pre(({ theme }) => ({
- background: theme.base === "light" ? "rgba(0, 0, 0, 0.05)" : theme.appBorderColor,
- fontSize: theme.typography.size.s2 - 1,
- margin: "4px 0 16px"
- })), ButtonTab = styled.button(({ theme, active }) => ({
- all: "unset",
- alignItems: "center",
- gap: 10,
- color: theme.color.defaultText,
- fontSize: theme.typography.size.s2 - 1,
- borderBottom: "2px solid transparent",
- borderBottomColor: active ? theme.color.secondary : "none",
- padding: "0 10px 5px",
- marginBottom: "5px",
- cursor: "pointer"
- }));
-
- // src/manager/components/mobile/about/MobileAbout.tsx
- var MobileAbout = () => {
- let { isMobileAboutOpen, setMobileAboutOpen } = useLayout(), aboutRef = useRef(null), [state, toggle] = useTransitionState({
- timeout: 300,
- mountOnEnter: !0,
- unmountOnExit: !0
- });
- return useEffect(() => {
- toggle(isMobileAboutOpen);
- }, [isMobileAboutOpen, toggle]), state.isMounted ? react_default.createElement(
- Container3,
- {
- ref: aboutRef,
- $status: state.status,
- $transitionDuration: 300
- },
- react_default.createElement(ScrollArea, { vertical: !0, offset: 3, scrollbarSize: 6 }, react_default.createElement(InnerArea, null, react_default.createElement(
- CloseButton,
- {
- onClick: () => setMobileAboutOpen(!1),
- ariaLabel: "Close about section",
- tooltip: "Close about section",
- variant: "ghost"
- },
- react_default.createElement(ArrowLeftIcon, null),
- "Back"
- ), react_default.createElement(LinkContainer, null, react_default.createElement(
- LinkLine,
- {
- href: "https://github.com/storybookjs/storybook",
- target: "_blank",
- rel: "noopener noreferrer"
- },
- react_default.createElement(LinkLeft, null, react_default.createElement(GithubIcon, null), react_default.createElement("span", null, "Github")),
- react_default.createElement(ShareAltIcon, { width: 12 })
- ), react_default.createElement(
- LinkLine,
- {
- href: "https://storybook.js.org/docs/get-started/install?ref=ui",
- target: "_blank",
- rel: "noopener noreferrer"
- },
- react_default.createElement(LinkLeft, null, react_default.createElement(StorybookIcon, null), react_default.createElement("span", null, "Documentation")),
- react_default.createElement(ShareAltIcon, { width: 12 })
- )), react_default.createElement(UpgradeBlock, null), react_default.createElement(BottomText, null, "Open source software maintained by", " ", react_default.createElement(Link, { href: "https://chromatic.com", target: "_blank", rel: "noopener noreferrer" }, "Chromatic"), " ", "and the", " ", react_default.createElement(
- Link,
- {
- href: "https://github.com/storybookjs/storybook/graphs/contributors",
- rel: "noopener noreferrer"
- },
- "Storybook Community"
- ))))
- ) : null;
- }, slideFromRight = keyframes({
- from: {
- opacity: 0,
- transform: "translate(20px, 0)"
- },
- to: {
- opacity: 1,
- transform: "translate(0, 0)"
- }
- }), slideToRight = keyframes({
- from: {
- opacity: 1,
- transform: "translate(0, 0)"
- },
- to: {
- opacity: 0,
- transform: "translate(20px, 0)"
- }
- }), Container3 = styled.div(
- ({ theme, $status, $transitionDuration }) => ({
- position: "absolute",
- width: "100%",
- height: "100%",
- borderRadius: "10px 10px 0 0",
- top: 0,
- left: 0,
- zIndex: 11,
- overflow: "auto",
- color: theme.color.defaultText,
- background: theme.background.content,
- animation: $status === "exiting" ? `${slideToRight} ${$transitionDuration}ms` : `${slideFromRight} ${$transitionDuration}ms`
- })
- ), InnerArea = styled.div({
- display: "flex",
- flexDirection: "column",
- gap: 20,
- padding: "25px 12px 20px"
- }), LinkContainer = styled.div({}), LinkLine = styled.a(({ theme }) => ({
- all: "unset",
- display: "flex",
- alignItems: "center",
- justifyContent: "space-between",
- fontSize: theme.typography.size.s2 - 1,
- borderBottom: `1px solid ${theme.appBorderColor}`,
- cursor: "pointer",
- padding: "0 10px",
- "&:last-child": {
- borderBottom: "none"
- }
- })), LinkLeft = styled.div(({ theme }) => ({
- display: "flex",
- alignItems: "center",
- fontSize: theme.typography.size.s2 - 1,
- height: 40,
- gap: 5
- })), BottomText = styled.div(({ theme }) => ({
- fontSize: theme.typography.size.s2 - 1,
- marginTop: 30
- })), CloseButton = styled(Button)({
- alignSelf: "start"
- });
-
- // src/manager/components/mobile/navigation/MobileMenuDrawer.tsx
- var MobileMenuDrawer = ({
- children,
- id,
- isOpen,
- onOpenChange
- }) => react_default.createElement(
- Modal,
- {
- ariaLabel: "Menu",
- transitionDuration: 300,
- variant: "bottom-drawer",
- height: "80vh",
- id,
- open: isOpen,
- onOpenChange
- },
- children,
- react_default.createElement(MobileAbout, null)
- );
-
- // src/manager/components/mobile/navigation/MobileNavigation.tsx
- function combineIndexes(rootIndex, refs) {
- let combinedIndex = { ...rootIndex || {} };
- return Object.values(refs).forEach((ref) => {
- ref.index && Object.assign(combinedIndex, ref.index);
- }), combinedIndex;
- }
- var useFullStoryName = () => {
- let { index, refs } = useStorybookState(), api = useStorybookApi(), currentStory = api.getCurrentStoryData();
- if (!currentStory)
- return "";
- let combinedIndex = combineIndexes(index, refs || {}), storyLabel = currentStory.renderLabel?.(currentStory, api), fullStoryName = typeof storyLabel == "string" ? storyLabel : currentStory.name, node = combinedIndex[currentStory.id];
- for (; node && "parent" in node && node.parent && combinedIndex[node.parent] && fullStoryName.length < 24; ) {
- node = combinedIndex[node.parent];
- let parentLabel = node.renderLabel?.(node, api);
- fullStoryName = `${typeof parentLabel == "string" ? parentLabel : node.name}/${fullStoryName}`;
- }
- return fullStoryName;
- }, MobileNavigation = ({
- menu,
- panel,
- showPanel,
- ...props
- }) => {
- let { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(), fullStoryName = useFullStoryName(), headingId = $bdb11010cef70236$export$f680877a34711e37(), sectionRef = useRef(null), { landmarkProps } = useLandmark(
- { "aria-labelledby": headingId, role: "banner" },
- sectionRef
- );
- return react_default.createElement(Container4, { ...props }, react_default.createElement(
- MobileMenuDrawer,
- {
- id: "storybook-mobile-menu",
- isOpen: isMobileMenuOpen,
- onOpenChange: setMobileMenuOpen
- },
- menu
- ), react_default.createElement(
- MobileAddonsDrawer,
- {
- id: "storybook-mobile-addon-panel",
- isOpen: isMobilePanelOpen,
- onOpenChange: setMobilePanelOpen
- },
- panel
- ), !isMobilePanelOpen && react_default.createElement(MobileBottomBar, { className: "sb-bar", ...landmarkProps, ref: sectionRef }, react_default.createElement("h2", { id: headingId, className: "sb-sr-only" }, "Navigation controls"), react_default.createElement(
- BottomBarButton,
- {
- padding: "small",
- variant: "ghost",
- onClick: () => setMobileMenuOpen(!isMobileMenuOpen),
- ariaLabel: "Open navigation menu",
- "aria-expanded": isMobileMenuOpen,
- "aria-controls": "storybook-mobile-menu"
- },
- react_default.createElement(MenuIcon, null),
- react_default.createElement(Text, null, fullStoryName)
- ), react_default.createElement("span", { className: "sb-sr-only", "aria-current": "page" }, fullStoryName), showPanel && react_default.createElement(
- BottomBarButton,
- {
- padding: "small",
- variant: "ghost",
- onClick: () => setMobilePanelOpen(!0),
- ariaLabel: "Open addon panel",
- "aria-expanded": isMobilePanelOpen,
- "aria-controls": "storybook-mobile-addon-panel"
- },
- react_default.createElement(BottomBarToggleIcon, null)
- )));
- }, Container4 = styled.section(({ theme }) => ({
- bottom: 0,
- left: 0,
- width: "100%",
- zIndex: 10,
- background: theme.barBg,
- borderTop: `1px solid ${theme.appBorderColor}`
- })), MobileBottomBar = styled.header({
- display: "flex",
- alignItems: "center",
- justifyContent: "space-between",
- width: "100%",
- height: 40,
- padding: "0 6px",
- /* Because Popper.js's tooltip is creating extra div layers, we have to
- * punch through them to configure the button to ellipsize. */
- "& > *:first-child": {
- /* 6px padding * 2 + 28px for the orientation button */
- maxWidth: "calc(100% - 40px)",
- "& > button": {
- maxWidth: "100%"
- },
- "& > button p": {
- textOverflow: "ellipsis"
- }
- }
- }), BottomBarButton = styled(Button)({
- WebkitLineClamp: 1,
- flexShrink: 1,
- p: {
- textOverflow: "ellipsis"
- }
- }), Text = styled.p({
- display: "-webkit-box",
- WebkitLineClamp: 1,
- WebkitBoxOrient: "vertical",
- overflow: "hidden"
- });
-
- // src/manager/components/layout/MainAreaContainer.tsx
- init_react();
- var PagesInnerContainer = styled.main(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- gridRowStart: "sidebar-start",
- gridRowEnd: "-1",
- gridColumnStart: "sidebar-end",
- gridColumnEnd: "-1",
- backgroundColor: theme.appContentBg,
- zIndex: 1
- })), PagesContainer = react_default.memo(function(props) {
- let { children } = props, mainRef = useRef(null), { landmarkProps } = useLandmark(
- { "aria-labelledby": "main-content-heading", role: "main" },
- mainRef
- );
- return react_default.createElement(PagesInnerContainer, { id: "main-content-wrapper", ref: mainRef, ...landmarkProps }, react_default.createElement("h2", { id: "main-content-heading", className: "sb-sr-only" }, "Main content"), children);
- }), MainInnerContainer = styled.div(({ theme, shown }) => ({
- flex: 1,
- position: "relative",
- backgroundColor: theme.appContentBg,
- display: shown ? "grid" : "none",
- // This is needed to make the content container fill the available space
- overflow: "auto",
- [MEDIA_DESKTOP_BREAKPOINT]: {
- flex: "auto",
- gridArea: "content"
- }
- })), MainAreaContainer = react_default.memo(function({
- showPages,
- slotMain,
- slotPages
- }) {
- return react_default.createElement(react_default.Fragment, null, showPages ? react_default.createElement(PagesContainer, null, slotPages) : react_default.createElement(Match, { path: /(^\/story|docs|onboarding\/|^\/$)/, startsWith: !1 }, ({ match }) => react_default.createElement(MainInnerContainer, { shown: !!match }, slotMain)));
- });
-
- // src/manager/components/layout/PanelContainer.tsx
- init_react();
-
- // src/manager/components/layout/Drag.tsx
- init_react();
-
- // src/components/components/tooltip/TooltipNote.tsx
- init_react();
- var Note = styled.div(({ theme }) => ({
- padding: "2px 6px",
- lineHeight: "16px",
- fontSize: 10,
- fontWeight: theme.typography.weight.bold,
- color: theme.color.lightest,
- boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.3)",
- borderRadius: 4,
- whiteSpace: "nowrap",
- pointerEvents: "none",
- zIndex: -1,
- background: theme.base === "light" ? "rgba(60, 60, 60, 0.9)" : "rgba(0, 0, 0, 0.95)"
- })), TooltipNote2 = ({ note, ...props }) => react_default.createElement(Note, { ...props }, note);
-
- // src/components/components/tooltip/TooltipProvider.tsx
- init_react();
-
- // ../../node_modules/@react-aria/interactions/dist/utils.mjs
- init_react();
- function $8a9cb279dc87e130$export$525bc4921d56d4a(nativeEvent) {
- let event = nativeEvent;
- return event.nativeEvent = nativeEvent, event.isDefaultPrevented = () => event.defaultPrevented, event.isPropagationStopped = () => event.cancelBubble, event.persist = () => {
- }, event;
- }
- function $8a9cb279dc87e130$export$c2b7abe5d61ec696(event, target) {
- Object.defineProperty(event, "target", {
- value: target
- }), Object.defineProperty(event, "currentTarget", {
- value: target
- });
- }
- function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
- let stateRef = useRef({
- isFocused: !1,
- observer: null
- });
- $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
- let state = stateRef.current;
- return () => {
- state.observer && (state.observer.disconnect(), state.observer = null);
- };
- }, []);
- let dispatchBlur = $8ae05eaa5c114e9c$export$7f54fc3180508a52((e2) => {
- onBlur?.(e2);
- });
- return useCallback((e2) => {
- if (e2.target instanceof HTMLButtonElement || e2.target instanceof HTMLInputElement || e2.target instanceof HTMLTextAreaElement || e2.target instanceof HTMLSelectElement) {
- stateRef.current.isFocused = !0;
- let target = e2.target, onBlurHandler = (e3) => {
- if (stateRef.current.isFocused = !1, target.disabled) {
- let event = $8a9cb279dc87e130$export$525bc4921d56d4a(e3);
- dispatchBlur(event);
- }
- stateRef.current.observer && (stateRef.current.observer.disconnect(), stateRef.current.observer = null);
- };
- target.addEventListener("focusout", onBlurHandler, {
- once: !0
- }), stateRef.current.observer = new MutationObserver(() => {
- if (stateRef.current.isFocused && target.disabled) {
- var _stateRef_current_observer;
- (_stateRef_current_observer = stateRef.current.observer) === null || _stateRef_current_observer === void 0 || _stateRef_current_observer.disconnect();
- let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
- target.dispatchEvent(new FocusEvent("blur", {
- relatedTarget: relatedTargetEl
- })), target.dispatchEvent(new FocusEvent("focusout", {
- bubbles: !0,
- relatedTarget: relatedTargetEl
- }));
- }
- }), stateRef.current.observer.observe(target, {
- attributes: !0,
- attributeFilter: [
- "disabled"
- ]
- });
- }
- }, [
- dispatchBlur
- ]);
- }
- var $8a9cb279dc87e130$export$fda7da73ab5d4c48 = !1;
- function $8a9cb279dc87e130$export$cabe61c495ee3649(target) {
- for (; target && !$b4b717babfbb907b$export$4c063cf1350e6fed(target); ) target = target.parentElement;
- let window2 = $431fbd86ca7dc216$export$f21a1ffae260145a(target), activeElement = window2.document.activeElement;
- if (!activeElement || activeElement === target) return;
- $8a9cb279dc87e130$export$fda7da73ab5d4c48 = !0;
- let isRefocusing = !1, onBlur = (e2) => {
- (e2.target === activeElement || isRefocusing) && e2.stopImmediatePropagation();
- }, onFocusOut = (e2) => {
- (e2.target === activeElement || isRefocusing) && (e2.stopImmediatePropagation(), !target && !isRefocusing && (isRefocusing = !0, $7215afc6de606d6b$export$de79e2c695e052f3(activeElement), cleanup()));
- }, onFocus = (e2) => {
- (e2.target === target || isRefocusing) && e2.stopImmediatePropagation();
- }, onFocusIn = (e2) => {
- (e2.target === target || isRefocusing) && (e2.stopImmediatePropagation(), isRefocusing || (isRefocusing = !0, $7215afc6de606d6b$export$de79e2c695e052f3(activeElement), cleanup()));
- };
- window2.addEventListener("blur", onBlur, !0), window2.addEventListener("focusout", onFocusOut, !0), window2.addEventListener("focusin", onFocusIn, !0), window2.addEventListener("focus", onFocus, !0);
- let cleanup = () => {
- cancelAnimationFrame(raf), window2.removeEventListener("blur", onBlur, !0), window2.removeEventListener("focusout", onFocusOut, !0), window2.removeEventListener("focusin", onFocusIn, !0), window2.removeEventListener("focus", onFocus, !0), $8a9cb279dc87e130$export$fda7da73ab5d4c48 = !1, isRefocusing = !1;
- }, raf = requestAnimationFrame(cleanup);
- return cleanup;
- }
-
- // ../../node_modules/@react-aria/interactions/dist/textSelection.mjs
- var $14c0b72509d70225$var$state = "default", $14c0b72509d70225$var$savedUserSelect = "", $14c0b72509d70225$var$modifiedElementMap = /* @__PURE__ */ new WeakMap();
- function $14c0b72509d70225$export$16a4697467175487(target) {
- if ($c87311424ea30a05$export$fedb369cb70207f1()) {
- if ($14c0b72509d70225$var$state === "default") {
- let documentObject = $431fbd86ca7dc216$export$b204af158042fbac(target);
- $14c0b72509d70225$var$savedUserSelect = documentObject.documentElement.style.webkitUserSelect, documentObject.documentElement.style.webkitUserSelect = "none";
- }
- $14c0b72509d70225$var$state = "disabled";
- } else if (target instanceof HTMLElement || target instanceof SVGElement) {
- let property = "userSelect" in target.style ? "userSelect" : "webkitUserSelect";
- $14c0b72509d70225$var$modifiedElementMap.set(target, target.style[property]), target.style[property] = "none";
- }
- }
- function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
- if ($c87311424ea30a05$export$fedb369cb70207f1()) {
- if ($14c0b72509d70225$var$state !== "disabled") return;
- $14c0b72509d70225$var$state = "restoring", setTimeout(() => {
- $bbed8b41f857bcc0$export$24490316f764c430(() => {
- if ($14c0b72509d70225$var$state === "restoring") {
- let documentObject = $431fbd86ca7dc216$export$b204af158042fbac(target);
- documentObject.documentElement.style.webkitUserSelect === "none" && (documentObject.documentElement.style.webkitUserSelect = $14c0b72509d70225$var$savedUserSelect || ""), $14c0b72509d70225$var$savedUserSelect = "", $14c0b72509d70225$var$state = "default";
- }
- });
- }, 300);
- } else if ((target instanceof HTMLElement || target instanceof SVGElement) && target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
- let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target), property = "userSelect" in target.style ? "userSelect" : "webkitUserSelect";
- target.style[property] === "none" && (target.style[property] = targetOldUserSelect), target.getAttribute("style") === "" && target.removeAttribute("style"), $14c0b72509d70225$var$modifiedElementMap.delete(target);
- }
- }
-
- // ../../node_modules/@react-aria/interactions/dist/context.mjs
- init_react();
- var $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = react_default.createContext({
- register: () => {
- }
- });
- $ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = "PressResponderContext";
-
- // ../../node_modules/@swc/helpers/esm/_class_apply_descriptor_get.js
- function _class_apply_descriptor_get(receiver, descriptor) {
- return descriptor.get ? descriptor.get.call(receiver) : descriptor.value;
- }
-
- // ../../node_modules/@swc/helpers/esm/_class_extract_field_descriptor.js
- function _class_extract_field_descriptor(receiver, privateMap, action) {
- if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
- return privateMap.get(receiver);
- }
-
- // ../../node_modules/@swc/helpers/esm/_class_private_field_get.js
- function _class_private_field_get(receiver, privateMap) {
- var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
- return _class_apply_descriptor_get(receiver, descriptor);
- }
-
- // ../../node_modules/@swc/helpers/esm/_check_private_redeclaration.js
- function _check_private_redeclaration(obj, privateCollection) {
- if (privateCollection.has(obj))
- throw new TypeError("Cannot initialize the same private elements twice on an object");
- }
-
- // ../../node_modules/@swc/helpers/esm/_class_private_field_init.js
- function _class_private_field_init(obj, privateMap, value) {
- _check_private_redeclaration(obj, privateMap), privateMap.set(obj, value);
- }
-
- // ../../node_modules/@swc/helpers/esm/_class_apply_descriptor_set.js
- function _class_apply_descriptor_set(receiver, descriptor, value) {
- if (descriptor.set) descriptor.set.call(receiver, value);
- else {
- if (!descriptor.writable)
- throw new TypeError("attempted to set read only private field");
- descriptor.value = value;
- }
- }
-
- // ../../node_modules/@swc/helpers/esm/_class_private_field_set.js
- function _class_private_field_set(receiver, privateMap, value) {
- var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
- return _class_apply_descriptor_set(receiver, descriptor, value), value;
- }
-
- // ../../node_modules/@react-aria/interactions/dist/usePress.mjs
- init_react();
- function $f6c31cce2adf654f$var$usePressResponderContext(props) {
- let context = useContext($ae1eeba8b9eafd08$export$5165eccb35aaadb5);
- if (context) {
- let { register, ...contextProps } = context;
- props = $3ef42575df84b30b$export$9d1611c77c2fe928(contextProps, props), register();
- }
- return $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, props.ref), props;
- }
- var $f6c31cce2adf654f$var$_shouldStopPropagation = /* @__PURE__ */ new WeakMap(), $f6c31cce2adf654f$var$PressEvent = class {
- continuePropagation() {
- _class_private_field_set(this, $f6c31cce2adf654f$var$_shouldStopPropagation, !1);
- }
- get shouldStopPropagation() {
- return _class_private_field_get(this, $f6c31cce2adf654f$var$_shouldStopPropagation);
- }
- constructor(type, pointerType, originalEvent, state) {
- _class_private_field_init(this, $f6c31cce2adf654f$var$_shouldStopPropagation, {
- writable: !0,
- value: void 0
- }), _class_private_field_set(this, $f6c31cce2adf654f$var$_shouldStopPropagation, !0);
- var _state_target;
- let currentTarget = (_state_target = state?.target) !== null && _state_target !== void 0 ? _state_target : originalEvent.currentTarget, rect = currentTarget?.getBoundingClientRect(), x2, y2 = 0, clientX, clientY = null;
- originalEvent.clientX != null && originalEvent.clientY != null && (clientX = originalEvent.clientX, clientY = originalEvent.clientY), rect && (clientX != null && clientY != null ? (x2 = clientX - rect.left, y2 = clientY - rect.top) : (x2 = rect.width / 2, y2 = rect.height / 2)), this.type = type, this.pointerType = pointerType, this.target = originalEvent.currentTarget, this.shiftKey = originalEvent.shiftKey, this.metaKey = originalEvent.metaKey, this.ctrlKey = originalEvent.ctrlKey, this.altKey = originalEvent.altKey, this.x = x2, this.y = y2;
- }
- }, $f6c31cce2adf654f$var$LINK_CLICKED = Symbol("linkClicked"), $f6c31cce2adf654f$var$STYLE_ID = "react-aria-pressable-style", $f6c31cce2adf654f$var$PRESSABLE_ATTRIBUTE = "data-react-aria-pressable";
- function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
- let { onPress, onPressChange, onPressStart, onPressEnd, onPressUp, onClick, isDisabled, isPressed: isPressedProp, preventFocusOnPress, shouldCancelOnPointerExit, allowTextSelectionOnPress, ref: domRef, ...domProps } = $f6c31cce2adf654f$var$usePressResponderContext(props), [isPressed, setPressed] = useState(!1), ref = useRef({
- isPressed: !1,
- ignoreEmulatedMouseEvents: !1,
- didFirePressStart: !1,
- isTriggeringEvent: !1,
- activePointerId: null,
- target: null,
- isOverTarget: !1,
- pointerType: null,
- disposables: []
- }), { addGlobalListener, removeAllGlobalListeners } = $03deb23ff14920c4$export$4eaf04e54aa8eed6(), triggerPressStart = $8ae05eaa5c114e9c$export$7f54fc3180508a52((originalEvent, pointerType) => {
- let state = ref.current;
- if (isDisabled || state.didFirePressStart) return !1;
- let shouldStopPropagation = !0;
- if (state.isTriggeringEvent = !0, onPressStart) {
- let event = new $f6c31cce2adf654f$var$PressEvent("pressstart", pointerType, originalEvent);
- onPressStart(event), shouldStopPropagation = event.shouldStopPropagation;
- }
- return onPressChange && onPressChange(!0), state.isTriggeringEvent = !1, state.didFirePressStart = !0, setPressed(!0), shouldStopPropagation;
- }), triggerPressEnd = $8ae05eaa5c114e9c$export$7f54fc3180508a52((originalEvent, pointerType, wasPressed = !0) => {
- let state = ref.current;
- if (!state.didFirePressStart) return !1;
- state.didFirePressStart = !1, state.isTriggeringEvent = !0;
- let shouldStopPropagation = !0;
- if (onPressEnd) {
- let event = new $f6c31cce2adf654f$var$PressEvent("pressend", pointerType, originalEvent);
- onPressEnd(event), shouldStopPropagation = event.shouldStopPropagation;
- }
- if (onPressChange && onPressChange(!1), setPressed(!1), onPress && wasPressed && !isDisabled) {
- let event = new $f6c31cce2adf654f$var$PressEvent("press", pointerType, originalEvent);
- onPress(event), shouldStopPropagation && (shouldStopPropagation = event.shouldStopPropagation);
- }
- return state.isTriggeringEvent = !1, shouldStopPropagation;
- }), triggerPressUp = $8ae05eaa5c114e9c$export$7f54fc3180508a52((originalEvent, pointerType) => {
- let state = ref.current;
- if (isDisabled) return !1;
- if (onPressUp) {
- state.isTriggeringEvent = !0;
- let event = new $f6c31cce2adf654f$var$PressEvent("pressup", pointerType, originalEvent);
- return onPressUp(event), state.isTriggeringEvent = !1, event.shouldStopPropagation;
- }
- return !0;
- }), cancel = $8ae05eaa5c114e9c$export$7f54fc3180508a52((e2) => {
- let state = ref.current;
- if (state.isPressed && state.target) {
- state.didFirePressStart && state.pointerType != null && triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e2), state.pointerType, !1), state.isPressed = !1, state.isOverTarget = !1, state.activePointerId = null, state.pointerType = null, removeAllGlobalListeners(), allowTextSelectionOnPress || $14c0b72509d70225$export$b0d6fa1ab32e3295(state.target);
- for (let dispose of state.disposables) dispose();
- state.disposables = [];
- }
- }), cancelOnPointerExit = $8ae05eaa5c114e9c$export$7f54fc3180508a52((e2) => {
- shouldCancelOnPointerExit && cancel(e2);
- }), triggerClick = $8ae05eaa5c114e9c$export$7f54fc3180508a52((e2) => {
- isDisabled || onClick?.(e2);
- }), triggerSyntheticClick = $8ae05eaa5c114e9c$export$7f54fc3180508a52((e2, target) => {
- if (!isDisabled && onClick) {
- let event = new MouseEvent("click", e2);
- $8a9cb279dc87e130$export$c2b7abe5d61ec696(event, target), onClick($8a9cb279dc87e130$export$525bc4921d56d4a(event));
- }
- }), pressProps = useMemo(() => {
- let state = ref.current, pressProps2 = {
- onKeyDown(e2) {
- if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e2.nativeEvent, e2.currentTarget) && $d4ee10de306f2510$export$4282f70798064fe0(e2.currentTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent))) {
- var _state_metaKeyEvents;
- $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard($d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent), e2.key) && e2.preventDefault();
- let shouldStopPropagation = !0;
- if (!state.isPressed && !e2.repeat) {
- state.target = e2.currentTarget, state.isPressed = !0, state.pointerType = "keyboard", shouldStopPropagation = triggerPressStart(e2, "keyboard");
- let originalTarget = e2.currentTarget, pressUp = (e3) => {
- $f6c31cce2adf654f$var$isValidKeyboardEvent(e3, originalTarget) && !e3.repeat && $d4ee10de306f2510$export$4282f70798064fe0(originalTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e3)) && state.target && triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e3), "keyboard");
- };
- addGlobalListener($431fbd86ca7dc216$export$b204af158042fbac(e2.currentTarget), "keyup", $ff5963eb1fccf552$export$e08e3b67e392101e(pressUp, onKeyUp), !0);
- }
- shouldStopPropagation && e2.stopPropagation(), e2.metaKey && $c87311424ea30a05$export$9ac100e40613ea10() && ((_state_metaKeyEvents = state.metaKeyEvents) === null || _state_metaKeyEvents === void 0 || _state_metaKeyEvents.set(e2.key, e2.nativeEvent));
- } else e2.key === "Meta" && (state.metaKeyEvents = /* @__PURE__ */ new Map());
- },
- onClick(e2) {
- if (!(e2 && !$d4ee10de306f2510$export$4282f70798064fe0(e2.currentTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent))) && e2 && e2.button === 0 && !state.isTriggeringEvent && !$ea8dcbcb9ea1b556$export$95185d699e05d4d7.isOpening) {
- let shouldStopPropagation = !0;
- if (isDisabled && e2.preventDefault(), !state.ignoreEmulatedMouseEvents && !state.isPressed && (state.pointerType === "virtual" || $6a7db85432448f7f$export$60278871457622de(e2.nativeEvent))) {
- let stopPressStart = triggerPressStart(e2, "virtual"), stopPressUp = triggerPressUp(e2, "virtual"), stopPressEnd = triggerPressEnd(e2, "virtual");
- triggerClick(e2), shouldStopPropagation = stopPressStart && stopPressUp && stopPressEnd;
- } else if (state.isPressed && state.pointerType !== "keyboard") {
- let pointerType = state.pointerType || e2.nativeEvent.pointerType || "virtual", stopPressUp = triggerPressUp($f6c31cce2adf654f$var$createEvent(e2.currentTarget, e2), pointerType), stopPressEnd = triggerPressEnd($f6c31cce2adf654f$var$createEvent(e2.currentTarget, e2), pointerType, !0);
- shouldStopPropagation = stopPressUp && stopPressEnd, state.isOverTarget = !1, triggerClick(e2), cancel(e2);
- }
- state.ignoreEmulatedMouseEvents = !1, shouldStopPropagation && e2.stopPropagation();
- }
- }
- }, onKeyUp = (e2) => {
- var _state_metaKeyEvents;
- if (state.isPressed && state.target && $f6c31cce2adf654f$var$isValidKeyboardEvent(e2, state.target)) {
- var _state_metaKeyEvents1;
- $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard($d4ee10de306f2510$export$e58f029f0fbfdb29(e2), e2.key) && e2.preventDefault();
- let target = $d4ee10de306f2510$export$e58f029f0fbfdb29(e2), wasPressed = $d4ee10de306f2510$export$4282f70798064fe0(state.target, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2));
- triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e2), "keyboard", wasPressed), wasPressed && triggerSyntheticClick(e2, state.target), removeAllGlobalListeners(), e2.key !== "Enter" && $f6c31cce2adf654f$var$isHTMLAnchorLink(state.target) && $d4ee10de306f2510$export$4282f70798064fe0(state.target, target) && !e2[$f6c31cce2adf654f$var$LINK_CLICKED] && (e2[$f6c31cce2adf654f$var$LINK_CLICKED] = !0, $ea8dcbcb9ea1b556$export$95185d699e05d4d7(state.target, e2, !1)), state.isPressed = !1, (_state_metaKeyEvents1 = state.metaKeyEvents) === null || _state_metaKeyEvents1 === void 0 || _state_metaKeyEvents1.delete(e2.key);
- } else if (e2.key === "Meta" && (!((_state_metaKeyEvents = state.metaKeyEvents) === null || _state_metaKeyEvents === void 0) && _state_metaKeyEvents.size)) {
- var _state_target;
- let events2 = state.metaKeyEvents;
- state.metaKeyEvents = void 0;
- for (let event of events2.values()) (_state_target = state.target) === null || _state_target === void 0 || _state_target.dispatchEvent(new KeyboardEvent("keyup", event));
- }
- };
- if (typeof PointerEvent < "u") {
- pressProps2.onPointerDown = (e2) => {
- if (e2.button !== 0 || !$d4ee10de306f2510$export$4282f70798064fe0(e2.currentTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent))) return;
- if ($6a7db85432448f7f$export$29bf1b5f2c56cf63(e2.nativeEvent)) {
- state.pointerType = "virtual";
- return;
- }
- state.pointerType = e2.pointerType;
- let shouldStopPropagation = !0;
- if (!state.isPressed) {
- state.isPressed = !0, state.isOverTarget = !0, state.activePointerId = e2.pointerId, state.target = e2.currentTarget, allowTextSelectionOnPress || $14c0b72509d70225$export$16a4697467175487(state.target), shouldStopPropagation = triggerPressStart(e2, state.pointerType);
- let target = $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent);
- "releasePointerCapture" in target && target.releasePointerCapture(e2.pointerId), addGlobalListener($431fbd86ca7dc216$export$b204af158042fbac(e2.currentTarget), "pointerup", onPointerUp, !1), addGlobalListener($431fbd86ca7dc216$export$b204af158042fbac(e2.currentTarget), "pointercancel", onPointerCancel, !1);
- }
- shouldStopPropagation && e2.stopPropagation();
- }, pressProps2.onMouseDown = (e2) => {
- if ($d4ee10de306f2510$export$4282f70798064fe0(e2.currentTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent)) && e2.button === 0) {
- if (preventFocusOnPress) {
- let dispose = $8a9cb279dc87e130$export$cabe61c495ee3649(e2.target);
- dispose && state.disposables.push(dispose);
- }
- e2.stopPropagation();
- }
- }, pressProps2.onPointerUp = (e2) => {
- !$d4ee10de306f2510$export$4282f70798064fe0(e2.currentTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent)) || state.pointerType === "virtual" || e2.button === 0 && !state.isPressed && triggerPressUp(e2, state.pointerType || e2.pointerType);
- }, pressProps2.onPointerEnter = (e2) => {
- e2.pointerId === state.activePointerId && state.target && !state.isOverTarget && state.pointerType != null && (state.isOverTarget = !0, triggerPressStart($f6c31cce2adf654f$var$createEvent(state.target, e2), state.pointerType));
- }, pressProps2.onPointerLeave = (e2) => {
- e2.pointerId === state.activePointerId && state.target && state.isOverTarget && state.pointerType != null && (state.isOverTarget = !1, triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e2), state.pointerType, !1), cancelOnPointerExit(e2));
- };
- let onPointerUp = (e2) => {
- if (e2.pointerId === state.activePointerId && state.isPressed && e2.button === 0 && state.target) {
- if ($d4ee10de306f2510$export$4282f70798064fe0(state.target, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2)) && state.pointerType != null) {
- let clicked = !1, timeout = setTimeout(() => {
- state.isPressed && state.target instanceof HTMLElement && (clicked ? cancel(e2) : ($7215afc6de606d6b$export$de79e2c695e052f3(state.target), state.target.click()));
- }, 80);
- addGlobalListener(e2.currentTarget, "click", () => clicked = !0, !0), state.disposables.push(() => clearTimeout(timeout));
- } else cancel(e2);
- state.isOverTarget = !1;
- }
- }, onPointerCancel = (e2) => {
- cancel(e2);
- };
- pressProps2.onDragStart = (e2) => {
- $d4ee10de306f2510$export$4282f70798064fe0(e2.currentTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent)) && cancel(e2);
- };
- }
- return pressProps2;
- }, [
- addGlobalListener,
- isDisabled,
- preventFocusOnPress,
- removeAllGlobalListeners,
- allowTextSelectionOnPress,
- cancel,
- cancelOnPointerExit,
- triggerPressEnd,
- triggerPressStart,
- triggerPressUp,
- triggerClick,
- triggerSyntheticClick
- ]);
- return useEffect(() => {
- if (!domRef) return;
- let ownerDocument = $431fbd86ca7dc216$export$b204af158042fbac(domRef.current);
- if (!ownerDocument || !ownerDocument.head || ownerDocument.getElementById($f6c31cce2adf654f$var$STYLE_ID)) return;
- let style = ownerDocument.createElement("style");
- style.id = $f6c31cce2adf654f$var$STYLE_ID, style.textContent = `
- @layer {
- [${$f6c31cce2adf654f$var$PRESSABLE_ATTRIBUTE}] {
- touch-action: pan-x pan-y pinch-zoom;
- }
- }
- `.trim(), ownerDocument.head.prepend(style);
- }, [
- domRef
- ]), useEffect(() => {
- let state = ref.current;
- return () => {
- var _state_target;
- allowTextSelectionOnPress || $14c0b72509d70225$export$b0d6fa1ab32e3295((_state_target = state.target) !== null && _state_target !== void 0 ? _state_target : void 0);
- for (let dispose of state.disposables) dispose();
- state.disposables = [];
- };
- }, [
- allowTextSelectionOnPress
- ]), {
- isPressed: isPressedProp || isPressed,
- pressProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, pressProps, {
- [$f6c31cce2adf654f$var$PRESSABLE_ATTRIBUTE]: !0
- })
- };
- }
- function $f6c31cce2adf654f$var$isHTMLAnchorLink(target) {
- return target.tagName === "A" && target.hasAttribute("href");
- }
- function $f6c31cce2adf654f$var$isValidKeyboardEvent(event, currentTarget) {
- let { key, code } = event, element = currentTarget, role = element.getAttribute("role");
- return (key === "Enter" || key === " " || key === "Spacebar" || code === "Space") && !(element instanceof $431fbd86ca7dc216$export$f21a1ffae260145a(element).HTMLInputElement && !$f6c31cce2adf654f$var$isValidInputKey(element, key) || element instanceof $431fbd86ca7dc216$export$f21a1ffae260145a(element).HTMLTextAreaElement || element.isContentEditable) && // Links should only trigger with Enter key
- !((role === "link" || !role && $f6c31cce2adf654f$var$isHTMLAnchorLink(element)) && key !== "Enter");
- }
- function $f6c31cce2adf654f$var$createEvent(target, e2) {
- let clientX = e2.clientX, clientY = e2.clientY;
- return {
- currentTarget: target,
- shiftKey: e2.shiftKey,
- ctrlKey: e2.ctrlKey,
- metaKey: e2.metaKey,
- altKey: e2.altKey,
- clientX,
- clientY
- };
- }
- function $f6c31cce2adf654f$var$shouldPreventDefaultUp(target) {
- return target instanceof HTMLInputElement ? !1 : target instanceof HTMLButtonElement ? target.type !== "submit" && target.type !== "reset" : !$f6c31cce2adf654f$var$isHTMLAnchorLink(target);
- }
- function $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(target, key) {
- return target instanceof HTMLInputElement ? !$f6c31cce2adf654f$var$isValidInputKey(target, key) : $f6c31cce2adf654f$var$shouldPreventDefaultUp(target);
- }
- var $f6c31cce2adf654f$var$nonTextInputTypes = /* @__PURE__ */ new Set([
- "checkbox",
- "radio",
- "range",
- "color",
- "file",
- "image",
- "button",
- "submit",
- "reset"
- ]);
- function $f6c31cce2adf654f$var$isValidInputKey(target, key) {
- return target.type === "checkbox" || target.type === "radio" ? key === " " : $f6c31cce2adf654f$var$nonTextInputTypes.has(target.type);
- }
-
- // ../../node_modules/@react-aria/interactions/dist/useFocusVisible.mjs
- init_react();
- var $507fabe10e71c6fb$var$currentModality = null, $507fabe10e71c6fb$var$changeHandlers = /* @__PURE__ */ new Set(), $507fabe10e71c6fb$export$d90243b58daecda7 = /* @__PURE__ */ new Map(), $507fabe10e71c6fb$var$hasEventBeforeFocus = !1, $507fabe10e71c6fb$var$hasBlurredWindowRecently = !1;
- function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e2) {
- for (let handler of $507fabe10e71c6fb$var$changeHandlers) handler(modality, e2);
- }
- function $507fabe10e71c6fb$var$isValidKey(e2) {
- return !(e2.metaKey || !$c87311424ea30a05$export$9ac100e40613ea10() && e2.altKey || e2.ctrlKey || e2.key === "Control" || e2.key === "Shift" || e2.key === "Meta");
- }
- function $507fabe10e71c6fb$var$handleKeyboardEvent(e2) {
- $507fabe10e71c6fb$var$hasEventBeforeFocus = !0, $507fabe10e71c6fb$var$isValidKey(e2) && ($507fabe10e71c6fb$var$currentModality = "keyboard", $507fabe10e71c6fb$var$triggerChangeHandlers("keyboard", e2));
- }
- function $507fabe10e71c6fb$var$handlePointerEvent(e2) {
- $507fabe10e71c6fb$var$currentModality = "pointer", (e2.type === "mousedown" || e2.type === "pointerdown") && ($507fabe10e71c6fb$var$hasEventBeforeFocus = !0, $507fabe10e71c6fb$var$triggerChangeHandlers("pointer", e2));
- }
- function $507fabe10e71c6fb$var$handleClickEvent(e2) {
- $6a7db85432448f7f$export$60278871457622de(e2) && ($507fabe10e71c6fb$var$hasEventBeforeFocus = !0, $507fabe10e71c6fb$var$currentModality = "virtual");
- }
- function $507fabe10e71c6fb$var$handleFocusEvent(e2) {
- e2.target === window || e2.target === document || $8a9cb279dc87e130$export$fda7da73ab5d4c48 || !e2.isTrusted || (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently && ($507fabe10e71c6fb$var$currentModality = "virtual", $507fabe10e71c6fb$var$triggerChangeHandlers("virtual", e2)), $507fabe10e71c6fb$var$hasEventBeforeFocus = !1, $507fabe10e71c6fb$var$hasBlurredWindowRecently = !1);
- }
- function $507fabe10e71c6fb$var$handleWindowBlur() {
- $8a9cb279dc87e130$export$fda7da73ab5d4c48 || ($507fabe10e71c6fb$var$hasEventBeforeFocus = !1, $507fabe10e71c6fb$var$hasBlurredWindowRecently = !0);
- }
- function $507fabe10e71c6fb$var$setupGlobalFocusEvents(element) {
- if (typeof window > "u" || typeof document > "u" || $507fabe10e71c6fb$export$d90243b58daecda7.get($431fbd86ca7dc216$export$f21a1ffae260145a(element))) return;
- let windowObject = $431fbd86ca7dc216$export$f21a1ffae260145a(element), documentObject = $431fbd86ca7dc216$export$b204af158042fbac(element), focus = windowObject.HTMLElement.prototype.focus;
- windowObject.HTMLElement.prototype.focus = function() {
- $507fabe10e71c6fb$var$hasEventBeforeFocus = !0, focus.apply(this, arguments);
- }, documentObject.addEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, !0), documentObject.addEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, !0), documentObject.addEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, !0), windowObject.addEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, !0), windowObject.addEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, !1), typeof PointerEvent < "u" && (documentObject.addEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, !0), documentObject.addEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, !0), documentObject.addEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, !0)), windowObject.addEventListener("beforeunload", () => {
- $507fabe10e71c6fb$var$tearDownWindowFocusTracking(element);
- }, {
- once: !0
- }), $507fabe10e71c6fb$export$d90243b58daecda7.set(windowObject, {
- focus
- });
- }
- var $507fabe10e71c6fb$var$tearDownWindowFocusTracking = (element, loadListener) => {
- let windowObject = $431fbd86ca7dc216$export$f21a1ffae260145a(element), documentObject = $431fbd86ca7dc216$export$b204af158042fbac(element);
- loadListener && documentObject.removeEventListener("DOMContentLoaded", loadListener), $507fabe10e71c6fb$export$d90243b58daecda7.has(windowObject) && (windowObject.HTMLElement.prototype.focus = $507fabe10e71c6fb$export$d90243b58daecda7.get(windowObject).focus, documentObject.removeEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, !0), documentObject.removeEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, !0), documentObject.removeEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, !0), windowObject.removeEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, !0), windowObject.removeEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, !1), typeof PointerEvent < "u" && (documentObject.removeEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, !0), documentObject.removeEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, !0), documentObject.removeEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, !0)), $507fabe10e71c6fb$export$d90243b58daecda7.delete(windowObject));
- };
- function $507fabe10e71c6fb$export$2f1888112f558a7d(element) {
- let documentObject = $431fbd86ca7dc216$export$b204af158042fbac(element), loadListener;
- return documentObject.readyState !== "loading" ? $507fabe10e71c6fb$var$setupGlobalFocusEvents(element) : (loadListener = () => {
- $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
- }, documentObject.addEventListener("DOMContentLoaded", loadListener)), () => $507fabe10e71c6fb$var$tearDownWindowFocusTracking(element, loadListener);
- }
- typeof document < "u" && $507fabe10e71c6fb$export$2f1888112f558a7d();
- function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
- return $507fabe10e71c6fb$var$currentModality !== "pointer";
- }
- function $507fabe10e71c6fb$export$630ff653c5ada6a9() {
- return $507fabe10e71c6fb$var$currentModality;
- }
-
- // ../../node_modules/@react-aria/interactions/dist/focusSafely.mjs
- function $3ad3f6e1647bc98d$export$80f3e147d781571c(element) {
- let ownerDocument = $431fbd86ca7dc216$export$b204af158042fbac(element), activeElement = $d4ee10de306f2510$export$cd4e5573fbe2b576(ownerDocument);
- if ($507fabe10e71c6fb$export$630ff653c5ada6a9() === "virtual") {
- let lastFocusedElement = activeElement;
- $bbed8b41f857bcc0$export$24490316f764c430(() => {
- $d4ee10de306f2510$export$cd4e5573fbe2b576(ownerDocument) === lastFocusedElement && element.isConnected && $7215afc6de606d6b$export$de79e2c695e052f3(element);
- });
- } else $7215afc6de606d6b$export$de79e2c695e052f3(element);
- }
-
- // ../../node_modules/@react-aria/interactions/dist/useFocus.mjs
- init_react();
- function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
- let { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props, onBlur = useCallback((e2) => {
- if (e2.target === e2.currentTarget)
- return onBlurProp && onBlurProp(e2), onFocusChange && onFocusChange(!1), !0;
- }, [
- onBlurProp,
- onFocusChange
- ]), onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur), onFocus = useCallback((e2) => {
- let ownerDocument = $431fbd86ca7dc216$export$b204af158042fbac(e2.target), activeElement = ownerDocument ? $d4ee10de306f2510$export$cd4e5573fbe2b576(ownerDocument) : $d4ee10de306f2510$export$cd4e5573fbe2b576();
- e2.target === e2.currentTarget && activeElement === $d4ee10de306f2510$export$e58f029f0fbfdb29(e2.nativeEvent) && (onFocusProp && onFocusProp(e2), onFocusChange && onFocusChange(!0), onSyntheticFocus(e2));
- }, [
- onFocusChange,
- onFocusProp,
- onSyntheticFocus
- ]);
- return {
- focusProps: {
- onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : void 0,
- onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : void 0
- }
- };
- }
-
- // ../../node_modules/@react-aria/interactions/dist/createEventHandler.mjs
- function $93925083ecbb358c$export$48d1ea6320830260(handler) {
- if (!handler) return;
- let shouldStopPropagation = !0;
- return (e2) => {
- let event = {
- ...e2,
- preventDefault() {
- e2.preventDefault();
- },
- isDefaultPrevented() {
- return e2.isDefaultPrevented();
- },
- stopPropagation() {
- shouldStopPropagation = !0;
- },
- continuePropagation() {
- shouldStopPropagation = !1;
- },
- isPropagationStopped() {
- return shouldStopPropagation;
- }
- };
- handler(event), shouldStopPropagation && e2.stopPropagation();
- };
- }
-
- // ../../node_modules/@react-aria/interactions/dist/useKeyboard.mjs
- function $46d819fcbaf35654$export$8f71654801c2f7cd(props) {
- return {
- keyboardProps: props.isDisabled ? {} : {
- onKeyDown: $93925083ecbb358c$export$48d1ea6320830260(props.onKeyDown),
- onKeyUp: $93925083ecbb358c$export$48d1ea6320830260(props.onKeyUp)
- }
- };
- }
-
- // ../../node_modules/@react-aria/interactions/dist/useFocusable.mjs
- init_react();
- var $f645667febf57a63$export$f9762fab77588ecb = react_default.createContext(null);
- function $f645667febf57a63$var$useFocusableContext(ref) {
- let context = useContext($f645667febf57a63$export$f9762fab77588ecb) || {};
- $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref);
- let { ref: _2, ...otherProps } = context;
- return otherProps;
- }
- var $f645667febf57a63$export$13f3202a3e5ddd5 = react_default.forwardRef(function(props, ref) {
- let { children, ...otherProps } = props, objRef = $df56164dff5785e2$export$4338b53315abf666(ref), context = {
- ...otherProps,
- ref: objRef
- };
- return react_default.createElement($f645667febf57a63$export$f9762fab77588ecb.Provider, {
- value: context
- }, children);
- });
- function $f645667febf57a63$export$4c014de7c8940b4c(props, domRef) {
- let { focusProps } = $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props), { keyboardProps } = $46d819fcbaf35654$export$8f71654801c2f7cd(props), interactions = $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, keyboardProps), domProps = $f645667febf57a63$var$useFocusableContext(domRef), interactionProps = props.isDisabled ? {} : domProps, autoFocusRef = useRef(props.autoFocus);
- useEffect(() => {
- autoFocusRef.current && domRef.current && $3ad3f6e1647bc98d$export$80f3e147d781571c(domRef.current), autoFocusRef.current = !1;
- }, [
- domRef
- ]);
- let tabIndex = props.excludeFromTabOrder ? -1 : 0;
- return props.isDisabled && (tabIndex = void 0), {
- focusableProps: $3ef42575df84b30b$export$9d1611c77c2fe928({
- ...interactions,
- tabIndex
- }, interactionProps)
- };
- }
- var $f645667febf57a63$export$35a3bebf7ef2d934 = forwardRef(({ children, ...props }, ref) => {
- ref = $df56164dff5785e2$export$4338b53315abf666(ref);
- let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c(props, ref), child = react_default.Children.only(children);
- useEffect(() => {
- }, [
- ref,
- props.isDisabled
- ]);
- let childRef = parseInt(react_default.version, 10) < 19 ? child.ref : child.props.ref;
- return react_default.cloneElement(child, {
- ...$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, child.props),
- // @ts-ignore
- ref: $5dc95899b306f630$export$c9058316764c140e(childRef, ref)
- });
- });
-
- // ../../node_modules/@react-aria/interactions/dist/Pressable.mjs
- init_react();
- var $3b117e43dc0ca95d$export$27c701ed9e449e99 = react_default.forwardRef(({ children, ...props }, ref) => {
- ref = $df56164dff5785e2$export$4338b53315abf666(ref);
- let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
- ...props,
- ref
- }), { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c(props, ref), child = react_default.Children.only(children);
- useEffect(() => {
- }, [
- ref,
- props.isDisabled
- ]);
- let childRef = parseInt(react_default.version, 10) < 19 ? child.ref : child.props.ref;
- return react_default.cloneElement(child, {
- ...$3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, focusableProps, child.props),
- // @ts-ignore
- ref: $5dc95899b306f630$export$c9058316764c140e(childRef, ref)
- });
- });
-
- // ../../node_modules/@react-aria/interactions/dist/PressResponder.mjs
- init_react();
- var $f1ab8c75478c6f73$export$3351871ee4b288b8 = react_default.forwardRef(({ children, ...props }, ref) => {
- let isRegistered = useRef(!1), prevContext = useContext($ae1eeba8b9eafd08$export$5165eccb35aaadb5);
- ref = $df56164dff5785e2$export$4338b53315abf666(ref || prevContext?.ref);
- let context = $3ef42575df84b30b$export$9d1611c77c2fe928(prevContext || {}, {
- ...props,
- ref,
- register() {
- isRegistered.current = !0, prevContext && prevContext.register();
- }
- });
- return $e7801be82b4b2a53$export$4debdb1a3f0fa79e(prevContext, ref), useEffect(() => {
- isRegistered.current || (isRegistered.current = !0);
- }, []), react_default.createElement($ae1eeba8b9eafd08$export$5165eccb35aaadb5.Provider, {
- value: context
- }, children);
- });
-
- // ../../node_modules/@react-aria/interactions/dist/useFocusWithin.mjs
- init_react();
-
- // ../../node_modules/@react-aria/interactions/dist/useHover.mjs
- init_react();
- var $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = !1, $6179b936705e76d3$var$hoverCount = 0;
- function $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents() {
- $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = !0, setTimeout(() => {
- $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = !1;
- }, 50);
- }
- function $6179b936705e76d3$var$handleGlobalPointerEvent(e2) {
- e2.pointerType === "touch" && $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents();
- }
- function $6179b936705e76d3$var$setupGlobalTouchEvents() {
- if (!(typeof document > "u"))
- return $6179b936705e76d3$var$hoverCount === 0 && typeof PointerEvent < "u" && document.addEventListener("pointerup", $6179b936705e76d3$var$handleGlobalPointerEvent), $6179b936705e76d3$var$hoverCount++, () => {
- $6179b936705e76d3$var$hoverCount--, !($6179b936705e76d3$var$hoverCount > 0) && typeof PointerEvent < "u" && document.removeEventListener("pointerup", $6179b936705e76d3$var$handleGlobalPointerEvent);
- };
- }
- function $6179b936705e76d3$export$ae780daf29e6d456(props) {
- let { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props, [isHovered, setHovered] = useState(!1), state = useRef({
- isHovered: !1,
- ignoreEmulatedMouseEvents: !1,
- pointerType: "",
- target: null
- }).current;
- useEffect($6179b936705e76d3$var$setupGlobalTouchEvents, []);
- let { addGlobalListener, removeAllGlobalListeners } = $03deb23ff14920c4$export$4eaf04e54aa8eed6(), { hoverProps, triggerHoverEnd } = useMemo(() => {
- let triggerHoverStart = (event, pointerType) => {
- if (state.pointerType = pointerType, isDisabled || pointerType === "touch" || state.isHovered || !event.currentTarget.contains(event.target)) return;
- state.isHovered = !0;
- let target = event.currentTarget;
- state.target = target, addGlobalListener($431fbd86ca7dc216$export$b204af158042fbac(event.target), "pointerover", (e2) => {
- state.isHovered && state.target && !$d4ee10de306f2510$export$4282f70798064fe0(state.target, e2.target) && triggerHoverEnd2(e2, e2.pointerType);
- }, {
- capture: !0
- }), onHoverStart && onHoverStart({
- type: "hoverstart",
- target,
- pointerType
- }), onHoverChange && onHoverChange(!0), setHovered(!0);
- }, triggerHoverEnd2 = (event, pointerType) => {
- let target = state.target;
- state.pointerType = "", state.target = null, !(pointerType === "touch" || !state.isHovered || !target) && (state.isHovered = !1, removeAllGlobalListeners(), onHoverEnd && onHoverEnd({
- type: "hoverend",
- target,
- pointerType
- }), onHoverChange && onHoverChange(!1), setHovered(!1));
- }, hoverProps2 = {};
- return typeof PointerEvent < "u" && (hoverProps2.onPointerEnter = (e2) => {
- $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents && e2.pointerType === "mouse" || triggerHoverStart(e2, e2.pointerType);
- }, hoverProps2.onPointerLeave = (e2) => {
- !isDisabled && e2.currentTarget.contains(e2.target) && triggerHoverEnd2(e2, e2.pointerType);
- }), {
- hoverProps: hoverProps2,
- triggerHoverEnd: triggerHoverEnd2
- };
- }, [
- onHoverStart,
- onHoverChange,
- onHoverEnd,
- isDisabled,
- state,
- addGlobalListener,
- removeAllGlobalListeners
- ]);
- return useEffect(() => {
- isDisabled && triggerHoverEnd({
- currentTarget: state.target
- }, state.pointerType);
- }, [
- isDisabled
- ]), {
- hoverProps,
- isHovered
- };
- }
-
- // ../../node_modules/@react-aria/interactions/dist/useInteractOutside.mjs
- init_react();
-
- // ../../node_modules/@react-aria/interactions/dist/useMove.mjs
- init_react();
-
- // ../../node_modules/@react-aria/interactions/dist/useScrollWheel.mjs
- init_react();
-
- // ../../node_modules/@react-aria/interactions/dist/useLongPress.mjs
- init_react();
-
- // ../../node_modules/react-aria-components/dist/utils.mjs
- init_react();
- var $64fa3d84918910a7$export$c62b8e45d58ddad9 = Symbol("default");
- function $64fa3d84918910a7$export$2881499e37b75b9a({ values, children }) {
- for (let [Context2, value] of values)
- children = react_default.createElement(Context2.Provider, {
- value
- }, children);
- return children;
- }
- function $64fa3d84918910a7$export$4d86445c2cf5e3(props) {
- let { className, style, children, defaultClassName, defaultChildren, defaultStyle, values } = props;
- return useMemo(() => {
- let computedClassName, computedStyle, computedChildren;
- return typeof className == "function" ? computedClassName = className({
- ...values,
- defaultClassName
- }) : computedClassName = className, typeof style == "function" ? computedStyle = style({
- ...values,
- defaultStyle: defaultStyle || {}
- }) : computedStyle = style, typeof children == "function" ? computedChildren = children({
- ...values,
- defaultChildren
- }) : children == null ? computedChildren = defaultChildren : computedChildren = children, {
- className: computedClassName ?? defaultClassName,
- style: computedStyle || defaultStyle ? {
- ...defaultStyle,
- ...computedStyle
- } : void 0,
- children: computedChildren ?? defaultChildren,
- "data-rac": ""
- };
- }, [
- className,
- style,
- children,
- defaultClassName,
- defaultChildren,
- defaultStyle,
- values
- ]);
- }
- function $64fa3d84918910a7$export$fabf2dc03a41866e(context, slot) {
- let ctx = useContext(context);
- if (slot === null)
- return null;
- if (ctx && typeof ctx == "object" && "slots" in ctx && ctx.slots) {
- let slotKey = slot || $64fa3d84918910a7$export$c62b8e45d58ddad9;
- if (!ctx.slots[slotKey]) {
- let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map((p2) => `"${p2}"`)), errorMessage = slot ? `Invalid slot "${slot}".` : "A slot prop is required.";
- throw new Error(`${errorMessage} Valid slot names are ${availableSlots}.`);
- }
- return ctx.slots[slotKey];
- }
- return ctx;
- }
- function $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, context) {
- let ctx = $64fa3d84918910a7$export$fabf2dc03a41866e(context, props.slot) || {}, { ref: contextRef, ...contextProps } = ctx, mergedRef = $df56164dff5785e2$export$4338b53315abf666(useMemo(() => $5dc95899b306f630$export$c9058316764c140e(ref, contextRef), [
- ref,
- contextRef
- ])), mergedProps = $3ef42575df84b30b$export$9d1611c77c2fe928(contextProps, props);
- return "style" in contextProps && contextProps.style && "style" in props && props.style && (typeof contextProps.style == "function" || typeof props.style == "function" ? mergedProps.style = (renderProps) => {
- let contextStyle = typeof contextProps.style == "function" ? contextProps.style(renderProps) : contextProps.style, defaultStyle = {
- ...renderProps.defaultStyle,
- ...contextStyle
- }, style = typeof props.style == "function" ? props.style({
- ...renderProps,
- defaultStyle
- }) : props.style;
- return {
- ...defaultStyle,
- ...style
- };
- } : mergedProps.style = {
- ...contextProps.style,
- ...props.style
- }), [
- mergedProps,
- mergedRef
- ];
- }
-
- // ../../node_modules/react-aria-components/dist/OverlayArrow.mjs
- init_react();
- var $44f671af83e7d9e0$export$2de4954e8ae13b9f = createContext({
- placement: "bottom"
- }), $44f671af83e7d9e0$export$746d02f47f4d381 = forwardRef(function(props, ref) {
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $44f671af83e7d9e0$export$2de4954e8ae13b9f);
- let placement = props.placement, style = {
- position: "absolute",
- transform: placement === "top" || placement === "bottom" ? "translateX(-50%)" : "translateY(-50%)"
- };
- placement != null && (style[placement] = "100%");
- let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
- ...props,
- defaultClassName: "react-aria-OverlayArrow",
- values: {
- placement
- }
- });
- renderProps.style && Object.keys(renderProps.style).forEach((key) => renderProps.style[key] === void 0 && delete renderProps.style[key]);
- let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
- return react_default.createElement("div", {
- ...DOMProps,
- ...renderProps,
- style: {
- ...style,
- ...renderProps.style
- },
- ref,
- "data-placement": placement
- });
- });
-
- // ../../node_modules/@react-aria/tooltip/dist/useTooltip.mjs
- function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
- let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
- labelable: !0
- }), { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
- onHoverStart: () => state?.open(!0),
- onHoverEnd: () => state?.close()
- });
- return {
- tooltipProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
- role: "tooltip"
- })
- };
- }
-
- // ../../node_modules/@react-aria/tooltip/dist/useTooltipTrigger.mjs
- init_react();
- function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
- let { isDisabled, trigger } = props, tooltipId = $bdb11010cef70236$export$f680877a34711e37(), isHovered = useRef(!1), isFocused = useRef(!1), handleShow = () => {
- (isHovered.current || isFocused.current) && state.open(isFocused.current);
- }, handleHide = (immediate) => {
- !isHovered.current && !isFocused.current && state.close(immediate);
- };
- useEffect(() => {
- let onKeyDown = (e2) => {
- ref && ref.current && e2.key === "Escape" && (e2.stopPropagation(), state.close(!0));
- };
- if (state.isOpen)
- return document.addEventListener("keydown", onKeyDown, !0), () => {
- document.removeEventListener("keydown", onKeyDown, !0);
- };
- }, [
- ref,
- state
- ]);
- let onHoverStart = () => {
- trigger !== "focus" && ($507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer" ? isHovered.current = !0 : isHovered.current = !1, handleShow());
- }, onHoverEnd = () => {
- trigger !== "focus" && (isFocused.current = !1, isHovered.current = !1, handleHide());
- }, onPressStart = () => {
- isFocused.current = !1, isHovered.current = !1, handleHide(!0);
- }, onFocus = () => {
- $507fabe10e71c6fb$export$b9b3dfddab17db27() && (isFocused.current = !0, handleShow());
- }, onBlur = () => {
- isFocused.current = !1, isHovered.current = !1, handleHide(!0);
- }, { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
- isDisabled,
- onHoverStart,
- onHoverEnd
- }), { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c({
- isDisabled,
- onFocus,
- onBlur
- }, ref);
- return {
- triggerProps: {
- "aria-describedby": state.isOpen ? tooltipId : void 0,
- ...$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, {
- onPointerDown: onPressStart,
- onKeyDown: onPressStart
- }),
- tabIndex: void 0
- },
- tooltipProps: {
- id: tooltipId
- }
- };
- }
-
- // ../../node_modules/@react-aria/overlays/dist/calculatePosition.mjs
- var $edcf132a9284368a$var$AXIS = {
- top: "top",
- bottom: "top",
- left: "left",
- right: "left"
- }, $edcf132a9284368a$var$FLIPPED_DIRECTION = {
- top: "bottom",
- bottom: "top",
- left: "right",
- right: "left"
- }, $edcf132a9284368a$var$CROSS_AXIS = {
- top: "left",
- left: "top"
- }, $edcf132a9284368a$var$AXIS_SIZE = {
- top: "height",
- left: "width"
- }, $edcf132a9284368a$var$TOTAL_SIZE = {
- width: "totalWidth",
- height: "totalHeight"
- }, $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE = {}, $edcf132a9284368a$var$visualViewport = typeof document < "u" ? window.visualViewport : null;
- function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
- let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0, scroll2 = {};
- var _visualViewport_scale;
- let isPinchZoomedIn = ((_visualViewport_scale = $edcf132a9284368a$var$visualViewport?.scale) !== null && _visualViewport_scale !== void 0 ? _visualViewport_scale : 1) > 1;
- if (containerNode.tagName === "BODY") {
- let documentElement = document.documentElement;
- totalWidth = documentElement.clientWidth, totalHeight = documentElement.clientHeight;
- var _visualViewport_width;
- width = (_visualViewport_width = $edcf132a9284368a$var$visualViewport?.width) !== null && _visualViewport_width !== void 0 ? _visualViewport_width : totalWidth;
- var _visualViewport_height;
- height = (_visualViewport_height = $edcf132a9284368a$var$visualViewport?.height) !== null && _visualViewport_height !== void 0 ? _visualViewport_height : totalHeight, scroll2.top = documentElement.scrollTop || containerNode.scrollTop, scroll2.left = documentElement.scrollLeft || containerNode.scrollLeft, $edcf132a9284368a$var$visualViewport && (top = $edcf132a9284368a$var$visualViewport.offsetTop, left = $edcf132a9284368a$var$visualViewport.offsetLeft);
- } else
- ({ width, height, top, left } = $edcf132a9284368a$var$getOffset(containerNode, !1)), scroll2.top = containerNode.scrollTop, scroll2.left = containerNode.scrollLeft, totalWidth = width, totalHeight = height;
- if ($c87311424ea30a05$export$78551043582a6a98() && (containerNode.tagName === "BODY" || containerNode.tagName === "HTML") && isPinchZoomedIn) {
- scroll2.top = 0, scroll2.left = 0;
- var _visualViewport_pageTop;
- top = (_visualViewport_pageTop = $edcf132a9284368a$var$visualViewport?.pageTop) !== null && _visualViewport_pageTop !== void 0 ? _visualViewport_pageTop : 0;
- var _visualViewport_pageLeft;
- left = (_visualViewport_pageLeft = $edcf132a9284368a$var$visualViewport?.pageLeft) !== null && _visualViewport_pageLeft !== void 0 ? _visualViewport_pageLeft : 0;
- }
- return {
- width,
- height,
- totalWidth,
- totalHeight,
- scroll: scroll2,
- top,
- left
- };
- }
- function $edcf132a9284368a$var$getScroll(node) {
- return {
- top: node.scrollTop,
- left: node.scrollLeft,
- width: node.scrollWidth,
- height: node.scrollHeight
- };
- }
- function $edcf132a9284368a$var$getDelta(axis, offset2, size, boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary) {
- var _containerDimensions_scroll_axis;
- let containerScroll = (_containerDimensions_scroll_axis = containerDimensions.scroll[axis]) !== null && _containerDimensions_scroll_axis !== void 0 ? _containerDimensions_scroll_axis : 0, boundarySize = boundaryDimensions[$edcf132a9284368a$var$AXIS_SIZE[axis]], boundaryStartEdge = boundaryDimensions.scroll[$edcf132a9284368a$var$AXIS[axis]] + padding, boundaryEndEdge = boundarySize + boundaryDimensions.scroll[$edcf132a9284368a$var$AXIS[axis]] - padding, startEdgeOffset = offset2 - containerScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[$edcf132a9284368a$var$AXIS[axis]], endEdgeOffset = offset2 - containerScroll + size + containerOffsetWithBoundary[axis] - boundaryDimensions[$edcf132a9284368a$var$AXIS[axis]];
- return startEdgeOffset < boundaryStartEdge ? boundaryStartEdge - startEdgeOffset : endEdgeOffset > boundaryEndEdge ? Math.max(boundaryEndEdge - endEdgeOffset, boundaryStartEdge - startEdgeOffset) : 0;
- }
- function $edcf132a9284368a$var$getMargins(node) {
- let style = window.getComputedStyle(node);
- return {
- top: parseInt(style.marginTop, 10) || 0,
- bottom: parseInt(style.marginBottom, 10) || 0,
- left: parseInt(style.marginLeft, 10) || 0,
- right: parseInt(style.marginRight, 10) || 0
- };
- }
- function $edcf132a9284368a$var$parsePlacement(input) {
- if ($edcf132a9284368a$var$PARSED_PLACEMENT_CACHE[input]) return $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE[input];
- let [placement, crossPlacement] = input.split(" "), axis = $edcf132a9284368a$var$AXIS[placement] || "right", crossAxis = $edcf132a9284368a$var$CROSS_AXIS[axis];
- $edcf132a9284368a$var$AXIS[crossPlacement] || (crossPlacement = "center");
- let size = $edcf132a9284368a$var$AXIS_SIZE[axis], crossSize = $edcf132a9284368a$var$AXIS_SIZE[crossAxis];
- return $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE[input] = {
- placement,
- crossPlacement,
- axis,
- crossAxis,
- size,
- crossSize
- }, $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE[input];
- }
- function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset2, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset) {
- let { placement, crossPlacement, axis, crossAxis, size, crossSize } = placementInfo, position = {};
- var _childOffset_crossAxis;
- position[crossAxis] = (_childOffset_crossAxis = childOffset[crossAxis]) !== null && _childOffset_crossAxis !== void 0 ? _childOffset_crossAxis : 0;
- var _childOffset_crossSize, _overlaySize_crossSize, _childOffset_crossSize1, _overlaySize_crossSize1;
- crossPlacement === "center" ? position[crossAxis] += (((_childOffset_crossSize = childOffset[crossSize]) !== null && _childOffset_crossSize !== void 0 ? _childOffset_crossSize : 0) - ((_overlaySize_crossSize = overlaySize[crossSize]) !== null && _overlaySize_crossSize !== void 0 ? _overlaySize_crossSize : 0)) / 2 : crossPlacement !== crossAxis && (position[crossAxis] += ((_childOffset_crossSize1 = childOffset[crossSize]) !== null && _childOffset_crossSize1 !== void 0 ? _childOffset_crossSize1 : 0) - ((_overlaySize_crossSize1 = overlaySize[crossSize]) !== null && _overlaySize_crossSize1 !== void 0 ? _overlaySize_crossSize1 : 0)), position[crossAxis] += crossOffset;
- let minPosition = childOffset[crossAxis] - overlaySize[crossSize] + arrowSize + arrowBoundaryOffset, maxPosition = childOffset[crossAxis] + childOffset[crossSize] - arrowSize - arrowBoundaryOffset;
- if (position[crossAxis] = $9446cca9a3875146$export$7d15b64cf5a3a4c4(position[crossAxis], minPosition, maxPosition), placement === axis) {
- let containerHeight = isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[$edcf132a9284368a$var$TOTAL_SIZE[size]];
- position[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset2);
- } else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset2);
- return position;
- }
- function $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, isContainerPositioned, margins, padding, overlayHeight, heightGrowthDirection) {
- let containerHeight = isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[$edcf132a9284368a$var$TOTAL_SIZE.height];
- var _position_bottom;
- let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - ((_position_bottom = position.bottom) !== null && _position_bottom !== void 0 ? _position_bottom : 0) - overlayHeight);
- var _boundaryDimensions_scroll_top, _margins_top, _margins_bottom, _boundaryDimensions_scroll_top1, _margins_top1, _margins_bottom1;
- let maxHeight = heightGrowthDirection !== "top" ? (
- // We want the distance between the top of the overlay to the bottom of the boundary
- Math.max(0, boundaryDimensions.height + boundaryDimensions.top + ((_boundaryDimensions_scroll_top = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top !== void 0 ? _boundaryDimensions_scroll_top : 0) - overlayTop - (((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0) + padding))
- ) : Math.max(0, overlayTop + overlayHeight - (boundaryDimensions.top + ((_boundaryDimensions_scroll_top1 = boundaryDimensions.scroll.top) !== null && _boundaryDimensions_scroll_top1 !== void 0 ? _boundaryDimensions_scroll_top1 : 0)) - (((_margins_top1 = margins.top) !== null && _margins_top1 !== void 0 ? _margins_top1 : 0) + ((_margins_bottom1 = margins.bottom) !== null && _margins_bottom1 !== void 0 ? _margins_bottom1 : 0) + padding));
- return Math.min(boundaryDimensions.height - padding * 2, maxHeight);
- }
- function $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding, placementInfo) {
- let { placement, axis, size } = placementInfo;
- var _boundaryDimensions_scroll_axis, _margins_axis;
- if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - ((_boundaryDimensions_scroll_axis = boundaryDimensions.scroll[axis]) !== null && _boundaryDimensions_scroll_axis !== void 0 ? _boundaryDimensions_scroll_axis : 0) + containerOffsetWithBoundary[axis] - ((_margins_axis = margins[axis]) !== null && _margins_axis !== void 0 ? _margins_axis : 0) - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding);
- var _margins_axis1;
- return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - ((_margins_axis1 = margins[axis]) !== null && _margins_axis1 !== void 0 ? _margins_axis1 : 0) - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding);
- }
- function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip2, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset2, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) {
- let placementInfo = $edcf132a9284368a$var$parsePlacement(placementInput), { size, crossAxis, crossSize, placement, crossPlacement } = placementInfo, position = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset2, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset), normalizedOffset = offset2, space = $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset2, placementInfo);
- if (flip2 && scrollSize[size] > space) {
- let flippedPlacementInfo = $edcf132a9284368a$var$parsePlacement(`${$edcf132a9284368a$var$FLIPPED_DIRECTION[placement]} ${crossPlacement}`), flippedPosition = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset2, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
- $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset2, flippedPlacementInfo) > space && (placementInfo = flippedPlacementInfo, position = flippedPosition, normalizedOffset = offset2);
- }
- let heightGrowthDirection = "bottom";
- placementInfo.axis === "top" ? placementInfo.placement === "top" ? heightGrowthDirection = "top" : placementInfo.placement === "bottom" && (heightGrowthDirection = "bottom") : placementInfo.crossAxis === "top" && (placementInfo.crossPlacement === "top" ? heightGrowthDirection = "bottom" : placementInfo.crossPlacement === "bottom" && (heightGrowthDirection = "top"));
- let delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
- position[crossAxis] += delta;
- let maxHeight = $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, isContainerPositioned, margins, padding, overlaySize.height, heightGrowthDirection);
- userSetMaxHeight && userSetMaxHeight < maxHeight && (maxHeight = userSetMaxHeight), overlaySize.height = Math.min(overlaySize.height, maxHeight), position = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset), delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary), position[crossAxis] += delta;
- let arrowPosition = {}, origin = childOffset[crossAxis] - position[crossAxis] - margins[$edcf132a9284368a$var$AXIS[crossAxis]], preferredArrowPosition = origin + 0.5 * childOffset[crossSize], arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
- var _margins_left, _margins_right, _margins_top, _margins_bottom;
- let overlayMargin = $edcf132a9284368a$var$AXIS[crossAxis] === "left" ? ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0) : ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0), arrowMaxPosition = overlaySize[crossSize] - overlayMargin - arrowSize / 2 - arrowBoundaryOffset, arrowOverlappingChildMinEdge = childOffset[crossAxis] + arrowSize / 2 - (position[crossAxis] + margins[$edcf132a9284368a$var$AXIS[crossAxis]]), arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - arrowSize / 2 - (position[crossAxis] + margins[$edcf132a9284368a$var$AXIS[crossAxis]]), arrowPositionOverlappingChild = $9446cca9a3875146$export$7d15b64cf5a3a4c4(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
- arrowPosition[crossAxis] = $9446cca9a3875146$export$7d15b64cf5a3a4c4(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition), { placement, crossPlacement } = placementInfo, arrowSize ? origin = arrowPosition[crossAxis] : crossPlacement === "right" ? origin += childOffset[crossSize] : crossPlacement === "center" && (origin += childOffset[crossSize] / 2);
- let crossOrigin = placement === "left" || placement === "top" ? overlaySize[size] : 0, triggerAnchorPoint = {
- x: placement === "top" || placement === "bottom" ? origin : crossOrigin,
- y: placement === "left" || placement === "right" ? origin : crossOrigin
- };
- return {
- position,
- maxHeight,
- arrowOffsetLeft: arrowPosition.left,
- arrowOffsetTop: arrowPosition.top,
- placement,
- triggerAnchorPoint
- };
- }
- function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
- let { placement, targetNode, overlayNode, scrollNode, padding, shouldFlip, boundaryElement, offset: offset2, crossOffset, maxHeight, arrowSize = 0, arrowBoundaryOffset = 0 } = opts, container = overlayNode instanceof HTMLElement ? $edcf132a9284368a$var$getContainingBlock(overlayNode) : document.documentElement, isViewportContainer = container === document.documentElement, containerPositionStyle = window.getComputedStyle(container).position, isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== "static", childOffset = isViewportContainer ? $edcf132a9284368a$var$getOffset(targetNode, !1) : $edcf132a9284368a$var$getPosition(targetNode, container, !1);
- if (!isViewportContainer) {
- let { marginTop, marginLeft } = window.getComputedStyle(targetNode);
- childOffset.top += parseInt(marginTop, 10) || 0, childOffset.left += parseInt(marginLeft, 10) || 0;
- }
- let overlaySize = $edcf132a9284368a$var$getOffset(overlayNode, !0), margins = $edcf132a9284368a$var$getMargins(overlayNode);
- var _margins_left, _margins_right;
- overlaySize.width += ((_margins_left = margins.left) !== null && _margins_left !== void 0 ? _margins_left : 0) + ((_margins_right = margins.right) !== null && _margins_right !== void 0 ? _margins_right : 0);
- var _margins_top, _margins_bottom;
- overlaySize.height += ((_margins_top = margins.top) !== null && _margins_top !== void 0 ? _margins_top : 0) + ((_margins_bottom = margins.bottom) !== null && _margins_bottom !== void 0 ? _margins_bottom : 0);
- let scrollSize = $edcf132a9284368a$var$getScroll(scrollNode), boundaryDimensions = $edcf132a9284368a$var$getContainerDimensions(boundaryElement), containerDimensions = $edcf132a9284368a$var$getContainerDimensions(container), containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $edcf132a9284368a$var$getOffset(container, !1) : $edcf132a9284368a$var$getPosition(container, boundaryElement, !1);
- return container.tagName === "HTML" && boundaryElement.tagName === "BODY" && (containerDimensions.scroll.top = 0, containerDimensions.scroll.left = 0), $edcf132a9284368a$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset2, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
- }
- function $edcf132a9284368a$export$4b834cebd9e5cebe(node, ignoreScale) {
- let { top, left, width, height } = node.getBoundingClientRect();
- return ignoreScale && node instanceof node.ownerDocument.defaultView.HTMLElement && (width = node.offsetWidth, height = node.offsetHeight), {
- top,
- left,
- width,
- height
- };
- }
- function $edcf132a9284368a$var$getOffset(node, ignoreScale) {
- let { top, left, width, height } = $edcf132a9284368a$export$4b834cebd9e5cebe(node, ignoreScale), { scrollTop, scrollLeft, clientTop, clientLeft } = document.documentElement;
- return {
- top: top + scrollTop - clientTop,
- left: left + scrollLeft - clientLeft,
- width,
- height
- };
- }
- function $edcf132a9284368a$var$getPosition(node, parent, ignoreScale) {
- let style = window.getComputedStyle(node), offset2;
- if (style.position === "fixed") offset2 = $edcf132a9284368a$export$4b834cebd9e5cebe(node, ignoreScale);
- else {
- offset2 = $edcf132a9284368a$var$getOffset(node, ignoreScale);
- let parentOffset = $edcf132a9284368a$var$getOffset(parent, ignoreScale), parentStyle = window.getComputedStyle(parent);
- parentOffset.top += (parseInt(parentStyle.borderTopWidth, 10) || 0) - parent.scrollTop, parentOffset.left += (parseInt(parentStyle.borderLeftWidth, 10) || 0) - parent.scrollLeft, offset2.top -= parentOffset.top, offset2.left -= parentOffset.left;
- }
- return offset2.top -= parseInt(style.marginTop, 10) || 0, offset2.left -= parseInt(style.marginLeft, 10) || 0, offset2;
- }
- function $edcf132a9284368a$var$getContainingBlock(node) {
- let offsetParent = node.offsetParent;
- if (offsetParent && offsetParent === document.body && window.getComputedStyle(offsetParent).position === "static" && !$edcf132a9284368a$var$isContainingBlock(offsetParent) && (offsetParent = document.documentElement), offsetParent == null)
- for (offsetParent = node.parentElement; offsetParent && !$edcf132a9284368a$var$isContainingBlock(offsetParent); ) offsetParent = offsetParent.parentElement;
- return offsetParent || document.documentElement;
- }
- function $edcf132a9284368a$var$isContainingBlock(node) {
- let style = window.getComputedStyle(node);
- return style.transform !== "none" || /transform|perspective/.test(style.willChange) || style.filter !== "none" || style.contain === "paint" || "backdropFilter" in style && style.backdropFilter !== "none" || "WebkitBackdropFilter" in style && style.WebkitBackdropFilter !== "none";
- }
-
- // ../../node_modules/@react-aria/overlays/dist/useCloseOnScroll.mjs
- init_react();
- var $dd149f63282afbbf$export$f6211563215e3b37 = /* @__PURE__ */ new WeakMap();
- function $dd149f63282afbbf$export$18fc8428861184da(opts) {
- let { triggerRef, isOpen, onClose } = opts;
- useEffect(() => {
- if (!isOpen || onClose === null) return;
- let onScroll = (e2) => {
- let target = e2.target;
- if (!triggerRef.current || target instanceof Node && !target.contains(triggerRef.current) || e2.target instanceof HTMLInputElement || e2.target instanceof HTMLTextAreaElement) return;
- let onCloseHandler = onClose || $dd149f63282afbbf$export$f6211563215e3b37.get(triggerRef.current);
- onCloseHandler && onCloseHandler();
- };
- return window.addEventListener("scroll", onScroll, !0), () => {
- window.removeEventListener("scroll", onScroll, !0);
- };
- }, [
- isOpen,
- onClose,
- triggerRef
- ]);
- }
-
- // ../../node_modules/@react-aria/overlays/dist/useOverlayPosition.mjs
- init_react();
-
- // ../../node_modules/@react-aria/i18n/dist/utils.mjs
- var $148a7a147e38ea7f$var$RTL_SCRIPTS = /* @__PURE__ */ new Set([
- "Arab",
- "Syrc",
- "Samr",
- "Mand",
- "Thaa",
- "Mend",
- "Nkoo",
- "Adlm",
- "Rohg",
- "Hebr"
- ]), $148a7a147e38ea7f$var$RTL_LANGS = /* @__PURE__ */ new Set([
- "ae",
- "ar",
- "arc",
- "bcc",
- "bqi",
- "ckb",
- "dv",
- "fa",
- "glk",
- "he",
- "ku",
- "mzn",
- "nqo",
- "pnb",
- "ps",
- "sd",
- "ug",
- "ur",
- "yi"
- ]);
- function $148a7a147e38ea7f$export$702d680b21cbd764(localeString) {
- if (Intl.Locale) {
- let locale = new Intl.Locale(localeString).maximize(), textInfo = typeof locale.getTextInfo == "function" ? locale.getTextInfo() : locale.textInfo;
- if (textInfo) return textInfo.direction === "rtl";
- if (locale.script) return $148a7a147e38ea7f$var$RTL_SCRIPTS.has(locale.script);
- }
- let lang = localeString.split("-")[0];
- return $148a7a147e38ea7f$var$RTL_LANGS.has(lang);
- }
-
- // ../../node_modules/@react-aria/i18n/dist/useDefaultLocale.mjs
- init_react();
- var $1e5a04cdaf7d1af8$var$localeSymbol = Symbol.for("react-aria.i18n.locale");
- function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
- let locale = typeof window < "u" && window[$1e5a04cdaf7d1af8$var$localeSymbol] || typeof navigator < "u" && (navigator.language || navigator.userLanguage) || "en-US";
- try {
- Intl.DateTimeFormat.supportedLocalesOf([
- locale
- ]);
- } catch {
- locale = "en-US";
- }
- return {
- locale,
- direction: $148a7a147e38ea7f$export$702d680b21cbd764(locale) ? "rtl" : "ltr"
- };
- }
- var $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5(), $1e5a04cdaf7d1af8$var$listeners = /* @__PURE__ */ new Set();
- function $1e5a04cdaf7d1af8$var$updateLocale() {
- $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
- for (let listener of $1e5a04cdaf7d1af8$var$listeners) listener($1e5a04cdaf7d1af8$var$currentLocale);
- }
- function $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a() {
- let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273(), [defaultLocale2, setDefaultLocale] = useState($1e5a04cdaf7d1af8$var$currentLocale);
- return useEffect(() => ($1e5a04cdaf7d1af8$var$listeners.size === 0 && window.addEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale), $1e5a04cdaf7d1af8$var$listeners.add(setDefaultLocale), () => {
- $1e5a04cdaf7d1af8$var$listeners.delete(setDefaultLocale), $1e5a04cdaf7d1af8$var$listeners.size === 0 && window.removeEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
- }), []), isSSR ? {
- locale: "en-US",
- direction: "ltr"
- } : defaultLocale2;
- }
-
- // ../../node_modules/@react-aria/i18n/dist/context.mjs
- init_react();
- var $18f2051aff69b9bf$var$I18nContext = react_default.createContext(null);
- function $18f2051aff69b9bf$export$43bb16f9c6d9e3f7() {
- let defaultLocale2 = $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a();
- return useContext($18f2051aff69b9bf$var$I18nContext) || defaultLocale2;
- }
-
- // ../../node_modules/tslib/tslib.es6.mjs
- var extendStatics = function(d2, b2) {
- return extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
- d3.__proto__ = b3;
- } || function(d3, b3) {
- for (var p2 in b3) Object.prototype.hasOwnProperty.call(b3, p2) && (d3[p2] = b3[p2]);
- }, extendStatics(d2, b2);
- };
- function __extends(d2, b2) {
- if (typeof b2 != "function" && b2 !== null)
- throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
- extendStatics(d2, b2);
- function __() {
- this.constructor = d2;
- }
- d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
- }
- var __assign = function() {
- return __assign = Object.assign || function(t2) {
- for (var s2, i2 = 1, n3 = arguments.length; i2 < n3; i2++) {
- s2 = arguments[i2];
- for (var p2 in s2) Object.prototype.hasOwnProperty.call(s2, p2) && (t2[p2] = s2[p2]);
- }
- return t2;
- }, __assign.apply(this, arguments);
- };
- function __rest(s2, e2) {
- var t2 = {};
- for (var p2 in s2) Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0 && (t2[p2] = s2[p2]);
- if (s2 != null && typeof Object.getOwnPropertySymbols == "function")
- for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s2); i2 < p2.length; i2++)
- e2.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i2]) && (t2[p2[i2]] = s2[p2[i2]]);
- return t2;
- }
- function __spreadArray(to, from, pack) {
- if (pack || arguments.length === 2) for (var i2 = 0, l3 = from.length, ar; i2 < l3; i2++)
- (ar || !(i2 in from)) && (ar || (ar = Array.prototype.slice.call(from, 0, i2)), ar[i2] = from[i2]);
- return to.concat(ar || Array.prototype.slice.call(from));
- }
-
- // ../../node_modules/@formatjs/fast-memoize/lib/index.js
- function memoize(fn, options2) {
- var cache = options2 && options2.cache ? options2.cache : cacheDefault, serializer = options2 && options2.serializer ? options2.serializer : serializerDefault, strategy = options2 && options2.strategy ? options2.strategy : strategyDefault;
- return strategy(fn, {
- cache,
- serializer
- });
- }
- function isPrimitive(value) {
- return value == null || typeof value == "number" || typeof value == "boolean";
- }
- function monadic(fn, cache, serializer, arg) {
- var cacheKey = isPrimitive(arg) ? arg : serializer(arg), computedValue = cache.get(cacheKey);
- return typeof computedValue > "u" && (computedValue = fn.call(this, arg), cache.set(cacheKey, computedValue)), computedValue;
- }
- function variadic(fn, cache, serializer) {
- var args = Array.prototype.slice.call(arguments, 3), cacheKey = serializer(args), computedValue = cache.get(cacheKey);
- return typeof computedValue > "u" && (computedValue = fn.apply(this, args), cache.set(cacheKey, computedValue)), computedValue;
- }
- function assemble(fn, context, strategy, cache, serialize) {
- return strategy.bind(context, fn, cache, serialize);
- }
- function strategyDefault(fn, options2) {
- var strategy = fn.length === 1 ? monadic : variadic;
- return assemble(fn, this, strategy, options2.cache.create(), options2.serializer);
- }
- function strategyVariadic(fn, options2) {
- return assemble(fn, this, variadic, options2.cache.create(), options2.serializer);
- }
- function strategyMonadic(fn, options2) {
- return assemble(fn, this, monadic, options2.cache.create(), options2.serializer);
- }
- var serializerDefault = function() {
- return JSON.stringify(arguments);
- }, ObjectWithoutPrototypeCache = (
- /** @class */
- (function() {
- function ObjectWithoutPrototypeCache2() {
- this.cache = /* @__PURE__ */ Object.create(null);
- }
- return ObjectWithoutPrototypeCache2.prototype.get = function(key) {
- return this.cache[key];
- }, ObjectWithoutPrototypeCache2.prototype.set = function(key, value) {
- this.cache[key] = value;
- }, ObjectWithoutPrototypeCache2;
- })()
- ), cacheDefault = {
- create: function() {
- return new ObjectWithoutPrototypeCache();
- }
- }, strategies = {
- variadic: strategyVariadic,
- monadic: strategyMonadic
- };
-
- // ../../node_modules/@formatjs/icu-messageformat-parser/lib/error.js
- var ErrorKind;
- (function(ErrorKind2) {
- ErrorKind2[ErrorKind2.EXPECT_ARGUMENT_CLOSING_BRACE = 1] = "EXPECT_ARGUMENT_CLOSING_BRACE", ErrorKind2[ErrorKind2.EMPTY_ARGUMENT = 2] = "EMPTY_ARGUMENT", ErrorKind2[ErrorKind2.MALFORMED_ARGUMENT = 3] = "MALFORMED_ARGUMENT", ErrorKind2[ErrorKind2.EXPECT_ARGUMENT_TYPE = 4] = "EXPECT_ARGUMENT_TYPE", ErrorKind2[ErrorKind2.INVALID_ARGUMENT_TYPE = 5] = "INVALID_ARGUMENT_TYPE", ErrorKind2[ErrorKind2.EXPECT_ARGUMENT_STYLE = 6] = "EXPECT_ARGUMENT_STYLE", ErrorKind2[ErrorKind2.INVALID_NUMBER_SKELETON = 7] = "INVALID_NUMBER_SKELETON", ErrorKind2[ErrorKind2.INVALID_DATE_TIME_SKELETON = 8] = "INVALID_DATE_TIME_SKELETON", ErrorKind2[ErrorKind2.EXPECT_NUMBER_SKELETON = 9] = "EXPECT_NUMBER_SKELETON", ErrorKind2[ErrorKind2.EXPECT_DATE_TIME_SKELETON = 10] = "EXPECT_DATE_TIME_SKELETON", ErrorKind2[ErrorKind2.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE = 11] = "UNCLOSED_QUOTE_IN_ARGUMENT_STYLE", ErrorKind2[ErrorKind2.EXPECT_SELECT_ARGUMENT_OPTIONS = 12] = "EXPECT_SELECT_ARGUMENT_OPTIONS", ErrorKind2[ErrorKind2.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE = 13] = "EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE", ErrorKind2[ErrorKind2.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE = 14] = "INVALID_PLURAL_ARGUMENT_OFFSET_VALUE", ErrorKind2[ErrorKind2.EXPECT_SELECT_ARGUMENT_SELECTOR = 15] = "EXPECT_SELECT_ARGUMENT_SELECTOR", ErrorKind2[ErrorKind2.EXPECT_PLURAL_ARGUMENT_SELECTOR = 16] = "EXPECT_PLURAL_ARGUMENT_SELECTOR", ErrorKind2[ErrorKind2.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT = 17] = "EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT", ErrorKind2[ErrorKind2.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT = 18] = "EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT", ErrorKind2[ErrorKind2.INVALID_PLURAL_ARGUMENT_SELECTOR = 19] = "INVALID_PLURAL_ARGUMENT_SELECTOR", ErrorKind2[ErrorKind2.DUPLICATE_PLURAL_ARGUMENT_SELECTOR = 20] = "DUPLICATE_PLURAL_ARGUMENT_SELECTOR", ErrorKind2[ErrorKind2.DUPLICATE_SELECT_ARGUMENT_SELECTOR = 21] = "DUPLICATE_SELECT_ARGUMENT_SELECTOR", ErrorKind2[ErrorKind2.MISSING_OTHER_CLAUSE = 22] = "MISSING_OTHER_CLAUSE", ErrorKind2[ErrorKind2.INVALID_TAG = 23] = "INVALID_TAG", ErrorKind2[ErrorKind2.INVALID_TAG_NAME = 25] = "INVALID_TAG_NAME", ErrorKind2[ErrorKind2.UNMATCHED_CLOSING_TAG = 26] = "UNMATCHED_CLOSING_TAG", ErrorKind2[ErrorKind2.UNCLOSED_TAG = 27] = "UNCLOSED_TAG";
- })(ErrorKind || (ErrorKind = {}));
-
- // ../../node_modules/@formatjs/icu-messageformat-parser/lib/types.js
- var TYPE;
- (function(TYPE2) {
- TYPE2[TYPE2.literal = 0] = "literal", TYPE2[TYPE2.argument = 1] = "argument", TYPE2[TYPE2.number = 2] = "number", TYPE2[TYPE2.date = 3] = "date", TYPE2[TYPE2.time = 4] = "time", TYPE2[TYPE2.select = 5] = "select", TYPE2[TYPE2.plural = 6] = "plural", TYPE2[TYPE2.pound = 7] = "pound", TYPE2[TYPE2.tag = 8] = "tag";
- })(TYPE || (TYPE = {}));
- var SKELETON_TYPE;
- (function(SKELETON_TYPE2) {
- SKELETON_TYPE2[SKELETON_TYPE2.number = 0] = "number", SKELETON_TYPE2[SKELETON_TYPE2.dateTime = 1] = "dateTime";
- })(SKELETON_TYPE || (SKELETON_TYPE = {}));
- function isLiteralElement(el) {
- return el.type === TYPE.literal;
- }
- function isArgumentElement(el) {
- return el.type === TYPE.argument;
- }
- function isNumberElement(el) {
- return el.type === TYPE.number;
- }
- function isDateElement(el) {
- return el.type === TYPE.date;
- }
- function isTimeElement(el) {
- return el.type === TYPE.time;
- }
- function isSelectElement(el) {
- return el.type === TYPE.select;
- }
- function isPluralElement(el) {
- return el.type === TYPE.plural;
- }
- function isPoundElement(el) {
- return el.type === TYPE.pound;
- }
- function isTagElement(el) {
- return el.type === TYPE.tag;
- }
- function isNumberSkeleton(el) {
- return !!(el && typeof el == "object" && el.type === SKELETON_TYPE.number);
- }
- function isDateTimeSkeleton(el) {
- return !!(el && typeof el == "object" && el.type === SKELETON_TYPE.dateTime);
- }
-
- // ../../node_modules/@formatjs/icu-messageformat-parser/lib/regex.generated.js
- var SPACE_SEPARATOR_REGEX = /[ \xA0\u1680\u2000-\u200A\u202F\u205F\u3000]/;
-
- // ../../node_modules/@formatjs/icu-skeleton-parser/lib/date-time.js
- var DATE_TIME_REGEX = /(?:[Eec]{1,6}|G{1,5}|[Qq]{1,5}|(?:[yYur]+|U{1,5})|[ML]{1,5}|d{1,2}|D{1,3}|F{1}|[abB]{1,5}|[hkHK]{1,2}|w{1,2}|W{1}|m{1,2}|s{1,2}|[zZOvVxX]{1,4})(?=([^']*'[^']*')*[^']*$)/g;
- function parseDateTimeSkeleton(skeleton) {
- var result = {};
- return skeleton.replace(DATE_TIME_REGEX, function(match) {
- var len = match.length;
- switch (match[0]) {
- // Era
- case "G":
- result.era = len === 4 ? "long" : len === 5 ? "narrow" : "short";
- break;
- // Year
- case "y":
- result.year = len === 2 ? "2-digit" : "numeric";
- break;
- case "Y":
- case "u":
- case "U":
- case "r":
- throw new RangeError("`Y/u/U/r` (year) patterns are not supported, use `y` instead");
- // Quarter
- case "q":
- case "Q":
- throw new RangeError("`q/Q` (quarter) patterns are not supported");
- // Month
- case "M":
- case "L":
- result.month = ["numeric", "2-digit", "short", "long", "narrow"][len - 1];
- break;
- // Week
- case "w":
- case "W":
- throw new RangeError("`w/W` (week) patterns are not supported");
- case "d":
- result.day = ["numeric", "2-digit"][len - 1];
- break;
- case "D":
- case "F":
- case "g":
- throw new RangeError("`D/F/g` (day) patterns are not supported, use `d` instead");
- // Weekday
- case "E":
- result.weekday = len === 4 ? "long" : len === 5 ? "narrow" : "short";
- break;
- case "e":
- if (len < 4)
- throw new RangeError("`e..eee` (weekday) patterns are not supported");
- result.weekday = ["short", "long", "narrow", "short"][len - 4];
- break;
- case "c":
- if (len < 4)
- throw new RangeError("`c..ccc` (weekday) patterns are not supported");
- result.weekday = ["short", "long", "narrow", "short"][len - 4];
- break;
- // Period
- case "a":
- result.hour12 = !0;
- break;
- case "b":
- // am, pm, noon, midnight
- case "B":
- throw new RangeError("`b/B` (period) patterns are not supported, use `a` instead");
- // Hour
- case "h":
- result.hourCycle = "h12", result.hour = ["numeric", "2-digit"][len - 1];
- break;
- case "H":
- result.hourCycle = "h23", result.hour = ["numeric", "2-digit"][len - 1];
- break;
- case "K":
- result.hourCycle = "h11", result.hour = ["numeric", "2-digit"][len - 1];
- break;
- case "k":
- result.hourCycle = "h24", result.hour = ["numeric", "2-digit"][len - 1];
- break;
- case "j":
- case "J":
- case "C":
- throw new RangeError("`j/J/C` (hour) patterns are not supported, use `h/H/K/k` instead");
- // Minute
- case "m":
- result.minute = ["numeric", "2-digit"][len - 1];
- break;
- // Second
- case "s":
- result.second = ["numeric", "2-digit"][len - 1];
- break;
- case "S":
- case "A":
- throw new RangeError("`S/A` (second) patterns are not supported, use `s` instead");
- // Zone
- case "z":
- result.timeZoneName = len < 4 ? "short" : "long";
- break;
- case "Z":
- // 1..3, 4, 5: The ISO8601 varios formats
- case "O":
- // 1, 4: milliseconds in day short, long
- case "v":
- // 1, 4: generic non-location format
- case "V":
- // 1, 2, 3, 4: time zone ID or city
- case "X":
- // 1, 2, 3, 4: The ISO8601 varios formats
- case "x":
- throw new RangeError("`Z/O/v/V/X/x` (timeZone) patterns are not supported, use `z` instead");
- }
- return "";
- }), result;
- }
-
- // ../../node_modules/@formatjs/icu-skeleton-parser/lib/regex.generated.js
- var WHITE_SPACE_REGEX = /[\t-\r \x85\u200E\u200F\u2028\u2029]/i;
-
- // ../../node_modules/@formatjs/icu-skeleton-parser/lib/number.js
- function parseNumberSkeletonFromString(skeleton) {
- if (skeleton.length === 0)
- throw new Error("Number skeleton cannot be empty");
- for (var stringTokens = skeleton.split(WHITE_SPACE_REGEX).filter(function(x2) {
- return x2.length > 0;
- }), tokens2 = [], _i = 0, stringTokens_1 = stringTokens; _i < stringTokens_1.length; _i++) {
- var stringToken = stringTokens_1[_i], stemAndOptions = stringToken.split("/");
- if (stemAndOptions.length === 0)
- throw new Error("Invalid number skeleton");
- for (var stem = stemAndOptions[0], options2 = stemAndOptions.slice(1), _a2 = 0, options_1 = options2; _a2 < options_1.length; _a2++) {
- var option = options_1[_a2];
- if (option.length === 0)
- throw new Error("Invalid number skeleton");
- }
- tokens2.push({ stem, options: options2 });
- }
- return tokens2;
- }
- function icuUnitToEcma(unit) {
- return unit.replace(/^(.*?)-/, "");
- }
- var FRACTION_PRECISION_REGEX = /^\.(?:(0+)(\*)?|(#+)|(0+)(#+))$/g, SIGNIFICANT_PRECISION_REGEX = /^(@+)?(\+|#+)?[rs]?$/g, INTEGER_WIDTH_REGEX = /(\*)(0+)|(#+)(0+)|(0+)/g, CONCISE_INTEGER_WIDTH_REGEX = /^(0+)$/;
- function parseSignificantPrecision(str) {
- var result = {};
- return str[str.length - 1] === "r" ? result.roundingPriority = "morePrecision" : str[str.length - 1] === "s" && (result.roundingPriority = "lessPrecision"), str.replace(SIGNIFICANT_PRECISION_REGEX, function(_2, g1, g2) {
- return typeof g2 != "string" ? (result.minimumSignificantDigits = g1.length, result.maximumSignificantDigits = g1.length) : g2 === "+" ? result.minimumSignificantDigits = g1.length : g1[0] === "#" ? result.maximumSignificantDigits = g1.length : (result.minimumSignificantDigits = g1.length, result.maximumSignificantDigits = g1.length + (typeof g2 == "string" ? g2.length : 0)), "";
- }), result;
- }
- function parseSign(str) {
- switch (str) {
- case "sign-auto":
- return {
- signDisplay: "auto"
- };
- case "sign-accounting":
- case "()":
- return {
- currencySign: "accounting"
- };
- case "sign-always":
- case "+!":
- return {
- signDisplay: "always"
- };
- case "sign-accounting-always":
- case "()!":
- return {
- signDisplay: "always",
- currencySign: "accounting"
- };
- case "sign-except-zero":
- case "+?":
- return {
- signDisplay: "exceptZero"
- };
- case "sign-accounting-except-zero":
- case "()?":
- return {
- signDisplay: "exceptZero",
- currencySign: "accounting"
- };
- case "sign-never":
- case "+_":
- return {
- signDisplay: "never"
- };
- }
- }
- function parseConciseScientificAndEngineeringStem(stem) {
- var result;
- if (stem[0] === "E" && stem[1] === "E" ? (result = {
- notation: "engineering"
- }, stem = stem.slice(2)) : stem[0] === "E" && (result = {
- notation: "scientific"
- }, stem = stem.slice(1)), result) {
- var signDisplay = stem.slice(0, 2);
- if (signDisplay === "+!" ? (result.signDisplay = "always", stem = stem.slice(2)) : signDisplay === "+?" && (result.signDisplay = "exceptZero", stem = stem.slice(2)), !CONCISE_INTEGER_WIDTH_REGEX.test(stem))
- throw new Error("Malformed concise eng/scientific notation");
- result.minimumIntegerDigits = stem.length;
- }
- return result;
- }
- function parseNotationOptions(opt) {
- var result = {}, signOpts = parseSign(opt);
- return signOpts || result;
- }
- function parseNumberSkeleton(tokens2) {
- for (var result = {}, _i = 0, tokens_1 = tokens2; _i < tokens_1.length; _i++) {
- var token = tokens_1[_i];
- switch (token.stem) {
- case "percent":
- case "%":
- result.style = "percent";
- continue;
- case "%x100":
- result.style = "percent", result.scale = 100;
- continue;
- case "currency":
- result.style = "currency", result.currency = token.options[0];
- continue;
- case "group-off":
- case ",_":
- result.useGrouping = !1;
- continue;
- case "precision-integer":
- case ".":
- result.maximumFractionDigits = 0;
- continue;
- case "measure-unit":
- case "unit":
- result.style = "unit", result.unit = icuUnitToEcma(token.options[0]);
- continue;
- case "compact-short":
- case "K":
- result.notation = "compact", result.compactDisplay = "short";
- continue;
- case "compact-long":
- case "KK":
- result.notation = "compact", result.compactDisplay = "long";
- continue;
- case "scientific":
- result = __assign(__assign(__assign({}, result), { notation: "scientific" }), token.options.reduce(function(all, opt2) {
- return __assign(__assign({}, all), parseNotationOptions(opt2));
- }, {}));
- continue;
- case "engineering":
- result = __assign(__assign(__assign({}, result), { notation: "engineering" }), token.options.reduce(function(all, opt2) {
- return __assign(__assign({}, all), parseNotationOptions(opt2));
- }, {}));
- continue;
- case "notation-simple":
- result.notation = "standard";
- continue;
- // https://github.com/unicode-org/icu/blob/master/icu4c/source/i18n/unicode/unumberformatter.h
- case "unit-width-narrow":
- result.currencyDisplay = "narrowSymbol", result.unitDisplay = "narrow";
- continue;
- case "unit-width-short":
- result.currencyDisplay = "code", result.unitDisplay = "short";
- continue;
- case "unit-width-full-name":
- result.currencyDisplay = "name", result.unitDisplay = "long";
- continue;
- case "unit-width-iso-code":
- result.currencyDisplay = "symbol";
- continue;
- case "scale":
- result.scale = parseFloat(token.options[0]);
- continue;
- case "rounding-mode-floor":
- result.roundingMode = "floor";
- continue;
- case "rounding-mode-ceiling":
- result.roundingMode = "ceil";
- continue;
- case "rounding-mode-down":
- result.roundingMode = "trunc";
- continue;
- case "rounding-mode-up":
- result.roundingMode = "expand";
- continue;
- case "rounding-mode-half-even":
- result.roundingMode = "halfEven";
- continue;
- case "rounding-mode-half-down":
- result.roundingMode = "halfTrunc";
- continue;
- case "rounding-mode-half-up":
- result.roundingMode = "halfExpand";
- continue;
- // https://unicode-org.github.io/icu/userguide/format_parse/numbers/skeletons.html#integer-width
- case "integer-width":
- if (token.options.length > 1)
- throw new RangeError("integer-width stems only accept a single optional option");
- token.options[0].replace(INTEGER_WIDTH_REGEX, function(_2, g1, g2, g3, g4, g5) {
- if (g1)
- result.minimumIntegerDigits = g2.length;
- else {
- if (g3 && g4)
- throw new Error("We currently do not support maximum integer digits");
- if (g5)
- throw new Error("We currently do not support exact integer digits");
- }
- return "";
- });
- continue;
- }
- if (CONCISE_INTEGER_WIDTH_REGEX.test(token.stem)) {
- result.minimumIntegerDigits = token.stem.length;
- continue;
- }
- if (FRACTION_PRECISION_REGEX.test(token.stem)) {
- if (token.options.length > 1)
- throw new RangeError("Fraction-precision stems only accept a single optional option");
- token.stem.replace(FRACTION_PRECISION_REGEX, function(_2, g1, g2, g3, g4, g5) {
- return g2 === "*" ? result.minimumFractionDigits = g1.length : g3 && g3[0] === "#" ? result.maximumFractionDigits = g3.length : g4 && g5 ? (result.minimumFractionDigits = g4.length, result.maximumFractionDigits = g4.length + g5.length) : (result.minimumFractionDigits = g1.length, result.maximumFractionDigits = g1.length), "";
- });
- var opt = token.options[0];
- opt === "w" ? result = __assign(__assign({}, result), { trailingZeroDisplay: "stripIfInteger" }) : opt && (result = __assign(__assign({}, result), parseSignificantPrecision(opt)));
- continue;
- }
- if (SIGNIFICANT_PRECISION_REGEX.test(token.stem)) {
- result = __assign(__assign({}, result), parseSignificantPrecision(token.stem));
- continue;
- }
- var signOpts = parseSign(token.stem);
- signOpts && (result = __assign(__assign({}, result), signOpts));
- var conciseScientificAndEngineeringOpts = parseConciseScientificAndEngineeringStem(token.stem);
- conciseScientificAndEngineeringOpts && (result = __assign(__assign({}, result), conciseScientificAndEngineeringOpts));
- }
- return result;
- }
-
- // ../../node_modules/@formatjs/icu-messageformat-parser/lib/time-data.generated.js
- var timeData = {
- "001": [
- "H",
- "h"
- ],
- 419: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- AC: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- AD: [
- "H",
- "hB"
- ],
- AE: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- AF: [
- "H",
- "hb",
- "hB",
- "h"
- ],
- AG: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- AI: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- AL: [
- "h",
- "H",
- "hB"
- ],
- AM: [
- "H",
- "hB"
- ],
- AO: [
- "H",
- "hB"
- ],
- AR: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- AS: [
- "h",
- "H"
- ],
- AT: [
- "H",
- "hB"
- ],
- AU: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- AW: [
- "H",
- "hB"
- ],
- AX: [
- "H"
- ],
- AZ: [
- "H",
- "hB",
- "h"
- ],
- BA: [
- "H",
- "hB",
- "h"
- ],
- BB: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- BD: [
- "h",
- "hB",
- "H"
- ],
- BE: [
- "H",
- "hB"
- ],
- BF: [
- "H",
- "hB"
- ],
- BG: [
- "H",
- "hB",
- "h"
- ],
- BH: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- BI: [
- "H",
- "h"
- ],
- BJ: [
- "H",
- "hB"
- ],
- BL: [
- "H",
- "hB"
- ],
- BM: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- BN: [
- "hb",
- "hB",
- "h",
- "H"
- ],
- BO: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- BQ: [
- "H"
- ],
- BR: [
- "H",
- "hB"
- ],
- BS: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- BT: [
- "h",
- "H"
- ],
- BW: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- BY: [
- "H",
- "h"
- ],
- BZ: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- CA: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- CC: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- CD: [
- "hB",
- "H"
- ],
- CF: [
- "H",
- "h",
- "hB"
- ],
- CG: [
- "H",
- "hB"
- ],
- CH: [
- "H",
- "hB",
- "h"
- ],
- CI: [
- "H",
- "hB"
- ],
- CK: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- CL: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- CM: [
- "H",
- "h",
- "hB"
- ],
- CN: [
- "H",
- "hB",
- "hb",
- "h"
- ],
- CO: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- CP: [
- "H"
- ],
- CR: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- CU: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- CV: [
- "H",
- "hB"
- ],
- CW: [
- "H",
- "hB"
- ],
- CX: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- CY: [
- "h",
- "H",
- "hb",
- "hB"
- ],
- CZ: [
- "H"
- ],
- DE: [
- "H",
- "hB"
- ],
- DG: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- DJ: [
- "h",
- "H"
- ],
- DK: [
- "H"
- ],
- DM: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- DO: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- DZ: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- EA: [
- "H",
- "h",
- "hB",
- "hb"
- ],
- EC: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- EE: [
- "H",
- "hB"
- ],
- EG: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- EH: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- ER: [
- "h",
- "H"
- ],
- ES: [
- "H",
- "hB",
- "h",
- "hb"
- ],
- ET: [
- "hB",
- "hb",
- "h",
- "H"
- ],
- FI: [
- "H"
- ],
- FJ: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- FK: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- FM: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- FO: [
- "H",
- "h"
- ],
- FR: [
- "H",
- "hB"
- ],
- GA: [
- "H",
- "hB"
- ],
- GB: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- GD: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- GE: [
- "H",
- "hB",
- "h"
- ],
- GF: [
- "H",
- "hB"
- ],
- GG: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- GH: [
- "h",
- "H"
- ],
- GI: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- GL: [
- "H",
- "h"
- ],
- GM: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- GN: [
- "H",
- "hB"
- ],
- GP: [
- "H",
- "hB"
- ],
- GQ: [
- "H",
- "hB",
- "h",
- "hb"
- ],
- GR: [
- "h",
- "H",
- "hb",
- "hB"
- ],
- GT: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- GU: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- GW: [
- "H",
- "hB"
- ],
- GY: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- HK: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- HN: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- HR: [
- "H",
- "hB"
- ],
- HU: [
- "H",
- "h"
- ],
- IC: [
- "H",
- "h",
- "hB",
- "hb"
- ],
- ID: [
- "H"
- ],
- IE: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- IL: [
- "H",
- "hB"
- ],
- IM: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- IN: [
- "h",
- "H"
- ],
- IO: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- IQ: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- IR: [
- "hB",
- "H"
- ],
- IS: [
- "H"
- ],
- IT: [
- "H",
- "hB"
- ],
- JE: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- JM: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- JO: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- JP: [
- "H",
- "K",
- "h"
- ],
- KE: [
- "hB",
- "hb",
- "H",
- "h"
- ],
- KG: [
- "H",
- "h",
- "hB",
- "hb"
- ],
- KH: [
- "hB",
- "h",
- "H",
- "hb"
- ],
- KI: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- KM: [
- "H",
- "h",
- "hB",
- "hb"
- ],
- KN: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- KP: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- KR: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- KW: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- KY: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- KZ: [
- "H",
- "hB"
- ],
- LA: [
- "H",
- "hb",
- "hB",
- "h"
- ],
- LB: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- LC: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- LI: [
- "H",
- "hB",
- "h"
- ],
- LK: [
- "H",
- "h",
- "hB",
- "hb"
- ],
- LR: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- LS: [
- "h",
- "H"
- ],
- LT: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- LU: [
- "H",
- "h",
- "hB"
- ],
- LV: [
- "H",
- "hB",
- "hb",
- "h"
- ],
- LY: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- MA: [
- "H",
- "h",
- "hB",
- "hb"
- ],
- MC: [
- "H",
- "hB"
- ],
- MD: [
- "H",
- "hB"
- ],
- ME: [
- "H",
- "hB",
- "h"
- ],
- MF: [
- "H",
- "hB"
- ],
- MG: [
- "H",
- "h"
- ],
- MH: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- MK: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- ML: [
- "H"
- ],
- MM: [
- "hB",
- "hb",
- "H",
- "h"
- ],
- MN: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- MO: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- MP: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- MQ: [
- "H",
- "hB"
- ],
- MR: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- MS: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- MT: [
- "H",
- "h"
- ],
- MU: [
- "H",
- "h"
- ],
- MV: [
- "H",
- "h"
- ],
- MW: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- MX: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- MY: [
- "hb",
- "hB",
- "h",
- "H"
- ],
- MZ: [
- "H",
- "hB"
- ],
- NA: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- NC: [
- "H",
- "hB"
- ],
- NE: [
- "H"
- ],
- NF: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- NG: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- NI: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- NL: [
- "H",
- "hB"
- ],
- NO: [
- "H",
- "h"
- ],
- NP: [
- "H",
- "h",
- "hB"
- ],
- NR: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- NU: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- NZ: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- OM: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- PA: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- PE: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- PF: [
- "H",
- "h",
- "hB"
- ],
- PG: [
- "h",
- "H"
- ],
- PH: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- PK: [
- "h",
- "hB",
- "H"
- ],
- PL: [
- "H",
- "h"
- ],
- PM: [
- "H",
- "hB"
- ],
- PN: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- PR: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- PS: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- PT: [
- "H",
- "hB"
- ],
- PW: [
- "h",
- "H"
- ],
- PY: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- QA: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- RE: [
- "H",
- "hB"
- ],
- RO: [
- "H",
- "hB"
- ],
- RS: [
- "H",
- "hB",
- "h"
- ],
- RU: [
- "H"
- ],
- RW: [
- "H",
- "h"
- ],
- SA: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- SB: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- SC: [
- "H",
- "h",
- "hB"
- ],
- SD: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- SE: [
- "H"
- ],
- SG: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- SH: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- SI: [
- "H",
- "hB"
- ],
- SJ: [
- "H"
- ],
- SK: [
- "H"
- ],
- SL: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- SM: [
- "H",
- "h",
- "hB"
- ],
- SN: [
- "H",
- "h",
- "hB"
- ],
- SO: [
- "h",
- "H"
- ],
- SR: [
- "H",
- "hB"
- ],
- SS: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- ST: [
- "H",
- "hB"
- ],
- SV: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- SX: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- SY: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- SZ: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- TA: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- TC: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- TD: [
- "h",
- "H",
- "hB"
- ],
- TF: [
- "H",
- "h",
- "hB"
- ],
- TG: [
- "H",
- "hB"
- ],
- TH: [
- "H",
- "h"
- ],
- TJ: [
- "H",
- "h"
- ],
- TL: [
- "H",
- "hB",
- "hb",
- "h"
- ],
- TM: [
- "H",
- "h"
- ],
- TN: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- TO: [
- "h",
- "H"
- ],
- TR: [
- "H",
- "hB"
- ],
- TT: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- TW: [
- "hB",
- "hb",
- "h",
- "H"
- ],
- TZ: [
- "hB",
- "hb",
- "H",
- "h"
- ],
- UA: [
- "H",
- "hB",
- "h"
- ],
- UG: [
- "hB",
- "hb",
- "H",
- "h"
- ],
- UM: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- US: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- UY: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- UZ: [
- "H",
- "hB",
- "h"
- ],
- VA: [
- "H",
- "h",
- "hB"
- ],
- VC: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- VE: [
- "h",
- "H",
- "hB",
- "hb"
- ],
- VG: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- VI: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- VN: [
- "H",
- "h"
- ],
- VU: [
- "h",
- "H"
- ],
- WF: [
- "H",
- "hB"
- ],
- WS: [
- "h",
- "H"
- ],
- XK: [
- "H",
- "hB",
- "h"
- ],
- YE: [
- "h",
- "hB",
- "hb",
- "H"
- ],
- YT: [
- "H",
- "hB"
- ],
- ZA: [
- "H",
- "h",
- "hb",
- "hB"
- ],
- ZM: [
- "h",
- "hb",
- "H",
- "hB"
- ],
- ZW: [
- "H",
- "h"
- ],
- "af-ZA": [
- "H",
- "h",
- "hB",
- "hb"
- ],
- "ar-001": [
- "h",
- "hB",
- "hb",
- "H"
- ],
- "ca-ES": [
- "H",
- "h",
- "hB"
- ],
- "en-001": [
- "h",
- "hb",
- "H",
- "hB"
- ],
- "en-HK": [
- "h",
- "hb",
- "H",
- "hB"
- ],
- "en-IL": [
- "H",
- "h",
- "hb",
- "hB"
- ],
- "en-MY": [
- "h",
- "hb",
- "H",
- "hB"
- ],
- "es-BR": [
- "H",
- "h",
- "hB",
- "hb"
- ],
- "es-ES": [
- "H",
- "h",
- "hB",
- "hb"
- ],
- "es-GQ": [
- "H",
- "h",
- "hB",
- "hb"
- ],
- "fr-CA": [
- "H",
- "h",
- "hB"
- ],
- "gl-ES": [
- "H",
- "h",
- "hB"
- ],
- "gu-IN": [
- "hB",
- "hb",
- "h",
- "H"
- ],
- "hi-IN": [
- "hB",
- "h",
- "H"
- ],
- "it-CH": [
- "H",
- "h",
- "hB"
- ],
- "it-IT": [
- "H",
- "h",
- "hB"
- ],
- "kn-IN": [
- "hB",
- "h",
- "H"
- ],
- "ml-IN": [
- "hB",
- "h",
- "H"
- ],
- "mr-IN": [
- "hB",
- "hb",
- "h",
- "H"
- ],
- "pa-IN": [
- "hB",
- "hb",
- "h",
- "H"
- ],
- "ta-IN": [
- "hB",
- "h",
- "hb",
- "H"
- ],
- "te-IN": [
- "hB",
- "h",
- "H"
- ],
- "zu-ZA": [
- "H",
- "hB",
- "hb",
- "h"
- ]
- };
-
- // ../../node_modules/@formatjs/icu-messageformat-parser/lib/date-time-pattern-generator.js
- function getBestPattern(skeleton, locale) {
- for (var skeletonCopy = "", patternPos = 0; patternPos < skeleton.length; patternPos++) {
- var patternChar = skeleton.charAt(patternPos);
- if (patternChar === "j") {
- for (var extraLength = 0; patternPos + 1 < skeleton.length && skeleton.charAt(patternPos + 1) === patternChar; )
- extraLength++, patternPos++;
- var hourLen = 1 + (extraLength & 1), dayPeriodLen = extraLength < 2 ? 1 : 3 + (extraLength >> 1), dayPeriodChar = "a", hourChar = getDefaultHourSymbolFromLocale(locale);
- for ((hourChar == "H" || hourChar == "k") && (dayPeriodLen = 0); dayPeriodLen-- > 0; )
- skeletonCopy += dayPeriodChar;
- for (; hourLen-- > 0; )
- skeletonCopy = hourChar + skeletonCopy;
- } else patternChar === "J" ? skeletonCopy += "H" : skeletonCopy += patternChar;
- }
- return skeletonCopy;
- }
- function getDefaultHourSymbolFromLocale(locale) {
- var hourCycle = locale.hourCycle;
- if (hourCycle === void 0 && // @ts-ignore hourCycle(s) is not identified yet
- locale.hourCycles && // @ts-ignore
- locale.hourCycles.length && (hourCycle = locale.hourCycles[0]), hourCycle)
- switch (hourCycle) {
- case "h24":
- return "k";
- case "h23":
- return "H";
- case "h12":
- return "h";
- case "h11":
- return "K";
- default:
- throw new Error("Invalid hourCycle");
- }
- var languageTag = locale.language, regionTag;
- languageTag !== "root" && (regionTag = locale.maximize().region);
- var hourCycles = timeData[regionTag || ""] || timeData[languageTag || ""] || timeData["".concat(languageTag, "-001")] || timeData["001"];
- return hourCycles[0];
- }
-
- // ../../node_modules/@formatjs/icu-messageformat-parser/lib/parser.js
- var _a, SPACE_SEPARATOR_START_REGEX = new RegExp("^".concat(SPACE_SEPARATOR_REGEX.source, "*")), SPACE_SEPARATOR_END_REGEX = new RegExp("".concat(SPACE_SEPARATOR_REGEX.source, "*$"));
- function createLocation(start, end) {
- return { start, end };
- }
- var hasNativeStartsWith = !!String.prototype.startsWith && "_a".startsWith("a", 1), hasNativeFromCodePoint = !!String.fromCodePoint, hasNativeFromEntries = !!Object.fromEntries, hasNativeCodePointAt = !!String.prototype.codePointAt, hasTrimStart = !!String.prototype.trimStart, hasTrimEnd = !!String.prototype.trimEnd, hasNativeIsSafeInteger = !!Number.isSafeInteger, isSafeInteger = hasNativeIsSafeInteger ? Number.isSafeInteger : function(n3) {
- return typeof n3 == "number" && isFinite(n3) && Math.floor(n3) === n3 && Math.abs(n3) <= 9007199254740991;
- }, REGEX_SUPPORTS_U_AND_Y = !0;
- try {
- re = RE("([^\\p{White_Space}\\p{Pattern_Syntax}]*)", "yu"), REGEX_SUPPORTS_U_AND_Y = ((_a = re.exec("a")) === null || _a === void 0 ? void 0 : _a[0]) === "a";
- } catch {
- REGEX_SUPPORTS_U_AND_Y = !1;
- }
- var re, startsWith = hasNativeStartsWith ? (
- // Native
- function(s2, search, position) {
- return s2.startsWith(search, position);
- }
- ) : (
- // For IE11
- function(s2, search, position) {
- return s2.slice(position, position + search.length) === search;
- }
- ), fromCodePoint = hasNativeFromCodePoint ? String.fromCodePoint : (
- // IE11
- function() {
- for (var codePoints = [], _i = 0; _i < arguments.length; _i++)
- codePoints[_i] = arguments[_i];
- for (var elements = "", length = codePoints.length, i2 = 0, code; length > i2; ) {
- if (code = codePoints[i2++], code > 1114111)
- throw RangeError(code + " is not a valid code point");
- elements += code < 65536 ? String.fromCharCode(code) : String.fromCharCode(((code -= 65536) >> 10) + 55296, code % 1024 + 56320);
- }
- return elements;
- }
- ), fromEntries = (
- // native
- hasNativeFromEntries ? Object.fromEntries : (
- // Ponyfill
- function(entries) {
- for (var obj = {}, _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
- var _a2 = entries_1[_i], k2 = _a2[0], v2 = _a2[1];
- obj[k2] = v2;
- }
- return obj;
- }
- )
- ), codePointAt = hasNativeCodePointAt ? (
- // Native
- function(s2, index) {
- return s2.codePointAt(index);
- }
- ) : (
- // IE 11
- function(s2, index) {
- var size = s2.length;
- if (!(index < 0 || index >= size)) {
- var first = s2.charCodeAt(index), second;
- return first < 55296 || first > 56319 || index + 1 === size || (second = s2.charCodeAt(index + 1)) < 56320 || second > 57343 ? first : (first - 55296 << 10) + (second - 56320) + 65536;
- }
- }
- ), trimStart = hasTrimStart ? (
- // Native
- function(s2) {
- return s2.trimStart();
- }
- ) : (
- // Ponyfill
- function(s2) {
- return s2.replace(SPACE_SEPARATOR_START_REGEX, "");
- }
- ), trimEnd = hasTrimEnd ? (
- // Native
- function(s2) {
- return s2.trimEnd();
- }
- ) : (
- // Ponyfill
- function(s2) {
- return s2.replace(SPACE_SEPARATOR_END_REGEX, "");
- }
- );
- function RE(s2, flag) {
- return new RegExp(s2, flag);
- }
- var matchIdentifierAtIndex;
- REGEX_SUPPORTS_U_AND_Y ? (IDENTIFIER_PREFIX_RE_1 = RE("([^\\p{White_Space}\\p{Pattern_Syntax}]*)", "yu"), matchIdentifierAtIndex = function(s2, index) {
- var _a2;
- IDENTIFIER_PREFIX_RE_1.lastIndex = index;
- var match = IDENTIFIER_PREFIX_RE_1.exec(s2);
- return (_a2 = match[1]) !== null && _a2 !== void 0 ? _a2 : "";
- }) : matchIdentifierAtIndex = function(s2, index) {
- for (var match = []; ; ) {
- var c2 = codePointAt(s2, index);
- if (c2 === void 0 || _isWhiteSpace(c2) || _isPatternSyntax(c2))
- break;
- match.push(c2), index += c2 >= 65536 ? 2 : 1;
- }
- return fromCodePoint.apply(void 0, match);
- };
- var IDENTIFIER_PREFIX_RE_1, Parser = (
- /** @class */
- (function() {
- function Parser2(message, options2) {
- options2 === void 0 && (options2 = {}), this.message = message, this.position = { offset: 0, line: 1, column: 1 }, this.ignoreTag = !!options2.ignoreTag, this.locale = options2.locale, this.requiresOtherClause = !!options2.requiresOtherClause, this.shouldParseSkeletons = !!options2.shouldParseSkeletons;
- }
- return Parser2.prototype.parse = function() {
- if (this.offset() !== 0)
- throw Error("parser can only be used once");
- return this.parseMessage(0, "", !1);
- }, Parser2.prototype.parseMessage = function(nestingLevel, parentArgType, expectingCloseTag) {
- for (var elements = []; !this.isEOF(); ) {
- var char = this.char();
- if (char === 123) {
- var result = this.parseArgument(nestingLevel, expectingCloseTag);
- if (result.err)
- return result;
- elements.push(result.val);
- } else {
- if (char === 125 && nestingLevel > 0)
- break;
- if (char === 35 && (parentArgType === "plural" || parentArgType === "selectordinal")) {
- var position = this.clonePosition();
- this.bump(), elements.push({
- type: TYPE.pound,
- location: createLocation(position, this.clonePosition())
- });
- } else if (char === 60 && !this.ignoreTag && this.peek() === 47) {
- if (expectingCloseTag)
- break;
- return this.error(ErrorKind.UNMATCHED_CLOSING_TAG, createLocation(this.clonePosition(), this.clonePosition()));
- } else if (char === 60 && !this.ignoreTag && _isAlpha(this.peek() || 0)) {
- var result = this.parseTag(nestingLevel, parentArgType);
- if (result.err)
- return result;
- elements.push(result.val);
- } else {
- var result = this.parseLiteral(nestingLevel, parentArgType);
- if (result.err)
- return result;
- elements.push(result.val);
- }
- }
- }
- return { val: elements, err: null };
- }, Parser2.prototype.parseTag = function(nestingLevel, parentArgType) {
- var startPosition = this.clonePosition();
- this.bump();
- var tagName = this.parseTagName();
- if (this.bumpSpace(), this.bumpIf("/>"))
- return {
- val: {
- type: TYPE.literal,
- value: "<".concat(tagName, "/>"),
- location: createLocation(startPosition, this.clonePosition())
- },
- err: null
- };
- if (this.bumpIf(">")) {
- var childrenResult = this.parseMessage(nestingLevel + 1, parentArgType, !0);
- if (childrenResult.err)
- return childrenResult;
- var children = childrenResult.val, endTagStartPosition = this.clonePosition();
- if (this.bumpIf("</")) {
- if (this.isEOF() || !_isAlpha(this.char()))
- return this.error(ErrorKind.INVALID_TAG, createLocation(endTagStartPosition, this.clonePosition()));
- var closingTagNameStartPosition = this.clonePosition(), closingTagName = this.parseTagName();
- return tagName !== closingTagName ? this.error(ErrorKind.UNMATCHED_CLOSING_TAG, createLocation(closingTagNameStartPosition, this.clonePosition())) : (this.bumpSpace(), this.bumpIf(">") ? {
- val: {
- type: TYPE.tag,
- value: tagName,
- children,
- location: createLocation(startPosition, this.clonePosition())
- },
- err: null
- } : this.error(ErrorKind.INVALID_TAG, createLocation(endTagStartPosition, this.clonePosition())));
- } else
- return this.error(ErrorKind.UNCLOSED_TAG, createLocation(startPosition, this.clonePosition()));
- } else
- return this.error(ErrorKind.INVALID_TAG, createLocation(startPosition, this.clonePosition()));
- }, Parser2.prototype.parseTagName = function() {
- var startOffset = this.offset();
- for (this.bump(); !this.isEOF() && _isPotentialElementNameChar(this.char()); )
- this.bump();
- return this.message.slice(startOffset, this.offset());
- }, Parser2.prototype.parseLiteral = function(nestingLevel, parentArgType) {
- for (var start = this.clonePosition(), value = ""; ; ) {
- var parseQuoteResult = this.tryParseQuote(parentArgType);
- if (parseQuoteResult) {
- value += parseQuoteResult;
- continue;
- }
- var parseUnquotedResult = this.tryParseUnquoted(nestingLevel, parentArgType);
- if (parseUnquotedResult) {
- value += parseUnquotedResult;
- continue;
- }
- var parseLeftAngleResult = this.tryParseLeftAngleBracket();
- if (parseLeftAngleResult) {
- value += parseLeftAngleResult;
- continue;
- }
- break;
- }
- var location2 = createLocation(start, this.clonePosition());
- return {
- val: { type: TYPE.literal, value, location: location2 },
- err: null
- };
- }, Parser2.prototype.tryParseLeftAngleBracket = function() {
- return !this.isEOF() && this.char() === 60 && (this.ignoreTag || // If at the opening tag or closing tag position, bail.
- !_isAlphaOrSlash(this.peek() || 0)) ? (this.bump(), "<") : null;
- }, Parser2.prototype.tryParseQuote = function(parentArgType) {
- if (this.isEOF() || this.char() !== 39)
- return null;
- switch (this.peek()) {
- case 39:
- return this.bump(), this.bump(), "'";
- // '{', '<', '>', '}'
- case 123:
- case 60:
- case 62:
- case 125:
- break;
- case 35:
- if (parentArgType === "plural" || parentArgType === "selectordinal")
- break;
- return null;
- default:
- return null;
- }
- this.bump();
- var codePoints = [this.char()];
- for (this.bump(); !this.isEOF(); ) {
- var ch = this.char();
- if (ch === 39)
- if (this.peek() === 39)
- codePoints.push(39), this.bump();
- else {
- this.bump();
- break;
- }
- else
- codePoints.push(ch);
- this.bump();
- }
- return fromCodePoint.apply(void 0, codePoints);
- }, Parser2.prototype.tryParseUnquoted = function(nestingLevel, parentArgType) {
- if (this.isEOF())
- return null;
- var ch = this.char();
- return ch === 60 || ch === 123 || ch === 35 && (parentArgType === "plural" || parentArgType === "selectordinal") || ch === 125 && nestingLevel > 0 ? null : (this.bump(), fromCodePoint(ch));
- }, Parser2.prototype.parseArgument = function(nestingLevel, expectingCloseTag) {
- var openingBracePosition = this.clonePosition();
- if (this.bump(), this.bumpSpace(), this.isEOF())
- return this.error(ErrorKind.EXPECT_ARGUMENT_CLOSING_BRACE, createLocation(openingBracePosition, this.clonePosition()));
- if (this.char() === 125)
- return this.bump(), this.error(ErrorKind.EMPTY_ARGUMENT, createLocation(openingBracePosition, this.clonePosition()));
- var value = this.parseIdentifierIfPossible().value;
- if (!value)
- return this.error(ErrorKind.MALFORMED_ARGUMENT, createLocation(openingBracePosition, this.clonePosition()));
- if (this.bumpSpace(), this.isEOF())
- return this.error(ErrorKind.EXPECT_ARGUMENT_CLOSING_BRACE, createLocation(openingBracePosition, this.clonePosition()));
- switch (this.char()) {
- // Simple argument: `{name}`
- case 125:
- return this.bump(), {
- val: {
- type: TYPE.argument,
- // value does not include the opening and closing braces.
- value,
- location: createLocation(openingBracePosition, this.clonePosition())
- },
- err: null
- };
- // Argument with options: `{name, format, ...}`
- case 44:
- return this.bump(), this.bumpSpace(), this.isEOF() ? this.error(ErrorKind.EXPECT_ARGUMENT_CLOSING_BRACE, createLocation(openingBracePosition, this.clonePosition())) : this.parseArgumentOptions(nestingLevel, expectingCloseTag, value, openingBracePosition);
- default:
- return this.error(ErrorKind.MALFORMED_ARGUMENT, createLocation(openingBracePosition, this.clonePosition()));
- }
- }, Parser2.prototype.parseIdentifierIfPossible = function() {
- var startingPosition = this.clonePosition(), startOffset = this.offset(), value = matchIdentifierAtIndex(this.message, startOffset), endOffset = startOffset + value.length;
- this.bumpTo(endOffset);
- var endPosition = this.clonePosition(), location2 = createLocation(startingPosition, endPosition);
- return { value, location: location2 };
- }, Parser2.prototype.parseArgumentOptions = function(nestingLevel, expectingCloseTag, value, openingBracePosition) {
- var _a2, typeStartPosition = this.clonePosition(), argType = this.parseIdentifierIfPossible().value, typeEndPosition = this.clonePosition();
- switch (argType) {
- case "":
- return this.error(ErrorKind.EXPECT_ARGUMENT_TYPE, createLocation(typeStartPosition, typeEndPosition));
- case "number":
- case "date":
- case "time": {
- this.bumpSpace();
- var styleAndLocation = null;
- if (this.bumpIf(",")) {
- this.bumpSpace();
- var styleStartPosition = this.clonePosition(), result = this.parseSimpleArgStyleIfPossible();
- if (result.err)
- return result;
- var style = trimEnd(result.val);
- if (style.length === 0)
- return this.error(ErrorKind.EXPECT_ARGUMENT_STYLE, createLocation(this.clonePosition(), this.clonePosition()));
- var styleLocation = createLocation(styleStartPosition, this.clonePosition());
- styleAndLocation = { style, styleLocation };
- }
- var argCloseResult = this.tryParseArgumentClose(openingBracePosition);
- if (argCloseResult.err)
- return argCloseResult;
- var location_1 = createLocation(openingBracePosition, this.clonePosition());
- if (styleAndLocation && startsWith(styleAndLocation?.style, "::", 0)) {
- var skeleton = trimStart(styleAndLocation.style.slice(2));
- if (argType === "number") {
- var result = this.parseNumberSkeletonFromString(skeleton, styleAndLocation.styleLocation);
- return result.err ? result : {
- val: { type: TYPE.number, value, location: location_1, style: result.val },
- err: null
- };
- } else {
- if (skeleton.length === 0)
- return this.error(ErrorKind.EXPECT_DATE_TIME_SKELETON, location_1);
- var dateTimePattern = skeleton;
- this.locale && (dateTimePattern = getBestPattern(skeleton, this.locale));
- var style = {
- type: SKELETON_TYPE.dateTime,
- pattern: dateTimePattern,
- location: styleAndLocation.styleLocation,
- parsedOptions: this.shouldParseSkeletons ? parseDateTimeSkeleton(dateTimePattern) : {}
- }, type = argType === "date" ? TYPE.date : TYPE.time;
- return {
- val: { type, value, location: location_1, style },
- err: null
- };
- }
- }
- return {
- val: {
- type: argType === "number" ? TYPE.number : argType === "date" ? TYPE.date : TYPE.time,
- value,
- location: location_1,
- style: (_a2 = styleAndLocation?.style) !== null && _a2 !== void 0 ? _a2 : null
- },
- err: null
- };
- }
- case "plural":
- case "selectordinal":
- case "select": {
- var typeEndPosition_1 = this.clonePosition();
- if (this.bumpSpace(), !this.bumpIf(","))
- return this.error(ErrorKind.EXPECT_SELECT_ARGUMENT_OPTIONS, createLocation(typeEndPosition_1, __assign({}, typeEndPosition_1)));
- this.bumpSpace();
- var identifierAndLocation = this.parseIdentifierIfPossible(), pluralOffset = 0;
- if (argType !== "select" && identifierAndLocation.value === "offset") {
- if (!this.bumpIf(":"))
- return this.error(ErrorKind.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, createLocation(this.clonePosition(), this.clonePosition()));
- this.bumpSpace();
- var result = this.tryParseDecimalInteger(ErrorKind.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, ErrorKind.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);
- if (result.err)
- return result;
- this.bumpSpace(), identifierAndLocation = this.parseIdentifierIfPossible(), pluralOffset = result.val;
- }
- var optionsResult = this.tryParsePluralOrSelectOptions(nestingLevel, argType, expectingCloseTag, identifierAndLocation);
- if (optionsResult.err)
- return optionsResult;
- var argCloseResult = this.tryParseArgumentClose(openingBracePosition);
- if (argCloseResult.err)
- return argCloseResult;
- var location_2 = createLocation(openingBracePosition, this.clonePosition());
- return argType === "select" ? {
- val: {
- type: TYPE.select,
- value,
- options: fromEntries(optionsResult.val),
- location: location_2
- },
- err: null
- } : {
- val: {
- type: TYPE.plural,
- value,
- options: fromEntries(optionsResult.val),
- offset: pluralOffset,
- pluralType: argType === "plural" ? "cardinal" : "ordinal",
- location: location_2
- },
- err: null
- };
- }
- default:
- return this.error(ErrorKind.INVALID_ARGUMENT_TYPE, createLocation(typeStartPosition, typeEndPosition));
- }
- }, Parser2.prototype.tryParseArgumentClose = function(openingBracePosition) {
- return this.isEOF() || this.char() !== 125 ? this.error(ErrorKind.EXPECT_ARGUMENT_CLOSING_BRACE, createLocation(openingBracePosition, this.clonePosition())) : (this.bump(), { val: !0, err: null });
- }, Parser2.prototype.parseSimpleArgStyleIfPossible = function() {
- for (var nestedBraces = 0, startPosition = this.clonePosition(); !this.isEOF(); ) {
- var ch = this.char();
- switch (ch) {
- case 39: {
- this.bump();
- var apostrophePosition = this.clonePosition();
- if (!this.bumpUntil("'"))
- return this.error(ErrorKind.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE, createLocation(apostrophePosition, this.clonePosition()));
- this.bump();
- break;
- }
- case 123: {
- nestedBraces += 1, this.bump();
- break;
- }
- case 125: {
- if (nestedBraces > 0)
- nestedBraces -= 1;
- else
- return {
- val: this.message.slice(startPosition.offset, this.offset()),
- err: null
- };
- break;
- }
- default:
- this.bump();
- break;
- }
- }
- return {
- val: this.message.slice(startPosition.offset, this.offset()),
- err: null
- };
- }, Parser2.prototype.parseNumberSkeletonFromString = function(skeleton, location2) {
- var tokens2 = [];
- try {
- tokens2 = parseNumberSkeletonFromString(skeleton);
- } catch {
- return this.error(ErrorKind.INVALID_NUMBER_SKELETON, location2);
- }
- return {
- val: {
- type: SKELETON_TYPE.number,
- tokens: tokens2,
- location: location2,
- parsedOptions: this.shouldParseSkeletons ? parseNumberSkeleton(tokens2) : {}
- },
- err: null
- };
- }, Parser2.prototype.tryParsePluralOrSelectOptions = function(nestingLevel, parentArgType, expectCloseTag, parsedFirstIdentifier) {
- for (var _a2, hasOtherClause = !1, options2 = [], parsedSelectors = /* @__PURE__ */ new Set(), selector = parsedFirstIdentifier.value, selectorLocation = parsedFirstIdentifier.location; ; ) {
- if (selector.length === 0) {
- var startPosition = this.clonePosition();
- if (parentArgType !== "select" && this.bumpIf("=")) {
- var result = this.tryParseDecimalInteger(ErrorKind.EXPECT_PLURAL_ARGUMENT_SELECTOR, ErrorKind.INVALID_PLURAL_ARGUMENT_SELECTOR);
- if (result.err)
- return result;
- selectorLocation = createLocation(startPosition, this.clonePosition()), selector = this.message.slice(startPosition.offset, this.offset());
- } else
- break;
- }
- if (parsedSelectors.has(selector))
- return this.error(parentArgType === "select" ? ErrorKind.DUPLICATE_SELECT_ARGUMENT_SELECTOR : ErrorKind.DUPLICATE_PLURAL_ARGUMENT_SELECTOR, selectorLocation);
- selector === "other" && (hasOtherClause = !0), this.bumpSpace();
- var openingBracePosition = this.clonePosition();
- if (!this.bumpIf("{"))
- return this.error(parentArgType === "select" ? ErrorKind.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT : ErrorKind.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT, createLocation(this.clonePosition(), this.clonePosition()));
- var fragmentResult = this.parseMessage(nestingLevel + 1, parentArgType, expectCloseTag);
- if (fragmentResult.err)
- return fragmentResult;
- var argCloseResult = this.tryParseArgumentClose(openingBracePosition);
- if (argCloseResult.err)
- return argCloseResult;
- options2.push([
- selector,
- {
- value: fragmentResult.val,
- location: createLocation(openingBracePosition, this.clonePosition())
- }
- ]), parsedSelectors.add(selector), this.bumpSpace(), _a2 = this.parseIdentifierIfPossible(), selector = _a2.value, selectorLocation = _a2.location;
- }
- return options2.length === 0 ? this.error(parentArgType === "select" ? ErrorKind.EXPECT_SELECT_ARGUMENT_SELECTOR : ErrorKind.EXPECT_PLURAL_ARGUMENT_SELECTOR, createLocation(this.clonePosition(), this.clonePosition())) : this.requiresOtherClause && !hasOtherClause ? this.error(ErrorKind.MISSING_OTHER_CLAUSE, createLocation(this.clonePosition(), this.clonePosition())) : { val: options2, err: null };
- }, Parser2.prototype.tryParseDecimalInteger = function(expectNumberError, invalidNumberError) {
- var sign = 1, startingPosition = this.clonePosition();
- this.bumpIf("+") || this.bumpIf("-") && (sign = -1);
- for (var hasDigits = !1, decimal = 0; !this.isEOF(); ) {
- var ch = this.char();
- if (ch >= 48 && ch <= 57)
- hasDigits = !0, decimal = decimal * 10 + (ch - 48), this.bump();
- else
- break;
- }
- var location2 = createLocation(startingPosition, this.clonePosition());
- return hasDigits ? (decimal *= sign, isSafeInteger(decimal) ? { val: decimal, err: null } : this.error(invalidNumberError, location2)) : this.error(expectNumberError, location2);
- }, Parser2.prototype.offset = function() {
- return this.position.offset;
- }, Parser2.prototype.isEOF = function() {
- return this.offset() === this.message.length;
- }, Parser2.prototype.clonePosition = function() {
- return {
- offset: this.position.offset,
- line: this.position.line,
- column: this.position.column
- };
- }, Parser2.prototype.char = function() {
- var offset2 = this.position.offset;
- if (offset2 >= this.message.length)
- throw Error("out of bound");
- var code = codePointAt(this.message, offset2);
- if (code === void 0)
- throw Error("Offset ".concat(offset2, " is at invalid UTF-16 code unit boundary"));
- return code;
- }, Parser2.prototype.error = function(kind, location2) {
- return {
- val: null,
- err: {
- kind,
- message: this.message,
- location: location2
- }
- };
- }, Parser2.prototype.bump = function() {
- if (!this.isEOF()) {
- var code = this.char();
- code === 10 ? (this.position.line += 1, this.position.column = 1, this.position.offset += 1) : (this.position.column += 1, this.position.offset += code < 65536 ? 1 : 2);
- }
- }, Parser2.prototype.bumpIf = function(prefix) {
- if (startsWith(this.message, prefix, this.offset())) {
- for (var i2 = 0; i2 < prefix.length; i2++)
- this.bump();
- return !0;
- }
- return !1;
- }, Parser2.prototype.bumpUntil = function(pattern) {
- var currentOffset = this.offset(), index = this.message.indexOf(pattern, currentOffset);
- return index >= 0 ? (this.bumpTo(index), !0) : (this.bumpTo(this.message.length), !1);
- }, Parser2.prototype.bumpTo = function(targetOffset) {
- if (this.offset() > targetOffset)
- throw Error("targetOffset ".concat(targetOffset, " must be greater than or equal to the current offset ").concat(this.offset()));
- for (targetOffset = Math.min(targetOffset, this.message.length); ; ) {
- var offset2 = this.offset();
- if (offset2 === targetOffset)
- break;
- if (offset2 > targetOffset)
- throw Error("targetOffset ".concat(targetOffset, " is at invalid UTF-16 code unit boundary"));
- if (this.bump(), this.isEOF())
- break;
- }
- }, Parser2.prototype.bumpSpace = function() {
- for (; !this.isEOF() && _isWhiteSpace(this.char()); )
- this.bump();
- }, Parser2.prototype.peek = function() {
- if (this.isEOF())
- return null;
- var code = this.char(), offset2 = this.offset(), nextCode = this.message.charCodeAt(offset2 + (code >= 65536 ? 2 : 1));
- return nextCode ?? null;
- }, Parser2;
- })()
- );
- function _isAlpha(codepoint) {
- return codepoint >= 97 && codepoint <= 122 || codepoint >= 65 && codepoint <= 90;
- }
- function _isAlphaOrSlash(codepoint) {
- return _isAlpha(codepoint) || codepoint === 47;
- }
- function _isPotentialElementNameChar(c2) {
- return c2 === 45 || c2 === 46 || c2 >= 48 && c2 <= 57 || c2 === 95 || c2 >= 97 && c2 <= 122 || c2 >= 65 && c2 <= 90 || c2 == 183 || c2 >= 192 && c2 <= 214 || c2 >= 216 && c2 <= 246 || c2 >= 248 && c2 <= 893 || c2 >= 895 && c2 <= 8191 || c2 >= 8204 && c2 <= 8205 || c2 >= 8255 && c2 <= 8256 || c2 >= 8304 && c2 <= 8591 || c2 >= 11264 && c2 <= 12271 || c2 >= 12289 && c2 <= 55295 || c2 >= 63744 && c2 <= 64975 || c2 >= 65008 && c2 <= 65533 || c2 >= 65536 && c2 <= 983039;
- }
- function _isWhiteSpace(c2) {
- return c2 >= 9 && c2 <= 13 || c2 === 32 || c2 === 133 || c2 >= 8206 && c2 <= 8207 || c2 === 8232 || c2 === 8233;
- }
- function _isPatternSyntax(c2) {
- return c2 >= 33 && c2 <= 35 || c2 === 36 || c2 >= 37 && c2 <= 39 || c2 === 40 || c2 === 41 || c2 === 42 || c2 === 43 || c2 === 44 || c2 === 45 || c2 >= 46 && c2 <= 47 || c2 >= 58 && c2 <= 59 || c2 >= 60 && c2 <= 62 || c2 >= 63 && c2 <= 64 || c2 === 91 || c2 === 92 || c2 === 93 || c2 === 94 || c2 === 96 || c2 === 123 || c2 === 124 || c2 === 125 || c2 === 126 || c2 === 161 || c2 >= 162 && c2 <= 165 || c2 === 166 || c2 === 167 || c2 === 169 || c2 === 171 || c2 === 172 || c2 === 174 || c2 === 176 || c2 === 177 || c2 === 182 || c2 === 187 || c2 === 191 || c2 === 215 || c2 === 247 || c2 >= 8208 && c2 <= 8213 || c2 >= 8214 && c2 <= 8215 || c2 === 8216 || c2 === 8217 || c2 === 8218 || c2 >= 8219 && c2 <= 8220 || c2 === 8221 || c2 === 8222 || c2 === 8223 || c2 >= 8224 && c2 <= 8231 || c2 >= 8240 && c2 <= 8248 || c2 === 8249 || c2 === 8250 || c2 >= 8251 && c2 <= 8254 || c2 >= 8257 && c2 <= 8259 || c2 === 8260 || c2 === 8261 || c2 === 8262 || c2 >= 8263 && c2 <= 8273 || c2 === 8274 || c2 === 8275 || c2 >= 8277 && c2 <= 8286 || c2 >= 8592 && c2 <= 8596 || c2 >= 8597 && c2 <= 8601 || c2 >= 8602 && c2 <= 8603 || c2 >= 8604 && c2 <= 8607 || c2 === 8608 || c2 >= 8609 && c2 <= 8610 || c2 === 8611 || c2 >= 8612 && c2 <= 8613 || c2 === 8614 || c2 >= 8615 && c2 <= 8621 || c2 === 8622 || c2 >= 8623 && c2 <= 8653 || c2 >= 8654 && c2 <= 8655 || c2 >= 8656 && c2 <= 8657 || c2 === 8658 || c2 === 8659 || c2 === 8660 || c2 >= 8661 && c2 <= 8691 || c2 >= 8692 && c2 <= 8959 || c2 >= 8960 && c2 <= 8967 || c2 === 8968 || c2 === 8969 || c2 === 8970 || c2 === 8971 || c2 >= 8972 && c2 <= 8991 || c2 >= 8992 && c2 <= 8993 || c2 >= 8994 && c2 <= 9e3 || c2 === 9001 || c2 === 9002 || c2 >= 9003 && c2 <= 9083 || c2 === 9084 || c2 >= 9085 && c2 <= 9114 || c2 >= 9115 && c2 <= 9139 || c2 >= 9140 && c2 <= 9179 || c2 >= 9180 && c2 <= 9185 || c2 >= 9186 && c2 <= 9254 || c2 >= 9255 && c2 <= 9279 || c2 >= 9280 && c2 <= 9290 || c2 >= 9291 && c2 <= 9311 || c2 >= 9472 && c2 <= 9654 || c2 === 9655 || c2 >= 9656 && c2 <= 9664 || c2 === 9665 || c2 >= 9666 && c2 <= 9719 || c2 >= 9720 && c2 <= 9727 || c2 >= 9728 && c2 <= 9838 || c2 === 9839 || c2 >= 9840 && c2 <= 10087 || c2 === 10088 || c2 === 10089 || c2 === 10090 || c2 === 10091 || c2 === 10092 || c2 === 10093 || c2 === 10094 || c2 === 10095 || c2 === 10096 || c2 === 10097 || c2 === 10098 || c2 === 10099 || c2 === 10100 || c2 === 10101 || c2 >= 10132 && c2 <= 10175 || c2 >= 10176 && c2 <= 10180 || c2 === 10181 || c2 === 10182 || c2 >= 10183 && c2 <= 10213 || c2 === 10214 || c2 === 10215 || c2 === 10216 || c2 === 10217 || c2 === 10218 || c2 === 10219 || c2 === 10220 || c2 === 10221 || c2 === 10222 || c2 === 10223 || c2 >= 10224 && c2 <= 10239 || c2 >= 10240 && c2 <= 10495 || c2 >= 10496 && c2 <= 10626 || c2 === 10627 || c2 === 10628 || c2 === 10629 || c2 === 10630 || c2 === 10631 || c2 === 10632 || c2 === 10633 || c2 === 10634 || c2 === 10635 || c2 === 10636 || c2 === 10637 || c2 === 10638 || c2 === 10639 || c2 === 10640 || c2 === 10641 || c2 === 10642 || c2 === 10643 || c2 === 10644 || c2 === 10645 || c2 === 10646 || c2 === 10647 || c2 === 10648 || c2 >= 10649 && c2 <= 10711 || c2 === 10712 || c2 === 10713 || c2 === 10714 || c2 === 10715 || c2 >= 10716 && c2 <= 10747 || c2 === 10748 || c2 === 10749 || c2 >= 10750 && c2 <= 11007 || c2 >= 11008 && c2 <= 11055 || c2 >= 11056 && c2 <= 11076 || c2 >= 11077 && c2 <= 11078 || c2 >= 11079 && c2 <= 11084 || c2 >= 11085 && c2 <= 11123 || c2 >= 11124 && c2 <= 11125 || c2 >= 11126 && c2 <= 11157 || c2 === 11158 || c2 >= 11159 && c2 <= 11263 || c2 >= 11776 && c2 <= 11777 || c2 === 11778 || c2 === 11779 || c2 === 11780 || c2 === 11781 || c2 >= 11782 && c2 <= 11784 || c2 === 11785 || c2 === 11786 || c2 === 11787 || c2 === 11788 || c2 === 11789 || c2 >= 11790 && c2 <= 11798 || c2 === 11799 || c2 >= 11800 && c2 <= 11801 || c2 === 11802 || c2 === 11803 || c2 === 11804 || c2 === 11805 || c2 >= 11806 && c2 <= 11807 || c2 === 11808 || c2 === 11809 || c2 === 11810 || c2 === 11811 || c2 === 11812 || c2 === 11813 || c2 === 11814 || c2 === 11815 || c2 === 11816 || c2 === 11817 || c2 >= 11818 && c2 <= 11822 || c2 === 11823 || c2 >= 11824 && c2 <= 11833 || c2 >= 11834 && c2 <= 11835 || c2 >= 11836 && c2 <= 11839 || c2 === 11840 || c2 === 11841 || c2 === 11842 || c2 >= 11843 && c2 <= 11855 || c2 >= 11856 && c2 <= 11857 || c2 === 11858 || c2 >= 11859 && c2 <= 11903 || c2 >= 12289 && c2 <= 12291 || c2 === 12296 || c2 === 12297 || c2 === 12298 || c2 === 12299 || c2 === 12300 || c2 === 12301 || c2 === 12302 || c2 === 12303 || c2 === 12304 || c2 === 12305 || c2 >= 12306 && c2 <= 12307 || c2 === 12308 || c2 === 12309 || c2 === 12310 || c2 === 12311 || c2 === 12312 || c2 === 12313 || c2 === 12314 || c2 === 12315 || c2 === 12316 || c2 === 12317 || c2 >= 12318 && c2 <= 12319 || c2 === 12320 || c2 === 12336 || c2 === 64830 || c2 === 64831 || c2 >= 65093 && c2 <= 65094;
- }
-
- // ../../node_modules/@formatjs/icu-messageformat-parser/lib/index.js
- function pruneLocation(els) {
- els.forEach(function(el) {
- if (delete el.location, isSelectElement(el) || isPluralElement(el))
- for (var k2 in el.options)
- delete el.options[k2].location, pruneLocation(el.options[k2].value);
- else isNumberElement(el) && isNumberSkeleton(el.style) || (isDateElement(el) || isTimeElement(el)) && isDateTimeSkeleton(el.style) ? delete el.style.location : isTagElement(el) && pruneLocation(el.children);
- });
- }
- function parse(message, opts) {
- opts === void 0 && (opts = {}), opts = __assign({ shouldParseSkeletons: !0, requiresOtherClause: !0 }, opts);
- var result = new Parser(message, opts).parse();
- if (result.err) {
- var error = SyntaxError(ErrorKind[result.err.kind]);
- throw error.location = result.err.location, error.originalMessage = result.err.message, error;
- }
- return opts?.captureLocation || pruneLocation(result.val), result.val;
- }
-
- // ../../node_modules/intl-messageformat/lib/src/error.js
- var ErrorCode;
- (function(ErrorCode2) {
- ErrorCode2.MISSING_VALUE = "MISSING_VALUE", ErrorCode2.INVALID_VALUE = "INVALID_VALUE", ErrorCode2.MISSING_INTL_API = "MISSING_INTL_API";
- })(ErrorCode || (ErrorCode = {}));
- var FormatError = (
- /** @class */
- (function(_super) {
- __extends(FormatError2, _super);
- function FormatError2(msg, code, originalMessage) {
- var _this = _super.call(this, msg) || this;
- return _this.code = code, _this.originalMessage = originalMessage, _this;
- }
- return FormatError2.prototype.toString = function() {
- return "[formatjs Error: ".concat(this.code, "] ").concat(this.message);
- }, FormatError2;
- })(Error)
- );
- var InvalidValueError = (
- /** @class */
- (function(_super) {
- __extends(InvalidValueError2, _super);
- function InvalidValueError2(variableId, value, options2, originalMessage) {
- return _super.call(this, 'Invalid values for "'.concat(variableId, '": "').concat(value, '". Options are "').concat(Object.keys(options2).join('", "'), '"'), ErrorCode.INVALID_VALUE, originalMessage) || this;
- }
- return InvalidValueError2;
- })(FormatError)
- );
- var InvalidValueTypeError = (
- /** @class */
- (function(_super) {
- __extends(InvalidValueTypeError2, _super);
- function InvalidValueTypeError2(value, type, originalMessage) {
- return _super.call(this, 'Value for "'.concat(value, '" must be of type ').concat(type), ErrorCode.INVALID_VALUE, originalMessage) || this;
- }
- return InvalidValueTypeError2;
- })(FormatError)
- );
- var MissingValueError = (
- /** @class */
- (function(_super) {
- __extends(MissingValueError2, _super);
- function MissingValueError2(variableId, originalMessage) {
- return _super.call(this, 'The intl string context variable "'.concat(variableId, '" was not provided to the string "').concat(originalMessage, '"'), ErrorCode.MISSING_VALUE, originalMessage) || this;
- }
- return MissingValueError2;
- })(FormatError)
- );
-
- // ../../node_modules/intl-messageformat/lib/src/formatters.js
- var PART_TYPE;
- (function(PART_TYPE2) {
- PART_TYPE2[PART_TYPE2.literal = 0] = "literal", PART_TYPE2[PART_TYPE2.object = 1] = "object";
- })(PART_TYPE || (PART_TYPE = {}));
- function mergeLiteral(parts) {
- return parts.length < 2 ? parts : parts.reduce(function(all, part) {
- var lastPart = all[all.length - 1];
- return !lastPart || lastPart.type !== PART_TYPE.literal || part.type !== PART_TYPE.literal ? all.push(part) : lastPart.value += part.value, all;
- }, []);
- }
- function isFormatXMLElementFn(el) {
- return typeof el == "function";
- }
- function formatToParts(els, locales, formatters, formats, values, currentPluralValue, originalMessage) {
- if (els.length === 1 && isLiteralElement(els[0]))
- return [
- {
- type: PART_TYPE.literal,
- value: els[0].value
- }
- ];
- for (var result = [], _i = 0, els_1 = els; _i < els_1.length; _i++) {
- var el = els_1[_i];
- if (isLiteralElement(el)) {
- result.push({
- type: PART_TYPE.literal,
- value: el.value
- });
- continue;
- }
- if (isPoundElement(el)) {
- typeof currentPluralValue == "number" && result.push({
- type: PART_TYPE.literal,
- value: formatters.getNumberFormat(locales).format(currentPluralValue)
- });
- continue;
- }
- var varName = el.value;
- if (!(values && varName in values))
- throw new MissingValueError(varName, originalMessage);
- var value = values[varName];
- if (isArgumentElement(el)) {
- (!value || typeof value == "string" || typeof value == "number") && (value = typeof value == "string" || typeof value == "number" ? String(value) : ""), result.push({
- type: typeof value == "string" ? PART_TYPE.literal : PART_TYPE.object,
- value
- });
- continue;
- }
- if (isDateElement(el)) {
- var style = typeof el.style == "string" ? formats.date[el.style] : isDateTimeSkeleton(el.style) ? el.style.parsedOptions : void 0;
- result.push({
- type: PART_TYPE.literal,
- value: formatters.getDateTimeFormat(locales, style).format(value)
- });
- continue;
- }
- if (isTimeElement(el)) {
- var style = typeof el.style == "string" ? formats.time[el.style] : isDateTimeSkeleton(el.style) ? el.style.parsedOptions : formats.time.medium;
- result.push({
- type: PART_TYPE.literal,
- value: formatters.getDateTimeFormat(locales, style).format(value)
- });
- continue;
- }
- if (isNumberElement(el)) {
- var style = typeof el.style == "string" ? formats.number[el.style] : isNumberSkeleton(el.style) ? el.style.parsedOptions : void 0;
- style && style.scale && (value = value * (style.scale || 1)), result.push({
- type: PART_TYPE.literal,
- value: formatters.getNumberFormat(locales, style).format(value)
- });
- continue;
- }
- if (isTagElement(el)) {
- var children = el.children, value_1 = el.value, formatFn = values[value_1];
- if (!isFormatXMLElementFn(formatFn))
- throw new InvalidValueTypeError(value_1, "function", originalMessage);
- var parts = formatToParts(children, locales, formatters, formats, values, currentPluralValue), chunks = formatFn(parts.map(function(p2) {
- return p2.value;
- }));
- Array.isArray(chunks) || (chunks = [chunks]), result.push.apply(result, chunks.map(function(c2) {
- return {
- type: typeof c2 == "string" ? PART_TYPE.literal : PART_TYPE.object,
- value: c2
- };
- }));
- }
- if (isSelectElement(el)) {
- var opt = el.options[value] || el.options.other;
- if (!opt)
- throw new InvalidValueError(el.value, value, Object.keys(el.options), originalMessage);
- result.push.apply(result, formatToParts(opt.value, locales, formatters, formats, values));
- continue;
- }
- if (isPluralElement(el)) {
- var opt = el.options["=".concat(value)];
- if (!opt) {
- if (!Intl.PluralRules)
- throw new FormatError(`Intl.PluralRules is not available in this environment.
- Try polyfilling it using "@formatjs/intl-pluralrules"
- `, ErrorCode.MISSING_INTL_API, originalMessage);
- var rule = formatters.getPluralRules(locales, { type: el.pluralType }).select(value - (el.offset || 0));
- opt = el.options[rule] || el.options.other;
- }
- if (!opt)
- throw new InvalidValueError(el.value, value, Object.keys(el.options), originalMessage);
- result.push.apply(result, formatToParts(opt.value, locales, formatters, formats, values, value - (el.offset || 0)));
- continue;
- }
- }
- return mergeLiteral(result);
- }
-
- // ../../node_modules/intl-messageformat/lib/src/core.js
- function mergeConfig(c1, c2) {
- return c2 ? __assign(__assign(__assign({}, c1 || {}), c2 || {}), Object.keys(c1).reduce(function(all, k2) {
- return all[k2] = __assign(__assign({}, c1[k2]), c2[k2] || {}), all;
- }, {})) : c1;
- }
- function mergeConfigs(defaultConfig, configs) {
- return configs ? Object.keys(defaultConfig).reduce(function(all, k2) {
- return all[k2] = mergeConfig(defaultConfig[k2], configs[k2]), all;
- }, __assign({}, defaultConfig)) : defaultConfig;
- }
- function createFastMemoizeCache(store2) {
- return {
- create: function() {
- return {
- get: function(key) {
- return store2[key];
- },
- set: function(key, value) {
- store2[key] = value;
- }
- };
- }
- };
- }
- function createDefaultFormatters(cache) {
- return cache === void 0 && (cache = {
- number: {},
- dateTime: {},
- pluralRules: {}
- }), {
- getNumberFormat: memoize(function() {
- for (var _a2, args = [], _i = 0; _i < arguments.length; _i++)
- args[_i] = arguments[_i];
- return new ((_a2 = Intl.NumberFormat).bind.apply(_a2, __spreadArray([void 0], args, !1)))();
- }, {
- cache: createFastMemoizeCache(cache.number),
- strategy: strategies.variadic
- }),
- getDateTimeFormat: memoize(function() {
- for (var _a2, args = [], _i = 0; _i < arguments.length; _i++)
- args[_i] = arguments[_i];
- return new ((_a2 = Intl.DateTimeFormat).bind.apply(_a2, __spreadArray([void 0], args, !1)))();
- }, {
- cache: createFastMemoizeCache(cache.dateTime),
- strategy: strategies.variadic
- }),
- getPluralRules: memoize(function() {
- for (var _a2, args = [], _i = 0; _i < arguments.length; _i++)
- args[_i] = arguments[_i];
- return new ((_a2 = Intl.PluralRules).bind.apply(_a2, __spreadArray([void 0], args, !1)))();
- }, {
- cache: createFastMemoizeCache(cache.pluralRules),
- strategy: strategies.variadic
- })
- };
- }
- var IntlMessageFormat = (
- /** @class */
- (function() {
- function IntlMessageFormat2(message, locales, overrideFormats, opts) {
- locales === void 0 && (locales = IntlMessageFormat2.defaultLocale);
- var _this = this;
- if (this.formatterCache = {
- number: {},
- dateTime: {},
- pluralRules: {}
- }, this.format = function(values) {
- var parts = _this.formatToParts(values);
- if (parts.length === 1)
- return parts[0].value;
- var result = parts.reduce(function(all, part) {
- return !all.length || part.type !== PART_TYPE.literal || typeof all[all.length - 1] != "string" ? all.push(part.value) : all[all.length - 1] += part.value, all;
- }, []);
- return result.length <= 1 ? result[0] || "" : result;
- }, this.formatToParts = function(values) {
- return formatToParts(_this.ast, _this.locales, _this.formatters, _this.formats, values, void 0, _this.message);
- }, this.resolvedOptions = function() {
- var _a3;
- return {
- locale: ((_a3 = _this.resolvedLocale) === null || _a3 === void 0 ? void 0 : _a3.toString()) || Intl.NumberFormat.supportedLocalesOf(_this.locales)[0]
- };
- }, this.getAst = function() {
- return _this.ast;
- }, this.locales = locales, this.resolvedLocale = IntlMessageFormat2.resolveLocale(locales), typeof message == "string") {
- if (this.message = message, !IntlMessageFormat2.__parse)
- throw new TypeError("IntlMessageFormat.__parse must be set to process `message` of type `string`");
- var _a2 = opts || {}, formatters = _a2.formatters, parseOpts = __rest(_a2, ["formatters"]);
- this.ast = IntlMessageFormat2.__parse(message, __assign(__assign({}, parseOpts), { locale: this.resolvedLocale }));
- } else
- this.ast = message;
- if (!Array.isArray(this.ast))
- throw new TypeError("A message must be provided as a String or AST.");
- this.formats = mergeConfigs(IntlMessageFormat2.formats, overrideFormats), this.formatters = opts && opts.formatters || createDefaultFormatters(this.formatterCache);
- }
- return Object.defineProperty(IntlMessageFormat2, "defaultLocale", {
- get: function() {
- return IntlMessageFormat2.memoizedDefaultLocale || (IntlMessageFormat2.memoizedDefaultLocale = new Intl.NumberFormat().resolvedOptions().locale), IntlMessageFormat2.memoizedDefaultLocale;
- },
- enumerable: !1,
- configurable: !0
- }), IntlMessageFormat2.memoizedDefaultLocale = null, IntlMessageFormat2.resolveLocale = function(locales) {
- if (!(typeof Intl.Locale > "u")) {
- var supportedLocales = Intl.NumberFormat.supportedLocalesOf(locales);
- return supportedLocales.length > 0 ? new Intl.Locale(supportedLocales[0]) : new Intl.Locale(typeof locales == "string" ? locales : locales[0]);
- }
- }, IntlMessageFormat2.__parse = parse, IntlMessageFormat2.formats = {
- number: {
- integer: {
- maximumFractionDigits: 0
- },
- currency: {
- style: "currency"
- },
- percent: {
- style: "percent"
- }
- },
- date: {
- short: {
- month: "numeric",
- day: "numeric",
- year: "2-digit"
- },
- medium: {
- month: "short",
- day: "numeric",
- year: "numeric"
- },
- long: {
- month: "long",
- day: "numeric",
- year: "numeric"
- },
- full: {
- weekday: "long",
- month: "long",
- day: "numeric",
- year: "numeric"
- }
- },
- time: {
- short: {
- hour: "numeric",
- minute: "numeric"
- },
- medium: {
- hour: "numeric",
- minute: "numeric",
- second: "numeric"
- },
- long: {
- hour: "numeric",
- minute: "numeric",
- second: "numeric",
- timeZoneName: "short"
- },
- full: {
- hour: "numeric",
- minute: "numeric",
- second: "numeric",
- timeZoneName: "short"
- }
- }
- }, IntlMessageFormat2;
- })()
- );
-
- // ../../node_modules/@react-aria/i18n/dist/useMessageFormatter.mjs
- init_react();
-
- // ../../node_modules/@internationalized/string/dist/LocalizedStringDictionary.mjs
- var $5b160d28a433310d$var$localeSymbol = Symbol.for("react-aria.i18n.locale"), $5b160d28a433310d$var$stringsSymbol = Symbol.for("react-aria.i18n.strings");
-
- // ../../node_modules/@react-aria/i18n/dist/useLocalizedStringFormatter.mjs
- init_react();
-
- // ../../node_modules/@react-aria/i18n/dist/useListFormatter.mjs
- init_react();
-
- // ../../node_modules/@internationalized/date/dist/string.mjs
- var $fae977aafc393c5c$var$requiredDurationTimeGroups = [
- "hours",
- "minutes",
- "seconds"
- ], $fae977aafc393c5c$var$requiredDurationGroups = [
- "years",
- "months",
- "weeks",
- "days",
- ...$fae977aafc393c5c$var$requiredDurationTimeGroups
- ];
-
- // ../../node_modules/@internationalized/date/dist/HebrewCalendar.mjs
- var $7c5f6fbf42389787$var$HOUR_PARTS = 1080, $7c5f6fbf42389787$var$DAY_PARTS = 24 * $7c5f6fbf42389787$var$HOUR_PARTS, $7c5f6fbf42389787$var$MONTH_DAYS = 29, $7c5f6fbf42389787$var$MONTH_FRACT = 12 * $7c5f6fbf42389787$var$HOUR_PARTS + 793, $7c5f6fbf42389787$var$MONTH_PARTS = $7c5f6fbf42389787$var$MONTH_DAYS * $7c5f6fbf42389787$var$DAY_PARTS + $7c5f6fbf42389787$var$MONTH_FRACT;
-
- // ../../node_modules/@react-aria/i18n/dist/useDateFormatter.mjs
- init_react();
-
- // ../../node_modules/@internationalized/number/dist/NumberFormatter.mjs
- var $488c6ddbf4ef74c2$var$supportsSignDisplay = !1;
- try {
- $488c6ddbf4ef74c2$var$supportsSignDisplay = new Intl.NumberFormat("de-DE", {
- signDisplay: "exceptZero"
- }).resolvedOptions().signDisplay === "exceptZero";
- } catch {
- }
- var $488c6ddbf4ef74c2$var$supportsUnit = !1;
- try {
- $488c6ddbf4ef74c2$var$supportsUnit = new Intl.NumberFormat("de-DE", {
- style: "unit",
- unit: "degree"
- }).resolvedOptions().style === "unit";
- } catch {
- }
-
- // ../../node_modules/@internationalized/number/dist/NumberParser.mjs
- var $6c7bd7858deea686$var$CURRENCY_SIGN_REGEX = new RegExp("^.*\\(.*\\).*$");
-
- // ../../node_modules/@react-aria/i18n/dist/useNumberFormatter.mjs
- init_react();
-
- // ../../node_modules/@react-aria/i18n/dist/useFilter.mjs
- init_react();
-
- // ../../node_modules/@react-aria/overlays/dist/useOverlayPosition.mjs
- var $2a41e45df1593e64$var$visualViewport = typeof document < "u" ? window.visualViewport : null;
- function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
- let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), { arrowSize, targetRef, overlayRef, arrowRef, scrollRef = overlayRef, placement = "bottom", containerPadding = 12, shouldFlip = !0, boundaryElement = typeof document < "u" ? document.body : null, offset: offset2 = 0, crossOffset = 0, shouldUpdatePosition = !0, isOpen = !0, onClose, maxHeight, arrowBoundaryOffset = 0 } = props, [position, setPosition] = useState(null), deps = [
- shouldUpdatePosition,
- placement,
- overlayRef.current,
- targetRef.current,
- arrowRef?.current,
- scrollRef.current,
- containerPadding,
- shouldFlip,
- boundaryElement,
- offset2,
- crossOffset,
- isOpen,
- direction,
- maxHeight,
- arrowBoundaryOffset,
- arrowSize
- ], lastScale = useRef($2a41e45df1593e64$var$visualViewport?.scale);
- useEffect(() => {
- isOpen && (lastScale.current = $2a41e45df1593e64$var$visualViewport?.scale);
- }, [
- isOpen
- ]);
- let updatePosition = useCallback(() => {
- if (shouldUpdatePosition === !1 || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement || $2a41e45df1593e64$var$visualViewport?.scale !== lastScale.current) return;
- let anchor = null;
- if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
- var _document_activeElement;
- let anchorRect = (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getBoundingClientRect(), scrollRect = scrollRef.current.getBoundingClientRect();
- var _anchorRect_top;
- if (anchor = {
- type: "top",
- offset: ((_anchorRect_top = anchorRect?.top) !== null && _anchorRect_top !== void 0 ? _anchorRect_top : 0) - scrollRect.top
- }, anchor.offset > scrollRect.height / 2) {
- anchor.type = "bottom";
- var _anchorRect_bottom;
- anchor.offset = ((_anchorRect_bottom = anchorRect?.bottom) !== null && _anchorRect_bottom !== void 0 ? _anchorRect_bottom : 0) - scrollRect.bottom;
- }
- }
- let overlay = overlayRef.current;
- if (!maxHeight && overlayRef.current) {
- var _window_visualViewport;
- overlay.style.top = "0px", overlay.style.bottom = "";
- var _window_visualViewport_height;
- overlay.style.maxHeight = ((_window_visualViewport_height = (_window_visualViewport = window.visualViewport) === null || _window_visualViewport === void 0 ? void 0 : _window_visualViewport.height) !== null && _window_visualViewport_height !== void 0 ? _window_visualViewport_height : window.innerHeight) + "px";
- }
- let position2 = $edcf132a9284368a$export$b3ceb0cbf1056d98({
- placement: $2a41e45df1593e64$var$translateRTL(placement, direction),
- overlayNode: overlayRef.current,
- targetNode: targetRef.current,
- scrollNode: scrollRef.current || overlayRef.current,
- padding: containerPadding,
- shouldFlip,
- boundaryElement,
- offset: offset2,
- crossOffset,
- maxHeight,
- arrowSize: arrowSize ?? (arrowRef?.current ? $edcf132a9284368a$export$4b834cebd9e5cebe(arrowRef.current, !0).width : 0),
- arrowBoundaryOffset
- });
- if (position2.position) {
- if (overlay.style.top = "", overlay.style.bottom = "", overlay.style.left = "", overlay.style.right = "", Object.keys(position2.position).forEach((key) => overlay.style[key] = position2.position[key] + "px"), overlay.style.maxHeight = position2.maxHeight != null ? position2.maxHeight + "px" : "", anchor && document.activeElement && scrollRef.current) {
- let anchorRect = document.activeElement.getBoundingClientRect(), scrollRect = scrollRef.current.getBoundingClientRect(), newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
- scrollRef.current.scrollTop += newOffset - anchor.offset;
- }
- setPosition(position2);
- }
- }, deps);
- $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(updatePosition, deps), $2a41e45df1593e64$var$useResize(updatePosition), $9daab02d461809db$export$683480f191c0e3ea({
- ref: overlayRef,
- onResize: updatePosition
- }), $9daab02d461809db$export$683480f191c0e3ea({
- ref: targetRef,
- onResize: updatePosition
- });
- let isResizing = useRef(!1);
- $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
- let timeout, onResize = () => {
- isResizing.current = !0, clearTimeout(timeout), timeout = setTimeout(() => {
- isResizing.current = !1;
- }, 500), updatePosition();
- }, onScroll = () => {
- isResizing.current && onResize();
- };
- return $2a41e45df1593e64$var$visualViewport?.addEventListener("resize", onResize), $2a41e45df1593e64$var$visualViewport?.addEventListener("scroll", onScroll), () => {
- $2a41e45df1593e64$var$visualViewport?.removeEventListener("resize", onResize), $2a41e45df1593e64$var$visualViewport?.removeEventListener("scroll", onScroll);
- };
- }, [
- updatePosition
- ]);
- let close = useCallback(() => {
- isResizing.current || onClose?.();
- }, [
- onClose,
- isResizing
- ]);
- $dd149f63282afbbf$export$18fc8428861184da({
- triggerRef: targetRef,
- isOpen,
- onClose: onClose && close
- });
- var _position_maxHeight, _position_placement, _position_triggerAnchorPoint;
- return {
- overlayProps: {
- style: {
- position: position ? "absolute" : "fixed",
- top: position ? void 0 : 0,
- left: position ? void 0 : 0,
- zIndex: 1e5,
- ...position?.position,
- maxHeight: (_position_maxHeight = position?.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : "100vh"
- }
- },
- placement: (_position_placement = position?.placement) !== null && _position_placement !== void 0 ? _position_placement : null,
- triggerAnchorPoint: (_position_triggerAnchorPoint = position?.triggerAnchorPoint) !== null && _position_triggerAnchorPoint !== void 0 ? _position_triggerAnchorPoint : null,
- arrowProps: {
- "aria-hidden": "true",
- role: "presentation",
- style: {
- left: position?.arrowOffsetLeft,
- top: position?.arrowOffsetTop
- }
- },
- updatePosition
- };
- }
- function $2a41e45df1593e64$var$useResize(onResize) {
- $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => (window.addEventListener("resize", onResize, !1), () => {
- window.removeEventListener("resize", onResize, !1);
- }), [
- onResize
- ]);
- }
- function $2a41e45df1593e64$var$translateRTL(position, direction) {
- return direction === "rtl" ? position.replace("start", "right").replace("end", "left") : position.replace("start", "left").replace("end", "right");
- }
-
- // ../../node_modules/@react-aria/focus/dist/FocusScope.mjs
- init_react();
- var $9bf71ea28793e738$var$FocusContext = react_default.createContext(null);
- function $9bf71ea28793e738$var$isElementInScope(element, scope2) {
- return !element || !scope2 ? !1 : scope2.some((node) => node.contains(element));
- }
- var $9bf71ea28793e738$var$Tree = class _$9bf71ea28793e738$var$Tree {
- get size() {
- return this.fastMap.size;
- }
- getTreeNode(data) {
- return this.fastMap.get(data);
- }
- addTreeNode(scopeRef, parent, nodeToRestore) {
- let parentNode = this.fastMap.get(parent ?? null);
- if (!parentNode) return;
- let node = new $9bf71ea28793e738$var$TreeNode({
- scopeRef
- });
- parentNode.addChild(node), node.parent = parentNode, this.fastMap.set(scopeRef, node), nodeToRestore && (node.nodeToRestore = nodeToRestore);
- }
- addNode(node) {
- this.fastMap.set(node.scopeRef, node);
- }
- removeTreeNode(scopeRef) {
- if (scopeRef === null) return;
- let node = this.fastMap.get(scopeRef);
- if (!node) return;
- let parentNode = node.parent;
- for (let current of this.traverse()) current !== node && node.nodeToRestore && current.nodeToRestore && node.scopeRef && node.scopeRef.current && $9bf71ea28793e738$var$isElementInScope(current.nodeToRestore, node.scopeRef.current) && (current.nodeToRestore = node.nodeToRestore);
- let children = node.children;
- parentNode && (parentNode.removeChild(node), children.size > 0 && children.forEach((child) => parentNode && parentNode.addChild(child))), this.fastMap.delete(node.scopeRef);
- }
- // Pre Order Depth First
- *traverse(node = this.root) {
- if (node.scopeRef != null && (yield node), node.children.size > 0) for (let child of node.children) yield* this.traverse(child);
- }
- clone() {
- var _node_parent;
- let newTree = new _$9bf71ea28793e738$var$Tree();
- var _node_parent_scopeRef;
- for (let node of this.traverse()) newTree.addTreeNode(node.scopeRef, (_node_parent_scopeRef = (_node_parent = node.parent) === null || _node_parent === void 0 ? void 0 : _node_parent.scopeRef) !== null && _node_parent_scopeRef !== void 0 ? _node_parent_scopeRef : null, node.nodeToRestore);
- return newTree;
- }
- constructor() {
- this.fastMap = /* @__PURE__ */ new Map(), this.root = new $9bf71ea28793e738$var$TreeNode({
- scopeRef: null
- }), this.fastMap.set(null, this.root);
- }
- }, $9bf71ea28793e738$var$TreeNode = class {
- addChild(node) {
- this.children.add(node), node.parent = this;
- }
- removeChild(node) {
- this.children.delete(node), node.parent = void 0;
- }
- constructor(props) {
- this.children = /* @__PURE__ */ new Set(), this.contain = !1, this.scopeRef = props.scopeRef;
- }
- }, $9bf71ea28793e738$export$d06fae2ee68b101e = new $9bf71ea28793e738$var$Tree();
-
- // ../../node_modules/@react-aria/focus/dist/useFocusRing.mjs
- init_react();
-
- // ../../node_modules/@react-aria/focus/dist/FocusRing.mjs
- init_react();
-
- // ../../node_modules/@react-aria/focus/dist/useHasTabbableChild.mjs
- init_react();
-
- // ../../node_modules/@react-aria/overlays/dist/useOverlay.mjs
- init_react();
-
- // ../../node_modules/@react-aria/overlays/dist/useOverlayTrigger.mjs
- init_react();
-
- // ../../node_modules/@react-aria/overlays/dist/usePreventScroll.mjs
- var $49c51c25361d4cd2$var$visualViewport = typeof document < "u" && window.visualViewport;
-
- // ../../node_modules/@react-aria/overlays/dist/PortalProvider.mjs
- init_react();
- var $96b38030c423d352$export$60d741e20e0aa309 = createContext({});
- function $96b38030c423d352$export$9fc1347d4195ccb3() {
- var _useContext;
- return (_useContext = useContext($96b38030c423d352$export$60d741e20e0aa309)) !== null && _useContext !== void 0 ? _useContext : {};
- }
-
- // ../../node_modules/@react-aria/overlays/dist/useModal.mjs
- init_react();
- var $f57aed4a881a3485$var$Context = react_default.createContext(null);
- function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
- let { children } = props, parent = useContext($f57aed4a881a3485$var$Context), [modalCount, setModalCount] = useState(0), context = useMemo(() => ({
- parent,
- modalCount,
- addModal() {
- setModalCount((count) => count + 1), parent && parent.addModal();
- },
- removeModal() {
- setModalCount((count) => count - 1), parent && parent.removeModal();
- }
- }), [
- parent,
- modalCount
- ]);
- return react_default.createElement($f57aed4a881a3485$var$Context.Provider, {
- value: context
- }, children);
- }
- function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
- let context = useContext($f57aed4a881a3485$var$Context);
- return {
- modalProviderProps: {
- "aria-hidden": context && context.modalCount > 0 ? !0 : void 0
- }
- };
- }
- function $f57aed4a881a3485$var$OverlayContainerDOM(props) {
- let { modalProviderProps } = $f57aed4a881a3485$export$d9aaed4c3ece1bc0();
- return react_default.createElement("div", {
- "data-overlay-container": !0,
- ...props,
- ...modalProviderProps
- });
- }
- function $f57aed4a881a3485$export$bf688221f59024e5(props) {
- return react_default.createElement($f57aed4a881a3485$export$178405afcd8c5eb, null, react_default.createElement($f57aed4a881a3485$var$OverlayContainerDOM, props));
- }
- function $f57aed4a881a3485$export$b47c3594eab58386(props) {
- let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273(), { portalContainer = isSSR ? null : document.body, ...rest2 } = props, { getContainer } = $96b38030c423d352$export$9fc1347d4195ccb3();
- if (!props.portalContainer && getContainer && (portalContainer = getContainer()), react_default.useEffect(() => {
- if (portalContainer?.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
- }, [
- portalContainer
- ]), !portalContainer) return null;
- let contents = react_default.createElement($f57aed4a881a3485$export$bf688221f59024e5, rest2);
- return react_dom_default.createPortal(contents, portalContainer);
- }
-
- // ../../node_modules/@react-aria/overlays/dist/ar-AE.mjs
- var $773d5888b972f1cf$exports = {};
- $773d5888b972f1cf$exports = {
- dismiss: "\u062A\u062C\u0627\u0647\u0644"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/bg-BG.mjs
- var $d11f19852b941573$exports = {};
- $d11f19852b941573$exports = {
- dismiss: "\u041E\u0442\u0445\u0432\u044A\u0440\u043B\u044F\u043D\u0435"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/cs-CZ.mjs
- var $b983974c2ee1efb3$exports = {};
- $b983974c2ee1efb3$exports = {
- dismiss: "Odstranit"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/da-DK.mjs
- var $5809cc9d4e92de73$exports = {};
- $5809cc9d4e92de73$exports = {
- dismiss: "Luk"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/de-DE.mjs
- var $c68c2e4fc74398d1$exports = {};
- $c68c2e4fc74398d1$exports = {
- dismiss: "Schlie\xDFen"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/el-GR.mjs
- var $0898b4c153db2b77$exports = {};
- $0898b4c153db2b77$exports = {
- dismiss: "\u0391\u03C0\u03CC\u03C1\u03C1\u03B9\u03C8\u03B7"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/en-US.mjs
- var $6d74810286a15183$exports = {};
- $6d74810286a15183$exports = {
- dismiss: "Dismiss"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/es-ES.mjs
- var $309d73dc65f78055$exports = {};
- $309d73dc65f78055$exports = {
- dismiss: "Descartar"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/et-EE.mjs
- var $44ad94f7205cf593$exports = {};
- $44ad94f7205cf593$exports = {
- dismiss: "L\xF5peta"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/fi-FI.mjs
- var $7c28f5687f0779a9$exports = {};
- $7c28f5687f0779a9$exports = {
- dismiss: "Hylk\xE4\xE4"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/fr-FR.mjs
- var $e6d75df4b68bd73a$exports = {};
- $e6d75df4b68bd73a$exports = {
- dismiss: "Rejeter"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/he-IL.mjs
- var $87505c9dab186d0f$exports = {};
- $87505c9dab186d0f$exports = {
- dismiss: "\u05D4\u05EA\u05E2\u05DC\u05DD"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/hr-HR.mjs
- var $553439c3ffb3e492$exports = {};
- $553439c3ffb3e492$exports = {
- dismiss: "Odbaci"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/hu-HU.mjs
- var $74cf411061b983a2$exports = {};
- $74cf411061b983a2$exports = {
- dismiss: "Elutas\xEDt\xE1s"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/it-IT.mjs
- var $e933f298574dc435$exports = {};
- $e933f298574dc435$exports = {
- dismiss: "Ignora"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/ja-JP.mjs
- var $ac91fc9fe02f71f6$exports = {};
- $ac91fc9fe02f71f6$exports = {
- dismiss: "\u9589\u3058\u308B"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/ko-KR.mjs
- var $52b96f86422025af$exports = {};
- $52b96f86422025af$exports = {
- dismiss: "\uBB34\uC2DC"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/lt-LT.mjs
- var $c0d724c3e51dafa6$exports = {};
- $c0d724c3e51dafa6$exports = {
- dismiss: "Atmesti"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/lv-LV.mjs
- var $c92899672a3fe72e$exports = {};
- $c92899672a3fe72e$exports = {
- dismiss: "Ner\u0101d\u012Bt"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/nb-NO.mjs
- var $9f576b39d8e7a9d6$exports = {};
- $9f576b39d8e7a9d6$exports = {
- dismiss: "Lukk"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/nl-NL.mjs
- var $9d025808aeec81a7$exports = {};
- $9d025808aeec81a7$exports = {
- dismiss: "Negeren"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/pl-PL.mjs
- var $fce709921e2c0fa6$exports = {};
- $fce709921e2c0fa6$exports = {
- dismiss: "Zignoruj"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/pt-BR.mjs
- var $2599cf0c4ab37f59$exports = {};
- $2599cf0c4ab37f59$exports = {
- dismiss: "Descartar"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/pt-PT.mjs
- var $3c220ae7ef8a35fd$exports = {};
- $3c220ae7ef8a35fd$exports = {
- dismiss: "Dispensar"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/ro-RO.mjs
- var $93562b5094072f54$exports = {};
- $93562b5094072f54$exports = {
- dismiss: "Revocare"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/ru-RU.mjs
- var $cd9e2abd0d06c7b4$exports = {};
- $cd9e2abd0d06c7b4$exports = {
- dismiss: "\u041F\u0440\u043E\u043F\u0443\u0441\u0442\u0438\u0442\u044C"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/sk-SK.mjs
- var $45375701f409adf1$exports = {};
- $45375701f409adf1$exports = {
- dismiss: "Zru\u0161i\u0165"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/sl-SI.mjs
- var $27fab53a576de9dd$exports = {};
- $27fab53a576de9dd$exports = {
- dismiss: "Opusti"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/sr-SP.mjs
- var $4438748d9952e7c7$exports = {};
- $4438748d9952e7c7$exports = {
- dismiss: "Odbaci"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/sv-SE.mjs
- var $0936d7347ef4da4c$exports = {};
- $0936d7347ef4da4c$exports = {
- dismiss: "Avvisa"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/tr-TR.mjs
- var $29700c92185d38f8$exports = {};
- $29700c92185d38f8$exports = {
- dismiss: "Kapat"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/uk-UA.mjs
- var $662ccaf2be4c25b3$exports = {};
- $662ccaf2be4c25b3$exports = {
- dismiss: "\u0421\u043A\u0430\u0441\u0443\u0432\u0430\u0442\u0438"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/zh-CN.mjs
- var $d80a27deda7cdb3c$exports = {};
- $d80a27deda7cdb3c$exports = {
- dismiss: "\u53D6\u6D88"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/zh-TW.mjs
- var $2b2734393847c884$exports = {};
- $2b2734393847c884$exports = {
- dismiss: "\u95DC\u9589"
- };
-
- // ../../node_modules/@react-aria/overlays/dist/intlStrings.mjs
- var $a2f21f5f14f60553$exports = {};
- $a2f21f5f14f60553$exports = {
- "ar-AE": $773d5888b972f1cf$exports,
- "bg-BG": $d11f19852b941573$exports,
- "cs-CZ": $b983974c2ee1efb3$exports,
- "da-DK": $5809cc9d4e92de73$exports,
- "de-DE": $c68c2e4fc74398d1$exports,
- "el-GR": $0898b4c153db2b77$exports,
- "en-US": $6d74810286a15183$exports,
- "es-ES": $309d73dc65f78055$exports,
- "et-EE": $44ad94f7205cf593$exports,
- "fi-FI": $7c28f5687f0779a9$exports,
- "fr-FR": $e6d75df4b68bd73a$exports,
- "he-IL": $87505c9dab186d0f$exports,
- "hr-HR": $553439c3ffb3e492$exports,
- "hu-HU": $74cf411061b983a2$exports,
- "it-IT": $e933f298574dc435$exports,
- "ja-JP": $ac91fc9fe02f71f6$exports,
- "ko-KR": $52b96f86422025af$exports,
- "lt-LT": $c0d724c3e51dafa6$exports,
- "lv-LV": $c92899672a3fe72e$exports,
- "nb-NO": $9f576b39d8e7a9d6$exports,
- "nl-NL": $9d025808aeec81a7$exports,
- "pl-PL": $fce709921e2c0fa6$exports,
- "pt-BR": $2599cf0c4ab37f59$exports,
- "pt-PT": $3c220ae7ef8a35fd$exports,
- "ro-RO": $93562b5094072f54$exports,
- "ru-RU": $cd9e2abd0d06c7b4$exports,
- "sk-SK": $45375701f409adf1$exports,
- "sl-SI": $27fab53a576de9dd$exports,
- "sr-SP": $4438748d9952e7c7$exports,
- "sv-SE": $0936d7347ef4da4c$exports,
- "tr-TR": $29700c92185d38f8$exports,
- "uk-UA": $662ccaf2be4c25b3$exports,
- "zh-CN": $d80a27deda7cdb3c$exports,
- "zh-TW": $2b2734393847c884$exports
- };
-
- // ../../node_modules/@react-aria/overlays/dist/DismissButton.mjs
- init_react();
-
- // ../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.mjs
- init_react();
-
- // ../../node_modules/@react-aria/overlays/dist/ariaHideOutside.mjs
- var $5e3802645cc19319$var$supportsInert = typeof HTMLElement < "u" && "inert" in HTMLElement.prototype;
-
- // ../../node_modules/@react-aria/overlays/dist/usePopover.mjs
- init_react();
-
- // ../../node_modules/@react-aria/overlays/dist/Overlay.mjs
- init_react();
- var $337b884510726a0d$export$a2200b96afd16271 = react_default.createContext(null);
-
- // ../../node_modules/@react-aria/overlays/dist/useModalOverlay.mjs
- init_react();
-
- // ../../node_modules/@react-stately/tooltip/dist/useTooltipTriggerState.mjs
- init_react();
-
- // ../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.mjs
- init_react();
- function $fc909762b330b746$export$61c6a8c84e605fb6(props) {
- let [isOpen, setOpen] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.isOpen, props.defaultOpen || !1, props.onOpenChange), open = useCallback(() => {
- setOpen(!0);
- }, [
- setOpen
- ]), close = useCallback(() => {
- setOpen(!1);
- }, [
- setOpen
- ]), toggle = useCallback(() => {
- setOpen(!isOpen);
- }, [
- setOpen,
- isOpen
- ]);
- return {
- isOpen,
- setOpen,
- open,
- close,
- toggle
- };
- }
-
- // ../../node_modules/@react-stately/tooltip/dist/useTooltipTriggerState.mjs
- var $8796f90736e175cb$var$TOOLTIP_DELAY = 1500, $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500, $8796f90736e175cb$var$tooltips = {}, $8796f90736e175cb$var$tooltipId = 0, $8796f90736e175cb$var$globalWarmedUp = !1, $8796f90736e175cb$var$globalWarmUpTimeout = null, $8796f90736e175cb$var$globalCooldownTimeout = null;
- function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
- let { delay: delay2 = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props, { isOpen, open, close } = $fc909762b330b746$export$61c6a8c84e605fb6(props), id = useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []), closeTimeout = useRef(null), closeCallback = useRef(close), ensureTooltipEntry = () => {
- $8796f90736e175cb$var$tooltips[id] = hideTooltip;
- }, closeOpenTooltips = () => {
- for (let hideTooltipId in $8796f90736e175cb$var$tooltips) hideTooltipId !== id && ($8796f90736e175cb$var$tooltips[hideTooltipId](!0), delete $8796f90736e175cb$var$tooltips[hideTooltipId]);
- }, showTooltip = () => {
- closeTimeout.current && clearTimeout(closeTimeout.current), closeTimeout.current = null, closeOpenTooltips(), ensureTooltipEntry(), $8796f90736e175cb$var$globalWarmedUp = !0, open(), $8796f90736e175cb$var$globalWarmUpTimeout && (clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout), $8796f90736e175cb$var$globalWarmUpTimeout = null), $8796f90736e175cb$var$globalCooldownTimeout && (clearTimeout($8796f90736e175cb$var$globalCooldownTimeout), $8796f90736e175cb$var$globalCooldownTimeout = null);
- }, hideTooltip = (immediate) => {
- immediate || closeDelay <= 0 ? (closeTimeout.current && clearTimeout(closeTimeout.current), closeTimeout.current = null, closeCallback.current()) : closeTimeout.current || (closeTimeout.current = setTimeout(() => {
- closeTimeout.current = null, closeCallback.current();
- }, closeDelay)), $8796f90736e175cb$var$globalWarmUpTimeout && (clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout), $8796f90736e175cb$var$globalWarmUpTimeout = null), $8796f90736e175cb$var$globalWarmedUp && ($8796f90736e175cb$var$globalCooldownTimeout && clearTimeout($8796f90736e175cb$var$globalCooldownTimeout), $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
- delete $8796f90736e175cb$var$tooltips[id], $8796f90736e175cb$var$globalCooldownTimeout = null, $8796f90736e175cb$var$globalWarmedUp = !1;
- }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay)));
- }, warmupTooltip = () => {
- closeOpenTooltips(), ensureTooltipEntry(), !isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp ? $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
- $8796f90736e175cb$var$globalWarmUpTimeout = null, $8796f90736e175cb$var$globalWarmedUp = !0, showTooltip();
- }, delay2) : isOpen || showTooltip();
- };
- return useEffect(() => {
- closeCallback.current = close;
- }, [
- close
- ]), useEffect(() => () => {
- closeTimeout.current && clearTimeout(closeTimeout.current), $8796f90736e175cb$var$tooltips[id] && delete $8796f90736e175cb$var$tooltips[id];
- }, [
- id
- ]), {
- isOpen,
- open: (immediate) => {
- !immediate && delay2 > 0 && !closeTimeout.current ? warmupTooltip() : showTooltip();
- },
- close: hideTooltip
- };
- }
-
- // ../../node_modules/react-aria-components/dist/Tooltip.mjs
- init_react();
- var $4e3b923658d69c60$export$7a7623236eec67fa = createContext(null), $4e3b923658d69c60$export$39ae08fa83328b12 = createContext(null);
- function $4e3b923658d69c60$export$8c610744efcf8a1d(props) {
- let state = $8796f90736e175cb$export$4d40659c25ecb50b(props), ref = useRef(null), { triggerProps, tooltipProps } = $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref);
- return react_default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
- values: [
- [
- $4e3b923658d69c60$export$7a7623236eec67fa,
- state
- ],
- [
- $4e3b923658d69c60$export$39ae08fa83328b12,
- {
- ...tooltipProps,
- triggerRef: ref
- }
- ]
- ]
- }, react_default.createElement($f645667febf57a63$export$13f3202a3e5ddd5, {
- ...triggerProps,
- ref
- }, props.children));
- }
- var $4e3b923658d69c60$export$28c660c63b792dea = forwardRef(function({ UNSTABLE_portalContainer, ...props }, ref) {
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e3b923658d69c60$export$39ae08fa83328b12);
- let contextState = useContext($4e3b923658d69c60$export$7a7623236eec67fa), localState = $8796f90736e175cb$export$4d40659c25ecb50b(props), state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState, isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || !1;
- return !state.isOpen && !isExiting ? null : react_default.createElement($f57aed4a881a3485$export$b47c3594eab58386, {
- portalContainer: UNSTABLE_portalContainer
- }, react_default.createElement($4e3b923658d69c60$var$TooltipInner, {
- ...props,
- tooltipRef: ref,
- isExiting
- }));
- });
- function $4e3b923658d69c60$var$TooltipInner(props) {
- let state = useContext($4e3b923658d69c60$export$7a7623236eec67fa), arrowRef = useRef(null), { overlayProps, arrowProps, placement, triggerAnchorPoint } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
- placement: props.placement || "top",
- targetRef: props.triggerRef,
- overlayRef: props.tooltipRef,
- arrowRef,
- offset: props.offset,
- crossOffset: props.crossOffset,
- isOpen: state.isOpen,
- arrowBoundaryOffset: props.arrowBoundaryOffset,
- shouldFlip: props.shouldFlip,
- containerPadding: props.containerPadding,
- onClose: () => state.close(!0)
- }), isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(props.tooltipRef, !!placement) || props.isEntering || !1, renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
- ...props,
- defaultClassName: "react-aria-Tooltip",
- values: {
- placement,
- isEntering,
- isExiting: props.isExiting,
- state
- }
- });
- props = $3ef42575df84b30b$export$9d1611c77c2fe928(props, overlayProps);
- let { tooltipProps } = $326e436e94273fe1$export$1c4b08e0eca38426(props, state), DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
- global: !0
- });
- return react_default.createElement("div", {
- ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tooltipProps),
- ref: props.tooltipRef,
- style: {
- ...overlayProps.style,
- "--trigger-anchor-point": triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : void 0,
- ...renderProps.style
- },
- "data-placement": placement ?? void 0,
- "data-entering": isEntering || void 0,
- "data-exiting": props.isExiting || void 0
- }, react_default.createElement($44f671af83e7d9e0$export$2de4954e8ae13b9f.Provider, {
- value: {
- ...arrowProps,
- placement,
- ref: arrowRef
- }
- }, renderProps.children));
- }
-
- // src/components/components/shared/overlayHelpers.tsx
- init_react();
- var import_memoizerific = __toESM(require_memoizerific(), 1);
- var convertToReactAriaPlacement2 = (0, import_memoizerific.default)(1e3)((p2) => p2 === "left-end" ? "left bottom" : p2 === "right-end" ? "right bottom" : p2 === "left-start" ? "left top" : p2 === "right-start" ? "right top" : p2.replace("-", " ")), Container5 = styled.div({
- width: 500,
- height: 500,
- paddingTop: 100,
- overflowY: "scroll",
- background: "#eee",
- position: "relative"
- }), Trigger = forwardRef((props, ref) => react_default.createElement(
- "button",
- {
- ...props,
- ref,
- style: {
- width: 120,
- height: 50,
- margin: 10
- }
- }
- ));
- Trigger.displayName = "Trigger";
-
- // src/components/components/tooltip/TooltipProvider.tsx
- var TooltipProvider2 = ({
- triggerOnFocusOnly = !1,
- placement: placementProp = "top",
- offset: offset2 = 8,
- tooltip,
- children,
- defaultVisible,
- startOpen,
- delayShow = 400,
- delayHide = 200,
- visible,
- onVisibleChange,
- ...props
- }) => {
- let placement = convertToReactAriaPlacement2(placementProp), child = react_default.Children.only(children);
- startOpen !== void 0 && deprecate("The `startOpen` prop is deprecated. Please use `defaultVisible` instead.");
- let [isOpen, setIsOpen] = useState(defaultVisible ?? startOpen ?? !1), onOpenChange = useCallback(
- (isOpen2) => {
- setIsOpen(isOpen2), onVisibleChange?.(isOpen2);
- },
- [onVisibleChange]
- );
- return react_default.createElement(
- $4e3b923658d69c60$export$8c610744efcf8a1d,
- {
- delay: delayShow,
- closeDelay: delayHide,
- isOpen: visible ?? isOpen,
- onOpenChange,
- trigger: triggerOnFocusOnly ? "focus" : void 0,
- ...props
- },
- react_default.createElement($f645667febf57a63$export$35a3bebf7ef2d934, null, react_default.cloneElement(child, { "aria-describedby": null })),
- react_default.createElement(
- $4e3b923658d69c60$export$28c660c63b792dea,
- {
- "data-testid": "tooltip",
- placement,
- offset: offset2,
- onOpenChange,
- style: { outline: "none" },
- ...props
- },
- tooltip
- )
- );
- };
-
- // src/manager/components/layout/Drag.tsx
- var oppositePosition = {
- left: "right",
- right: "left",
- top: "bottom",
- bottom: "top"
- }, Drag = forwardRef(function(props, ref) {
- let {
- overlapping,
- position,
- "aria-label": ariaLabel,
- "aria-valuenow": ariaValueNow,
- "aria-valuemax": ariaValueMax,
- ...rest2
- } = props, orientation = position === "left" || position === "right" ? "vertical" : "horizontal", tooltipNote = orientation === "vertical" ? "\u2190 \u2192 to resize" : "\u2191 \u2193 to resize";
- return react_default.createElement(
- TooltipProvider2,
- {
- triggerOnFocusOnly: !0,
- placement: oppositePosition[position],
- tooltip: react_default.createElement(TooltipNote2, { note: tooltipNote })
- },
- react_default.createElement(
- DragHandle,
- {
- ref,
- $orientation: orientation,
- $overlapping: overlapping,
- $position: position,
- role: "separator",
- tabIndex: 0,
- "aria-orientation": orientation,
- "aria-label": ariaLabel,
- "aria-valuenow": ariaValueNow,
- "aria-valuemin": 0,
- "aria-valuemax": ariaValueMax,
- ...rest2
- }
- )
- );
- }), DragHandle = styled.div(
- ({ theme }) => ({
- position: "absolute",
- opacity: 0,
- transition: "opacity 0.2s ease-in-out",
- zIndex: 100,
- "&:after": {
- content: '""',
- display: "block",
- backgroundColor: theme.color.secondary
- },
- "&:hover": {
- opacity: 1
- }
- }),
- ({ theme, $orientation = "vertical" }) => ({
- "&:focus-visible": {
- opacity: 1,
- outline: "2px solid transparent",
- ...$orientation === "horizontal" ? { height: 7 } : { width: 7 },
- boxShadow: `inset 0 0 0 4px ${theme.color.secondary}`,
- "@media (forced-colors: active)": {
- outline: "2px solid Highlight"
- }
- }
- }),
- ({ $orientation = "vertical", $overlapping = !0, $position = "left" }) => $orientation === "vertical" ? {
- // This is an old code smell, where 10px matches the sidebar and 13px matches the addon panel.
- // It should be tidied up at some point.
- width: $overlapping ? $position === "left" ? 10 : 13 : 7,
- height: "100%",
- top: 0,
- right: $position === "left" ? -7 : void 0,
- left: $position === "right" ? -7 : void 0,
- "&:after": {
- width: 1,
- height: "100%",
- marginLeft: $position === "left" ? 3 : 6
- },
- "&:hover": {
- cursor: "col-resize"
- }
- } : {
- width: "100%",
- height: $overlapping ? 13 : 7,
- top: $position === "bottom" ? -7 : void 0,
- bottom: $position === "top" ? -7 : void 0,
- left: 0,
- "&:after": {
- width: "100%",
- height: 1,
- marginTop: 6
- },
- "&:hover": {
- cursor: "row-resize"
- }
- }
- );
-
- // src/manager/components/layout/PanelContainer.tsx
- var Container6 = styled.div(({ theme, position }) => ({
- gridArea: "panel",
- position: "relative",
- backgroundColor: theme.appContentBg,
- borderTop: position === "bottom" ? `1px solid ${theme.appBorderColor}` : void 0,
- borderLeft: position === "right" ? `1px solid ${theme.appBorderColor}` : void 0
- })), PanelSlot = styled.div({
- height: "100%"
- }), PanelContainer = react_default.memo(function(props) {
- let { children, bottomPanelHeight, rightPanelWidth, panelMaxSize, panelResizerRef, position } = props, shouldHidePanelContent = position === "bottom" ? bottomPanelHeight === 0 : rightPanelWidth === 0;
- return react_default.createElement(Container6, { position }, react_default.createElement(
- Drag,
- {
- ref: panelResizerRef,
- position,
- overlapping: position === "bottom" ? !!bottomPanelHeight : !!rightPanelWidth,
- "aria-label": "Addon panel resize handle",
- "aria-valuenow": position === "bottom" ? bottomPanelHeight : rightPanelWidth,
- "aria-valuemax": panelMaxSize
- }
- ), react_default.createElement(
- PanelSlot,
- {
- hidden: shouldHidePanelContent ? !0 : void 0,
- "aria-hidden": shouldHidePanelContent ? !0 : void 0
- },
- children
- ));
- });
-
- // src/manager/components/layout/SidebarContainer.tsx
- init_react();
- var Container7 = styled.div(({ theme }) => ({
- backgroundColor: theme.appBg,
- gridArea: "sidebar",
- position: "relative",
- borderRight: `1px solid ${theme.appBorderColor}`
- })), SidebarSlot = styled.div({
- height: "100%"
- }), SidebarContainer = react_default.memo(function(props) {
- let { children, navSize, sidebarMaxWidth, sidebarResizerRef } = props, shouldHideSidebarContent = navSize === 0;
- return react_default.createElement(Container7, null, react_default.createElement(
- SidebarSlot,
- {
- hidden: shouldHideSidebarContent ? !0 : void 0,
- "aria-hidden": shouldHideSidebarContent ? !0 : void 0
- },
- children
- ), react_default.createElement(
- Drag,
- {
- ref: sidebarResizerRef,
- position: "left",
- "aria-label": "Sidebar resize handle",
- "aria-valuenow": navSize,
- "aria-valuemax": sidebarMaxWidth
- }
- ));
- });
-
- // src/manager/components/layout/useDragging.ts
- init_react();
- var SNAP_THRESHOLD_PX = 30, STIFFNESS = 0.9, KEYBOARD_STEP_PX = 10, KEYBOARD_SHIFT_MULTIPLIER = 5, RESIZE_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
- function clamp(value, min, max) {
- return Math.min(Math.max(value, min), max);
- }
- function interpolate(relativeValue, min, max) {
- return min + (max - min) * relativeValue;
- }
- function computeSidebarMaxWidth(panelPosition, rightPanelWidth, showPanel) {
- if (typeof window > "u")
- return 0;
- let panelWidth = showPanel ? panelPosition === "right" ? rightPanelWidth : 360 : 0;
- return Math.max(window.innerWidth - 100 - panelWidth, 0);
- }
- function computePanelMaxSize(panelPosition, navSize) {
- return typeof window > "u" ? 0 : Math.max(panelPosition === "bottom" ? window.innerHeight - 40 : window.innerWidth - 100 - navSize, 0);
- }
- function applyResizeKeyboard(state, sizeKey, key, step, minSize, maxSize, increaseKey, decreaseKey) {
- let currentSize = state[sizeKey];
- switch (key) {
- case increaseKey:
- return { ...state, [sizeKey]: clamp(currentSize + step, minSize, maxSize) };
- case decreaseKey:
- let effectivelyComputed = clamp(currentSize - step, 0, maxSize);
- return { ...state, [sizeKey]: effectivelyComputed < minSize ? 0 : effectivelyComputed };
- case "Home":
- return { ...state, [sizeKey]: 0 };
- case "End":
- return { ...state, [sizeKey]: maxSize };
- default:
- return state;
- }
- }
- function useDragging({
- setState,
- showPanel,
- isDesktop,
- navSize,
- rightPanelWidth,
- panelPosition
- }) {
- let panelResizerRef = useRef(null), sidebarResizerRef = useRef(null), sidebarMaxWidth = computeSidebarMaxWidth(panelPosition, rightPanelWidth, showPanel), panelMaxSize = computePanelMaxSize(panelPosition, navSize);
- return useEffect(() => {
- let panelResizer = panelResizerRef.current, sidebarResizer = sidebarResizerRef.current, previewIframe = document.querySelector("#storybook-preview-iframe"), draggedElement = null, onDragStart = (e2) => {
- e2.preventDefault(), setState((state) => ({
- ...state,
- isDragging: !0
- })), e2.currentTarget === panelResizer ? draggedElement = panelResizer : e2.currentTarget === sidebarResizer && (draggedElement = sidebarResizer), window.addEventListener("mousemove", onDrag), window.addEventListener("mouseup", onDragEnd), previewIframe && (previewIframe.style.pointerEvents = "none");
- }, onDragEnd = () => {
- setState((state) => {
- if (draggedElement === sidebarResizer && state.navSize < 240 && state.navSize > 0)
- return {
- ...state,
- isDragging: !1,
- navSize: 240
- };
- if (draggedElement === panelResizer) {
- if (state.panelPosition === "right" && state.rightPanelWidth < 270 && state.rightPanelWidth > 0)
- return {
- ...state,
- isDragging: !1,
- rightPanelWidth: 270
- };
- if (state.panelPosition === "bottom" && state.bottomPanelHeight < 40 && state.bottomPanelHeight > 0)
- return {
- ...state,
- isDragging: !1,
- bottomPanelHeight: 40
- };
- }
- return {
- ...state,
- isDragging: !1
- };
- }), window.removeEventListener("mousemove", onDrag), window.removeEventListener("mouseup", onDragEnd), previewIframe?.removeAttribute("style"), draggedElement = null;
- }, onDrag = (e2) => {
- if (e2.buttons === 0) {
- onDragEnd();
- return;
- }
- setState((state) => {
- if (draggedElement === sidebarResizer) {
- let sidebarDragX = e2.clientX;
- return sidebarDragX === state.navSize ? state : sidebarDragX <= SNAP_THRESHOLD_PX ? {
- ...state,
- navSize: 0
- } : sidebarDragX <= 240 ? {
- ...state,
- navSize: interpolate(STIFFNESS, sidebarDragX, 240)
- } : {
- ...state,
- navSize: clamp(
- sidebarDragX,
- 0,
- computeSidebarMaxWidth(state.panelPosition, state.rightPanelWidth, showPanel)
- )
- };
- }
- if (draggedElement === panelResizer) {
- let sizeAxisState = state.panelPosition === "bottom" ? "bottomPanelHeight" : "rightPanelWidth", panelDragSize = state.panelPosition === "bottom" ? (
- // @ts-expect-error (non strict)
- e2.view.innerHeight - e2.clientY
- ) : (
- // @ts-expect-error (non strict)
- e2.view.innerWidth - e2.clientX
- ), minimumSize = state.panelPosition === "bottom" ? 40 : 270;
- return panelDragSize === state[sizeAxisState] ? state : panelDragSize <= SNAP_THRESHOLD_PX ? {
- ...state,
- [sizeAxisState]: 0
- } : panelDragSize <= minimumSize ? {
- ...state,
- [sizeAxisState]: interpolate(STIFFNESS, panelDragSize, minimumSize)
- } : {
- ...state,
- [sizeAxisState]: clamp(
- panelDragSize,
- 0,
- computePanelMaxSize(state.panelPosition, state.navSize)
- )
- };
- }
- return state;
- });
- }, onSidebarKeyDown = (e2) => {
- if (!RESIZE_KEYS.includes(e2.key))
- return;
- e2.preventDefault();
- let step = e2.shiftKey ? KEYBOARD_STEP_PX * KEYBOARD_SHIFT_MULTIPLIER : KEYBOARD_STEP_PX;
- setState(
- (state) => applyResizeKeyboard(
- state,
- "navSize",
- e2.key,
- step,
- 240,
- computeSidebarMaxWidth(state.panelPosition, state.rightPanelWidth, showPanel),
- "ArrowRight",
- "ArrowLeft"
- )
- );
- }, onPanelKeyDown = (e2) => {
- if (!RESIZE_KEYS.includes(e2.key))
- return;
- e2.preventDefault();
- let step = e2.shiftKey ? KEYBOARD_STEP_PX * KEYBOARD_SHIFT_MULTIPLIER : KEYBOARD_STEP_PX;
- setState(
- (state) => applyResizeKeyboard(
- state,
- state.panelPosition === "bottom" ? "bottomPanelHeight" : "rightPanelWidth",
- e2.key,
- step,
- state.panelPosition === "bottom" ? 40 : 270,
- computePanelMaxSize(state.panelPosition, state.navSize),
- state.panelPosition === "bottom" ? "ArrowUp" : "ArrowLeft",
- state.panelPosition === "bottom" ? "ArrowDown" : "ArrowRight"
- )
- );
- };
- return panelResizer?.addEventListener("mousedown", onDragStart), sidebarResizer?.addEventListener("mousedown", onDragStart), panelResizer?.addEventListener("keydown", onPanelKeyDown), sidebarResizer?.addEventListener("keydown", onSidebarKeyDown), () => {
- panelResizer?.removeEventListener("mousedown", onDragStart), sidebarResizer?.removeEventListener("mousedown", onDragStart), panelResizer?.removeEventListener("keydown", onPanelKeyDown), sidebarResizer?.removeEventListener("keydown", onSidebarKeyDown), previewIframe?.removeAttribute("style");
- };
- }, [
- // we need to rerun this effect when the panel is shown/hidden or when changing between mobile/desktop to re-attach the event listeners
- showPanel,
- isDesktop,
- setState
- ]), { panelResizerRef, sidebarResizerRef, sidebarMaxWidth, panelMaxSize };
- }
-
- // src/manager/components/layout/useLandmarkIndicator.ts
- init_react();
- function findActiveLandmarkElement() {
- let currentElement = document.activeElement, landmarkElement = null;
- for (; currentElement; ) {
- if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-sb-landmark")) {
- landmarkElement = currentElement;
- break;
- }
- currentElement = currentElement.parentElement;
- }
- return landmarkElement;
- }
- function useRegionFocusAnimation() {
- let theme = useTheme(), reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)"), currentAnimationRef = useRef(null);
- return (elementToAnimate) => {
- if (elementToAnimate && (currentAnimationRef.current && (currentAnimationRef.current.cancel(), currentAnimationRef.current = null), !reducedMotion)) {
- let animation = elementToAnimate.animate(
- [{ border: `2px solid ${theme.color.primary}` }, { border: "2px solid transparent" }],
- {
- duration: 1500,
- pseudoElement: "::after"
- }
- );
- currentAnimationRef.current = animation, animation.onfinish = () => {
- currentAnimationRef.current = null;
- };
- }
- };
- }
- function useLandmarkIndicator() {
- let animateLandmark = useRegionFocusAnimation();
- useEffect(() => {
- let handleKeyDown = (e2) => {
- if (e2.key !== "F6")
- return;
- let landmarkElement = findActiveLandmarkElement();
- landmarkElement && animateLandmark(landmarkElement);
- };
- return document.addEventListener("keydown", handleKeyDown, { capture: !0 }), () => {
- document.removeEventListener("keydown", handleKeyDown, { capture: !0 });
- };
- }, [animateLandmark]);
- }
-
- // src/manager/components/layout/Layout.tsx
- var layoutStateIsEqual = (state, other) => state.navSize === other.navSize && state.bottomPanelHeight === other.bottomPanelHeight && state.rightPanelWidth === other.rightPanelWidth && state.panelPosition === other.panelPosition, useLayoutSyncingState = ({
- api,
- managerLayoutState,
- setManagerLayoutState,
- isDesktop,
- hasTab
- }) => {
- let prevManagerLayoutStateRef = react_default.useRef(managerLayoutState), [internalDraggingSizeState, setInternalDraggingSizeState] = useState({
- ...managerLayoutState,
- isDragging: !1
- });
- useEffect(() => {
- internalDraggingSizeState.isDragging || // don't interrupt user's drag
- layoutStateIsEqual(managerLayoutState, prevManagerLayoutStateRef.current) || (prevManagerLayoutStateRef.current = managerLayoutState, setInternalDraggingSizeState((state) => ({ ...state, ...managerLayoutState })));
- }, [internalDraggingSizeState.isDragging, managerLayoutState, setInternalDraggingSizeState]), useLayoutEffect(() => {
- if (internalDraggingSizeState.isDragging || // wait with syncing managerLayoutState until user is done dragging
- layoutStateIsEqual(managerLayoutState, internalDraggingSizeState))
- return;
- let nextState = {
- navSize: internalDraggingSizeState.navSize,
- bottomPanelHeight: internalDraggingSizeState.bottomPanelHeight,
- rightPanelWidth: internalDraggingSizeState.rightPanelWidth
- };
- prevManagerLayoutStateRef.current = {
- ...prevManagerLayoutStateRef.current,
- ...nextState
- }, setManagerLayoutState(nextState);
- }, [internalDraggingSizeState, setManagerLayoutState]);
- let isPagesShown = managerLayoutState.viewMode !== void 0 && managerLayoutState.viewMode !== "story" && managerLayoutState.viewMode !== "docs", isPanelShown = managerLayoutState.viewMode === "story" && !hasTab, { navSize, rightPanelWidth, bottomPanelHeight } = internalDraggingSizeState.isDragging ? internalDraggingSizeState : managerLayoutState, customisedNavSize = api.getNavSizeWithCustomisations?.(navSize) ?? navSize, customisedShowPanel = api.getShowPanelWithCustomisations?.(isPanelShown) ?? isPanelShown, { panelResizerRef, sidebarResizerRef, sidebarMaxWidth, panelMaxSize } = useDragging({
- setState: setInternalDraggingSizeState,
- isDesktop,
- navSize: customisedNavSize,
- showPanel: customisedShowPanel,
- rightPanelWidth,
- panelPosition: managerLayoutState.panelPosition
- });
- return {
- navSize: customisedNavSize,
- rightPanelWidth,
- bottomPanelHeight,
- panelPosition: managerLayoutState.panelPosition,
- panelResizerRef,
- sidebarResizerRef,
- sidebarMaxWidth,
- panelMaxSize,
- showPages: isPagesShown,
- showPanel: customisedShowPanel,
- isDragging: internalDraggingSizeState.isDragging
- };
- }, OrderedMobileNavigation = styled(MobileNavigation)({
- order: 1
- }), Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...slots }) => {
- let { isDesktop, isMobile: isMobile2 } = useLayout(), api = useStorybookApi(), {
- navSize,
- rightPanelWidth,
- bottomPanelHeight,
- panelPosition,
- panelResizerRef,
- sidebarResizerRef,
- sidebarMaxWidth,
- panelMaxSize,
- showPages,
- showPanel
- } = useLayoutSyncingState({ api, managerLayoutState, setManagerLayoutState, isDesktop, hasTab });
- return useLandmarkIndicator(), react_default.createElement(
- LayoutContainer,
- {
- panelPosition: managerLayoutState.panelPosition,
- showPanel,
- style: {
- "--nav-width": `${navSize}px`,
- "--right-panel-width": `${rightPanelWidth}px`,
- "--bottom-panel-height": `${bottomPanelHeight}px`
- }
- },
- react_default.createElement(react_default.Fragment, null, isDesktop && react_default.createElement(
- SidebarContainer,
- {
- navSize,
- sidebarMaxWidth,
- sidebarResizerRef
- },
- slots.slotSidebar
- ), isMobile2 && react_default.createElement(
- OrderedMobileNavigation,
- {
- menu: slots.slotSidebar,
- panel: slots.slotPanel,
- showPanel
- }
- ), react_default.createElement(
- MainAreaContainer,
- {
- showPages,
- slotMain: slots.slotMain,
- slotPages: slots.slotPages
- }
- ), isDesktop && showPanel && react_default.createElement(
- PanelContainer,
- {
- bottomPanelHeight,
- rightPanelWidth,
- panelMaxSize,
- panelResizerRef,
- position: panelPosition
- },
- slots.slotPanel
- ), isMobile2 && react_default.createElement(Notifications, null))
- );
- }, LayoutContainer = styled.div(({ panelPosition, showPanel }) => ({
- width: "100%",
- height: ["100vh", "100dvh"],
- overflow: "hidden",
- display: "flex",
- flexDirection: "column",
- colorScheme: "light dark",
- [MEDIA_DESKTOP_BREAKPOINT]: {
- display: "grid",
- gap: 0,
- // This uses CSS variables to prevent Emotion from generating a new CSS className for every possible value
- gridTemplateColumns: `minmax(0, var(--nav-width)) minmax(${100}px, 1fr) minmax(0, var(--right-panel-width))`,
- gridTemplateRows: "1fr minmax(0, var(--bottom-panel-height))",
- gridTemplateAreas: showPanel ? panelPosition === "right" ? `"sidebar content panel"
- "sidebar content panel"` : `"sidebar content content"
- "sidebar panel panel"` : `"sidebar content content"
- "sidebar content content"`
- }
- }));
-
- // src/manager/container/Panel.tsx
- init_react();
-
- // global-externals:storybook/internal/types
- var types_default = __STORYBOOK_TYPES__, { Addon_TypesEnum, CHANGE_DETECTION_STATUS_TYPE_ID, CoreWebpackCompiler, Feature, SupportedBuilder, SupportedFramework, SupportedLanguage, SupportedRenderer } = __STORYBOOK_TYPES__;
-
- // src/core-events/index.ts
- var events = /* @__PURE__ */ ((events2) => (events2.CHANNEL_WS_DISCONNECT = "channelWSDisconnect", events2.CHANNEL_CREATED = "channelCreated", events2.CONFIG_ERROR = "configError", events2.STORY_INDEX_INVALIDATED = "storyIndexInvalidated", events2.STORY_SPECIFIED = "storySpecified", events2.SET_CONFIG = "setConfig", events2.SET_STORIES = "setStories", events2.SET_INDEX = "setIndex", events2.SET_CURRENT_STORY = "setCurrentStory", events2.CURRENT_STORY_WAS_SET = "currentStoryWasSet", events2.FORCE_RE_RENDER = "forceReRender", events2.FORCE_REMOUNT = "forceRemount", events2.PRELOAD_ENTRIES = "preloadStories", events2.STORY_PREPARED = "storyPrepared", events2.DOCS_PREPARED = "docsPrepared", events2.STORY_CHANGED = "storyChanged", events2.STORY_UNCHANGED = "storyUnchanged", events2.STORY_RENDERED = "storyRendered", events2.STORY_FINISHED = "storyFinished", events2.STORY_MISSING = "storyMissing", events2.STORY_ERRORED = "storyErrored", events2.STORY_THREW_EXCEPTION = "storyThrewException", events2.STORY_RENDER_PHASE_CHANGED = "storyRenderPhaseChanged", events2.STORY_HOT_UPDATED = "storyHotUpdated", events2.PLAY_FUNCTION_THREW_EXCEPTION = "playFunctionThrewException", events2.UNHANDLED_ERRORS_WHILE_PLAYING = "unhandledErrorsWhilePlaying", events2.UPDATE_STORY_ARGS = "updateStoryArgs", events2.STORY_ARGS_UPDATED = "storyArgsUpdated", events2.RESET_STORY_ARGS = "resetStoryArgs", events2.SET_FILTER = "setFilter", events2.SET_GLOBALS = "setGlobals", events2.UPDATE_GLOBALS = "updateGlobals", events2.GLOBALS_UPDATED = "globalsUpdated", events2.REGISTER_SUBSCRIPTION = "registerSubscription", events2.PREVIEW_INITIALIZED = "previewInitialized", events2.PREVIEW_KEYDOWN = "previewKeydown", events2.PREVIEW_BUILDER_PROGRESS = "preview_builder_progress", events2.SELECT_STORY = "selectStory", events2.STORIES_COLLAPSE_ALL = "storiesCollapseAll", events2.STORIES_EXPAND_ALL = "storiesExpandAll", events2.DOCS_RENDERED = "docsRendered", events2.SHARED_STATE_CHANGED = "sharedStateChanged", events2.SHARED_STATE_SET = "sharedStateSet", events2.NAVIGATE_URL = "navigateUrl", events2.UPDATE_QUERY_PARAMS = "updateQueryParams", events2.REQUEST_WHATS_NEW_DATA = "requestWhatsNewData", events2.RESULT_WHATS_NEW_DATA = "resultWhatsNewData", events2.SET_WHATS_NEW_CACHE = "setWhatsNewCache", events2.TOGGLE_WHATS_NEW_NOTIFICATIONS = "toggleWhatsNewNotifications", events2.TELEMETRY_ERROR = "telemetryError", events2.FILE_COMPONENT_SEARCH_REQUEST = "fileComponentSearchRequest", events2.FILE_COMPONENT_SEARCH_RESPONSE = "fileComponentSearchResponse", events2.SAVE_STORY_REQUEST = "saveStoryRequest", events2.SAVE_STORY_RESPONSE = "saveStoryResponse", events2.ARGTYPES_INFO_REQUEST = "argtypesInfoRequest", events2.ARGTYPES_INFO_RESPONSE = "argtypesInfoResponse", events2.CREATE_NEW_STORYFILE_REQUEST = "createNewStoryfileRequest", events2.CREATE_NEW_STORYFILE_RESPONSE = "createNewStoryfileResponse", events2.GHOST_STORIES_REQUEST = "ghostStoriesRequest", events2.GHOST_STORIES_RESPONSE = "ghostStoriesResponse", events2.AI_SETUP_ANALYTICS_RESPONSE = "aiSetupAnalyticsResponse", events2.AI_SETUP_ANALYTICS_REQUEST = "aiSetupAnalyticsRequest", events2.OPEN_IN_EDITOR_REQUEST = "openInEditorRequest", events2.OPEN_IN_EDITOR_RESPONSE = "openInEditorResponse", events2.MANAGER_INERT_ATTRIBUTE_CHANGED = "managerInertAttributeChanged", events2.SHARE_ISOLATE_MODE = "shareIsolateMode", events2.AI_PROMPT_NUDGE = "aiPromptNudge", events2.SIDEBAR_FILTER_CHANGED = "sidebarFilterChanged", events2))(events || {});
- var {
- CHANNEL_WS_DISCONNECT: CHANNEL_WS_DISCONNECT2,
- CHANNEL_CREATED: CHANNEL_CREATED2,
- CONFIG_ERROR: CONFIG_ERROR2,
- CREATE_NEW_STORYFILE_REQUEST: CREATE_NEW_STORYFILE_REQUEST2,
- CREATE_NEW_STORYFILE_RESPONSE: CREATE_NEW_STORYFILE_RESPONSE2,
- CURRENT_STORY_WAS_SET: CURRENT_STORY_WAS_SET2,
- DOCS_PREPARED: DOCS_PREPARED2,
- DOCS_RENDERED: DOCS_RENDERED2,
- FILE_COMPONENT_SEARCH_REQUEST: FILE_COMPONENT_SEARCH_REQUEST2,
- FILE_COMPONENT_SEARCH_RESPONSE: FILE_COMPONENT_SEARCH_RESPONSE2,
- FORCE_RE_RENDER: FORCE_RE_RENDER2,
- FORCE_REMOUNT: FORCE_REMOUNT2,
- GLOBALS_UPDATED: GLOBALS_UPDATED2,
- NAVIGATE_URL: NAVIGATE_URL2,
- PLAY_FUNCTION_THREW_EXCEPTION: PLAY_FUNCTION_THREW_EXCEPTION2,
- UNHANDLED_ERRORS_WHILE_PLAYING: UNHANDLED_ERRORS_WHILE_PLAYING2,
- PRELOAD_ENTRIES: PRELOAD_ENTRIES2,
- PREVIEW_INITIALIZED: PREVIEW_INITIALIZED2,
- PREVIEW_BUILDER_PROGRESS: PREVIEW_BUILDER_PROGRESS2,
- PREVIEW_KEYDOWN: PREVIEW_KEYDOWN2,
- REGISTER_SUBSCRIPTION: REGISTER_SUBSCRIPTION2,
- RESET_STORY_ARGS: RESET_STORY_ARGS2,
- SELECT_STORY: SELECT_STORY2,
- SET_CONFIG: SET_CONFIG2,
- SET_CURRENT_STORY: SET_CURRENT_STORY2,
- SET_FILTER: SET_FILTER2,
- SET_GLOBALS: SET_GLOBALS2,
- SET_INDEX: SET_INDEX2,
- SET_STORIES: SET_STORIES2,
- SHARED_STATE_CHANGED: SHARED_STATE_CHANGED2,
- SHARED_STATE_SET: SHARED_STATE_SET2,
- STORIES_COLLAPSE_ALL: STORIES_COLLAPSE_ALL2,
- STORIES_EXPAND_ALL: STORIES_EXPAND_ALL2,
- STORY_ARGS_UPDATED: STORY_ARGS_UPDATED2,
- STORY_CHANGED: STORY_CHANGED2,
- STORY_ERRORED: STORY_ERRORED2,
- STORY_INDEX_INVALIDATED: STORY_INDEX_INVALIDATED2,
- STORY_MISSING: STORY_MISSING2,
- STORY_PREPARED: STORY_PREPARED2,
- STORY_RENDER_PHASE_CHANGED: STORY_RENDER_PHASE_CHANGED2,
- STORY_RENDERED: STORY_RENDERED2,
- STORY_FINISHED: STORY_FINISHED2,
- STORY_SPECIFIED: STORY_SPECIFIED2,
- STORY_THREW_EXCEPTION: STORY_THREW_EXCEPTION2,
- STORY_UNCHANGED: STORY_UNCHANGED2,
- STORY_HOT_UPDATED: STORY_HOT_UPDATED2,
- UPDATE_GLOBALS: UPDATE_GLOBALS2,
- UPDATE_QUERY_PARAMS: UPDATE_QUERY_PARAMS2,
- UPDATE_STORY_ARGS: UPDATE_STORY_ARGS2,
- REQUEST_WHATS_NEW_DATA: REQUEST_WHATS_NEW_DATA2,
- RESULT_WHATS_NEW_DATA: RESULT_WHATS_NEW_DATA2,
- SET_WHATS_NEW_CACHE: SET_WHATS_NEW_CACHE2,
- TOGGLE_WHATS_NEW_NOTIFICATIONS: TOGGLE_WHATS_NEW_NOTIFICATIONS2,
- TELEMETRY_ERROR: TELEMETRY_ERROR2,
- SAVE_STORY_REQUEST: SAVE_STORY_REQUEST2,
- SAVE_STORY_RESPONSE: SAVE_STORY_RESPONSE2,
- ARGTYPES_INFO_REQUEST: ARGTYPES_INFO_REQUEST2,
- ARGTYPES_INFO_RESPONSE: ARGTYPES_INFO_RESPONSE2,
- GHOST_STORIES_REQUEST: GHOST_STORIES_REQUEST2,
- GHOST_STORIES_RESPONSE: GHOST_STORIES_RESPONSE2,
- AI_SETUP_ANALYTICS_RESPONSE: AI_SETUP_ANALYTICS_RESPONSE2,
- AI_SETUP_ANALYTICS_REQUEST: AI_SETUP_ANALYTICS_REQUEST2,
- OPEN_IN_EDITOR_REQUEST: OPEN_IN_EDITOR_REQUEST2,
- OPEN_IN_EDITOR_RESPONSE: OPEN_IN_EDITOR_RESPONSE2,
- MANAGER_INERT_ATTRIBUTE_CHANGED: MANAGER_INERT_ATTRIBUTE_CHANGED2,
- SHARE_ISOLATE_MODE: SHARE_ISOLATE_MODE2,
- AI_PROMPT_NUDGE: AI_PROMPT_NUDGE2,
- SIDEBAR_FILTER_CHANGED: SIDEBAR_FILTER_CHANGED2
- } = events;
-
- // ../../node_modules/es-toolkit/dist/compat/_internal/getSymbols.mjs
- function getSymbols(object) {
- return Object.getOwnPropertySymbols(object).filter((symbol) => Object.prototype.propertyIsEnumerable.call(object, symbol));
- }
-
- // ../../node_modules/es-toolkit/dist/compat/_internal/getTag.mjs
- function getTag(value) {
- return value == null ? value === void 0 ? "[object Undefined]" : "[object Null]" : Object.prototype.toString.call(value);
- }
-
- // ../../node_modules/es-toolkit/dist/compat/_internal/tags.mjs
- var regexpTag = "[object RegExp]", stringTag = "[object String]", numberTag = "[object Number]", booleanTag = "[object Boolean]", argumentsTag = "[object Arguments]", symbolTag = "[object Symbol]", dateTag = "[object Date]", mapTag = "[object Map]", setTag = "[object Set]", arrayTag = "[object Array]", functionTag = "[object Function]", arrayBufferTag = "[object ArrayBuffer]", objectTag = "[object Object]", errorTag = "[object Error]", dataViewTag = "[object DataView]", uint8ArrayTag = "[object Uint8Array]", uint8ClampedArrayTag = "[object Uint8ClampedArray]", uint16ArrayTag = "[object Uint16Array]", uint32ArrayTag = "[object Uint32Array]", bigUint64ArrayTag = "[object BigUint64Array]", int8ArrayTag = "[object Int8Array]", int16ArrayTag = "[object Int16Array]", int32ArrayTag = "[object Int32Array]", bigInt64ArrayTag = "[object BigInt64Array]", float32ArrayTag = "[object Float32Array]", float64ArrayTag = "[object Float64Array]";
-
- // ../../node_modules/es-toolkit/dist/predicate/isPlainObject.mjs
- function isPlainObject(value) {
- if (!value || typeof value != "object")
- return !1;
- let proto = Object.getPrototypeOf(value);
- return proto === null || proto === Object.prototype || Object.getPrototypeOf(proto) === null ? Object.prototype.toString.call(value) === "[object Object]" : !1;
- }
-
- // ../../node_modules/es-toolkit/dist/string/words.mjs
- var CASE_SPLIT_PATTERN = new RegExp("\\p{Lu}?\\p{Ll}+|[0-9]+|\\p{Lu}+(?!\\p{Ll})|\\p{Emoji_Presentation}|\\p{Extended_Pictographic}|\\p{L}+", "gu");
-
- // ../../node_modules/es-toolkit/dist/compat/util/eq.mjs
- function eq(value, other) {
- return value === other || Number.isNaN(value) && Number.isNaN(other);
- }
-
- // ../../node_modules/es-toolkit/dist/predicate/isEqualWith.mjs
- function isEqualWith(a2, b2, areValuesEqual) {
- return isEqualWithImpl(a2, b2, void 0, void 0, void 0, void 0, areValuesEqual);
- }
- function isEqualWithImpl(a2, b2, property, aParent, bParent, stack, areValuesEqual) {
- let result = areValuesEqual(a2, b2, property, aParent, bParent, stack);
- if (result !== void 0)
- return result;
- if (typeof a2 == typeof b2)
- switch (typeof a2) {
- case "bigint":
- case "string":
- case "boolean":
- case "symbol":
- case "undefined":
- return a2 === b2;
- case "number":
- return a2 === b2 || Object.is(a2, b2);
- case "function":
- return a2 === b2;
- case "object":
- return areObjectsEqual(a2, b2, stack, areValuesEqual);
- }
- return areObjectsEqual(a2, b2, stack, areValuesEqual);
- }
- function areObjectsEqual(a2, b2, stack, areValuesEqual) {
- if (Object.is(a2, b2))
- return !0;
- let aTag = getTag(a2), bTag = getTag(b2);
- if (aTag === argumentsTag && (aTag = objectTag), bTag === argumentsTag && (bTag = objectTag), aTag !== bTag)
- return !1;
- switch (aTag) {
- case stringTag:
- return a2.toString() === b2.toString();
- case numberTag: {
- let x2 = a2.valueOf(), y2 = b2.valueOf();
- return eq(x2, y2);
- }
- case booleanTag:
- case dateTag:
- case symbolTag:
- return Object.is(a2.valueOf(), b2.valueOf());
- case regexpTag:
- return a2.source === b2.source && a2.flags === b2.flags;
- case functionTag:
- return a2 === b2;
- }
- stack = stack ?? /* @__PURE__ */ new Map();
- let aStack = stack.get(a2), bStack = stack.get(b2);
- if (aStack != null && bStack != null)
- return aStack === b2;
- stack.set(a2, b2), stack.set(b2, a2);
- try {
- switch (aTag) {
- case mapTag: {
- if (a2.size !== b2.size)
- return !1;
- for (let [key, value] of a2.entries())
- if (!b2.has(key) || !isEqualWithImpl(value, b2.get(key), key, a2, b2, stack, areValuesEqual))
- return !1;
- return !0;
- }
- case setTag: {
- if (a2.size !== b2.size)
- return !1;
- let aValues = Array.from(a2.values()), bValues = Array.from(b2.values());
- for (let i2 = 0; i2 < aValues.length; i2++) {
- let aValue = aValues[i2], index = bValues.findIndex((bValue) => isEqualWithImpl(aValue, bValue, void 0, a2, b2, stack, areValuesEqual));
- if (index === -1)
- return !1;
- bValues.splice(index, 1);
- }
- return !0;
- }
- case arrayTag:
- case uint8ArrayTag:
- case uint8ClampedArrayTag:
- case uint16ArrayTag:
- case uint32ArrayTag:
- case bigUint64ArrayTag:
- case int8ArrayTag:
- case int16ArrayTag:
- case int32ArrayTag:
- case bigInt64ArrayTag:
- case float32ArrayTag:
- case float64ArrayTag: {
- if (typeof Buffer < "u" && Buffer.isBuffer(a2) !== Buffer.isBuffer(b2) || a2.length !== b2.length)
- return !1;
- for (let i2 = 0; i2 < a2.length; i2++)
- if (!isEqualWithImpl(a2[i2], b2[i2], i2, a2, b2, stack, areValuesEqual))
- return !1;
- return !0;
- }
- case arrayBufferTag:
- return a2.byteLength !== b2.byteLength ? !1 : areObjectsEqual(new Uint8Array(a2), new Uint8Array(b2), stack, areValuesEqual);
- case dataViewTag:
- return a2.byteLength !== b2.byteLength || a2.byteOffset !== b2.byteOffset ? !1 : areObjectsEqual(new Uint8Array(a2), new Uint8Array(b2), stack, areValuesEqual);
- case errorTag:
- return a2.name === b2.name && a2.message === b2.message;
- case objectTag: {
- if (!(areObjectsEqual(a2.constructor, b2.constructor, stack, areValuesEqual) || isPlainObject(a2) && isPlainObject(b2)))
- return !1;
- let aKeys = [...Object.keys(a2), ...getSymbols(a2)], bKeys = [...Object.keys(b2), ...getSymbols(b2)];
- if (aKeys.length !== bKeys.length)
- return !1;
- for (let i2 = 0; i2 < aKeys.length; i2++) {
- let propKey = aKeys[i2], aProp = a2[propKey];
- if (!Object.hasOwn(b2, propKey))
- return !1;
- let bProp = b2[propKey];
- if (!isEqualWithImpl(aProp, bProp, propKey, a2, b2, stack, areValuesEqual))
- return !1;
- }
- return !0;
- }
- default:
- return !1;
- }
- } finally {
- stack.delete(a2), stack.delete(b2);
- }
- }
-
- // ../../node_modules/es-toolkit/dist/function/noop.mjs
- function noop() {
- }
-
- // ../../node_modules/es-toolkit/dist/predicate/isEqual.mjs
- function isEqual(a2, b2) {
- return isEqualWith(a2, b2, noop);
- }
-
- // global-externals:storybook/theming/create
- var create_default = __STORYBOOK_THEMING_CREATE__, { create: create3, themes: themes2 } = __STORYBOOK_THEMING_CREATE__;
-
- // src/manager-api/modules/layout.ts
- var { document: document2 } = scope;
- var focusableUIElements = {
- addonPanel: "storybook-panel-region",
- storySearchField: "storybook-explorer-searchfield",
- storyListMenu: "storybook-explorer-menu",
- storyPanelRoot: "storybook-panel-root",
- showAddonPanel: "storybook-show-addon-panel",
- sidebarRegion: "storybook-sidebar-region",
- showSidebar: "storybook-show-sidebar"
- };
-
- // src/manager/components/panel/Panel.tsx
- init_react();
- var TabErrorBoundary = class extends Component {
- constructor(props) {
- super(props), this.state = { hasError: !1 };
- }
- static getDerivedStateFromError() {
- return { hasError: !0 };
- }
- componentDidCatch(error, info) {
- console.error("Error rendering addon panel"), console.error(error), console.error(info.componentStack);
- }
- render() {
- let { hasError } = this.state;
- if (hasError)
- return react_default.createElement(
- EmptyTabContent,
- {
- title: "This addon has errors",
- description: "Check your browser logs and addon code to pinpoint what went wrong. This issue was not caused by Storybook."
- }
- );
- let { children } = this.props;
- return children;
- }
- }, Aside = styled.aside({
- height: "100%",
- display: "flex",
- flexDirection: "column"
- });
- function renderChild(RenderProp) {
- return react_default.createElement(RenderProp, { active: !0 });
- }
- var PreRenderAddons = ({ panels }) => Object.entries(panels).map(([k2, v2]) => react_default.createElement(StatelessTabPanel, { key: k2, name: k2, hasScrollbar: !1 }, react_default.createElement(TabErrorBoundary, { key: k2 }, renderChild(v2.render)))), AddonPanel2 = react_default.memo(({ panels, shortcuts, actions, selectedPanel = null, panelPosition = "right" }) => {
- let { isDesktop, setMobilePanelOpen } = useLayout(), emptyState = react_default.createElement(
- EmptyTabContent,
- {
- title: "Storybook add-ons",
- description: react_default.createElement(react_default.Fragment, null, "Integrate your tools with Storybook to connect workflows and unlock advanced features."),
- footer: react_default.createElement(Link, { href: "https://storybook.js.org/addons?ref=ui", target: "_blank", withArrow: !0 }, react_default.createElement(DocumentIcon, null), " Explore integrations catalog")
- }
- ), tools = useMemo(
- () => react_default.createElement(ActionsWrapper, null, isDesktop ? react_default.createElement(react_default.Fragment, null, react_default.createElement(
- Button,
- {
- key: "position",
- padding: "small",
- variant: "ghost",
- onClick: actions.togglePosition,
- ariaLabel: panelPosition === "bottom" ? "Move addon panel to right" : "Move addon panel to bottom",
- ariaDescription: "Changes the location of the addon panel to the bottom or right of the screen, but does not have any effect on its content.",
- shortcut: shortcuts.panelPosition
- },
- panelPosition === "bottom" ? react_default.createElement(SidebarAltIcon, null) : react_default.createElement(BottomBarIcon, null)
- ), react_default.createElement(
- Button,
- {
- key: "visibility",
- padding: "small",
- variant: "ghost",
- onClick: actions.toggleVisibility,
- ariaLabel: "Hide addon panel",
- shortcut: shortcuts.togglePanel
- },
- react_default.createElement(CloseIcon, null)
- )) : react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- onClick: () => setMobilePanelOpen(!1),
- ariaLabel: "Close addon panel"
- },
- react_default.createElement(CloseIcon, null)
- )),
- [actions, isDesktop, panelPosition, setMobilePanelOpen, shortcuts]
- ), asideRef = useRef(null), { landmarkProps } = useLandmark(
- { "aria-labelledby": "storybook-panel-heading", role: "region" },
- asideRef
- );
- return react_default.createElement(Aside, { ref: asideRef, id: focusableUIElements.addonPanel, ...landmarkProps }, react_default.createElement("h2", { id: "storybook-panel-heading", className: "sb-sr-only" }, "Addon panel"), react_default.createElement(
- StatelessTabsView,
- {
- id: focusableUIElements.storyPanelRoot,
- showToolsWhenEmpty: !0,
- emptyState,
- selected: selectedPanel ?? void 0,
- onSelectionChange: (id) => actions.onSelect(id),
- tools
- },
- react_default.createElement(StatelessTabList, { "aria-label": "Available addons" }, Object.entries(panels).map(([k2, v2]) => react_default.createElement(StatelessTab, { key: k2, name: k2 }, typeof v2.title == "function" ? react_default.createElement(v2.title, null) : v2.title))),
- Object.keys(panels).length ? react_default.createElement(PreRenderAddons, { panels }) : null
- ));
- });
- AddonPanel2.displayName = "AddonPanel";
- var ActionsWrapper = styled.div({
- display: "flex",
- alignItems: "center",
- gap: 6
- });
-
- // src/manager/container/Panel.tsx
- var Panel = (props) => {
- let api = useStorybookApi(), state = useStorybookState(), [story, setStory] = useState(api.getCurrentStoryData());
- useChannel(
- {
- [STORY_PREPARED2]: () => {
- setStory(api.getCurrentStoryData());
- }
- },
- []
- );
- let { parameters, type } = story ?? {}, panelActions = useMemo(
- () => ({
- onSelect: (panel) => api.setSelectedPanel(panel),
- toggleVisibility: async () => {
- let wasPanelShown = api.getIsPanelShown();
- api.togglePanel(), wasPanelShown && await api.focusOnUIElement(focusableUIElements.showAddonPanel) === !1 && document.body.focus();
- },
- togglePosition: () => api.togglePanelPosition()
- }),
- [api]
- ), panels = useMemo(() => {
- let allPanels = api.getElements(Addon_TypesEnum.PANEL);
- if (!allPanels || type !== "story")
- return allPanels;
- let filteredPanels = {};
- return Object.entries(allPanels).forEach(([id, p2]) => {
- let { paramKey } = p2;
- paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable || p2.disabled === !0 || typeof p2.disabled == "function" && p2.disabled(parameters) || (filteredPanels[id] = p2);
- }), filteredPanels;
- }, [api, type, parameters]);
- return react_default.createElement(
- AddonPanel2,
- {
- panels,
- selectedPanel: api.getSelectedPanel(),
- panelPosition: state.layout.panelPosition,
- actions: panelActions,
- shortcuts: api.getShortcutKeys(),
- ...props
- }
- );
- }, Panel_default = Panel;
-
- // src/manager/container/Preview.tsx
- init_react();
- var import_memoizerific2 = __toESM(require_memoizerific(), 1);
-
- // src/manager/components/preview/Preview.tsx
- init_react();
-
- // src/manager/components/preview/FramesRenderer.tsx
- init_react();
-
- // src/manager/components/preview/Viewport.tsx
- init_react();
-
- // src/viewport/useViewport.ts
- init_react();
-
- // src/viewport/constants.ts
- var ADDON_ID = "storybook/viewport", PARAM_KEY = "viewport", PANEL_ID = `${ADDON_ID}/panel`, TOOL_ID = `${ADDON_ID}/tool`;
-
- // src/viewport/defaults.ts
- var MINIMAL_VIEWPORTS = {
- mobile1: {
- name: "Small mobile",
- styles: {
- height: "568px",
- width: "320px"
- },
- type: "mobile"
- },
- mobile2: {
- name: "Large mobile",
- styles: {
- height: "896px",
- width: "414px"
- },
- type: "mobile"
- },
- tablet: {
- name: "Tablet",
- styles: {
- height: "1112px",
- width: "834px"
- },
- type: "tablet"
- },
- desktop: {
- name: "Desktop",
- styles: {
- height: "1024px",
- width: "1280px"
- },
- type: "desktop"
- }
- };
-
- // src/viewport/useViewport.ts
- var URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/, VIEWPORT_MIN_WIDTH = 40, VIEWPORT_MIN_HEIGHT = 40, cycle = (viewports, current, direction = 1) => {
- let keys = Object.keys(viewports), nextIndex = (current ? keys.indexOf(current) : -1) + direction;
- return nextIndex < 0 ? keys[keys.length - 1] : nextIndex >= keys.length ? keys[0] : keys[nextIndex];
- }, normalizeGlobal = (value, defaultIsRotated) => typeof value == "string" ? { value, isRotated: defaultIsRotated } : { value: value?.value, isRotated: value?.isRotated ?? defaultIsRotated }, parseGlobals = (globals, storyGlobals, userGlobals, options2, lastSelectedOption, disable, viewMode) => {
- if (viewMode !== "story")
- return {
- name: "Responsive",
- type: "desktop",
- width: "100%",
- height: "100%",
- value: "100pct-100pct",
- option: void 0,
- isCustom: !1,
- isDefault: !0,
- isLocked: !0,
- isRotated: !1
- };
- let global2 = normalizeGlobal(globals?.[PARAM_KEY]), userGlobal = normalizeGlobal(userGlobals?.[PARAM_KEY]), storyGlobal = normalizeGlobal(storyGlobals?.[PARAM_KEY]), storyHasViewport = PARAM_KEY in storyGlobals, primaryGlobal = storyHasViewport ? storyGlobal : userGlobal, secondaryGlobal = storyHasViewport ? userGlobal : storyGlobal, value = primaryGlobal?.value ?? secondaryGlobal?.value ?? global2?.value, isRotated = primaryGlobal?.isRotated ?? secondaryGlobal?.isRotated ?? global2?.isRotated ?? !1, keys = Object.keys(options2), isLocked = disable || PARAM_KEY in storyGlobals || !keys.length, [match, vx, ux, vy, uy] = value?.match(URL_VALUE_PATTERN) || [];
- if (match) {
- let x2 = ux && ux !== "px" ? vx : Math.max(Number(vx), VIEWPORT_MIN_WIDTH), y2 = uy && uy !== "px" ? vy : Math.max(Number(vy), VIEWPORT_MIN_HEIGHT), width = `${x2}${ux === "pct" ? "%" : ux || "px"}`, height = `${y2}${uy === "pct" ? "%" : uy || "px"}`, selection = lastSelectedOption ? options2[lastSelectedOption] : void 0;
- return {
- name: selection?.name ?? "Custom",
- type: selection?.type ?? "other",
- width: isRotated ? height : width,
- height: isRotated ? width : height,
- value: match,
- option: void 0,
- isCustom: !0,
- isDefault: !1,
- isLocked,
- isRotated
- };
- }
- if (value && keys.length) {
- let { name, styles: styles2, type = "other" } = options2[value] ?? options2[keys[0]];
- return {
- name,
- type,
- width: isRotated ? styles2.height : styles2.width,
- height: isRotated ? styles2.width : styles2.height,
- value,
- option: value,
- isCustom: !1,
- isDefault: !1,
- isLocked,
- isRotated
- };
- }
- return {
- name: "Responsive",
- type: "desktop",
- width: "100%",
- height: "100%",
- value: "100pct-100pct",
- option: void 0,
- isCustom: !1,
- isDefault: !0,
- isLocked,
- isRotated: !1
- };
- }, useViewport = () => {
- let api = useStorybookApi(), { viewMode } = api.getUrlState(), lastSelectedOption = useRef(), parameter = useParameter(PARAM_KEY), [globals, updateGlobals, storyGlobals, userGlobals] = useGlobals(), { options: options2 = MINIMAL_VIEWPORTS, disable = !1 } = parameter || {}, { name, type, width, height, value, option, isCustom, isDefault, isLocked, isRotated } = parseGlobals(
- globals,
- storyGlobals,
- userGlobals,
- options2,
- lastSelectedOption.current,
- disable,
- viewMode
- ), update2 = useCallback(
- (input) => updateGlobals({ [PARAM_KEY]: normalizeGlobal(input, !1) }),
- [updateGlobals]
- ), resize = useCallback(
- (width2, height2) => {
- let w2 = width2.replace(/px$/, "").replace(/%$/, "pct"), h2 = height2.replace(/px$/, "").replace(/%$/, "pct"), value2 = isRotated ? `${h2}-${w2}` : `${w2}-${h2}`;
- update2({ value: value2, isRotated });
- },
- [update2, isRotated]
- );
- return useEffect(() => {
- parameter && option && (Object.hasOwn(options2, option) ? lastSelectedOption.current = option : (lastSelectedOption.current = void 0, PARAM_KEY in storyGlobals || update2({ value: void 0, isRotated: !1 })));
- }, [parameter, storyGlobals, options2, option, update2]), useEffect(() => {
- api.setAddonShortcut(ADDON_ID, {
- label: "Next viewport",
- defaultShortcut: ["alt", "V"],
- actionName: "next",
- action: () => update2({ value: cycle(options2, lastSelectedOption.current), isRotated })
- }), api.setAddonShortcut(ADDON_ID, {
- label: "Previous viewport",
- defaultShortcut: ["alt", "shift", "V"],
- actionName: "previous",
- action: () => update2({ value: cycle(options2, lastSelectedOption.current, -1), isRotated })
- }), api.setAddonShortcut(ADDON_ID, {
- label: "Reset viewport",
- defaultShortcut: ["alt", "control", "V"],
- actionName: "reset",
- action: () => update2({ value: void 0, isRotated: !1 })
- });
- }, [api, update2, options2, isRotated]), useMemo(
- () => ({
- name,
- type,
- width,
- height,
- value,
- option,
- isCustom,
- isDefault,
- isLocked,
- isRotated,
- options: options2,
- lastSelectedOption: lastSelectedOption.current,
- resize,
- reset: () => update2({ value: void 0, isRotated: !1 }),
- rotate: () => update2({ value, isRotated: !isRotated }),
- select: (value2) => update2({ value: value2, isRotated })
- }),
- [
- name,
- type,
- width,
- height,
- value,
- option,
- isCustom,
- isDefault,
- isRotated,
- isLocked,
- options2,
- resize,
- update2
- ]
- );
- };
-
- // src/manager/components/preview/Iframe.tsx
- init_react();
- var StyledIframe = styled.iframe(({ theme }) => ({
- backgroundColor: theme.background.preview,
- display: "block",
- boxSizing: "content-box",
- height: "100%",
- width: "100%",
- border: "none",
- transition: "background-position 0s, visibility 0s",
- backgroundPosition: "-1px -1px, -1px -1px, -1px -1px, -1px -1px",
- margin: "auto"
- }));
- function IFrame(props) {
- let { active, id, title: title2, src, allowFullScreen, scale, ...rest2 } = props, iFrameRef = react_default.useRef(null);
- return react_default.createElement(Zoom.IFrame, { scale, active, iFrameRef }, react_default.createElement(
- StyledIframe,
- {
- "data-is-storybook": active ? "true" : "false",
- onLoad: (e2) => e2.currentTarget.setAttribute("data-is-loaded", "true"),
- id,
- title: title2,
- src,
- allow: "clipboard-write;",
- allowFullScreen,
- ref: iFrameRef,
- ...rest2
- }
- ));
- }
-
- // src/manager/components/preview/NumericInput.tsx
- init_react();
- var Wrapper = styled.div(
- ({ after: after2, before: before2, theme }) => ({
- position: "relative",
- display: "flex",
- alignItems: "center",
- width: "100%",
- height: 32,
- paddingInline: 9,
- fontSize: theme.typography.size.s1,
- color: theme.textMutedColor,
- background: theme.input.background,
- boxShadow: `${theme.input.border} 0 0 0 1px inset`,
- borderRadius: theme.input.borderRadius,
- svg: {
- display: "block"
- },
- input: {
- width: "100%",
- height: "100%",
- minHeight: "100%",
- flex: "1 1 auto",
- paddingInline: 0,
- fontSize: "inherit",
- background: "transparent",
- border: "none",
- boxShadow: "none",
- color: theme.input.color,
- "&:focus, &:focus-visible": {
- boxShadow: "none",
- outline: "none"
- }
- },
- "input:disabled": {
- background: "transparent"
- },
- "input + div": {
- paddingInline: 0,
- fontSize: "inherit"
- },
- "&:has(input:focus-visible)": {
- outline: `2px solid ${theme.color.secondary}`,
- outlineOffset: -2
- },
- "&:has(input:disabled)": {
- background: theme.base === "light" ? theme.color.lighter : theme.input.background,
- cursor: "not-allowed"
- },
- ...after2 && { paddingRight: 2 },
- ...before2 && { paddingLeft: 2 }
- })
- ), NumericInput = forwardRef(function({
- label,
- before: before2,
- after: after2,
- value,
- setValue,
- minValue = -1 / 0,
- maxValue = 1 / 0,
- step = 1,
- unit: fixedUnit,
- baseUnit = fixedUnit,
- className,
- style,
- ...props
- }, forwardedRef) {
- let baseUnitRegex = useMemo(() => baseUnit && new RegExp(`${baseUnit}$`), [baseUnit]), inputId = $bdb11010cef70236$export$f680877a34711e37(), inputRef = useRef(null), [inputValue, setInputValue] = useState(
- baseUnitRegex ? value.replace(baseUnitRegex, "") : value
- ), id = props.id || inputId;
- useImperativeHandle(forwardedRef, () => inputRef.current);
- let parseValue = useCallback(
- (value2) => {
- let [, inputValue2, unit = fixedUnit || baseUnit || ""] = value2.match(/(-?\d+(?:\.\d+)?)(\%|[a-z]{1,4})?$/) || [];
- return { number: Math.max(minValue, Math.min(parseFloat(inputValue2), maxValue)), unit };
- },
- [minValue, maxValue, fixedUnit, baseUnit]
- ), updateValue = useCallback(
- (value2) => {
- let { number, unit } = parseValue(value2);
- Number.isNaN(number) ? setInputValue(value2) : (setInputValue(`${number}${unit === baseUnit ? "" : unit}`), setValue(`${number}${unit}`));
- },
- [parseValue, setValue, baseUnit]
- ), onChange = useCallback(
- (e2) => updateValue(e2.target.value),
- [updateValue]
- ), setInputSelection = useCallback(() => {
- requestAnimationFrame(() => {
- let input = inputRef.current, index = input?.value.search(/[^-\d.]/) ?? -1;
- input && index >= 0 && input.setSelectionRange(index, index);
- });
- }, []), updateInputValue = useCallback(
- () => setInputValue(baseUnitRegex ? value.replace(baseUnitRegex, "") : value),
- [value, baseUnitRegex]
- );
- return useEffect(() => {
- inputRef.current !== document.activeElement && updateInputValue();
- }, [updateInputValue]), useEffect(() => {
- let handleKeyDown = (e2) => {
- if (e2.key !== "ArrowUp" && e2.key !== "ArrowDown")
- return;
- e2.preventDefault();
- let { number, unit } = parseValue(inputValue);
- if (!Number.isNaN(number)) {
- let delta = e2.shiftKey ? step * 10 : step;
- updateValue(`${e2.key === "ArrowUp" ? number + delta : number - delta}${unit}`), setInputSelection();
- }
- }, input = inputRef.current;
- if (input)
- return input.addEventListener("keydown", handleKeyDown), () => input.removeEventListener("keydown", handleKeyDown);
- }, [inputValue, parseValue, setInputSelection, step, updateValue]), react_default.createElement(Wrapper, { after: after2, before: before2, className, style }, before2 && react_default.createElement("div", null, before2), label && react_default.createElement("label", { htmlFor: id, className: "sb-sr-only" }, label), react_default.createElement(
- Form.Input,
- {
- ...props,
- id,
- ref: inputRef,
- value: inputValue,
- suffix: fixedUnit || inputValue && baseUnit,
- onChange,
- onFocus: setInputSelection,
- onBlur: updateInputValue
- }
- ), after2 && react_default.createElement("div", null, after2));
- });
-
- // src/manager/components/preview/Viewport.tsx
- var ViewportWrapper = styled.div(({ active, isDefault, theme }) => ({
- gridArea: "1 / 1",
- alignSelf: "start",
- justifySelf: "start",
- display: active ? "inline-flex" : "none",
- flexDirection: "column",
- gap: 6,
- width: "100%",
- height: "100%",
- paddingTop: isDefault ? 0 : 6,
- paddingBottom: isDefault ? 0 : 40,
- paddingInline: isDefault ? 0 : 40,
- '&:has([data-size-input="width"]:focus-visible)': {
- "[data-dragging]": {
- borderRightColor: theme.color.secondary,
- boxShadow: `4px 0 5px -2px ${theme.background.hoverable}`
- }
- },
- '&:has([data-size-input="height"]:focus-visible)': {
- "[data-dragging]": {
- borderBottomColor: theme.color.secondary,
- boxShadow: `0 4px 5px -2px ${theme.background.hoverable}`
- }
- }
- })), ViewportControls = styled.div({
- display: "flex",
- gap: 6
- }), ViewportDimensions = styled.div({
- display: "flex",
- gap: 2
- }), FrameWrapper = styled.div(({ isDefault, "data-dragging": dragging, theme }) => ({
- position: "relative",
- minWidth: VIEWPORT_MIN_WIDTH,
- minHeight: VIEWPORT_MIN_HEIGHT,
- boxSizing: "content-box",
- // we're sizing the contents, not the box itself
- border: `1px solid ${theme.button.border}`,
- borderWidth: isDefault ? 0 : 1,
- borderRadius: isDefault ? 0 : 4,
- transition: "border-color 0.2s, box-shadow 0.2s",
- '&:has([data-side="right"]:hover), &[data-dragging="right"]': {
- borderRightColor: theme.color.secondary,
- boxShadow: `4px 0 5px -2px ${theme.background.hoverable}`,
- '[data-side="right"]::after': {
- opacity: 1
- }
- },
- '&:has([data-side="bottom"]:hover), &[data-dragging="bottom"]': {
- borderBottomColor: theme.color.secondary,
- boxShadow: `0 4px 5px -2px ${theme.background.hoverable}`,
- '[data-side="bottom"]::after': {
- opacity: 1
- }
- },
- '&:has([data-side="both"]:hover), &[data-dragging="both"]': {
- boxShadow: `3px 3px 5px -2px ${theme.background.hoverable}`,
- "&::after, [data-side]::after": {
- opacity: 1
- }
- },
- "&::after": {
- content: '""',
- display: "block",
- position: "absolute",
- pointerEvents: "none",
- bottom: 1,
- right: 1,
- width: 12,
- height: 12,
- opacity: 0,
- transition: "opacity 0.2s",
- background: `linear-gradient(to top left,
- rgba(0,0,0,0) 0%,
- rgba(0,0,0,0) calc(25% - 1px),
- ${theme.color.secondary} 25%,
- rgba(0,0,0,0) calc(25% + 1px),
- rgba(0,0,0,0) calc(45% - 1px),
- ${theme.color.secondary} 45%,
- rgba(0,0,0,0) calc(45% + 1px),
- rgba(0,0,0,0) 100%)`
- },
- iframe: {
- pointerEvents: dragging === "none" ? "auto" : "none"
- }
- })), DragHandle2 = styled.div(
- { display: "none" },
- ({ theme, isDefault }) => !isDefault && {
- display: "block",
- position: "absolute",
- fontSize: 10,
- '&[data-side="both"]': {
- right: -12,
- bottom: -12,
- width: 25,
- height: 25,
- cursor: "nwse-resize"
- },
- '&[data-side="bottom"]': {
- left: 0,
- right: 13,
- bottom: -12,
- height: 20,
- cursor: "row-resize",
- "&::after": {
- content: "attr(data-value)",
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- borderRadius: 4,
- backgroundColor: theme.background.hoverable,
- padding: "2px 4px",
- opacity: 0,
- transition: "opacity 0.2s"
- }
- },
- '&[data-side="right"]': {
- top: 0,
- right: -12,
- bottom: 13,
- width: 20,
- cursor: "col-resize",
- "&::after": {
- content: "attr(data-value)",
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- borderRadius: 4,
- backgroundColor: theme.background.hoverable,
- padding: "2px 4px",
- opacity: 0,
- transition: "opacity 0.2s"
- }
- }
- }
- ), ScrollEdge = styled.div({
- position: "absolute",
- pointerEvents: "none",
- width: 0,
- height: 0,
- '&[data-edge="right"]': {
- right: -40,
- height: "100%"
- },
- '&[data-edge="bottom"]': {
- bottom: -40,
- width: "100%"
- },
- '&[data-edge="both"]': {
- right: -40,
- bottom: -40
- }
- }), SizeInput = styled(NumericInput)({
- width: 85,
- height: 28,
- minHeight: 28
- }), Viewport = ({
- active,
- id,
- src,
- scale
- }) => {
- let { width, height, isCustom, isDefault, lastSelectedOption, resize, rotate, select } = useViewport(), [dragging, setDragging] = useState("none"), targetRef = useRef(null), dragRefX = useRef(null), dragRefY = useRef(null), dragRefXY = useRef(null), dragSide = useRef("none"), dragStart = useRef(), dragScrollTarget = useRef(null);
- useEffect(() => {
- let onDrag = (e2) => {
- if (!(!targetRef.current || !dragStart.current)) {
- if (dragRefX.current && (dragSide.current === "both" || dragSide.current === "right")) {
- let newWidth = Math.max(VIEWPORT_MIN_WIDTH, dragStart.current[0] + e2.clientX);
- targetRef.current.style.width = `${newWidth}px`, dragRefX.current.dataset.value = `${Math.round(newWidth / scale)}`;
- }
- if (dragRefY.current && (dragSide.current === "both" || dragSide.current === "bottom")) {
- let newHeight = Math.max(VIEWPORT_MIN_HEIGHT, dragStart.current[1] + e2.clientY);
- targetRef.current.style.height = `${newHeight}px`, dragRefY.current.dataset.value = `${Math.round(newHeight / scale)}`;
- }
- dragScrollTarget.current && dragScrollTarget.current.scrollIntoView({ block: "center", inline: "center" });
- }
- }, onEnd = () => {
- if (window.removeEventListener("mouseup", onEnd), window.removeEventListener("mousemove", onDrag), setDragging("none"), dragStart.current = void 0, targetRef.current) {
- let { clientWidth, clientHeight, dataset } = targetRef.current, scale2 = Number(dataset.scale) || 1;
- resize(`${Math.round(clientWidth / scale2)}px`, `${Math.round(clientHeight / scale2)}px`);
- }
- }, onStart = (e2) => {
- e2.preventDefault(), window.addEventListener("mouseup", onEnd), window.addEventListener("mousemove", onDrag), dragSide.current = e2.currentTarget.dataset.side, dragStart.current = [
- (targetRef.current?.clientWidth ?? 0) - e2.clientX,
- (targetRef.current?.clientHeight ?? 0) - e2.clientY
- ], dragScrollTarget.current = targetRef.current?.querySelector(
- `[data-edge="${dragSide.current}"]`
- ), setDragging(dragSide.current);
- }, handles = [dragRefX.current, dragRefY.current, dragRefXY.current];
- return handles.forEach((el) => el?.addEventListener("mousedown", onStart)), () => handles.forEach((el) => el?.removeEventListener("mousedown", onStart));
- }, [resize, scale]);
- let dimensions = useMemo(() => {
- let [, nx = "", ux = "px"] = width.match(/^(\d+(?:\.\d+)?)(\%|[a-z]{1,4})?$/) || [], [, ny = "", uy = "px"] = height.match(/^(\d+(?:\.\d+)?)(\%|[a-z]{1,4})?$/) || [];
- return {
- frame: {
- width: `calc(${width} * ${scale})`,
- height: `calc(${height} * ${scale})`
- },
- display: {
- width: `${nx || width}${ux === "px" ? "" : ux}`,
- height: `${ny || height}${uy === "px" ? "" : uy}`
- },
- locked: {
- width: !nx || !ny,
- height: !nx || !ny
- }
- };
- }, [width, height, scale]);
- return react_default.createElement(ViewportWrapper, { key: id, active, isDefault }, !isDefault && react_default.createElement(ViewportControls, null, react_default.createElement(ViewportDimensions, null, react_default.createElement(
- SizeInput,
- {
- "aria-label": "Viewport width",
- "data-size-input": "width",
- label: "Viewport width",
- before: react_default.createElement(ActionList.Action, { size: "small", readOnly: !0, "aria-hidden": !0 }, "W"),
- value: width,
- minValue: 0,
- setValue: (value) => resize(value, height),
- disabled: dimensions.locked.width
- }
- ), react_default.createElement(
- ActionList.Button,
- {
- key: "viewport-rotate",
- size: "small",
- padding: "small",
- ariaLabel: "Rotate viewport",
- onClick: rotate
- },
- react_default.createElement(TransferIcon, null)
- ), react_default.createElement(
- SizeInput,
- {
- "aria-label": "Viewport height",
- "data-size-input": "height",
- label: "Viewport height",
- before: react_default.createElement(ActionList.Action, { size: "small", readOnly: !0, "aria-hidden": !0 }, "H"),
- value: height,
- minValue: 0,
- setValue: (value) => resize(width, value),
- disabled: dimensions.locked.height
- }
- ), isCustom && lastSelectedOption && react_default.createElement(
- ActionList.Button,
- {
- key: "viewport-restore",
- size: "small",
- padding: "small",
- ariaLabel: "Restore viewport",
- onClick: () => select(lastSelectedOption)
- },
- react_default.createElement(UndoIcon, null)
- ))), react_default.createElement(
- FrameWrapper,
- {
- isDefault,
- "data-dragging": dragging,
- "data-scale": scale,
- style: isDefault ? { height: "100%", width: "100%" } : dimensions.frame,
- ref: targetRef
- },
- react_default.createElement(
- "div",
- {
- style: {
- height: `${1 / scale * 100}%`,
- width: `${1 / scale * 100}%`,
- transform: scale !== 1 ? `scale(${scale})` : "none",
- transformOrigin: "top left"
- }
- },
- react_default.createElement(IFrame, { allowFullScreen: !0, active, key: id, id, title: id, src, scale: 1 }),
- !isDefault && react_default.createElement(react_default.Fragment, null, react_default.createElement(ScrollEdge, { "data-edge": "right" }), react_default.createElement(ScrollEdge, { "data-edge": "bottom" }), react_default.createElement(ScrollEdge, { "data-edge": "both" }))
- ),
- !dimensions.locked.width && react_default.createElement(
- DragHandle2,
- {
- ref: dragRefX,
- isDefault,
- "data-side": "right",
- "data-value": dimensions.display.width
- }
- ),
- !dimensions.locked.height && react_default.createElement(
- DragHandle2,
- {
- ref: dragRefY,
- isDefault,
- "data-side": "bottom",
- "data-value": dimensions.display.height
- }
- ),
- !dimensions.locked.width && !dimensions.locked.height && react_default.createElement(DragHandle2, { ref: dragRefXY, isDefault, "data-side": "both" })
- ));
- };
-
- // src/manager/components/preview/FramesRenderer.tsx
- var getActive = (refId, refs) => refId && refs[refId] ? `storybook-ref-${refId}` : "storybook-preview-iframe", SkipToSidebarLink = styled(Button)(({ theme }) => ({
- display: "none",
- "@media (min-width: 600px)": {
- position: "absolute",
- display: "block",
- top: 10,
- right: 15,
- padding: "10px 15px",
- fontSize: theme.typography.size.s1,
- transform: "translateY(-100px)",
- "&:focus": {
- transform: "translateY(0)",
- zIndex: 1
- }
- }
- })), whenSidebarIsVisible = ({ api, state }) => ({
- isFullscreen: api.getIsFullscreen(),
- isNavShown: api.getIsNavShown(),
- selectedStoryId: state.storyId
- }), styles = {
- '#root [data-is-storybook="false"]': {
- display: "none"
- },
- '#root [data-is-storybook="true"]': {
- display: "block"
- }
- }, FramesRenderer = ({
- api,
- refs,
- scale,
- viewMode = "story",
- refId,
- queryParams = {},
- storyId = "*"
- }) => {
- let version3 = refs[refId]?.version, active = getActive(refId, refs), { current: frames } = useRef({}), refsToLoad = Object.values(refs).filter((ref) => ref.type === "auto-inject" || ref.id === refId, {});
- return frames["storybook-preview-iframe"] || (frames["storybook-preview-iframe"] = api.getStoryHrefs(storyId, {
- queryParams: { ...queryParams, ...version3 && { version: version3 } },
- refId,
- viewMode
- }).previewHref), refsToLoad.forEach((ref) => {
- let id = `storybook-ref-${ref.id}`;
- frames[id]?.startsWith(`${ref.url.replace(/\/?$/, "/")}iframe.html`) || (frames[id] = api.getStoryHrefs(storyId, {
- queryParams: { ...queryParams, ...version3 && { version: version3 } },
- refId: ref.id,
- viewMode
- }).previewHref);
- }), react_default.createElement(Fragment, null, react_default.createElement(Global, { styles }), react_default.createElement(Consumer, { filter: whenSidebarIsVisible }, ({ isFullscreen, isNavShown, selectedStoryId }) => isFullscreen || !isNavShown || !selectedStoryId ? null : react_default.createElement(SkipToSidebarLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: `#${selectedStoryId}`, tabIndex: 0 }, "Skip to sidebar"))), Object.entries(frames).map(([id, src]) => react_default.createElement(Viewport, { key: id, id, src, active: id === active, scale })));
- };
-
- // src/manager/components/preview/Toolbar.tsx
- init_react();
- var fullScreenMapper = ({ api, state }) => ({
- toggle: api.toggleFullscreen,
- isFullscreen: api.getIsFullscreen(),
- shortcut: api.getShortcutKeys().fullScreen,
- hasPanel: Object.keys(api.getElements(Addon_TypesEnum.PANEL)).length > 0,
- singleStory: state.singleStory
- }), fullScreenTool = {
- title: "fullscreen",
- id: "fullscreen",
- type: types.TOOL,
- // @ts-expect-error (non strict)
- match: (p2) => ["story", "docs"].includes(p2.viewMode),
- render: () => {
- let { isMobile: isMobile2 } = useLayout();
- return isMobile2 ? null : react_default.createElement(Consumer, { filter: fullScreenMapper }, ({ toggle, isFullscreen, shortcut, hasPanel, singleStory }) => (!singleStory || singleStory && hasPanel) && react_default.createElement(
- Button,
- {
- key: "full",
- padding: "small",
- variant: "ghost",
- onClick: () => toggle(),
- ariaLabel: isFullscreen ? "Exit full screen" : "Enter full screen",
- shortcut
- },
- isFullscreen ? react_default.createElement(CloseIcon, null) : react_default.createElement(ExpandIcon, null)
- ));
- }
- }, ToolbarComp = react_default.memo(function({
- isShown,
- tools,
- toolsExtra,
- tabs,
- tabState
- }) {
- let sectionRef = useRef(null), { landmarkProps } = useLandmark(
- { "aria-labelledby": "sb-preview-toolbar-title", role: "region" },
- sectionRef
- );
- return isShown && (tabs || tools || toolsExtra) ? react_default.createElement(
- StyledSection,
- {
- className: "sb-bar",
- key: "toolbar",
- "data-testid": "sb-preview-toolbar",
- ref: sectionRef,
- ...landmarkProps
- },
- react_default.createElement("h2", { id: "sb-preview-toolbar-title", className: "sb-sr-only" }, "Toolbar"),
- tabs.length > 1 ? react_default.createElement(react_default.Fragment, null, react_default.createElement(TabList, { state: tabState }), react_default.createElement(Separator, null)) : null,
- react_default.createElement(StyledToolbar, null, react_default.createElement(Tools, { key: "left", list: tools }), react_default.createElement(Tools, { key: "right", list: toolsExtra }))
- ) : null;
- }), Tools = react_default.memo(function({ list }) {
- return react_default.createElement(ToolGroup, null, list.filter(Boolean).map(({ render: Render, id, ...t2 }, index) => (
- // @ts-expect-error (Converted from ts-ignore)
- react_default.createElement(Render, { key: id || t2.key || `f-${index}` })
- )));
- });
- function toolbarItemHasBeenExcluded(item, entry) {
- let parameters = entry?.type === "story" && entry?.prepared ? entry?.parameters : {}, toolbarItemsFromStoryParameters = "toolbar" in parameters ? parameters.toolbar : void 0, { toolbar: toolbarItemsFromAddonsConfig } = addons.getConfig(), toolbarItems = merge(
- toolbarItemsFromAddonsConfig || {},
- toolbarItemsFromStoryParameters || {}
- );
- return toolbarItems ? !!toolbarItems[item?.id]?.hidden : !1;
- }
- function filterToolsSide(tools, entry, viewMode, location2, path, tabId) {
- let filter = (item) => item && (!item.match || item.match({
- storyId: entry?.id,
- refId: entry?.refId,
- viewMode,
- location: location2,
- path,
- tabId
- })) && !toolbarItemHasBeenExcluded(item, entry);
- return tools.filter(filter);
- }
- var StyledSection = styled.section(({ theme }) => ({
- position: "relative",
- display: "flex",
- alignItems: "center",
- color: theme.barTextColor,
- width: "100%",
- flexShrink: 0,
- overflowX: "auto",
- overflowY: "hidden",
- boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
- background: theme.barBg,
- scrollbarColor: `${theme.barTextColor} ${theme.barBg}`,
- scrollbarWidth: "thin",
- zIndex: 4
- })), StyledToolbar = styled(AbstractToolbar)({
- flex: 1,
- display: "flex",
- justifyContent: "space-between",
- flexWrap: "nowrap",
- flexShrink: 0,
- height: 40,
- marginInline: 10,
- gap: 30
- }), ToolGroup = styled.div({
- display: "flex",
- whiteSpace: "nowrap",
- flexBasis: "auto",
- gap: 6,
- alignItems: "center"
- });
-
- // src/manager/components/preview/Wrappers.tsx
- init_react();
-
- // src/manager/components/preview/utils/components.ts
- var PreviewContainer = styled.div({
- display: "flex",
- flexDirection: "column",
- width: "100%",
- height: "100%",
- overflow: "hidden"
- }), FrameWrap = styled.main({
- overflow: "auto",
- width: "100%",
- zIndex: 3,
- background: "transparent",
- flex: 1
- }), CanvasWrap = styled.div(
- {
- alignContent: "center",
- alignItems: "center",
- justifyContent: "center",
- justifyItems: "center",
- overflow: "auto",
- gridTemplateColumns: "100%",
- gridTemplateRows: "100%",
- position: "relative",
- minWidth: "100%",
- minHeight: "100%"
- },
- ({ show }) => ({ display: show ? "grid" : "none" })
- ), UnstyledLink = styled(Link2)({
- color: "inherit",
- textDecoration: "inherit",
- display: "inline-block"
- }), DesktopOnly = styled.span({
- // Hides full screen icon at mobile breakpoint defined in app.js
- "@media (max-width: 599px)": {
- display: "none"
- }
- }), IframeWrapper = styled.div(({ theme }) => ({
- alignContent: "center",
- alignItems: "center",
- justifyContent: "center",
- justifyItems: "center",
- overflow: "auto",
- display: "grid",
- gridTemplateColumns: "100%",
- gridTemplateRows: "100%",
- position: "relative",
- width: "100%",
- height: "100%"
- })), LoaderWrapper = styled.div(({ theme }) => ({
- position: "absolute",
- top: 0,
- left: 0,
- bottom: 0,
- right: 0,
- background: theme.background.preview,
- zIndex: 1
- }));
-
- // src/manager/components/preview/Wrappers.tsx
- var ApplyWrappers = ({
- wrappers,
- id,
- storyId,
- children
- }) => react_default.createElement(Fragment, null, wrappers.reduceRight(
- (acc, wrapper, index) => react_default.createElement(wrapper.render, { index, children: acc, id, storyId }),
- children
- )), defaultWrappers = [
- {
- id: "iframe-wrapper",
- type: Addon_TypesEnum.PREVIEW,
- render: (p2) => react_default.createElement(IframeWrapper, { id: "storybook-preview-wrapper" }, p2.children)
- }
- ];
-
- // src/manager/components/preview/tools/zoom.tsx
- init_react();
-
- // src/manager/components/Shortcut.tsx
- init_react();
- var Wrapper2 = styled.span(({ theme }) => ({
- display: "inline-flex",
- alignItems: "center",
- justifyContent: "center",
- height: 16,
- fontSize: "11px",
- fontWeight: theme.typography.weight.regular,
- background: theme.base === "light" ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
- color: theme.base === "light" ? theme.color.dark : theme.textMutedColor,
- borderRadius: 2,
- userSelect: "none",
- pointerEvents: "none",
- padding: "0 4px"
- })), Key = styled.kbd(({ theme }) => ({
- padding: 0,
- fontFamily: theme.typography.fonts.base,
- verticalAlign: "middle",
- "& + &": {
- marginLeft: 6
- }
- })), Shortcut = ({ keys }) => react_default.createElement(Wrapper2, null, keys.map((key) => react_default.createElement(Key, { key }, shortcutToHumanString([key]))));
-
- // src/manager/components/preview/tools/zoom.tsx
- var ZOOM_LEVELS = [0.25, 0.5, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 2, 3, 4, 8], INITIAL_ZOOM_LEVEL = 1, ZoomButton = styled(ToggleButton)({
- minWidth: 48
- }), ZoomResetButton = styled(ActionList.Button)(
- ({ $isInitialValue }) => ({
- visibility: $isInitialValue ? "hidden" : void 0
- })
- ), Context = createContext({ value: INITIAL_ZOOM_LEVEL, set: (v2) => {
- } }), ZoomInput = styled(NumericInput)({
- input: {
- width: 100
- }
- }), ZoomConsumer = Context.Consumer, ZoomProvider = class extends Component {
- constructor() {
- super(...arguments);
- this.state = {
- value: INITIAL_ZOOM_LEVEL
- };
- this.set = (value) => this.setState({ value });
- }
- render() {
- let { children, shouldScale } = this.props, { set } = this, { value } = this.state;
- return react_default.createElement(Context.Provider, { value: { value: shouldScale ? value : INITIAL_ZOOM_LEVEL, set } }, children);
- }
- }, Zoom2 = memo(function({ value, zoomIn, zoomOut, zoomTo, zoomBy }) {
- let inputRef = useRef(null);
- return react_default.createElement(
- PopoverProvider,
- {
- padding: "none",
- onVisibleChange: (isVisible) => {
- isVisible && requestAnimationFrame(() => inputRef.current?.select());
- },
- popover: react_default.createElement(react_default.Fragment, null, react_default.createElement(ActionList, null, react_default.createElement(ActionList.Item, null, react_default.createElement(
- ZoomInput,
- {
- "aria-label": "Zoom percentage",
- ref: inputRef,
- unit: "%",
- before: react_default.createElement(ActionList.Button, { size: "small", padding: "small", readOnly: !0, "aria-hidden": !0 }, react_default.createElement(ZoomIcon, null)),
- after: react_default.createElement(
- ZoomResetButton,
- {
- size: "small",
- padding: "small",
- $isInitialValue: value === INITIAL_ZOOM_LEVEL,
- onClick: () => zoomTo(INITIAL_ZOOM_LEVEL),
- ariaLabel: "Reset zoom",
- "aria-hidden": value === INITIAL_ZOOM_LEVEL
- },
- react_default.createElement(UndoIcon, null)
- ),
- value: `${Math.round(value * 100)}%`,
- minValue: 1,
- maxValue: 800,
- setValue: (value2) => {
- let zoomLevel = parseInt(value2, 10) / 100;
- Number.isNaN(zoomLevel) || zoomTo(zoomLevel);
- }
- }
- ))), react_default.createElement(ActionList, null, react_default.createElement(ActionList.Item, null, react_default.createElement(
- ActionList.Action,
- {
- onClick: zoomIn,
- ariaLabel: "Zoom in",
- disabled: value >= ZOOM_LEVELS.at(-1)
- },
- react_default.createElement(ActionList.Text, null, "Zoom in"),
- react_default.createElement(Shortcut, { keys: ["alt", "+"] })
- )), react_default.createElement(ActionList.Item, null, react_default.createElement(
- ActionList.Action,
- {
- onClick: zoomOut,
- ariaLabel: "Zoom out",
- disabled: value <= ZOOM_LEVELS.at(0)
- },
- react_default.createElement(ActionList.Text, null, "Zoom out"),
- react_default.createElement(Shortcut, { keys: ["alt", "-"] })
- )), react_default.createElement(ActionList.Item, { active: value === 0.5 }, react_default.createElement(ActionList.Action, { onClick: () => zoomTo(0.5), ariaLabel: "Zoom to 50%" }, react_default.createElement(ActionList.Text, null, "50%"))), react_default.createElement(ActionList.Item, { active: value === 1 }, react_default.createElement(ActionList.Action, { onClick: () => zoomTo(1), ariaLabel: "Zoom to 100%" }, react_default.createElement(ActionList.Text, null, "100%"), react_default.createElement(Shortcut, { keys: ["alt", "0"] }))), react_default.createElement(ActionList.Item, { active: value === 2 }, react_default.createElement(ActionList.Action, { onClick: () => zoomTo(2), ariaLabel: "Zoom to 200%" }, "200%"))))
- },
- react_default.createElement(
- ZoomButton,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "Change zoom level",
- pressed: value !== INITIAL_ZOOM_LEVEL,
- onKeyDown: (e2) => {
- e2.key === "ArrowDown" ? (zoomBy(e2.getModifierState("Shift") ? -0.1 : -0.01), e2.preventDefault()) : e2.key === "ArrowUp" ? (zoomBy(e2.getModifierState("Shift") ? 0.1 : 0.01), e2.preventDefault()) : e2.key === "PageDown" ? (zoomOut(), e2.preventDefault()) : e2.key === "PageUp" ? (zoomIn(), e2.preventDefault()) : e2.key === "Home" ? (zoomTo(ZOOM_LEVELS[ZOOM_LEVELS.length - 1]), e2.preventDefault()) : e2.key === "End" && (zoomTo(ZOOM_LEVELS[0]), e2.preventDefault());
- },
- onWheel: (e2) => {
- e2.deltaY < 0 ? zoomIn() : e2.deltaY > 0 && zoomOut(), e2.preventDefault();
- }
- },
- Math.round(value * 100),
- "%"
- )
- );
- }), ZoomWrapper = memo(function({ set, value }) {
- let api = useStorybookApi(), zoomIn = useCallback(() => {
- let higherZoomLevel = ZOOM_LEVELS.find((level) => level > value);
- higherZoomLevel && set(higherZoomLevel);
- }, [set, value]), zoomOut = useCallback(() => {
- let lowerZoomLevel = ZOOM_LEVELS.findLast((level) => level < value);
- lowerZoomLevel && set(lowerZoomLevel);
- }, [set, value]), zoomBy = useCallback(
- (delta) => {
- let min = ZOOM_LEVELS[0], max = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
- set(Math.max(min, Math.min(max, value + delta)));
- },
- [set, value]
- ), zoomTo = useCallback(
- (value2) => {
- set(value2);
- },
- [set]
- );
- return useEffect(() => {
- api.setAddonShortcut("zoom", {
- label: "Zoom to 100%",
- defaultShortcut: ["alt", "0"],
- actionName: "zoomReset",
- action: () => zoomTo(1)
- }), api.setAddonShortcut("zoom", {
- label: "Zoom in",
- defaultShortcut: ["alt", "="],
- actionName: "zoomIn",
- action: zoomIn
- }), api.setAddonShortcut("zoom", {
- label: "Zoom in",
- defaultShortcut: ["alt", "+"],
- actionName: "zoomPlus",
- action: zoomIn
- }), api.setAddonShortcut("zoom", {
- label: "Zoom out",
- defaultShortcut: ["alt", "-"],
- actionName: "zoomOut",
- action: zoomOut
- });
- }, [api, zoomIn, zoomOut, zoomTo]), react_default.createElement(Zoom2, { key: "zoom", value, zoomIn, zoomOut, zoomTo, zoomBy });
- }), zoomTool = {
- title: "zoom",
- id: "zoom",
- type: types.TOOL,
- match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
- render: () => react_default.createElement(ZoomConsumer, null, (zoomContext) => react_default.createElement(ZoomWrapper, { ...zoomContext }))
- };
-
- // src/manager/components/preview/Preview.tsx
- var canvasMapper = ({ state, api }) => ({
- api,
- storyId: state.storyId,
- refId: state.refId,
- viewMode: state.viewMode,
- customCanvas: api.renderPreview,
- queryParams: state.customQueryParams,
- getElements: api.getElements,
- entry: api.getData(state.storyId, state.refId),
- previewInitialized: state.previewInitialized,
- refs: state.refs
- }), createCanvasTab = () => ({
- id: "canvas",
- type: types.TAB,
- title: "Canvas",
- route: ({ storyId, refId }) => refId ? `/story/${refId}_${storyId}` : `/story/${storyId}`,
- match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
- render: () => null
- }), Preview = react_default.memo(function(props) {
- let {
- api,
- id: previewId,
- options: options2,
- viewMode,
- storyId,
- entry = void 0,
- description,
- baseUrl,
- withLoader = !0,
- tools,
- toolsExtra,
- tabs,
- wrappers,
- tabId
- } = props, tabState = useTabsState({
- selected: tabId ?? "canvas",
- onSelectionChange: (key) => {
- api.applyQueryParams({ tab: key === "canvas" ? void 0 : key });
- },
- tabs: tabs.map((tab, index) => ({
- id: tab.id ?? `tab-${index}`,
- title: tab.title,
- isDisabled: !!tab.disabled,
- children: () => tab.render({ active: !0 })
- }))
- });
- tabs.length > 1 && deprecate("Addon tabs are deprecated and will be removed in Storybook 11.");
- let tabContent = tabs.find((tab) => tab.id === tabId)?.render, shouldScale = viewMode === "story", { showToolbar } = options2, customisedShowToolbar = api.getShowToolbarWithCustomisations(showToolbar), previousStoryId = useRef(storyId);
- useEffect(() => {
- if (entry && viewMode) {
- if (storyId === previousStoryId.current)
- return;
- if (previousStoryId.current = storyId, viewMode.match(/docs|story/)) {
- let { refId, id } = entry;
- api.emit(SET_CURRENT_STORY, {
- storyId: id,
- viewMode,
- options: { target: refId }
- });
- }
- }
- }, [entry, viewMode, storyId, api]);
- let mainRef = useRef(null), { landmarkProps } = useLandmark(
- { "aria-labelledby": "main-preview-heading", role: "main" },
- mainRef
- );
- return react_default.createElement(Fragment, null, previewId === "main" && react_default.createElement(W, { key: "description" }, react_default.createElement("title", null, description)), react_default.createElement(ZoomProvider, { shouldScale }, react_default.createElement(PreviewContainer, null, react_default.createElement(
- ToolbarComp,
- {
- key: "tools",
- isShown: customisedShowToolbar,
- tabs,
- tabState,
- tools,
- toolsExtra
- }
- ), react_default.createElement(FrameWrap, { ref: mainRef, ...landmarkProps }, react_default.createElement("h2", { id: "main-preview-heading", className: "sb-sr-only" }, "Main preview area"), tabContent && react_default.createElement(IframeWrapper, null, tabContent({ active: !0 })), react_default.createElement(CanvasWrap, { show: !tabId || tabId === "canvas" }, react_default.createElement(Canvas, { withLoader, baseUrl, wrappers }))))));
- });
- var Canvas = ({ baseUrl, withLoader, wrappers }) => react_default.createElement(Consumer, { filter: canvasMapper }, ({
- api,
- entry,
- refs,
- customCanvas,
- storyId,
- refId,
- viewMode,
- queryParams,
- previewInitialized
- }) => {
- let id = "canvas", [progress, setProgress] = useState(void 0);
- useEffect(() => {
- if (scope.CONFIG_TYPE === "DEVELOPMENT")
- try {
- addons.getChannel().on(PREVIEW_BUILDER_PROGRESS, (options2) => {
- setProgress(options2);
- });
- } catch {
- }
- }, []);
- let refLoading = !!refs[refId] && !refs[refId].previewInitialized, isBuilding = !(progress?.value === 1 || progress === void 0), rootLoading = !refId && (!previewInitialized || isBuilding), isLoading = entry && refLoading || rootLoading;
- return react_default.createElement(ZoomConsumer, null, ({ value: scale }) => react_default.createElement(react_default.Fragment, null, withLoader && isLoading && react_default.createElement(LoaderWrapper, null, react_default.createElement(Loader, { id: "preview-loader", role: "progressbar", progress })), react_default.createElement(ApplyWrappers, { id, storyId, viewMode, wrappers }, customCanvas ? customCanvas(storyId, viewMode, id, baseUrl, scale, queryParams) : react_default.createElement(
- FramesRenderer,
- {
- api,
- refs,
- scale,
- entry,
- viewMode,
- refId,
- queryParams,
- storyId
- }
- ))));
- });
- function filterTabs(panels, parameters) {
- let { previewTabs } = addons.getConfig(), parametersTabs = parameters ? parameters.previewTabs : void 0;
- if (previewTabs || parametersTabs) {
- let tabs = merge(previewTabs || {}, parametersTabs || {}), arrTabs = Object.keys(tabs).map((key, index) => ({
- index,
- ...typeof tabs[key] == "string" ? { title: tabs[key] } : tabs[key],
- id: key
- }));
- return panels.filter((panel) => {
- let t2 = arrTabs.find((tab) => tab.id === panel.id);
- return t2 === void 0 || t2.id === "canvas" || !t2.hidden;
- }).map((panel, index) => ({ ...panel, index })).sort((p1, p2) => {
- let tab_1 = arrTabs.find((tab) => tab.id === p1.id), index_1 = tab_1 ? tab_1.index : arrTabs.length + p1.index, tab_2 = arrTabs.find((tab) => tab.id === p2.id), index_2 = tab_2 ? tab_2.index : arrTabs.length + p2.index;
- return index_1 - index_2;
- }).map((panel) => {
- let t2 = arrTabs.find((tab) => tab.id === panel.id);
- return t2 ? {
- ...panel,
- title: t2.title || panel.title,
- disabled: t2.disabled,
- hidden: t2.hidden
- } : panel;
- });
- }
- return panels;
- }
-
- // src/manager/components/preview/tools/addons.tsx
- init_react();
- var SHOW_ADDON_PANEL_BUTTON_ID = "storybook-show-addon-panel", menuMapper = ({ api, state }) => ({
- isVisible: api.getIsPanelShown(),
- singleStory: state.singleStory,
- panelPosition: state.layout.panelPosition,
- showPanel: async (forceFocus) => {
- api.togglePanel(!0), api.focusOnUIElement(focusableUIElements.addonPanel, {
- forceFocus,
- poll: !0
- });
- }
- }), addonsTool = {
- title: "addons",
- id: "addons",
- type: types.TOOL,
- match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
- render: () => react_default.createElement(Consumer, { filter: menuMapper }, ({ isVisible, showPanel, singleStory, panelPosition }) => !singleStory && !isVisible && react_default.createElement(react_default.Fragment, null, react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "Show addon panel",
- id: SHOW_ADDON_PANEL_BUTTON_ID,
- key: "addons",
- onClick: () => showPanel(!1),
- onKeyDown: (e2) => {
- (e2.key === "Enter" || e2.key === " ") && (e2.preventDefault(), showPanel(!0));
- }
- },
- panelPosition === "bottom" ? react_default.createElement(BottomBarIcon, null) : react_default.createElement(SidebarAltIcon, null)
- )))
- };
-
- // src/manager/components/preview/tools/menu.tsx
- init_react();
- var menuMapper2 = ({ api, state }) => ({
- isVisible: api.getIsNavShown(),
- singleStory: state.singleStory,
- viewMode: state.viewMode,
- showSidebar: async (forceFocus) => {
- api.toggleNav(!0), api.focusOnUIElement(focusableUIElements.sidebarRegion, {
- forceFocus,
- poll: !0
- });
- }
- }), menuTool = {
- title: "menu",
- id: "menu",
- type: types.TOOL,
- // @ts-expect-error (non strict)
- match: ({ viewMode }) => ["story", "docs"].includes(viewMode),
- render: () => react_default.createElement(Consumer, { filter: menuMapper2 }, ({ isVisible, showSidebar, singleStory }) => !singleStory && !isVisible && react_default.createElement(react_default.Fragment, null, react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "Show sidebar",
- id: focusableUIElements.showSidebar,
- key: "menu",
- onClick: () => showSidebar(!1),
- onKeyDown: (e2) => {
- (e2.key === "Enter" || e2.key === " ") && (e2.preventDefault(), showSidebar(!0));
- }
- },
- react_default.createElement(MenuIcon, null)
- ), react_default.createElement(Separator, null)))
- };
-
- // src/manager/components/preview/tools/open-in-editor.tsx
- init_react();
- var mapper2 = ({ state, api }) => {
- let { storyId, refId } = state, entry = api.getData(storyId, refId);
- return {
- storyId,
- isCompositionStory: !!refId,
- importPath: entry?.importPath
- };
- }, openInEditorTool = {
- title: "open-in-editor",
- id: "open-in-editor",
- type: types.TOOL,
- match: ({ viewMode, tabId }) => scope.CONFIG_TYPE === "DEVELOPMENT" && (viewMode === "story" || viewMode === "docs") && !tabId,
- render: () => react_default.createElement(Consumer, { filter: mapper2 }, ({ importPath, isCompositionStory }) => {
- let api = useStorybookApi();
- return isCompositionStory || !importPath ? null : react_default.createElement(
- Button,
- {
- key: "open-in-editor",
- onClick: () => api.openInEditor({
- file: importPath
- }),
- ariaLabel: "Open in editor",
- padding: "small",
- variant: "ghost"
- },
- react_default.createElement(EditorIcon, null)
- );
- })
- };
-
- // src/manager/components/preview/tools/remount.tsx
- init_react();
- var StyledAnimatedButton = styled(Button)(({ theme, animating, disabled }) => ({
- opacity: disabled ? 0.5 : 1,
- svg: {
- animation: animating ? `${theme.animation.rotate360} 1000ms ease-out` : void 0
- }
- })), menuMapper3 = ({ api, state }) => {
- let { storyId } = state;
- return {
- storyId,
- remount: () => api.emit(FORCE_REMOUNT, { storyId: state.storyId }),
- api
- };
- }, remountTool = {
- title: "remount",
- id: "remount",
- type: types.TOOL,
- match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
- render: () => react_default.createElement(Consumer, { filter: menuMapper3 }, ({ remount, storyId, api }) => {
- let [isAnimating, setIsAnimating] = useState(!1), remountComponent = () => {
- storyId && remount();
- };
- return useEffect(() => {
- let handler = () => setIsAnimating(!0);
- return api.on(FORCE_REMOUNT, handler), () => api.off?.(FORCE_REMOUNT, handler);
- }, [api]), react_default.createElement(
- StyledAnimatedButton,
- {
- key: "remount",
- padding: "small",
- variant: "ghost",
- ariaLabel: "Reload story",
- onClick: remountComponent,
- onAnimationEnd: () => setIsAnimating(!1),
- animating: isAnimating,
- disabled: !storyId
- },
- react_default.createElement(SyncIcon, null)
- );
- })
- };
-
- // src/manager/components/preview/tools/share.tsx
- init_react();
-
- // ../../node_modules/qrcode.react/lib/esm/index.js
- init_react();
- var __defProp2 = Object.defineProperty, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp2 = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a2, b2) => {
- for (var prop in b2 || (b2 = {}))
- __hasOwnProp2.call(b2, prop) && __defNormalProp(a2, prop, b2[prop]);
- if (__getOwnPropSymbols)
- for (var prop of __getOwnPropSymbols(b2))
- __propIsEnum.call(b2, prop) && __defNormalProp(a2, prop, b2[prop]);
- return a2;
- }, __objRest = (source, exclude) => {
- var target = {};
- for (var prop in source)
- __hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
- if (source != null && __getOwnPropSymbols)
- for (var prop of __getOwnPropSymbols(source))
- exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop) && (target[prop] = source[prop]);
- return target;
- };
- var qrcodegen;
- ((qrcodegen2) => {
- let _QrCode = class _QrCode2 {
- /*-- Constructor (low level) and fields --*/
- // Creates a new QR Code with the given version number,
- // error correction level, data codeword bytes, and mask number.
- // This is a low-level API that most users should not use directly.
- // A mid-level API is the encodeSegments() function.
- constructor(version3, errorCorrectionLevel, dataCodewords, msk) {
- if (this.version = version3, this.errorCorrectionLevel = errorCorrectionLevel, this.modules = [], this.isFunction = [], version3 < _QrCode2.MIN_VERSION || version3 > _QrCode2.MAX_VERSION)
- throw new RangeError("Version value out of range");
- if (msk < -1 || msk > 7)
- throw new RangeError("Mask value out of range");
- this.size = version3 * 4 + 17;
- let row = [];
- for (let i2 = 0; i2 < this.size; i2++)
- row.push(!1);
- for (let i2 = 0; i2 < this.size; i2++)
- this.modules.push(row.slice()), this.isFunction.push(row.slice());
- this.drawFunctionPatterns();
- let allCodewords = this.addEccAndInterleave(dataCodewords);
- if (this.drawCodewords(allCodewords), msk == -1) {
- let minPenalty = 1e9;
- for (let i2 = 0; i2 < 8; i2++) {
- this.applyMask(i2), this.drawFormatBits(i2);
- let penalty = this.getPenaltyScore();
- penalty < minPenalty && (msk = i2, minPenalty = penalty), this.applyMask(i2);
- }
- }
- assert(0 <= msk && msk <= 7), this.mask = msk, this.applyMask(msk), this.drawFormatBits(msk), this.isFunction = [];
- }
- /*-- Static factory functions (high level) --*/
- // Returns a QR Code representing the given Unicode text string at the given error correction level.
- // As a conservative upper bound, this function is guaranteed to succeed for strings that have 738 or fewer
- // Unicode code points (not UTF-16 code units) if the low error correction level is used. The smallest possible
- // QR Code version is automatically chosen for the output. The ECC level of the result may be higher than the
- // ecl argument if it can be done without increasing the version.
- static encodeText(text, ecl) {
- let segs = qrcodegen2.QrSegment.makeSegments(text);
- return _QrCode2.encodeSegments(segs, ecl);
- }
- // Returns a QR Code representing the given binary data at the given error correction level.
- // This function always encodes using the binary segment mode, not any text mode. The maximum number of
- // bytes allowed is 2953. The smallest possible QR Code version is automatically chosen for the output.
- // The ECC level of the result may be higher than the ecl argument if it can be done without increasing the version.
- static encodeBinary(data, ecl) {
- let seg = qrcodegen2.QrSegment.makeBytes(data);
- return _QrCode2.encodeSegments([seg], ecl);
- }
- /*-- Static factory functions (mid level) --*/
- // Returns a QR Code representing the given segments with the given encoding parameters.
- // The smallest possible QR Code version within the given range is automatically
- // chosen for the output. Iff boostEcl is true, then the ECC level of the result
- // may be higher than the ecl argument if it can be done without increasing the
- // version. The mask number is either between 0 to 7 (inclusive) to force that
- // mask, or -1 to automatically choose an appropriate mask (which may be slow).
- // This function allows the user to create a custom sequence of segments that switches
- // between modes (such as alphanumeric and byte) to encode text in less space.
- // This is a mid-level API; the high-level API is encodeText() and encodeBinary().
- static encodeSegments(segs, ecl, minVersion = 1, maxVersion = 40, mask = -1, boostEcl = !0) {
- if (!(_QrCode2.MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= _QrCode2.MAX_VERSION) || mask < -1 || mask > 7)
- throw new RangeError("Invalid value");
- let version3, dataUsedBits;
- for (version3 = minVersion; ; version3++) {
- let dataCapacityBits2 = _QrCode2.getNumDataCodewords(version3, ecl) * 8, usedBits = QrSegment.getTotalBits(segs, version3);
- if (usedBits <= dataCapacityBits2) {
- dataUsedBits = usedBits;
- break;
- }
- if (version3 >= maxVersion)
- throw new RangeError("Data too long");
- }
- for (let newEcl of [_QrCode2.Ecc.MEDIUM, _QrCode2.Ecc.QUARTILE, _QrCode2.Ecc.HIGH])
- boostEcl && dataUsedBits <= _QrCode2.getNumDataCodewords(version3, newEcl) * 8 && (ecl = newEcl);
- let bb = [];
- for (let seg of segs) {
- appendBits(seg.mode.modeBits, 4, bb), appendBits(seg.numChars, seg.mode.numCharCountBits(version3), bb);
- for (let b2 of seg.getData())
- bb.push(b2);
- }
- assert(bb.length == dataUsedBits);
- let dataCapacityBits = _QrCode2.getNumDataCodewords(version3, ecl) * 8;
- assert(bb.length <= dataCapacityBits), appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb), appendBits(0, (8 - bb.length % 8) % 8, bb), assert(bb.length % 8 == 0);
- for (let padByte = 236; bb.length < dataCapacityBits; padByte ^= 253)
- appendBits(padByte, 8, bb);
- let dataCodewords = [];
- for (; dataCodewords.length * 8 < bb.length; )
- dataCodewords.push(0);
- return bb.forEach((b2, i2) => dataCodewords[i2 >>> 3] |= b2 << 7 - (i2 & 7)), new _QrCode2(version3, ecl, dataCodewords, mask);
- }
- /*-- Accessor methods --*/
- // Returns the color of the module (pixel) at the given coordinates, which is false
- // for light or true for dark. The top left corner has the coordinates (x=0, y=0).
- // If the given coordinates are out of bounds, then false (light) is returned.
- getModule(x2, y2) {
- return 0 <= x2 && x2 < this.size && 0 <= y2 && y2 < this.size && this.modules[y2][x2];
- }
- // Modified to expose modules for easy access
- getModules() {
- return this.modules;
- }
- /*-- Private helper methods for constructor: Drawing function modules --*/
- // Reads this object's version field, and draws and marks all function modules.
- drawFunctionPatterns() {
- for (let i2 = 0; i2 < this.size; i2++)
- this.setFunctionModule(6, i2, i2 % 2 == 0), this.setFunctionModule(i2, 6, i2 % 2 == 0);
- this.drawFinderPattern(3, 3), this.drawFinderPattern(this.size - 4, 3), this.drawFinderPattern(3, this.size - 4);
- let alignPatPos = this.getAlignmentPatternPositions(), numAlign = alignPatPos.length;
- for (let i2 = 0; i2 < numAlign; i2++)
- for (let j2 = 0; j2 < numAlign; j2++)
- i2 == 0 && j2 == 0 || i2 == 0 && j2 == numAlign - 1 || i2 == numAlign - 1 && j2 == 0 || this.drawAlignmentPattern(alignPatPos[i2], alignPatPos[j2]);
- this.drawFormatBits(0), this.drawVersion();
- }
- // Draws two copies of the format bits (with its own error correction code)
- // based on the given mask and this object's error correction level field.
- drawFormatBits(mask) {
- let data = this.errorCorrectionLevel.formatBits << 3 | mask, rem2 = data;
- for (let i2 = 0; i2 < 10; i2++)
- rem2 = rem2 << 1 ^ (rem2 >>> 9) * 1335;
- let bits = (data << 10 | rem2) ^ 21522;
- assert(bits >>> 15 == 0);
- for (let i2 = 0; i2 <= 5; i2++)
- this.setFunctionModule(8, i2, getBit(bits, i2));
- this.setFunctionModule(8, 7, getBit(bits, 6)), this.setFunctionModule(8, 8, getBit(bits, 7)), this.setFunctionModule(7, 8, getBit(bits, 8));
- for (let i2 = 9; i2 < 15; i2++)
- this.setFunctionModule(14 - i2, 8, getBit(bits, i2));
- for (let i2 = 0; i2 < 8; i2++)
- this.setFunctionModule(this.size - 1 - i2, 8, getBit(bits, i2));
- for (let i2 = 8; i2 < 15; i2++)
- this.setFunctionModule(8, this.size - 15 + i2, getBit(bits, i2));
- this.setFunctionModule(8, this.size - 8, !0);
- }
- // Draws two copies of the version bits (with its own error correction code),
- // based on this object's version field, iff 7 <= version <= 40.
- drawVersion() {
- if (this.version < 7)
- return;
- let rem2 = this.version;
- for (let i2 = 0; i2 < 12; i2++)
- rem2 = rem2 << 1 ^ (rem2 >>> 11) * 7973;
- let bits = this.version << 12 | rem2;
- assert(bits >>> 18 == 0);
- for (let i2 = 0; i2 < 18; i2++) {
- let color2 = getBit(bits, i2), a2 = this.size - 11 + i2 % 3, b2 = Math.floor(i2 / 3);
- this.setFunctionModule(a2, b2, color2), this.setFunctionModule(b2, a2, color2);
- }
- }
- // Draws a 9*9 finder pattern including the border separator,
- // with the center module at (x, y). Modules can be out of bounds.
- drawFinderPattern(x2, y2) {
- for (let dy = -4; dy <= 4; dy++)
- for (let dx = -4; dx <= 4; dx++) {
- let dist = Math.max(Math.abs(dx), Math.abs(dy)), xx = x2 + dx, yy = y2 + dy;
- 0 <= xx && xx < this.size && 0 <= yy && yy < this.size && this.setFunctionModule(xx, yy, dist != 2 && dist != 4);
- }
- }
- // Draws a 5*5 alignment pattern, with the center module
- // at (x, y). All modules must be in bounds.
- drawAlignmentPattern(x2, y2) {
- for (let dy = -2; dy <= 2; dy++)
- for (let dx = -2; dx <= 2; dx++)
- this.setFunctionModule(x2 + dx, y2 + dy, Math.max(Math.abs(dx), Math.abs(dy)) != 1);
- }
- // Sets the color of a module and marks it as a function module.
- // Only used by the constructor. Coordinates must be in bounds.
- setFunctionModule(x2, y2, isDark) {
- this.modules[y2][x2] = isDark, this.isFunction[y2][x2] = !0;
- }
- /*-- Private helper methods for constructor: Codewords and masking --*/
- // Returns a new byte string representing the given data with the appropriate error correction
- // codewords appended to it, based on this object's version and error correction level.
- addEccAndInterleave(data) {
- let ver = this.version, ecl = this.errorCorrectionLevel;
- if (data.length != _QrCode2.getNumDataCodewords(ver, ecl))
- throw new RangeError("Invalid argument");
- let numBlocks = _QrCode2.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver], blockEccLen = _QrCode2.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver], rawCodewords = Math.floor(_QrCode2.getNumRawDataModules(ver) / 8), numShortBlocks = numBlocks - rawCodewords % numBlocks, shortBlockLen = Math.floor(rawCodewords / numBlocks), blocks = [], rsDiv = _QrCode2.reedSolomonComputeDivisor(blockEccLen);
- for (let i2 = 0, k2 = 0; i2 < numBlocks; i2++) {
- let dat = data.slice(k2, k2 + shortBlockLen - blockEccLen + (i2 < numShortBlocks ? 0 : 1));
- k2 += dat.length;
- let ecc = _QrCode2.reedSolomonComputeRemainder(dat, rsDiv);
- i2 < numShortBlocks && dat.push(0), blocks.push(dat.concat(ecc));
- }
- let result = [];
- for (let i2 = 0; i2 < blocks[0].length; i2++)
- blocks.forEach((block, j2) => {
- (i2 != shortBlockLen - blockEccLen || j2 >= numShortBlocks) && result.push(block[i2]);
- });
- return assert(result.length == rawCodewords), result;
- }
- // Draws the given sequence of 8-bit codewords (data and error correction) onto the entire
- // data area of this QR Code. Function modules need to be marked off before this is called.
- drawCodewords(data) {
- if (data.length != Math.floor(_QrCode2.getNumRawDataModules(this.version) / 8))
- throw new RangeError("Invalid argument");
- let i2 = 0;
- for (let right = this.size - 1; right >= 1; right -= 2) {
- right == 6 && (right = 5);
- for (let vert = 0; vert < this.size; vert++)
- for (let j2 = 0; j2 < 2; j2++) {
- let x2 = right - j2, y2 = (right + 1 & 2) == 0 ? this.size - 1 - vert : vert;
- !this.isFunction[y2][x2] && i2 < data.length * 8 && (this.modules[y2][x2] = getBit(data[i2 >>> 3], 7 - (i2 & 7)), i2++);
- }
- }
- assert(i2 == data.length * 8);
- }
- // XORs the codeword modules in this QR Code with the given mask pattern.
- // The function modules must be marked and the codeword bits must be drawn
- // before masking. Due to the arithmetic of XOR, calling applyMask() with
- // the same mask value a second time will undo the mask. A final well-formed
- // QR Code needs exactly one (not zero, two, etc.) mask applied.
- applyMask(mask) {
- if (mask < 0 || mask > 7)
- throw new RangeError("Mask value out of range");
- for (let y2 = 0; y2 < this.size; y2++)
- for (let x2 = 0; x2 < this.size; x2++) {
- let invert2;
- switch (mask) {
- case 0:
- invert2 = (x2 + y2) % 2 == 0;
- break;
- case 1:
- invert2 = y2 % 2 == 0;
- break;
- case 2:
- invert2 = x2 % 3 == 0;
- break;
- case 3:
- invert2 = (x2 + y2) % 3 == 0;
- break;
- case 4:
- invert2 = (Math.floor(x2 / 3) + Math.floor(y2 / 2)) % 2 == 0;
- break;
- case 5:
- invert2 = x2 * y2 % 2 + x2 * y2 % 3 == 0;
- break;
- case 6:
- invert2 = (x2 * y2 % 2 + x2 * y2 % 3) % 2 == 0;
- break;
- case 7:
- invert2 = ((x2 + y2) % 2 + x2 * y2 % 3) % 2 == 0;
- break;
- default:
- throw new Error("Unreachable");
- }
- !this.isFunction[y2][x2] && invert2 && (this.modules[y2][x2] = !this.modules[y2][x2]);
- }
- }
- // Calculates and returns the penalty score based on state of this QR Code's current modules.
- // This is used by the automatic mask choice algorithm to find the mask pattern that yields the lowest score.
- getPenaltyScore() {
- let result = 0;
- for (let y2 = 0; y2 < this.size; y2++) {
- let runColor = !1, runX = 0, runHistory = [0, 0, 0, 0, 0, 0, 0];
- for (let x2 = 0; x2 < this.size; x2++)
- this.modules[y2][x2] == runColor ? (runX++, runX == 5 ? result += _QrCode2.PENALTY_N1 : runX > 5 && result++) : (this.finderPenaltyAddHistory(runX, runHistory), runColor || (result += this.finderPenaltyCountPatterns(runHistory) * _QrCode2.PENALTY_N3), runColor = this.modules[y2][x2], runX = 1);
- result += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * _QrCode2.PENALTY_N3;
- }
- for (let x2 = 0; x2 < this.size; x2++) {
- let runColor = !1, runY = 0, runHistory = [0, 0, 0, 0, 0, 0, 0];
- for (let y2 = 0; y2 < this.size; y2++)
- this.modules[y2][x2] == runColor ? (runY++, runY == 5 ? result += _QrCode2.PENALTY_N1 : runY > 5 && result++) : (this.finderPenaltyAddHistory(runY, runHistory), runColor || (result += this.finderPenaltyCountPatterns(runHistory) * _QrCode2.PENALTY_N3), runColor = this.modules[y2][x2], runY = 1);
- result += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * _QrCode2.PENALTY_N3;
- }
- for (let y2 = 0; y2 < this.size - 1; y2++)
- for (let x2 = 0; x2 < this.size - 1; x2++) {
- let color2 = this.modules[y2][x2];
- color2 == this.modules[y2][x2 + 1] && color2 == this.modules[y2 + 1][x2] && color2 == this.modules[y2 + 1][x2 + 1] && (result += _QrCode2.PENALTY_N2);
- }
- let dark = 0;
- for (let row of this.modules)
- dark = row.reduce((sum, color2) => sum + (color2 ? 1 : 0), dark);
- let total = this.size * this.size, k2 = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
- return assert(0 <= k2 && k2 <= 9), result += k2 * _QrCode2.PENALTY_N4, assert(0 <= result && result <= 2568888), result;
- }
- /*-- Private helper functions --*/
- // Returns an ascending list of positions of alignment patterns for this version number.
- // Each position is in the range [0,177), and are used on both the x and y axes.
- // This could be implemented as lookup table of 40 variable-length lists of integers.
- getAlignmentPatternPositions() {
- if (this.version == 1)
- return [];
- {
- let numAlign = Math.floor(this.version / 7) + 2, step = this.version == 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2, result = [6];
- for (let pos = this.size - 7; result.length < numAlign; pos -= step)
- result.splice(1, 0, pos);
- return result;
- }
- }
- // Returns the number of data bits that can be stored in a QR Code of the given version number, after
- // all function modules are excluded. This includes remainder bits, so it might not be a multiple of 8.
- // The result is in the range [208, 29648]. This could be implemented as a 40-entry lookup table.
- static getNumRawDataModules(ver) {
- if (ver < _QrCode2.MIN_VERSION || ver > _QrCode2.MAX_VERSION)
- throw new RangeError("Version number out of range");
- let result = (16 * ver + 128) * ver + 64;
- if (ver >= 2) {
- let numAlign = Math.floor(ver / 7) + 2;
- result -= (25 * numAlign - 10) * numAlign - 55, ver >= 7 && (result -= 36);
- }
- return assert(208 <= result && result <= 29648), result;
- }
- // Returns the number of 8-bit data (i.e. not error correction) codewords contained in any
- // QR Code of the given version number and error correction level, with remainder bits discarded.
- // This stateless pure function could be implemented as a (40*4)-cell lookup table.
- static getNumDataCodewords(ver, ecl) {
- return Math.floor(_QrCode2.getNumRawDataModules(ver) / 8) - _QrCode2.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] * _QrCode2.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
- }
- // Returns a Reed-Solomon ECC generator polynomial for the given degree. This could be
- // implemented as a lookup table over all possible parameter values, instead of as an algorithm.
- static reedSolomonComputeDivisor(degree) {
- if (degree < 1 || degree > 255)
- throw new RangeError("Degree out of range");
- let result = [];
- for (let i2 = 0; i2 < degree - 1; i2++)
- result.push(0);
- result.push(1);
- let root2 = 1;
- for (let i2 = 0; i2 < degree; i2++) {
- for (let j2 = 0; j2 < result.length; j2++)
- result[j2] = _QrCode2.reedSolomonMultiply(result[j2], root2), j2 + 1 < result.length && (result[j2] ^= result[j2 + 1]);
- root2 = _QrCode2.reedSolomonMultiply(root2, 2);
- }
- return result;
- }
- // Returns the Reed-Solomon error correction codeword for the given data and divisor polynomials.
- static reedSolomonComputeRemainder(data, divisor) {
- let result = divisor.map((_2) => 0);
- for (let b2 of data) {
- let factor = b2 ^ result.shift();
- result.push(0), divisor.forEach((coef, i2) => result[i2] ^= _QrCode2.reedSolomonMultiply(coef, factor));
- }
- return result;
- }
- // Returns the product of the two given field elements modulo GF(2^8/0x11D). The arguments and result
- // are unsigned 8-bit integers. This could be implemented as a lookup table of 256*256 entries of uint8.
- static reedSolomonMultiply(x2, y2) {
- if (x2 >>> 8 || y2 >>> 8)
- throw new RangeError("Byte out of range");
- let z2 = 0;
- for (let i2 = 7; i2 >= 0; i2--)
- z2 = z2 << 1 ^ (z2 >>> 7) * 285, z2 ^= (y2 >>> i2 & 1) * x2;
- return assert(z2 >>> 8 == 0), z2;
- }
- // Can only be called immediately after a light run is added, and
- // returns either 0, 1, or 2. A helper function for getPenaltyScore().
- finderPenaltyCountPatterns(runHistory) {
- let n3 = runHistory[1];
- assert(n3 <= this.size * 3);
- let core = n3 > 0 && runHistory[2] == n3 && runHistory[3] == n3 * 3 && runHistory[4] == n3 && runHistory[5] == n3;
- return (core && runHistory[0] >= n3 * 4 && runHistory[6] >= n3 ? 1 : 0) + (core && runHistory[6] >= n3 * 4 && runHistory[0] >= n3 ? 1 : 0);
- }
- // Must be called at the end of a line (row or column) of modules. A helper function for getPenaltyScore().
- finderPenaltyTerminateAndCount(currentRunColor, currentRunLength, runHistory) {
- return currentRunColor && (this.finderPenaltyAddHistory(currentRunLength, runHistory), currentRunLength = 0), currentRunLength += this.size, this.finderPenaltyAddHistory(currentRunLength, runHistory), this.finderPenaltyCountPatterns(runHistory);
- }
- // Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
- finderPenaltyAddHistory(currentRunLength, runHistory) {
- runHistory[0] == 0 && (currentRunLength += this.size), runHistory.pop(), runHistory.unshift(currentRunLength);
- }
- };
- _QrCode.MIN_VERSION = 1, _QrCode.MAX_VERSION = 40, _QrCode.PENALTY_N1 = 3, _QrCode.PENALTY_N2 = 3, _QrCode.PENALTY_N3 = 40, _QrCode.PENALTY_N4 = 10, _QrCode.ECC_CODEWORDS_PER_BLOCK = [
- // Version: (note that index 0 is for padding, and is set to an illegal value)
- //0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 Error correction level
- [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
- // Low
- [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
- // Medium
- [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
- // Quartile
- [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
- // High
- ], _QrCode.NUM_ERROR_CORRECTION_BLOCKS = [
- // Version: (note that index 0 is for padding, and is set to an illegal value)
- //0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 Error correction level
- [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
- // Low
- [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
- // Medium
- [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
- // Quartile
- [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81]
- // High
- ];
- let QrCode = _QrCode;
- qrcodegen2.QrCode = _QrCode;
- function appendBits(val, len, bb) {
- if (len < 0 || len > 31 || val >>> len)
- throw new RangeError("Value out of range");
- for (let i2 = len - 1; i2 >= 0; i2--)
- bb.push(val >>> i2 & 1);
- }
- function getBit(x2, i2) {
- return (x2 >>> i2 & 1) != 0;
- }
- function assert(cond) {
- if (!cond)
- throw new Error("Assertion error");
- }
- let _QrSegment = class _QrSegment2 {
- /*-- Constructor (low level) and fields --*/
- // Creates a new QR Code segment with the given attributes and data.
- // The character count (numChars) must agree with the mode and the bit buffer length,
- // but the constraint isn't checked. The given bit buffer is cloned and stored.
- constructor(mode, numChars, bitData) {
- if (this.mode = mode, this.numChars = numChars, this.bitData = bitData, numChars < 0)
- throw new RangeError("Invalid argument");
- this.bitData = bitData.slice();
- }
- /*-- Static factory functions (mid level) --*/
- // Returns a segment representing the given binary data encoded in
- // byte mode. All input byte arrays are acceptable. Any text string
- // can be converted to UTF-8 bytes and encoded as a byte mode segment.
- static makeBytes(data) {
- let bb = [];
- for (let b2 of data)
- appendBits(b2, 8, bb);
- return new _QrSegment2(_QrSegment2.Mode.BYTE, data.length, bb);
- }
- // Returns a segment representing the given string of decimal digits encoded in numeric mode.
- static makeNumeric(digits) {
- if (!_QrSegment2.isNumeric(digits))
- throw new RangeError("String contains non-numeric characters");
- let bb = [];
- for (let i2 = 0; i2 < digits.length; ) {
- let n3 = Math.min(digits.length - i2, 3);
- appendBits(parseInt(digits.substring(i2, i2 + n3), 10), n3 * 3 + 1, bb), i2 += n3;
- }
- return new _QrSegment2(_QrSegment2.Mode.NUMERIC, digits.length, bb);
- }
- // Returns a segment representing the given text string encoded in alphanumeric mode.
- // The characters allowed are: 0 to 9, A to Z (uppercase only), space,
- // dollar, percent, asterisk, plus, hyphen, period, slash, colon.
- static makeAlphanumeric(text) {
- if (!_QrSegment2.isAlphanumeric(text))
- throw new RangeError("String contains unencodable characters in alphanumeric mode");
- let bb = [], i2;
- for (i2 = 0; i2 + 2 <= text.length; i2 += 2) {
- let temp = _QrSegment2.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i2)) * 45;
- temp += _QrSegment2.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i2 + 1)), appendBits(temp, 11, bb);
- }
- return i2 < text.length && appendBits(_QrSegment2.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i2)), 6, bb), new _QrSegment2(_QrSegment2.Mode.ALPHANUMERIC, text.length, bb);
- }
- // Returns a new mutable list of zero or more segments to represent the given Unicode text string.
- // The result may use various segment modes and switch modes to optimize the length of the bit stream.
- static makeSegments(text) {
- return text == "" ? [] : _QrSegment2.isNumeric(text) ? [_QrSegment2.makeNumeric(text)] : _QrSegment2.isAlphanumeric(text) ? [_QrSegment2.makeAlphanumeric(text)] : [_QrSegment2.makeBytes(_QrSegment2.toUtf8ByteArray(text))];
- }
- // Returns a segment representing an Extended Channel Interpretation
- // (ECI) designator with the given assignment value.
- static makeEci(assignVal) {
- let bb = [];
- if (assignVal < 0)
- throw new RangeError("ECI assignment value out of range");
- if (assignVal < 128)
- appendBits(assignVal, 8, bb);
- else if (assignVal < 16384)
- appendBits(2, 2, bb), appendBits(assignVal, 14, bb);
- else if (assignVal < 1e6)
- appendBits(6, 3, bb), appendBits(assignVal, 21, bb);
- else
- throw new RangeError("ECI assignment value out of range");
- return new _QrSegment2(_QrSegment2.Mode.ECI, 0, bb);
- }
- // Tests whether the given string can be encoded as a segment in numeric mode.
- // A string is encodable iff each character is in the range 0 to 9.
- static isNumeric(text) {
- return _QrSegment2.NUMERIC_REGEX.test(text);
- }
- // Tests whether the given string can be encoded as a segment in alphanumeric mode.
- // A string is encodable iff each character is in the following set: 0 to 9, A to Z
- // (uppercase only), space, dollar, percent, asterisk, plus, hyphen, period, slash, colon.
- static isAlphanumeric(text) {
- return _QrSegment2.ALPHANUMERIC_REGEX.test(text);
- }
- /*-- Methods --*/
- // Returns a new copy of the data bits of this segment.
- getData() {
- return this.bitData.slice();
- }
- // (Package-private) Calculates and returns the number of bits needed to encode the given segments at
- // the given version. The result is infinity if a segment has too many characters to fit its length field.
- static getTotalBits(segs, version3) {
- let result = 0;
- for (let seg of segs) {
- let ccbits = seg.mode.numCharCountBits(version3);
- if (seg.numChars >= 1 << ccbits)
- return 1 / 0;
- result += 4 + ccbits + seg.bitData.length;
- }
- return result;
- }
- // Returns a new array of bytes representing the given string encoded in UTF-8.
- static toUtf8ByteArray(str) {
- str = encodeURI(str);
- let result = [];
- for (let i2 = 0; i2 < str.length; i2++)
- str.charAt(i2) != "%" ? result.push(str.charCodeAt(i2)) : (result.push(parseInt(str.substring(i2 + 1, i2 + 3), 16)), i2 += 2);
- return result;
- }
- };
- _QrSegment.NUMERIC_REGEX = /^[0-9]*$/, _QrSegment.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/, _QrSegment.ALPHANUMERIC_CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
- let QrSegment = _QrSegment;
- qrcodegen2.QrSegment = _QrSegment;
- })(qrcodegen || (qrcodegen = {}));
- ((qrcodegen2) => {
- let QrCode;
- ((QrCode2) => {
- let _Ecc = class {
- // The QR Code can tolerate about 30% erroneous codewords
- /*-- Constructor and fields --*/
- constructor(ordinal, formatBits) {
- this.ordinal = ordinal, this.formatBits = formatBits;
- }
- };
- _Ecc.LOW = new _Ecc(0, 1), _Ecc.MEDIUM = new _Ecc(1, 0), _Ecc.QUARTILE = new _Ecc(2, 3), _Ecc.HIGH = new _Ecc(3, 2);
- let Ecc = _Ecc;
- QrCode2.Ecc = _Ecc;
- })(QrCode = qrcodegen2.QrCode || (qrcodegen2.QrCode = {}));
- })(qrcodegen || (qrcodegen = {}));
- ((qrcodegen2) => {
- let QrSegment;
- ((QrSegment2) => {
- let _Mode = class {
- /*-- Constructor and fields --*/
- constructor(modeBits, numBitsCharCount) {
- this.modeBits = modeBits, this.numBitsCharCount = numBitsCharCount;
- }
- /*-- Method --*/
- // (Package-private) Returns the bit width of the character count field for a segment in
- // this mode in a QR Code at the given version number. The result is in the range [0, 16].
- numCharCountBits(ver) {
- return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
- }
- };
- _Mode.NUMERIC = new _Mode(1, [10, 12, 14]), _Mode.ALPHANUMERIC = new _Mode(2, [9, 11, 13]), _Mode.BYTE = new _Mode(4, [8, 16, 16]), _Mode.KANJI = new _Mode(8, [8, 10, 12]), _Mode.ECI = new _Mode(7, [0, 0, 0]);
- let Mode = _Mode;
- QrSegment2.Mode = _Mode;
- })(QrSegment = qrcodegen2.QrSegment || (qrcodegen2.QrSegment = {}));
- })(qrcodegen || (qrcodegen = {}));
- var qrcodegen_default = qrcodegen;
- var ERROR_LEVEL_MAP = {
- L: qrcodegen_default.QrCode.Ecc.LOW,
- M: qrcodegen_default.QrCode.Ecc.MEDIUM,
- Q: qrcodegen_default.QrCode.Ecc.QUARTILE,
- H: qrcodegen_default.QrCode.Ecc.HIGH
- }, DEFAULT_SIZE = 128, DEFAULT_LEVEL = "L", DEFAULT_BGCOLOR = "#FFFFFF", DEFAULT_FGCOLOR = "#000000", DEFAULT_INCLUDEMARGIN = !1, DEFAULT_MINVERSION = 1, SPEC_MARGIN_SIZE = 4, DEFAULT_MARGIN_SIZE = 0, DEFAULT_IMG_SCALE = 0.1;
- function generatePath(modules, margin = 0) {
- let ops = [];
- return modules.forEach(function(row, y2) {
- let start = null;
- row.forEach(function(cell, x2) {
- if (!cell && start !== null) {
- ops.push(
- `M${start + margin} ${y2 + margin}h${x2 - start}v1H${start + margin}z`
- ), start = null;
- return;
- }
- if (x2 === row.length - 1) {
- if (!cell)
- return;
- start === null ? ops.push(`M${x2 + margin},${y2 + margin} h1v1H${x2 + margin}z`) : ops.push(
- `M${start + margin},${y2 + margin} h${x2 + 1 - start}v1H${start + margin}z`
- );
- return;
- }
- cell && start === null && (start = x2);
- });
- }), ops.join("");
- }
- function excavateModules(modules, excavation) {
- return modules.slice().map((row, y2) => y2 < excavation.y || y2 >= excavation.y + excavation.h ? row : row.map((cell, x2) => x2 < excavation.x || x2 >= excavation.x + excavation.w ? cell : !1));
- }
- function getImageSettings(cells, size, margin, imageSettings) {
- if (imageSettings == null)
- return null;
- let numCells = cells.length + margin * 2, defaultSize = Math.floor(size * DEFAULT_IMG_SCALE), scale = numCells / size, w2 = (imageSettings.width || defaultSize) * scale, h2 = (imageSettings.height || defaultSize) * scale, x2 = imageSettings.x == null ? cells.length / 2 - w2 / 2 : imageSettings.x * scale, y2 = imageSettings.y == null ? cells.length / 2 - h2 / 2 : imageSettings.y * scale, opacity = imageSettings.opacity == null ? 1 : imageSettings.opacity, excavation = null;
- if (imageSettings.excavate) {
- let floorX = Math.floor(x2), floorY = Math.floor(y2), ceilW = Math.ceil(w2 + x2 - floorX), ceilH = Math.ceil(h2 + y2 - floorY);
- excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
- }
- let crossOrigin = imageSettings.crossOrigin;
- return { x: x2, y: y2, h: h2, w: w2, excavation, opacity, crossOrigin };
- }
- function getMarginSize(includeMargin, marginSize) {
- return marginSize != null ? Math.max(Math.floor(marginSize), 0) : includeMargin ? SPEC_MARGIN_SIZE : DEFAULT_MARGIN_SIZE;
- }
- function useQRCode({
- value,
- level,
- minVersion,
- includeMargin,
- marginSize,
- imageSettings,
- size,
- boostLevel
- }) {
- let qrcode = react_default.useMemo(() => {
- let segments = (Array.isArray(value) ? value : [value]).reduce((accum, v2) => (accum.push(...qrcodegen_default.QrSegment.makeSegments(v2)), accum), []);
- return qrcodegen_default.QrCode.encodeSegments(
- segments,
- ERROR_LEVEL_MAP[level],
- minVersion,
- void 0,
- void 0,
- boostLevel
- );
- }, [value, level, minVersion, boostLevel]), { cells, margin, numCells, calculatedImageSettings } = react_default.useMemo(() => {
- let cells2 = qrcode.getModules(), margin2 = getMarginSize(includeMargin, marginSize), numCells2 = cells2.length + margin2 * 2, calculatedImageSettings2 = getImageSettings(
- cells2,
- size,
- margin2,
- imageSettings
- );
- return {
- cells: cells2,
- margin: margin2,
- numCells: numCells2,
- calculatedImageSettings: calculatedImageSettings2
- };
- }, [qrcode, size, imageSettings, includeMargin, marginSize]);
- return {
- qrcode,
- margin,
- cells,
- numCells,
- calculatedImageSettings
- };
- }
- var SUPPORTS_PATH2D = (function() {
- try {
- new Path2D().addPath(new Path2D());
- } catch {
- return !1;
- }
- return !0;
- })(), QRCodeCanvas = react_default.forwardRef(
- function(props, forwardedRef) {
- let _a2 = props, {
- value,
- size = DEFAULT_SIZE,
- level = DEFAULT_LEVEL,
- bgColor = DEFAULT_BGCOLOR,
- fgColor = DEFAULT_FGCOLOR,
- includeMargin = DEFAULT_INCLUDEMARGIN,
- minVersion = DEFAULT_MINVERSION,
- boostLevel,
- marginSize,
- imageSettings
- } = _a2, _b = __objRest(_a2, [
- "value",
- "size",
- "level",
- "bgColor",
- "fgColor",
- "includeMargin",
- "minVersion",
- "boostLevel",
- "marginSize",
- "imageSettings"
- ]), { style } = _b, otherProps = __objRest(_b, ["style"]), imgSrc = imageSettings?.src, _canvas = react_default.useRef(null), _image = react_default.useRef(null), setCanvasRef = react_default.useCallback(
- (node) => {
- _canvas.current = node, typeof forwardedRef == "function" ? forwardedRef(node) : forwardedRef && (forwardedRef.current = node);
- },
- [forwardedRef]
- ), [isImgLoaded, setIsImageLoaded] = react_default.useState(!1), { margin, cells, numCells, calculatedImageSettings } = useQRCode({
- value,
- level,
- minVersion,
- boostLevel,
- includeMargin,
- marginSize,
- imageSettings,
- size
- });
- react_default.useEffect(() => {
- if (_canvas.current != null) {
- let canvas = _canvas.current, ctx = canvas.getContext("2d");
- if (!ctx)
- return;
- let cellsToDraw = cells, image = _image.current, haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
- haveImageToRender && calculatedImageSettings.excavation != null && (cellsToDraw = excavateModules(
- cells,
- calculatedImageSettings.excavation
- ));
- let pixelRatio = window.devicePixelRatio || 1;
- canvas.height = canvas.width = size * pixelRatio;
- let scale = size / numCells * pixelRatio;
- ctx.scale(scale, scale), ctx.fillStyle = bgColor, ctx.fillRect(0, 0, numCells, numCells), ctx.fillStyle = fgColor, SUPPORTS_PATH2D ? ctx.fill(new Path2D(generatePath(cellsToDraw, margin))) : cells.forEach(function(row, rdx) {
- row.forEach(function(cell, cdx) {
- cell && ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
- });
- }), calculatedImageSettings && (ctx.globalAlpha = calculatedImageSettings.opacity), haveImageToRender && ctx.drawImage(
- image,
- calculatedImageSettings.x + margin,
- calculatedImageSettings.y + margin,
- calculatedImageSettings.w,
- calculatedImageSettings.h
- );
- }
- }), react_default.useEffect(() => {
- setIsImageLoaded(!1);
- }, [imgSrc]);
- let canvasStyle = __spreadValues({ height: size, width: size }, style), img = null;
- return imgSrc != null && (img = react_default.createElement(
- "img",
- {
- src: imgSrc,
- key: imgSrc,
- style: { display: "none" },
- onLoad: () => {
- setIsImageLoaded(!0);
- },
- ref: _image,
- crossOrigin: calculatedImageSettings?.crossOrigin
- }
- )), react_default.createElement(react_default.Fragment, null, react_default.createElement(
- "canvas",
- __spreadValues({
- style: canvasStyle,
- height: size,
- width: size,
- ref: setCanvasRef,
- role: "img"
- }, otherProps)
- ), img);
- }
- );
- QRCodeCanvas.displayName = "QRCodeCanvas";
- var QRCodeSVG = react_default.forwardRef(
- function(props, forwardedRef) {
- let _a2 = props, {
- value,
- size = DEFAULT_SIZE,
- level = DEFAULT_LEVEL,
- bgColor = DEFAULT_BGCOLOR,
- fgColor = DEFAULT_FGCOLOR,
- includeMargin = DEFAULT_INCLUDEMARGIN,
- minVersion = DEFAULT_MINVERSION,
- boostLevel,
- title: title2,
- marginSize,
- imageSettings
- } = _a2, otherProps = __objRest(_a2, [
- "value",
- "size",
- "level",
- "bgColor",
- "fgColor",
- "includeMargin",
- "minVersion",
- "boostLevel",
- "title",
- "marginSize",
- "imageSettings"
- ]), { margin, cells, numCells, calculatedImageSettings } = useQRCode({
- value,
- level,
- minVersion,
- boostLevel,
- includeMargin,
- marginSize,
- imageSettings,
- size
- }), cellsToDraw = cells, image = null;
- imageSettings != null && calculatedImageSettings != null && (calculatedImageSettings.excavation != null && (cellsToDraw = excavateModules(
- cells,
- calculatedImageSettings.excavation
- )), image = react_default.createElement(
- "image",
- {
- href: imageSettings.src,
- height: calculatedImageSettings.h,
- width: calculatedImageSettings.w,
- x: calculatedImageSettings.x + margin,
- y: calculatedImageSettings.y + margin,
- preserveAspectRatio: "none",
- opacity: calculatedImageSettings.opacity,
- crossOrigin: calculatedImageSettings.crossOrigin
- }
- ));
- let fgPath = generatePath(cellsToDraw, margin);
- return react_default.createElement(
- "svg",
- __spreadValues({
- height: size,
- width: size,
- viewBox: `0 0 ${numCells} ${numCells}`,
- ref: forwardedRef,
- role: "img"
- }, otherProps),
- !!title2 && react_default.createElement("title", null, title2),
- react_default.createElement(
- "path",
- {
- fill: bgColor,
- d: `M0,0 h${numCells}v${numCells}H0z`,
- shapeRendering: "crispEdges"
- }
- ),
- react_default.createElement("path", { fill: fgColor, d: fgPath, shapeRendering: "crispEdges" }),
- image
- );
- }
- );
- QRCodeSVG.displayName = "QRCodeSVG";
-
- // src/manager/components/preview/tools/share.tsx
- var mapper3 = ({ api, state }) => {
- let { storyId, refId } = state;
- return { api, refId, storyId };
- }, QRContainer = styled.div(
- () => ({
- display: "flex",
- flexDirection: "column",
- padding: 8,
- width: 300,
- maxWidth: 300,
- gap: 8
- })
- ), QRRow = styled.div(() => ({
- display: "flex",
- alignItems: "center"
- })), ShareLinkInput = styled.input(({ theme }) => ({
- width: "100%",
- border: `1px solid ${theme.appBorderColor}`,
- borderRadius: 4,
- padding: "6px 8px",
- fontSize: theme.typography.size.s1,
- color: theme.color.defaultText,
- backgroundColor: theme.background.app,
- outline: "none",
- textOverflow: "ellipsis",
- overflow: "hidden",
- whiteSpace: "nowrap",
- "&:focus": {
- borderColor: theme.color.secondary
- }
- })), QRImageContainer = styled.div(() => ({
- width: 64,
- height: 64,
- marginRight: 12,
- backgroundColor: "white",
- padding: 2
- }));
- var QRContent = styled.div(() => ({})), QRTitle = styled.div(({ theme }) => ({
- fontWeight: theme.typography.weight.bold,
- fontSize: theme.typography.size.s1,
- marginBottom: 4
- })), QRDescription = styled.div(({ theme }) => ({
- fontSize: theme.typography.size.s1,
- color: theme.textMutedColor
- })), isolationModeTool = {
- title: "isolation mode",
- id: "isolationMode",
- type: types.TOOLEXTRA,
- match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
- render: () => react_default.createElement(Consumer, { filter: mapper3 }, ({ api, storyId, refId }) => {
- if (!storyId) return null;
- let originHrefs = api.getStoryHrefs(storyId, { base: "origin", refId });
- return react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "Open in isolation mode",
- tooltip: "Open in isolation mode",
- onClick: () => {
- window.open(originHrefs.previewHref, "_blank", "noopener,noreferrer"), api.emit(SHARE_ISOLATE_MODE, originHrefs.previewHref);
- }
- },
- react_default.createElement(PopOutIcon, null)
- );
- })
- };
-
- // src/manager/container/Preview.tsx
- var defaultTabs = [createCanvasTab()], defaultTools = [menuTool, remountTool], defaultToolsExtra = [
- isolationModeTool,
- zoomTool,
- addonsTool,
- fullScreenTool,
- openInEditorTool
- ], emptyTabsList = [], memoizedTabs = (0, import_memoizerific2.default)(1)(
- (_2, tabElements, parameters, showTabs) => showTabs ? filterTabs([...defaultTabs, ...Object.values(tabElements)], parameters) : emptyTabsList
- ), memoizedTools = (0, import_memoizerific2.default)(1)(
- (_2, toolElements, filterProps) => filterToolsSide([...defaultTools, ...Object.values(toolElements)], ...filterProps)
- ), memoizedExtra = (0, import_memoizerific2.default)(1)(
- (_2, extraElements, filterProps) => filterToolsSide([...defaultToolsExtra, ...Object.values(extraElements)], ...filterProps)
- ), memoizedWrapper = (0, import_memoizerific2.default)(1)((_2, previewElements) => [
- ...defaultWrappers,
- ...Object.values(previewElements)
- ]), { PREVIEW_URL } = scope, splitTitleAddExtraSpace = (input) => input.split("/").join(" / ").replace(/\s\s/, " "), getDescription = (item) => {
- if (item?.type === "story" || item?.type === "docs") {
- let { title: title2, name } = item;
- return title2 && name ? splitTitleAddExtraSpace(`${title2} - ${name} \u22C5 Storybook`) : "Storybook";
- }
- return item?.name ? `${item.name} \u22C5 Storybook` : "Storybook";
- }, mapper4 = ({
- api,
- state
- // @ts-expect-error (non strict)
- }) => {
- let { layout, location: location2, customQueryParams, storyId, refs, viewMode, path, refId } = state, entry = api.getData(storyId, refId), tabsList = Object.values(api.getElements(Addon_TypesEnum.TAB)), wrapperList = Object.values(api.getElements(Addon_TypesEnum.PREVIEW)), toolsList = Object.values(api.getElements(Addon_TypesEnum.TOOL)), toolsExtraList = Object.values(api.getElements(Addon_TypesEnum.TOOLEXTRA)), tabId = api.getQueryParam("tab"), tools = memoizedTools(toolsList.length, api.getElements(Addon_TypesEnum.TOOL), [
- entry,
- viewMode,
- location2,
- path,
- // @ts-expect-error (non strict)
- tabId
- ]), toolsExtra = memoizedExtra(
- toolsExtraList.length,
- api.getElements(Addon_TypesEnum.TOOLEXTRA),
- // @ts-expect-error (non strict)
- [entry, viewMode, location2, path, tabId]
- );
- return {
- api,
- entry,
- options: layout,
- description: getDescription(entry),
- viewMode,
- refs,
- storyId,
- baseUrl: PREVIEW_URL || "iframe.html",
- queryParams: customQueryParams,
- tools,
- toolsExtra,
- tabs: memoizedTabs(
- tabsList.length,
- api.getElements(Addon_TypesEnum.TAB),
- entry ? entry.parameters : void 0,
- layout.showTabs
- ),
- wrappers: memoizedWrapper(
- wrapperList.length,
- api.getElements(Addon_TypesEnum.PREVIEW)
- ),
- tabId
- };
- }, PreviewConnected = react_default.memo(function(props) {
- return react_default.createElement(Consumer, { filter: mapper4 }, (fromState) => react_default.createElement(Preview, { ...props, ...fromState }));
- }), Preview_default = PreviewConnected;
-
- // src/manager/container/Sidebar.tsx
- init_react();
-
- // src/manager/components/sidebar/Sidebar.tsx
- init_react();
-
- // src/manager/components/sidebar/ChecklistWidget.tsx
- init_react();
-
- // src/manager/components/Optional/Optional.tsx
- init_react();
- var Wrapper3 = styled.div({
- display: "inline-grid",
- gridTemplateColumns: "max-content",
- overflow: "hidden"
- }), Content2 = styled.div(({ isHidden }) => ({
- display: "inline-block",
- gridArea: "1/1",
- opacity: isHidden === null ? 0 : 1,
- visibility: isHidden ? "hidden" : "visible"
- })), Optional = ({
- content,
- fallback
- }) => {
- let contentRef = useRef(null), wrapperRef = useRef(null), [hidden, setHidden] = useState(null), contentWidth = useRef(contentRef.current?.offsetWidth ?? 0), wrapperWidth = useRef(wrapperRef.current?.offsetWidth ?? 0);
- return useEffect(() => {
- if (contentRef.current && wrapperRef.current) {
- let resizeObserver = new ResizeObserver(() => {
- wrapperWidth.current = wrapperRef.current?.offsetWidth || wrapperWidth.current, contentWidth.current = contentRef.current?.offsetWidth || contentWidth.current, setHidden(contentWidth.current > wrapperWidth.current);
- });
- return resizeObserver.observe(wrapperRef.current), () => resizeObserver.disconnect();
- }
- }, []), react_default.createElement(Wrapper3, { ref: wrapperRef }, react_default.createElement(Content2, { isHidden: hidden, ref: contentRef }, content), fallback && react_default.createElement(Content2, { isHidden: !hidden }, fallback));
- };
-
- // src/manager/components/Particles/Particles.tsx
- init_react();
- var Shape = styled.svg(({ color: color2 }) => ({
- fill: color2,
- position: "absolute",
- inset: "0",
- margin: "auto",
- width: "12px",
- height: "12px",
- pointerEvents: "none"
- })), Donut = (props) => react_default.createElement(Shape, { viewBox: "0 0 90 90", xmlns: "http://www.w3.org/2000/svg", color: "red", ...props }, react_default.createElement("path", { d: "M45 0c24.853 0 45 20.147 45 45S69.853 90 45 90 0 69.853 0 45 20.147 0 45 0zm.5 27C35.283 27 27 35.283 27 45.5S35.283 64 45.5 64 64 55.717 64 45.5 55.717 27 45.5 27z" })), L2 = (props) => react_default.createElement(Shape, { viewBox: "0 0 55 89", xmlns: "http://www.w3.org/2000/svg", color: "#66BF3C", ...props }, react_default.createElement("path", { d: "M55 3v83a3 3 0 01-3 3H3a3 3 0 01-3-3V64a3 3 0 013-3h21a3 3 0 003-3V3a3 3 0 013-3h22a3 3 0 013 3z" })), Slice = (props) => react_default.createElement(Shape, { viewBox: "0 0 92 92", xmlns: "http://www.w3.org/2000/svg", color: "#FF4785", ...props }, react_default.createElement("path", { d: "M92 89V3c0-3-2.056-3-3-3C39.294 0 0 39.294 0 89c0 0 0 3 3 3h86a3 3 0 003-3z" })), Square = ({ style, ...props }) => react_default.createElement(
- Shape,
- {
- viewBox: "0 0 90 90",
- xmlns: "http://www.w3.org/2000/svg",
- color: "#1EA7FD",
- ...props,
- style: { borderRadius: 5, ...style }
- },
- react_default.createElement("path", { d: "M0 0h90v90H0z" })
- ), Triangle = (props) => react_default.createElement(Shape, { viewBox: "0 0 96 88", xmlns: "http://www.w3.org/2000/svg", color: "#FFAE00", ...props }, react_default.createElement("path", { d: "M50.63 1.785l44.928 81.77A3 3 0 0192.928 88H3.072a3 3 0 01-2.629-4.445l44.929-81.77a3 3 0 015.258 0z" })), T2 = (props) => react_default.createElement(Shape, { viewBox: "0 0 92 62", xmlns: "http://www.w3.org/2000/svg", color: "#FC521F", ...props }, react_default.createElement("path", { d: "M63 3v25a3 3 0 003 3h23a3 3 0 013 3v25a3 3 0 01-3 3H3a3 3 0 01-3-3V34a3 3 0 013-3h24a3 3 0 003-3V3a3 3 0 013-3h27a3 3 0 013 3z" })), Z = (props) => react_default.createElement(Shape, { viewBox: "0 0 56 90", xmlns: "http://www.w3.org/2000/svg", color: "#6F2CAC", ...props }, react_default.createElement("path", { d: "M28 3v25a3 3 0 003 3h22a3 3 0 013 3v53a3 3 0 01-3 3H31a3 3 0 01-3-3V62a3 3 0 00-3-3H3a3 3 0 01-3-3V3a3 3 0 013-3h22a3 3 0 013 3z" })), fadeToTransparent = keyframes`
- to {
- opacity: 0;
- }
- `, disperse = keyframes`
- to {
- transform: translate(
- calc(cos(var(--angle)) * var(--distance)),
- calc(sin(var(--angle)) * var(--distance))
- ) rotate(var(--rotation));
- }
- `, slideDown = keyframes`
- to {
- transform: translateY(50px);
- }
- `, Container8 = styled.div({
- position: "absolute",
- display: "flex",
- flexDirection: "row",
- flexWrap: "wrap",
- gap: 10,
- "--particle-curve": "cubic-bezier(0.2, 0.56, 0, 1)",
- animation: `${slideDown} 1000ms forwards cubic-bezier(0.587, -0.381, 0.583, 0.599)`,
- animationDelay: "150ms",
- zIndex: 999,
- svg: {
- width: 15,
- height: 15,
- animation: `${fadeToTransparent} var(--fade-duration) forwards, ${disperse} 1000ms forwards var(--particle-curve)`
- }
- }), FADE_DURATION = 1200, NUM_OF_PARTICLES = 8, JITTER = 15, random = (min, max) => Math.random() * (max - min) + min, sortRandomly = (array) => array.sort(() => Math.random() - 0.5), Particles = memo(function({
- anchor: Anchor
- }) {
- let anchorRef = useRef(null), [left, setLeft] = useState(0), [top, setTop] = useState(0), shapes = sortRandomly([Donut, L2, Slice, Square, Triangle, T2, Z]), colors = sortRandomly([
- "#FF0000",
- "#FF4787",
- "#66BF3C",
- "#1EA7FD",
- "#FC521F",
- "#6F2CAC",
- "#FFAE00"
- ]);
- return useLayoutEffect(() => {
- let rect = anchorRef.current?.getBoundingClientRect();
- rect && (setLeft(rect.left + rect.width / 2), setTop(rect.top + rect.height / 2));
- }, []), react_default.createElement("div", { ref: anchorRef }, react_default.createElement(Anchor, null), createPortal(
- react_default.createElement(Container8, { style: { top: top + "px", left: left + "px" } }, shapes.map((Particle, index) => {
- let angle = 360 / NUM_OF_PARTICLES * index + random(-JITTER, JITTER), distance = random(50, 80), rotation = random(-360, 360), style = {
- "--angle": angle + "deg",
- "--distance": distance + "px",
- "--rotation": rotation + "deg",
- "--fade-duration": FADE_DURATION + "ms"
- };
- return react_default.createElement(Particle, { key: Particle.name, style, color: colors[index] });
- })),
- document.getElementById("root") ?? document.body
- ));
- });
-
- // src/manager/components/TextFlip.tsx
- init_react();
- var slideIn2 = keyframes({
- from: {
- transform: "translateY(var(--slide-in-from))",
- opacity: 0
- }
- }), slideOut = keyframes({
- to: {
- transform: "translateY(var(--slide-out-to))",
- opacity: 0
- }
- }), Container9 = styled.div({
- display: "inline-grid",
- gridTemplateColumns: "1fr",
- justifyContent: "center",
- alignItems: "center"
- }), Placeholder2 = styled.div({
- gridArea: "1 / 1",
- userSelect: "none",
- visibility: "hidden"
- }), Text2 = styled.span(({ duration, isExiting, isEntering, reverse }) => {
- let animation;
- return isExiting ? animation = `${slideOut} ${duration}ms forwards` : isEntering && (animation = `${slideIn2} ${duration}ms forwards`), {
- gridArea: "1 / 1",
- animation,
- pointerEvents: isExiting ? "none" : "auto",
- userSelect: isExiting ? "none" : "text",
- "--slide-in-from": reverse ? "-100%" : "100%",
- "--slide-out-to": reverse ? "100%" : "-100%",
- "@media (prefers-reduced-motion: reduce)": {
- animation: "none",
- opacity: isExiting ? 0 : 1,
- transform: "translateY(0)"
- }
- };
- }), TextFlip = ({
- text,
- duration = 250,
- placeholder,
- ...props
- }) => {
- let textRef = useRef(text), [staleValue, setStaleValue] = useState(text), isAnimating = text !== staleValue, reverse = isAnimating && numericCompare(staleValue, text);
- return textRef.current = text, react_default.createElement(Container9, { ...props }, isAnimating && react_default.createElement(
- Text2,
- {
- "aria-hidden": !0,
- duration,
- reverse,
- isExiting: !0,
- onAnimationEnd: () => setStaleValue(textRef.current)
- },
- staleValue
- ), react_default.createElement(Text2, { duration, reverse, isEntering: isAnimating }, text), placeholder && react_default.createElement(Placeholder2, { "aria-hidden": !0 }, placeholder));
- };
- function numericCompare(a2, b2) {
- let na = Number(a2), nb = Number(b2);
- return Number.isNaN(na) || Number.isNaN(nb) ? a2.localeCompare(b2, void 0, { numeric: !0 }) > 0 : na > nb;
- }
-
- // src/manager/components/sidebar/useChecklist.ts
- init_react();
-
- // ../../node_modules/es-toolkit/dist/function/debounce.mjs
- function debounce(func, debounceMs, { signal, edges } = {}) {
- let pendingThis, pendingArgs = null, leading = edges != null && edges.includes("leading"), trailing = edges == null || edges.includes("trailing"), invoke = () => {
- pendingArgs !== null && (func.apply(pendingThis, pendingArgs), pendingThis = void 0, pendingArgs = null);
- }, onTimerEnd = () => {
- trailing && invoke(), cancel();
- }, timeoutId = null, schedule = () => {
- timeoutId != null && clearTimeout(timeoutId), timeoutId = setTimeout(() => {
- timeoutId = null, onTimerEnd();
- }, debounceMs);
- }, cancelTimer = () => {
- timeoutId !== null && (clearTimeout(timeoutId), timeoutId = null);
- }, cancel = () => {
- cancelTimer(), pendingThis = void 0, pendingArgs = null;
- }, flush = () => {
- invoke();
- }, debounced = function(...args) {
- if (signal?.aborted)
- return;
- pendingThis = this, pendingArgs = args;
- let isFirstCall = timeoutId == null;
- schedule(), leading && isFirstCall && invoke();
- };
- return debounced.schedule = schedule, debounced.cancel = cancel, debounced.flush = flush, signal?.addEventListener("abort", cancel, { once: !0 }), debounced;
- }
-
- // ../../node_modules/es-toolkit/dist/function/partial.mjs
- function partial(func, ...partialArgs) {
- return partialImpl(func, placeholderSymbol, ...partialArgs);
- }
- function partialImpl(func, placeholder, ...partialArgs) {
- let partialed = function(...providedArgs) {
- let providedArgsIndex = 0, substitutedArgs = partialArgs.slice().map((arg) => arg === placeholder ? providedArgs[providedArgsIndex++] : arg), remainingArgs = providedArgs.slice(providedArgsIndex);
- return func.apply(this, substitutedArgs.concat(remainingArgs));
- };
- return func.prototype && (partialed.prototype = Object.create(func.prototype)), partialed;
- }
- var placeholderSymbol = Symbol("partial.placeholder");
- partial.placeholder = placeholderSymbol;
-
- // ../../node_modules/es-toolkit/dist/function/partialRight.mjs
- function partialRight(func, ...partialArgs) {
- return partialRightImpl(func, placeholderSymbol2, ...partialArgs);
- }
- function partialRightImpl(func, placeholder, ...partialArgs) {
- let partialedRight = function(...providedArgs) {
- let placeholderLength = partialArgs.filter((arg) => arg === placeholder).length, rangeLength = Math.max(providedArgs.length - placeholderLength, 0), remainingArgs = providedArgs.slice(0, rangeLength), providedArgsIndex = rangeLength, substitutedArgs = partialArgs.slice().map((arg) => arg === placeholder ? providedArgs[providedArgsIndex++] : arg);
- return func.apply(this, remainingArgs.concat(substitutedArgs));
- };
- return func.prototype && (partialedRight.prototype = Object.create(func.prototype)), partialedRight;
- }
- var placeholderSymbol2 = Symbol("partialRight.placeholder");
- partialRight.placeholder = placeholderSymbol2;
-
- // ../../node_modules/es-toolkit/dist/function/retry.mjs
- var DEFAULT_RETRIES = Number.POSITIVE_INFINITY;
-
- // ../../node_modules/es-toolkit/dist/function/throttle.mjs
- function throttle(func, throttleMs, { signal, edges = ["leading", "trailing"] } = {}) {
- let pendingAt = null, debounced = debounce(function(...args) {
- pendingAt = Date.now(), func.apply(this, args);
- }, throttleMs, { signal, edges }), throttled = function(...args) {
- if (pendingAt == null && (pendingAt = Date.now()), Date.now() - pendingAt >= throttleMs) {
- pendingAt = Date.now(), func.apply(this, args), debounced.cancel(), debounced.schedule();
- return;
- }
- debounced.apply(this, args);
- };
- return throttled.cancel = debounced.cancel, throttled.flush = debounced.flush, throttled;
- }
-
- // src/shared/checklist-store/checklistData.tsx
- init_react();
-
- // ../addons/a11y/src/constants.ts
- var ADDON_ID2 = "storybook/a11y", PANEL_ID2 = `${ADDON_ID2}/panel`;
- var UI_STATE_ID = `${ADDON_ID2}/ui`, RESULT = `${ADDON_ID2}/result`, REQUEST = `${ADDON_ID2}/request`, RUNNING = `${ADDON_ID2}/running`, ERROR = `${ADDON_ID2}/error`, MANUAL = `${ADDON_ID2}/manual`, SELECT = `${ADDON_ID2}/select`, DOCUMENTATION_LINK = "writing-tests/accessibility-testing", DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
-
- // ../addons/onboarding/src/constants.ts
- var ADDON_ID3 = "storybook/onboarding", ADDON_ONBOARDING_CHANNEL = `${ADDON_ID3}/channel`;
-
- // src/component-testing/constants.ts
- var ADDON_ID4 = "storybook/interactions", PANEL_ID3 = `${ADDON_ID4}/panel`;
- var DOCUMENTATION_LINK2 = "writing-tests/integrations/vitest-addon", DOCUMENTATION_DISCREPANCY_LINK2 = `${DOCUMENTATION_LINK2}#what-happens-when-there-are-different-test-results-in-multiple-environments`;
-
- // ../addons/vitest/src/constants.ts
- var ADDON_ID5 = "storybook/test", TEST_PROVIDER_ID = `${ADDON_ID5}/test-provider`, STORYBOOK_ADDON_TEST_CHANNEL = `${ADDON_ID5}/channel`;
- var DOCUMENTATION_LINK3 = "writing-tests/integrations/vitest-addon", DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK3}#what-happens-if-vitest-itself-has-an-error`;
- var storeOptions = {
- id: ADDON_ID5,
- initialState: {
- config: {
- coverage: !1,
- a11y: !1
- },
- watching: !1,
- cancelling: !1,
- fatalError: void 0,
- index: { entries: {}, v: 5 },
- previewAnnotations: [],
- currentRun: {
- triggeredBy: void 0,
- config: {
- coverage: !1,
- a11y: !1
- },
- componentTestStatuses: [],
- a11yStatuses: [],
- a11yReports: {},
- reports: {},
- componentTestCount: {
- success: 0,
- error: 0
- },
- a11yCount: {
- success: 0,
- warning: 0,
- error: 0
- },
- storyIds: void 0,
- totalTestCount: void 0,
- startedAt: void 0,
- finishedAt: void 0,
- unhandledErrors: [],
- coverageSummary: void 0
- }
- }
- };
- var STORE_CHANNEL_EVENT_NAME = `UNIVERSAL_STORE:${storeOptions.id}`;
- var TRIGGER_TEST_RUN_REQUEST = `${ADDON_ID5}/trigger-test-run-request`, TRIGGER_TEST_RUN_RESPONSE = `${ADDON_ID5}/trigger-test-run-response`;
-
- // src/storybook-error.ts
- function parseErrorCode({
- code,
- category
- }) {
- let paddedCode = String(code).padStart(4, "0");
- return `SB_${category}_${paddedCode}`;
- }
- function appendErrorRef(url) {
- if (/^(?!.*storybook\.js\.org)|[?&]ref=error\b/.test(url))
- return url;
- try {
- let urlObj = new URL(url);
- return urlObj.searchParams.set("ref", "error"), urlObj.toString();
- } catch {
- return url;
- }
- }
- var StorybookError = class _StorybookError extends Error {
- constructor(props) {
- super(
- _StorybookError.getFullMessage(props),
- props.cause === void 0 ? void 0 : { cause: props.cause }
- );
- /**
- * Data associated with the error. Used to provide additional information in the error message or
- * to be passed to telemetry.
- */
- this.data = {};
- /** Flag used to easily determine if the error originates from Storybook. */
- this.fromStorybook = !0;
- /**
- * Flag used to determine if the error is handled by us and should therefore not be shown to the
- * user.
- */
- this.isHandledError = !1;
- /**
- * A collection of sub errors which relate to a parent error.
- *
- * Sub-errors are used to represent multiple related errors that occurred together. When a
- * StorybookError with sub-errors is sent to telemetry, both the parent error and each sub-error
- * are sent as separate telemetry events. This allows for better error tracking and debugging.
- *
- * @example
- *
- * ```ts
- * const error1 = new SomeError();
- * const error2 = new AnotherError();
- * const parentError = new ParentError({
- * // ... other props
- * subErrors: [error1, error2],
- * });
- * ```
- */
- this.subErrors = [];
- this.category = props.category, this.documentation = props.documentation ?? !1, this.code = props.code, this.isHandledError = props.isHandledError ?? !1, this.name = props.name, this.subErrors = props.subErrors ?? [];
- }
- get fullErrorCode() {
- return parseErrorCode({ code: this.code, category: this.category });
- }
- /** Overrides the default `Error.name` property in the format: SB_<CATEGORY>_<CODE>. */
- get name() {
- let errorName = this._name || this.constructor.name;
- return `${this.fullErrorCode} (${errorName})`;
- }
- set name(name) {
- this._name = name;
- }
- /** Generates the error message along with additional documentation link (if applicable). */
- static getFullMessage({
- documentation,
- code,
- category,
- message
- }) {
- let page;
- return documentation === !0 ? page = `https://storybook.js.org/error/${parseErrorCode({ code, category })}?ref=error` : typeof documentation == "string" ? page = appendErrorRef(documentation) : Array.isArray(documentation) && (page = `
- ${documentation.map((doc) => ` - ${appendErrorRef(doc)}`).join(`
- `)}`), `${message}${page != null ? `
-
- More info: ${page}
- ` : ""}`;
- }
- };
-
- // src/manager-errors.ts
- var StatusTypeIdMismatchError2 = class extends StorybookError {
- constructor(data) {
- super({
- name: "StatusTypeIdMismatchError",
- category: "MANAGER_API" /* MANAGER_API */,
- code: 1,
- message: `Status has typeId "${data.status.typeId}" but was added to store with typeId "${data.typeId}". Full status: ${JSON.stringify(
- data.status,
- null,
- 2
- )}`
- });
- this.data = data;
- }
- };
-
- // ../../node_modules/ts-dedent/esm/index.js
- function dedent(templ) {
- for (var values = [], _i = 1; _i < arguments.length; _i++)
- values[_i - 1] = arguments[_i];
- var strings = Array.from(typeof templ == "string" ? [templ] : templ);
- strings[strings.length - 1] = strings[strings.length - 1].replace(/\r?\n([\t ]*)$/, "");
- var indentLengths = strings.reduce(function(arr, str) {
- var matches = str.match(/\n([\t ]+|(?!\s).)/g);
- return matches ? arr.concat(matches.map(function(match) {
- var _a2, _b;
- return (_b = (_a2 = match.match(/[\t ]/g)) === null || _a2 === void 0 ? void 0 : _a2.length) !== null && _b !== void 0 ? _b : 0;
- })) : arr;
- }, []);
- if (indentLengths.length) {
- var pattern_1 = new RegExp(`
- [ ]{` + Math.min.apply(Math, indentLengths) + "}", "g");
- strings = strings.map(function(str) {
- return str.replace(pattern_1, `
- `);
- });
- }
- strings[0] = strings[0].replace(/^\r?\n/, "");
- var string = strings[0];
- return values.forEach(function(value, i2) {
- var endentations = string.match(/(?:^|\n)( *)$/), endentation = endentations ? endentations[1] : "", indentedValue = value;
- typeof value == "string" && value.includes(`
- `) && (indentedValue = String(value).split(`
- `).map(function(str, i3) {
- return i3 === 0 ? str : "" + endentation + str;
- }).join(`
- `)), string += indentedValue + strings[i2 + 1];
- }), string;
- }
-
- // src/preview-errors.ts
- var StatusTypeIdMismatchError3 = class extends StorybookError {
- constructor(data) {
- super({
- name: "StatusTypeIdMismatchError",
- category: "PREVIEW_API" /* PREVIEW_API */,
- code: 16,
- message: `Status has typeId "${data.status.typeId}" but was added to store with typeId "${data.typeId}". Full status: ${JSON.stringify(
- data.status,
- null,
- 2
- )}`
- });
- this.data = data;
- }
- };
-
- // src/server-errors.ts
- var import_picocolors = __toESM(require_picocolors_browser(), 1);
- var StatusTypeIdMismatchError4 = class extends StorybookError {
- constructor(data) {
- super({
- name: "StatusTypeIdMismatchError",
- category: "CORE-SERVER" /* CORE_SERVER */,
- code: 16,
- message: `Status has typeId "${data.status.typeId}" but was added to store with typeId "${data.typeId}". Full status: ${JSON.stringify(
- data.status,
- null,
- 2
- )}`
- });
- this.data = data;
- }
- };
-
- // src/shared/status-store/index.ts
- var STATUS_VALUE_PREFIX = "status-value:";
- var statusValueShortName = (value) => value === "status-value:affected" ? "related" : value.slice(STATUS_VALUE_PREFIX.length), statusValueDescription = (value) => ({
- "status-value:pending": "Stories with pending status",
- "status-value:success": "Stories with passing tests",
- "status-value:new": "Newly added stories",
- "status-value:modified": "Stories closely linked to code changes",
- "status-value:affected": "Stories likely to be affected by code changes",
- "status-value:warning": "Stories with warnings",
- "status-value:error": "Stories with failing tests",
- "status-value:unknown": "Stories with unknown status"
- })[value];
- var UNIVERSAL_STATUS_STORE_OPTIONS = {
- id: "storybook/status",
- leader: !0,
- initialState: {}
- }, StatusStoreEventType = {
- SELECT: "select"
- };
- function countStatusesByValue(allStatuses) {
- let counts = {};
- for (let statusByTypeId of Object.values(allStatuses))
- for (let status of Object.values(statusByTypeId))
- counts[status.value] = (counts[status.value] ?? 0) + 1;
- return counts;
- }
- function createStatusStore({
- universalStatusStore: universalStatusStore2,
- useUniversalStore: useUniversalStore2,
- environment
- }) {
- let fullStatusStore2 = {
- getAll() {
- return universalStatusStore2.getState();
- },
- set(statuses) {
- universalStatusStore2.setState((state) => {
- let newState = { ...state };
- for (let status of statuses) {
- let { storyId, typeId } = status;
- newState[storyId] = { ...newState[storyId] ?? {}, [typeId]: status };
- }
- return newState;
- });
- },
- onAllStatusChange(listener) {
- return universalStatusStore2.onStateChange((state, prevState) => {
- listener(state, prevState);
- });
- },
- onSelect(listener) {
- return universalStatusStore2.subscribe(StatusStoreEventType.SELECT, (event) => {
- listener(event.payload);
- });
- },
- selectStatuses: (statuses) => {
- universalStatusStore2.send({ type: StatusStoreEventType.SELECT, payload: statuses });
- },
- unset(storyIds) {
- if (!storyIds) {
- universalStatusStore2.setState({});
- return;
- }
- universalStatusStore2.setState((state) => {
- let newState = { ...state };
- for (let storyId of storyIds)
- delete newState[storyId];
- return newState;
- });
- },
- typeId: void 0
- }, getStatusStoreByTypeId2 = (typeId) => ({
- getAll: fullStatusStore2.getAll,
- set(statuses) {
- universalStatusStore2.setState((state) => {
- let newState = { ...state };
- for (let status of statuses) {
- let { storyId } = status;
- if (status.typeId !== typeId)
- switch (environment) {
- case "server":
- throw new StatusTypeIdMismatchError4({
- status,
- typeId
- });
- case "manager":
- throw new StatusTypeIdMismatchError2({
- status,
- typeId
- });
- case "preview":
- default:
- throw new StatusTypeIdMismatchError3({
- status,
- typeId
- });
- }
- newState[storyId] = { ...newState[storyId] ?? {}, [typeId]: status };
- }
- return newState;
- });
- },
- onAllStatusChange: fullStatusStore2.onAllStatusChange,
- onSelect(listener) {
- return universalStatusStore2.subscribe(StatusStoreEventType.SELECT, (event) => {
- event.payload.some((status) => status.typeId === typeId) && listener(event.payload);
- });
- },
- unset(storyIds) {
- universalStatusStore2.setState((state) => {
- let newState = { ...state };
- for (let storyId in newState)
- if (newState[storyId]?.[typeId] && (!storyIds || storyIds?.includes(storyId))) {
- let { [typeId]: omittedStatus, ...storyStatusesWithoutTypeId } = newState[storyId];
- newState[storyId] = storyStatusesWithoutTypeId;
- }
- return newState;
- });
- },
- typeId
- });
- return useUniversalStore2 ? {
- getStatusStoreByTypeId: getStatusStoreByTypeId2,
- fullStatusStore: fullStatusStore2,
- universalStatusStore: universalStatusStore2,
- useStatusStore: (selector) => useUniversalStore2(universalStatusStore2, selector)[0]
- } : { getStatusStoreByTypeId: getStatusStoreByTypeId2, fullStatusStore: fullStatusStore2, universalStatusStore: universalStatusStore2 };
- }
-
- // src/cli/AddonVitestService.constants.ts
- var SUPPORTED_FRAMEWORKS = [
- "html-vite" /* HTML_VITE */,
- "nextjs-vite" /* NEXTJS_VITE */,
- "preact-vite" /* PREACT_VITE */,
- "react-native-web-vite" /* REACT_NATIVE_WEB_VITE */,
- "react-vite" /* REACT_VITE */,
- "solid" /* SOLID */,
- "svelte-vite" /* SVELTE_VITE */,
- "sveltekit" /* SVELTEKIT */,
- "vue3-vite" /* VUE3_VITE */,
- "web-components-vite" /* WEB_COMPONENTS_VITE */,
- "tanstack-react" /* TANSTACK_REACT */
- ];
-
- // src/docs-tools/shared.ts
- var ADDON_ID6 = "storybook/docs", PANEL_ID4 = `${ADDON_ID6}/panel`;
- var SNIPPET_RENDERED = `${ADDON_ID6}/snippet-rendered`;
-
- // src/manager/components/TourGuide/TourGuide.tsx
- init_react();
-
- // ../../node_modules/react-joyride/dist/index.mjs
- init_react();
-
- // ../../node_modules/@gilbarbara/deep-equal/dist/index.mjs
- function isOfType(type) {
- return (value) => typeof value === type;
- }
- var isFunction2 = isOfType("function"), isNull2 = (value) => value === null, isRegex = (value) => Object.prototype.toString.call(value).slice(8, -1) === "RegExp", isObject = (value) => !isUndefined2(value) && !isNull2(value) && (isFunction2(value) || typeof value == "object"), isUndefined2 = isOfType("undefined");
- function equalArray(left, right) {
- let { length } = left;
- if (length !== right.length)
- return !1;
- for (let index = length; index-- !== 0; )
- if (!equal(left[index], right[index]))
- return !1;
- return !0;
- }
- function equalArrayBuffer(left, right) {
- if (left.byteLength !== right.byteLength)
- return !1;
- let view1 = new DataView(left.buffer), view2 = new DataView(right.buffer), index = left.byteLength;
- for (; index--; )
- if (view1.getUint8(index) !== view2.getUint8(index))
- return !1;
- return !0;
- }
- function equalMap(left, right) {
- if (left.size !== right.size)
- return !1;
- for (let index of left.entries())
- if (!right.has(index[0]))
- return !1;
- for (let index of left.entries())
- if (!equal(index[1], right.get(index[0])))
- return !1;
- return !0;
- }
- function equalSet(left, right) {
- if (left.size !== right.size)
- return !1;
- for (let index of left.entries())
- if (!right.has(index[0]))
- return !1;
- return !0;
- }
- function equal(left, right) {
- if (left === right)
- return !0;
- if (left && isObject(left) && right && isObject(right)) {
- if (left.constructor !== right.constructor)
- return !1;
- if (Array.isArray(left) && Array.isArray(right))
- return equalArray(left, right);
- if (left instanceof Map && right instanceof Map)
- return equalMap(left, right);
- if (left instanceof Set && right instanceof Set)
- return equalSet(left, right);
- if (ArrayBuffer.isView(left) && ArrayBuffer.isView(right))
- return equalArrayBuffer(left, right);
- if (isRegex(left) && isRegex(right))
- return left.source === right.source && left.flags === right.flags;
- if (left.valueOf !== Object.prototype.valueOf)
- return left.valueOf() === right.valueOf();
- if (left.toString !== Object.prototype.toString)
- return left.toString() === right.toString();
- let leftKeys = Object.keys(left), rightKeys = Object.keys(right);
- if (leftKeys.length !== rightKeys.length)
- return !1;
- for (let index = leftKeys.length; index-- !== 0; )
- if (!Object.prototype.hasOwnProperty.call(right, leftKeys[index]))
- return !1;
- for (let index = leftKeys.length; index-- !== 0; ) {
- let key = leftKeys[index];
- if (!(key === "_owner" && left.$$typeof) && !equal(left[key], right[key]))
- return !1;
- }
- return !0;
- }
- return Number.isNaN(left) && Number.isNaN(right) ? !0 : left === right;
- }
-
- // ../../node_modules/is-lite/dist/index.mjs
- var objectTypes = [
- "Array",
- "ArrayBuffer",
- "AsyncFunction",
- "AsyncGenerator",
- "AsyncGeneratorFunction",
- "Date",
- "Error",
- "Function",
- "Generator",
- "GeneratorFunction",
- "HTMLElement",
- "Map",
- "Object",
- "Promise",
- "RegExp",
- "Set",
- "WeakMap",
- "WeakSet"
- ], primitiveTypes = [
- "bigint",
- "boolean",
- "null",
- "number",
- "string",
- "symbol",
- "undefined"
- ];
- function getObjectType(value) {
- let objectTypeName = Object.prototype.toString.call(value).slice(8, -1);
- if (/HTML\w+Element/.test(objectTypeName))
- return "HTMLElement";
- if (isObjectType(objectTypeName))
- return objectTypeName;
- }
- function isObjectOfType(type) {
- return (value) => getObjectType(value) === type;
- }
- function isObjectType(name) {
- return objectTypes.includes(name);
- }
- function isOfType2(type) {
- return (value) => typeof value === type;
- }
- function isPrimitiveType(name) {
- return primitiveTypes.includes(name);
- }
- var DOM_PROPERTIES_TO_CHECK = [
- "innerHTML",
- "ownerDocument",
- "style",
- "attributes",
- "nodeValue"
- ];
- function is(value) {
- if (value === null)
- return "null";
- switch (typeof value) {
- case "bigint":
- return "bigint";
- case "boolean":
- return "boolean";
- case "number":
- return "number";
- case "string":
- return "string";
- case "symbol":
- return "symbol";
- case "undefined":
- return "undefined";
- default:
- }
- if (is.array(value))
- return "Array";
- if (is.plainFunction(value))
- return "Function";
- let tagType = getObjectType(value);
- return tagType || "Object";
- }
- is.array = Array.isArray;
- is.arrayOf = (target, predicate) => !is.array(target) && !is.function(predicate) ? !1 : target.every((d2) => predicate(d2));
- is.asyncGeneratorFunction = (value) => getObjectType(value) === "AsyncGeneratorFunction";
- is.asyncFunction = isObjectOfType("AsyncFunction");
- is.bigint = isOfType2("bigint");
- is.boolean = (value) => value === !0 || value === !1;
- is.date = isObjectOfType("Date");
- is.defined = (value) => !is.undefined(value);
- is.domElement = (value) => is.object(value) && !is.plainObject(value) && value.nodeType === 1 && is.string(value.nodeName) && DOM_PROPERTIES_TO_CHECK.every((property) => property in value);
- is.empty = (value) => is.string(value) && value.length === 0 || is.array(value) && value.length === 0 || is.object(value) && !is.map(value) && !is.set(value) && Object.keys(value).length === 0 || is.set(value) && value.size === 0 || is.map(value) && value.size === 0;
- is.error = isObjectOfType("Error");
- is.function = isOfType2("function");
- is.generator = (value) => is.iterable(value) && is.function(value.next) && is.function(value.throw);
- is.generatorFunction = isObjectOfType("GeneratorFunction");
- is.instanceOf = (instance, class_) => !instance || !class_ ? !1 : Object.getPrototypeOf(instance) === class_.prototype;
- is.iterable = (value) => !is.nullOrUndefined(value) && is.function(value[Symbol.iterator]);
- is.map = isObjectOfType("Map");
- is.nan = (value) => Number.isNaN(value);
- is.null = (value) => value === null;
- is.nullOrUndefined = (value) => is.null(value) || is.undefined(value);
- is.number = (value) => isOfType2("number")(value) && !is.nan(value);
- is.numericString = (value) => is.string(value) && value.length > 0 && !Number.isNaN(Number(value));
- is.object = (value) => !is.nullOrUndefined(value) && (is.function(value) || typeof value == "object");
- is.oneOf = (target, value) => is.array(target) ? target.indexOf(value) > -1 : !1;
- is.plainFunction = isObjectOfType("Function");
- is.plainObject = (value) => {
- if (getObjectType(value) !== "Object")
- return !1;
- let prototype = Object.getPrototypeOf(value);
- return prototype === null || prototype === Object.getPrototypeOf({});
- };
- is.primitive = (value) => is.null(value) || isPrimitiveType(typeof value);
- is.promise = isObjectOfType("Promise");
- is.propertyOf = (target, key, predicate) => {
- if (!is.object(target) || !key)
- return !1;
- let value = target[key];
- return is.function(predicate) ? predicate(value) : is.defined(value);
- };
- is.regexp = isObjectOfType("RegExp");
- is.set = isObjectOfType("Set");
- is.string = isOfType2("string");
- is.symbol = isOfType2("symbol");
- is.undefined = isOfType2("undefined");
- is.weakMap = isObjectOfType("WeakMap");
- is.weakSet = isObjectOfType("WeakSet");
- var src_default = is;
-
- // ../../node_modules/react-joyride/node_modules/tree-changes/dist/index.mjs
- function canHaveLength(...arguments_) {
- return arguments_.every((d2) => src_default.string(d2) || src_default.array(d2) || src_default.plainObject(d2));
- }
- function checkEquality(left, right, value) {
- return isSameType(left, right) ? [left, right].every(src_default.array) ? !left.some(hasValue(value)) && right.some(hasValue(value)) : [left, right].every(src_default.plainObject) ? !Object.entries(left).some(hasEntry(value)) && Object.entries(right).some(hasEntry(value)) : right === value : !1;
- }
- function compareNumbers(previousData, data, options2) {
- let { actual, key, previous, type } = options2, left = nested(previousData, key), right = nested(data, key), changed = [left, right].every(src_default.number) && (type === "increased" ? left < right : left > right);
- return src_default.undefined(actual) || (changed = changed && right === actual), src_default.undefined(previous) || (changed = changed && left === previous), changed;
- }
- function compareValues(previousData, data, options2) {
- let { key, type, value } = options2, left = nested(previousData, key), right = nested(data, key), primary = type === "added" ? left : right, secondary = type === "added" ? right : left;
- if (!src_default.nullOrUndefined(value)) {
- if (src_default.defined(primary)) {
- if (src_default.array(primary) || src_default.plainObject(primary))
- return checkEquality(primary, secondary, value);
- } else
- return equal(secondary, value);
- return !1;
- }
- return [left, right].every(src_default.array) ? !secondary.every(isEqualPredicate(primary)) : [left, right].every(src_default.plainObject) ? hasExtraKeys(Object.keys(primary), Object.keys(secondary)) : ![left, right].every((d2) => src_default.primitive(d2) && src_default.defined(d2)) && (type === "added" ? !src_default.defined(left) && src_default.defined(right) : src_default.defined(left) && !src_default.defined(right));
- }
- function getIterables(previousData, data, { key } = {}) {
- let left = nested(previousData, key), right = nested(data, key);
- if (!isSameType(left, right))
- throw new TypeError("Inputs have different types");
- if (!canHaveLength(left, right))
- throw new TypeError("Inputs don't have length");
- return [left, right].every(src_default.plainObject) && (left = Object.keys(left), right = Object.keys(right)), [left, right];
- }
- function hasEntry(input) {
- return ([key, value]) => src_default.array(input) ? equal(input, value) || input.some((d2) => equal(d2, value) || src_default.array(value) && isEqualPredicate(value)(d2)) : src_default.plainObject(input) && input[key] ? !!input[key] && equal(input[key], value) : equal(input, value);
- }
- function hasExtraKeys(left, right) {
- return right.some((d2) => !left.includes(d2));
- }
- function hasValue(input) {
- return (value) => src_default.array(input) ? input.some((d2) => equal(d2, value) || src_default.array(value) && isEqualPredicate(value)(d2)) : equal(input, value);
- }
- function includesOrEqualsTo(previousValue, value) {
- return src_default.array(previousValue) ? previousValue.some((d2) => equal(d2, value)) : equal(previousValue, value);
- }
- function isEqualPredicate(data) {
- return (value) => data.some((d2) => equal(d2, value));
- }
- function isSameType(...arguments_) {
- return arguments_.every(src_default.array) || arguments_.every(src_default.number) || arguments_.every(src_default.plainObject) || arguments_.every(src_default.string);
- }
- function nested(data, property) {
- return src_default.plainObject(data) || src_default.array(data) ? src_default.string(property) ? property.split(".").reduce((acc, d2) => acc && acc[d2], data) : src_default.number(property) ? data[property] : data : data;
- }
- function treeChanges(previousData, data) {
- if ([previousData, data].some(src_default.nullOrUndefined))
- throw new Error("Missing required parameters");
- if (![previousData, data].every((d2) => src_default.plainObject(d2) || src_default.array(d2)))
- throw new Error("Expected plain objects or array");
- return { added: (key, value) => {
- try {
- return compareValues(previousData, data, { key, type: "added", value });
- } catch {
- return !1;
- }
- }, changed: (key, actual, previous) => {
- try {
- let left = nested(previousData, key), right = nested(data, key), hasActual = src_default.defined(actual), hasPrevious = src_default.defined(previous);
- if (hasActual || hasPrevious) {
- let leftComparator = hasPrevious ? includesOrEqualsTo(previous, left) : !includesOrEqualsTo(actual, left), rightComparator = includesOrEqualsTo(actual, right);
- return leftComparator && rightComparator;
- }
- return [left, right].every(src_default.array) || [left, right].every(src_default.plainObject) ? !equal(left, right) : left !== right;
- } catch {
- return !1;
- }
- }, changedFrom: (key, previous, actual) => {
- if (!src_default.defined(key))
- return !1;
- try {
- let left = nested(previousData, key), right = nested(data, key), hasActual = src_default.defined(actual);
- return includesOrEqualsTo(previous, left) && (hasActual ? includesOrEqualsTo(actual, right) : !hasActual);
- } catch {
- return !1;
- }
- }, decreased: (key, actual, previous) => {
- if (!src_default.defined(key))
- return !1;
- try {
- return compareNumbers(previousData, data, { key, actual, previous, type: "decreased" });
- } catch {
- return !1;
- }
- }, emptied: (key) => {
- try {
- let [left, right] = getIterables(previousData, data, { key });
- return !!left.length && !right.length;
- } catch {
- return !1;
- }
- }, filled: (key) => {
- try {
- let [left, right] = getIterables(previousData, data, { key });
- return !left.length && !!right.length;
- } catch {
- return !1;
- }
- }, increased: (key, actual, previous) => {
- if (!src_default.defined(key))
- return !1;
- try {
- return compareNumbers(previousData, data, { key, actual, previous, type: "increased" });
- } catch {
- return !1;
- }
- }, removed: (key, value) => {
- try {
- return compareValues(previousData, data, { key, type: "removed", value });
- } catch {
- return !1;
- }
- } };
- }
-
- // ../../node_modules/react-joyride/dist/index.mjs
- var import_scroll = __toESM(require_scroll(), 1), import_scrollparent = __toESM(require_scrollparent(), 1);
- init_react();
- var import_react_innertext = __toESM(require_react_innertext(), 1);
- var import_deepmerge2 = __toESM(require_cjs(), 1);
- var import_deepmerge3 = __toESM(require_cjs(), 1);
- init_react();
- init_react();
- init_react();
- init_react();
-
- // ../../node_modules/react-floater/es/index.js
- init_react();
- var import_prop_types2 = __toESM(require_prop_types());
-
- // ../../node_modules/popper.js/dist/esm/popper.js
- var isBrowser2 = typeof window < "u" && typeof document < "u" && typeof navigator < "u", timeoutDuration = (function() {
- for (var longerTimeoutBrowsers = ["Edge", "Trident", "Firefox"], i2 = 0; i2 < longerTimeoutBrowsers.length; i2 += 1)
- if (isBrowser2 && navigator.userAgent.indexOf(longerTimeoutBrowsers[i2]) >= 0)
- return 1;
- return 0;
- })();
- function microtaskDebounce(fn) {
- var called = !1;
- return function() {
- called || (called = !0, window.Promise.resolve().then(function() {
- called = !1, fn();
- }));
- };
- }
- function taskDebounce(fn) {
- var scheduled = !1;
- return function() {
- scheduled || (scheduled = !0, setTimeout(function() {
- scheduled = !1, fn();
- }, timeoutDuration));
- };
- }
- var supportsMicroTasks = isBrowser2 && window.Promise, debounce2 = supportsMicroTasks ? microtaskDebounce : taskDebounce;
- function isFunction3(functionToCheck) {
- var getType = {};
- return functionToCheck && getType.toString.call(functionToCheck) === "[object Function]";
- }
- function getStyleComputedProperty(element, property) {
- if (element.nodeType !== 1)
- return [];
- var window2 = element.ownerDocument.defaultView, css2 = window2.getComputedStyle(element, null);
- return property ? css2[property] : css2;
- }
- function getParentNode(element) {
- return element.nodeName === "HTML" ? element : element.parentNode || element.host;
- }
- function getScrollParent(element) {
- if (!element)
- return document.body;
- switch (element.nodeName) {
- case "HTML":
- case "BODY":
- return element.ownerDocument.body;
- case "#document":
- return element.body;
- }
- var _getStyleComputedProp = getStyleComputedProperty(element), overflow = _getStyleComputedProp.overflow, overflowX = _getStyleComputedProp.overflowX, overflowY = _getStyleComputedProp.overflowY;
- return /(auto|scroll|overlay)/.test(overflow + overflowY + overflowX) ? element : getScrollParent(getParentNode(element));
- }
- function getReferenceNode(reference) {
- return reference && reference.referenceNode ? reference.referenceNode : reference;
- }
- var isIE11 = isBrowser2 && !!(window.MSInputMethodContext && document.documentMode), isIE10 = isBrowser2 && /MSIE 10/.test(navigator.userAgent);
- function isIE(version3) {
- return version3 === 11 ? isIE11 : version3 === 10 ? isIE10 : isIE11 || isIE10;
- }
- function getOffsetParent(element) {
- if (!element)
- return document.documentElement;
- for (var noOffsetParent = isIE(10) ? document.body : null, offsetParent = element.offsetParent || null; offsetParent === noOffsetParent && element.nextElementSibling; )
- offsetParent = (element = element.nextElementSibling).offsetParent;
- var nodeName = offsetParent && offsetParent.nodeName;
- return !nodeName || nodeName === "BODY" || nodeName === "HTML" ? element ? element.ownerDocument.documentElement : document.documentElement : ["TH", "TD", "TABLE"].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, "position") === "static" ? getOffsetParent(offsetParent) : offsetParent;
- }
- function isOffsetContainer(element) {
- var nodeName = element.nodeName;
- return nodeName === "BODY" ? !1 : nodeName === "HTML" || getOffsetParent(element.firstElementChild) === element;
- }
- function getRoot(node) {
- return node.parentNode !== null ? getRoot(node.parentNode) : node;
- }
- function findCommonOffsetParent(element1, element2) {
- if (!element1 || !element1.nodeType || !element2 || !element2.nodeType)
- return document.documentElement;
- var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING, start = order ? element1 : element2, end = order ? element2 : element1, range = document.createRange();
- range.setStart(start, 0), range.setEnd(end, 0);
- var commonAncestorContainer = range.commonAncestorContainer;
- if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end))
- return isOffsetContainer(commonAncestorContainer) ? commonAncestorContainer : getOffsetParent(commonAncestorContainer);
- var element1root = getRoot(element1);
- return element1root.host ? findCommonOffsetParent(element1root.host, element2) : findCommonOffsetParent(element1, getRoot(element2).host);
- }
- function getScroll(element) {
- var side = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "top", upperSide = side === "top" ? "scrollTop" : "scrollLeft", nodeName = element.nodeName;
- if (nodeName === "BODY" || nodeName === "HTML") {
- var html = element.ownerDocument.documentElement, scrollingElement = element.ownerDocument.scrollingElement || html;
- return scrollingElement[upperSide];
- }
- return element[upperSide];
- }
- function includeScroll(rect, element) {
- var subtract = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1, scrollTop = getScroll(element, "top"), scrollLeft = getScroll(element, "left"), modifier = subtract ? -1 : 1;
- return rect.top += scrollTop * modifier, rect.bottom += scrollTop * modifier, rect.left += scrollLeft * modifier, rect.right += scrollLeft * modifier, rect;
- }
- function getBordersSize(styles2, axis) {
- var sideA = axis === "x" ? "Left" : "Top", sideB = sideA === "Left" ? "Right" : "Bottom";
- return parseFloat(styles2["border" + sideA + "Width"]) + parseFloat(styles2["border" + sideB + "Width"]);
- }
- function getSize(axis, body, html, computedStyle) {
- return Math.max(body["offset" + axis], body["scroll" + axis], html["client" + axis], html["offset" + axis], html["scroll" + axis], isIE(10) ? parseInt(html["offset" + axis]) + parseInt(computedStyle["margin" + (axis === "Height" ? "Top" : "Left")]) + parseInt(computedStyle["margin" + (axis === "Height" ? "Bottom" : "Right")]) : 0);
- }
- function getWindowSizes(document11) {
- var body = document11.body, html = document11.documentElement, computedStyle = isIE(10) && getComputedStyle(html);
- return {
- height: getSize("Height", body, html, computedStyle),
- width: getSize("Width", body, html, computedStyle)
- };
- }
- var classCallCheck = function(instance, Constructor) {
- if (!(instance instanceof Constructor))
- throw new TypeError("Cannot call a class as a function");
- }, createClass = /* @__PURE__ */ (function() {
- function defineProperties(target, props) {
- for (var i2 = 0; i2 < props.length; i2++) {
- var descriptor = props[i2];
- descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor);
- }
- }
- return function(Constructor, protoProps, staticProps) {
- return protoProps && defineProperties(Constructor.prototype, protoProps), staticProps && defineProperties(Constructor, staticProps), Constructor;
- };
- })(), defineProperty = function(obj, key, value) {
- return key in obj ? Object.defineProperty(obj, key, {
- value,
- enumerable: !0,
- configurable: !0,
- writable: !0
- }) : obj[key] = value, obj;
- }, _extends2 = Object.assign || function(target) {
- for (var i2 = 1; i2 < arguments.length; i2++) {
- var source = arguments[i2];
- for (var key in source)
- Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
- }
- return target;
- };
- function getClientRect(offsets) {
- return _extends2({}, offsets, {
- right: offsets.left + offsets.width,
- bottom: offsets.top + offsets.height
- });
- }
- function getBoundingClientRect(element) {
- var rect = {};
- try {
- if (isIE(10)) {
- rect = element.getBoundingClientRect();
- var scrollTop = getScroll(element, "top"), scrollLeft = getScroll(element, "left");
- rect.top += scrollTop, rect.left += scrollLeft, rect.bottom += scrollTop, rect.right += scrollLeft;
- } else
- rect = element.getBoundingClientRect();
- } catch {
- }
- var result = {
- left: rect.left,
- top: rect.top,
- width: rect.right - rect.left,
- height: rect.bottom - rect.top
- }, sizes = element.nodeName === "HTML" ? getWindowSizes(element.ownerDocument) : {}, width = sizes.width || element.clientWidth || result.width, height = sizes.height || element.clientHeight || result.height, horizScrollbar = element.offsetWidth - width, vertScrollbar = element.offsetHeight - height;
- if (horizScrollbar || vertScrollbar) {
- var styles2 = getStyleComputedProperty(element);
- horizScrollbar -= getBordersSize(styles2, "x"), vertScrollbar -= getBordersSize(styles2, "y"), result.width -= horizScrollbar, result.height -= vertScrollbar;
- }
- return getClientRect(result);
- }
- function getOffsetRectRelativeToArbitraryNode(children, parent) {
- var fixedPosition = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1, isIE102 = isIE(10), isHTML = parent.nodeName === "HTML", childrenRect = getBoundingClientRect(children), parentRect = getBoundingClientRect(parent), scrollParent2 = getScrollParent(children), styles2 = getStyleComputedProperty(parent), borderTopWidth = parseFloat(styles2.borderTopWidth), borderLeftWidth = parseFloat(styles2.borderLeftWidth);
- fixedPosition && isHTML && (parentRect.top = Math.max(parentRect.top, 0), parentRect.left = Math.max(parentRect.left, 0));
- var offsets = getClientRect({
- top: childrenRect.top - parentRect.top - borderTopWidth,
- left: childrenRect.left - parentRect.left - borderLeftWidth,
- width: childrenRect.width,
- height: childrenRect.height
- });
- if (offsets.marginTop = 0, offsets.marginLeft = 0, !isIE102 && isHTML) {
- var marginTop = parseFloat(styles2.marginTop), marginLeft = parseFloat(styles2.marginLeft);
- offsets.top -= borderTopWidth - marginTop, offsets.bottom -= borderTopWidth - marginTop, offsets.left -= borderLeftWidth - marginLeft, offsets.right -= borderLeftWidth - marginLeft, offsets.marginTop = marginTop, offsets.marginLeft = marginLeft;
- }
- return (isIE102 && !fixedPosition ? parent.contains(scrollParent2) : parent === scrollParent2 && scrollParent2.nodeName !== "BODY") && (offsets = includeScroll(offsets, parent)), offsets;
- }
- function getViewportOffsetRectRelativeToArtbitraryNode(element) {
- var excludeScroll = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, html = element.ownerDocument.documentElement, relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html), width = Math.max(html.clientWidth, window.innerWidth || 0), height = Math.max(html.clientHeight, window.innerHeight || 0), scrollTop = excludeScroll ? 0 : getScroll(html), scrollLeft = excludeScroll ? 0 : getScroll(html, "left"), offset2 = {
- top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
- left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
- width,
- height
- };
- return getClientRect(offset2);
- }
- function isFixed(element) {
- var nodeName = element.nodeName;
- if (nodeName === "BODY" || nodeName === "HTML")
- return !1;
- if (getStyleComputedProperty(element, "position") === "fixed")
- return !0;
- var parentNode = getParentNode(element);
- return parentNode ? isFixed(parentNode) : !1;
- }
- function getFixedPositionOffsetParent(element) {
- if (!element || !element.parentElement || isIE())
- return document.documentElement;
- for (var el = element.parentElement; el && getStyleComputedProperty(el, "transform") === "none"; )
- el = el.parentElement;
- return el || document.documentElement;
- }
- function getBoundaries(popper, reference, padding, boundariesElement) {
- var fixedPosition = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, boundaries = { top: 0, left: 0 }, offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
- if (boundariesElement === "viewport")
- boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
- else {
- var boundariesNode = void 0;
- boundariesElement === "scrollParent" ? (boundariesNode = getScrollParent(getParentNode(reference)), boundariesNode.nodeName === "BODY" && (boundariesNode = popper.ownerDocument.documentElement)) : boundariesElement === "window" ? boundariesNode = popper.ownerDocument.documentElement : boundariesNode = boundariesElement;
- var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);
- if (boundariesNode.nodeName === "HTML" && !isFixed(offsetParent)) {
- var _getWindowSizes = getWindowSizes(popper.ownerDocument), height = _getWindowSizes.height, width = _getWindowSizes.width;
- boundaries.top += offsets.top - offsets.marginTop, boundaries.bottom = height + offsets.top, boundaries.left += offsets.left - offsets.marginLeft, boundaries.right = width + offsets.left;
- } else
- boundaries = offsets;
- }
- padding = padding || 0;
- var isPaddingNumber = typeof padding == "number";
- return boundaries.left += isPaddingNumber ? padding : padding.left || 0, boundaries.top += isPaddingNumber ? padding : padding.top || 0, boundaries.right -= isPaddingNumber ? padding : padding.right || 0, boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0, boundaries;
- }
- function getArea(_ref) {
- var width = _ref.width, height = _ref.height;
- return width * height;
- }
- function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
- var padding = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 0;
- if (placement.indexOf("auto") === -1)
- return placement;
- var boundaries = getBoundaries(popper, reference, padding, boundariesElement), rects = {
- top: {
- width: boundaries.width,
- height: refRect.top - boundaries.top
- },
- right: {
- width: boundaries.right - refRect.right,
- height: boundaries.height
- },
- bottom: {
- width: boundaries.width,
- height: boundaries.bottom - refRect.bottom
- },
- left: {
- width: refRect.left - boundaries.left,
- height: boundaries.height
- }
- }, sortedAreas = Object.keys(rects).map(function(key) {
- return _extends2({
- key
- }, rects[key], {
- area: getArea(rects[key])
- });
- }).sort(function(a2, b2) {
- return b2.area - a2.area;
- }), filteredAreas = sortedAreas.filter(function(_ref2) {
- var width = _ref2.width, height = _ref2.height;
- return width >= popper.clientWidth && height >= popper.clientHeight;
- }), computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key, variation = placement.split("-")[1];
- return computedPlacement + (variation ? "-" + variation : "");
- }
- function getReferenceOffsets(state, popper, reference) {
- var fixedPosition = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
- return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
- }
- function getOuterSizes(element) {
- var window2 = element.ownerDocument.defaultView, styles2 = window2.getComputedStyle(element), x2 = parseFloat(styles2.marginTop || 0) + parseFloat(styles2.marginBottom || 0), y2 = parseFloat(styles2.marginLeft || 0) + parseFloat(styles2.marginRight || 0), result = {
- width: element.offsetWidth + y2,
- height: element.offsetHeight + x2
- };
- return result;
- }
- function getOppositePlacement(placement) {
- var hash = { left: "right", right: "left", bottom: "top", top: "bottom" };
- return placement.replace(/left|right|bottom|top/g, function(matched) {
- return hash[matched];
- });
- }
- function getPopperOffsets(popper, referenceOffsets, placement) {
- placement = placement.split("-")[0];
- var popperRect = getOuterSizes(popper), popperOffsets = {
- width: popperRect.width,
- height: popperRect.height
- }, isHoriz = ["right", "left"].indexOf(placement) !== -1, mainSide = isHoriz ? "top" : "left", secondarySide = isHoriz ? "left" : "top", measurement = isHoriz ? "height" : "width", secondaryMeasurement = isHoriz ? "width" : "height";
- return popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2, placement === secondarySide ? popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement] : popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)], popperOffsets;
- }
- function find(arr, check) {
- return Array.prototype.find ? arr.find(check) : arr.filter(check)[0];
- }
- function findIndex(arr, prop, value) {
- if (Array.prototype.findIndex)
- return arr.findIndex(function(cur) {
- return cur[prop] === value;
- });
- var match = find(arr, function(obj) {
- return obj[prop] === value;
- });
- return arr.indexOf(match);
- }
- function runModifiers(modifiers2, data, ends) {
- var modifiersToRun = ends === void 0 ? modifiers2 : modifiers2.slice(0, findIndex(modifiers2, "name", ends));
- return modifiersToRun.forEach(function(modifier) {
- modifier.function && console.warn("`modifier.function` is deprecated, use `modifier.fn`!");
- var fn = modifier.function || modifier.fn;
- modifier.enabled && isFunction3(fn) && (data.offsets.popper = getClientRect(data.offsets.popper), data.offsets.reference = getClientRect(data.offsets.reference), data = fn(data, modifier));
- }), data;
- }
- function update() {
- if (!this.state.isDestroyed) {
- var data = {
- instance: this,
- styles: {},
- arrowStyles: {},
- attributes: {},
- flipped: !1,
- offsets: {}
- };
- data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed), data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding), data.originalPlacement = data.placement, data.positionFixed = this.options.positionFixed, data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement), data.offsets.popper.position = this.options.positionFixed ? "fixed" : "absolute", data = runModifiers(this.modifiers, data), this.state.isCreated ? this.options.onUpdate(data) : (this.state.isCreated = !0, this.options.onCreate(data));
- }
- }
- function isModifierEnabled(modifiers2, modifierName) {
- return modifiers2.some(function(_ref) {
- var name = _ref.name, enabled = _ref.enabled;
- return enabled && name === modifierName;
- });
- }
- function getSupportedPropertyName(property) {
- for (var prefixes = [!1, "ms", "Webkit", "Moz", "O"], upperProp = property.charAt(0).toUpperCase() + property.slice(1), i2 = 0; i2 < prefixes.length; i2++) {
- var prefix = prefixes[i2], toCheck = prefix ? "" + prefix + upperProp : property;
- if (typeof document.body.style[toCheck] < "u")
- return toCheck;
- }
- return null;
- }
- function destroy() {
- return this.state.isDestroyed = !0, isModifierEnabled(this.modifiers, "applyStyle") && (this.popper.removeAttribute("x-placement"), this.popper.style.position = "", this.popper.style.top = "", this.popper.style.left = "", this.popper.style.right = "", this.popper.style.bottom = "", this.popper.style.willChange = "", this.popper.style[getSupportedPropertyName("transform")] = ""), this.disableEventListeners(), this.options.removeOnDestroy && this.popper.parentNode.removeChild(this.popper), this;
- }
- function getWindow(element) {
- var ownerDocument = element.ownerDocument;
- return ownerDocument ? ownerDocument.defaultView : window;
- }
- function attachToScrollParents(scrollParent2, event, callback, scrollParents) {
- var isBody = scrollParent2.nodeName === "BODY", target = isBody ? scrollParent2.ownerDocument.defaultView : scrollParent2;
- target.addEventListener(event, callback, { passive: !0 }), isBody || attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents), scrollParents.push(target);
- }
- function setupEventListeners(reference, options2, state, updateBound) {
- state.updateBound = updateBound, getWindow(reference).addEventListener("resize", state.updateBound, { passive: !0 });
- var scrollElement = getScrollParent(reference);
- return attachToScrollParents(scrollElement, "scroll", state.updateBound, state.scrollParents), state.scrollElement = scrollElement, state.eventsEnabled = !0, state;
- }
- function enableEventListeners() {
- this.state.eventsEnabled || (this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate));
- }
- function removeEventListeners(reference, state) {
- return getWindow(reference).removeEventListener("resize", state.updateBound), state.scrollParents.forEach(function(target) {
- target.removeEventListener("scroll", state.updateBound);
- }), state.updateBound = null, state.scrollParents = [], state.scrollElement = null, state.eventsEnabled = !1, state;
- }
- function disableEventListeners() {
- this.state.eventsEnabled && (cancelAnimationFrame(this.scheduleUpdate), this.state = removeEventListeners(this.reference, this.state));
- }
- function isNumeric(n3) {
- return n3 !== "" && !isNaN(parseFloat(n3)) && isFinite(n3);
- }
- function setStyles(element, styles2) {
- Object.keys(styles2).forEach(function(prop) {
- var unit = "";
- ["width", "height", "top", "right", "bottom", "left"].indexOf(prop) !== -1 && isNumeric(styles2[prop]) && (unit = "px"), element.style[prop] = styles2[prop] + unit;
- });
- }
- function setAttributes(element, attributes) {
- Object.keys(attributes).forEach(function(prop) {
- var value = attributes[prop];
- value !== !1 ? element.setAttribute(prop, attributes[prop]) : element.removeAttribute(prop);
- });
- }
- function applyStyle(data) {
- return setStyles(data.instance.popper, data.styles), setAttributes(data.instance.popper, data.attributes), data.arrowElement && Object.keys(data.arrowStyles).length && setStyles(data.arrowElement, data.arrowStyles), data;
- }
- function applyStyleOnLoad(reference, popper, options2, modifierOptions, state) {
- var referenceOffsets = getReferenceOffsets(state, popper, reference, options2.positionFixed), placement = computeAutoPlacement(options2.placement, referenceOffsets, popper, reference, options2.modifiers.flip.boundariesElement, options2.modifiers.flip.padding);
- return popper.setAttribute("x-placement", placement), setStyles(popper, { position: options2.positionFixed ? "fixed" : "absolute" }), options2;
- }
- function getRoundedOffsets(data, shouldRound) {
- var _data$offsets = data.offsets, popper = _data$offsets.popper, reference = _data$offsets.reference, round = Math.round, floor = Math.floor, noRound = function(v2) {
- return v2;
- }, referenceWidth = round(reference.width), popperWidth = round(popper.width), isVertical = ["left", "right"].indexOf(data.placement) !== -1, isVariation = data.placement.indexOf("-") !== -1, sameWidthParity = referenceWidth % 2 === popperWidth % 2, bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1, horizontalToInteger = shouldRound ? isVertical || isVariation || sameWidthParity ? round : floor : noRound, verticalToInteger = shouldRound ? round : noRound;
- return {
- left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
- top: verticalToInteger(popper.top),
- bottom: verticalToInteger(popper.bottom),
- right: horizontalToInteger(popper.right)
- };
- }
- var isFirefox = isBrowser2 && /Firefox/i.test(navigator.userAgent);
- function computeStyle(data, options2) {
- var x2 = options2.x, y2 = options2.y, popper = data.offsets.popper, legacyGpuAccelerationOption = find(data.instance.modifiers, function(modifier) {
- return modifier.name === "applyStyle";
- }).gpuAcceleration;
- legacyGpuAccelerationOption !== void 0 && console.warn("WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!");
- var gpuAcceleration = legacyGpuAccelerationOption !== void 0 ? legacyGpuAccelerationOption : options2.gpuAcceleration, offsetParent = getOffsetParent(data.instance.popper), offsetParentRect = getBoundingClientRect(offsetParent), styles2 = {
- position: popper.position
- }, offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox), sideA = x2 === "bottom" ? "top" : "bottom", sideB = y2 === "right" ? "left" : "right", prefixedProperty = getSupportedPropertyName("transform"), left = void 0, top = void 0;
- if (sideA === "bottom" ? offsetParent.nodeName === "HTML" ? top = -offsetParent.clientHeight + offsets.bottom : top = -offsetParentRect.height + offsets.bottom : top = offsets.top, sideB === "right" ? offsetParent.nodeName === "HTML" ? left = -offsetParent.clientWidth + offsets.right : left = -offsetParentRect.width + offsets.right : left = offsets.left, gpuAcceleration && prefixedProperty)
- styles2[prefixedProperty] = "translate3d(" + left + "px, " + top + "px, 0)", styles2[sideA] = 0, styles2[sideB] = 0, styles2.willChange = "transform";
- else {
- var invertTop = sideA === "bottom" ? -1 : 1, invertLeft = sideB === "right" ? -1 : 1;
- styles2[sideA] = top * invertTop, styles2[sideB] = left * invertLeft, styles2.willChange = sideA + ", " + sideB;
- }
- var attributes = {
- "x-placement": data.placement
- };
- return data.attributes = _extends2({}, attributes, data.attributes), data.styles = _extends2({}, styles2, data.styles), data.arrowStyles = _extends2({}, data.offsets.arrow, data.arrowStyles), data;
- }
- function isModifierRequired(modifiers2, requestingName, requestedName) {
- var requesting = find(modifiers2, function(_ref) {
- var name = _ref.name;
- return name === requestingName;
- }), isRequired = !!requesting && modifiers2.some(function(modifier) {
- return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
- });
- if (!isRequired) {
- var _requesting = "`" + requestingName + "`", requested = "`" + requestedName + "`";
- console.warn(requested + " modifier is required by " + _requesting + " modifier in order to work, be sure to include it before " + _requesting + "!");
- }
- return isRequired;
- }
- function arrow(data, options2) {
- var _data$offsets$arrow;
- if (!isModifierRequired(data.instance.modifiers, "arrow", "keepTogether"))
- return data;
- var arrowElement = options2.element;
- if (typeof arrowElement == "string") {
- if (arrowElement = data.instance.popper.querySelector(arrowElement), !arrowElement)
- return data;
- } else if (!data.instance.popper.contains(arrowElement))
- return console.warn("WARNING: `arrow.element` must be child of its popper element!"), data;
- var placement = data.placement.split("-")[0], _data$offsets = data.offsets, popper = _data$offsets.popper, reference = _data$offsets.reference, isVertical = ["left", "right"].indexOf(placement) !== -1, len = isVertical ? "height" : "width", sideCapitalized = isVertical ? "Top" : "Left", side = sideCapitalized.toLowerCase(), altSide = isVertical ? "left" : "top", opSide = isVertical ? "bottom" : "right", arrowElementSize = getOuterSizes(arrowElement)[len];
- reference[opSide] - arrowElementSize < popper[side] && (data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize)), reference[side] + arrowElementSize > popper[opSide] && (data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide]), data.offsets.popper = getClientRect(data.offsets.popper);
- var center = reference[side] + reference[len] / 2 - arrowElementSize / 2, css2 = getStyleComputedProperty(data.instance.popper), popperMarginSide = parseFloat(css2["margin" + sideCapitalized]), popperBorderSide = parseFloat(css2["border" + sideCapitalized + "Width"]), sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
- return sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0), data.arrowElement = arrowElement, data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ""), _data$offsets$arrow), data;
- }
- function getOppositeVariation(variation) {
- return variation === "end" ? "start" : variation === "start" ? "end" : variation;
- }
- var placements = ["auto-start", "auto", "auto-end", "top-start", "top", "top-end", "right-start", "right", "right-end", "bottom-end", "bottom", "bottom-start", "left-end", "left", "left-start"], validPlacements = placements.slice(3);
- function clockwise(placement) {
- var counter = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, index = validPlacements.indexOf(placement), arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
- return counter ? arr.reverse() : arr;
- }
- var BEHAVIORS = {
- FLIP: "flip",
- CLOCKWISE: "clockwise",
- COUNTERCLOCKWISE: "counterclockwise"
- };
- function flip(data, options2) {
- if (isModifierEnabled(data.instance.modifiers, "inner") || data.flipped && data.placement === data.originalPlacement)
- return data;
- var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options2.padding, options2.boundariesElement, data.positionFixed), placement = data.placement.split("-")[0], placementOpposite = getOppositePlacement(placement), variation = data.placement.split("-")[1] || "", flipOrder = [];
- switch (options2.behavior) {
- case BEHAVIORS.FLIP:
- flipOrder = [placement, placementOpposite];
- break;
- case BEHAVIORS.CLOCKWISE:
- flipOrder = clockwise(placement);
- break;
- case BEHAVIORS.COUNTERCLOCKWISE:
- flipOrder = clockwise(placement, !0);
- break;
- default:
- flipOrder = options2.behavior;
- }
- return flipOrder.forEach(function(step, index) {
- if (placement !== step || flipOrder.length === index + 1)
- return data;
- placement = data.placement.split("-")[0], placementOpposite = getOppositePlacement(placement);
- var popperOffsets = data.offsets.popper, refOffsets = data.offsets.reference, floor = Math.floor, overlapsRef = placement === "left" && floor(popperOffsets.right) > floor(refOffsets.left) || placement === "right" && floor(popperOffsets.left) < floor(refOffsets.right) || placement === "top" && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === "bottom" && floor(popperOffsets.top) < floor(refOffsets.bottom), overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left), overflowsRight = floor(popperOffsets.right) > floor(boundaries.right), overflowsTop = floor(popperOffsets.top) < floor(boundaries.top), overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom), overflowsBoundaries = placement === "left" && overflowsLeft || placement === "right" && overflowsRight || placement === "top" && overflowsTop || placement === "bottom" && overflowsBottom, isVertical = ["top", "bottom"].indexOf(placement) !== -1, flippedVariationByRef = !!options2.flipVariations && (isVertical && variation === "start" && overflowsLeft || isVertical && variation === "end" && overflowsRight || !isVertical && variation === "start" && overflowsTop || !isVertical && variation === "end" && overflowsBottom), flippedVariationByContent = !!options2.flipVariationsByContent && (isVertical && variation === "start" && overflowsRight || isVertical && variation === "end" && overflowsLeft || !isVertical && variation === "start" && overflowsBottom || !isVertical && variation === "end" && overflowsTop), flippedVariation = flippedVariationByRef || flippedVariationByContent;
- (overlapsRef || overflowsBoundaries || flippedVariation) && (data.flipped = !0, (overlapsRef || overflowsBoundaries) && (placement = flipOrder[index + 1]), flippedVariation && (variation = getOppositeVariation(variation)), data.placement = placement + (variation ? "-" + variation : ""), data.offsets.popper = _extends2({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement)), data = runModifiers(data.instance.modifiers, data, "flip"));
- }), data;
- }
- function keepTogether(data) {
- var _data$offsets = data.offsets, popper = _data$offsets.popper, reference = _data$offsets.reference, placement = data.placement.split("-")[0], floor = Math.floor, isVertical = ["top", "bottom"].indexOf(placement) !== -1, side = isVertical ? "right" : "bottom", opSide = isVertical ? "left" : "top", measurement = isVertical ? "width" : "height";
- return popper[side] < floor(reference[opSide]) && (data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement]), popper[opSide] > floor(reference[side]) && (data.offsets.popper[opSide] = floor(reference[side])), data;
- }
- function toValue(str, measurement, popperOffsets, referenceOffsets) {
- var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/), value = +split[1], unit = split[2];
- if (!value)
- return str;
- if (unit.indexOf("%") === 0) {
- var element = void 0;
- switch (unit) {
- case "%p":
- element = popperOffsets;
- break;
- case "%":
- case "%r":
- default:
- element = referenceOffsets;
- }
- var rect = getClientRect(element);
- return rect[measurement] / 100 * value;
- } else if (unit === "vh" || unit === "vw") {
- var size = void 0;
- return unit === "vh" ? size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) : size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0), size / 100 * value;
- } else
- return value;
- }
- function parseOffset(offset2, popperOffsets, referenceOffsets, basePlacement) {
- var offsets = [0, 0], useHeight = ["right", "left"].indexOf(basePlacement) !== -1, fragments = offset2.split(/(\+|\-)/).map(function(frag) {
- return frag.trim();
- }), divider = fragments.indexOf(find(fragments, function(frag) {
- return frag.search(/,|\s/) !== -1;
- }));
- fragments[divider] && fragments[divider].indexOf(",") === -1 && console.warn("Offsets separated by white space(s) are deprecated, use a comma (,) instead.");
- var splitRegex = /\s*,\s*|\s+/, ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments];
- return ops = ops.map(function(op, index) {
- var measurement = (index === 1 ? !useHeight : useHeight) ? "height" : "width", mergeWithPrevious = !1;
- return op.reduce(function(a2, b2) {
- return a2[a2.length - 1] === "" && ["+", "-"].indexOf(b2) !== -1 ? (a2[a2.length - 1] = b2, mergeWithPrevious = !0, a2) : mergeWithPrevious ? (a2[a2.length - 1] += b2, mergeWithPrevious = !1, a2) : a2.concat(b2);
- }, []).map(function(str) {
- return toValue(str, measurement, popperOffsets, referenceOffsets);
- });
- }), ops.forEach(function(op, index) {
- op.forEach(function(frag, index2) {
- isNumeric(frag) && (offsets[index] += frag * (op[index2 - 1] === "-" ? -1 : 1));
- });
- }), offsets;
- }
- function offset(data, _ref) {
- var offset2 = _ref.offset, placement = data.placement, _data$offsets = data.offsets, popper = _data$offsets.popper, reference = _data$offsets.reference, basePlacement = placement.split("-")[0], offsets = void 0;
- return isNumeric(+offset2) ? offsets = [+offset2, 0] : offsets = parseOffset(offset2, popper, reference, basePlacement), basePlacement === "left" ? (popper.top += offsets[0], popper.left -= offsets[1]) : basePlacement === "right" ? (popper.top += offsets[0], popper.left += offsets[1]) : basePlacement === "top" ? (popper.left += offsets[0], popper.top -= offsets[1]) : basePlacement === "bottom" && (popper.left += offsets[0], popper.top += offsets[1]), data.popper = popper, data;
- }
- function preventOverflow(data, options2) {
- var boundariesElement = options2.boundariesElement || getOffsetParent(data.instance.popper);
- data.instance.reference === boundariesElement && (boundariesElement = getOffsetParent(boundariesElement));
- var transformProp = getSupportedPropertyName("transform"), popperStyles = data.instance.popper.style, top = popperStyles.top, left = popperStyles.left, transform = popperStyles[transformProp];
- popperStyles.top = "", popperStyles.left = "", popperStyles[transformProp] = "";
- var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options2.padding, boundariesElement, data.positionFixed);
- popperStyles.top = top, popperStyles.left = left, popperStyles[transformProp] = transform, options2.boundaries = boundaries;
- var order = options2.priority, popper = data.offsets.popper, check = {
- primary: function(placement) {
- var value = popper[placement];
- return popper[placement] < boundaries[placement] && !options2.escapeWithReference && (value = Math.max(popper[placement], boundaries[placement])), defineProperty({}, placement, value);
- },
- secondary: function(placement) {
- var mainSide = placement === "right" ? "left" : "top", value = popper[mainSide];
- return popper[placement] > boundaries[placement] && !options2.escapeWithReference && (value = Math.min(popper[mainSide], boundaries[placement] - (placement === "right" ? popper.width : popper.height))), defineProperty({}, mainSide, value);
- }
- };
- return order.forEach(function(placement) {
- var side = ["left", "top"].indexOf(placement) !== -1 ? "primary" : "secondary";
- popper = _extends2({}, popper, check[side](placement));
- }), data.offsets.popper = popper, data;
- }
- function shift(data) {
- var placement = data.placement, basePlacement = placement.split("-")[0], shiftvariation = placement.split("-")[1];
- if (shiftvariation) {
- var _data$offsets = data.offsets, reference = _data$offsets.reference, popper = _data$offsets.popper, isVertical = ["bottom", "top"].indexOf(basePlacement) !== -1, side = isVertical ? "left" : "top", measurement = isVertical ? "width" : "height", shiftOffsets = {
- start: defineProperty({}, side, reference[side]),
- end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
- };
- data.offsets.popper = _extends2({}, popper, shiftOffsets[shiftvariation]);
- }
- return data;
- }
- function hide(data) {
- if (!isModifierRequired(data.instance.modifiers, "hide", "preventOverflow"))
- return data;
- var refRect = data.offsets.reference, bound = find(data.instance.modifiers, function(modifier) {
- return modifier.name === "preventOverflow";
- }).boundaries;
- if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
- if (data.hide === !0)
- return data;
- data.hide = !0, data.attributes["x-out-of-boundaries"] = "";
- } else {
- if (data.hide === !1)
- return data;
- data.hide = !1, data.attributes["x-out-of-boundaries"] = !1;
- }
- return data;
- }
- function inner(data) {
- var placement = data.placement, basePlacement = placement.split("-")[0], _data$offsets = data.offsets, popper = _data$offsets.popper, reference = _data$offsets.reference, isHoriz = ["left", "right"].indexOf(basePlacement) !== -1, subtractLength = ["top", "left"].indexOf(basePlacement) === -1;
- return popper[isHoriz ? "left" : "top"] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? "width" : "height"] : 0), data.placement = getOppositePlacement(placement), data.offsets.popper = getClientRect(popper), data;
- }
- var modifiers = {
- /**
- * Modifier used to shift the popper on the start or end of its reference
- * element.<br />
- * It will read the variation of the `placement` property.<br />
- * It can be one either `-end` or `-start`.
- * @memberof modifiers
- * @inner
- */
- shift: {
- /** @prop {number} order=100 - Index used to define the order of execution */
- order: 100,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: shift
- },
- /**
- * The `offset` modifier can shift your popper on both its axis.
- *
- * It accepts the following units:
- * - `px` or unit-less, interpreted as pixels
- * - `%` or `%r`, percentage relative to the length of the reference element
- * - `%p`, percentage relative to the length of the popper element
- * - `vw`, CSS viewport width unit
- * - `vh`, CSS viewport height unit
- *
- * For length is intended the main axis relative to the placement of the popper.<br />
- * This means that if the placement is `top` or `bottom`, the length will be the
- * `width`. In case of `left` or `right`, it will be the `height`.
- *
- * You can provide a single value (as `Number` or `String`), or a pair of values
- * as `String` divided by a comma or one (or more) white spaces.<br />
- * The latter is a deprecated method because it leads to confusion and will be
- * removed in v2.<br />
- * Additionally, it accepts additions and subtractions between different units.
- * Note that multiplications and divisions aren't supported.
- *
- * Valid examples are:
- * ```
- * 10
- * '10%'
- * '10, 10'
- * '10%, 10'
- * '10 + 10%'
- * '10 - 5vh + 3%'
- * '-10px + 5vh, 5px - 6%'
- * ```
- * > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
- * > with their reference element, unfortunately, you will have to disable the `flip` modifier.
- * > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
- *
- * @memberof modifiers
- * @inner
- */
- offset: {
- /** @prop {number} order=200 - Index used to define the order of execution */
- order: 200,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: offset,
- /** @prop {Number|String} offset=0
- * The offset value as described in the modifier description
- */
- offset: 0
- },
- /**
- * Modifier used to prevent the popper from being positioned outside the boundary.
- *
- * A scenario exists where the reference itself is not within the boundaries.<br />
- * We can say it has "escaped the boundaries" — or just "escaped".<br />
- * In this case we need to decide whether the popper should either:
- *
- * - detach from the reference and remain "trapped" in the boundaries, or
- * - if it should ignore the boundary and "escape with its reference"
- *
- * When `escapeWithReference` is set to`true` and reference is completely
- * outside its boundaries, the popper will overflow (or completely leave)
- * the boundaries in order to remain attached to the edge of the reference.
- *
- * @memberof modifiers
- * @inner
- */
- preventOverflow: {
- /** @prop {number} order=300 - Index used to define the order of execution */
- order: 300,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: preventOverflow,
- /**
- * @prop {Array} [priority=['left','right','top','bottom']]
- * Popper will try to prevent overflow following these priorities by default,
- * then, it could overflow on the left and on top of the `boundariesElement`
- */
- priority: ["left", "right", "top", "bottom"],
- /**
- * @prop {number} padding=5
- * Amount of pixel used to define a minimum distance between the boundaries
- * and the popper. This makes sure the popper always has a little padding
- * between the edges of its container
- */
- padding: 5,
- /**
- * @prop {String|HTMLElement} boundariesElement='scrollParent'
- * Boundaries used by the modifier. Can be `scrollParent`, `window`,
- * `viewport` or any DOM element.
- */
- boundariesElement: "scrollParent"
- },
- /**
- * Modifier used to make sure the reference and its popper stay near each other
- * without leaving any gap between the two. Especially useful when the arrow is
- * enabled and you want to ensure that it points to its reference element.
- * It cares only about the first axis. You can still have poppers with margin
- * between the popper and its reference element.
- * @memberof modifiers
- * @inner
- */
- keepTogether: {
- /** @prop {number} order=400 - Index used to define the order of execution */
- order: 400,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: keepTogether
- },
- /**
- * This modifier is used to move the `arrowElement` of the popper to make
- * sure it is positioned between the reference element and its popper element.
- * It will read the outer size of the `arrowElement` node to detect how many
- * pixels of conjunction are needed.
- *
- * It has no effect if no `arrowElement` is provided.
- * @memberof modifiers
- * @inner
- */
- arrow: {
- /** @prop {number} order=500 - Index used to define the order of execution */
- order: 500,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: arrow,
- /** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
- element: "[x-arrow]"
- },
- /**
- * Modifier used to flip the popper's placement when it starts to overlap its
- * reference element.
- *
- * Requires the `preventOverflow` modifier before it in order to work.
- *
- * **NOTE:** this modifier will interrupt the current update cycle and will
- * restart it if it detects the need to flip the placement.
- * @memberof modifiers
- * @inner
- */
- flip: {
- /** @prop {number} order=600 - Index used to define the order of execution */
- order: 600,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: flip,
- /**
- * @prop {String|Array} behavior='flip'
- * The behavior used to change the popper's placement. It can be one of
- * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
- * placements (with optional variations)
- */
- behavior: "flip",
- /**
- * @prop {number} padding=5
- * The popper will flip if it hits the edges of the `boundariesElement`
- */
- padding: 5,
- /**
- * @prop {String|HTMLElement} boundariesElement='viewport'
- * The element which will define the boundaries of the popper position.
- * The popper will never be placed outside of the defined boundaries
- * (except if `keepTogether` is enabled)
- */
- boundariesElement: "viewport",
- /**
- * @prop {Boolean} flipVariations=false
- * The popper will switch placement variation between `-start` and `-end` when
- * the reference element overlaps its boundaries.
- *
- * The original placement should have a set variation.
- */
- flipVariations: !1,
- /**
- * @prop {Boolean} flipVariationsByContent=false
- * The popper will switch placement variation between `-start` and `-end` when
- * the popper element overlaps its reference boundaries.
- *
- * The original placement should have a set variation.
- */
- flipVariationsByContent: !1
- },
- /**
- * Modifier used to make the popper flow toward the inner of the reference element.
- * By default, when this modifier is disabled, the popper will be placed outside
- * the reference element.
- * @memberof modifiers
- * @inner
- */
- inner: {
- /** @prop {number} order=700 - Index used to define the order of execution */
- order: 700,
- /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
- enabled: !1,
- /** @prop {ModifierFn} */
- fn: inner
- },
- /**
- * Modifier used to hide the popper when its reference element is outside of the
- * popper boundaries. It will set a `x-out-of-boundaries` attribute which can
- * be used to hide with a CSS selector the popper when its reference is
- * out of boundaries.
- *
- * Requires the `preventOverflow` modifier before it in order to work.
- * @memberof modifiers
- * @inner
- */
- hide: {
- /** @prop {number} order=800 - Index used to define the order of execution */
- order: 800,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: hide
- },
- /**
- * Computes the style that will be applied to the popper element to gets
- * properly positioned.
- *
- * Note that this modifier will not touch the DOM, it just prepares the styles
- * so that `applyStyle` modifier can apply it. This separation is useful
- * in case you need to replace `applyStyle` with a custom implementation.
- *
- * This modifier has `850` as `order` value to maintain backward compatibility
- * with previous versions of Popper.js. Expect the modifiers ordering method
- * to change in future major versions of the library.
- *
- * @memberof modifiers
- * @inner
- */
- computeStyle: {
- /** @prop {number} order=850 - Index used to define the order of execution */
- order: 850,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: computeStyle,
- /**
- * @prop {Boolean} gpuAcceleration=true
- * If true, it uses the CSS 3D transformation to position the popper.
- * Otherwise, it will use the `top` and `left` properties
- */
- gpuAcceleration: !0,
- /**
- * @prop {string} [x='bottom']
- * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
- * Change this if your popper should grow in a direction different from `bottom`
- */
- x: "bottom",
- /**
- * @prop {string} [x='left']
- * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
- * Change this if your popper should grow in a direction different from `right`
- */
- y: "right"
- },
- /**
- * Applies the computed styles to the popper element.
- *
- * All the DOM manipulations are limited to this modifier. This is useful in case
- * you want to integrate Popper.js inside a framework or view library and you
- * want to delegate all the DOM manipulations to it.
- *
- * Note that if you disable this modifier, you must make sure the popper element
- * has its position set to `absolute` before Popper.js can do its work!
- *
- * Just disable this modifier and define your own to achieve the desired effect.
- *
- * @memberof modifiers
- * @inner
- */
- applyStyle: {
- /** @prop {number} order=900 - Index used to define the order of execution */
- order: 900,
- /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
- enabled: !0,
- /** @prop {ModifierFn} */
- fn: applyStyle,
- /** @prop {Function} */
- onLoad: applyStyleOnLoad,
- /**
- * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
- * @prop {Boolean} gpuAcceleration=true
- * If true, it uses the CSS 3D transformation to position the popper.
- * Otherwise, it will use the `top` and `left` properties
- */
- gpuAcceleration: void 0
- }
- }, Defaults = {
- /**
- * Popper's placement.
- * @prop {Popper.placements} placement='bottom'
- */
- placement: "bottom",
- /**
- * Set this to true if you want popper to position it self in 'fixed' mode
- * @prop {Boolean} positionFixed=false
- */
- positionFixed: !1,
- /**
- * Whether events (resize, scroll) are initially enabled.
- * @prop {Boolean} eventsEnabled=true
- */
- eventsEnabled: !0,
- /**
- * Set to true if you want to automatically remove the popper when
- * you call the `destroy` method.
- * @prop {Boolean} removeOnDestroy=false
- */
- removeOnDestroy: !1,
- /**
- * Callback called when the popper is created.<br />
- * By default, it is set to no-op.<br />
- * Access Popper.js instance with `data.instance`.
- * @prop {onCreate}
- */
- onCreate: function() {
- },
- /**
- * Callback called when the popper is updated. This callback is not called
- * on the initialization/creation of the popper, but only on subsequent
- * updates.<br />
- * By default, it is set to no-op.<br />
- * Access Popper.js instance with `data.instance`.
- * @prop {onUpdate}
- */
- onUpdate: function() {
- },
- /**
- * List of modifiers used to modify the offsets before they are applied to the popper.
- * They provide most of the functionalities of Popper.js.
- * @prop {modifiers}
- */
- modifiers
- }, Popper = (function() {
- function Popper2(reference, popper) {
- var _this = this, options2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
- classCallCheck(this, Popper2), this.scheduleUpdate = function() {
- return requestAnimationFrame(_this.update);
- }, this.update = debounce2(this.update.bind(this)), this.options = _extends2({}, Popper2.Defaults, options2), this.state = {
- isDestroyed: !1,
- isCreated: !1,
- scrollParents: []
- }, this.reference = reference && reference.jquery ? reference[0] : reference, this.popper = popper && popper.jquery ? popper[0] : popper, this.options.modifiers = {}, Object.keys(_extends2({}, Popper2.Defaults.modifiers, options2.modifiers)).forEach(function(name) {
- _this.options.modifiers[name] = _extends2({}, Popper2.Defaults.modifiers[name] || {}, options2.modifiers ? options2.modifiers[name] : {});
- }), this.modifiers = Object.keys(this.options.modifiers).map(function(name) {
- return _extends2({
- name
- }, _this.options.modifiers[name]);
- }).sort(function(a2, b2) {
- return a2.order - b2.order;
- }), this.modifiers.forEach(function(modifierOptions) {
- modifierOptions.enabled && isFunction3(modifierOptions.onLoad) && modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
- }), this.update();
- var eventsEnabled = this.options.eventsEnabled;
- eventsEnabled && this.enableEventListeners(), this.state.eventsEnabled = eventsEnabled;
- }
- return createClass(Popper2, [{
- key: "update",
- value: function() {
- return update.call(this);
- }
- }, {
- key: "destroy",
- value: function() {
- return destroy.call(this);
- }
- }, {
- key: "enableEventListeners",
- value: function() {
- return enableEventListeners.call(this);
- }
- }, {
- key: "disableEventListeners",
- value: function() {
- return disableEventListeners.call(this);
- }
- /**
- * Schedules an update. It will run on the next UI update available.
- * @method scheduleUpdate
- * @memberof Popper
- */
- /**
- * Collection of utilities useful when writing custom modifiers.
- * Starting from version 1.7, this method is available only if you
- * include `popper-utils.js` before `popper.js`.
- *
- * **DEPRECATION**: This way to access PopperUtils is deprecated
- * and will be removed in v2! Use the PopperUtils module directly instead.
- * Due to the high instability of the methods contained in Utils, we can't
- * guarantee them to follow semver. Use them at your own risk!
- * @static
- * @private
- * @type {Object}
- * @deprecated since version 1.8
- * @member Utils
- * @memberof Popper
- */
- }]), Popper2;
- })();
- Popper.Utils = (typeof window < "u" ? window : global).PopperUtils;
- Popper.placements = placements;
- Popper.Defaults = Defaults;
- var popper_default = Popper;
-
- // ../../node_modules/react-floater/es/index.js
- var import_deepmerge = __toESM(require_cjs());
-
- // ../../node_modules/react-floater/node_modules/is-lite/esm/index.js
- var DOM_PROPERTIES_TO_CHECK2 = [
- "innerHTML",
- "ownerDocument",
- "style",
- "attributes",
- "nodeValue"
- ], objectTypes2 = [
- "Array",
- "ArrayBuffer",
- "AsyncFunction",
- "AsyncGenerator",
- "AsyncGeneratorFunction",
- "Date",
- "Error",
- "Function",
- "Generator",
- "GeneratorFunction",
- "HTMLElement",
- "Map",
- "Object",
- "Promise",
- "RegExp",
- "Set",
- "WeakMap",
- "WeakSet"
- ], primitiveTypes2 = [
- "bigint",
- "boolean",
- "null",
- "number",
- "string",
- "symbol",
- "undefined"
- ];
- function getObjectType2(value) {
- var objectTypeName = Object.prototype.toString.call(value).slice(8, -1);
- if (/HTML\w+Element/.test(objectTypeName))
- return "HTMLElement";
- if (isObjectType2(objectTypeName))
- return objectTypeName;
- }
- function isObjectOfType2(type) {
- return function(value) {
- return getObjectType2(value) === type;
- };
- }
- function isObjectType2(name) {
- return objectTypes2.includes(name);
- }
- function isOfType3(type) {
- return function(value) {
- return typeof value === type;
- };
- }
- function isPrimitiveType2(name) {
- return primitiveTypes2.includes(name);
- }
- function is2(value) {
- if (value === null)
- return "null";
- switch (typeof value) {
- case "bigint":
- return "bigint";
- case "boolean":
- return "boolean";
- case "number":
- return "number";
- case "string":
- return "string";
- case "symbol":
- return "symbol";
- case "undefined":
- return "undefined";
- default:
- }
- if (is2.array(value))
- return "Array";
- if (is2.plainFunction(value))
- return "Function";
- var tagType = getObjectType2(value);
- return tagType || "Object";
- }
- is2.array = Array.isArray;
- is2.arrayOf = function(target, predicate) {
- return !is2.array(target) && !is2.function(predicate) ? !1 : target.every(function(d2) {
- return predicate(d2);
- });
- };
- is2.asyncGeneratorFunction = function(value) {
- return getObjectType2(value) === "AsyncGeneratorFunction";
- };
- is2.asyncFunction = isObjectOfType2("AsyncFunction");
- is2.bigint = isOfType3("bigint");
- is2.boolean = function(value) {
- return value === !0 || value === !1;
- };
- is2.date = isObjectOfType2("Date");
- is2.defined = function(value) {
- return !is2.undefined(value);
- };
- is2.domElement = function(value) {
- return is2.object(value) && !is2.plainObject(value) && value.nodeType === 1 && is2.string(value.nodeName) && DOM_PROPERTIES_TO_CHECK2.every(function(property) {
- return property in value;
- });
- };
- is2.empty = function(value) {
- return is2.string(value) && value.length === 0 || is2.array(value) && value.length === 0 || is2.object(value) && !is2.map(value) && !is2.set(value) && Object.keys(value).length === 0 || is2.set(value) && value.size === 0 || is2.map(value) && value.size === 0;
- };
- is2.error = isObjectOfType2("Error");
- is2.function = isOfType3("function");
- is2.generator = function(value) {
- return is2.iterable(value) && is2.function(value.next) && is2.function(value.throw);
- };
- is2.generatorFunction = isObjectOfType2("GeneratorFunction");
- is2.instanceOf = function(instance, class_) {
- return !instance || !class_ ? !1 : Object.getPrototypeOf(instance) === class_.prototype;
- };
- is2.iterable = function(value) {
- return !is2.nullOrUndefined(value) && is2.function(value[Symbol.iterator]);
- };
- is2.map = isObjectOfType2("Map");
- is2.nan = function(value) {
- return Number.isNaN(value);
- };
- is2.null = function(value) {
- return value === null;
- };
- is2.nullOrUndefined = function(value) {
- return is2.null(value) || is2.undefined(value);
- };
- is2.number = function(value) {
- return isOfType3("number")(value) && !is2.nan(value);
- };
- is2.numericString = function(value) {
- return is2.string(value) && value.length > 0 && !Number.isNaN(Number(value));
- };
- is2.object = function(value) {
- return !is2.nullOrUndefined(value) && (is2.function(value) || typeof value == "object");
- };
- is2.oneOf = function(target, value) {
- return is2.array(target) ? target.indexOf(value) > -1 : !1;
- };
- is2.plainFunction = isObjectOfType2("Function");
- is2.plainObject = function(value) {
- if (getObjectType2(value) !== "Object")
- return !1;
- var prototype = Object.getPrototypeOf(value);
- return prototype === null || prototype === Object.getPrototypeOf({});
- };
- is2.primitive = function(value) {
- return is2.null(value) || isPrimitiveType2(typeof value);
- };
- is2.promise = isObjectOfType2("Promise");
- is2.propertyOf = function(target, key, predicate) {
- if (!is2.object(target) || !key)
- return !1;
- var value = target[key];
- return is2.function(predicate) ? predicate(value) : is2.defined(value);
- };
- is2.regexp = isObjectOfType2("RegExp");
- is2.set = isObjectOfType2("Set");
- is2.string = isOfType3("string");
- is2.symbol = isOfType3("symbol");
- is2.undefined = isOfType3("undefined");
- is2.weakMap = isObjectOfType2("WeakMap");
- is2.weakSet = isObjectOfType2("WeakSet");
- var esm_default = is2;
-
- // ../../node_modules/tree-changes/node_modules/@gilbarbara/deep-equal/esm/helpers.js
- function isOfType4(type) {
- return function(value) {
- return typeof value === type;
- };
- }
- var isFunction4 = isOfType4("function"), isNull3 = function(value) {
- return value === null;
- }, isRegex2 = function(value) {
- return Object.prototype.toString.call(value).slice(8, -1) === "RegExp";
- }, isObject2 = function(value) {
- return !isUndefined3(value) && !isNull3(value) && (isFunction4(value) || typeof value == "object");
- }, isUndefined3 = isOfType4("undefined");
-
- // ../../node_modules/tree-changes/node_modules/@gilbarbara/deep-equal/esm/index.js
- var __values = function(o3) {
- var s2 = typeof Symbol == "function" && Symbol.iterator, m2 = s2 && o3[s2], i2 = 0;
- if (m2) return m2.call(o3);
- if (o3 && typeof o3.length == "number") return {
- next: function() {
- return o3 && i2 >= o3.length && (o3 = void 0), { value: o3 && o3[i2++], done: !o3 };
- }
- };
- throw new TypeError(s2 ? "Object is not iterable." : "Symbol.iterator is not defined.");
- };
- function equalArray2(left, right) {
- var length = left.length;
- if (length !== right.length)
- return !1;
- for (var index = length; index-- !== 0; )
- if (!equal2(left[index], right[index]))
- return !1;
- return !0;
- }
- function equalArrayBuffer2(left, right) {
- if (left.byteLength !== right.byteLength)
- return !1;
- for (var view1 = new DataView(left.buffer), view2 = new DataView(right.buffer), index = left.byteLength; index--; )
- if (view1.getUint8(index) !== view2.getUint8(index))
- return !1;
- return !0;
- }
- function equalMap2(left, right) {
- var e_1, _a2, e_2, _b;
- if (left.size !== right.size)
- return !1;
- try {
- for (var _c = __values(left.entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
- var index = _d.value;
- if (!right.has(index[0]))
- return !1;
- }
- } catch (e_1_1) {
- e_1 = { error: e_1_1 };
- } finally {
- try {
- _d && !_d.done && (_a2 = _c.return) && _a2.call(_c);
- } finally {
- if (e_1) throw e_1.error;
- }
- }
- try {
- for (var _e = __values(left.entries()), _f = _e.next(); !_f.done; _f = _e.next()) {
- var index = _f.value;
- if (!equal2(index[1], right.get(index[0])))
- return !1;
- }
- } catch (e_2_1) {
- e_2 = { error: e_2_1 };
- } finally {
- try {
- _f && !_f.done && (_b = _e.return) && _b.call(_e);
- } finally {
- if (e_2) throw e_2.error;
- }
- }
- return !0;
- }
- function equalSet2(left, right) {
- var e_3, _a2;
- if (left.size !== right.size)
- return !1;
- try {
- for (var _b = __values(left.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
- var index = _c.value;
- if (!right.has(index[0]))
- return !1;
- }
- } catch (e_3_1) {
- e_3 = { error: e_3_1 };
- } finally {
- try {
- _c && !_c.done && (_a2 = _b.return) && _a2.call(_b);
- } finally {
- if (e_3) throw e_3.error;
- }
- }
- return !0;
- }
- function equal2(left, right) {
- if (left === right)
- return !0;
- if (left && isObject2(left) && right && isObject2(right)) {
- if (left.constructor !== right.constructor)
- return !1;
- if (Array.isArray(left) && Array.isArray(right))
- return equalArray2(left, right);
- if (left instanceof Map && right instanceof Map)
- return equalMap2(left, right);
- if (left instanceof Set && right instanceof Set)
- return equalSet2(left, right);
- if (ArrayBuffer.isView(left) && ArrayBuffer.isView(right))
- return equalArrayBuffer2(left, right);
- if (isRegex2(left) && isRegex2(right))
- return left.source === right.source && left.flags === right.flags;
- if (left.valueOf !== Object.prototype.valueOf)
- return left.valueOf() === right.valueOf();
- if (left.toString !== Object.prototype.toString)
- return left.toString() === right.toString();
- var leftKeys = Object.keys(left), rightKeys = Object.keys(right);
- if (leftKeys.length !== rightKeys.length)
- return !1;
- for (var index = leftKeys.length; index-- !== 0; )
- if (!Object.prototype.hasOwnProperty.call(right, leftKeys[index]))
- return !1;
- for (var index = leftKeys.length; index-- !== 0; ) {
- var key = leftKeys[index];
- if (!(key === "_owner" && left.$$typeof) && !equal2(left[key], right[key]))
- return !1;
- }
- return !0;
- }
- return Number.isNaN(left) && Number.isNaN(right) ? !0 : left === right;
- }
-
- // ../../node_modules/tree-changes/node_modules/is-lite/esm/index.js
- var DOM_PROPERTIES_TO_CHECK3 = [
- "innerHTML",
- "ownerDocument",
- "style",
- "attributes",
- "nodeValue"
- ], objectTypes3 = [
- "Array",
- "ArrayBuffer",
- "AsyncFunction",
- "AsyncGenerator",
- "AsyncGeneratorFunction",
- "Date",
- "Error",
- "Function",
- "Generator",
- "GeneratorFunction",
- "HTMLElement",
- "Map",
- "Object",
- "Promise",
- "RegExp",
- "Set",
- "WeakMap",
- "WeakSet"
- ], primitiveTypes3 = [
- "bigint",
- "boolean",
- "null",
- "number",
- "string",
- "symbol",
- "undefined"
- ];
- function getObjectType3(value) {
- var objectTypeName = Object.prototype.toString.call(value).slice(8, -1);
- if (/HTML\w+Element/.test(objectTypeName))
- return "HTMLElement";
- if (isObjectType3(objectTypeName))
- return objectTypeName;
- }
- function isObjectOfType3(type) {
- return function(value) {
- return getObjectType3(value) === type;
- };
- }
- function isObjectType3(name) {
- return objectTypes3.includes(name);
- }
- function isOfType5(type) {
- return function(value) {
- return typeof value === type;
- };
- }
- function isPrimitiveType3(name) {
- return primitiveTypes3.includes(name);
- }
- function is3(value) {
- if (value === null)
- return "null";
- switch (typeof value) {
- case "bigint":
- return "bigint";
- case "boolean":
- return "boolean";
- case "number":
- return "number";
- case "string":
- return "string";
- case "symbol":
- return "symbol";
- case "undefined":
- return "undefined";
- default:
- }
- if (is3.array(value))
- return "Array";
- if (is3.plainFunction(value))
- return "Function";
- var tagType = getObjectType3(value);
- return tagType || "Object";
- }
- is3.array = Array.isArray;
- is3.arrayOf = function(target, predicate) {
- return !is3.array(target) && !is3.function(predicate) ? !1 : target.every(function(d2) {
- return predicate(d2);
- });
- };
- is3.asyncGeneratorFunction = function(value) {
- return getObjectType3(value) === "AsyncGeneratorFunction";
- };
- is3.asyncFunction = isObjectOfType3("AsyncFunction");
- is3.bigint = isOfType5("bigint");
- is3.boolean = function(value) {
- return value === !0 || value === !1;
- };
- is3.date = isObjectOfType3("Date");
- is3.defined = function(value) {
- return !is3.undefined(value);
- };
- is3.domElement = function(value) {
- return is3.object(value) && !is3.plainObject(value) && value.nodeType === 1 && is3.string(value.nodeName) && DOM_PROPERTIES_TO_CHECK3.every(function(property) {
- return property in value;
- });
- };
- is3.empty = function(value) {
- return is3.string(value) && value.length === 0 || is3.array(value) && value.length === 0 || is3.object(value) && !is3.map(value) && !is3.set(value) && Object.keys(value).length === 0 || is3.set(value) && value.size === 0 || is3.map(value) && value.size === 0;
- };
- is3.error = isObjectOfType3("Error");
- is3.function = isOfType5("function");
- is3.generator = function(value) {
- return is3.iterable(value) && is3.function(value.next) && is3.function(value.throw);
- };
- is3.generatorFunction = isObjectOfType3("GeneratorFunction");
- is3.instanceOf = function(instance, class_) {
- return !instance || !class_ ? !1 : Object.getPrototypeOf(instance) === class_.prototype;
- };
- is3.iterable = function(value) {
- return !is3.nullOrUndefined(value) && is3.function(value[Symbol.iterator]);
- };
- is3.map = isObjectOfType3("Map");
- is3.nan = function(value) {
- return Number.isNaN(value);
- };
- is3.null = function(value) {
- return value === null;
- };
- is3.nullOrUndefined = function(value) {
- return is3.null(value) || is3.undefined(value);
- };
- is3.number = function(value) {
- return isOfType5("number")(value) && !is3.nan(value);
- };
- is3.numericString = function(value) {
- return is3.string(value) && value.length > 0 && !Number.isNaN(Number(value));
- };
- is3.object = function(value) {
- return !is3.nullOrUndefined(value) && (is3.function(value) || typeof value == "object");
- };
- is3.oneOf = function(target, value) {
- return is3.array(target) ? target.indexOf(value) > -1 : !1;
- };
- is3.plainFunction = isObjectOfType3("Function");
- is3.plainObject = function(value) {
- if (getObjectType3(value) !== "Object")
- return !1;
- var prototype = Object.getPrototypeOf(value);
- return prototype === null || prototype === Object.getPrototypeOf({});
- };
- is3.primitive = function(value) {
- return is3.null(value) || isPrimitiveType3(typeof value);
- };
- is3.promise = isObjectOfType3("Promise");
- is3.propertyOf = function(target, key, predicate) {
- if (!is3.object(target) || !key)
- return !1;
- var value = target[key];
- return is3.function(predicate) ? predicate(value) : is3.defined(value);
- };
- is3.regexp = isObjectOfType3("RegExp");
- is3.set = isObjectOfType3("Set");
- is3.string = isOfType5("string");
- is3.symbol = isOfType5("symbol");
- is3.undefined = isOfType5("undefined");
- is3.weakMap = isObjectOfType3("WeakMap");
- is3.weakSet = isObjectOfType3("WeakSet");
- var esm_default2 = is3;
-
- // ../../node_modules/tree-changes/esm/helpers.js
- function canHaveLength2() {
- for (var arguments_ = [], _i = 0; _i < arguments.length; _i++)
- arguments_[_i] = arguments[_i];
- return arguments_.every(function(d2) {
- return esm_default2.string(d2) || esm_default2.array(d2) || esm_default2.plainObject(d2);
- });
- }
- function checkEquality2(left, right, value) {
- return isSameType2(left, right) ? [left, right].every(esm_default2.array) ? !left.some(hasValue2(value)) && right.some(hasValue2(value)) : [left, right].every(esm_default2.plainObject) ? !Object.entries(left).some(hasEntry2(value)) && Object.entries(right).some(hasEntry2(value)) : right === value : !1;
- }
- function compareNumbers2(previousData, data, options2) {
- var actual = options2.actual, key = options2.key, previous = options2.previous, type = options2.type, left = nested2(previousData, key), right = nested2(data, key), changed = [left, right].every(esm_default2.number) && (type === "increased" ? left < right : left > right);
- return esm_default2.undefined(actual) || (changed = changed && right === actual), esm_default2.undefined(previous) || (changed = changed && left === previous), changed;
- }
- function compareValues2(previousData, data, options2) {
- var key = options2.key, type = options2.type, value = options2.value, left = nested2(previousData, key), right = nested2(data, key), primary = type === "added" ? left : right, secondary = type === "added" ? right : left;
- if (!esm_default2.nullOrUndefined(value)) {
- if (esm_default2.defined(primary)) {
- if (esm_default2.array(primary) || esm_default2.plainObject(primary))
- return checkEquality2(primary, secondary, value);
- } else
- return equal2(secondary, value);
- return !1;
- }
- return [left, right].every(esm_default2.array) ? !secondary.every(isEqualPredicate2(primary)) : [left, right].every(esm_default2.plainObject) ? hasExtraKeys2(Object.keys(primary), Object.keys(secondary)) : ![left, right].every(function(d2) {
- return esm_default2.primitive(d2) && esm_default2.defined(d2);
- }) && (type === "added" ? !esm_default2.defined(left) && esm_default2.defined(right) : esm_default2.defined(left) && !esm_default2.defined(right));
- }
- function getIterables2(previousData, data, _a2) {
- var _b = _a2 === void 0 ? {} : _a2, key = _b.key, left = nested2(previousData, key), right = nested2(data, key);
- if (!isSameType2(left, right))
- throw new TypeError("Inputs have different types");
- if (!canHaveLength2(left, right))
- throw new TypeError("Inputs don't have length");
- return [left, right].every(esm_default2.plainObject) && (left = Object.keys(left), right = Object.keys(right)), [left, right];
- }
- function hasEntry2(input) {
- return function(_a2) {
- var key = _a2[0], value = _a2[1];
- return esm_default2.array(input) ? equal2(input, value) || input.some(function(d2) {
- return equal2(d2, value) || esm_default2.array(value) && isEqualPredicate2(value)(d2);
- }) : esm_default2.plainObject(input) && input[key] ? !!input[key] && equal2(input[key], value) : equal2(input, value);
- };
- }
- function hasExtraKeys2(left, right) {
- return right.some(function(d2) {
- return !left.includes(d2);
- });
- }
- function hasValue2(input) {
- return function(value) {
- return esm_default2.array(input) ? input.some(function(d2) {
- return equal2(d2, value) || esm_default2.array(value) && isEqualPredicate2(value)(d2);
- }) : equal2(input, value);
- };
- }
- function includesOrEqualsTo2(previousValue, value) {
- return esm_default2.array(previousValue) ? previousValue.some(function(d2) {
- return equal2(d2, value);
- }) : equal2(previousValue, value);
- }
- function isEqualPredicate2(data) {
- return function(value) {
- return data.some(function(d2) {
- return equal2(d2, value);
- });
- };
- }
- function isSameType2() {
- for (var arguments_ = [], _i = 0; _i < arguments.length; _i++)
- arguments_[_i] = arguments[_i];
- return arguments_.every(esm_default2.array) || arguments_.every(esm_default2.number) || arguments_.every(esm_default2.plainObject) || arguments_.every(esm_default2.string);
- }
- function nested2(data, property) {
- if (esm_default2.plainObject(data) || esm_default2.array(data)) {
- if (esm_default2.string(property)) {
- var props = property.split(".");
- return props.reduce(function(acc, d2) {
- return acc && acc[d2];
- }, data);
- }
- return esm_default2.number(property) ? data[property] : data;
- }
- return data;
- }
-
- // ../../node_modules/tree-changes/esm/index.js
- function treeChanges2(previousData, data) {
- if ([previousData, data].some(esm_default2.nullOrUndefined))
- throw new Error("Missing required parameters");
- if (![previousData, data].every(function(d2) {
- return esm_default2.plainObject(d2) || esm_default2.array(d2);
- }))
- throw new Error("Expected plain objects or array");
- var added = function(key, value) {
- try {
- return compareValues2(previousData, data, { key, type: "added", value });
- } catch {
- return !1;
- }
- }, changed = function(key, actual, previous) {
- try {
- var left = nested2(previousData, key), right = nested2(data, key), hasActual = esm_default2.defined(actual), hasPrevious = esm_default2.defined(previous);
- if (hasActual || hasPrevious) {
- var leftComparator = hasPrevious ? includesOrEqualsTo2(previous, left) : !includesOrEqualsTo2(actual, left), rightComparator = includesOrEqualsTo2(actual, right);
- return leftComparator && rightComparator;
- }
- return [left, right].every(esm_default2.array) || [left, right].every(esm_default2.plainObject) ? !equal2(left, right) : left !== right;
- } catch {
- return !1;
- }
- }, changedFrom = function(key, previous, actual) {
- if (!esm_default2.defined(key))
- return !1;
- try {
- var left = nested2(previousData, key), right = nested2(data, key), hasActual = esm_default2.defined(actual);
- return includesOrEqualsTo2(previous, left) && (hasActual ? includesOrEqualsTo2(actual, right) : !hasActual);
- } catch {
- return !1;
- }
- }, changedTo = function(key, actual) {
- return esm_default2.defined(key) ? changed(key, actual) : !1;
- }, decreased = function(key, actual, previous) {
- if (!esm_default2.defined(key))
- return !1;
- try {
- return compareNumbers2(previousData, data, { key, actual, previous, type: "decreased" });
- } catch {
- return !1;
- }
- }, emptied = function(key) {
- try {
- var _a2 = getIterables2(previousData, data, { key }), left = _a2[0], right = _a2[1];
- return !!left.length && !right.length;
- } catch {
- return !1;
- }
- }, filled = function(key) {
- try {
- var _a2 = getIterables2(previousData, data, { key }), left = _a2[0], right = _a2[1];
- return !left.length && !!right.length;
- } catch {
- return !1;
- }
- }, increased = function(key, actual, previous) {
- if (!esm_default2.defined(key))
- return !1;
- try {
- return compareNumbers2(previousData, data, { key, actual, previous, type: "increased" });
- } catch {
- return !1;
- }
- }, removed = function(key, value) {
- try {
- return compareValues2(previousData, data, { key, type: "removed", value });
- } catch {
- return !1;
- }
- };
- return { added, changed, changedFrom, changedTo, decreased, emptied, filled, increased, removed };
- }
-
- // ../../node_modules/react-floater/es/index.js
- function ownKeys(e2, r4) {
- var t2 = Object.keys(e2);
- if (Object.getOwnPropertySymbols) {
- var o3 = Object.getOwnPropertySymbols(e2);
- r4 && (o3 = o3.filter(function(r5) {
- return Object.getOwnPropertyDescriptor(e2, r5).enumerable;
- })), t2.push.apply(t2, o3);
- }
- return t2;
- }
- function _objectSpread2(e2) {
- for (var r4 = 1; r4 < arguments.length; r4++) {
- var t2 = arguments[r4] != null ? arguments[r4] : {};
- r4 % 2 ? ownKeys(Object(t2), !0).forEach(function(r5) {
- _defineProperty(e2, r5, t2[r5]);
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(t2)) : ownKeys(Object(t2)).forEach(function(r5) {
- Object.defineProperty(e2, r5, Object.getOwnPropertyDescriptor(t2, r5));
- });
- }
- return e2;
- }
- function _classCallCheck(instance, Constructor) {
- if (!(instance instanceof Constructor))
- throw new TypeError("Cannot call a class as a function");
- }
- function _defineProperties(target, props) {
- for (var i2 = 0; i2 < props.length; i2++) {
- var descriptor = props[i2];
- descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
- }
- }
- function _createClass(Constructor, protoProps, staticProps) {
- return protoProps && _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps), Object.defineProperty(Constructor, "prototype", {
- writable: !1
- }), Constructor;
- }
- function _defineProperty(obj, key, value) {
- return key = _toPropertyKey(key), key in obj ? Object.defineProperty(obj, key, {
- value,
- enumerable: !0,
- configurable: !0,
- writable: !0
- }) : obj[key] = value, obj;
- }
- function _inherits(subClass, superClass) {
- if (typeof superClass != "function" && superClass !== null)
- throw new TypeError("Super expression must either be null or a function");
- subClass.prototype = Object.create(superClass && superClass.prototype, {
- constructor: {
- value: subClass,
- writable: !0,
- configurable: !0
- }
- }), Object.defineProperty(subClass, "prototype", {
- writable: !1
- }), superClass && _setPrototypeOf2(subClass, superClass);
- }
- function _getPrototypeOf2(o3) {
- return _getPrototypeOf2 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(o4) {
- return o4.__proto__ || Object.getPrototypeOf(o4);
- }, _getPrototypeOf2(o3);
- }
- function _setPrototypeOf2(o3, p2) {
- return _setPrototypeOf2 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o4, p3) {
- return o4.__proto__ = p3, o4;
- }, _setPrototypeOf2(o3, p2);
- }
- function _isNativeReflectConstruct2() {
- if (typeof Reflect > "u" || !Reflect.construct || Reflect.construct.sham) return !1;
- if (typeof Proxy == "function") return !0;
- try {
- return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
- })), !0;
- } catch {
- return !1;
- }
- }
- function _objectWithoutPropertiesLoose(source, excluded) {
- if (source == null) return {};
- var target = {}, sourceKeys = Object.keys(source), key, i2;
- for (i2 = 0; i2 < sourceKeys.length; i2++)
- key = sourceKeys[i2], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
- return target;
- }
- function _objectWithoutProperties(source, excluded) {
- if (source == null) return {};
- var target = _objectWithoutPropertiesLoose(source, excluded), key, i2;
- if (Object.getOwnPropertySymbols) {
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
- for (i2 = 0; i2 < sourceSymbolKeys.length; i2++)
- key = sourceSymbolKeys[i2], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
- }
- return target;
- }
- function _assertThisInitialized2(self2) {
- if (self2 === void 0)
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
- return self2;
- }
- function _possibleConstructorReturn(self2, call) {
- if (call && (typeof call == "object" || typeof call == "function"))
- return call;
- if (call !== void 0)
- throw new TypeError("Derived constructors may only return object or undefined");
- return _assertThisInitialized2(self2);
- }
- function _createSuper(Derived) {
- var hasNativeReflectConstruct = _isNativeReflectConstruct2();
- return function() {
- var Super = _getPrototypeOf2(Derived), result;
- if (hasNativeReflectConstruct) {
- var NewTarget = _getPrototypeOf2(this).constructor;
- result = Reflect.construct(Super, arguments, NewTarget);
- } else
- result = Super.apply(this, arguments);
- return _possibleConstructorReturn(this, result);
- };
- }
- function _toPrimitive(input, hint) {
- if (typeof input != "object" || input === null) return input;
- var prim = input[Symbol.toPrimitive];
- if (prim !== void 0) {
- var res = prim.call(input, hint || "default");
- if (typeof res != "object") return res;
- throw new TypeError("@@toPrimitive must return a primitive value.");
- }
- return (hint === "string" ? String : Number)(input);
- }
- function _toPropertyKey(arg) {
- var key = _toPrimitive(arg, "string");
- return typeof key == "symbol" ? key : String(key);
- }
- var DEFAULTS = { flip: { padding: 20 }, preventOverflow: { padding: 10 } }, VALIDATOR_ARG_ERROR_MESSAGE = "The typeValidator argument must be a function with the signature function(props, propName, componentName).", MESSAGE_ARG_ERROR_MESSAGE = "The error message is optional, but must be a string if provided.";
- function propIsRequired(condition, props, propName, componentName) {
- return typeof condition == "boolean" ? condition : typeof condition == "function" ? condition(props, propName, componentName) : condition ? !!condition : !1;
- }
- function propExists(props, propName) {
- return Object.hasOwnProperty.call(props, propName);
- }
- function missingPropError(props, propName, componentName, message) {
- return message ? new Error(message) : new Error("Required ".concat(props[propName], " `").concat(propName, "` was not specified in `").concat(componentName, "`."));
- }
- function guardAgainstInvalidArgTypes(typeValidator, message) {
- if (typeof typeValidator != "function")
- throw new TypeError(VALIDATOR_ARG_ERROR_MESSAGE);
- if (message && typeof message != "string")
- throw new TypeError(MESSAGE_ARG_ERROR_MESSAGE);
- }
- function isRequiredIf(typeValidator, condition, message) {
- return guardAgainstInvalidArgTypes(typeValidator, message), function(props, propName, componentName) {
- for (var _len = arguments.length, rest2 = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++)
- rest2[_key - 3] = arguments[_key];
- return propIsRequired(condition, props, propName, componentName) ? propExists(props, propName) ? typeValidator.apply(void 0, [props, propName, componentName].concat(rest2)) : missingPropError(props, propName, componentName, message) : typeValidator.apply(void 0, [props, propName, componentName].concat(rest2));
- };
- }
- var STATUS2 = { INIT: "init", IDLE: "idle", OPENING: "opening", OPEN: "open", CLOSING: "closing", ERROR: "error" }, isReact16 = react_dom_default.createPortal !== void 0;
- function canUseDOM() {
- return !!(typeof window < "u" && window.document && window.document.createElement);
- }
- function isMobile() {
- return "ontouchstart" in window && /Mobi/.test(navigator.userAgent);
- }
- function log(_ref) {
- var title2 = _ref.title, data = _ref.data, _ref$warn = _ref.warn, warn = _ref$warn === void 0 ? !1 : _ref$warn, _ref$debug = _ref.debug, debug = _ref$debug === void 0 ? !1 : _ref$debug, logFn = warn ? console.warn || console.error : console.log;
- debug && title2 && data && (console.groupCollapsed("%creact-floater: ".concat(title2), "color: #9b00ff; font-weight: bold; font-size: 12px;"), Array.isArray(data) ? data.forEach(function(d2) {
- esm_default.plainObject(d2) && d2.key ? logFn.apply(console, [d2.key, d2.value]) : logFn.apply(console, [d2]);
- }) : logFn.apply(console, [data]), console.groupEnd());
- }
- function on(element, event, cb) {
- var capture = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1;
- element.addEventListener(event, cb, capture);
- }
- function off(element, event, cb) {
- var capture = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1;
- element.removeEventListener(event, cb, capture);
- }
- function once3(element, event, cb) {
- var capture = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, _nextCB;
- _nextCB = function(e2) {
- cb(e2), off(element, event, _nextCB);
- }, on(element, event, _nextCB, capture);
- }
- function noop2() {
- }
- var ReactFloaterPortal = (function(_React$Component) {
- _inherits(ReactFloaterPortal2, _React$Component);
- var _super = _createSuper(ReactFloaterPortal2);
- function ReactFloaterPortal2() {
- return _classCallCheck(this, ReactFloaterPortal2), _super.apply(this, arguments);
- }
- return _createClass(ReactFloaterPortal2, [{ key: "componentDidMount", value: function() {
- canUseDOM() && (this.node || this.appendNode(), isReact16 || this.renderPortal());
- } }, { key: "componentDidUpdate", value: function() {
- canUseDOM() && (isReact16 || this.renderPortal());
- } }, { key: "componentWillUnmount", value: function() {
- !canUseDOM() || !this.node || (isReact16 || react_dom_default.unmountComponentAtNode(this.node), this.node && this.node.parentNode === document.body && (document.body.removeChild(this.node), this.node = void 0));
- } }, { key: "appendNode", value: function() {
- var _this$props = this.props, id = _this$props.id, zIndex = _this$props.zIndex;
- this.node || (this.node = document.createElement("div"), id && (this.node.id = id), zIndex && (this.node.style.zIndex = zIndex), document.body.appendChild(this.node));
- } }, { key: "renderPortal", value: function() {
- if (!canUseDOM()) return null;
- var _this$props2 = this.props, children = _this$props2.children, setRef = _this$props2.setRef;
- if (this.node || this.appendNode(), isReact16)
- return react_dom_default.createPortal(children, this.node);
- var portal = react_dom_default.unstable_renderSubtreeIntoContainer(this, children.length > 1 ? react_default.createElement("div", null, children) : children[0], this.node);
- return setRef(portal), null;
- } }, { key: "renderReact16", value: function() {
- var _this$props3 = this.props, hasChildren = _this$props3.hasChildren, placement = _this$props3.placement, target = _this$props3.target;
- return hasChildren ? this.renderPortal() : target || placement === "center" ? this.renderPortal() : null;
- } }, { key: "render", value: function() {
- return isReact16 ? this.renderReact16() : null;
- } }]), ReactFloaterPortal2;
- })(react_default.Component);
- _defineProperty(ReactFloaterPortal, "propTypes", { children: import_prop_types2.default.oneOfType([import_prop_types2.default.element, import_prop_types2.default.array]), hasChildren: import_prop_types2.default.bool, id: import_prop_types2.default.oneOfType([import_prop_types2.default.string, import_prop_types2.default.number]), placement: import_prop_types2.default.string, setRef: import_prop_types2.default.func.isRequired, target: import_prop_types2.default.oneOfType([import_prop_types2.default.object, import_prop_types2.default.string]), zIndex: import_prop_types2.default.number });
- var FloaterArrow = (function(_React$Component) {
- _inherits(FloaterArrow2, _React$Component);
- var _super = _createSuper(FloaterArrow2);
- function FloaterArrow2() {
- return _classCallCheck(this, FloaterArrow2), _super.apply(this, arguments);
- }
- return _createClass(FloaterArrow2, [{ key: "parentStyle", get: function() {
- var _this$props = this.props, placement = _this$props.placement, styles2 = _this$props.styles, length = styles2.arrow.length, arrow2 = { pointerEvents: "none", position: "absolute", width: "100%" };
- return placement.startsWith("top") ? (arrow2.bottom = 0, arrow2.left = 0, arrow2.right = 0, arrow2.height = length) : placement.startsWith("bottom") ? (arrow2.left = 0, arrow2.right = 0, arrow2.top = 0, arrow2.height = length) : placement.startsWith("left") ? (arrow2.right = 0, arrow2.top = 0, arrow2.bottom = 0) : placement.startsWith("right") && (arrow2.left = 0, arrow2.top = 0), arrow2;
- } }, { key: "render", value: function() {
- var _this$props2 = this.props, placement = _this$props2.placement, setArrowRef = _this$props2.setArrowRef, styles2 = _this$props2.styles, _styles$arrow = styles2.arrow, color2 = _styles$arrow.color, display = _styles$arrow.display, length = _styles$arrow.length, margin = _styles$arrow.margin, position = _styles$arrow.position, spread2 = _styles$arrow.spread, arrowStyles = { display, position }, points, x2 = spread2, y2 = length;
- return placement.startsWith("top") ? (points = "0,0 ".concat(x2 / 2, ",").concat(y2, " ").concat(x2, ",0"), arrowStyles.bottom = 0, arrowStyles.marginLeft = margin, arrowStyles.marginRight = margin) : placement.startsWith("bottom") ? (points = "".concat(x2, ",").concat(y2, " ").concat(x2 / 2, ",0 0,").concat(y2), arrowStyles.top = 0, arrowStyles.marginLeft = margin, arrowStyles.marginRight = margin) : placement.startsWith("left") ? (y2 = spread2, x2 = length, points = "0,0 ".concat(x2, ",").concat(y2 / 2, " 0,").concat(y2), arrowStyles.right = 0, arrowStyles.marginTop = margin, arrowStyles.marginBottom = margin) : placement.startsWith("right") && (y2 = spread2, x2 = length, points = "".concat(x2, ",").concat(y2, " ").concat(x2, ",0 0,").concat(y2 / 2), arrowStyles.left = 0, arrowStyles.marginTop = margin, arrowStyles.marginBottom = margin), react_default.createElement("div", { className: "__floater__arrow", style: this.parentStyle }, react_default.createElement("span", { ref: setArrowRef, style: arrowStyles }, react_default.createElement("svg", { width: x2, height: y2, version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, react_default.createElement("polygon", { points, fill: color2 }))));
- } }]), FloaterArrow2;
- })(react_default.Component);
- _defineProperty(FloaterArrow, "propTypes", { placement: import_prop_types2.default.string.isRequired, setArrowRef: import_prop_types2.default.func.isRequired, styles: import_prop_types2.default.object.isRequired });
- var _excluded$1 = ["color", "height", "width"];
- function FloaterCloseBtn(_ref) {
- var handleClick = _ref.handleClick, styles2 = _ref.styles, color2 = styles2.color, height = styles2.height, width = styles2.width, style = _objectWithoutProperties(styles2, _excluded$1);
- return react_default.createElement("button", { "aria-label": "close", onClick: handleClick, style, type: "button" }, react_default.createElement("svg", { width: "".concat(width, "px"), height: "".concat(height, "px"), viewBox: "0 0 18 18", version: "1.1", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" }, react_default.createElement("g", null, react_default.createElement("path", { d: "M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z", fill: color2 }))));
- }
- FloaterCloseBtn.propTypes = { handleClick: import_prop_types2.default.func.isRequired, styles: import_prop_types2.default.object.isRequired };
- function FloaterContainer(_ref) {
- var content = _ref.content, footer = _ref.footer, handleClick = _ref.handleClick, open = _ref.open, positionWrapper = _ref.positionWrapper, showCloseButton = _ref.showCloseButton, title2 = _ref.title, styles2 = _ref.styles, output = { content: react_default.isValidElement(content) ? content : react_default.createElement("div", { className: "__floater__content", style: styles2.content }, content) };
- return title2 && (output.title = react_default.isValidElement(title2) ? title2 : react_default.createElement("div", { className: "__floater__title", style: styles2.title }, title2)), footer && (output.footer = react_default.isValidElement(footer) ? footer : react_default.createElement("div", { className: "__floater__footer", style: styles2.footer }, footer)), (showCloseButton || positionWrapper) && !esm_default.boolean(open) && (output.close = react_default.createElement(FloaterCloseBtn, { styles: styles2.close, handleClick })), react_default.createElement("div", { className: "__floater__container", style: styles2.container }, output.close, output.title, output.content, output.footer);
- }
- FloaterContainer.propTypes = { content: import_prop_types2.default.node.isRequired, footer: import_prop_types2.default.node, handleClick: import_prop_types2.default.func.isRequired, open: import_prop_types2.default.bool, positionWrapper: import_prop_types2.default.bool.isRequired, showCloseButton: import_prop_types2.default.bool.isRequired, styles: import_prop_types2.default.object.isRequired, title: import_prop_types2.default.node };
- var Floater = (function(_React$Component) {
- _inherits(Floater2, _React$Component);
- var _super = _createSuper(Floater2);
- function Floater2() {
- return _classCallCheck(this, Floater2), _super.apply(this, arguments);
- }
- return _createClass(Floater2, [{ key: "style", get: function() {
- var _this$props = this.props, disableAnimation = _this$props.disableAnimation, component = _this$props.component, placement = _this$props.placement, hideArrow = _this$props.hideArrow, status = _this$props.status, styles2 = _this$props.styles, length = styles2.arrow.length, floater = styles2.floater, floaterCentered = styles2.floaterCentered, floaterClosing = styles2.floaterClosing, floaterOpening = styles2.floaterOpening, floaterWithAnimation = styles2.floaterWithAnimation, floaterWithComponent = styles2.floaterWithComponent, element = {};
- return hideArrow || (placement.startsWith("top") ? element.padding = "0 0 ".concat(length, "px") : placement.startsWith("bottom") ? element.padding = "".concat(length, "px 0 0") : placement.startsWith("left") ? element.padding = "0 ".concat(length, "px 0 0") : placement.startsWith("right") && (element.padding = "0 0 0 ".concat(length, "px"))), [STATUS2.OPENING, STATUS2.OPEN].indexOf(status) !== -1 && (element = _objectSpread2(_objectSpread2({}, element), floaterOpening)), status === STATUS2.CLOSING && (element = _objectSpread2(_objectSpread2({}, element), floaterClosing)), status === STATUS2.OPEN && !disableAnimation && (element = _objectSpread2(_objectSpread2({}, element), floaterWithAnimation)), placement === "center" && (element = _objectSpread2(_objectSpread2({}, element), floaterCentered)), component && (element = _objectSpread2(_objectSpread2({}, element), floaterWithComponent)), _objectSpread2(_objectSpread2({}, floater), element);
- } }, { key: "render", value: function() {
- var _this$props2 = this.props, component = _this$props2.component, closeFn = _this$props2.handleClick, hideArrow = _this$props2.hideArrow, setFloaterRef = _this$props2.setFloaterRef, status = _this$props2.status, output = {}, classes = ["__floater"];
- return component ? react_default.isValidElement(component) ? output.content = react_default.cloneElement(component, { closeFn }) : output.content = component({ closeFn }) : output.content = react_default.createElement(FloaterContainer, this.props), status === STATUS2.OPEN && classes.push("__floater__open"), hideArrow || (output.arrow = react_default.createElement(FloaterArrow, this.props)), react_default.createElement("div", { ref: setFloaterRef, className: classes.join(" "), style: this.style }, react_default.createElement("div", { className: "__floater__body" }, output.content, output.arrow));
- } }]), Floater2;
- })(react_default.Component);
- _defineProperty(Floater, "propTypes", { component: import_prop_types2.default.oneOfType([import_prop_types2.default.func, import_prop_types2.default.element]), content: import_prop_types2.default.node, disableAnimation: import_prop_types2.default.bool.isRequired, footer: import_prop_types2.default.node, handleClick: import_prop_types2.default.func.isRequired, hideArrow: import_prop_types2.default.bool.isRequired, open: import_prop_types2.default.bool, placement: import_prop_types2.default.string.isRequired, positionWrapper: import_prop_types2.default.bool.isRequired, setArrowRef: import_prop_types2.default.func.isRequired, setFloaterRef: import_prop_types2.default.func.isRequired, showCloseButton: import_prop_types2.default.bool, status: import_prop_types2.default.string.isRequired, styles: import_prop_types2.default.object.isRequired, title: import_prop_types2.default.node });
- var ReactFloaterWrapper = (function(_React$Component) {
- _inherits(ReactFloaterWrapper2, _React$Component);
- var _super = _createSuper(ReactFloaterWrapper2);
- function ReactFloaterWrapper2() {
- return _classCallCheck(this, ReactFloaterWrapper2), _super.apply(this, arguments);
- }
- return _createClass(ReactFloaterWrapper2, [{ key: "render", value: function() {
- var _this$props = this.props, children = _this$props.children, handleClick = _this$props.handleClick, handleMouseEnter = _this$props.handleMouseEnter, handleMouseLeave = _this$props.handleMouseLeave, setChildRef = _this$props.setChildRef, setWrapperRef = _this$props.setWrapperRef, style = _this$props.style, styles2 = _this$props.styles, element;
- if (children)
- if (react_default.Children.count(children) === 1)
- if (!react_default.isValidElement(children))
- element = react_default.createElement("span", null, children);
- else {
- var refProp = esm_default.function(children.type) ? "innerRef" : "ref";
- element = react_default.cloneElement(react_default.Children.only(children), _defineProperty({}, refProp, setChildRef));
- }
- else
- element = children;
- return element ? react_default.createElement("span", { ref: setWrapperRef, style: _objectSpread2(_objectSpread2({}, styles2), style), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, element) : null;
- } }]), ReactFloaterWrapper2;
- })(react_default.Component);
- _defineProperty(ReactFloaterWrapper, "propTypes", { children: import_prop_types2.default.node, handleClick: import_prop_types2.default.func.isRequired, handleMouseEnter: import_prop_types2.default.func.isRequired, handleMouseLeave: import_prop_types2.default.func.isRequired, setChildRef: import_prop_types2.default.func.isRequired, setWrapperRef: import_prop_types2.default.func.isRequired, style: import_prop_types2.default.object, styles: import_prop_types2.default.object.isRequired });
- var defaultOptions = { zIndex: 100 };
- function getStyles(styles2) {
- var options2 = (0, import_deepmerge.default)(defaultOptions, styles2.options || {});
- return { wrapper: { cursor: "help", display: "inline-flex", flexDirection: "column", zIndex: options2.zIndex }, wrapperPosition: { left: -1e3, position: "absolute", top: -1e3, visibility: "hidden" }, floater: { display: "inline-block", filter: "drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))", maxWidth: 300, opacity: 0, position: "relative", transition: "opacity 0.3s", visibility: "hidden", zIndex: options2.zIndex }, floaterOpening: { opacity: 1, visibility: "visible" }, floaterWithAnimation: { opacity: 1, transition: "opacity 0.3s, transform 0.2s", visibility: "visible" }, floaterWithComponent: { maxWidth: "100%" }, floaterClosing: { opacity: 0, visibility: "visible" }, floaterCentered: { left: "50%", position: "fixed", top: "50%", transform: "translate(-50%, -50%)" }, container: { backgroundColor: "#fff", color: "#666", minHeight: 60, minWidth: 200, padding: 20, position: "relative", zIndex: 10 }, title: { borderBottom: "1px solid #555", color: "#555", fontSize: 18, marginBottom: 5, paddingBottom: 6, paddingRight: 18 }, content: { fontSize: 15 }, close: { backgroundColor: "transparent", border: 0, borderRadius: 0, color: "#555", fontSize: 0, height: 15, outline: "none", padding: 10, position: "absolute", right: 0, top: 0, width: 15, WebkitAppearance: "none" }, footer: { borderTop: "1px solid #ccc", fontSize: 13, marginTop: 10, paddingTop: 5 }, arrow: { color: "#fff", display: "inline-flex", length: 16, margin: 8, position: "absolute", spread: 32 }, options: options2 };
- }
- var _excluded = ["arrow", "flip", "offset"], POSITIONING_PROPS = ["position", "top", "right", "bottom", "left"], ReactFloater = (function(_React$Component) {
- _inherits(ReactFloater2, _React$Component);
- var _super = _createSuper(ReactFloater2);
- function ReactFloater2(props) {
- var _this;
- return _classCallCheck(this, ReactFloater2), _this = _super.call(this, props), _defineProperty(_assertThisInitialized2(_this), "setArrowRef", function(ref) {
- _this.arrowRef = ref;
- }), _defineProperty(_assertThisInitialized2(_this), "setChildRef", function(ref) {
- _this.childRef = ref;
- }), _defineProperty(_assertThisInitialized2(_this), "setFloaterRef", function(ref) {
- _this.floaterRef = ref;
- }), _defineProperty(_assertThisInitialized2(_this), "setWrapperRef", function(ref) {
- _this.wrapperRef = ref;
- }), _defineProperty(_assertThisInitialized2(_this), "handleTransitionEnd", function() {
- var status = _this.state.status, callback = _this.props.callback;
- _this.wrapperPopper && _this.wrapperPopper.instance.update(), _this.setState({ status: status === STATUS2.OPENING ? STATUS2.OPEN : STATUS2.IDLE }, function() {
- var newStatus = _this.state.status;
- callback(newStatus === STATUS2.OPEN ? "open" : "close", _this.props);
- });
- }), _defineProperty(_assertThisInitialized2(_this), "handleClick", function() {
- var _this$props = _this.props, event = _this$props.event, open = _this$props.open;
- if (!esm_default.boolean(open)) {
- var _this$state = _this.state, positionWrapper = _this$state.positionWrapper, status = _this$state.status;
- (_this.event === "click" || _this.event === "hover" && positionWrapper) && (log({ title: "click", data: [{ event, status: status === STATUS2.OPEN ? "closing" : "opening" }], debug: _this.debug }), _this.toggle());
- }
- }), _defineProperty(_assertThisInitialized2(_this), "handleMouseEnter", function() {
- var _this$props2 = _this.props, event = _this$props2.event, open = _this$props2.open;
- if (!(esm_default.boolean(open) || isMobile())) {
- var status = _this.state.status;
- _this.event === "hover" && status === STATUS2.IDLE && (log({ title: "mouseEnter", data: [{ key: "originalEvent", value: event }], debug: _this.debug }), clearTimeout(_this.eventDelayTimeout), _this.toggle());
- }
- }), _defineProperty(_assertThisInitialized2(_this), "handleMouseLeave", function() {
- var _this$props3 = _this.props, event = _this$props3.event, eventDelay = _this$props3.eventDelay, open = _this$props3.open;
- if (!(esm_default.boolean(open) || isMobile())) {
- var _this$state2 = _this.state, status = _this$state2.status, positionWrapper = _this$state2.positionWrapper;
- _this.event === "hover" && (log({ title: "mouseLeave", data: [{ key: "originalEvent", value: event }], debug: _this.debug }), eventDelay ? [STATUS2.OPENING, STATUS2.OPEN].indexOf(status) !== -1 && !positionWrapper && !_this.eventDelayTimeout && (_this.eventDelayTimeout = setTimeout(function() {
- delete _this.eventDelayTimeout, _this.toggle();
- }, eventDelay * 1e3)) : _this.toggle(STATUS2.IDLE));
- }
- }), _this.state = { currentPlacement: props.placement, needsUpdate: !1, positionWrapper: props.wrapperOptions.position && !!props.target, status: STATUS2.INIT, statusWrapper: STATUS2.INIT }, _this._isMounted = !1, _this.hasMounted = !1, canUseDOM() && window.addEventListener("load", function() {
- _this.popper && _this.popper.instance.update(), _this.wrapperPopper && _this.wrapperPopper.instance.update();
- }), _this;
- }
- return _createClass(ReactFloater2, [{ key: "componentDidMount", value: function() {
- if (canUseDOM()) {
- var positionWrapper = this.state.positionWrapper, _this$props5 = this.props, children = _this$props5.children, open = _this$props5.open, target = _this$props5.target;
- this._isMounted = !0, log({ title: "init", data: { hasChildren: !!children, hasTarget: !!target, isControlled: esm_default.boolean(open), positionWrapper, target: this.target, floater: this.floaterRef }, debug: this.debug }), this.hasMounted || (this.initPopper(), this.hasMounted = !0), !children && target && esm_default.boolean(open);
- }
- } }, { key: "componentDidUpdate", value: function(prevProps, prevState) {
- if (canUseDOM()) {
- var _this$props6 = this.props, autoOpen = _this$props6.autoOpen, open = _this$props6.open, target = _this$props6.target, wrapperOptions = _this$props6.wrapperOptions, _treeChanges = treeChanges2(prevState, this.state), changedFrom = _treeChanges.changedFrom, changed = _treeChanges.changed;
- if (prevProps.open !== open) {
- var forceStatus;
- esm_default.boolean(open) && (forceStatus = open ? STATUS2.OPENING : STATUS2.CLOSING), this.toggle(forceStatus);
- }
- (prevProps.wrapperOptions.position !== wrapperOptions.position || prevProps.target !== target) && this.changeWrapperPosition(this.props), changed("status", STATUS2.IDLE) && open ? this.toggle(STATUS2.OPEN) : changedFrom("status", STATUS2.INIT, STATUS2.IDLE) && autoOpen && this.toggle(STATUS2.OPEN), this.popper && changed("status", STATUS2.OPENING) && this.popper.instance.update(), this.floaterRef && (changed("status", STATUS2.OPENING) || changed("status", STATUS2.CLOSING)) && once3(this.floaterRef, "transitionend", this.handleTransitionEnd), changed("needsUpdate", !0) && this.rebuildPopper();
- }
- } }, { key: "componentWillUnmount", value: function() {
- canUseDOM() && (this._isMounted = !1, this.popper && this.popper.instance.destroy(), this.wrapperPopper && this.wrapperPopper.instance.destroy());
- } }, { key: "initPopper", value: function() {
- var _this2 = this, target = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.target, positionWrapper = this.state.positionWrapper, _this$props7 = this.props, disableFlip = _this$props7.disableFlip, getPopper = _this$props7.getPopper, hideArrow = _this$props7.hideArrow, offset2 = _this$props7.offset, placement = _this$props7.placement, wrapperOptions = _this$props7.wrapperOptions, flipBehavior = placement === "top" || placement === "bottom" ? "flip" : ["right", "bottom-end", "top-end", "left", "top-start", "bottom-start"];
- if (placement === "center")
- this.setState({ status: STATUS2.IDLE });
- else if (target && this.floaterRef) {
- var _this$options = this.options, arrow2 = _this$options.arrow, flip2 = _this$options.flip, offsetOptions = _this$options.offset, rest2 = _objectWithoutProperties(_this$options, _excluded);
- new popper_default(target, this.floaterRef, { placement, modifiers: _objectSpread2({ arrow: _objectSpread2({ enabled: !hideArrow, element: this.arrowRef }, arrow2), flip: _objectSpread2({ enabled: !disableFlip, behavior: flipBehavior }, flip2), offset: _objectSpread2({ offset: "0, ".concat(offset2, "px") }, offsetOptions) }, rest2), onCreate: function(data) {
- var _this2$floaterRef;
- if (_this2.popper = data, !((_this2$floaterRef = _this2.floaterRef) !== null && _this2$floaterRef !== void 0 && _this2$floaterRef.isConnected)) {
- _this2.setState({ needsUpdate: !0 });
- return;
- }
- getPopper(data, "floater"), _this2._isMounted && _this2.setState({ currentPlacement: data.placement, status: STATUS2.IDLE }), placement !== data.placement && setTimeout(function() {
- data.instance.update();
- }, 1);
- }, onUpdate: function(data) {
- _this2.popper = data;
- var currentPlacement = _this2.state.currentPlacement;
- _this2._isMounted && data.placement !== currentPlacement && _this2.setState({ currentPlacement: data.placement });
- } });
- }
- if (positionWrapper) {
- var wrapperOffset = esm_default.undefined(wrapperOptions.offset) ? 0 : wrapperOptions.offset;
- new popper_default(this.target, this.wrapperRef, { placement: wrapperOptions.placement || placement, modifiers: { arrow: { enabled: !1 }, offset: { offset: "0, ".concat(wrapperOffset, "px") }, flip: { enabled: !1 } }, onCreate: function(data) {
- _this2.wrapperPopper = data, _this2._isMounted && _this2.setState({ statusWrapper: STATUS2.IDLE }), getPopper(data, "wrapper"), placement !== data.placement && setTimeout(function() {
- data.instance.update();
- }, 1);
- } });
- }
- } }, { key: "rebuildPopper", value: function() {
- var _this3 = this;
- this.floaterRefInterval = setInterval(function() {
- var _this3$floaterRef;
- (_this3$floaterRef = _this3.floaterRef) !== null && _this3$floaterRef !== void 0 && _this3$floaterRef.isConnected && (clearInterval(_this3.floaterRefInterval), _this3.setState({ needsUpdate: !1 }), _this3.initPopper());
- }, 50);
- } }, { key: "changeWrapperPosition", value: function(_ref) {
- var target = _ref.target, wrapperOptions = _ref.wrapperOptions;
- this.setState({ positionWrapper: wrapperOptions.position && !!target });
- } }, { key: "toggle", value: function(forceStatus) {
- var status = this.state.status, nextStatus = status === STATUS2.OPEN ? STATUS2.CLOSING : STATUS2.OPENING;
- esm_default.undefined(forceStatus) || (nextStatus = forceStatus), this.setState({ status: nextStatus });
- } }, { key: "debug", get: function() {
- var debug = this.props.debug;
- return debug || canUseDOM() && "ReactFloaterDebug" in window && !!window.ReactFloaterDebug;
- } }, { key: "event", get: function() {
- var _this$props8 = this.props, disableHoverToClick = _this$props8.disableHoverToClick, event = _this$props8.event;
- return event === "hover" && isMobile() && !disableHoverToClick ? "click" : event;
- } }, { key: "options", get: function() {
- var options2 = this.props.options;
- return (0, import_deepmerge.default)(DEFAULTS, options2 || {});
- } }, { key: "styles", get: function() {
- var _this4 = this, _this$state3 = this.state, status = _this$state3.status, positionWrapper = _this$state3.positionWrapper, statusWrapper = _this$state3.statusWrapper, styles2 = this.props.styles, nextStyles = (0, import_deepmerge.default)(getStyles(styles2), styles2);
- if (positionWrapper) {
- var wrapperStyles;
- [STATUS2.IDLE].indexOf(status) === -1 || [STATUS2.IDLE].indexOf(statusWrapper) === -1 ? wrapperStyles = nextStyles.wrapperPosition : wrapperStyles = this.wrapperPopper.styles, nextStyles.wrapper = _objectSpread2(_objectSpread2({}, nextStyles.wrapper), wrapperStyles);
- }
- if (this.target) {
- var targetStyles = window.getComputedStyle(this.target);
- this.wrapperStyles ? nextStyles.wrapper = _objectSpread2(_objectSpread2({}, nextStyles.wrapper), this.wrapperStyles) : ["relative", "static"].indexOf(targetStyles.position) === -1 && (this.wrapperStyles = {}, positionWrapper || (POSITIONING_PROPS.forEach(function(d2) {
- _this4.wrapperStyles[d2] = targetStyles[d2];
- }), nextStyles.wrapper = _objectSpread2(_objectSpread2({}, nextStyles.wrapper), this.wrapperStyles), this.target.style.position = "relative", this.target.style.top = "auto", this.target.style.right = "auto", this.target.style.bottom = "auto", this.target.style.left = "auto"));
- }
- return nextStyles;
- } }, { key: "target", get: function() {
- if (!canUseDOM()) return null;
- var target = this.props.target;
- return target ? esm_default.domElement(target) ? target : document.querySelector(target) : this.childRef || this.wrapperRef;
- } }, { key: "render", value: function() {
- var _this$state4 = this.state, currentPlacement = _this$state4.currentPlacement, positionWrapper = _this$state4.positionWrapper, status = _this$state4.status, _this$props9 = this.props, children = _this$props9.children, component = _this$props9.component, content = _this$props9.content, disableAnimation = _this$props9.disableAnimation, footer = _this$props9.footer, hideArrow = _this$props9.hideArrow, id = _this$props9.id, open = _this$props9.open, showCloseButton = _this$props9.showCloseButton, style = _this$props9.style, target = _this$props9.target, title2 = _this$props9.title, wrapper = react_default.createElement(ReactFloaterWrapper, { handleClick: this.handleClick, handleMouseEnter: this.handleMouseEnter, handleMouseLeave: this.handleMouseLeave, setChildRef: this.setChildRef, setWrapperRef: this.setWrapperRef, style, styles: this.styles.wrapper }, children), output = {};
- return positionWrapper ? output.wrapperInPortal = wrapper : output.wrapperAsChildren = wrapper, react_default.createElement("span", null, react_default.createElement(ReactFloaterPortal, { hasChildren: !!children, id, placement: currentPlacement, setRef: this.setFloaterRef, target, zIndex: this.styles.options.zIndex }, react_default.createElement(Floater, { component, content, disableAnimation, footer, handleClick: this.handleClick, hideArrow: hideArrow || currentPlacement === "center", open, placement: currentPlacement, positionWrapper, setArrowRef: this.setArrowRef, setFloaterRef: this.setFloaterRef, showCloseButton, status, styles: this.styles, title: title2 }), output.wrapperInPortal), output.wrapperAsChildren);
- } }]), ReactFloater2;
- })(react_default.Component);
- _defineProperty(ReactFloater, "propTypes", { autoOpen: import_prop_types2.default.bool, callback: import_prop_types2.default.func, children: import_prop_types2.default.node, component: isRequiredIf(import_prop_types2.default.oneOfType([import_prop_types2.default.func, import_prop_types2.default.element]), function(props) {
- return !props.content;
- }), content: isRequiredIf(import_prop_types2.default.node, function(props) {
- return !props.component;
- }), debug: import_prop_types2.default.bool, disableAnimation: import_prop_types2.default.bool, disableFlip: import_prop_types2.default.bool, disableHoverToClick: import_prop_types2.default.bool, event: import_prop_types2.default.oneOf(["hover", "click"]), eventDelay: import_prop_types2.default.number, footer: import_prop_types2.default.node, getPopper: import_prop_types2.default.func, hideArrow: import_prop_types2.default.bool, id: import_prop_types2.default.oneOfType([import_prop_types2.default.string, import_prop_types2.default.number]), offset: import_prop_types2.default.number, open: import_prop_types2.default.bool, options: import_prop_types2.default.object, placement: import_prop_types2.default.oneOf(["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end", "auto", "center"]), showCloseButton: import_prop_types2.default.bool, style: import_prop_types2.default.object, styles: import_prop_types2.default.object, target: import_prop_types2.default.oneOfType([import_prop_types2.default.object, import_prop_types2.default.string]), title: import_prop_types2.default.node, wrapperOptions: import_prop_types2.default.shape({ offset: import_prop_types2.default.number, placement: import_prop_types2.default.oneOf(["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end", "auto"]), position: import_prop_types2.default.bool }) });
- _defineProperty(ReactFloater, "defaultProps", { autoOpen: !1, callback: noop2, debug: !1, disableAnimation: !1, disableFlip: !1, disableHoverToClick: !1, event: "click", eventDelay: 0.4, getPopper: noop2, hideArrow: !1, offset: 15, placement: "bottom", showCloseButton: !1, styles: {}, target: null, wrapperOptions: { position: !1 } });
-
- // ../../node_modules/react-joyride/dist/index.mjs
- init_react();
- init_react();
- init_react();
- init_react();
- var __defProp3 = Object.defineProperty, __defNormalProp2 = (obj, key, value) => key in obj ? __defProp3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField = (obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), ACTIONS = {
- INIT: "init",
- START: "start",
- STOP: "stop",
- RESET: "reset",
- PREV: "prev",
- NEXT: "next",
- GO: "go",
- CLOSE: "close",
- SKIP: "skip",
- UPDATE: "update"
- }, EVENTS = {
- TOUR_START: "tour:start",
- STEP_BEFORE: "step:before",
- BEACON: "beacon",
- TOOLTIP: "tooltip",
- STEP_AFTER: "step:after",
- TOUR_END: "tour:end",
- TOUR_STATUS: "tour:status",
- TARGET_NOT_FOUND: "error:target_not_found",
- ERROR: "error"
- }, LIFECYCLE = {
- INIT: "init",
- READY: "ready",
- BEACON: "beacon",
- TOOLTIP: "tooltip",
- COMPLETE: "complete",
- ERROR: "error"
- };
- var STATUS3 = {
- IDLE: "idle",
- READY: "ready",
- WAITING: "waiting",
- RUNNING: "running",
- PAUSED: "paused",
- SKIPPED: "skipped",
- FINISHED: "finished",
- ERROR: "error"
- };
- function canUseDOM2() {
- var _a2;
- return !!(typeof window < "u" && ((_a2 = window.document) != null && _a2.createElement));
- }
- function getClientRect2(element) {
- return element ? element.getBoundingClientRect() : null;
- }
- function getDocumentHeight(median = !1) {
- let { body, documentElement } = document;
- if (!body || !documentElement)
- return 0;
- if (median) {
- let heights = [
- body.scrollHeight,
- body.offsetHeight,
- documentElement.clientHeight,
- documentElement.scrollHeight,
- documentElement.offsetHeight
- ].sort((a2, b2) => a2 - b2), middle = Math.floor(heights.length / 2);
- return heights.length % 2 === 0 ? (heights[middle - 1] + heights[middle]) / 2 : heights[middle];
- }
- return Math.max(
- body.scrollHeight,
- body.offsetHeight,
- documentElement.clientHeight,
- documentElement.scrollHeight,
- documentElement.offsetHeight
- );
- }
- function getElement(element) {
- if (typeof element == "string")
- try {
- return document.querySelector(element);
- } catch {
- return null;
- }
- return element;
- }
- function getStyleComputedProperty2(el) {
- return !el || el.nodeType !== 1 ? null : getComputedStyle(el);
- }
- function getScrollParent2(element, skipFix, forListener) {
- if (!element)
- return scrollDocument();
- let parent = (0, import_scrollparent.default)(element);
- if (parent) {
- if (parent.isSameNode(scrollDocument()))
- return forListener ? document : scrollDocument();
- if (!(parent.scrollHeight > parent.offsetHeight) && !skipFix)
- return parent.style.overflow = "initial", scrollDocument();
- }
- return parent;
- }
- function hasCustomScrollParent(element, skipFix) {
- if (!element)
- return !1;
- let parent = getScrollParent2(element, skipFix);
- return parent ? !parent.isSameNode(scrollDocument()) : !1;
- }
- function hasCustomOffsetParent(element) {
- return element.offsetParent !== document.body;
- }
- function hasPosition(el, type = "fixed") {
- if (!el || !(el instanceof HTMLElement))
- return !1;
- let { nodeName } = el, styles2 = getStyleComputedProperty2(el);
- return nodeName === "BODY" || nodeName === "HTML" ? !1 : styles2 && styles2.position === type ? !0 : el.parentNode ? hasPosition(el.parentNode, type) : !1;
- }
- function isElementVisible(element) {
- var _a2;
- if (!element)
- return !1;
- let parentElement = element;
- for (; parentElement && parentElement !== document.body; ) {
- if (parentElement instanceof HTMLElement) {
- let { display, visibility } = getComputedStyle(parentElement);
- if (display === "none" || visibility === "hidden")
- return !1;
- }
- parentElement = (_a2 = parentElement.parentElement) != null ? _a2 : null;
- }
- return !0;
- }
- function getElementPosition(element, offset2, skipFix) {
- var _a2, _b, _c;
- let elementRect = getClientRect2(element), parent = getScrollParent2(element, skipFix), hasScrollParent = hasCustomScrollParent(element, skipFix), isFixedTarget = hasPosition(element), parentTop = 0, top = (_a2 = elementRect?.top) != null ? _a2 : 0;
- if (hasScrollParent && isFixedTarget) {
- let offsetTop = (_b = element?.offsetTop) != null ? _b : 0, parentScrollTop = (_c = parent?.scrollTop) != null ? _c : 0;
- top = offsetTop - parentScrollTop;
- } else parent instanceof HTMLElement && (parentTop = parent.scrollTop, !hasScrollParent && !hasPosition(element) && (top += parentTop), parent.isSameNode(scrollDocument()) || (top += scrollDocument().scrollTop));
- return Math.floor(top - offset2);
- }
- function getScrollTo(element, offset2, skipFix) {
- var _a2;
- if (!element)
- return 0;
- let { offsetTop = 0, scrollTop = 0 } = (_a2 = (0, import_scrollparent.default)(element)) != null ? _a2 : {}, top = element.getBoundingClientRect().top + scrollTop;
- offsetTop && (hasCustomScrollParent(element, skipFix) || hasCustomOffsetParent(element)) && (top -= offsetTop);
- let output = Math.floor(top - offset2);
- return output < 0 ? 0 : output;
- }
- function scrollDocument() {
- var _a2;
- return (_a2 = document.scrollingElement) != null ? _a2 : document.documentElement;
- }
- function scrollTo(value, options2) {
- let { duration, element } = options2;
- return new Promise((resolve, reject) => {
- let { scrollTop } = element, limit = value > scrollTop ? value - scrollTop : scrollTop - value;
- import_scroll.default.top(element, value, { duration: limit < 100 ? 50 : duration }, (error) => error && error.message !== "Element already at target scroll position" ? reject(error) : resolve());
- });
- }
- var isReact162 = createPortal !== void 0;
- function getBrowser(userAgent = navigator.userAgent) {
- let browser = userAgent;
- return typeof window > "u" ? browser = "node" : document.documentMode ? browser = "ie" : /Edge/.test(userAgent) ? browser = "edge" : window.opera || userAgent.includes(" OPR/") ? browser = "opera" : typeof window.InstallTrigger < "u" ? browser = "firefox" : window.chrome ? browser = "chrome" : /(Version\/([\d._]+).*Safari|CriOS|FxiOS| Mobile\/)/.test(userAgent) && (browser = "safari"), browser;
- }
- function getObjectType4(value) {
- return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
- }
- function getReactNodeText(input, options2 = {}) {
- let { defaultValue, step, steps } = options2, text = (0, import_react_innertext.default)(input);
- if (text)
- (text.includes("{step}") || text.includes("{steps}")) && step && steps && (text = text.replace("{step}", step.toString()).replace("{steps}", steps.toString()));
- else if (isValidElement(input) && !Object.values(input.props).length && getObjectType4(input.type) === "function") {
- let component = input.type({});
- text = getReactNodeText(component, options2);
- } else
- text = (0, import_react_innertext.default)(defaultValue);
- return text;
- }
- function hasValidKeys(object, keys) {
- return !src_default.plainObject(object) || !src_default.array(keys) ? !1 : Object.keys(object).every((d2) => keys.includes(d2));
- }
- function hexToRGB(hex) {
- let shorthandRegex = /^#?([\da-f])([\da-f])([\da-f])$/i, properHex = hex.replace(shorthandRegex, (_m, r4, g2, b2) => r4 + r4 + g2 + g2 + b2 + b2), result = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(properHex);
- return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [];
- }
- function hideBeacon(step) {
- return step.disableBeacon || step.placement === "center";
- }
- function isLegacy() {
- return !["chrome", "safari", "firefox", "opera"].includes(getBrowser());
- }
- function log2({ data, debug = !1, title: title2, warn = !1 }) {
- let logFn = warn ? console.warn || console.error : console.log;
- debug && (title2 && data ? (console.groupCollapsed(
- `%creact-joyride: ${title2}`,
- "color: #ff0044; font-weight: bold; font-size: 12px;"
- ), Array.isArray(data) ? data.forEach((d2) => {
- src_default.plainObject(d2) && d2.key ? logFn.apply(console, [d2.key, d2.value]) : logFn.apply(console, [d2]);
- }) : logFn.apply(console, [data]), console.groupEnd()) : console.error("Missing title or data props"));
- }
- function objectKeys(input) {
- return Object.keys(input);
- }
- function omit2(input, ...filter) {
- if (!src_default.plainObject(input))
- throw new TypeError("Expected an object");
- let output = {};
- for (let key in input)
- ({}).hasOwnProperty.call(input, key) && (filter.includes(key) || (output[key] = input[key]));
- return output;
- }
- function pick2(input, ...filter) {
- if (!src_default.plainObject(input))
- throw new TypeError("Expected an object");
- if (!filter.length)
- return input;
- let output = {};
- for (let key in input)
- ({}).hasOwnProperty.call(input, key) && filter.includes(key) && (output[key] = input[key]);
- return output;
- }
- function replaceLocaleContent(input, step, steps) {
- let replacer = (text) => text.replace("{step}", String(step)).replace("{steps}", String(steps));
- if (getObjectType4(input) === "string")
- return replacer(input);
- if (!isValidElement(input))
- return input;
- let { children } = input.props;
- if (getObjectType4(children) === "string" && children.includes("{step}"))
- return cloneElement(input, {
- children: replacer(children)
- });
- if (Array.isArray(children))
- return cloneElement(input, {
- children: children.map((child) => typeof child == "string" ? replacer(child) : replaceLocaleContent(child, step, steps))
- });
- if (getObjectType4(input.type) === "function" && !Object.values(input.props).length) {
- let component = input.type({});
- return replaceLocaleContent(component, step, steps);
- }
- return input;
- }
- function shouldScroll(options2) {
- let { isFirstStep, lifecycle, previousLifecycle, scrollToFirstStep, step, target } = options2;
- return !step.disableScrolling && (!isFirstStep || scrollToFirstStep || lifecycle === LIFECYCLE.TOOLTIP) && step.placement !== "center" && (!step.isFixed || !hasPosition(target)) && // fixed steps don't need to scroll
- previousLifecycle !== lifecycle && [LIFECYCLE.BEACON, LIFECYCLE.TOOLTIP].includes(lifecycle);
- }
- var defaultFloaterProps = {
- options: {
- preventOverflow: {
- boundariesElement: "scrollParent"
- }
- },
- wrapperOptions: {
- offset: -18,
- position: !0
- }
- }, defaultLocale = {
- back: "Back",
- close: "Close",
- last: "Last",
- next: "Next",
- nextLabelWithProgress: "Next (Step {step} of {steps})",
- open: "Open the dialog",
- skip: "Skip"
- }, defaultStep = {
- event: "click",
- placement: "bottom",
- offset: 10,
- disableBeacon: !1,
- disableCloseOnEsc: !1,
- disableOverlay: !1,
- disableOverlayClose: !1,
- disableScrollParentFix: !1,
- disableScrolling: !1,
- hideBackButton: !1,
- hideCloseButton: !1,
- hideFooter: !1,
- isFixed: !1,
- locale: defaultLocale,
- showProgress: !1,
- showSkipButton: !1,
- spotlightClicks: !1,
- spotlightPadding: 10
- }, defaultProps = {
- continuous: !1,
- debug: !1,
- disableCloseOnEsc: !1,
- disableOverlay: !1,
- disableOverlayClose: !1,
- disableScrolling: !1,
- disableScrollParentFix: !1,
- getHelpers: void 0,
- hideBackButton: !1,
- run: !0,
- scrollOffset: 20,
- scrollDuration: 300,
- scrollToFirstStep: !1,
- showSkipButton: !1,
- showProgress: !1,
- spotlightClicks: !1,
- spotlightPadding: 10,
- steps: []
- }, defaultOptions2 = {
- arrowColor: "#fff",
- backgroundColor: "#fff",
- beaconSize: 36,
- overlayColor: "rgba(0, 0, 0, 0.5)",
- primaryColor: "#f04",
- spotlightShadow: "0 0 15px rgba(0, 0, 0, 0.5)",
- textColor: "#333",
- width: 380,
- zIndex: 100
- }, buttonBase = {
- backgroundColor: "transparent",
- border: 0,
- borderRadius: 0,
- color: "#555",
- cursor: "pointer",
- fontSize: 16,
- lineHeight: 1,
- padding: 8,
- WebkitAppearance: "none"
- }, spotlight = {
- borderRadius: 4,
- position: "absolute"
- };
- function getStyles2(props, step) {
- var _a2, _b, _c, _d, _e;
- let { floaterProps, styles: styles2 } = props, mergedFloaterProps = (0, import_deepmerge3.default)((_a2 = step.floaterProps) != null ? _a2 : {}, floaterProps ?? {}), mergedStyles = (0, import_deepmerge3.default)(styles2 ?? {}, (_b = step.styles) != null ? _b : {}), options2 = (0, import_deepmerge3.default)(defaultOptions2, mergedStyles.options || {}), hideBeacon2 = step.placement === "center" || step.disableBeacon, { width } = options2;
- window.innerWidth > 480 && (width = 380), "width" in options2 && (width = typeof options2.width == "number" && window.innerWidth < options2.width ? window.innerWidth - 30 : options2.width);
- let overlay = {
- bottom: 0,
- left: 0,
- overflow: "hidden",
- position: "absolute",
- right: 0,
- top: 0,
- zIndex: options2.zIndex
- }, defaultStyles = {
- beacon: {
- ...buttonBase,
- display: hideBeacon2 ? "none" : "inline-block",
- height: options2.beaconSize,
- position: "relative",
- width: options2.beaconSize,
- zIndex: options2.zIndex
- },
- beaconInner: {
- animation: "joyride-beacon-inner 1.2s infinite ease-in-out",
- backgroundColor: options2.primaryColor,
- borderRadius: "50%",
- display: "block",
- height: "50%",
- left: "50%",
- opacity: 0.7,
- position: "absolute",
- top: "50%",
- transform: "translate(-50%, -50%)",
- width: "50%"
- },
- beaconOuter: {
- animation: "joyride-beacon-outer 1.2s infinite ease-in-out",
- backgroundColor: `rgba(${hexToRGB(options2.primaryColor).join(",")}, 0.2)`,
- border: `2px solid ${options2.primaryColor}`,
- borderRadius: "50%",
- boxSizing: "border-box",
- display: "block",
- height: "100%",
- left: 0,
- opacity: 0.9,
- position: "absolute",
- top: 0,
- transformOrigin: "center",
- width: "100%"
- },
- tooltip: {
- backgroundColor: options2.backgroundColor,
- borderRadius: 5,
- boxSizing: "border-box",
- color: options2.textColor,
- fontSize: 16,
- maxWidth: "100%",
- padding: 15,
- position: "relative",
- width
- },
- tooltipContainer: {
- lineHeight: 1.4,
- textAlign: "center"
- },
- tooltipTitle: {
- fontSize: 18,
- margin: 0
- },
- tooltipContent: {
- padding: "20px 10px"
- },
- tooltipFooter: {
- alignItems: "center",
- display: "flex",
- justifyContent: "flex-end",
- marginTop: 15
- },
- tooltipFooterSpacer: {
- flex: 1
- },
- buttonNext: {
- ...buttonBase,
- backgroundColor: options2.primaryColor,
- borderRadius: 4,
- color: "#fff"
- },
- buttonBack: {
- ...buttonBase,
- color: options2.primaryColor,
- marginLeft: "auto",
- marginRight: 5
- },
- buttonClose: {
- ...buttonBase,
- color: options2.textColor,
- height: 14,
- padding: 15,
- position: "absolute",
- right: 0,
- top: 0,
- width: 14
- },
- buttonSkip: {
- ...buttonBase,
- color: options2.textColor,
- fontSize: 14
- },
- overlay: {
- ...overlay,
- backgroundColor: options2.overlayColor,
- mixBlendMode: "hard-light"
- },
- overlayLegacy: {
- ...overlay
- },
- overlayLegacyCenter: {
- ...overlay,
- backgroundColor: options2.overlayColor
- },
- spotlight: {
- ...spotlight,
- backgroundColor: "gray"
- },
- spotlightLegacy: {
- ...spotlight,
- boxShadow: `0 0 0 9999px ${options2.overlayColor}, ${options2.spotlightShadow}`
- },
- floaterStyles: {
- arrow: {
- color: (_e = (_d = (_c = mergedFloaterProps?.styles) == null ? void 0 : _c.arrow) == null ? void 0 : _d.color) != null ? _e : options2.arrowColor
- },
- options: {
- zIndex: options2.zIndex + 100
- }
- },
- options: options2
- };
- return (0, import_deepmerge3.default)(defaultStyles, mergedStyles);
- }
- function getTourProps(props) {
- return pick2(
- props,
- "beaconComponent",
- "disableCloseOnEsc",
- "disableOverlay",
- "disableOverlayClose",
- "disableScrolling",
- "disableScrollParentFix",
- "floaterProps",
- "hideBackButton",
- "hideCloseButton",
- "locale",
- "showProgress",
- "showSkipButton",
- "spotlightClicks",
- "spotlightPadding",
- "styles",
- "tooltipComponent"
- );
- }
- function getMergedStep(props, currentStep) {
- var _a2, _b, _c, _d, _e, _f;
- let step = currentStep ?? {}, mergedStep = import_deepmerge2.default.all([defaultStep, getTourProps(props), step], {
- isMergeableObject: src_default.plainObject
- }), mergedStyles = getStyles2(props, mergedStep), scrollParent2 = hasCustomScrollParent(
- getElement(mergedStep.target),
- mergedStep.disableScrollParentFix
- ), floaterProps = import_deepmerge2.default.all([
- defaultFloaterProps,
- (_a2 = props.floaterProps) != null ? _a2 : {},
- (_b = mergedStep.floaterProps) != null ? _b : {}
- ]);
- return floaterProps.offset = mergedStep.offset, floaterProps.styles = (0, import_deepmerge2.default)((_c = floaterProps.styles) != null ? _c : {}, mergedStyles.floaterStyles), floaterProps.offset += (_e = (_d = props.spotlightPadding) != null ? _d : mergedStep.spotlightPadding) != null ? _e : 0, mergedStep.placementBeacon && floaterProps.wrapperOptions && (floaterProps.wrapperOptions.placement = mergedStep.placementBeacon), scrollParent2 && floaterProps.options.preventOverflow && (floaterProps.options.preventOverflow.boundariesElement = "window"), {
- ...mergedStep,
- locale: import_deepmerge2.default.all([defaultLocale, (_f = props.locale) != null ? _f : {}, mergedStep.locale || {}]),
- floaterProps,
- styles: omit2(mergedStyles, "floaterStyles")
- };
- }
- function validateStep(step, debug = !1) {
- return src_default.plainObject(step) ? step.target ? !0 : (log2({
- title: "validateStep",
- data: "target is missing from the step",
- warn: !0,
- debug
- }), !1) : (log2({
- title: "validateStep",
- data: "step must be an object",
- warn: !0,
- debug
- }), !1);
- }
- function validateSteps(steps, debug = !1) {
- return src_default.array(steps) ? steps.every((d2) => validateStep(d2, debug)) : (log2({
- title: "validateSteps",
- data: "steps must be an array",
- warn: !0,
- debug
- }), !1);
- }
- var defaultState = {
- action: "init",
- controlled: !1,
- index: 0,
- lifecycle: LIFECYCLE.INIT,
- origin: null,
- size: 0,
- status: STATUS3.IDLE
- }, validKeys = objectKeys(omit2(defaultState, "controlled", "size")), Store = class {
- constructor(options2) {
- __publicField(this, "beaconPopper"), __publicField(this, "tooltipPopper"), __publicField(this, "data", /* @__PURE__ */ new Map()), __publicField(this, "listener"), __publicField(this, "store", /* @__PURE__ */ new Map()), __publicField(this, "addListener", (listener) => {
- this.listener = listener;
- }), __publicField(this, "setSteps", (steps2) => {
- let { size, status } = this.getState(), state = {
- size: steps2.length,
- status
- };
- this.data.set("steps", steps2), status === STATUS3.WAITING && !size && steps2.length && (state.status = STATUS3.RUNNING), this.setState(state);
- }), __publicField(this, "getPopper", (name) => name === "beacon" ? this.beaconPopper : this.tooltipPopper), __publicField(this, "setPopper", (name, popper) => {
- name === "beacon" ? this.beaconPopper = popper : this.tooltipPopper = popper;
- }), __publicField(this, "cleanupPoppers", () => {
- this.beaconPopper = null, this.tooltipPopper = null;
- }), __publicField(this, "close", (origin = null) => {
- let { index, status } = this.getState();
- status === STATUS3.RUNNING && this.setState({
- ...this.getNextState({ action: ACTIONS.CLOSE, index: index + 1, origin })
- });
- }), __publicField(this, "go", (nextIndex) => {
- let { controlled, status } = this.getState();
- if (controlled || status !== STATUS3.RUNNING)
- return;
- let step = this.getSteps()[nextIndex];
- this.setState({
- ...this.getNextState({ action: ACTIONS.GO, index: nextIndex }),
- status: step ? status : STATUS3.FINISHED
- });
- }), __publicField(this, "info", () => this.getState()), __publicField(this, "next", () => {
- let { index, status } = this.getState();
- status === STATUS3.RUNNING && this.setState(this.getNextState({ action: ACTIONS.NEXT, index: index + 1 }));
- }), __publicField(this, "open", () => {
- let { status } = this.getState();
- status === STATUS3.RUNNING && this.setState({
- ...this.getNextState({ action: ACTIONS.UPDATE, lifecycle: LIFECYCLE.TOOLTIP })
- });
- }), __publicField(this, "prev", () => {
- let { index, status } = this.getState();
- status === STATUS3.RUNNING && this.setState({
- ...this.getNextState({ action: ACTIONS.PREV, index: index - 1 })
- });
- }), __publicField(this, "reset", (restart = !1) => {
- let { controlled } = this.getState();
- controlled || this.setState({
- ...this.getNextState({ action: ACTIONS.RESET, index: 0 }),
- status: restart ? STATUS3.RUNNING : STATUS3.READY
- });
- }), __publicField(this, "skip", () => {
- let { status } = this.getState();
- status === STATUS3.RUNNING && this.setState({
- action: ACTIONS.SKIP,
- lifecycle: LIFECYCLE.INIT,
- status: STATUS3.SKIPPED
- });
- }), __publicField(this, "start", (nextIndex) => {
- let { index, size } = this.getState();
- this.setState({
- ...this.getNextState(
- {
- action: ACTIONS.START,
- index: src_default.number(nextIndex) ? nextIndex : index
- },
- !0
- ),
- status: size ? STATUS3.RUNNING : STATUS3.WAITING
- });
- }), __publicField(this, "stop", (advance = !1) => {
- let { index, status } = this.getState();
- [STATUS3.FINISHED, STATUS3.SKIPPED].includes(status) || this.setState({
- ...this.getNextState({ action: ACTIONS.STOP, index: index + (advance ? 1 : 0) }),
- status: STATUS3.PAUSED
- });
- }), __publicField(this, "update", (state) => {
- var _a2, _b;
- if (!hasValidKeys(state, validKeys))
- throw new Error(`State is not valid. Valid keys: ${validKeys.join(", ")}`);
- this.setState({
- ...this.getNextState(
- {
- ...this.getState(),
- ...state,
- action: (_a2 = state.action) != null ? _a2 : ACTIONS.UPDATE,
- origin: (_b = state.origin) != null ? _b : null
- },
- !0
- )
- });
- });
- let { continuous = !1, stepIndex, steps = [] } = options2 ?? {};
- this.setState(
- {
- action: ACTIONS.INIT,
- controlled: src_default.number(stepIndex),
- continuous,
- index: src_default.number(stepIndex) ? stepIndex : 0,
- lifecycle: LIFECYCLE.INIT,
- origin: null,
- status: steps.length ? STATUS3.READY : STATUS3.IDLE
- },
- !0
- ), this.beaconPopper = null, this.tooltipPopper = null, this.listener = null, this.setSteps(steps);
- }
- getState() {
- return this.store.size ? {
- action: this.store.get("action") || "",
- controlled: this.store.get("controlled") || !1,
- index: parseInt(this.store.get("index"), 10),
- lifecycle: this.store.get("lifecycle") || "",
- origin: this.store.get("origin") || null,
- size: this.store.get("size") || 0,
- status: this.store.get("status") || ""
- } : { ...defaultState };
- }
- getNextState(state, force = !1) {
- var _a2, _b, _c, _d, _e;
- let { action, controlled, index, size, status } = this.getState(), newIndex = src_default.number(state.index) ? state.index : index, nextIndex = controlled && !force ? index : Math.min(Math.max(newIndex, 0), size);
- return {
- action: (_a2 = state.action) != null ? _a2 : action,
- controlled,
- index: nextIndex,
- lifecycle: (_b = state.lifecycle) != null ? _b : LIFECYCLE.INIT,
- origin: (_c = state.origin) != null ? _c : null,
- size: (_d = state.size) != null ? _d : size,
- status: nextIndex === size ? STATUS3.FINISHED : (_e = state.status) != null ? _e : status
- };
- }
- getSteps() {
- let steps = this.data.get("steps");
- return Array.isArray(steps) ? steps : [];
- }
- hasUpdatedState(oldState) {
- let before2 = JSON.stringify(oldState), after2 = JSON.stringify(this.getState());
- return before2 !== after2;
- }
- setState(nextState, initial = !1) {
- let state = this.getState(), {
- action,
- index,
- lifecycle,
- origin = null,
- size,
- status
- } = {
- ...state,
- ...nextState
- };
- this.store.set("action", action), this.store.set("index", index), this.store.set("lifecycle", lifecycle), this.store.set("origin", origin), this.store.set("size", size), this.store.set("status", status), initial && (this.store.set("controlled", nextState.controlled), this.store.set("continuous", nextState.continuous)), this.listener && this.hasUpdatedState(state) && this.listener(this.getState());
- }
- getHelpers() {
- return {
- close: this.close,
- go: this.go,
- info: this.info,
- next: this.next,
- open: this.open,
- prev: this.prev,
- reset: this.reset,
- skip: this.skip
- };
- }
- };
- function createStore(options2) {
- return new Store(options2);
- }
- function JoyrideSpotlight({ styles: styles2 }) {
- return createElement(
- "div",
- {
- key: "JoyrideSpotlight",
- className: "react-joyride__spotlight",
- "data-test-id": "spotlight",
- style: styles2
- }
- );
- }
- var Spotlight_default = JoyrideSpotlight, JoyrideOverlay = class extends Component {
- constructor() {
- super(...arguments), __publicField(this, "isActive", !1), __publicField(this, "resizeTimeout"), __publicField(this, "scrollTimeout"), __publicField(this, "scrollParent"), __publicField(this, "state", {
- isScrolling: !1,
- mouseOverSpotlight: !1,
- showSpotlight: !0
- }), __publicField(this, "hideSpotlight", () => {
- let { continuous, disableOverlay, lifecycle } = this.props, hiddenLifecycles = [
- LIFECYCLE.INIT,
- LIFECYCLE.BEACON,
- LIFECYCLE.COMPLETE,
- LIFECYCLE.ERROR
- ];
- return disableOverlay || (continuous ? hiddenLifecycles.includes(lifecycle) : lifecycle !== LIFECYCLE.TOOLTIP);
- }), __publicField(this, "handleMouseMove", (event) => {
- let { mouseOverSpotlight } = this.state, { height, left, position, top, width } = this.spotlightStyles, offsetY = position === "fixed" ? event.clientY : event.pageY, offsetX = position === "fixed" ? event.clientX : event.pageX, inSpotlightHeight = offsetY >= top && offsetY <= top + height, inSpotlight = offsetX >= left && offsetX <= left + width && inSpotlightHeight;
- inSpotlight !== mouseOverSpotlight && this.updateState({ mouseOverSpotlight: inSpotlight });
- }), __publicField(this, "handleScroll", () => {
- let { target } = this.props, element = getElement(target);
- if (this.scrollParent !== document) {
- let { isScrolling } = this.state;
- isScrolling || this.updateState({ isScrolling: !0, showSpotlight: !1 }), clearTimeout(this.scrollTimeout), this.scrollTimeout = window.setTimeout(() => {
- this.updateState({ isScrolling: !1, showSpotlight: !0 });
- }, 50);
- } else hasPosition(element, "sticky") && this.updateState({});
- }), __publicField(this, "handleResize", () => {
- clearTimeout(this.resizeTimeout), this.resizeTimeout = window.setTimeout(() => {
- this.isActive && this.forceUpdate();
- }, 100);
- });
- }
- componentDidMount() {
- let { debug, disableScrolling, disableScrollParentFix = !1, target } = this.props, element = getElement(target);
- this.scrollParent = getScrollParent2(element ?? document.body, disableScrollParentFix, !0), this.isActive = !0, window.addEventListener("resize", this.handleResize);
- }
- componentDidUpdate(previousProps) {
- var _a2;
- let { disableScrollParentFix, lifecycle, spotlightClicks, target } = this.props, { changed } = treeChanges(previousProps, this.props);
- if (changed("target") || changed("disableScrollParentFix")) {
- let element = getElement(target);
- this.scrollParent = getScrollParent2(element ?? document.body, disableScrollParentFix, !0);
- }
- changed("lifecycle", LIFECYCLE.TOOLTIP) && ((_a2 = this.scrollParent) == null || _a2.addEventListener("scroll", this.handleScroll, { passive: !0 }), setTimeout(() => {
- let { isScrolling } = this.state;
- isScrolling || this.updateState({ showSpotlight: !0 });
- }, 100)), (changed("spotlightClicks") || changed("disableOverlay") || changed("lifecycle")) && (spotlightClicks && lifecycle === LIFECYCLE.TOOLTIP ? window.addEventListener("mousemove", this.handleMouseMove, !1) : lifecycle !== LIFECYCLE.TOOLTIP && window.removeEventListener("mousemove", this.handleMouseMove));
- }
- componentWillUnmount() {
- var _a2;
- this.isActive = !1, window.removeEventListener("mousemove", this.handleMouseMove), window.removeEventListener("resize", this.handleResize), clearTimeout(this.resizeTimeout), clearTimeout(this.scrollTimeout), (_a2 = this.scrollParent) == null || _a2.removeEventListener("scroll", this.handleScroll);
- }
- get overlayStyles() {
- let { mouseOverSpotlight } = this.state, { disableOverlayClose, placement, styles: styles2 } = this.props, baseStyles = styles2.overlay;
- return isLegacy() && (baseStyles = placement === "center" ? styles2.overlayLegacyCenter : styles2.overlayLegacy), {
- cursor: disableOverlayClose ? "default" : "pointer",
- height: getDocumentHeight(),
- pointerEvents: mouseOverSpotlight ? "none" : "auto",
- ...baseStyles
- };
- }
- get spotlightStyles() {
- var _a2, _b, _c;
- let { showSpotlight } = this.state, {
- disableScrollParentFix = !1,
- spotlightClicks,
- spotlightPadding = 0,
- styles: styles2,
- target
- } = this.props, element = getElement(target), elementRect = getClientRect2(element), isFixedTarget = hasPosition(element), top = getElementPosition(element, spotlightPadding, disableScrollParentFix);
- return {
- ...isLegacy() ? styles2.spotlightLegacy : styles2.spotlight,
- height: Math.round(((_a2 = elementRect?.height) != null ? _a2 : 0) + spotlightPadding * 2),
- left: Math.round(((_b = elementRect?.left) != null ? _b : 0) - spotlightPadding),
- opacity: showSpotlight ? 1 : 0,
- pointerEvents: spotlightClicks ? "none" : "auto",
- position: isFixedTarget ? "fixed" : "absolute",
- top,
- transition: "opacity 0.2s",
- width: Math.round(((_c = elementRect?.width) != null ? _c : 0) + spotlightPadding * 2)
- };
- }
- updateState(state) {
- this.isActive && this.setState((previousState) => ({ ...previousState, ...state }));
- }
- render() {
- let { showSpotlight } = this.state, { onClickOverlay, placement } = this.props, { hideSpotlight, overlayStyles, spotlightStyles } = this;
- if (hideSpotlight())
- return null;
- let spotlight2 = placement !== "center" && showSpotlight && createElement(Spotlight_default, { styles: spotlightStyles });
- if (getBrowser() === "safari") {
- let { mixBlendMode, zIndex, ...safariOverlay } = overlayStyles;
- spotlight2 = createElement("div", { style: { ...safariOverlay } }, spotlight2), delete overlayStyles.backgroundColor;
- }
- return createElement(
- "div",
- {
- className: "react-joyride__overlay",
- "data-test-id": "overlay",
- onClick: onClickOverlay,
- role: "presentation",
- style: overlayStyles
- },
- spotlight2
- );
- }
- }, JoyridePortal = class extends Component {
- constructor() {
- super(...arguments), __publicField(this, "node", null);
- }
- componentDidMount() {
- let { id } = this.props;
- canUseDOM2() && (this.node = document.createElement("div"), this.node.id = id, document.body.appendChild(this.node), isReact162 || this.renderReact15());
- }
- componentDidUpdate() {
- canUseDOM2() && (isReact162 || this.renderReact15());
- }
- componentWillUnmount() {
- !canUseDOM2() || !this.node || (isReact162 || unmountComponentAtNode(this.node), this.node.parentNode === document.body && (document.body.removeChild(this.node), this.node = null));
- }
- renderReact15() {
- if (!canUseDOM2())
- return;
- let { children } = this.props;
- this.node && unstable_renderSubtreeIntoContainer(this, children, this.node);
- }
- renderReact16() {
- if (!canUseDOM2() || !isReact162)
- return null;
- let { children } = this.props;
- return this.node ? createPortal(children, this.node) : null;
- }
- render() {
- return isReact162 ? this.renderReact16() : null;
- }
- }, Scope = class {
- constructor(element, options2) {
- if (__publicField(this, "element"), __publicField(this, "options"), __publicField(this, "canBeTabbed", (element2) => {
- let { tabIndex } = element2;
- return tabIndex === null || tabIndex < 0 ? !1 : this.canHaveFocus(element2);
- }), __publicField(this, "canHaveFocus", (element2) => {
- let validTabNodes = /input|select|textarea|button|object/, nodeName = element2.nodeName.toLowerCase();
- return (validTabNodes.test(nodeName) && !element2.getAttribute("disabled") || nodeName === "a" && !!element2.getAttribute("href")) && this.isVisible(element2);
- }), __publicField(this, "findValidTabElements", () => [].slice.call(this.element.querySelectorAll("*"), 0).filter(this.canBeTabbed)), __publicField(this, "handleKeyDown", (event) => {
- let { code = "Tab" } = this.options;
- event.code === code && this.interceptTab(event);
- }), __publicField(this, "interceptTab", (event) => {
- event.preventDefault();
- let elements = this.findValidTabElements(), { shiftKey } = event;
- if (!elements.length)
- return;
- let x2 = document.activeElement ? elements.indexOf(document.activeElement) : 0;
- x2 === -1 || !shiftKey && x2 + 1 === elements.length ? x2 = 0 : shiftKey && x2 === 0 ? x2 = elements.length - 1 : x2 += shiftKey ? -1 : 1, elements[x2].focus();
- }), __publicField(this, "isHidden", (element2) => {
- let noSize = element2.offsetWidth <= 0 && element2.offsetHeight <= 0, style = window.getComputedStyle(element2);
- return noSize && !element2.innerHTML ? !0 : noSize && style.getPropertyValue("overflow") !== "visible" || style.getPropertyValue("display") === "none";
- }), __publicField(this, "isVisible", (element2) => {
- let parentElement = element2;
- for (; parentElement; )
- if (parentElement instanceof HTMLElement) {
- if (parentElement === document.body)
- break;
- if (this.isHidden(parentElement))
- return !1;
- parentElement = parentElement.parentNode;
- }
- return !0;
- }), __publicField(this, "removeScope", () => {
- window.removeEventListener("keydown", this.handleKeyDown);
- }), __publicField(this, "checkFocus", (target) => {
- document.activeElement !== target && (target.focus(), window.requestAnimationFrame(() => this.checkFocus(target)));
- }), __publicField(this, "setFocus", () => {
- let { selector } = this.options;
- if (!selector)
- return;
- let target = this.element.querySelector(selector);
- target && window.requestAnimationFrame(() => this.checkFocus(target));
- }), !(element instanceof HTMLElement))
- throw new TypeError("Invalid parameter: element must be an HTMLElement");
- this.element = element, this.options = options2, window.addEventListener("keydown", this.handleKeyDown, !1), this.setFocus();
- }
- }, JoyrideBeacon = class extends Component {
- constructor(props) {
- if (super(props), __publicField(this, "beacon", null), __publicField(this, "setBeaconRef", (c2) => {
- this.beacon = c2;
- }), props.beaconComponent)
- return;
- let head = document.head || document.getElementsByTagName("head")[0], style = document.createElement("style");
- style.id = "joyride-beacon-animation", props.nonce && style.setAttribute("nonce", props.nonce), style.appendChild(document.createTextNode(`
- @keyframes joyride-beacon-inner {
- 20% {
- opacity: 0.9;
- }
-
- 90% {
- opacity: 0.7;
- }
- }
-
- @keyframes joyride-beacon-outer {
- 0% {
- transform: scale(1);
- }
-
- 45% {
- opacity: 0.7;
- transform: scale(0.75);
- }
-
- 100% {
- opacity: 0.9;
- transform: scale(1);
- }
- }
- `)), head.appendChild(style);
- }
- componentDidMount() {
- let { shouldFocus } = this.props;
- setTimeout(() => {
- src_default.domElement(this.beacon) && shouldFocus && this.beacon.focus();
- }, 0);
- }
- componentWillUnmount() {
- let style = document.getElementById("joyride-beacon-animation");
- style?.parentNode && style.parentNode.removeChild(style);
- }
- render() {
- let {
- beaconComponent,
- continuous,
- index,
- isLastStep,
- locale,
- onClickOrHover,
- size,
- step,
- styles: styles2
- } = this.props, title2 = getReactNodeText(locale.open), sharedProps = {
- "aria-label": title2,
- onClick: onClickOrHover,
- onMouseEnter: onClickOrHover,
- ref: this.setBeaconRef,
- title: title2
- }, component;
- return beaconComponent ? component = createElement(
- beaconComponent,
- {
- continuous,
- index,
- isLastStep,
- size,
- step,
- ...sharedProps
- }
- ) : component = createElement(
- "button",
- {
- key: "JoyrideBeacon",
- className: "react-joyride__beacon",
- "data-test-id": "button-beacon",
- style: styles2.beacon,
- type: "button",
- ...sharedProps
- },
- createElement("span", { style: styles2.beaconInner }),
- createElement("span", { style: styles2.beaconOuter })
- ), component;
- }
- };
- function JoyrideTooltipCloseButton({ styles: styles2, ...props }) {
- let { color: color2, height, width, ...style } = styles2;
- return react_default.createElement("button", { style, type: "button", ...props }, react_default.createElement(
- "svg",
- {
- height: typeof height == "number" ? `${height}px` : height,
- preserveAspectRatio: "xMidYMid",
- version: "1.1",
- viewBox: "0 0 18 18",
- width: typeof width == "number" ? `${width}px` : width,
- xmlns: "http://www.w3.org/2000/svg"
- },
- react_default.createElement("g", null, react_default.createElement(
- "path",
- {
- d: "M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z",
- fill: color2
- }
- ))
- ));
- }
- var CloseButton_default = JoyrideTooltipCloseButton;
- function JoyrideTooltipContainer(props) {
- let { backProps, closeProps, index, isLastStep, primaryProps, skipProps, step, tooltipProps } = props, { content, hideBackButton, hideCloseButton, hideFooter, showSkipButton, styles: styles2, title: title2 } = step, output = {};
- return output.primary = createElement(
- "button",
- {
- "data-test-id": "button-primary",
- style: styles2.buttonNext,
- type: "button",
- ...primaryProps
- }
- ), showSkipButton && !isLastStep && (output.skip = createElement(
- "button",
- {
- "aria-live": "off",
- "data-test-id": "button-skip",
- style: styles2.buttonSkip,
- type: "button",
- ...skipProps
- }
- )), !hideBackButton && index > 0 && (output.back = createElement("button", { "data-test-id": "button-back", style: styles2.buttonBack, type: "button", ...backProps })), output.close = !hideCloseButton && createElement(CloseButton_default, { "data-test-id": "button-close", styles: styles2.buttonClose, ...closeProps }), createElement(
- "div",
- {
- key: "JoyrideTooltip",
- "aria-label": getReactNodeText(title2 ?? content),
- className: "react-joyride__tooltip",
- style: styles2.tooltip,
- ...tooltipProps
- },
- createElement("div", { style: styles2.tooltipContainer }, title2 && createElement("h1", { "aria-label": getReactNodeText(title2), style: styles2.tooltipTitle }, title2), createElement("div", { style: styles2.tooltipContent }, content)),
- !hideFooter && createElement("div", { style: styles2.tooltipFooter }, createElement("div", { style: styles2.tooltipFooterSpacer }, output.skip), output.back, output.primary),
- output.close
- );
- }
- var Container_default = JoyrideTooltipContainer, JoyrideTooltip = class extends Component {
- constructor() {
- super(...arguments), __publicField(this, "handleClickBack", (event) => {
- event.preventDefault();
- let { helpers } = this.props;
- helpers.prev();
- }), __publicField(this, "handleClickClose", (event) => {
- event.preventDefault();
- let { helpers } = this.props;
- helpers.close("button_close");
- }), __publicField(this, "handleClickPrimary", (event) => {
- event.preventDefault();
- let { continuous, helpers } = this.props;
- if (!continuous) {
- helpers.close("button_primary");
- return;
- }
- helpers.next();
- }), __publicField(this, "handleClickSkip", (event) => {
- event.preventDefault();
- let { helpers } = this.props;
- helpers.skip();
- }), __publicField(this, "getElementsProps", () => {
- let { continuous, index, isLastStep, setTooltipRef, size, step } = this.props, { back, close, last, next, nextLabelWithProgress, skip } = step.locale, backText = getReactNodeText(back), closeText = getReactNodeText(close), lastText = getReactNodeText(last), nextText = getReactNodeText(next), skipText = getReactNodeText(skip), primary = close, primaryText = closeText;
- if (continuous) {
- if (primary = next, primaryText = nextText, step.showProgress && !isLastStep) {
- let labelWithProgress = getReactNodeText(nextLabelWithProgress, {
- step: index + 1,
- steps: size
- });
- primary = replaceLocaleContent(nextLabelWithProgress, index + 1, size), primaryText = labelWithProgress;
- }
- isLastStep && (primary = last, primaryText = lastText);
- }
- return {
- backProps: {
- "aria-label": backText,
- children: back,
- "data-action": "back",
- onClick: this.handleClickBack,
- role: "button",
- title: backText
- },
- closeProps: {
- "aria-label": closeText,
- children: close,
- "data-action": "close",
- onClick: this.handleClickClose,
- role: "button",
- title: closeText
- },
- primaryProps: {
- "aria-label": primaryText,
- children: primary,
- "data-action": "primary",
- onClick: this.handleClickPrimary,
- role: "button",
- title: primaryText
- },
- skipProps: {
- "aria-label": skipText,
- children: skip,
- "data-action": "skip",
- onClick: this.handleClickSkip,
- role: "button",
- title: skipText
- },
- tooltipProps: {
- "aria-modal": !0,
- ref: setTooltipRef,
- role: "alertdialog"
- }
- };
- });
- }
- render() {
- let { continuous, index, isLastStep, setTooltipRef, size, step } = this.props, { beaconComponent, tooltipComponent, ...cleanStep } = step, component;
- if (tooltipComponent) {
- let renderProps = {
- ...this.getElementsProps(),
- continuous,
- index,
- isLastStep,
- size,
- step: cleanStep,
- setTooltipRef
- };
- component = createElement(tooltipComponent, { ...renderProps });
- } else
- component = createElement(
- Container_default,
- {
- ...this.getElementsProps(),
- continuous,
- index,
- isLastStep,
- size,
- step
- }
- );
- return component;
- }
- }, JoyrideStep = class extends Component {
- constructor() {
- super(...arguments), __publicField(this, "scope", null), __publicField(this, "tooltip", null), __publicField(this, "handleClickHoverBeacon", (event) => {
- let { step, store: store2 } = this.props;
- event.type === "mouseenter" && step.event !== "hover" || store2.update({ lifecycle: LIFECYCLE.TOOLTIP });
- }), __publicField(this, "setTooltipRef", (element) => {
- this.tooltip = element;
- }), __publicField(this, "setPopper", (popper, type) => {
- var _a2;
- let { action, lifecycle, step, store: store2 } = this.props;
- type === "wrapper" ? store2.setPopper("beacon", popper) : store2.setPopper("tooltip", popper), store2.getPopper("beacon") && (store2.getPopper("tooltip") || step.placement === "center") && lifecycle === LIFECYCLE.INIT && store2.update({
- action,
- lifecycle: LIFECYCLE.READY
- }), (_a2 = step.floaterProps) != null && _a2.getPopper && step.floaterProps.getPopper(popper, type);
- }), __publicField(this, "renderTooltip", (renderProps) => {
- let { continuous, helpers, index, size, step } = this.props;
- return createElement(
- JoyrideTooltip,
- {
- continuous,
- helpers,
- index,
- isLastStep: index + 1 === size,
- setTooltipRef: this.setTooltipRef,
- size,
- step,
- ...renderProps
- }
- );
- });
- }
- componentDidMount() {
- let { debug, index } = this.props;
- log2({
- title: `step:${index}`,
- data: [{ key: "props", value: this.props }],
- debug
- });
- }
- componentDidUpdate(previousProps) {
- var _a2;
- let {
- action,
- callback,
- continuous,
- controlled,
- debug,
- helpers,
- index,
- lifecycle,
- shouldScroll: shouldScroll2,
- status,
- step,
- store: store2
- } = this.props, { changed, changedFrom } = treeChanges(previousProps, this.props), state = helpers.info(), skipBeacon = continuous && action !== ACTIONS.CLOSE && (index > 0 || action === ACTIONS.PREV), hasStoreChanged = changed("action") || changed("index") || changed("lifecycle") || changed("status"), isInitial = changedFrom("lifecycle", [LIFECYCLE.TOOLTIP, LIFECYCLE.INIT], LIFECYCLE.INIT), isAfterAction = changed("action", [
- ACTIONS.NEXT,
- ACTIONS.PREV,
- ACTIONS.SKIP,
- ACTIONS.CLOSE
- ]), isControlled = controlled && index === previousProps.index;
- if (isAfterAction && (isInitial || isControlled) && callback({
- ...state,
- index: previousProps.index,
- lifecycle: LIFECYCLE.COMPLETE,
- step: previousProps.step,
- type: EVENTS.STEP_AFTER
- }), step.placement === "center" && status === STATUS3.RUNNING && changed("index") && action !== ACTIONS.START && lifecycle === LIFECYCLE.INIT && store2.update({ lifecycle: LIFECYCLE.READY }), hasStoreChanged) {
- let element = getElement(step.target), elementExists = !!element;
- elementExists && isElementVisible(element) ? (changedFrom("status", STATUS3.READY, STATUS3.RUNNING) || changedFrom("lifecycle", LIFECYCLE.INIT, LIFECYCLE.READY)) && callback({
- ...state,
- step,
- type: EVENTS.STEP_BEFORE
- }) : (console.warn(elementExists ? "Target not visible" : "Target not mounted", step), callback({
- ...state,
- type: EVENTS.TARGET_NOT_FOUND,
- step
- }), controlled || store2.update({ index: index + (action === ACTIONS.PREV ? -1 : 1) }));
- }
- changedFrom("lifecycle", LIFECYCLE.INIT, LIFECYCLE.READY) && store2.update({
- lifecycle: hideBeacon(step) || skipBeacon ? LIFECYCLE.TOOLTIP : LIFECYCLE.BEACON
- }), changed("index") && log2({
- title: `step:${lifecycle}`,
- data: [{ key: "props", value: this.props }],
- debug
- }), changed("lifecycle", LIFECYCLE.BEACON) && callback({
- ...state,
- step,
- type: EVENTS.BEACON
- }), changed("lifecycle", LIFECYCLE.TOOLTIP) && (callback({
- ...state,
- step,
- type: EVENTS.TOOLTIP
- }), shouldScroll2 && this.tooltip && (this.scope = new Scope(this.tooltip, { selector: "[data-action=primary]" }), this.scope.setFocus())), changedFrom("lifecycle", [LIFECYCLE.TOOLTIP, LIFECYCLE.INIT], LIFECYCLE.INIT) && ((_a2 = this.scope) == null || _a2.removeScope(), store2.cleanupPoppers());
- }
- componentWillUnmount() {
- var _a2;
- (_a2 = this.scope) == null || _a2.removeScope();
- }
- get open() {
- let { lifecycle, step } = this.props;
- return hideBeacon(step) || lifecycle === LIFECYCLE.TOOLTIP;
- }
- render() {
- let { continuous, debug, index, nonce, shouldScroll: shouldScroll2, size, step } = this.props, target = getElement(step.target);
- return !validateStep(step) || !src_default.domElement(target) ? null : createElement("div", { key: `JoyrideStep-${index}`, className: "react-joyride__step" }, createElement(
- ReactFloater,
- {
- ...step.floaterProps,
- component: this.renderTooltip,
- debug,
- getPopper: this.setPopper,
- id: `react-joyride-step-${index}`,
- open: this.open,
- placement: step.placement,
- target: step.target
- },
- createElement(
- JoyrideBeacon,
- {
- beaconComponent: step.beaconComponent,
- continuous,
- index,
- isLastStep: index + 1 === size,
- locale: step.locale,
- nonce,
- onClickOrHover: this.handleClickHoverBeacon,
- shouldFocus: shouldScroll2,
- size,
- step,
- styles: step.styles
- }
- )
- ));
- }
- }, Joyride = class extends Component {
- constructor(props) {
- super(props), __publicField(this, "helpers"), __publicField(this, "store"), __publicField(this, "callback", (data) => {
- let { callback } = this.props;
- src_default.function(callback) && callback(data);
- }), __publicField(this, "handleKeyboard", (event) => {
- let { index, lifecycle } = this.state, { steps } = this.props, step = steps[index];
- lifecycle === LIFECYCLE.TOOLTIP && event.code === "Escape" && step && !step.disableCloseOnEsc && this.store.close("keyboard");
- }), __publicField(this, "handleClickOverlay", () => {
- let { index } = this.state, { steps } = this.props;
- getMergedStep(this.props, steps[index]).disableOverlayClose || this.helpers.close("overlay");
- }), __publicField(this, "syncState", (state) => {
- this.setState(state);
- });
- let { debug, getHelpers, run = !0, stepIndex } = props;
- this.store = createStore({
- ...props,
- controlled: run && src_default.number(stepIndex)
- }), this.helpers = this.store.getHelpers();
- let { addListener } = this.store;
- log2({
- title: "init",
- data: [
- { key: "props", value: this.props },
- { key: "state", value: this.state }
- ],
- debug
- }), addListener(this.syncState), getHelpers && getHelpers(this.helpers), this.state = this.store.getState();
- }
- componentDidMount() {
- if (!canUseDOM2())
- return;
- let { debug, disableCloseOnEsc, run, steps } = this.props, { start } = this.store;
- validateSteps(steps, debug) && run && start(), disableCloseOnEsc || document.body.addEventListener("keydown", this.handleKeyboard, { passive: !0 });
- }
- componentDidUpdate(previousProps, previousState) {
- if (!canUseDOM2())
- return;
- let { action, controlled, index, status } = this.state, { debug, run, stepIndex, steps } = this.props, { stepIndex: previousStepIndex, steps: previousSteps } = previousProps, { reset, setSteps, start, stop, update: update2 } = this.store, { changed: changedProps } = treeChanges(previousProps, this.props), { changed, changedFrom } = treeChanges(previousState, this.state), step = getMergedStep(this.props, steps[index]), stepsChanged = !equal(previousSteps, steps), stepIndexChanged = src_default.number(stepIndex) && changedProps("stepIndex"), target = getElement(step.target);
- if (stepsChanged && (validateSteps(steps, debug) ? setSteps(steps) : console.warn("Steps are not valid", steps)), changedProps("run") && (run ? start(stepIndex) : stop()), stepIndexChanged) {
- let nextAction = src_default.number(previousStepIndex) && previousStepIndex < stepIndex ? ACTIONS.NEXT : ACTIONS.PREV;
- action === ACTIONS.STOP && (nextAction = ACTIONS.START), [STATUS3.FINISHED, STATUS3.SKIPPED].includes(status) || update2({
- action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : nextAction,
- index: stepIndex,
- lifecycle: LIFECYCLE.INIT
- });
- }
- !controlled && status === STATUS3.RUNNING && index === 0 && !target && (this.store.update({ index: index + 1 }), this.callback({
- ...this.state,
- type: EVENTS.TARGET_NOT_FOUND,
- step
- }));
- let callbackData = {
- ...this.state,
- index,
- step
- };
- if (changed("action", [
- ACTIONS.NEXT,
- ACTIONS.PREV,
- ACTIONS.SKIP,
- ACTIONS.CLOSE
- ]) && changed("status", STATUS3.PAUSED)) {
- let previousStep = getMergedStep(this.props, steps[previousState.index]);
- this.callback({
- ...callbackData,
- index: previousState.index,
- lifecycle: LIFECYCLE.COMPLETE,
- step: previousStep,
- type: EVENTS.STEP_AFTER
- });
- }
- if (changed("status", [STATUS3.FINISHED, STATUS3.SKIPPED])) {
- let previousStep = getMergedStep(this.props, steps[previousState.index]);
- controlled || this.callback({
- ...callbackData,
- index: previousState.index,
- lifecycle: LIFECYCLE.COMPLETE,
- step: previousStep,
- type: EVENTS.STEP_AFTER
- }), this.callback({
- ...callbackData,
- type: EVENTS.TOUR_END,
- // Return the last step when the tour is finished
- step: previousStep,
- index: previousState.index
- }), reset();
- } else changedFrom("status", [STATUS3.IDLE, STATUS3.READY], STATUS3.RUNNING) ? this.callback({
- ...callbackData,
- type: EVENTS.TOUR_START
- }) : (changed("status") || changed("action", ACTIONS.RESET)) && this.callback({
- ...callbackData,
- type: EVENTS.TOUR_STATUS
- });
- this.scrollToStep(previousState);
- }
- componentWillUnmount() {
- let { disableCloseOnEsc } = this.props;
- disableCloseOnEsc || document.body.removeEventListener("keydown", this.handleKeyboard);
- }
- scrollToStep(previousState) {
- let { index, lifecycle, status } = this.state, {
- debug,
- disableScrollParentFix = !1,
- scrollDuration,
- scrollOffset = 20,
- scrollToFirstStep = !1,
- steps
- } = this.props, step = getMergedStep(this.props, steps[index]), target = getElement(step.target), shouldScrollToStep = shouldScroll({
- isFirstStep: index === 0,
- lifecycle,
- previousLifecycle: previousState.lifecycle,
- scrollToFirstStep,
- step,
- target
- });
- if (status === STATUS3.RUNNING && shouldScrollToStep) {
- let hasCustomScroll = hasCustomScrollParent(target, disableScrollParentFix), scrollParent2 = getScrollParent2(target, disableScrollParentFix), scrollY = Math.floor(getScrollTo(target, scrollOffset, disableScrollParentFix)) || 0;
- log2({
- title: "scrollToStep",
- data: [
- { key: "index", value: index },
- { key: "lifecycle", value: lifecycle },
- { key: "status", value: status }
- ],
- debug
- });
- let beaconPopper = this.store.getPopper("beacon"), tooltipPopper = this.store.getPopper("tooltip");
- if (lifecycle === LIFECYCLE.BEACON && beaconPopper) {
- let { offsets, placement } = beaconPopper;
- !["bottom"].includes(placement) && !hasCustomScroll && (scrollY = Math.floor(offsets.popper.top - scrollOffset));
- } else if (lifecycle === LIFECYCLE.TOOLTIP && tooltipPopper) {
- let { flipped, offsets, placement } = tooltipPopper;
- ["top", "right", "left"].includes(placement) && !flipped && !hasCustomScroll ? scrollY = Math.floor(offsets.popper.top - scrollOffset) : scrollY -= step.spotlightPadding;
- }
- scrollY = scrollY >= 0 ? scrollY : 0, status === STATUS3.RUNNING && scrollTo(scrollY, { element: scrollParent2, duration: scrollDuration }).then(
- () => {
- setTimeout(() => {
- var _a2;
- (_a2 = this.store.getPopper("tooltip")) == null || _a2.instance.update();
- }, 10);
- }
- );
- }
- }
- render() {
- if (!canUseDOM2())
- return null;
- let { index, lifecycle, status } = this.state, {
- continuous = !1,
- debug = !1,
- nonce,
- scrollToFirstStep = !1,
- steps
- } = this.props, isRunning = status === STATUS3.RUNNING, content = {};
- if (isRunning && steps[index]) {
- let step = getMergedStep(this.props, steps[index]);
- content.step = createElement(
- JoyrideStep,
- {
- ...this.state,
- callback: this.callback,
- continuous,
- debug,
- helpers: this.helpers,
- nonce,
- shouldScroll: !step.disableScrolling && (index !== 0 || scrollToFirstStep),
- step,
- store: this.store
- }
- ), content.overlay = createElement(JoyridePortal, { id: "react-joyride-portal" }, createElement(
- JoyrideOverlay,
- {
- ...step,
- continuous,
- debug,
- lifecycle,
- onClickOverlay: this.handleClickOverlay
- }
- ));
- }
- return createElement("div", { className: "react-joyride" }, content.step, content.overlay);
- }
- };
- __publicField(Joyride, "defaultProps", defaultProps);
- var components_default2 = Joyride;
-
- // src/manager/components/TourGuide/HighlightElement.tsx
- init_react();
- var HIGHLIGHT_KEYFRAMES_ID = "storybook-highlight-element-keyframes", keyframes2 = `
- @keyframes sb-highlight-pulsate {
- 0% {
- box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);
- }
- 50% {
- box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);
- }
- 100% {
- box-shadow: rgba(2,156,253,1) 0 0 2px 1px, 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);
- }
- }
- `, createOverlay = (element) => {
- let overlay = document.createElement("div");
- return overlay.id = "storybook-highlight-element", overlay.style.position = "fixed", overlay.style.pointerEvents = "none", overlay.style.zIndex = "2147483647", overlay.style.transition = "opacity 0.2s ease-in-out", requestAnimationFrame(() => {
- updateOverlayStyles(element, overlay), element.scrollIntoView({ behavior: "smooth", block: "center" });
- }), overlay;
- }, updateOverlayStyles = (element, overlay) => {
- let rect = element.getBoundingClientRect(), computedStyle = window.getComputedStyle(element);
- overlay.style.top = `${rect.top}px`, overlay.style.left = `${rect.left}px`, overlay.style.width = `${rect.width}px`, overlay.style.height = `${rect.height}px`, overlay.style.borderRadius = computedStyle.borderRadius;
- }, findScrollableAncestors = (element) => {
- let scrollableAncestors = [window], parent = element.parentElement;
- for (; parent; ) {
- let style = window.getComputedStyle(parent);
- (style.overflow === "auto" || style.overflow === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll") && scrollableAncestors.push(parent), parent = parent.parentElement;
- }
- return scrollableAncestors;
- };
- function HighlightElement({
- targetSelector,
- pulsating = !1
- }) {
- return useEffect(() => {
- let element = document.querySelector(targetSelector);
- if (!element || !element.parentElement)
- return;
- let overlay = document.body.appendChild(createOverlay(element));
- if (pulsating) {
- if (!document.getElementById(HIGHLIGHT_KEYFRAMES_ID)) {
- let style = document.createElement("style");
- style.id = HIGHLIGHT_KEYFRAMES_ID, style.innerHTML = keyframes2, document.head.appendChild(style);
- }
- overlay.style.animation = "sb-highlight-pulsate 3s infinite", overlay.style.transformOrigin = "center", overlay.style.animationTimingFunction = "ease-in-out";
- } else
- overlay.style.boxShadow = "rgba(2,156,253,1) 0 0 2px 1px";
- let scrollTimeout = null, handleScroll = () => {
- overlay.parentElement && overlay.remove(), scrollTimeout !== null && clearTimeout(scrollTimeout), scrollTimeout = window.setTimeout(() => {
- element && (updateOverlayStyles(element, overlay), overlay.style.opacity = "0", document.body.appendChild(overlay), requestAnimationFrame(() => overlay.style.opacity = "1"));
- }, 150);
- }, resizeObserver = new ResizeObserver(
- () => overlay.parentElement && updateOverlayStyles(element, overlay)
- );
- resizeObserver.observe(window.document.body), resizeObserver.observe(element);
- let scrollContainers = findScrollableAncestors(element);
- return scrollContainers.forEach(
- (el) => el.addEventListener("scroll", handleScroll, { passive: !0 })
- ), scrollContainers.filter((el) => el !== window).forEach((el) => resizeObserver.observe(el)), () => {
- scrollTimeout !== null && clearTimeout(scrollTimeout), overlay.parentElement && overlay.remove(), scrollContainers.forEach((el) => el.removeEventListener("scroll", handleScroll)), resizeObserver.disconnect();
- };
- }, [targetSelector, pulsating]), null;
- }
-
- // src/manager/components/TourGuide/TourTooltip.tsx
- init_react();
- var ONBOARDING_ARROW_STYLE_ID = "storybook-onboarding-arrow-style", TooltipBody = styled.div`
- padding: 15px;
- border-radius: 5px;
- `, Wrapper4 = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- `, TooltipHeader = styled.div`
- display: flex;
- align-items: center;
- align-self: stretch;
- justify-content: space-between;
- margin: -5px -5px 5px 0;
- `, TooltipTitle = styled.div`
- line-height: 18px;
- font-weight: 700;
- font-size: 14px;
- margin: 5px 5px 5px 0;
- `, TooltipContent = styled.p`
- font-size: 14px;
- line-height: 18px;
- text-align: start;
- text-wrap: balance;
- margin: 0;
- margin-top: 5px;
- `, TooltipFooter = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 15px;
- `, Count = styled.span`
- font-size: 13px;
- `, NextButton = styled(Button)(({ theme }) => ({
- background: theme.color.lightest,
- border: "none",
- boxShadow: "none",
- color: theme.base === "light" ? theme.color.secondary : curriedDarken$1(0.18, theme.color.secondary),
- "&:hover, &:focus": {
- background: curriedTransparentize$1(0.1, theme.color.lightest),
- color: theme.base === "light" ? curriedLighten$1(0.1, theme.color.secondary) : curriedDarken$1(0.3, theme.color.secondary)
- }
- })), TourTooltip = ({
- index,
- size,
- step,
- closeProps,
- primaryProps,
- tooltipProps
- }) => (useEffect(() => {
- let style = document.createElement("style");
- return style.id = ONBOARDING_ARROW_STYLE_ID, style.innerHTML = `
- .__floater__arrow { container-type: size; }
- .__floater__arrow span { background: ${color.secondary}; }
- .__floater__arrow span::before, .__floater__arrow span::after {
- content: '';
- display: block;
- width: 2px;
- height: 2px;
- background: ${color.secondary};
- box-shadow: 0 0 0 2px ${color.secondary};
- border-radius: 3px;
- flex: 0 0 2px;
- }
- @container (min-height: 1px) {
- .__floater__arrow span { flex-direction: column; }
- }
- `, document.head.appendChild(style), () => document.getElementById(ONBOARDING_ARROW_STYLE_ID)?.remove();
- }, []), react_default.createElement(TooltipBody, { ...tooltipProps, style: step.styles?.tooltip }, react_default.createElement(Wrapper4, null, react_default.createElement(TooltipHeader, null, step.title && react_default.createElement(TooltipTitle, null, step.title), react_default.createElement(
- Button,
- {
- ...closeProps,
- onClick: closeProps.onClick,
- variant: "solid",
- padding: "small",
- ariaLabel: "Close"
- },
- react_default.createElement(CloseAltIcon, null)
- )), react_default.createElement(TooltipContent, null, step.content)), react_default.createElement(TooltipFooter, { id: "buttonNext" }, react_default.createElement(Count, null, index + 1, " of ", size), !step.hideNextButton && react_default.createElement(NextButton, { ...primaryProps }, index + 1 === size ? "Done" : "Next"))));
-
- // src/manager/components/TourGuide/TourGuide.tsx
- var TourGuide = ({
- step,
- steps,
- onNext,
- onComplete,
- onDismiss
- }) => {
- let [stepIndex, setStepIndex] = useState(step ? null : 0), theme = useTheme(), timeoutRef = useRef(void 0), updateStepIndex = useCallback((index) => {
- clearTimeout(timeoutRef.current), setStepIndex((current) => index === -1 ? null : current === null || current === index ? index : (timeoutRef.current = setTimeout(setStepIndex, 300, index), null));
- }, []);
- useEffect(
- () => step ? updateStepIndex(steps.findIndex(({ key }) => key === step)) : void 0,
- [step, steps, updateStepIndex]
- );
- let mappedSteps = useMemo(() => steps.map((step2, index) => {
- let next = () => updateStepIndex(index + 1);
- return {
- disableBeacon: !0,
- disableOverlay: !0,
- spotlightClicks: !0,
- offset: 0,
- ...step2,
- content: react_default.createElement(react_default.Fragment, null, step2.content, step2.highlight && react_default.createElement(HighlightElement, { targetSelector: step2.highlight, pulsating: !0 })),
- onNext: step2.onNext ? () => step2.onNext?.({ next }) : onNext && (() => onNext?.({ next }))
- };
- }), [steps, onNext, updateStepIndex]), callback = useCallback(
- (data) => {
- data.action === ACTIONS.NEXT && data.lifecycle === "complete" && (data.index === data.size - 1 ? onComplete?.() : data.step?.onNext ? data.step.onNext() : updateStepIndex(data.index + 1)), data.action === ACTIONS.CLOSE && onDismiss?.();
- },
- [onComplete, onDismiss, updateStepIndex]
- );
- return stepIndex === null ? null : react_default.createElement(
- components_default2,
- {
- continuous: !0,
- steps: mappedSteps,
- stepIndex,
- spotlightPadding: 0,
- disableCloseOnEsc: !0,
- disableOverlayClose: !0,
- disableScrolling: !0,
- callback,
- tooltipComponent: TourTooltip,
- floaterProps: {
- disableAnimation: !0,
- styles: {
- arrow: {
- length: 20,
- spread: 2
- },
- floater: {
- filter: theme.base === "light" ? "drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))" : "drop-shadow(#fff5 0px 0px 0.5px) drop-shadow(#fff5 0px 0px 0.5px)"
- }
- }
- },
- styles: {
- overlay: {
- mixBlendMode: "unset",
- backgroundColor: steps[stepIndex]?.target === "body" ? "rgba(27, 28, 29, 0.2)" : "none"
- },
- spotlight: {
- backgroundColor: "none",
- border: `solid 2px ${theme.base === "light" ? theme.color.secondary : curriedDarken$1(0.18, theme.color.secondary)}`,
- boxShadow: "0px 0px 0px 9999px rgba(27, 28, 29, 0.2)"
- },
- tooltip: {
- width: 280,
- color: theme.color.lightest,
- background: theme.base === "light" ? theme.color.secondary : curriedDarken$1(0.18, theme.color.secondary)
- },
- options: {
- zIndex: 9998,
- primaryColor: theme.base === "light" ? theme.color.secondary : curriedDarken$1(0.18, theme.color.secondary),
- arrowColor: theme.base === "light" ? theme.color.secondary : curriedDarken$1(0.18, theme.color.secondary)
- }
- }
- }
- );
- }, root = null;
- TourGuide.render = (props) => {
- let container = document.getElementById("storybook-tour");
- container || (container = document.createElement("div"), container.id = "storybook-tour", document.body.appendChild(container)), root = root ?? createRoot(container), root.render(
- props ? react_default.createElement(ThemeProvider, { theme: convert(themes.light) }, react_default.createElement(
- TourGuide,
- {
- ...props,
- onComplete: () => {
- props.onComplete?.(), root?.render(null), root = null;
- },
- onDismiss: () => {
- props.onDismiss?.(), root?.render(null), root = null;
- }
- }
- )) : null
- );
- };
-
- // src/manager/hooks/useLocation.ts
- init_react();
- var LocationMonitor = {
- _currentHref: globalThis.window?.location.href ?? "",
- _intervalId: null,
- _listeners: /* @__PURE__ */ new Set(),
- start() {
- this._intervalId === null && (this._intervalId = setInterval(() => {
- let newLocation = globalThis.window.location;
- newLocation.href !== this._currentHref && (this._currentHref = newLocation.href, this._listeners.forEach((listener) => listener(newLocation)));
- }, 100));
- },
- stop() {
- this._intervalId !== null && (clearInterval(this._intervalId), this._intervalId = null);
- },
- subscribe(...listeners) {
- return listeners.forEach((listener) => this._listeners.add(listener)), this.start(), () => {
- listeners.forEach((listener) => this._listeners.delete(listener)), this._listeners.size === 0 && this.stop();
- };
- }
- }, useLocationHash = () => {
- let [hash, setHash] = useState(globalThis.window?.location.hash ?? "");
- return useEffect(() => LocationMonitor.subscribe((location2) => setHash(location2.hash)), []), hash.slice(1);
- };
-
- // src/shared/utils/ai-prompts.ts
- function getAiSetupPrompt(executor = "npx storybook") {
- return `Run \`${executor} ai setup\` and follow its instructions precisely.`;
- }
-
- // src/shared/checklist-store/checklistData.tsx
- var CodeWrapper = styled.div(({ theme }) => ({
- alignSelf: "stretch",
- background: theme.background.content,
- borderRadius: theme.appBorderRadius,
- margin: "5px 0",
- padding: 10,
- fontSize: theme.typography.size.s1,
- ".linenumber": {
- opacity: 0.5
- }
- })), CodeSnippet = (props) => react_default.createElement(ThemeProvider, { theme: convert(themes.dark) }, react_default.createElement(CodeWrapper, null, react_default.createElement(SyntaxHighlighter, { ...props }))), isExample = (id) => id.startsWith("example-") || id.startsWith("configure-your-project--"), subscribeToIndex = (condition) => ({ api, done }) => {
- let check = () => condition(
- Object.entries(api.getIndex()?.entries || {}).reduce(
- (acc, [id, entry]) => isExample(entry.id) ? acc : Object.assign(acc, { [id]: entry }),
- {}
- )
- );
- if (check())
- done();
- else
- return api.once(PREVIEW_INITIALIZED, () => check() && done()), api.on(STORY_INDEX_INVALIDATED, () => check() && done());
- }, checklistData = {
- sections: [
- {
- id: "basics",
- title: "Storybook basics",
- items: [
- {
- id: "aiSetup",
- label: "Set up with AI",
- icon: WandIcon,
- available: ({ storeState }) => !!storeState.aiOptIn && storeState.items.aiSetup?.status !== "done",
- criteria: "ai setup command has not been run yet",
- showOnGuidePage: !1,
- action: {
- label: "Copy prompt",
- copyContent: getAiSetupPrompt(),
- onClick: ({ api }) => {
- api.emit(AI_PROMPT_NUDGE, { id: "setup", origin: "onboarding-checklist-side" });
- }
- }
- },
- {
- id: "guidedTour",
- label: "Take the guided tour",
- available: ({ index }) => !!index && "example-button--primary" in index && !!globalThis?.FEATURES?.controls && addons.experimental_getRegisteredAddons().includes(ADDON_ID3),
- criteria: "Guided tour is completed",
- subscribe: ({ api, accept }) => api.on(ADDON_ONBOARDING_CHANNEL, ({ step, type }) => {
- type !== "dismiss" && ["6:IntentSurvey", "7:FinishedOnboarding"].includes(step) && accept();
- }),
- action: {
- label: "Start",
- onClick: ({ api }) => {
- api.toggleNav(!0);
- let path = api.getUrlState().path || "";
- path.startsWith("/story/") ? document.location.href = `/?path=${path}&onboarding=true` : document.location.href = "/?onboarding=true";
- }
- }
- },
- {
- id: "onboardingSurvey",
- label: "Complete the onboarding survey",
- available: () => addons.experimental_getRegisteredAddons().includes(ADDON_ID3),
- afterCompletion: "immutable",
- criteria: "Onboarding survey is completed",
- subscribe: ({ api, accept }) => api.on(ADDON_ONBOARDING_CHANNEL, ({ type }) => type === "survey" && accept()),
- action: {
- label: "Open",
- onClick: ({ api }) => {
- let path = api.getUrlState().path || "";
- document.location.href = `/?path=${path}&onboarding=survey`;
- }
- }
- },
- {
- id: "renderComponent",
- label: "Render your first component",
- criteria: "A story finished rendering successfully",
- subscribe: ({ api, done }) => api.on(
- STORY_FINISHED,
- ({ storyId, status }) => status === "success" && !isExample(storyId) && done()
- ),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook renders your components in isolation, using stories. That allows you to work on the bit of UI you need, without worrying about the rest of the app."), react_default.createElement("p", null, "Rendering your components can often require", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-stories/decorators",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "setting up surrounding context in decorators"
- ), " ", "or", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "configure/styling-and-css",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "applying global styles"
- ), ". Once you've got it working for one component, you're ready to make Storybook the home for all of your UI."), react_default.createElement("p", null, "Stories are written in CSF, a format specifically designed to help with UI development. Here's an example:"), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
- // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
- import type { Meta, StoryObj } from '@storybook/your-framework';
-
- import { Button } from './Button';
-
- const meta = {
- // \u{1F447} The component you're working on
- component: Button,
- } satisfies Meta<typeof Button>;
-
- export default meta;
- // \u{1F447} Type helper to reduce boilerplate
- type Story = StoryObj<typeof meta>;
-
- // \u{1F447} A story named Primary that renders \`<Button primary label="Button" />\`
- export const Primary: Story = {
- args: {
- primary: true,
- label: 'Button',
- },
- };`), react_default.createElement("p", null, react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-stories",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "Learn more about stories"
- )))
- },
- {
- id: "moreComponents",
- label: "Add 5 components",
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook gets better as you add more components. Start with the easy ones, like Button or Avatar, and work your way up to more complex components, like Select, Autocomplete, or even full pages."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "onboarding/sidebar-components.png",
- ref: "guide"
- }),
- alt: "Components in the sidebar"
- }
- ), react_default.createElement("p", null, react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "get-started/whats-a-story#create-a-new-story",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "Learn how to add components without writing any code"
- ))),
- criteria: "At least 5 components exist in the index",
- subscribe: subscribeToIndex((entries) => {
- let stories = Object.values(entries).filter(
- (entry) => entry.type === "story"
- );
- return new Set(stories.map(({ title: title2 }) => title2)).size >= 5;
- })
- },
- {
- id: "moreStories",
- label: "Add 20 stories",
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "More stories for your components means better documentation and more test coverage."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "onboarding/sidebar-many-stories.png",
- ref: "guide"
- }),
- alt: "Stories in the sidebar"
- }
- ), react_default.createElement("p", null, react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "essentials/controls#creating-and-editing-stories-from-controls",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "Learn how to use Controls to add stories without writing any code"
- ))),
- criteria: "At least 20 stories exist in the index",
- subscribe: subscribeToIndex((entries) => Object.values(entries).filter(
- (entry) => entry.type === "story"
- ).length >= 20)
- },
- {
- id: "whatsNewStorybook10",
- label: "See what's new",
- criteria: "What's New page is opened",
- action: {
- label: "Go",
- onClick: ({ api }) => api.navigate("/settings/whats-new")
- },
- subscribe: ({ accept }) => LocationMonitor.subscribe((l3) => l3.search.endsWith("/settings/whats-new") && accept())
- }
- ]
- },
- {
- id: "development",
- title: "Development",
- items: [
- {
- id: "controls",
- label: "Change a story with Controls",
- available: () => !!globalThis?.FEATURES?.controls,
- criteria: "Story args are updated",
- subscribe: ({ api, done }) => api.on(STORY_ARGS_UPDATED, done),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "When you change the value of one of the inputs in the Controls table, the story automatically updates to reflect that change. It's a great way to explore how a component handles various inputs."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "api/doc-block-controls.png",
- ref: "guide"
- }),
- alt: "Screenshot of Controls block"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "essentials/controls",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "Controls documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "How to use the Controls panel to edit or save a new story"), react_default.createElement("li", null, "How to configure the table")))
- },
- {
- id: "viewports",
- label: "Check responsiveness with Viewports",
- available: () => !!globalThis?.FEATURES?.viewport,
- criteria: "Viewport global is updated",
- subscribe: ({ api, done }) => api.on(UPDATE_GLOBALS, ({ globals }) => globals?.viewport && done()),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Many UI components need to be responsive to the viewport size. Storybook has built-in support for previewing stories in various device sizes."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "onboarding/viewports-menu.png",
- ref: "guide"
- }),
- alt: "Screenshot of Viewports menu"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "essentials/viewport",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "Viewports documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "How to configure which viewports are available"), react_default.createElement("li", null, "How to force a story to ", react_default.createElement("em", null, "always"), " render in a specific viewport")))
- },
- {
- id: "organizeStories",
- label: "Group your components",
- criteria: "A root node exists in the index",
- subscribe: subscribeToIndex(
- (entries) => Object.values(entries).some(({ title: title2 }) => title2.includes("/"))
- ),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "It's helpful for projects to organize their sidebar into groups. We're big fans of Atomic Design (atoms, molecules, organisms, pages), but we've also seen organization by domain (profile, billing, dashboard, etc). Being organized helps everyone use your Storybook more effectively."), react_default.createElement("p", null, "You can create a section like so:"), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.js
-
- export default {
- component: Button,
- - title: 'Button', // You may not have this
- + title: 'Atoms/Button',
- }`), react_default.createElement("p", null, "Which would look like:"), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "onboarding/sidebar-with-groups.png",
- ref: "guide"
- }),
- alt: "Grouped components in the sidebar"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-stories/naming-components-and-hierarchy",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "story organization documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "The full hierarchy available"), react_default.createElement("li", null, "How to configure the sorting of your stories")))
- }
- ]
- },
- {
- id: "share",
- title: "Share",
- items: [
- {
- id: "shareStorybook",
- label: "Share your Storybook for feedback",
- available: () => addons.experimental_getRegisteredAddons(Addon_TypesEnum.TOOLEXTRA).includes("chromaui/addon-visual-tests/share-tool"),
- criteria: "User has shared their Storybook",
- subscribe: ({ api, done }) => {
- let SHARE_PROGRESS_KEY = "chromaui/addon-visual-tests/shareProgress";
- return api.on("experimental_useSharedState_setValue", (key, value) => {
- key === SHARE_PROGRESS_KEY && value?.status === "complete" && done();
- });
- },
- action: {
- label: "Share",
- onClick: () => document.getElementById("chromatic-share-button")?.click()
- },
- content: () => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Share your Storybook with your team in one click using Chromatic. Click the", " ", react_default.createElement("strong", null, "Share"), " button in the toolbar to publish and get a shareable link."), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(Link, { href: "https://www.chromatic.com/docs/sharing", target: "_blank", withArrow: !0 }, "sharing documentation")))
- },
- {
- id: "publishStorybook",
- label: "Publish your Storybook for feedback",
- available: () => !addons.experimental_getRegisteredAddons(Addon_TypesEnum.TOOLEXTRA).includes("chromaui/addon-visual-tests/share-tool"),
- criteria: "User has published their Storybook",
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Publishing your Storybook is easy and unlocks super clear review cycles and other collaborative workflows."), react_default.createElement("p", null, "Run ", react_default.createElement("code", null, "npx storybook build"), " in CI and deploy it using services like", " ", react_default.createElement(Link, { href: "https://chromatic.com", target: "_blank" }, "Chromatic"), ",", " ", react_default.createElement(Link, { href: "https://vercel.com", target: "_blank", rel: "noopener noreferrer" }, "Vercel"), ", or", " ", react_default.createElement(Link, { href: "https://www.netlify.com", target: "_blank", rel: "noopener noreferrer" }, "Netlify"), "."), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "sharing/publish-storybook",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "publishing documentation"
- )))
- }
- ]
- },
- {
- id: "testing",
- title: "Testing",
- items: [
- {
- id: "installVitest",
- label: "Install Vitest addon",
- afterCompletion: "unavailable",
- available: () => !!globalThis.STORYBOOK_FRAMEWORK && SUPPORTED_FRAMEWORKS.includes(globalThis.STORYBOOK_FRAMEWORK),
- criteria: "@storybook/addon-vitest registered in .storybook/main.js|ts",
- subscribe: ({ done }) => {
- addons.experimental_getRegisteredAddons().includes(ADDON_ID5) && done();
- },
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Run this command to install the Vitest addon, enabling you to run component tests on your stories inside Storybook\u2019s UI:"), react_default.createElement(CodeSnippet, { language: "bash" }, "npx storybook add @storybook/addon-vitest"), react_default.createElement("p", null, react_default.createElement("em", null, "Restart your Storybook after installing the addon.")), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/testing-ui-overview.png",
- ref: "guide"
- }),
- alt: "Storybook app with story status indicators, testing widget, and addon panel annotated"
- }
- ), react_default.createElement("p", null, react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/integrations/vitest-addon",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "Learn more about the Vitest addon"
- )))
- },
- {
- id: "runTests",
- after: ["installVitest"],
- label: "Test your components",
- criteria: "Component tests are run from the test widget in the sidebar",
- subscribe: ({ done }) => internal_universalTestProviderStore.onStateChange((state) => {
- state["storybook/test"] === "test-provider-state:running" && (TourGuide.render(null), done());
- }),
- action: {
- label: "Start",
- onClick: ({ api }) => {
- api.toggleNav(!0), TourGuide.render({
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore Circular reference in Step type
- steps: [
- {
- title: "Testing widget",
- content: "Run tests right from your Storybook sidebar using the testing widget.",
- placement: "right-end",
- target: "#storybook-testing-module",
- highlight: "#storybook-testing-module",
- onNext: ({ next }) => {
- let toggle = document.getElementById("testing-module-collapse-toggle");
- toggle?.getAttribute("aria-label") === "Expand testing module" ? (toggle.click(), setTimeout(next, 300)) : next();
- }
- },
- {
- title: "Start a test run",
- content: "Start a test run at the click of a button using Vitest.",
- placement: "right",
- target: '[data-module-id="storybook/test/test-provider"] button[aria-label="Start test run"]',
- highlight: '[data-module-id="storybook/test/test-provider"] button[aria-label="Start test run"]',
- hideNextButton: !0
- }
- ]
- });
- }
- },
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Stories make great test cases. You can quickly test all of your stories directly from the test widget, at the bottom of the sidebar."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "onboarding/test-widget-with-failures.png",
- ref: "guide"
- }),
- alt: "Test widget showing test failures"
- }
- ), react_default.createElement("p", null, "Use the menu on a story or component to see details about a test failure or run tests for just that selection."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/context-menu.png",
- ref: "guide"
- }),
- alt: "Screenshot of story sidebar item with open menu"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests#component-tests",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "component testing documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "About helpful features, like watch mode and sidebar filtering"), react_default.createElement("li", null, "How to run tests via CLI and in CI"), react_default.createElement("li", null, "About other capabilities, like accessibility checks and code coverage reporting")))
- },
- {
- id: "writeInteractions",
- label: "Test functionality with interactions",
- available: () => !!globalThis?.FEATURES?.interactions,
- criteria: "At least one story with a play or test function",
- subscribe: subscribeToIndex(
- (entries) => Object.values(entries).some(
- (entry) => entry.tags?.includes(Tag.PLAY_FN) || entry.tags?.includes(Tag.TEST_FN)
- )
- ),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "When you need to test non-visual or particularly complex behavior of a component, add a play function."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
- // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
- import type { Meta, StoryObj } from '@storybook/your-framework';
- import { expect, fn } from 'storybook/test';
-
- import { Button } from './Button';
-
- const meta = {
- component: Button,
- args: {
- // \u{1F447} Provide a mock function to spy on
- onClick: fn(),
- },
- } satisfies Meta<typeof Button>;
-
- export default meta;
- type Story = StoryObj<typeof meta>;
-
- export const Disabled: Story = {
- args: {
- disabled: true,
- label: 'Button',
- },
- play: async function({ args, canvas, userEvent }) {
- const button = canvas.getByRole('button', { name: /button/i });
-
- // \u{1F447} Simulate behavior
- await userEvent.click(button);
-
- // \u{1F447} Make assertions
- await expect(button).toHaveAttribute('aria-disabled', 'true');
- await expect(args.onClick).not.toHaveBeenCalled();
- }
- };`), react_default.createElement("p", null, "You can interact with and debug each step defined in a play function within the Interactions panel."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/interaction-test-pass.png",
- ref: "guide"
- }),
- alt: "Storybook with a LoginForm component and passing interactions in the Interactions panel"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/interaction-testing",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "interaction testing documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "The full ", react_default.createElement("code", null, "play"), " function API"), react_default.createElement("li", null, "How to run code before and after tests"), react_default.createElement("li", null, "How to group interactions into steps")))
- },
- {
- id: "installA11y",
- label: "Install Accessibility addon",
- afterCompletion: "unavailable",
- criteria: "@storybook/addon-a11y registered in .storybook/main.js|ts",
- subscribe: ({ done }) => {
- addons.experimental_getRegisteredAddons().includes(ADDON_ID2) && done();
- },
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Accessibility tests help ensure your UI is usable by everyone, no matter their ability."), react_default.createElement("p", null, "If you are not yet using the accessibility addon, run this command to install and set it up, enabling you to run accessibility checks alongside your component tests:"), react_default.createElement(CodeSnippet, { language: "bash" }, "npx storybook add @storybook/addon-a11y"), react_default.createElement("p", null, react_default.createElement("em", null, "Restart your Storybook after installing the addon.")), react_default.createElement("p", null, react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/accessibility-testing",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "Learn more about the Accessibility addon"
- )))
- },
- {
- id: "accessibilityTests",
- after: ["installA11y"],
- label: "Run accessibility tests",
- criteria: "Accessibility tests are run from the test widget in the sidebar",
- subscribe: ({ api, done }) => api.on(
- STORYBOOK_ADDON_TEST_CHANNEL,
- ({ type, payload }) => type === "test-run-completed" && payload.config.a11y && done()
- ),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Expand the test widget, check the Accessibility checkbox, and click the Run component tests button."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/test-widget-a11y-enabled.png",
- ref: "guide"
- }),
- alt: "Testing widget with accessibility activated"
- }
- ), react_default.createElement("p", null, "If there are any failures, you can use the Accessibility panel to debug any violations."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/addon-a11y-debug-violations.png",
- ref: "guide"
- }),
- alt: "Storybook app with accessibility panel open, showing violations and an interactive popover on the violating elements in the preview"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/accessibility-testing",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "accessibility testing documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "The recommended workflow"), react_default.createElement("li", null, "How to run accessibility tests via CLI and in CI"), react_default.createElement("li", null, "How to configure accessibility checks")))
- },
- {
- id: "installChromatic",
- label: "Install Visual Tests addon",
- afterCompletion: "unavailable",
- available: () => !0,
- // TODO check for compatibility with the project (not React Native)
- criteria: "@chromatic-com/storybook registered in .storybook/main.js|ts",
- subscribe: ({ done }) => {
- addons.experimental_getRegisteredAddons().includes("chromaui/addon-visual-tests") && done();
- },
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Visual tests verify the appearance of your UI components."), react_default.createElement("p", null, "If you are not yet using the visual tests addon, run this command to install and set it up, enabling you to run visual tests on your stories (this requires a free Chromatic account):"), react_default.createElement(CodeSnippet, { language: "bash" }, "npx storybook add @chromatic-com/storybook"), react_default.createElement("p", null, react_default.createElement("em", null, "Restart your Storybook after installing the addon.")), react_default.createElement("p", null, react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/visual-testing",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "Learn more about the Visual Tests addon"
- )))
- },
- {
- id: "visualTests",
- after: ["installChromatic"],
- label: "Run visual tests",
- criteria: "Visual tests are run from the test widget in the sidebar or the Visual Tests panel",
- subscribe: ({ api, done }) => api.on("chromaui/addon-visual-tests/startBuild", done),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Expand the test widget and click the Run visual tests button."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/test-widget-expanded-with-vta.png",
- ref: "guide"
- }),
- alt: "Expanded testing widget, showing the Visual tests section"
- }
- ), react_default.createElement("p", null, "You can use the Visual tests panel to verify the resulting diffs as either an unexpected change which needs fixed or an expected change which can then be accepted and become the new baseline."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/vta-run-from-panel.png",
- ref: "guide"
- }),
- alt: "Visual tests addon panel showing a diff from the baseline"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/visual-testing",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "visual testing documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "How to automate your visual tests in CI")))
- },
- {
- id: "coverage",
- after: ["installVitest"],
- label: "Generate a coverage report",
- criteria: "Generate a coverage report",
- subscribe: ({ api, done }) => api.on(
- STORYBOOK_ADDON_TEST_CHANNEL,
- ({ type, payload }) => type === "test-run-completed" && payload.config.coverage && done()
- ),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Coverage reports show you which code is\u2014and, more importantly\u2014isn't executed while running your component tests. You use it to be sure you're testing the right things."), react_default.createElement("p", null, "To generate a coverage report, expand the test widget in the sidebar and check the Coverage checkbox. The next time you run component tests, it will generate an interactive report, which you can view by clicking the results summary in the test widget."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/test-widget-coverage-summary.png",
- ref: "guide"
- }),
- alt: "Test widget with coverage summary"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/test-coverage",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "test coverage documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "How to automate reporting in CI"), react_default.createElement("li", null, "How to configure the coverage results")))
- },
- {
- id: "ciTests",
- label: "Automate tests in CI",
- criteria: "Have a CI workflow that runs component tests, either with Vitest or Chromatic",
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Automating component tests in CI is the best tool ensuring the quality and reliability of your project."), react_default.createElement("p", null, "You can automate all of Storybook's tests by using Chromatic or by running the", react_default.createElement("code", null, "vitest --project storybook"), " command in your CI scripts."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-tests/test-ci-workflow-pr-status-checks.png",
- ref: "guide"
- }),
- alt: 'GitHub pull request status checks, with a failing "UI Tests / test" check'
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-tests/in-ci",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "testing in CI documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "How to test in your CI platform (GitHub Actions, Circle CI, etc.)"), react_default.createElement("li", null, "How to debug test failures in a published Storybook"), react_default.createElement("li", null, "How to run your other Vitest tests alongside your Storybook tests")))
- }
- ]
- },
- {
- id: "document",
- title: "Document",
- items: [
- {
- id: "installDocs",
- label: "Install Docs addon",
- afterCompletion: "unavailable",
- criteria: "@storybook/addon-docs registered in .storybook/main.js|ts",
- subscribe: ({ done }) => {
- addons.experimental_getRegisteredAddons().includes(ADDON_ID6) && done();
- },
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook Docs transforms your Storybook stories into component documentation. Add the Docs addon to your Storybook project to get started:"), react_default.createElement(CodeSnippet, { language: "bash" }, "npx storybook add @storybook/addon-docs"), react_default.createElement("p", null, react_default.createElement("em", null, "Restart your Storybook after installing the addon.")), react_default.createElement("p", null, react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-docs",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank",
- withArrow: !0
- },
- "Learn more about Storybook Docs"
- )))
- },
- {
- id: "autodocs",
- after: ["installDocs"],
- label: "Automatically document your components",
- criteria: "At least one component with the autodocs tag applied",
- subscribe: subscribeToIndex(
- (entries) => Object.values(entries).some((entry) => entry.tags?.includes(Tag.AUTODOCS))
- ),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Add the autodocs tag to a component's meta to automatically generate documentation for that component, complete with examples, source code, an API table, and a description."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.js
-
- const meta = {
- component: Button,
- tags: ['autodocs'], // \u{1F448} Add this tag
- }
-
- export default meta;`), react_default.createElement("p", null, "That tag can also be applied in ", react_default.createElement("code", null, ".storybook/preview.ts"), ", to generate documentation for ", react_default.createElement("em", null, "all"), " components."), react_default.createElement(
- "img",
- {
- src: api.getDocsUrl({
- asset: "writing-docs/autodocs.png",
- ref: "guide"
- }),
- alt: "Storybook autodocs page, showing a title, description, primary story, controls table, and additional stories"
- }
- ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-docs/autodocs",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "autodocs documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "How to generate a table of contents"), react_default.createElement("li", null, "How to enhance your component documentation with JSDoc comments"), react_default.createElement("li", null, "How to customize the generated page")))
- },
- {
- id: "mdxDocs",
- after: ["installDocs"],
- label: "Custom content with MDX",
- criteria: "At least one MDX page",
- subscribe: subscribeToIndex(
- (entries) => Object.values(entries).some((entry) => entry.type === "docs")
- ),
- content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "You can use MDX (markdown + React components) to provide an introduction to your project, document things like design tokens, or go beyond the automatic documentation for your components."), react_default.createElement("p", null, "For a start, create an ", react_default.createElement("code", null, "introduction.mdx"), " file and (using markdown and Storybook's", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-docs/doc-blocks",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "doc blocks"
- ), ") write a usage guide for your project."), react_default.createElement(CodeSnippet, { language: "jsx" }, `{ /* introduction.mdx */ }
- import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
- <Meta title="Get started" />
-
- <Title>Get started with My Awesome Project</Title>
-
- <Subtitle>It's really awesome</Subtitle>
-
- My Awesome Project is designed to work with Your Awesome Project seamlessly.
- Follow this guide and you'll be ready in no time.
-
- ## Install
-
- \`\`\`sh
- npm install @my/awesome-project
- \`\`\``), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
- Link,
- {
- href: api.getDocsUrl({
- subpath: "writing-docs/mdx",
- renderer: !0,
- ref: "guide"
- }),
- target: "_blank"
- },
- "MDX documentation"
- ), " ", "to learn:"), react_default.createElement("ul", null, react_default.createElement("li", null, "How to reference stories in your content"), react_default.createElement("li", null, "How to import and display markdown files, such as READMEs")))
- }
- ]
- }
- ]
- };
-
- // src/manager/components/sidebar/useChecklist.ts
- var subscriptions = /* @__PURE__ */ new Map(), useStoryIndex = () => {
- let state = useStorybookState(), [index, setIndex] = useState(() => state.index), updateIndex = useMemo(() => throttle(setIndex, 500), []);
- return useEffect(() => updateIndex(state.index), [state.index, updateIndex]), useEffect(() => () => updateIndex.cancel?.(), [updateIndex]), index;
- }, checkAvailable = (item, itemsById, context) => {
- if (item.available && !item.available(context))
- return !1;
- for (let afterId of item.after ?? [])
- if (itemsById[afterId] && !checkAvailable(itemsById[afterId], itemsById, context))
- return !1;
- return !0;
- }, checkSkipped = (item, itemsById, state) => {
- if (state[item.id].status === "skipped")
- return !0;
- for (let afterId of item.after ?? [])
- if (itemsById[afterId] && checkSkipped(itemsById[afterId], itemsById, state))
- return !0;
- return !1;
- }, getAncestorIds = (item, itemsById) => !item.after || item.after.length === 0 ? [] : item.after.flatMap((afterId) => {
- let afterItem = itemsById[afterId];
- return afterItem ? [...getAncestorIds(afterItem, itemsById), afterId] : [];
- }), checkLockedBy = (item, itemsById, state) => getAncestorIds(item, itemsById).find(
- (id) => state[id].status !== "accepted" && state[id].status !== "done"
- ), useChecklist = () => {
- let api = useStorybookApi(), index = useStoryIndex(), [checklistState] = experimental_useUniversalStore(internal_universalChecklistStore), { loaded, items, widget } = checklistState, { status } = internal_universalChecklistStore, [initialized, setInitialized] = useState(!1), [ready, setReady] = useState(!1), debounceReady = useMemo(() => debounce(() => setReady(!0), 500), []), itemsById = useMemo(() => Object.fromEntries(
- checklistData.sections.flatMap(
- ({ items: items2, id: sectionId, title: sectionTitle }, sectionIndex) => items2.map(({ id, ...item }, itemIndex) => [id, { id, itemIndex, sectionId, sectionIndex, sectionTitle, ...item }])
- )
- ), []), allItems = useMemo(() => Object.values(itemsById).map((item) => {
- let { status: status2, mutedAt } = items[item.id], isOpen = status2 === "open", isAccepted = status2 === "accepted", isDone = status2 === "done", isCompleted = isAccepted || isDone, isSkipped = !isCompleted && checkSkipped(item, itemsById, items), isMuted = !!mutedAt || !!widget.disable, isAvailable = isCompleted ? item.afterCompletion !== "unavailable" : checkAvailable(item, itemsById, { api, index, item, storeState: checklistState }), isLockedBy = checkLockedBy(item, itemsById, items), isImmutable = isCompleted && item.afterCompletion === "immutable";
- return {
- ...item,
- isAvailable,
- isOpen,
- isLockedBy,
- isImmutable,
- isReady: isOpen && isAvailable && !isMuted && !isLockedBy,
- isCompleted,
- isAccepted,
- isDone,
- isSkipped,
- isMuted
- };
- }), [itemsById, items, widget, api, index, checklistState]), itemCollections = useMemo(() => {
- let availableItems = allItems.filter((item) => item.isAvailable), openItems = availableItems.filter((item) => item.isOpen), readyItems = openItems.filter((item) => item.isReady), nextItems = Object.values(
- readyItems.reduce((acc, item) => (acc[item.sectionId] ??= [], acc[item.sectionId].push({ ...item, itemIndex: acc[item.sectionId].length }), acc), {})
- ).flat().sort((a2, b2) => a2.itemIndex - b2.itemIndex).slice(0, 3).sort((a2, b2) => a2.sectionIndex - b2.sectionIndex), progress = availableItems.length ? Math.round((availableItems.length - openItems.length) / availableItems.length * 100) : 100;
- return { availableItems, openItems, readyItems, nextItems, progress };
- }, [allItems]);
- return useEffect(() => {
- if (!(!loaded || status !== experimental_UniversalStore.Status.READY))
- for (let item of allItems) {
- if (!item.subscribe)
- continue;
- let subscribed = subscriptions.has(item.id);
- if (item.isOpen && item.isAvailable && !subscribed)
- subscriptions.set(
- item.id,
- item.subscribe({
- api,
- item,
- accept: () => internal_checklistStore.accept(item.id),
- done: () => internal_checklistStore.done(item.id),
- skip: () => internal_checklistStore.skip(item.id)
- })
- );
- else if (subscribed && !(item.isOpen && item.isAvailable)) {
- let unsubscribe = subscriptions.get(item.id);
- subscriptions.delete(item.id), typeof unsubscribe == "function" && unsubscribe();
- }
- }
- }, [api, loaded, status, allItems]), useEffect(() => {
- let initialize = () => setInitialized(!0), timeout = setTimeout(initialize, 1e3);
- return api.once(PREVIEW_INITIALIZED, initialize), () => {
- clearTimeout(timeout), api.off(PREVIEW_INITIALIZED, initialize);
- };
- }, [api]), useEffect(() => {
- initialized && items && status === experimental_UniversalStore.Status.READY && debounceReady();
- }, [initialized, items, status, debounceReady]), {
- ready,
- allItems,
- ...itemCollections,
- ...internal_checklistStore,
- ...checklistState
- };
- };
-
- // src/shared/useCopyButton.ts
- init_react();
-
- // ../../node_modules/@react-aria/live-announcer/dist/LiveAnnouncer.mjs
- var $319e236875307eab$var$liveAnnouncer = null;
- function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = "assertive", timeout = 7e3) {
- $319e236875307eab$var$liveAnnouncer ? $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout) : ($319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer(), (typeof IS_REACT_ACT_ENVIRONMENT == "boolean" ? IS_REACT_ACT_ENVIRONMENT : typeof jest < "u") ? $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout) : setTimeout(() => {
- $319e236875307eab$var$liveAnnouncer?.isAttached() && $319e236875307eab$var$liveAnnouncer?.announce(message, assertiveness, timeout);
- }, 100));
- }
- function $319e236875307eab$export$d10ae4f68404609a(assertiveness) {
- $319e236875307eab$var$liveAnnouncer && $319e236875307eab$var$liveAnnouncer.clear(assertiveness);
- }
- var $319e236875307eab$var$LiveAnnouncer = class {
- isAttached() {
- var _this_node;
- return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
- }
- createLog(ariaLive) {
- let node = document.createElement("div");
- return node.setAttribute("role", "log"), node.setAttribute("aria-live", ariaLive), node.setAttribute("aria-relevant", "additions"), node;
- }
- destroy() {
- this.node && (document.body.removeChild(this.node), this.node = null);
- }
- announce(message, assertiveness = "assertive", timeout = 7e3) {
- var _this_assertiveLog, _this_politeLog;
- if (!this.node) return;
- let node = document.createElement("div");
- typeof message == "object" ? (node.setAttribute("role", "img"), node.setAttribute("aria-labelledby", message["aria-labelledby"])) : node.textContent = message, assertiveness === "assertive" ? (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 || _this_assertiveLog.appendChild(node) : (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 || _this_politeLog.appendChild(node), message !== "" && setTimeout(() => {
- node.remove();
- }, timeout);
- }
- clear(assertiveness) {
- this.node && ((!assertiveness || assertiveness === "assertive") && this.assertiveLog && (this.assertiveLog.innerHTML = ""), (!assertiveness || assertiveness === "polite") && this.politeLog && (this.politeLog.innerHTML = ""));
- }
- constructor() {
- this.node = null, this.assertiveLog = null, this.politeLog = null, typeof document < "u" && (this.node = document.createElement("div"), this.node.dataset.liveAnnouncer = "true", Object.assign(this.node.style, {
- border: 0,
- clip: "rect(0 0 0 0)",
- clipPath: "inset(50%)",
- height: "1px",
- margin: "-1px",
- overflow: "hidden",
- padding: 0,
- position: "absolute",
- width: "1px",
- whiteSpace: "nowrap"
- }), this.assertiveLog = this.createLog("assertive"), this.node.appendChild(this.assertiveLog), this.politeLog = this.createLog("polite"), this.node.appendChild(this.politeLog), document.body.prepend(this.node));
- }
- };
-
- // src/shared/useCopyButton.ts
- function useCopyButton({
- children = "Copy",
- childrenOnCopy = "Copied!",
- content,
- onCopy,
- ariaLabel = !1,
- ariaLabelOnCopy = !1,
- duration = 3e3
- }) {
- let [copied, setCopied] = useState(!1), timerRef = useRef(null);
- useEffect(
- () => () => {
- timerRef.current && clearTimeout(timerRef.current);
- },
- []
- );
- let handleClick = useCallback(
- (e2) => {
- timerRef.current && clearTimeout(timerRef.current);
- let announcement = typeof ariaLabelOnCopy == "string" ? ariaLabelOnCopy : "Copied to clipboard";
- navigator.clipboard?.writeText(content).then(() => {
- onCopy?.(e2), setCopied(!0), $319e236875307eab$export$a9b970dcc4ae71a9(announcement, "polite"), timerRef.current = setTimeout(() => {
- setCopied(!1), $319e236875307eab$export$d10ae4f68404609a("polite"), timerRef.current = null;
- }, duration);
- });
- },
- [content, onCopy, ariaLabelOnCopy, duration]
- );
- return {
- // @ts-expect-error - TypeScript is not realising T is constrained identically in both interfaces.
- children: copied ? childrenOnCopy : children,
- buttonProps: useMemo(
- () => ({
- onClick: handleClick,
- ariaLabel: copied ? ariaLabelOnCopy : ariaLabel
- }),
- [handleClick, copied, ariaLabelOnCopy, ariaLabel]
- )
- };
- }
-
- // src/manager/components/sidebar/ChecklistWidget.tsx
- var fadeScaleIn = keyframes`
- from {
- opacity: 0;
- transform: scale(0.7);
- }
- to {
- opacity: 1;
- transform: scale(1);
- }
- `, expand = keyframes`
- from {
- transform: scaleX(0);
- }
- to {
- transform: scaleX(1);
- }
- `, useTransitionArray = (array, subset, options2) => {
- let keyFnRef = useRef(options2.keyFn), { setItem, toggle, stateMap } = useTransitionMap({
- allowMultiple: !0,
- mountOnEnter: !0,
- unmountOnExit: !0,
- preEnter: !0,
- ...options2
- });
- return useEffect(() => {
- let keyFn = keyFnRef.current;
- array.forEach((task) => setItem(keyFn(task)));
- }, [array, setItem]), useEffect(() => {
- let keyFn = keyFnRef.current;
- array.forEach((task) => toggle(keyFn(task), subset.map(keyFn).includes(keyFn(task))));
- }, [array, subset, toggle]), Array.from(stateMap).map(
- ([key, value]) => [array.find((item) => keyFnRef.current(item) === key), value]
- );
- }, CollapsibleWithMargin = styled(Collapsible)(({ collapsed }) => ({
- marginTop: collapsed ? 0 : 16
- })), HoverCard = styled(Card)({
- "&:hover #checklist-module-collapse-toggle": {
- opacity: 1
- }
- }), CollapseToggle2 = styled(ActionList.Button)({
- opacity: 0,
- transition: "opacity var(--transition-duration, 0.2s)",
- "&:focus, &:hover": {
- opacity: 1
- }
- }), ProgressCircle = styled(ProgressSpinner)(({ theme }) => ({
- color: theme.color.secondary
- })), Checked = styled(StatusPassIcon)(({ theme }) => ({
- padding: 1,
- borderRadius: "50%",
- background: theme.color.positive,
- color: theme.background.content,
- animation: `${fadeScaleIn} 500ms forwards`
- })), ItemLabel = styled.span(
- ({ theme, isCompleted, isSkipped }) => ({
- position: "relative",
- margin: "0 -2px",
- padding: "0 2px",
- color: isSkipped ? theme.color.mediumdark : isCompleted ? theme.base === "dark" ? theme.color.positive : theme.color.positiveText : theme.color.defaultText,
- transition: "color 500ms"
- }),
- ({ theme, isSkipped }) => isSkipped && {
- alignSelf: "flex-start",
- "&:after": {
- content: '""',
- position: "absolute",
- top: "50%",
- left: 0,
- width: "100%",
- height: 1,
- background: theme.color.mediumdark,
- animation: `${expand} 500ms forwards`,
- transformOrigin: "left"
- }
- }
- ), title = (progress) => {
- switch (!0) {
- case progress < 50:
- return "Get started";
- case progress < 75:
- return "Level up";
- default:
- return "Become an expert";
- }
- }, OpenGuideButton = ({
- children,
- afterClick
- }) => {
- let api = useStorybookApi();
- return react_default.createElement(
- ActionList.Action,
- {
- ariaLabel: "Open onboarding guide",
- onClick: (e2) => {
- e2.stopPropagation(), api.navigate("/settings/guide"), afterClick?.();
- }
- },
- react_default.createElement(ActionList.Icon, null, react_default.createElement(ListUnorderedIcon, null)),
- children
- );
- }, CopyButton = ({
- label,
- copyContent,
- onClick,
- ...props
- }) => {
- let { children: copyChildren, buttonProps: copyButtonProps } = useCopyButton({
- children: label,
- childrenOnCopy: react_default.createElement(react_default.Fragment, null, react_default.createElement(CheckIcon, null), " Copied!"),
- onCopy: onClick,
- content: copyContent
- });
- return react_default.createElement(ActionList.Button, { ...props, ...copyButtonProps }, copyChildren);
- }, ChecklistWidget = () => {
- let api = useStorybookApi(), { loaded, ready, allItems, nextItems, progress, accept, mute, items } = useChecklist(), [renderItems, setRenderItems] = useState(nextItems), [animated, setAnimated] = useState(!1);
- useEffect(() => {
- if (ready) {
- let timeout = setTimeout(setAnimated, 1e3, !0);
- return () => clearTimeout(timeout);
- }
- }, [ready]), useEffect(() => {
- if (!animated) {
- setRenderItems(nextItems);
- return;
- }
- setRenderItems((current) => {
- let animateOut = !1, prevItems = current.map((item) => {
- let { status } = items[item.id], isAccepted = status === "accepted", isDone = status === "done", isSkipped = status === "skipped";
- return animateOut = animateOut || isAccepted || isDone || isSkipped, { ...item, isCompleted: isAccepted || isDone, isAccepted, isDone, isSkipped };
- });
- return animateOut ? prevItems : nextItems;
- });
- let timeout = setTimeout(setRenderItems, 2e3, nextItems);
- return () => clearTimeout(timeout);
- }, [animated, nextItems, items]);
- let hasItems = renderItems.length > 0, transitionItems = useTransitionArray(allItems, renderItems, {
- keyFn: (item) => item.id,
- timeout: animated ? 300 : 0
- });
- return api.getIsNavShown() ? react_default.createElement(CollapsibleWithMargin, { collapsed: !hasItems || !loaded }, react_default.createElement(HoverCard, { id: "storybook-checklist-widget", outlineAnimation: "rainbow" }, react_default.createElement(
- Collapsible,
- {
- storageKey: "checklist-widget",
- initialCollapsed: !hasItems,
- disabled: !hasItems,
- summary: ({ isCollapsed, toggleCollapsed, toggleProps }) => react_default.createElement(ActionList, { as: "div", onClick: toggleCollapsed }, react_default.createElement(ActionList.Item, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div", style: { flexShrink: 1 } }, loaded && react_default.createElement(
- Optional,
- {
- content: react_default.createElement(OpenGuideButton, null, react_default.createElement("strong", null, title(progress))),
- fallback: react_default.createElement(OpenGuideButton, null)
- }
- )), react_default.createElement(ActionList.Item, { as: "div" }, react_default.createElement(
- CollapseToggle2,
- {
- ...toggleProps,
- id: "checklist-module-collapse-toggle",
- ariaLabel: `${isCollapsed ? "Expand" : "Collapse"} onboarding guide`
- },
- react_default.createElement(
- ChevronSmallUpIcon,
- {
- style: {
- transform: isCollapsed ? "rotate(180deg)" : "none",
- transition: "transform 250ms",
- willChange: "auto"
- }
- }
- )
- ), loaded && react_default.createElement(
- PopoverProvider,
- {
- ariaLabel: "Onboarding guide menu",
- padding: 0,
- popover: ({ onHide }) => react_default.createElement(ActionList, null, react_default.createElement(ActionList.Item, null, react_default.createElement(OpenGuideButton, { afterClick: onHide }, react_default.createElement(ActionList.Text, null, "Open full guide"))), react_default.createElement(ActionList.Item, null, react_default.createElement(
- ActionList.Action,
- {
- ariaLabel: !1,
- onClick: (e2) => {
- e2.stopPropagation(), mute(allItems.map(({ id }) => id)), onHide();
- }
- },
- react_default.createElement(ActionList.Icon, null, react_default.createElement(EyeCloseIcon, null)),
- react_default.createElement(ActionList.Text, null, "Remove from sidebar")
- )))
- },
- react_default.createElement(
- ActionList.Button,
- {
- ariaLabel: `${progress}% completed`,
- onClick: (e2) => e2.stopPropagation()
- },
- react_default.createElement(
- ProgressCircle,
- {
- percentage: progress,
- running: !1,
- size: 16,
- width: 1.5
- }
- ),
- react_default.createElement(TextFlip, { text: `${progress}%`, placeholder: "00%" })
- )
- ))))
- },
- react_default.createElement(ActionList, null, transitionItems.map(
- ([item, { status, isMounted }]) => isMounted && react_default.createElement(ActionList.HoverItem, { key: item.id, targetId: item.id, transitionStatus: status }, react_default.createElement(
- ActionList.Action,
- {
- ariaLabel: `Open onboarding guide for ${item.label}`,
- onClick: () => api.navigate(`/settings/guide#${item.id}`)
- },
- react_default.createElement(ActionList.Icon, null, item.isCompleted && animated ? react_default.createElement(Particles, { anchor: Checked, key: item.id }) : item.icon ? react_default.createElement(item.icon, null) : react_default.createElement(CircleHollowIcon, null)),
- react_default.createElement(ActionList.Text, null, react_default.createElement(ItemLabel, { isCompleted: item.isCompleted, isSkipped: item.isSkipped }, item.label))
- ), item.action && (item.action.copyContent ? react_default.createElement(
- CopyButton,
- {
- "data-target-id": item.id,
- label: item.action.label,
- copyContent: item.action.copyContent,
- onClick: (e2) => {
- e2.stopPropagation(), item.action?.onClick({
- api,
- accept: () => accept(item.id)
- });
- }
- }
- ) : react_default.createElement(
- ActionList.Button,
- {
- "data-target-id": item.id,
- ariaLabel: !1,
- onClick: (e2) => {
- e2.stopPropagation(), item.action?.onClick({
- api,
- accept: () => accept(item.id)
- });
- }
- },
- item.action.label
- )))
- ))
- ))) : null;
- };
-
- // src/manager/components/sidebar/CreateNewStoryFileModal.tsx
- init_react();
-
- // src/manager/hooks/useDebounce.ts
- init_react();
- function useDebounce(value, delay2) {
- let [debouncedValue, setDebouncedValue] = useState(value);
- return useEffect(() => {
- let handler = setTimeout(() => {
- setDebouncedValue(value);
- }, delay2);
- return () => {
- clearTimeout(handler);
- };
- }, [value, delay2]), debouncedValue;
- }
-
- // src/manager/components/sidebar/FileSearchModal.tsx
- init_react();
-
- // src/manager/hooks/useMeasure.tsx
- init_react();
- function useMeasure() {
- let [dimensions, setDimensions] = react_default.useState({
- width: null,
- height: null
- }), prevObserver = react_default.useRef(null);
- return [react_default.useCallback((node) => {
- if (prevObserver.current && (prevObserver.current.disconnect(), prevObserver.current = null), node?.nodeType === Node.ELEMENT_NODE) {
- let observer = new ResizeObserver(([entry]) => {
- if (entry && entry.borderBoxSize) {
- let { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
- setDimensions({ width, height });
- }
- });
- observer.observe(node), prevObserver.current = observer;
- }
- }, []), dimensions];
- }
-
- // src/manager/components/sidebar/FileSearchList.tsx
- init_react();
-
- // ../../node_modules/@tanstack/react-virtual/dist/esm/index.js
- init_react();
-
- // ../../node_modules/@tanstack/virtual-core/dist/esm/utils.js
- function memo2(getDeps, fn, opts) {
- let deps = opts.initialDeps ?? [], result;
- function memoizedFunction() {
- var _a2, _b, _c, _d;
- let depTime;
- opts.key && ((_a2 = opts.debug) != null && _a2.call(opts)) && (depTime = Date.now());
- let newDeps = getDeps();
- if (!(newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep)))
- return result;
- deps = newDeps;
- let resultTime;
- if (opts.key && ((_b = opts.debug) != null && _b.call(opts)) && (resultTime = Date.now()), result = fn(...newDeps), opts.key && ((_c = opts.debug) != null && _c.call(opts))) {
- let depEndTime = Math.round((Date.now() - depTime) * 100) / 100, resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100, resultFpsPercentage = resultEndTime / 16, pad = (str, num) => {
- for (str = String(str); str.length < num; )
- str = " " + str;
- return str;
- };
- console.info(
- `%c\u23F1 ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
- `
- font-size: .6rem;
- font-weight: bold;
- color: hsl(${Math.max(
- 0,
- Math.min(120 - 120 * resultFpsPercentage, 120)
- )}deg 100% 31%);`,
- opts?.key
- );
- }
- return (_d = opts?.onChange) == null || _d.call(opts, result), result;
- }
- return memoizedFunction.updateDeps = (newDeps) => {
- deps = newDeps;
- }, memoizedFunction;
- }
- function notUndefined(value, msg) {
- if (value === void 0)
- throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
- return value;
- }
- var approxEqual = (a2, b2) => Math.abs(a2 - b2) < 1.01, debounce3 = (targetWindow, fn, ms) => {
- let timeoutId;
- return function(...args) {
- targetWindow.clearTimeout(timeoutId), timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
- };
- };
-
- // ../../node_modules/@tanstack/virtual-core/dist/esm/index.js
- var getRect = (element) => {
- let { offsetWidth, offsetHeight } = element;
- return { width: offsetWidth, height: offsetHeight };
- }, defaultKeyExtractor = (index) => index, defaultRangeExtractor = (range) => {
- let start = Math.max(range.startIndex - range.overscan, 0), end = Math.min(range.endIndex + range.overscan, range.count - 1), arr = [];
- for (let i2 = start; i2 <= end; i2++)
- arr.push(i2);
- return arr;
- }, observeElementRect = (instance, cb) => {
- let element = instance.scrollElement;
- if (!element)
- return;
- let targetWindow = instance.targetWindow;
- if (!targetWindow)
- return;
- let handler = (rect) => {
- let { width, height } = rect;
- cb({ width: Math.round(width), height: Math.round(height) });
- };
- if (handler(getRect(element)), !targetWindow.ResizeObserver)
- return () => {
- };
- let observer = new targetWindow.ResizeObserver((entries) => {
- let run = () => {
- let entry = entries[0];
- if (entry?.borderBoxSize) {
- let box = entry.borderBoxSize[0];
- if (box) {
- handler({ width: box.inlineSize, height: box.blockSize });
- return;
- }
- }
- handler(getRect(element));
- };
- instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
- });
- return observer.observe(element, { box: "border-box" }), () => {
- observer.unobserve(element);
- };
- }, addEventListenerOptions = {
- passive: !0
- };
- var supportsScrollend = typeof window > "u" ? !0 : "onscrollend" in window, observeElementOffset = (instance, cb) => {
- let element = instance.scrollElement;
- if (!element)
- return;
- let targetWindow = instance.targetWindow;
- if (!targetWindow)
- return;
- let offset2 = 0, fallback = instance.options.useScrollendEvent && supportsScrollend ? () => {
- } : debounce3(
- targetWindow,
- () => {
- cb(offset2, !1);
- },
- instance.options.isScrollingResetDelay
- ), createHandler = (isScrolling) => () => {
- let { horizontal, isRtl } = instance.options;
- offset2 = horizontal ? element.scrollLeft * (isRtl && -1 || 1) : element.scrollTop, fallback(), cb(offset2, isScrolling);
- }, handler = createHandler(!0), endHandler = createHandler(!1);
- endHandler(), element.addEventListener("scroll", handler, addEventListenerOptions);
- let registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
- return registerScrollendEvent && element.addEventListener("scrollend", endHandler, addEventListenerOptions), () => {
- element.removeEventListener("scroll", handler), registerScrollendEvent && element.removeEventListener("scrollend", endHandler);
- };
- };
- var measureElement = (element, entry, instance) => {
- if (entry?.borderBoxSize) {
- let box = entry.borderBoxSize[0];
- if (box)
- return Math.round(
- box[instance.options.horizontal ? "inlineSize" : "blockSize"]
- );
- }
- return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
- };
- var elementScroll = (offset2, {
- adjustments = 0,
- behavior
- }, instance) => {
- var _a2, _b;
- let toOffset = offset2 + adjustments;
- (_b = (_a2 = instance.scrollElement) == null ? void 0 : _a2.scrollTo) == null || _b.call(_a2, {
- [instance.options.horizontal ? "left" : "top"]: toOffset,
- behavior
- });
- }, Virtualizer = class {
- constructor(opts) {
- this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.observer = /* @__PURE__ */ (() => {
- let _ro = null, get2 = () => _ro || (!this.targetWindow || !this.targetWindow.ResizeObserver ? null : _ro = new this.targetWindow.ResizeObserver((entries) => {
- entries.forEach((entry) => {
- let run = () => {
- this._measureElement(entry.target, entry);
- };
- this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
- });
- }));
- return {
- disconnect: () => {
- var _a2;
- (_a2 = get2()) == null || _a2.disconnect(), _ro = null;
- },
- observe: (target) => {
- var _a2;
- return (_a2 = get2()) == null ? void 0 : _a2.observe(target, { box: "border-box" });
- },
- unobserve: (target) => {
- var _a2;
- return (_a2 = get2()) == null ? void 0 : _a2.unobserve(target);
- }
- };
- })(), this.range = null, this.setOptions = (opts2) => {
- Object.entries(opts2).forEach(([key, value]) => {
- typeof value > "u" && delete opts2[key];
- }), this.options = {
- debug: !1,
- initialOffset: 0,
- overscan: 1,
- paddingStart: 0,
- paddingEnd: 0,
- scrollPaddingStart: 0,
- scrollPaddingEnd: 0,
- horizontal: !1,
- getItemKey: defaultKeyExtractor,
- rangeExtractor: defaultRangeExtractor,
- onChange: () => {
- },
- measureElement,
- initialRect: { width: 0, height: 0 },
- scrollMargin: 0,
- gap: 0,
- indexAttribute: "data-index",
- initialMeasurementsCache: [],
- lanes: 1,
- isScrollingResetDelay: 150,
- enabled: !0,
- isRtl: !1,
- useScrollendEvent: !1,
- useAnimationFrameWithResizeObserver: !1,
- ...opts2
- };
- }, this.notify = (sync) => {
- var _a2, _b;
- (_b = (_a2 = this.options).onChange) == null || _b.call(_a2, this, sync);
- }, this.maybeNotify = memo2(
- () => (this.calculateRange(), [
- this.isScrolling,
- this.range ? this.range.startIndex : null,
- this.range ? this.range.endIndex : null
- ]),
- (isScrolling) => {
- this.notify(isScrolling);
- },
- {
- key: !1,
- debug: () => this.options.debug,
- initialDeps: [
- this.isScrolling,
- this.range ? this.range.startIndex : null,
- this.range ? this.range.endIndex : null
- ]
- }
- ), this.cleanup = () => {
- this.unsubs.filter(Boolean).forEach((d2) => d2()), this.unsubs = [], this.observer.disconnect(), this.scrollElement = null, this.targetWindow = null;
- }, this._didMount = () => () => {
- this.cleanup();
- }, this._willUpdate = () => {
- var _a2;
- let scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
- if (this.scrollElement !== scrollElement) {
- if (this.cleanup(), !scrollElement) {
- this.maybeNotify();
- return;
- }
- this.scrollElement = scrollElement, this.scrollElement && "ownerDocument" in this.scrollElement ? this.targetWindow = this.scrollElement.ownerDocument.defaultView : this.targetWindow = ((_a2 = this.scrollElement) == null ? void 0 : _a2.window) ?? null, this.elementsCache.forEach((cached) => {
- this.observer.observe(cached);
- }), this._scrollToOffset(this.getScrollOffset(), {
- adjustments: void 0,
- behavior: void 0
- }), this.unsubs.push(
- this.options.observeElementRect(this, (rect) => {
- this.scrollRect = rect, this.maybeNotify();
- })
- ), this.unsubs.push(
- this.options.observeElementOffset(this, (offset2, isScrolling) => {
- this.scrollAdjustments = 0, this.scrollDirection = isScrolling ? this.getScrollOffset() < offset2 ? "forward" : "backward" : null, this.scrollOffset = offset2, this.isScrolling = isScrolling, this.maybeNotify();
- })
- );
- }
- }, this.getSize = () => this.options.enabled ? (this.scrollRect = this.scrollRect ?? this.options.initialRect, this.scrollRect[this.options.horizontal ? "width" : "height"]) : (this.scrollRect = null, 0), this.getScrollOffset = () => this.options.enabled ? (this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset == "function" ? this.options.initialOffset() : this.options.initialOffset), this.scrollOffset) : (this.scrollOffset = null, 0), this.getFurthestMeasurement = (measurements, index) => {
- let furthestMeasurementsFound = /* @__PURE__ */ new Map(), furthestMeasurements = /* @__PURE__ */ new Map();
- for (let m2 = index - 1; m2 >= 0; m2--) {
- let measurement = measurements[m2];
- if (furthestMeasurementsFound.has(measurement.lane))
- continue;
- let previousFurthestMeasurement = furthestMeasurements.get(
- measurement.lane
- );
- if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end ? furthestMeasurements.set(measurement.lane, measurement) : measurement.end < previousFurthestMeasurement.end && furthestMeasurementsFound.set(measurement.lane, !0), furthestMeasurementsFound.size === this.options.lanes)
- break;
- }
- return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a2, b2) => a2.end === b2.end ? a2.index - b2.index : a2.end - b2.end)[0] : void 0;
- }, this.getMeasurementOptions = memo2(
- () => [
- this.options.count,
- this.options.paddingStart,
- this.options.scrollMargin,
- this.options.getItemKey,
- this.options.enabled
- ],
- (count, paddingStart, scrollMargin, getItemKey, enabled) => (this.pendingMeasuredCacheIndexes = [], {
- count,
- paddingStart,
- scrollMargin,
- getItemKey,
- enabled
- }),
- {
- key: !1
- }
- ), this.getMeasurements = memo2(
- () => [this.getMeasurementOptions(), this.itemSizeCache],
- ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
- if (!enabled)
- return this.measurementsCache = [], this.itemSizeCache.clear(), [];
- this.measurementsCache.length === 0 && (this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((item) => {
- this.itemSizeCache.set(item.key, item.size);
- }));
- let min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
- this.pendingMeasuredCacheIndexes = [];
- let measurements = this.measurementsCache.slice(0, min);
- for (let i2 = min; i2 < count; i2++) {
- let key = getItemKey(i2), furthestMeasurement = this.options.lanes === 1 ? measurements[i2 - 1] : this.getFurthestMeasurement(measurements, i2), start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin, measuredSize = itemSizeCache.get(key), size = typeof measuredSize == "number" ? measuredSize : this.options.estimateSize(i2), end = start + size, lane = furthestMeasurement ? furthestMeasurement.lane : i2 % this.options.lanes;
- measurements[i2] = {
- index: i2,
- start,
- size,
- end,
- key,
- lane
- };
- }
- return this.measurementsCache = measurements, measurements;
- },
- {
- key: !1,
- debug: () => this.options.debug
- }
- ), this.calculateRange = memo2(
- () => [
- this.getMeasurements(),
- this.getSize(),
- this.getScrollOffset(),
- this.options.lanes
- ],
- (measurements, outerSize, scrollOffset, lanes) => this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
- measurements,
- outerSize,
- scrollOffset,
- lanes
- }) : null,
- {
- key: !1,
- debug: () => this.options.debug
- }
- ), this.getVirtualIndexes = memo2(
- () => {
- let startIndex = null, endIndex = null, range = this.calculateRange();
- return range && (startIndex = range.startIndex, endIndex = range.endIndex), this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]), [
- this.options.rangeExtractor,
- this.options.overscan,
- this.options.count,
- startIndex,
- endIndex
- ];
- },
- (rangeExtractor, overscan, count, startIndex, endIndex) => startIndex === null || endIndex === null ? [] : rangeExtractor({
- startIndex,
- endIndex,
- overscan,
- count
- }),
- {
- key: !1,
- debug: () => this.options.debug
- }
- ), this.indexFromElement = (node) => {
- let attributeName = this.options.indexAttribute, indexStr = node.getAttribute(attributeName);
- return indexStr ? parseInt(indexStr, 10) : (console.warn(
- `Missing attribute name '${attributeName}={index}' on measured element.`
- ), -1);
- }, this._measureElement = (node, entry) => {
- let index = this.indexFromElement(node), item = this.measurementsCache[index];
- if (!item)
- return;
- let key = item.key, prevNode = this.elementsCache.get(key);
- prevNode !== node && (prevNode && this.observer.unobserve(prevNode), this.observer.observe(node), this.elementsCache.set(key, node)), node.isConnected && this.resizeItem(index, this.options.measureElement(node, entry, this));
- }, this.resizeItem = (index, size) => {
- let item = this.measurementsCache[index];
- if (!item)
- return;
- let itemSize = this.itemSizeCache.get(item.key) ?? item.size, delta = size - itemSize;
- delta !== 0 && ((this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) && this._scrollToOffset(this.getScrollOffset(), {
- adjustments: this.scrollAdjustments += delta,
- behavior: void 0
- }), this.pendingMeasuredCacheIndexes.push(item.index), this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size)), this.notify(!1));
- }, this.measureElement = (node) => {
- if (!node) {
- this.elementsCache.forEach((cached, key) => {
- cached.isConnected || (this.observer.unobserve(cached), this.elementsCache.delete(key));
- });
- return;
- }
- this._measureElement(node, void 0);
- }, this.getVirtualItems = memo2(
- () => [this.getVirtualIndexes(), this.getMeasurements()],
- (indexes, measurements) => {
- let virtualItems = [];
- for (let k2 = 0, len = indexes.length; k2 < len; k2++) {
- let i2 = indexes[k2], measurement = measurements[i2];
- virtualItems.push(measurement);
- }
- return virtualItems;
- },
- {
- key: !1,
- debug: () => this.options.debug
- }
- ), this.getVirtualItemForOffset = (offset2) => {
- let measurements = this.getMeasurements();
- if (measurements.length !== 0)
- return notUndefined(
- measurements[findNearestBinarySearch(
- 0,
- measurements.length - 1,
- (index) => notUndefined(measurements[index]).start,
- offset2
- )]
- );
- }, this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
- let size = this.getSize(), scrollOffset = this.getScrollOffset();
- align === "auto" && (align = toOffset >= scrollOffset + size ? "end" : "start"), align === "center" ? toOffset += (itemSize - size) / 2 : align === "end" && (toOffset -= size);
- let maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
- return Math.max(Math.min(maxOffset, toOffset), 0);
- }, this.getOffsetForIndex = (index, align = "auto") => {
- index = Math.max(0, Math.min(index, this.options.count - 1));
- let item = this.measurementsCache[index];
- if (!item)
- return;
- let size = this.getSize(), scrollOffset = this.getScrollOffset();
- if (align === "auto")
- if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd)
- align = "end";
- else if (item.start <= scrollOffset + this.options.scrollPaddingStart)
- align = "start";
- else
- return [scrollOffset, align];
- let toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
- return [
- this.getOffsetForAlignment(toOffset, align, item.size),
- align
- ];
- }, this.isDynamicMode = () => this.elementsCache.size > 0, this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
- behavior === "smooth" && this.isDynamicMode() && console.warn(
- "The `smooth` scroll behavior is not fully supported with dynamic size."
- ), this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
- adjustments: void 0,
- behavior
- });
- }, this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
- behavior === "smooth" && this.isDynamicMode() && console.warn(
- "The `smooth` scroll behavior is not fully supported with dynamic size."
- ), index = Math.max(0, Math.min(index, this.options.count - 1));
- let attempts = 0, maxAttempts = 10, tryScroll = (currentAlign) => {
- if (!this.targetWindow) return;
- let offsetInfo = this.getOffsetForIndex(index, currentAlign);
- if (!offsetInfo) {
- console.warn("Failed to get offset for index:", index);
- return;
- }
- let [offset2, align] = offsetInfo;
- this._scrollToOffset(offset2, { adjustments: void 0, behavior }), this.targetWindow.requestAnimationFrame(() => {
- let currentOffset = this.getScrollOffset(), afterInfo = this.getOffsetForIndex(index, align);
- if (!afterInfo) {
- console.warn("Failed to get offset for index:", index);
- return;
- }
- approxEqual(afterInfo[0], currentOffset) || scheduleRetry(align);
- });
- }, scheduleRetry = (align) => {
- this.targetWindow && (attempts++, attempts < maxAttempts ? this.targetWindow.requestAnimationFrame(() => tryScroll(align)) : console.warn(
- `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
- ));
- };
- tryScroll(initialAlign);
- }, this.scrollBy = (delta, { behavior } = {}) => {
- behavior === "smooth" && this.isDynamicMode() && console.warn(
- "The `smooth` scroll behavior is not fully supported with dynamic size."
- ), this._scrollToOffset(this.getScrollOffset() + delta, {
- adjustments: void 0,
- behavior
- });
- }, this.getTotalSize = () => {
- var _a2;
- let measurements = this.getMeasurements(), end;
- if (measurements.length === 0)
- end = this.options.paddingStart;
- else if (this.options.lanes === 1)
- end = ((_a2 = measurements[measurements.length - 1]) == null ? void 0 : _a2.end) ?? 0;
- else {
- let endByLane = Array(this.options.lanes).fill(null), endIndex = measurements.length - 1;
- for (; endIndex >= 0 && endByLane.some((val) => val === null); ) {
- let item = measurements[endIndex];
- endByLane[item.lane] === null && (endByLane[item.lane] = item.end), endIndex--;
- }
- end = Math.max(...endByLane.filter((val) => val !== null));
- }
- return Math.max(
- end - this.options.scrollMargin + this.options.paddingEnd,
- 0
- );
- }, this._scrollToOffset = (offset2, {
- adjustments,
- behavior
- }) => {
- this.options.scrollToFn(offset2, { behavior, adjustments }, this);
- }, this.measure = () => {
- this.itemSizeCache = /* @__PURE__ */ new Map(), this.notify(!1);
- }, this.setOptions(opts);
- }
- }, findNearestBinarySearch = (low, high, getCurrentValue, value) => {
- for (; low <= high; ) {
- let middle = (low + high) / 2 | 0, currentValue = getCurrentValue(middle);
- if (currentValue < value)
- low = middle + 1;
- else if (currentValue > value)
- high = middle - 1;
- else
- return middle;
- }
- return low > 0 ? low - 1 : 0;
- };
- function calculateRange({
- measurements,
- outerSize,
- scrollOffset,
- lanes
- }) {
- let lastIndex = measurements.length - 1, getOffset = (index) => measurements[index].start;
- if (measurements.length <= lanes)
- return {
- startIndex: 0,
- endIndex: lastIndex
- };
- let startIndex = findNearestBinarySearch(
- 0,
- lastIndex,
- getOffset,
- scrollOffset
- ), endIndex = startIndex;
- if (lanes === 1)
- for (; endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize; )
- endIndex++;
- else if (lanes > 1) {
- let endPerLane = Array(lanes).fill(0);
- for (; endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize); ) {
- let item = measurements[endIndex];
- endPerLane[item.lane] = item.end, endIndex++;
- }
- let startPerLane = Array(lanes).fill(scrollOffset + outerSize);
- for (; startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset); ) {
- let item = measurements[startIndex];
- startPerLane[item.lane] = item.start, startIndex--;
- }
- startIndex = Math.max(0, startIndex - startIndex % lanes), endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
- }
- return { startIndex, endIndex };
- }
-
- // ../../node_modules/@tanstack/react-virtual/dist/esm/index.js
- var useIsomorphicLayoutEffect = typeof document < "u" ? useLayoutEffect : useEffect;
- function useVirtualizerBase(options2) {
- let rerender = useReducer(() => ({}), {})[1], resolvedOptions = {
- ...options2,
- onChange: (instance2, sync) => {
- var _a2;
- sync ? flushSync(rerender) : rerender(), (_a2 = options2.onChange) == null || _a2.call(options2, instance2, sync);
- }
- }, [instance] = useState(
- () => new Virtualizer(resolvedOptions)
- );
- return instance.setOptions(resolvedOptions), useIsomorphicLayoutEffect(() => instance._didMount(), []), useIsomorphicLayoutEffect(() => instance._willUpdate()), instance;
- }
- function useVirtualizer(options2) {
- return useVirtualizerBase({
- observeElementRect,
- observeElementOffset,
- scrollToFn: elementScroll,
- ...options2
- });
- }
-
- // src/manager/components/sidebar/FIleSearchList.utils.tsx
- init_react();
- var useArrowKeyNavigation = ({
- parentRef,
- rowVirtualizer,
- selectedItem
- }) => {
- useEffect(() => {
- let handleArrowKeys = (event) => {
- if (!parentRef.current)
- return;
- let maxIndex = rowVirtualizer.options.count, activeElement = document.activeElement, rowIndex = parseInt(activeElement.getAttribute("data-index") || "-1", 10), isActiveElementInput = activeElement.tagName === "INPUT", getFirstElement = () => document.querySelector('[data-index="0"]'), getLastElement = () => document.querySelector(`[data-index="${maxIndex - 1}"]`);
- if (event.code === "ArrowDown" && activeElement) {
- if (event.stopPropagation(), isActiveElementInput) {
- getFirstElement()?.focus();
- return;
- }
- if (rowIndex === maxIndex - 1) {
- flushSync(() => {
- rowVirtualizer.scrollToIndex(0, { align: "start" });
- }), setTimeout(() => {
- getFirstElement()?.focus();
- }, 100);
- return;
- }
- if (selectedItem === rowIndex) {
- document.querySelector(
- `[data-index-position="${selectedItem}_first"]`
- )?.focus();
- return;
- }
- if (selectedItem !== null && activeElement.getAttribute("data-index-position")?.includes("last")) {
- document.querySelector(
- `[data-index="${selectedItem + 1}"]`
- )?.focus();
- return;
- }
- activeElement.nextElementSibling?.focus();
- }
- if (event.code === "ArrowUp" && activeElement) {
- if (isActiveElementInput) {
- flushSync(() => {
- rowVirtualizer.scrollToIndex(maxIndex - 1, { align: "start" });
- }), setTimeout(() => {
- getLastElement()?.focus();
- }, 100);
- return;
- }
- if (selectedItem !== null && activeElement.getAttribute("data-index-position")?.includes("first")) {
- document.querySelector(
- `[data-index="${selectedItem}"]`
- )?.focus();
- return;
- }
- activeElement.previousElementSibling?.focus();
- }
- };
- return document.addEventListener("keydown", handleArrowKeys, { capture: !0 }), () => {
- document.removeEventListener("keydown", handleArrowKeys, { capture: !0 });
- };
- }, [rowVirtualizer, selectedItem, parentRef]);
- };
-
- // src/manager/components/sidebar/FileList.tsx
- var FileListWrapper = styled("div")(({ theme }) => ({
- marginTop: "-16px",
- // after element which fades out the list
- "&::after": {
- content: '""',
- position: "fixed",
- pointerEvents: "none",
- bottom: 0,
- left: 0,
- right: 0,
- height: "80px",
- background: `linear-gradient(${rgba(theme.barBg, 0)} 10%, ${theme.barBg} 80%)`
- }
- })), FileList = styled("div")({
- height: "280px",
- overflow: "auto",
- msOverflowStyle: "none",
- scrollbarWidth: "none",
- position: "relative",
- "::-webkit-scrollbar": {
- display: "none"
- }
- }), FileListLi = styled("li")(({ theme }) => ({
- ":focus-visible": {
- outline: "none",
- ".file-list-item": {
- borderRadius: "4px",
- background: theme.base === "dark" ? "rgba(255,255,255,.1)" : theme.color.mediumlight,
- "> svg": {
- display: "flex"
- }
- }
- }
- })), FileListItem = styled("div")({
- display: "flex",
- flexDirection: "column",
- position: "relative"
- }), FileListItemContentWrapper = styled.div(({ theme, selected, disabled, error }) => ({
- display: "flex",
- alignItems: "flex-start",
- gap: "8px",
- alignSelf: "stretch",
- padding: "8px 16px",
- cursor: "pointer",
- borderRadius: "4px",
- ...selected && {
- borderRadius: "4px",
- background: theme.base === "dark" ? "rgba(255,255,255,.1)" : theme.color.mediumlight,
- "> svg": {
- display: "flex"
- }
- },
- ...disabled && {
- cursor: "not-allowed",
- div: {
- color: `${theme.textMutedColor} !important`
- }
- },
- ...error && {
- background: theme.base === "light" ? "#00000011" : "#00000033"
- },
- "&:hover": {
- background: error ? "#00000022" : theme.base === "dark" ? "rgba(255,255,255,.1)" : theme.color.mediumlight,
- "> svg": {
- display: "flex"
- }
- }
- })), FileListUl = styled("ul")({
- margin: 0,
- padding: "0 0 0 0",
- width: "100%",
- position: "relative"
- }), FileListItemContent = styled("div")({
- display: "flex",
- flexDirection: "column",
- alignItems: "flex-start",
- width: "calc(100% - 50px)"
- }), FileListIconWrapper = styled("div")(({ theme, error }) => ({
- color: error ? theme.color.negativeText : theme.color.secondary
- })), FileListItemLabel = styled("div")(({ theme, error }) => ({
- color: error ? theme.color.negativeText : theme.base === "dark" ? theme.color.lighter : theme.color.darkest,
- fontSize: "14px",
- whiteSpace: "nowrap",
- textOverflow: "ellipsis",
- overflow: "hidden",
- maxWidth: "100%"
- })), FileListItemPath = styled("div")(({ theme }) => ({
- color: theme.textMutedColor,
- fontSize: "14px",
- whiteSpace: "nowrap",
- textOverflow: "ellipsis",
- overflow: "hidden",
- maxWidth: "100%"
- })), FileListExport = styled("ul")({
- margin: 0,
- padding: 0
- }), FileListItemExport = styled("li")(({ theme, error }) => ({
- padding: "8px 16px 8px 58px",
- display: "flex",
- gap: "8px",
- alignItems: "center",
- justifyContent: "space-between",
- fontSize: "14px",
- cursor: "pointer",
- borderRadius: "4px",
- ":focus-visible": {
- outline: "none"
- },
- ...error && {
- background: "#F9ECEC",
- color: theme.color.negativeText
- },
- "&:hover,:focus-visible": {
- background: error ? "#F9ECEC" : theme.base === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.color.mediumlight,
- "> svg": {
- display: "flex"
- }
- },
- "> div > svg": {
- color: error ? theme.color.negativeText : theme.color.secondary
- }
- })), FileListItemExportName = styled("div")({
- display: "flex",
- alignItems: "center",
- gap: "8px",
- width: "calc(100% - 20px)"
- }), FileListItemExportNameContent = styled("span")(({ theme }) => ({
- whiteSpace: "nowrap",
- textOverflow: "ellipsis",
- overflow: "hidden",
- display: "inline-block",
- color: theme.base === "dark" ? theme.color.lightest : theme.color.darkest
- })), FileListItemExportNameContentWithExport = styled(FileListItemExportNameContent)({
- maxWidth: "calc(100% - 120px)"
- }), DefaultExport = styled("span")(({ theme }) => ({
- display: "inline-block",
- padding: `1px ${theme.appBorderRadius}px`,
- borderRadius: "2px",
- fontSize: "10px",
- color: theme.color.defaultText,
- backgroundColor: theme.base === "dark" ? "rgba(255, 255, 255, 0.1)" : "#F2F4F5"
- })), NoResults = styled("div")(({ theme }) => ({
- textAlign: "center",
- maxWidth: "334px",
- margin: "16px auto 50px auto",
- fontSize: "14px",
- color: theme.base === "dark" ? theme.color.lightest : "#000"
- })), NoResultsDescription = styled("p")(({ theme }) => ({
- margin: 0,
- color: theme.textMutedColor
- }));
-
- // src/manager/components/sidebar/FileSearchListSkeleton.tsx
- init_react();
- var FileListItemContentWrapperSkeleton = styled("div")(({ theme }) => ({
- display: "flex",
- alignItems: "flex-start",
- gap: "8px",
- alignSelf: "stretch",
- padding: "8px 16px"
- })), FileListItemContentSkeleton = styled("div")({
- display: "flex",
- flexDirection: "column",
- alignItems: "flex-start",
- width: "100%",
- borderRadius: "3px"
- }), FileListIconWrapperSkeleton = styled.div(({ theme }) => ({
- width: "14px",
- height: "14px",
- borderRadius: "3px",
- marginTop: "1px",
- background: theme.base === "dark" ? "rgba(255,255,255,.1)" : "rgba(0,0,0,.1)",
- animation: `${theme.animation.glow} 1.5s ease-in-out infinite`
- })), FileListItemSkeleton = styled.div(({ theme }) => ({
- height: "16px",
- borderRadius: "3px",
- background: theme.base === "dark" ? "rgba(255,255,255,.1)" : "rgba(0,0,0,.1)",
- animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
- width: "100%",
- maxWidth: "100%",
- "+ div": {
- marginTop: "6px"
- }
- })), FileSearchListLoadingSkeleton = () => react_default.createElement(FileList, null, [1, 2, 3].map((result) => react_default.createElement(FileListItem, { key: result }, react_default.createElement(FileListItemContentWrapperSkeleton, null, react_default.createElement(FileListIconWrapperSkeleton, null), react_default.createElement(FileListItemContentSkeleton, null, react_default.createElement(FileListItemSkeleton, { style: { width: "90px" } }), react_default.createElement(FileListItemSkeleton, { style: { width: "300px" } }))))));
-
- // src/manager/components/sidebar/FileSearchList.tsx
- var TreeExpandIconStyled = styled(ChevronSmallRightIcon)(({ theme }) => ({
- color: theme.textMutedColor,
- marginTop: 2
- })), TreeCollapseIconStyled = styled(ChevronSmallDownIcon)(({ theme }) => ({
- color: theme.textMutedColor,
- marginTop: 2
- })), FileSearchList = memo(function({
- isLoading,
- searchResults,
- onNewStory,
- errorItemId
- }) {
- let [selectedItem, setSelectedItem] = useState(null), parentRef = react_default.useRef(), sortedSearchResults = useMemo(() => [...searchResults ?? []].sort((a2, b2) => {
- let isALowPriority = a2.exportedComponents === null || a2.exportedComponents?.length === 0, hasAStory = a2.storyFileExists, isBLowPriority = b2.exportedComponents === null || b2.exportedComponents?.length === 0, hasBStory = b2.storyFileExists;
- return hasAStory && !hasBStory ? -1 : hasBStory && !hasAStory || isALowPriority && !isBLowPriority ? 1 : !isALowPriority && isBLowPriority ? -1 : 0;
- }), [searchResults]), count = searchResults?.length || 0, rowVirtualizer = useVirtualizer({
- count,
- // @ts-expect-error (non strict)
- getScrollElement: () => parentRef.current,
- paddingStart: 16,
- paddingEnd: 40,
- estimateSize: () => 54,
- overscan: 2
- });
- useArrowKeyNavigation({ rowVirtualizer, parentRef, selectedItem });
- let handleFileItemSelection = useCallback(
- ({ virtualItem, searchResult, itemId }) => {
- searchResult?.exportedComponents?.length > 1 ? setSelectedItem((sItem) => sItem === virtualItem.index ? null : virtualItem.index) : searchResult?.exportedComponents?.length === 1 && onNewStory({
- componentExportName: searchResult.exportedComponents[0].name,
- componentFilePath: searchResult.filepath,
- componentIsDefaultExport: searchResult.exportedComponents[0].default,
- selectedItemId: itemId,
- componentExportCount: 1
- });
- },
- [onNewStory]
- ), handleFileItemComponentSelection = useCallback(
- ({ searchResult, component, id }) => {
- onNewStory({
- componentExportName: component.name,
- componentFilePath: searchResult.filepath,
- componentIsDefaultExport: component.default,
- selectedItemId: id,
- // @ts-expect-error (non strict)
- componentExportCount: searchResult.exportedComponents.length
- });
- },
- [onNewStory]
- ), ListItem2 = useCallback(
- ({
- virtualItem,
- selected,
- searchResult,
- noExports
- }) => {
- let itemError = errorItemId === searchResult.filepath, itemSelected = selected === virtualItem.index, tooltip = noExports ? "We can't evaluate exports for this file. Automatic story creation is disabled." : void 0;
- return react_default.createElement(
- FileListItem,
- {
- "aria-expanded": itemSelected,
- "aria-controls": `file-list-export-${virtualItem.index}`,
- id: `file-list-item-wrapper-${virtualItem.index}`
- },
- react_default.createElement(
- TooltipProvider,
- {
- tooltip: tooltip ? react_default.createElement(TooltipNote, { note: tooltip }) : void 0,
- placement: "top-start",
- delayHide: 100,
- delayShow: 200
- },
- react_default.createElement(
- FileListItemContentWrapper,
- {
- className: "file-list-item",
- selected: itemSelected,
- error: itemError,
- disabled: noExports
- },
- itemSelected ? react_default.createElement(TreeCollapseIconStyled, { size: 14 }) : react_default.createElement(TreeExpandIconStyled, { size: 14 }),
- react_default.createElement(FileListIconWrapper, { error: itemError }, react_default.createElement(ComponentIcon, null)),
- react_default.createElement(FileListItemContent, null, react_default.createElement(FileListItemLabel, { error: itemError }, searchResult.filepath.split("/").at(-1)), react_default.createElement(FileListItemPath, null, searchResult.filepath))
- )
- ),
- searchResult?.exportedComponents?.length > 1 && itemSelected && react_default.createElement(
- FileListExport,
- {
- role: "region",
- id: `file-list-export-${virtualItem.index}`,
- "aria-labelledby": `file-list-item-wrapper-${virtualItem.index}`,
- onClick: (e2) => {
- e2.stopPropagation();
- },
- onKeyUp: (e2) => {
- e2.key === "Enter" && e2.stopPropagation();
- }
- },
- searchResult.exportedComponents?.map((component, itemExportId) => {
- let itemExportError = errorItemId === `${searchResult.filepath}_${itemExportId}`, position = itemExportId === 0 ? "first" : (
- // @ts-expect-error (non strict)
- itemExportId === searchResult.exportedComponents.length - 1 ? "last" : "middle"
- );
- return react_default.createElement(
- FileListItemExport,
- {
- tabIndex: 0,
- "data-index-position": `${virtualItem.index}_${position}`,
- key: component.name,
- error: itemExportError,
- onClick: () => {
- handleFileItemComponentSelection({
- searchResult,
- component,
- id: `${searchResult.filepath}_${itemExportId}`
- });
- },
- onKeyUp: (event) => {
- event.key === "Enter" && handleFileItemComponentSelection({
- searchResult,
- component,
- id: `${searchResult.filepath}_${itemExportId}`
- });
- }
- },
- react_default.createElement(FileListItemExportName, null, react_default.createElement(BookmarkHollowIcon, null), component.default ? react_default.createElement(react_default.Fragment, null, react_default.createElement(FileListItemExportNameContentWithExport, null, searchResult.filepath.split("/").at(-1)?.split(".")?.at(0)), react_default.createElement(DefaultExport, null, "Default export")) : react_default.createElement(FileListItemExportNameContent, null, component.name))
- );
- })
- )
- );
- },
- [handleFileItemComponentSelection, errorItemId]
- );
- return isLoading && (searchResults === null || searchResults?.length === 0) ? react_default.createElement(FileSearchListLoadingSkeleton, null) : searchResults?.length === 0 ? react_default.createElement(NoResults, null, react_default.createElement("p", null, "We could not find any file with that name"), react_default.createElement(NoResultsDescription, null, "You may want to try using different keywords, check for typos, and adjust your filters")) : sortedSearchResults?.length > 0 ? react_default.createElement(FileListWrapper, null, react_default.createElement(FileList, { ref: parentRef }, react_default.createElement(
- FileListUl,
- {
- style: {
- height: `${rowVirtualizer.getTotalSize()}px`
- }
- },
- rowVirtualizer.getVirtualItems().map((virtualItem) => {
- let searchResult = sortedSearchResults[virtualItem.index], noExports = searchResult.exportedComponents === null || searchResult.exportedComponents?.length === 0, itemProps = {};
- return react_default.createElement(
- FileListLi,
- {
- key: virtualItem.key,
- "data-index": virtualItem.index,
- ref: rowVirtualizer.measureElement,
- onClick: () => {
- handleFileItemSelection({
- virtualItem,
- itemId: searchResult.filepath,
- searchResult
- });
- },
- onKeyUp: (event) => {
- event.key === "Enter" && handleFileItemSelection({
- virtualItem,
- itemId: searchResult.filepath,
- searchResult
- });
- },
- style: {
- position: "absolute",
- top: 0,
- left: 0,
- width: "100%",
- transform: `translateY(${virtualItem.start}px)`
- },
- tabIndex: 0
- },
- react_default.createElement(
- ListItem2,
- {
- ...itemProps,
- key: virtualItem.index,
- searchResult,
- selected: selectedItem,
- virtualItem,
- noExports
- }
- )
- );
- })
- ))) : null;
- });
-
- // src/manager/components/sidebar/FileSearchModal.tsx
- var MODAL_HEIGHT = 418, ModalStyled = styled(Modal)(() => ({
- boxShadow: "none",
- background: "transparent",
- overflow: "visible"
- })), ModalChild = styled.div(({ theme, height }) => ({
- backgroundColor: theme.background.bar,
- borderRadius: 6,
- boxShadow: "rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 18px -10px",
- padding: "16px",
- transition: "height 0.3s",
- height: height ? `${height + 32}px` : "auto",
- overflow: "hidden"
- })), ModalContent = styled(Modal.Content)(({ theme }) => ({
- margin: 0,
- color: theme.color.defaultText
- })), ModalInput = styled(Form.Input)(({ theme }) => ({
- paddingLeft: 40,
- paddingRight: 28,
- fontSize: 14,
- height: 40,
- ...theme.base === "light" && {
- color: theme.color.darkest
- },
- "::placeholder": {
- color: theme.color.mediumdark
- },
- "&:invalid:not(:placeholder-shown)": {
- boxShadow: `${theme.color.negative} 0 0 0 1px inset`
- },
- "&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration": {
- display: "none"
- }
- })), SearchField = styled.div({
- display: "flex",
- flexDirection: "column",
- flexGrow: 1,
- position: "relative"
- }), SearchIconWrapper = styled.div(({ theme }) => ({
- position: "absolute",
- top: 0,
- left: 16,
- zIndex: 1,
- pointerEvents: "none",
- color: theme.darkest,
- display: "flex",
- alignItems: "center",
- height: "100%"
- })), LoadingIcon = styled.div(({ theme }) => ({
- position: "absolute",
- top: 0,
- right: 16,
- zIndex: 1,
- color: theme.darkest,
- display: "flex",
- alignItems: "center",
- height: "100%",
- "@keyframes spin": {
- from: { transform: "rotate(0deg)" },
- to: { transform: "rotate(360deg)" }
- },
- animation: "spin 1s linear infinite"
- })), ModalError = styled(Modal.Error)({
- position: "absolute",
- padding: "8px 40px 8px 16px",
- bottom: 0,
- maxHeight: "initial",
- width: "100%",
- div: {
- wordBreak: "break-word"
- },
- "> div": {
- padding: 0
- }
- }), ModalErrorCloseIcon = styled(CloseAltIcon)({
- position: "absolute",
- top: 4,
- right: -24,
- cursor: "pointer"
- }), FileSearchModal = ({
- open,
- onOpenChange,
- fileSearchQuery,
- setFileSearchQuery,
- isLoading,
- error,
- searchResults,
- onCreateNewStory,
- setError
- }) => {
- let [modalContentRef, modalContentDimensions] = useMeasure(), [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height), [, startTransition2] = useTransition(), [searchInputValue, setSearchInputValue] = useState(fileSearchQuery);
- return useEffect(() => {
- modalMaxHeight < modalContentDimensions.height && setModalMaxHeight(modalContentDimensions.height);
- }, [modalContentDimensions.height, modalMaxHeight]), react_default.createElement(
- ModalStyled,
- {
- ariaLabel: "Add a new story",
- height: MODAL_HEIGHT,
- width: 440,
- open,
- onOpenChange
- },
- react_default.createElement(ModalChild, { height: fileSearchQuery === "" ? modalContentDimensions.height : modalMaxHeight }, react_default.createElement(ModalContent, { ref: modalContentRef }, react_default.createElement(Modal.Header, null, react_default.createElement(Modal.Title, null, "Add a new story"), react_default.createElement(Modal.Description, null, "We will create a new story for your component")), react_default.createElement(SearchField, null, react_default.createElement(SearchIconWrapper, null, react_default.createElement(SearchIcon, null)), react_default.createElement(
- ModalInput,
- {
- placeholder: "./components/**/*.tsx",
- type: "search",
- required: !0,
- autoFocus: !0,
- value: searchInputValue,
- onChange: (e2) => {
- let newValue = e2.target.value;
- setSearchInputValue(newValue), startTransition2(() => {
- setFileSearchQuery(newValue);
- });
- }
- }
- ), isLoading && react_default.createElement(LoadingIcon, null, react_default.createElement(SyncIcon, null))), react_default.createElement(
- FileSearchList,
- {
- errorItemId: error?.selectedItemId,
- isLoading,
- searchResults,
- onNewStory: onCreateNewStory
- }
- ))),
- error && fileSearchQuery !== "" && react_default.createElement(ModalError, null, react_default.createElement("div", null, error.error), react_default.createElement(
- ModalErrorCloseIcon,
- {
- onClick: () => {
- setError(null);
- }
- }
- ))
- );
- };
-
- // src/manager/utils/trySelectStory.ts
- async function trySelectStory(selectStory, storyId, attempt = 1) {
- if (attempt > 10)
- throw new Error("We could not select the new story. Please try again.");
- try {
- selectStory(storyId);
- } catch {
- return await new Promise((resolve) => setTimeout(resolve, 500)), trySelectStory(selectStory, storyId, attempt + 1);
- }
- }
-
- // src/manager/components/sidebar/CreateNewStoryFileModal.tsx
- var isRendererReact = scope.STORYBOOK_RENDERER === "react", CreateNewStoryFileModal = ({ open, onOpenChange }) => {
- let [isLoading, setLoading] = useState(!1), [fileSearchQuery, setFileSearchQuery] = useState(""), fileSearchQueryDebounced = useDebounce(fileSearchQuery, 600), fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced), emittedValue = useRef(null), [error, setError] = useState(
- null
- ), api = useStorybookApi(), hasRunGhostStoriesFlow = useRef(!1), [searchResults, setSearchResults] = useState(null), handleSuccessfullyCreatedStory = useCallback(
- (componentExportName) => {
- api.addNotification({
- id: "create-new-story-file-success",
- content: {
- headline: "Story file created",
- subHeadline: `${componentExportName} was created`
- },
- duration: 8e3,
- icon: react_default.createElement(CheckIcon, null)
- }), onOpenChange(!1);
- },
- [api, onOpenChange]
- ), handleStoryAlreadyExists = useCallback(() => {
- api.addNotification({
- id: "create-new-story-file-error",
- content: {
- headline: "Story already exists",
- subHeadline: "Successfully navigated to existing story"
- },
- duration: 8e3,
- icon: react_default.createElement(CheckIcon, null)
- }), onOpenChange(!1);
- }, [api, onOpenChange]), handleFileSearch = useCallback(() => {
- setLoading(!0);
- let channel = addons.getChannel(), set = (data) => {
- data.id === fileSearchQueryDeferred && (data.success ? setSearchResults(data.payload.files) : setError({ error: data.error }), channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set), setLoading(!1), emittedValue.current = null);
- };
- return channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set), fileSearchQueryDeferred !== "" && emittedValue.current !== fileSearchQueryDeferred ? (emittedValue.current = fileSearchQueryDeferred, channel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
- id: fileSearchQueryDeferred,
- payload: {}
- })) : (setSearchResults(null), setLoading(!1)), () => {
- channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set);
- };
- }, [fileSearchQueryDeferred]), handleCreateNewStory = useCallback(
- async ({
- componentExportName,
- componentFilePath,
- componentIsDefaultExport,
- componentExportCount,
- selectedItemId
- }) => {
- try {
- let channel = addons.getChannel(), createNewStoryResult = await experimental_requestResponse(channel, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, {
- componentExportName,
- componentFilePath,
- componentIsDefaultExport,
- componentExportCount
- });
- setError(null);
- let storyId = createNewStoryResult.storyId;
- await trySelectStory(api.selectStory, storyId), handleSuccessfullyCreatedStory(componentExportName), handleFileSearch();
- } catch (e2) {
- switch (e2?.payload?.type) {
- case "STORY_FILE_EXISTS":
- let err = e2;
- await trySelectStory(api.selectStory, err.payload.kind), handleStoryAlreadyExists();
- break;
- default:
- setError({ selectedItemId, error: e2?.message });
- break;
- }
- }
- },
- [api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch, handleStoryAlreadyExists]
- );
- useEffect(() => {
- setError(null);
- }, [fileSearchQueryDeferred]), useEffect(() => handleFileSearch(), [handleFileSearch]);
- let executeGhostStoriesFlow = useCallback(async () => {
- addons.getChannel().emit(GHOST_STORIES_REQUEST);
- }, []);
- return useEffect(() => {
- open && isRendererReact && !hasRunGhostStoriesFlow.current && (hasRunGhostStoriesFlow.current = !0, executeGhostStoriesFlow());
- }, [open, executeGhostStoriesFlow]), react_default.createElement(
- FileSearchModal,
- {
- error,
- fileSearchQuery,
- fileSearchQueryDeferred,
- onCreateNewStory: handleCreateNewStory,
- isLoading,
- onOpenChange,
- open,
- searchResults,
- setError,
- setFileSearchQuery
- }
- );
- };
-
- // src/manager/components/sidebar/Explorer.tsx
- init_react();
-
- // src/manager/components/sidebar/HighlightStyles.tsx
- init_react();
- var HighlightStyles = ({ refId, itemId }) => react_default.createElement(
- Global,
- {
- styles: ({ color: color2 }) => {
- let background2 = curriedTransparentize$1(0.85, color2.secondary);
- return {
- [`[data-ref-id="${refId}"][data-item-id="${itemId}"]:not([data-selected="true"])`]: {
- '&[data-nodetype="component"], &[data-nodetype="group"]': {
- background: background2,
- "&:hover, &:focus": { background: background2 }
- },
- '&[data-nodetype="story"], &[data-nodetype="document"], &[data-nodetype="test"]': {
- color: color2.defaultText,
- background: background2,
- "&:hover, &:focus": { background: background2 }
- }
- }
- };
- }
- }
- );
-
- // src/manager/components/sidebar/Refs.tsx
- init_react();
-
- // src/shared/utils/story-index-filters.ts
- var getActiveFilterCount = ({
- includedTagFilters,
- excludedTagFilters,
- includedStatusFilters,
- excludedStatusFilters
- }) => (includedTagFilters?.length ?? 0) + (excludedTagFilters?.length ?? 0) + (includedStatusFilters?.length ?? 0) + (excludedStatusFilters?.length ?? 0);
-
- // src/manager/utils/tree.ts
- var import_memoizerific3 = __toESM(require_memoizerific(), 1);
- var { document: document3, window: globalWindow } = scope, createId = (itemId, refId) => !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`, getLink = (item, refId) => `${document3.location.pathname}?path=/${item.type}/${createId(item.id, refId)}`;
- var get = (0, import_memoizerific3.default)(1e3)((id, dataset) => dataset[id]), getParent = (0, import_memoizerific3.default)(1e3)((id, dataset) => {
- let item = get(id, dataset);
- return item && item.type !== "root" ? get(item.parent, dataset) : void 0;
- }), getParents = (0, import_memoizerific3.default)(1e3)((id, dataset) => {
- let parent = getParent(id, dataset);
- return parent ? [parent, ...getParents(parent.id, dataset)] : [];
- }), getAncestorIds2 = (0, import_memoizerific3.default)(1e3)(
- (data, id) => getParents(id, data).map((item) => item.id)
- ), getDescendantIds = (0, import_memoizerific3.default)(1e3)((data, id, skipLeafs) => {
- let entry = data[id];
- return !entry || !("children" in entry) || !entry.children ? [] : entry.children.reduce((acc, childId) => {
- let child = data[childId];
- return !child || skipLeafs && (child.type === "story" || child.type === "docs") || acc.push(childId, ...getDescendantIds(data, childId, skipLeafs)), acc;
- }, []);
- });
- function getPath(item, ref) {
- let parent = item.type !== "root" && item.parent ? ref.index[item.parent] : null;
- return parent ? [...getPath(parent, ref), parent.name] : ref.id === DEFAULT_REF_ID ? [] : [ref.title || ref.id];
- }
- var searchItem = (item, ref) => ({ ...item, refId: ref.id, path: getPath(item, ref) });
- function cycle2(array, index, delta) {
- let next = index + delta % array.length;
- return next < 0 && (next = array.length + next), next >= array.length && (next -= array.length), next;
- }
- var scrollIntoView = (element, center = !1) => {
- if (!element)
- return;
- let { top, bottom } = element.getBoundingClientRect();
- if (!top || !bottom)
- return;
- let bottomOffset = document3?.querySelector("#sidebar-bottom-wrapper")?.getBoundingClientRect().top || globalWindow.innerHeight || document3.documentElement.clientHeight;
- bottom > bottomOffset && element.scrollIntoView({ block: center ? "center" : "nearest" });
- }, getStateType = (isLoading, isAuthRequired, isError2, isEmpty) => {
- switch (!0) {
- case isAuthRequired:
- return "auth";
- case isError2:
- return "error";
- case isLoading:
- return "loading";
- case isEmpty:
- return "empty";
- default:
- return "ready";
- }
- }, isAncestor = (element, maybeAncestor) => !element || !maybeAncestor ? !1 : element === maybeAncestor ? !0 : isAncestor(element.parentElement || void 0, maybeAncestor), removeNoiseFromName = (storyName) => storyName.replaceAll(/(\s|-|_)/gi, ""), isStoryHoistable = (storyName, componentName) => removeNoiseFromName(storyName) === removeNoiseFromName(componentName);
-
- // src/manager/components/sidebar/RefBlocks.tsx
- init_react();
-
- // src/manager/components/sidebar/Loader.tsx
- init_react();
- var LOADER_SEQUENCE = [0, 0, 1, 1, 2, 3, 3, 3, 1, 1, 1, 2, 2, 2, 3], Loadingitem = styled.div(
- {
- cursor: "progress",
- fontSize: 13,
- height: "16px",
- marginTop: 4,
- marginBottom: 4,
- alignItems: "center",
- overflow: "hidden"
- },
- ({ depth = 0 }) => ({
- marginLeft: depth * 15,
- maxWidth: 85 - depth * 5
- }),
- ({ theme }) => theme.animation.inlineGlow,
- ({ theme }) => ({
- background: theme.appBorderColor
- })
- ), Contained = styled.div({
- display: "flex",
- flexDirection: "column",
- paddingLeft: 20,
- paddingRight: 20
- }), Loader2 = ({ size }) => {
- let repeats = Math.ceil(size / LOADER_SEQUENCE.length), sequence = Array.from(Array(repeats)).fill(LOADER_SEQUENCE).flat().slice(0, size);
- return react_default.createElement(Fragment, null, sequence.map((depth, index) => react_default.createElement(Loadingitem, { depth, key: index })));
- };
-
- // src/manager/components/sidebar/NoResults.tsx
- var NoResults2 = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- textAlign: "center",
- textWrap: "balance",
- gap: 4,
- padding: "20px 0",
- lineHeight: "18px",
- fontSize: `${theme.typography.size.s2}px`,
- color: theme.color.defaultText,
- small: {
- color: theme.textMutedColor,
- fontSize: `${theme.typography.size.s1}px`
- },
- button: {
- marginTop: 8,
- alignSelf: "center"
- }
- }));
-
- // src/manager/components/sidebar/RefBlocks.tsx
- var { window: globalWindow2 } = scope, TextStyle = styled.div(({ theme }) => ({
- fontSize: theme.typography.size.s2,
- lineHeight: "20px",
- margin: 0
- })), Text3 = styled.div(({ theme }) => ({
- fontSize: theme.typography.size.s2,
- lineHeight: "20px",
- margin: 0,
- code: {
- fontSize: theme.typography.size.s1
- },
- ul: {
- paddingLeft: 20,
- marginTop: 8,
- marginBottom: 8
- }
- })), ErrorDisplay = styled.pre(
- {
- boxSizing: "border-box",
- borderRadius: 8,
- overflow: "auto",
- whiteSpace: "pre"
- },
- ({ isMobile: isMobile2 }) => isMobile2 ? {
- maxWidth: "calc(100vw - 40px)"
- } : {
- minWidth: 420,
- maxWidth: 640
- },
- ({ theme }) => ({
- color: theme.color.dark
- })
- ), AuthBlock = ({ loginUrl, id }) => {
- let [isAuthAttempted, setAuthAttempted] = useState(!1), refresh = useCallback(() => {
- globalWindow2.document.location.reload();
- }, []), open = useCallback((e2) => {
- e2.preventDefault();
- let childWindow = globalWindow2.open(loginUrl, `storybook_auth_${id}`, "resizable,scrollbars"), timer = setInterval(() => {
- childWindow ? childWindow.closed && (clearInterval(timer), setAuthAttempted(!0)) : (logger.error("unable to access loginUrl window"), clearInterval(timer));
- }, 1e3);
- }, []);
- return react_default.createElement(Contained, null, react_default.createElement(Spaced, null, isAuthAttempted ? react_default.createElement(Fragment, null, react_default.createElement(Text3, null, "Authentication on ", react_default.createElement("strong", null, loginUrl), " concluded. Refresh the page to fetch this Storybook."), react_default.createElement("div", null, react_default.createElement(Button, { ariaLabel: !1, size: "small", variant: "outline", onClick: refresh }, react_default.createElement(SyncIcon, null), "Refresh now"))) : react_default.createElement(Fragment, null, react_default.createElement(Text3, null, "Sign in to browse this Storybook."), react_default.createElement("div", null, react_default.createElement(Button, { size: "small", variant: "outline", onClick: open }, react_default.createElement(LockIcon, null), "Sign in")))));
- }, ErrorBlock = ({ error }) => {
- let { isMobile: isMobile2 } = useLayout();
- return react_default.createElement(Contained, null, react_default.createElement(Spaced, null, react_default.createElement(TextStyle, null, "Oh no! Something went wrong loading this Storybook.", react_default.createElement("br", null), react_default.createElement(
- PopoverProvider,
- {
- ariaLabel: "Error details",
- hasCloseButton: !0,
- offset: isMobile2 ? 0 : 8,
- placement: isMobile2 ? "bottom-end" : "bottom-start",
- popover: react_default.createElement(ErrorDisplay, { isMobile: isMobile2 }, react_default.createElement(ErrorFormatter, { error }))
- },
- react_default.createElement(Link, null, "View error ", react_default.createElement(ChevronDownIcon, null))
- ), " ", react_default.createElement(Link, { href: "https://storybook.js.org/docs?ref=ui", cancel: !1, target: "_blank" }, "View docs"))));
- }, FlexSpaced = styled(Spaced)({
- display: "flex"
- }), WideSpaced = styled(Spaced)({
- flex: 1
- }), EmptyBlock = ({
- isMain,
- hasEntries,
- activeFilterCount
- }) => {
- let api = useStorybookApi();
- return react_default.createElement(Contained, null, react_default.createElement(FlexSpaced, { col: 1 }, react_default.createElement(WideSpaced, null, hasEntries ? react_default.createElement(NoResults2, null, react_default.createElement("strong", null, "No stories found"), activeFilterCount > 0 ? react_default.createElement("small", null, "Your selected filters did not match any stories.") : react_default.createElement("small", null, "Try adding some stories!"), activeFilterCount > 0 ? react_default.createElement(
- Button,
- {
- ariaLabel: !1,
- size: "small",
- variant: "outline",
- onClick: async () => {
- await api.setAllTagFilters([], []), await api.resetStatusFilters();
- }
- },
- react_default.createElement(SweepIcon, null),
- "Clear filters"
- ) : null) : isMain ? react_default.createElement(Text3, null, "Oh no! Your Storybook is empty. This can happen when:", react_default.createElement("ul", null, react_default.createElement("li", null, "Your", " ", react_default.createElement(
- Link,
- {
- href: "https://storybook.js.org/docs/api/main-config/main-config-stories?ref=ui",
- cancel: !1,
- target: "_blank"
- },
- "stories glob configuration"
- ), " ", "does not match any files.", " "), react_default.createElement("li", null, "You have", " ", react_default.createElement(
- Link,
- {
- href: "https://storybook.js.org/docs/writing-stories?ref=ui",
- cancel: !1,
- target: "_blank"
- },
- "no stories defined"
- ), " ", "in your story files.", " "))) : react_default.createElement(Text3, null, "This composed Storybook is empty. Perhaps no stories match your selected filters."))));
- }, LoaderBlock = ({ isMain }) => react_default.createElement(Contained, null, react_default.createElement(Loader2, { size: isMain ? 17 : 5 }));
-
- // src/manager/components/sidebar/RefIndicator.tsx
- init_react();
- var { document: document4, window: globalWindow3 } = scope, IndicatorPlacement = styled.div(({ theme }) => ({
- height: 16,
- display: "flex",
- alignItems: "center",
- "& > * + *": {
- marginLeft: theme.layoutMargin
- }
- })), IndicatorClickTarget = styled(Button)(({ theme }) => ({
- color: theme.textMutedColor,
- svg: {
- height: 14,
- width: 14,
- padding: 2,
- transition: "all 150ms ease-out",
- color: "inherit"
- }
- })), MessageTitle = styled.span(({ theme }) => ({
- fontWeight: theme.typography.weight.bold
- })), StyledMessage = styled.a(({ theme }) => ({
- textDecoration: "none",
- lineHeight: "16px",
- padding: 15,
- display: "flex",
- flexDirection: "row",
- alignItems: "flex-start",
- color: theme.color.defaultText,
- "&:not(:last-child)": {
- borderBottom: `1px solid ${theme.appBorderColor}`
- },
- "&:hover": {
- background: theme.background.hoverable,
- color: theme.color.defaultText
- },
- "&:link, &:active, &:focus": {
- color: theme.color.defaultText
- },
- "&:focus-visible": {
- background: theme.background.hoverable,
- borderRadius: 8,
- boxShadow: `inset 0 0 0 2px ${theme.color.secondary}`,
- outline: "none"
- },
- "& > *": {
- flex: 1
- },
- "& > svg": {
- marginTop: 3,
- width: 16,
- height: 16,
- marginRight: 10,
- flex: "unset"
- }
- })), Message = ({ href, blank = !0, children, onClick }) => react_default.createElement(StyledMessage, { href, target: blank ? "_blank" : void 0, onClick }, children), MessageWrapper = styled.div(
- ({ isMobile: isMobile2 }) => ({
- width: isMobile2 ? "calc(100vw - 20px)" : 280,
- boxSizing: "border-box",
- borderRadius: 8,
- overflow: "hidden"
- }),
- ({ theme }) => ({
- color: theme.color.dark
- })
- ), SubtleSelect = styled(Select)(({ theme }) => ({
- background: "transparent",
- color: theme.color.defaultText,
- fontSize: theme.typography.size.s1,
- fontWeight: theme.typography.weight.regular
- })), RefIndicator = react_default.memo(
- forwardRef(
- ({ state, ...ref }, forwardedRef) => {
- let api = useStorybookApi(), { isMobile: isMobile2 } = useLayout(), list = useMemo(() => Object.values(ref.index || {}), [ref.index]), componentCount = useMemo(
- () => list.filter((v2) => v2.type === "component").length,
- [list]
- ), leafCount = useMemo(
- () => list.filter((v2) => v2.type === "docs" || v2.type === "story").length,
- [list]
- ), currentVersion = useMemo(() => {
- if (ref.versions)
- return Object.entries(ref.versions).find(([, v2]) => v2 === ref.url)?.[0];
- }, [ref.versions, ref.url]);
- return react_default.createElement(IndicatorPlacement, { ref: forwardedRef }, react_default.createElement(
- PopoverProvider,
- {
- ariaLabel: "Composed Storybook status",
- placement: isMobile2 ? "bottom" : "bottom-start",
- padding: 0,
- popover: () => react_default.createElement(MessageWrapper, { isMobile: isMobile2 }, react_default.createElement(Spaced, { row: 0 }, state === "loading" && react_default.createElement(LoadingMessage, { url: ref.url }), (state === "error" || state === "empty") && react_default.createElement(ErrorOccurredMessage, { url: ref.url }), state === "ready" && react_default.createElement(react_default.Fragment, null, react_default.createElement(ReadyMessage, { url: ref.url, componentCount, leafCount }), ref.sourceUrl && react_default.createElement(SourceCodeMessage, { url: ref.sourceUrl })), state === "auth" && react_default.createElement(LoginRequiredMessage, { ...ref }), ref.type === "auto-inject" && state !== "error" && react_default.createElement(PerformanceDegradedMessage, null), state !== "loading" && react_default.createElement(ReadDocsMessage, null)))
- },
- react_default.createElement(
- IndicatorClickTarget,
- {
- variant: "ghost",
- padding: "small",
- size: "small",
- "data-action": "toggle-indicator",
- ariaLabel: "Extra actions"
- },
- react_default.createElement(GlobeIcon, null)
- )
- ), ref.versions && Object.keys(ref.versions).length ? react_default.createElement(react_default.Fragment, null, react_default.createElement(
- SubtleSelect,
- {
- padding: "small",
- size: "small",
- ariaLabel: "Version",
- tooltip: "Choose version",
- defaultOptions: currentVersion,
- onSelect: (item) => {
- let href = ref.versions?.[item];
- href && api.changeRefVersion(ref.id, href);
- },
- options: Object.entries(ref.versions).map(([id, href]) => ({
- value: id,
- title: id,
- href
- }))
- },
- "version"
- )) : null);
- }
- )
- ), ReadyMessage = ({ url, componentCount, leafCount }) => {
- let theme = useTheme();
- return react_default.createElement(Message, { href: url.replace(/\/?$/, "/index.html") }, react_default.createElement(GlobeIcon, { color: theme.color.secondary }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "View external Storybook"), react_default.createElement("div", null, "Explore ", componentCount, " components and ", leafCount, " stories in a new browser tab.")));
- }, SourceCodeMessage = ({ url }) => {
- let theme = useTheme();
- return react_default.createElement(Message, { href: url }, react_default.createElement(MarkupIcon, { color: theme.color.secondary }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "View source code")));
- }, LoginRequiredMessage = ({ loginUrl, id }) => {
- let theme = useTheme(), open = useCallback(
- (e2) => {
- e2.preventDefault();
- let childWindow = globalWindow3.open(
- loginUrl,
- `storybook_auth_${id}`,
- "resizable,scrollbars"
- ), timer = setInterval(() => {
- childWindow ? childWindow.closed && (clearInterval(timer), document4.location.reload()) : clearInterval(timer);
- }, 1e3);
- },
- [id, loginUrl]
- );
- return react_default.createElement(Message, { onClick: open, blank: !1 }, react_default.createElement(LockIcon, { color: theme.color.gold }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Log in required"), react_default.createElement("div", null, "You need to authenticate to view this Storybook's components.")));
- }, ReadDocsMessage = () => {
- let theme = useTheme();
- return react_default.createElement(Message, { href: "https://storybook.js.org/docs/sharing/storybook-composition?ref=ui" }, react_default.createElement(DocumentIcon, { color: theme.color.green }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Read Composition docs"), react_default.createElement("div", null, "Learn how to combine multiple Storybooks into one.")));
- }, ErrorOccurredMessage = ({ url }) => {
- let theme = useTheme();
- return react_default.createElement(Message, { href: url.replace(/\/?$/, "/index.html") }, react_default.createElement(AlertIcon, { color: theme.color.negative }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Something went wrong"), react_default.createElement("div", null, "This external Storybook didn't load. Debug it in a new tab now.")));
- }, LoadingMessage = ({ url }) => {
- let theme = useTheme();
- return react_default.createElement(Message, { href: url.replace(/\/?$/, "/index.html") }, react_default.createElement(TimeIcon, { color: theme.color.secondary }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Please wait"), react_default.createElement("div", null, "This Storybook is loading.")));
- }, PerformanceDegradedMessage = () => {
- let theme = useTheme();
- return react_default.createElement(Message, { href: "https://storybook.js.org/docs/sharing/storybook-composition?ref=ui" }, react_default.createElement(LightningIcon, { color: theme.color.gold }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Reduce lag"), react_default.createElement("div", null, "Learn how to speed up Composition performance.")));
- };
-
- // src/manager/components/sidebar/Tree.tsx
- init_react();
-
- // src/manager/utils/status.tsx
- init_react();
- var import_memoizerific4 = __toESM(require_memoizerific(), 1);
-
- // src/manager/components/sidebar/IconSymbols.tsx
- init_react();
- var Svg2 = styled.svg`
- position: absolute;
- width: 0;
- height: 0;
- display: inline-block;
- shape-rendering: inherit;
- vertical-align: middle;
- `, GROUP_ID = "icon--group", COMPONENT_ID = "icon--component", DOCUMENT_ID = "icon--document", STORY_ID = "icon--story", TEST_ID = "icon--test", SUCCESS_ID = "icon--success", ERROR_ID = "icon--error", WARNING_ID = "icon--warning", DOT_ID = "icon--dot", NEW_ID = "icon--new", MODIFIED_ID = "icon--modified", AFFECTED_ID = "icon--affected", IconSymbols = () => react_default.createElement(Svg2, { "data-chromatic": "ignore" }, react_default.createElement("symbol", { id: GROUP_ID }, react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M6.586 3.504l-1.5-1.5H1v9h12v-7.5H6.586zm.414-1L5.793 1.297a1 1 0 00-.707-.293H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-8.5a.5.5 0 00-.5-.5H7z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: COMPONENT_ID }, react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M3.5 1.004a2.5 2.5 0 00-2.5 2.5v7a2.5 2.5 0 002.5 2.5h7a2.5 2.5 0 002.5-2.5v-7a2.5 2.5 0 00-2.5-2.5h-7zm8.5 5.5H7.5v-4.5h3a1.5 1.5 0 011.5 1.5v3zm0 1v3a1.5 1.5 0 01-1.5 1.5h-3v-4.5H12zm-5.5 4.5v-4.5H2v3a1.5 1.5 0 001.5 1.5h3zM2 6.504h4.5v-4.5h-3a1.5 1.5 0 00-1.5 1.5v3z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: DOCUMENT_ID }, react_default.createElement(
- "path",
- {
- d: "M4 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM4.5 7.5a.5.5 0 000 1h5a.5.5 0 000-1h-5zM4 10.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z",
- fill: "currentColor"
- }
- ), react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M1.5 0a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V3.207a.5.5 0 00-.146-.353L10.146.146A.5.5 0 009.793 0H1.5zM2 1h7.5v2a.5.5 0 00.5.5h2V13H2V1z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: STORY_ID }, react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M3.5 0h7a.5.5 0 01.5.5v13a.5.5 0 01-.454.498.462.462 0 01-.371-.118L7 11.159l-3.175 2.72a.46.46 0 01-.379.118A.5.5 0 013 13.5V.5a.5.5 0 01.5-.5zM4 12.413l2.664-2.284a.454.454 0 01.377-.128.498.498 0 01.284.12L10 12.412V1H4v11.413z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: TEST_ID }, react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M4.5 2h.75v3.866l-3.034 5.26A1.25 1.25 0 003.299 13H10.7a1.25 1.25 0 001.083-1.875L8.75 5.866V2h.75a.5.5 0 100-1h-5a.5.5 0 000 1zm1.75 4V2h1.5v4.134l.067.116L8.827 8H5.173l1.01-1.75.067-.116V6zM4.597 9l-1.515 2.625A.25.25 0 003.3 12H10.7a.25.25 0 00.217-.375L9.404 9H4.597z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: SUCCESS_ID }, react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M10.854 4.146a.5.5 0 010 .708l-5 5a.5.5 0 01-.708 0l-2-2a.5.5 0 11.708-.708L5.5 8.793l4.646-4.647a.5.5 0 01.708 0z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: ERROR_ID }, react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M7 4a3 3 0 100 6 3 3 0 000-6zM3 7a4 4 0 118 0 4 4 0 01-8 0z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: WARNING_ID }, react_default.createElement(
- "path",
- {
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M7.206 3.044a.498.498 0 01.23.212l3.492 5.985a.494.494 0 01.006.507.497.497 0 01-.443.252H3.51a.499.499 0 01-.437-.76l3.492-5.984a.497.497 0 01.642-.212zM7 4.492L4.37 9h5.26L7 4.492z",
- fill: "currentColor"
- }
- )), react_default.createElement("symbol", { id: DOT_ID }, react_default.createElement("circle", { cx: "3", cy: "3", r: "3", fill: "currentColor" })), react_default.createElement("symbol", { id: NEW_ID }, react_default.createElement(
- "path",
- {
- d: "M7 3.5L6.96971 3.68173C6.68873 5.36762 5.36762 6.68873 3.68173 6.96971L3.5 7",
- stroke: "currentColor",
- strokeLinecap: "round",
- fill: "none"
- }
- ), react_default.createElement(
- "path",
- {
- d: "M7 3.5L7.03029 3.68173C7.31127 5.36762 8.63238 6.68873 10.3183 6.96971L10.5 7",
- stroke: "currentColor",
- strokeLinecap: "round",
- fill: "none"
- }
- ), react_default.createElement(
- "path",
- {
- d: "M7 10.5L6.96971 10.3183C6.68873 8.63238 5.36762 7.31127 3.68173 7.03029L3.5 7",
- stroke: "currentColor",
- strokeLinecap: "round",
- fill: "none"
- }
- ), react_default.createElement(
- "path",
- {
- d: "M7 10.5L7.03029 10.3183C7.31127 8.63238 8.63238 7.31127 10.3183 7.03029L10.5 7",
- stroke: "currentColor",
- strokeLinecap: "round",
- fill: "none"
- }
- ), react_default.createElement("path", { d: "M7 4.5L4.5 7L7 9.5L9.5 7L7 4.5Z", fill: "currentColor" })), react_default.createElement("symbol", { id: MODIFIED_ID }, react_default.createElement("circle", { cx: "7", cy: "7", r: "3", fill: "currentColor" })), react_default.createElement("symbol", { id: AFFECTED_ID }, react_default.createElement("circle", { cx: "7", cy: "7", r: "3", fill: "currentColor" }))), UseSymbol = ({ type }) => type === "group" ? react_default.createElement("use", { xlinkHref: `#${GROUP_ID}` }) : type === "component" ? react_default.createElement("use", { xlinkHref: `#${COMPONENT_ID}` }) : type === "document" ? react_default.createElement("use", { xlinkHref: `#${DOCUMENT_ID}` }) : type === "story" ? react_default.createElement("use", { xlinkHref: `#${STORY_ID}` }) : type === "test" ? react_default.createElement("use", { xlinkHref: `#${TEST_ID}` }) : type === "success" ? react_default.createElement("use", { xlinkHref: `#${SUCCESS_ID}` }) : type === "error" ? react_default.createElement("use", { xlinkHref: `#${ERROR_ID}` }) : type === "warning" ? react_default.createElement("use", { xlinkHref: `#${WARNING_ID}` }) : type === "dot" ? react_default.createElement("use", { xlinkHref: `#${DOT_ID}` }) : type === "new" ? react_default.createElement("use", { xlinkHref: `#${NEW_ID}` }) : type === "modified" ? react_default.createElement("use", { xlinkHref: `#${MODIFIED_ID}` }) : type === "affected" ? react_default.createElement("use", { xlinkHref: `#${AFFECTED_ID}` }) : null;
-
- // src/manager/utils/status.tsx
- var SmallIcons = styled(CircleIcon)({
- // specificity hack
- "&&&": {
- width: 6,
- height: 6
- }
- }), LoadingIcons = styled(SmallIcons)(({ theme: { animation } }) => ({
- // specificity hack
- animation: `${animation.glow} 1.5s ease-in-out infinite`
- })), statusPriority = [
- "status-value:unknown",
- "status-value:pending",
- "status-value:success",
- "status-value:affected",
- "status-value:modified",
- "status-value:new",
- "status-value:warning",
- "status-value:error"
- ], getStatus = (0, import_memoizerific4.default)(10)((theme, status) => {
- let defaultIconColor = theme.base === "light" ? curriedTransparentize$1(0.3, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText);
- return {
- "status-value:unknown": {
- icon: null,
- iconColor: defaultIconColor,
- textColor: null
- },
- "status-value:pending": {
- icon: react_default.createElement(LoadingIcons, { key: "icon" }),
- iconColor: defaultIconColor,
- textColor: "currentColor"
- },
- "status-value:success": {
- icon: react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "success" })),
- iconColor: theme.color.positive,
- textColor: "currentColor"
- },
- "status-value:new": {
- icon: react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "new" })),
- iconColor: theme.fgColor.accent,
- textColor: null
- },
- "status-value:modified": {
- icon: react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "modified" })),
- iconColor: theme.fgColor.accent,
- textColor: null
- },
- "status-value:affected": {
- icon: react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "affected" })),
- iconColor: theme.fgColor.accent,
- textColor: null
- },
- "status-value:warning": {
- icon: react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "warning" })),
- iconColor: theme.color.warning,
- textColor: theme.fgColor.warning
- },
- "status-value:error": {
- icon: react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "error" })),
- iconColor: theme.color.negative,
- textColor: theme.fgColor.negative
- }
- }[status];
- });
- function getChangeDetectionStatus(statuses) {
- let changeValues = Object.values(statuses).filter((status) => status.typeId === CHANGE_DETECTION_STATUS_TYPE_ID).map((status) => status.value), testValues = Object.values(statuses).filter((status) => status.typeId !== CHANGE_DETECTION_STATUS_TYPE_ID).map((status) => status.value);
- return {
- changeStatus: getMostCriticalStatusValue(changeValues),
- testStatus: getMostCriticalStatusValue(testValues)
- };
- }
- var getMostCriticalStatusValue = (statusValues) => statusPriority.reduce(
- (acc, value) => statusValues.includes(value) ? value : acc,
- "status-value:unknown"
- );
- function getGroupStatus(collapsedData, allStatuses) {
- return Object.values(collapsedData).reduce((acc, item) => {
- if (item.type === "group" || item.type === "component" || item.type === "story") {
- let leafs = getDescendantIds(collapsedData, item.id, !1).map((id) => collapsedData[id]).filter((i2) => i2.type === "story"), combinedStatus = getMostCriticalStatusValue(
- // @ts-expect-error (non strict)
- leafs.flatMap((story) => Object.values(allStatuses[story.id] || {})).map((s2) => s2.value)
- );
- combinedStatus && (acc[item.id] = combinedStatus);
- }
- return acc;
- }, {});
- }
- function getGroupDualStatus(collapsedData, allStatuses) {
- return Object.values(collapsedData).reduce((acc, item) => {
- if (item.type === "group" || item.type === "component" || item.type === "story") {
- let allDescendantStatuses = getDescendantIds(collapsedData, item.id, !1).map((id) => collapsedData[id]).filter((i2) => i2.type === "story").flatMap(
- (story) => Object.values(allStatuses[story.id] || {})
- ), changeValues = allDescendantStatuses.filter((s2) => s2.typeId === CHANGE_DETECTION_STATUS_TYPE_ID).map((s2) => s2.value), testValues = allDescendantStatuses.filter((s2) => s2.typeId !== CHANGE_DETECTION_STATUS_TYPE_ID).map((s2) => s2.value);
- acc[item.id] = {
- change: getMostCriticalStatusValue(changeValues),
- test: getMostCriticalStatusValue(testValues)
- };
- }
- return acc;
- }, {});
- }
-
- // src/manager/components/sidebar/ContextMenu.tsx
- init_react();
-
- // src/manager/components/sidebar/StatusButton.tsx
- init_react();
- var withStatusColor = ({ theme, status }) => ({
- color: getStatus(theme, status).iconColor ?? void 0
- }), StatusLabel = styled.div(withStatusColor, {
- margin: 3
- }), StyledButton = styled(Button)(
- withStatusColor,
- ({ theme, height, width }) => ({
- transition: "none",
- display: "inline-flex",
- alignItems: "center",
- justifyContent: "center",
- width: width || 28,
- height: height || 28,
- "&:hover": {
- color: theme.color.secondary,
- background: theme.base === "dark" ? curriedDarken$1(0.3, theme.color.secondary) : curriedLighten$1(0.4, theme.color.secondary)
- },
- '[data-selected="true"] &': {
- background: theme.base === "dark" ? curriedDarken$1(0.18, theme.color.secondary) : theme.color.secondary,
- boxShadow: `0 0 5px 5px ${theme.base === "dark" ? curriedDarken$1(0.18, theme.color.secondary) : theme.color.secondary}`,
- "&:hover": {
- background: theme.base === "dark" ? curriedDarken$1(0.1, theme.color.secondary) : theme.color.secondary
- }
- },
- "&:focus": {
- color: theme.color.secondary,
- borderColor: theme.color.secondary,
- outlineOffset: -2,
- "&:not(:focus-visible)": {
- borderColor: "transparent"
- }
- }
- }),
- ({ theme, selectedItem }) => selectedItem && {
- "&:hover": {
- boxShadow: `inset 0 0 0 2px ${theme.color.secondary}`,
- background: "rgba(255, 255, 255, 0.2)"
- }
- }
- ), StatusButton = forwardRef((props, ref) => react_default.createElement(StyledButton, { variant: "ghost", padding: "small", ...props, ref }));
- StatusButton.displayName = "StatusButton";
-
- // src/manager/components/sidebar/StatusContext.tsx
- init_react();
- var StatusContext = createContext({});
-
- // src/manager/components/sidebar/ContextMenu.tsx
- var empty = {
- onMouseEnter: () => {
- },
- node: null
- }, FloatingStatusButton = styled(StatusButton)({
- background: "var(--tree-node-background-hover)",
- boxShadow: "0 0 5px 5px var(--tree-node-background-hover)",
- position: "absolute",
- right: 0,
- zIndex: 1,
- "&:focus-visible": {
- outlineOffset: -2
- }
- }), useContextMenu = (context, links, api) => {
- let [hoverCount, setHoverCount] = useState(0), [isOpen, setIsOpen] = useState(!1), { allStatuses, groupStatus } = useContext(StatusContext), exportName = context && "exportName" in context ? context.exportName ?? "" : "", { children: copyText, buttonProps: copyButtonProps } = useCopyButton({
- children: "Copy story name",
- content: exportName
- }), shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, topLinks = useMemo(() => {
- let defaultLinks = [];
- return context && "importPath" in context && context.importPath && defaultLinks.push({
- id: "open-in-editor",
- title: "Open in editor",
- icon: react_default.createElement(EditorIcon, null),
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.openInEditor }) : null,
- onClick: (e2) => {
- context.importPath && (e2.preventDefault(), api.openInEditor({ file: context.importPath }));
- }
- }), context.type === "story" && defaultLinks.push({
- id: "copy-story-name",
- title: copyText,
- icon: react_default.createElement(CopyIcon, null),
- // TODO: bring this back once we want to add shortcuts for this
- // right:
- // enableShortcuts && shortcutKeys.copyStoryName ? (
- // <Shortcut keys={shortcutKeys.copyStoryName} />
- // ) : null,
- onClick: (e2) => {
- e2.preventDefault(), copyButtonProps.onClick(e2);
- }
- }), defaultLinks;
- }, [api, context, copyText, copyButtonProps, enableShortcuts, shortcutKeys]), handlers = useMemo(() => ({
- onMouseEnter: () => {
- setHoverCount((c2) => c2 + 1);
- },
- onOpen: (event) => {
- event.stopPropagation(), setIsOpen(!0);
- },
- onClose: () => {
- setIsOpen(!1);
- }
- }), []), providerLinks = useMemo(() => {
- let registeredTestProviders = api.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER);
- return hoverCount ? generateTestProviderLinks(registeredTestProviders, context) : [];
- }, [api, context, hoverCount]), shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0), isLeafNode = context.type === "story" || context.type === "docs", itemStatus = useMemo(() => {
- let status = "status-value:unknown";
- if (!context)
- return status;
- if (isLeafNode) {
- let values = Object.values(allStatuses?.[context.id] || {}).map((s2) => s2.value);
- status = getMostCriticalStatusValue(values);
- }
- if (!isLeafNode) {
- let groupValue = groupStatus && groupStatus[context.id];
- status = groupValue === "status-value:success" || groupValue === void 0 ? "status-value:unknown" : groupValue;
- }
- return status;
- }, [allStatuses, groupStatus, context, isLeafNode]), MenuIcon2 = useMemo(() => context.type !== "story" && context.type !== "docs" ? itemStatus !== "status-value:success" && itemStatus !== "status-value:unknown" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6" }, react_default.createElement(UseSymbol, { type: "dot" })) : react_default.createElement(EllipsisIcon, null) : itemStatus === "status-value:error" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "error" })) : itemStatus === "status-value:warning" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "warning" })) : itemStatus === "status-value:success" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "success" })) : react_default.createElement(EllipsisIcon, null), [itemStatus, context.type]);
- return useMemo(() => globalThis.CONFIG_TYPE !== "DEVELOPMENT" ? empty : {
- onMouseEnter: handlers.onMouseEnter,
- node: shouldRender ? react_default.createElement(
- PopoverProvider,
- {
- ariaLabel: "Context menu",
- placement: "bottom-end",
- defaultVisible: !1,
- visible: isOpen,
- onVisibleChange: setIsOpen,
- popover: react_default.createElement(LiveContextMenu, { context, links: [...topLinks, ...links] }),
- hasChrome: !0,
- padding: 0
- },
- react_default.createElement(
- FloatingStatusButton,
- {
- "data-displayed": isOpen ? "on" : "off",
- "data-testid": "context-menu",
- ariaLabel: "Open context menu",
- type: "button",
- status: itemStatus,
- onClick: handlers.onOpen
- },
- MenuIcon2
- )
- ) : null
- }, [context, handlers, isOpen, shouldRender, links, topLinks, itemStatus, MenuIcon2]);
- }, LiveContextMenu = ({
- context,
- links,
- ...rest2
- }) => {
- let registeredTestProviders = useStorybookApi().getElements(
- Addon_TypesEnum.experimental_TEST_PROVIDER
- ), providerLinks = generateTestProviderLinks(registeredTestProviders, context), all = (Array.isArray(links[0]) || links.length === 0 ? links : [links]).concat([providerLinks]);
- return react_default.createElement(TooltipLinkList, { ...rest2, links: all });
- };
- function generateTestProviderLinks(registeredTestProviders, context) {
- return Object.entries(registeredTestProviders).map(([testProviderId, state]) => {
- if (!state)
- return null;
- let content = state.sidebarContextMenu?.({ context });
- return content ? {
- id: testProviderId,
- content
- } : null;
- }).filter(Boolean);
- }
-
- // src/manager/components/sidebar/TreeNode.tsx
- init_react();
-
- // src/manager/components/sidebar/components/CollapseIcon.tsx
- init_react();
- var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
- width: 8,
- height: 8,
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- transform: isExpanded ? "rotateZ(90deg)" : "none",
- transition: "transform .1s ease-out",
- color: theme.textMutedColor
- })), CollapseIcon2 = (props) => react_default.createElement(CollapseIconWrapper, { ...props }, react_default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", fill: "none" }, react_default.createElement(
- "path",
- {
- fill: "currentColor",
- fillRule: "evenodd",
- clipRule: "evenodd",
- d: "M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z"
- }
- )));
-
- // src/manager/components/sidebar/TreeNode.tsx
- var TypeIcon2 = styled.svg(
- ({ theme, type }) => ({
- width: 14,
- height: 14,
- flex: "0 0 auto",
- color: type === "group" ? theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet : type === "component" ? theme.color.secondary : type === "document" ? theme.base === "dark" ? theme.color.gold : "#ff8300" : type === "story" ? theme.color.seafoam : type === "test" ? theme.color.green : "currentColor"
- })
- ), commonNodeStyles = ({
- theme,
- depth = 0,
- isExpandable = !1
- }) => ({
- flex: 1,
- width: "100%",
- cursor: "pointer",
- display: "flex",
- alignItems: "start",
- textAlign: "left",
- textDecoration: "none",
- border: "none",
- color: "inherit",
- fontSize: `${theme.typography.size.s2}px`,
- fontWeight: "inherit",
- background: "transparent",
- minHeight: 28,
- borderRadius: 4,
- gap: 6,
- paddingLeft: `${(isExpandable ? 8 : 22) + depth * 18}px`,
- paddingTop: 5,
- paddingBottom: 4,
- paddingRight: 6,
- overflowWrap: "break-word",
- wordWrap: "break-word",
- wordBreak: "break-word"
- }), BranchNode = styled.button(commonNodeStyles), LeafNode = styled.a(commonNodeStyles), RootNode = styled.div({
- display: "flex",
- alignItems: "center",
- justifyContent: "space-between",
- marginTop: 16,
- marginBottom: 4,
- "&:first-of-type": {
- marginTop: 0
- }
- }), Wrapper5 = styled.div({
- display: "flex",
- alignItems: "center",
- gap: 6,
- marginTop: 2
- }), GroupNode = react_default.memo(function({
- children,
- isExpanded = !1,
- isExpandable = !1,
- ...props
- }) {
- return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper5, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "group" }, react_default.createElement(UseSymbol, { type: "group" }))), children);
- }), ComponentNode = react_default.memo(
- function({
- theme,
- children,
- isExpanded = !1,
- isExpandable = !1,
- isSelected,
- ...props
- }) {
- return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper5, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "component" }, react_default.createElement(UseSymbol, { type: "component" }))), children);
- }
- ), DocumentNode = react_default.memo(function({ theme, children, docsMode, ...props }) {
- return react_default.createElement(LeafNode, { tabIndex: -1, rel: "canonical", ...props }, react_default.createElement(Wrapper5, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), children);
- }), StoryBranchNode = react_default.memo(
- function({
- theme,
- children,
- isExpandable = !1,
- isExpanded = !1,
- isSelected,
- ...props
- }) {
- return react_default.createElement(BranchNode, { isExpandable, tabIndex: -1, ...props }, react_default.createElement(Wrapper5, null, isExpandable && react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "story" }, react_default.createElement(UseSymbol, { type: "story" }))), children);
- }
- ), StoryLeafNode = react_default.memo(function({
- theme,
- children,
- ...props
- }) {
- return react_default.createElement(LeafNode, { tabIndex: -1, rel: "canonical", ...props }, react_default.createElement(Wrapper5, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "story" }, react_default.createElement(UseSymbol, { type: "story" }))), children);
- }), TestNode = react_default.memo(function({
- theme,
- children,
- ...props
- }) {
- return react_default.createElement(LeafNode, { tabIndex: -1, rel: "canonical", ...props }, react_default.createElement(Wrapper5, null, react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "12", height: "12", type: "test" }, react_default.createElement(UseSymbol, { type: "test" }))), children);
- });
-
- // src/manager/components/sidebar/useExpanded.ts
- init_react();
-
- // src/manager/keybinding.ts
- var codeToKeyMap = {
- // event.code => event.key
- Space: " ",
- Slash: "/",
- ArrowLeft: "ArrowLeft",
- ArrowUp: "ArrowUp",
- ArrowRight: "ArrowRight",
- ArrowDown: "ArrowDown",
- Escape: "Escape",
- Enter: "Enter"
- }, allFalse = { alt: !1, ctrl: !1, meta: !1, shift: !1 }, matchesModifiers = (modifiers2, event) => {
- let { alt, ctrl, meta, shift: shift2 } = modifiers2 === !1 ? allFalse : modifiers2;
- return !(typeof alt == "boolean" && alt !== event.altKey || typeof ctrl == "boolean" && ctrl !== event.ctrlKey || typeof meta == "boolean" && meta !== event.metaKey || typeof shift2 == "boolean" && shift2 !== event.shiftKey);
- }, matchesKeyCode = (code, event) => event.code ? event.code === code : event.key === codeToKeyMap[code];
-
- // src/manager/components/sidebar/useExpanded.ts
- var { document: document5 } = scope, initializeExpanded = ({
- refId,
- data,
- initialExpanded,
- highlightedRef,
- rootIds,
- selectedStoryId
- }) => {
- let selectedStory = selectedStoryId && data[selectedStoryId], candidates = [...rootIds];
- return highlightedRef.current?.refId === refId && candidates.push(...getAncestorIds2(data, highlightedRef.current?.itemId)), selectedStory && "children" in selectedStory && selectedStory.children?.length && candidates.push(selectedStoryId), candidates.reduce(
- // @ts-expect-error (non strict)
- (acc, id) => Object.assign(acc, { [id]: id in initialExpanded ? initialExpanded[id] : !0 }),
- {}
- );
- }, noop3 = () => {
- }, useExpanded = ({
- containerRef,
- isBrowsing,
- refId,
- data,
- initialExpanded,
- rootIds,
- highlightedRef,
- setHighlightedItemId,
- selectedStoryId,
- onSelectStoryId
- }) => {
- let api = useStorybookApi(), [expanded, setExpanded] = useReducer(
- (state, { ids, value }) => ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
- // @ts-expect-error (non strict)
- { refId, data, highlightedRef, rootIds, initialExpanded, selectedStoryId },
- initializeExpanded
- ), getElementByDataItemId = useCallback(
- (id) => containerRef.current?.querySelector(`[data-item-id="${id}"]`),
- [containerRef]
- ), highlightElement = useCallback(
- (element) => {
- setHighlightedItemId(element.getAttribute("data-item-id")), scrollIntoView(element);
- },
- [setHighlightedItemId]
- ), updateExpanded = useCallback(
- ({ ids, value }) => {
- if (setExpanded({ ids, value }), ids.length === 1) {
- let element = containerRef.current?.querySelector(
- `[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`
- );
- element && highlightElement(element);
- }
- },
- [containerRef, highlightElement, refId]
- );
- useEffect(() => {
- setExpanded({ ids: getAncestorIds2(data, selectedStoryId), value: !0 });
- }, [data, selectedStoryId]);
- let collapseAll = useCallback(() => {
- let ids = Object.keys(data).filter((id) => !rootIds.includes(id));
- setExpanded({ ids, value: !1 });
- }, [data, rootIds]), expandAll = useCallback(() => {
- setExpanded({ ids: Object.keys(data), value: !0 });
- }, [data]);
- return useEffect(() => api ? (api.on(STORIES_COLLAPSE_ALL, collapseAll), api.on(STORIES_EXPAND_ALL, expandAll), () => {
- api.off(STORIES_COLLAPSE_ALL, collapseAll), api.off(STORIES_EXPAND_ALL, expandAll);
- }) : noop3, [api, collapseAll, expandAll]), useEffect(() => {
- let menuElement = document5.getElementById("storybook-explorer-menu"), navigateTree = throttle((event) => {
- let highlightedItemId = highlightedRef.current?.refId === refId && highlightedRef.current?.itemId;
- if (!isBrowsing || !containerRef.current || !highlightedItemId || event.repeat || !matchesModifiers(!1, event))
- return;
- let isEnter = matchesKeyCode("Enter", event), isSpace = matchesKeyCode("Space", event), isArrowLeft = matchesKeyCode("ArrowLeft", event), isArrowRight = matchesKeyCode("ArrowRight", event);
- if (!(isEnter || isSpace || isArrowLeft || isArrowRight))
- return;
- let highlightedElement = getElementByDataItemId(highlightedItemId);
- if (!highlightedElement || highlightedElement.getAttribute("data-ref-id") !== refId)
- return;
- let target = event.target;
- if (!isAncestor(menuElement, target) && !isAncestor(target, menuElement))
- return;
- if (target.hasAttribute("data-action")) {
- if (isEnter || isSpace)
- return;
- target.blur();
- }
- let type = highlightedElement.getAttribute("data-nodetype");
- type && (isEnter || isSpace) && ["component", "story", "document", "test"].includes(type) && onSelectStoryId(highlightedItemId);
- let isExpanded = highlightedElement.getAttribute("aria-expanded");
- if (isArrowLeft) {
- if (isExpanded === "true") {
- setExpanded({ ids: [highlightedItemId], value: !1 });
- return;
- }
- let parentId = highlightedElement.getAttribute("data-parent-id"), parentElement = parentId && getElementByDataItemId(parentId);
- if (parentElement && parentElement.getAttribute("data-highlightable") === "true") {
- highlightElement(parentElement);
- return;
- }
- setExpanded({ ids: getDescendantIds(data, highlightedItemId, !0), value: !1 });
- return;
- }
- isArrowRight && (isExpanded === "false" ? updateExpanded({ ids: [highlightedItemId], value: !0 }) : isExpanded === "true" && updateExpanded({ ids: getDescendantIds(data, highlightedItemId, !0), value: !0 }));
- }, 60);
- return document5.addEventListener("keydown", navigateTree), () => document5.removeEventListener("keydown", navigateTree);
- }, [
- containerRef,
- isBrowsing,
- refId,
- data,
- highlightedRef,
- setHighlightedItemId,
- onSelectStoryId
- ]), [expanded, updateExpanded];
- };
-
- // src/manager/components/sidebar/Tree.tsx
- var CollapseButton = styled(Button)(({ theme }) => ({
- fontSize: `${theme.typography.size.s1 - 1}px`,
- fontWeight: theme.typography.weight.bold,
- letterSpacing: "0.16em",
- textTransform: "uppercase",
- color: theme.textMutedColor,
- padding: "0 8px"
- })), LeafNodeStyleWrapper = styled.div(({ theme }) => ({
- position: "relative",
- display: "flex",
- justifyContent: "space-between",
- alignItems: "flex-start",
- color: theme.color.defaultText,
- background: "transparent",
- minHeight: 28,
- borderRadius: 4,
- overflow: "hidden",
- "--tree-node-background-hover": theme.background.content,
- [MEDIA_DESKTOP_BREAKPOINT]: {
- "--tree-node-background-hover": theme.background.app
- },
- "&:hover, &:focus": {
- "--tree-node-background-hover": theme.background.hoverable,
- background: "var(--tree-node-background-hover)",
- outline: "none"
- },
- '& [data-displayed="off"]': {
- visibility: "hidden"
- },
- '&:hover [data-displayed="off"]': {
- visibility: "visible"
- },
- '& [data-displayed="on"] + *': {
- visibility: "hidden"
- },
- '&:hover [data-displayed="off"] + *': {
- visibility: "hidden"
- },
- '&[data-selected="true"]': {
- color: theme.color.lightest,
- background: theme.base === "dark" ? curriedDarken$1(0.18, theme.color.secondary) : theme.color.secondary,
- fontWeight: theme.typography.weight.bold,
- "&&:hover, &&:focus": {
- background: theme.base === "dark" ? curriedDarken$1(0.18, theme.color.secondary) : theme.color.secondary
- },
- svg: { color: theme.color.lightest }
- },
- a: { color: "currentColor" }
- })), SkipToContentLink = styled(Button)(({ theme }) => ({
- display: "none",
- "@media (min-width: 600px)": {
- display: "block",
- fontSize: "10px",
- overflow: "hidden",
- width: 1,
- height: "20px",
- boxSizing: "border-box",
- opacity: 0,
- padding: 0,
- "&:focus": {
- opacity: 1,
- padding: "5px 10px",
- background: "white",
- color: theme.color.secondary,
- width: "auto"
- }
- }
- })), StatusSlots = styled.div({
- display: "flex",
- alignItems: "center"
- });
- var getStatusLabel = (status) => status.split(":")[1].replace(/^./, (char) => char.toUpperCase()), Node2 = react_default.memo(function(props) {
- let {
- item,
- statuses,
- groupDualStatus,
- refId,
- docsMode,
- isOrphan,
- isDisplayed,
- isSelected,
- isFullyExpanded,
- setFullyExpanded,
- isExpanded,
- setExpanded,
- onSelectStoryId,
- api,
- isModifiedFilterActive
- } = props, theme = useTheme(), { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout(), statusLinks = useMemo(() => item.type === "story" || item.type === "docs" ? Object.entries(statuses).filter(([, status]) => status.sidebarContextMenu !== !1).sort((a2, b2) => statusPriority.indexOf(a2[1].value) - statusPriority.indexOf(b2[1].value)).map(([typeId, status]) => ({
- id: typeId,
- title: status.title,
- description: status.description,
- "aria-label": `Test status for ${status.title}: ${status.value}`,
- icon: getStatus(theme, status.value).icon,
- onClick: () => {
- onSelectStoryId(item.id), internal_fullStatusStore.selectStatuses([status]);
- }
- })) : [], [item.id, item.type, onSelectStoryId, statuses, theme]), contextMenu = useContextMenu(item, statusLinks, api);
- refId !== "storybook_internal" && (contextMenu = { node: null, onMouseEnter: () => {
- } });
- let id = createId(item.id, refId);
- if (item.type === "story" && !("children" in item && item.children) && (!("subtype" in item) || item.subtype !== "test") || item.type === "docs") {
- let LeafNode3 = item.type === "docs" ? DocumentNode : StoryLeafNode, { changeStatus, testStatus } = getChangeDetectionStatus(statuses || {}), leafChangeIcon = changeStatus === "status-value:unknown" || changeStatus === "status-value:affected" || changeStatus === "status-value:modified" && !isModifiedFilterActive ? null : getStatus(theme, changeStatus).icon, { icon: testIcon } = getStatus(theme, testStatus), overallStoryStatus = getMostCriticalStatusValue([changeStatus, testStatus]), { textColor } = getStatus(theme, overallStoryStatus);
- return react_default.createElement(
- LeafNodeStyleWrapper,
- {
- key: id,
- className: "sidebar-item",
- "data-selected": isSelected,
- "data-ref-id": refId,
- "data-item-id": item.id,
- "data-parent-id": item.parent,
- "data-nodetype": item.type === "docs" ? "document" : "story",
- "data-highlightable": isDisplayed,
- onMouseEnter: contextMenu.onMouseEnter
- },
- react_default.createElement(
- LeafNode3,
- {
- style: isSelected ? {} : { color: textColor },
- href: getLink(item, refId),
- id,
- depth: isOrphan ? item.depth : item.depth - 1,
- onClick: (event) => {
- event.preventDefault(), onSelectStoryId(item.id), isMobile2 && setMobileMenuOpen(!1);
- },
- ...item.type === "docs" && { docsMode }
- },
- item.renderLabel?.(item, api) || item.name
- ),
- isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
- contextMenu.node,
- leafChangeIcon && testIcon ? react_default.createElement(StatusSlots, null, react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Change status: ${getStatusLabel(changeStatus)}`,
- "data-testid": "tree-change-status-button",
- type: "button",
- status: changeStatus,
- selectedItem: isSelected
- },
- leafChangeIcon
- ), react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Test status: ${getStatusLabel(testStatus)}`,
- "data-testid": "tree-status-button",
- type: "button",
- status: testStatus,
- selectedItem: isSelected
- },
- testIcon
- )) : leafChangeIcon ? react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Change status: ${getStatusLabel(changeStatus)}`,
- "data-testid": "tree-change-status-button",
- type: "button",
- status: changeStatus,
- selectedItem: isSelected
- },
- leafChangeIcon
- ) : testIcon ? react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Test status: ${getStatusLabel(testStatus)}`,
- "data-testid": "tree-status-button",
- type: "button",
- status: testStatus,
- selectedItem: isSelected
- },
- testIcon
- ) : null
- );
- }
- if (item.type === "root")
- return react_default.createElement(
- RootNode,
- {
- key: id,
- id,
- className: "sidebar-subheading",
- "data-ref-id": refId,
- "data-item-id": item.id,
- "data-nodetype": "root"
- },
- react_default.createElement(
- CollapseButton,
- {
- variant: "ghost",
- ariaLabel: isExpanded ? "Collapse" : "Expand",
- "data-action": "collapse-root",
- onClick: (event) => {
- event.preventDefault(), setExpanded({ ids: [item.id], value: !isExpanded });
- },
- "aria-expanded": isExpanded
- },
- react_default.createElement(CollapseIcon2, { isExpanded }),
- item.renderLabel?.(item, api) || item.name
- ),
- isExpanded && react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- className: "sidebar-subheading-action",
- ariaLabel: isFullyExpanded ? "Collapse all" : "Expand all",
- "data-action": "expand-all",
- "data-expanded": isFullyExpanded,
- onClick: (event) => {
- event.preventDefault(), setFullyExpanded();
- }
- },
- isFullyExpanded ? react_default.createElement(CollapseIcon, null) : react_default.createElement(ExpandAltIcon, null)
- )
- );
- if (item.type === "component" || item.type === "group" || item.type === "story" && "children" in item && item.children) {
- let { children = [] } = item, BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryBranchNode }[item.type], { changeStatus: localChange, testStatus: localTest } = getChangeDetectionStatus(
- statuses || {}
- ), groupDual = groupDualStatus?.[item.id] || {
- change: "status-value:unknown",
- test: "status-value:unknown"
- }, branchChange = getMostCriticalStatusValue([localChange, groupDual.change]), branchTest = getMostCriticalStatusValue([localTest, groupDual.test]), branchChangeIcon = branchChange !== "status-value:unknown" && branchChange !== "status-value:affected" && (branchChange !== "status-value:modified" || isModifiedFilterActive) ? getStatus(theme, branchChange).icon : null, branchTestIcon = getStatus(theme, branchTest).icon, overallStatus = getMostCriticalStatusValue([branchChange, branchTest]), color2 = overallStatus ? getStatus(theme, overallStatus).textColor : null;
- return react_default.createElement(
- LeafNodeStyleWrapper,
- {
- key: id,
- className: "sidebar-item",
- "data-selected": isSelected,
- "data-ref-id": refId,
- "data-item-id": item.id,
- "data-parent-id": item.parent,
- "data-nodetype": item.type,
- "data-highlightable": isDisplayed,
- onMouseEnter: contextMenu.onMouseEnter
- },
- react_default.createElement(
- BranchNode2,
- {
- id,
- style: color2 && !isSelected ? { color: color2 } : {},
- "aria-controls": children.join(" "),
- "aria-expanded": isExpanded,
- depth: isOrphan ? item.depth : item.depth - 1,
- isExpandable: children.length > 0,
- isExpanded,
- onClick: (event) => {
- event.preventDefault(), item.type === "story" ? (onSelectStoryId(item.id), (!isExpanded || isSelected) && setExpanded({ ids: [item.id], value: !isExpanded })) : item.type === "component" ? (!isExpanded && isDesktop && onSelectStoryId(item.id), setExpanded({ ids: [item.id], value: !isExpanded })) : setExpanded({ ids: [item.id], value: !isExpanded });
- },
- onMouseEnter: () => {
- (item.type === "component" || item.type === "story") && api.emit(PRELOAD_ENTRIES, {
- ids: [children[0]],
- options: { target: refId }
- });
- }
- },
- item.renderLabel?.(item, api) || item.name
- ),
- isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
- contextMenu.node,
- branchChangeIcon && branchTestIcon ? react_default.createElement(StatusSlots, null, react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Change status: ${getStatusLabel(branchChange)}`,
- "data-testid": "tree-change-status-button",
- type: "button",
- status: branchChange,
- selectedItem: isSelected
- },
- branchChangeIcon
- ), react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Test status: ${getStatusLabel(branchTest)}`,
- "data-testid": "tree-status-button",
- type: "button",
- status: branchTest,
- selectedItem: isSelected
- },
- branchTestIcon
- )) : branchChangeIcon ? react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Change status: ${getStatusLabel(branchChange)}`,
- "data-testid": "tree-change-status-button",
- type: "button",
- status: branchChange,
- selectedItem: isSelected
- },
- branchChangeIcon
- ) : branchTestIcon ? react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Test status: ${getStatusLabel(branchTest)}`,
- "data-testid": "tree-status-button",
- type: "button",
- status: branchTest,
- selectedItem: isSelected
- },
- branchTestIcon
- ) : null
- );
- }
- let isTest = item.type === "story" && item.subtype === "test", LeafNode2 = isTest ? TestNode : { docs: DocumentNode, story: StoryLeafNode }[item.type], nodeType = isTest ? "test" : { docs: "document", story: "story" }[item.type], leafStatuses = Object.fromEntries(
- Object.entries(statuses || {}).filter(
- ([, status]) => status.typeId !== CHANGE_DETECTION_STATUS_TYPE_ID || status.value === "status-value:new"
- )
- ), leafStatus = getMostCriticalStatusValue(Object.values(leafStatuses).map((s2) => s2.value)), { icon: leafIcon, textColor: leafColor } = getStatus(theme, leafStatus), leafStatusButton = leafIcon ? react_default.createElement(
- StatusButton,
- {
- ariaLabel: `Status: ${getStatusLabel(leafStatus)}`,
- "data-testid": "tree-status-button",
- role: "status",
- type: "button",
- status: leafStatus,
- selectedItem: isSelected
- },
- leafIcon
- ) : null;
- return react_default.createElement(
- LeafNodeStyleWrapper,
- {
- key: id,
- className: "sidebar-item",
- "data-selected": isSelected,
- "data-ref-id": refId,
- "data-item-id": item.id,
- "data-parent-id": item.parent,
- "data-nodetype": nodeType,
- "data-highlightable": isDisplayed,
- onMouseEnter: contextMenu.onMouseEnter
- },
- react_default.createElement(
- LeafNode2,
- {
- style: leafColor && !isSelected ? { color: leafColor } : {},
- href: getLink(item, refId),
- id,
- depth: isOrphan ? item.depth : item.depth - 1,
- onClick: (event) => {
- event.preventDefault(), onSelectStoryId(item.id), isMobile2 && setMobileMenuOpen(!1);
- }
- },
- item.renderLabel?.(item, api) || item.name
- ),
- isSelected && react_default.createElement(SkipToContentLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
- contextMenu.node,
- leafStatusButton
- );
- }), Root = react_default.memo(function({
- setExpanded,
- isFullyExpanded,
- expandableDescendants,
- ...props
- }) {
- let setFullyExpanded = useCallback(
- () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
- [setExpanded, isFullyExpanded, expandableDescendants]
- );
- return react_default.createElement(
- Node2,
- {
- ...props,
- setExpanded,
- isFullyExpanded,
- setFullyExpanded
- }
- );
- }), Tree = react_default.memo(function({
- isBrowsing,
- refId,
- data,
- allStatuses,
- docsMode,
- highlightedRef,
- setHighlightedItemId,
- selectedStoryId,
- onSelectStoryId
- }) {
- let containerRef = useRef(null), api = useStorybookApi(), isModifiedFilterActive = (useStorybookState().includedStatusFilters ?? []).includes("status-value:modified"), [rootIds, orphanIds, initialExpanded] = useMemo(
- () => Object.keys(data).reduce(
- (acc, id) => {
- let item = data[id];
- return item.type === "root" ? acc[0].push(id) : item.parent || acc[1].push(id), item.type === "root" && item.startCollapsed && (acc[2][id] = !1), acc;
- },
- [[], [], {}]
- ),
- [data]
- ), { expandableDescendants } = useMemo(() => [...orphanIds, ...rootIds].reduce(
- (acc, nodeId) => (acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, !1).filter(
- (d2) => !["story", "docs"].includes(data[d2].type)
- ), acc),
- { orphansFirst: [], expandableDescendants: {} }
- ), [data, rootIds, orphanIds]), singleStoryComponentIds = useMemo(() => Object.keys(data).filter((id) => {
- let entry = data[id];
- if (entry.type !== "component")
- return !1;
- let { children = [], name } = entry;
- if (children.length !== 1)
- return !1;
- let onlyChild = data[children[0]];
- return onlyChild.type === "docs" ? !0 : onlyChild.type === "story" && onlyChild.subtype === "story" ? isStoryHoistable(onlyChild.name, name) : !1;
- }), [data]), collapsedItems = useMemo(
- () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
- [data, singleStoryComponentIds]
- ), collapsedData = useMemo(() => singleStoryComponentIds.reduce(
- (acc, id) => {
- let { children, parent, name } = data[id], [childId] = children;
- if (parent) {
- let siblings = [...data[parent].children];
- siblings[siblings.indexOf(id)] = childId, acc[parent] = { ...data[parent], children: siblings };
- }
- return acc[childId] = {
- ...data[childId],
- name,
- parent,
- depth: data[childId].depth - 1
- }, acc;
- },
- { ...data }
- ), [data, singleStoryComponentIds]), ancestry = useMemo(() => collapsedItems.reduce(
- (acc, id) => Object.assign(acc, { [id]: getAncestorIds2(collapsedData, id) }),
- {}
- ), [collapsedItems, collapsedData]), [expanded, setExpanded] = useExpanded({
- // @ts-expect-error (non strict)
- containerRef,
- isBrowsing,
- refId,
- data: collapsedData,
- initialExpanded,
- rootIds,
- highlightedRef,
- setHighlightedItemId,
- selectedStoryId,
- onSelectStoryId
- }), groupStatus = useMemo(
- () => getGroupStatus(collapsedData, allStatuses ?? {}),
- [collapsedData, allStatuses]
- ), groupDualStatus = useMemo(
- () => getGroupDualStatus(collapsedData, allStatuses ?? {}),
- [collapsedData, allStatuses]
- ), treeItems = useMemo(() => collapsedItems.map((itemId) => {
- let item = collapsedData[itemId], id = createId(itemId, refId);
- if (item.type === "root") {
- let descendants = expandableDescendants[item.id], isFullyExpanded = descendants.every((d2) => expanded[d2]);
- return (
- // @ts-expect-error (TODO)
- react_default.createElement(
- Root,
- {
- api,
- key: id,
- item,
- refId,
- collapsedData,
- isOrphan: !1,
- isDisplayed: !0,
- isSelected: selectedStoryId === itemId,
- isExpanded: !!expanded[itemId],
- setExpanded,
- isFullyExpanded,
- expandableDescendants: descendants,
- onSelectStoryId,
- isModifiedFilterActive
- }
- )
- );
- }
- let isDisplayed = !item.parent || ancestry[itemId].every((a2) => expanded[a2]);
- return isDisplayed === !1 ? null : react_default.createElement(
- Node2,
- {
- api,
- collapsedData,
- key: id,
- item,
- statuses: allStatuses?.[itemId] ?? {},
- groupDualStatus,
- refId,
- docsMode,
- isOrphan: orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`)),
- isDisplayed,
- isSelected: selectedStoryId === itemId,
- isExpanded: !!expanded[itemId],
- setExpanded,
- onSelectStoryId,
- isModifiedFilterActive
- }
- );
- }), [
- ancestry,
- api,
- collapsedData,
- collapsedItems,
- docsMode,
- expandableDescendants,
- expanded,
- groupDualStatus,
- isModifiedFilterActive,
- onSelectStoryId,
- orphanIds,
- refId,
- selectedStoryId,
- setExpanded,
- allStatuses
- ]);
- return react_default.createElement(StatusContext.Provider, { value: { data, allStatuses, groupStatus } }, react_default.createElement("div", { ref: containerRef }, treeItems));
- });
-
- // src/manager/components/sidebar/Refs.tsx
- var Wrapper6 = styled.div(({ isMain }) => ({
- position: "relative",
- marginTop: isMain ? void 0 : 0
- })), RefHead = styled.div(({ theme }) => ({
- fontWeight: theme.typography.weight.bold,
- fontSize: theme.typography.size.s2,
- // Similar to ListItem.tsx
- textDecoration: "none",
- lineHeight: "16px",
- display: "flex",
- alignItems: "center",
- justifyContent: "space-between",
- background: "transparent",
- width: "100%",
- marginTop: 20,
- paddingTop: 16,
- paddingBottom: 12,
- borderTop: `1px solid ${theme.appBorderColor}`,
- color: theme.color.defaultText
- })), RefTitle = styled.div({
- textOverflow: "ellipsis",
- whiteSpace: "nowrap",
- flex: 1,
- overflow: "hidden",
- marginLeft: 2
- }), CollapseButton2 = styled.button(({ theme }) => ({
- all: "unset",
- display: "flex",
- padding: "0px 8px",
- gap: 6,
- alignItems: "center",
- cursor: "pointer",
- overflow: "hidden",
- "&:focus": {
- borderColor: theme.color.secondary,
- "span:first-of-type": {
- borderLeftColor: theme.color.secondary
- }
- }
- })), Ref = react_default.memo(function(props) {
- let storybookState = useStorybookState(), api = useStorybookApi(), {
- filteredIndex: index,
- id: refId,
- title: title2 = refId,
- isLoading: isLoadingMain,
- isBrowsing,
- hasEntries,
- selectedStoryId,
- highlightedRef,
- setHighlighted,
- loginUrl,
- type,
- expanded = !0,
- indexError,
- previewInitialized,
- allStatuses
- } = props, length = useMemo(() => index ? Object.keys(index).length : 0, [index]), indicatorRef = useRef(null), isMain = refId === DEFAULT_REF_ID, isLoading = isLoadingMain || (type === "auto-inject" && !previewInitialized || type === "server-checked") || type === "unknown", isError2 = !!indexError, isEmpty = !isLoading && length === 0, isAuthRequired = !!loginUrl && length === 0, activeFilterCount = getActiveFilterCount(storybookState), state = getStateType(isLoading, isAuthRequired, isError2, isEmpty), [isExpanded, setExpanded] = useState(expanded);
- useEffect(() => {
- index && selectedStoryId && index[selectedStoryId] && setExpanded(!0);
- }, [index, selectedStoryId]);
- let handleClick = useCallback(() => setExpanded((value) => !value), []), setHighlightedItemId = useCallback(
- (itemId) => setHighlighted({ itemId, refId }),
- [setHighlighted, refId]
- ), onSelectStoryId = useCallback(
- (storyId) => api?.selectStory(storyId, void 0, { ref: isMain ? void 0 : refId }),
- [api, isMain, refId]
- );
- return react_default.createElement(react_default.Fragment, null, isMain || react_default.createElement(
- RefHead,
- {
- "aria-label": `${isExpanded ? "Hide" : "Show"} ${title2} stories`,
- "aria-expanded": isExpanded
- },
- react_default.createElement(CollapseButton2, { "data-action": "collapse-ref", onClick: handleClick }, react_default.createElement(CollapseIcon2, { isExpanded }), react_default.createElement(RefTitle, { title: title2 }, title2)),
- react_default.createElement(RefIndicator, { ...props, state, ref: indicatorRef })
- ), isExpanded && react_default.createElement(Wrapper6, { "data-title": title2, isMain }, state === "auth" && react_default.createElement(AuthBlock, { id: refId, loginUrl }), state === "error" && react_default.createElement(ErrorBlock, { error: indexError }), state === "loading" && react_default.createElement(LoaderBlock, { isMain }), state === "empty" && react_default.createElement(
- EmptyBlock,
- {
- isMain,
- hasEntries,
- activeFilterCount
- }
- ), state === "ready" && react_default.createElement(
- Tree,
- {
- allStatuses,
- isBrowsing,
- isMain,
- refId,
- data: index,
- docsMode: storybookState.docsOptions.docsMode,
- selectedStoryId,
- onSelectStoryId,
- highlightedRef,
- setHighlightedItemId
- }
- )));
- });
-
- // src/manager/components/sidebar/useHighlighted.ts
- init_react();
- var { document: document6, window: globalWindow4 } = scope, fromSelection = (selection) => selection ? { itemId: selection.storyId, refId: selection.refId } : null, scrollToSelector = (selector, options2 = {}, _attempt = 1) => {
- let { containerRef, center = !1, attempts = 3, delay: delay2 = 500 } = options2, element = (containerRef ? containerRef.current : document6)?.querySelector(selector);
- element ? scrollIntoView(element, center) : _attempt <= attempts && setTimeout(scrollToSelector, delay2, selector, options2, _attempt + 1);
- }, useHighlighted = ({
- containerRef,
- isLoading,
- isBrowsing,
- selected
- }) => {
- let initialHighlight = fromSelection(selected), highlightedRef = useRef(initialHighlight), [highlighted, setHighlighted] = useState(initialHighlight), api = useStorybookApi(), updateHighlighted = useCallback(
- (highlight) => {
- highlightedRef.current = highlight, setHighlighted(highlight);
- },
- [highlightedRef]
- ), highlightElement = useCallback(
- (element, center = !1) => {
- let itemId = element.getAttribute("data-item-id"), refId = element.getAttribute("data-ref-id");
- !itemId || !refId || (updateHighlighted({ itemId, refId }), scrollIntoView(element, center));
- },
- [updateHighlighted]
- );
- return useEffect(() => {
- let highlight = fromSelection(selected);
- updateHighlighted(highlight), highlight && scrollToSelector(`[data-item-id="${highlight.itemId}"][data-ref-id="${highlight.refId}"]`, {
- containerRef,
- center: !0
- });
- }, [containerRef, selected, updateHighlighted]), useEffect(() => {
- let menuElement = document6.getElementById("storybook-explorer-menu"), lastRequestId, navigateTree = (event) => {
- if (isLoading || !isBrowsing || !containerRef.current || !matchesModifiers(!1, event))
- return;
- let isArrowUp = matchesKeyCode("ArrowUp", event), isArrowDown = matchesKeyCode("ArrowDown", event);
- if (!(isArrowUp || isArrowDown))
- return;
- let requestId = globalWindow4.requestAnimationFrame(() => {
- globalWindow4.cancelAnimationFrame(lastRequestId), lastRequestId = requestId;
- let target = event.target;
- if (!isAncestor(menuElement, target) && !isAncestor(target, menuElement))
- return;
- target.hasAttribute("data-action") && target.blur();
- let highlightable = Array.from(
- containerRef.current?.querySelectorAll("[data-highlightable=true]") || []
- ), currentIndex = highlightable.findIndex(
- (el) => el.getAttribute("data-item-id") === highlightedRef.current?.itemId && el.getAttribute("data-ref-id") === highlightedRef.current?.refId
- ), nextIndex = cycle2(highlightable, currentIndex, isArrowUp ? -1 : 1), didRunAround = isArrowUp ? nextIndex === highlightable.length - 1 : nextIndex === 0;
- if (highlightElement(highlightable[nextIndex], didRunAround), highlightable[nextIndex].getAttribute("data-nodetype") === "component") {
- let { itemId, refId } = highlightedRef.current, item = api.resolveStory(itemId, refId === "storybook_internal" ? void 0 : refId);
- item?.type === "component" && api.emit(PRELOAD_ENTRIES, {
- ids: [item.children[0]],
- options: { target: refId }
- });
- }
- });
- };
- return document6.addEventListener("keydown", navigateTree), () => document6.removeEventListener("keydown", navigateTree);
- }, [api, containerRef, isLoading, isBrowsing, highlightedRef, highlightElement]), [highlighted, updateHighlighted, highlightedRef];
- };
-
- // src/manager/components/sidebar/Explorer.tsx
- var Explorer = react_default.memo(function({
- hasEntries,
- isLoading,
- isBrowsing,
- isHidden,
- dataset,
- selected,
- ...restProps
- }) {
- let containerRef = useRef(null), [highlighted, setHighlighted, highlightedRef] = useHighlighted({
- containerRef,
- isLoading,
- isBrowsing,
- selected
- }), { landmarkProps } = useLandmark(
- { "aria-labelledby": "storybook-explorer-tree-heading", role: "navigation" },
- containerRef
- );
- return react_default.createElement(
- "nav",
- {
- hidden: isHidden || void 0,
- "aria-hidden": isHidden || void 0,
- className: isBrowsing ? void 0 : "sb-sr-only",
- ref: containerRef,
- id: "storybook-explorer-tree",
- "data-highlighted-ref-id": highlighted?.refId,
- "data-highlighted-item-id": highlighted?.itemId,
- ...landmarkProps,
- ...restProps
- },
- react_default.createElement("h2", { id: "storybook-explorer-tree-heading", className: "sb-sr-only" }, "Stories"),
- highlighted && react_default.createElement(HighlightStyles, { ...highlighted }),
- dataset.entries.map(([refId, ref]) => react_default.createElement(
- Ref,
- {
- ...ref,
- key: refId,
- isLoading,
- isBrowsing,
- hasEntries,
- selectedStoryId: selected?.refId === ref.id ? selected.storyId : null,
- highlightedRef,
- setHighlighted
- }
- ))
- );
- });
-
- // src/manager/components/sidebar/Heading.tsx
- init_react();
-
- // src/manager/components/sidebar/Brand.tsx
- init_react();
- var StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({
- width: "auto",
- height: "22px !important",
- display: "block",
- color: theme.base === "light" ? theme.color.defaultText : theme.color.lightest
- })), Img2 = styled.img({
- display: "block",
- maxWidth: "150px !important",
- maxHeight: "100px"
- }), LogoLink = styled.a(({ theme }) => ({
- display: "inline-flex",
- alignItems: "center",
- height: "100%",
- margin: "-3px -4px",
- padding: "2px 3px",
- border: "1px solid transparent",
- borderRadius: 3,
- color: "inherit",
- textDecoration: "none",
- "&:focus-visible": {
- outline: `2px solid ${theme.color.secondary}`,
- outlineOffset: 2
- }
- })), Brand = withTheme(({ theme }) => {
- let { title: title2 = "Storybook", url = "./", image, target } = theme.brand, targetValue = target || (url === "./" ? "" : "_blank");
- if (image === null)
- return title2 === null ? null : url ? react_default.createElement(LogoLink, { href: url, target: targetValue, dangerouslySetInnerHTML: { __html: title2 } }) : react_default.createElement("div", { dangerouslySetInnerHTML: { __html: title2 } });
- let logo = image ? react_default.createElement(Img2, { src: image, alt: title2 }) : react_default.createElement(StorybookLogoStyled, { alt: title2 });
- return url ? react_default.createElement(LogoLink, { title: title2, href: url, target: targetValue }, logo) : react_default.createElement("div", null, logo);
- });
-
- // src/manager/components/sidebar/Menu.tsx
- init_react();
- var buttonStyleAdditions = ({
- highlighted,
- isMobile: isMobile2,
- theme
- }) => css`
- position: relative;
- overflow: visible;
- margin-top: 0;
- z-index: 1;
- ${isMobile2 && `
- width: 36px;
- height: 36px;
- `}
- ${highlighted && `
- &:before,
- &:after {
- content: '';
- position: absolute;
- top: 6px;
- right: 6px;
- width: 5px;
- height: 5px;
- z-index: 2;
- border-radius: 50%;
- background: ${theme.background.app};
- border: 1px solid ${theme.background.app};
- box-shadow: 0 0 0 2px ${theme.background.app};
- }
- &:after {
- background: ${theme.color.positive};
- border: 1px solid rgba(0, 0, 0, 0.1);
- box-shadow: 0 0 0 2px ${theme.background.app};
- }
- &:hover:after,
- &:focus-visible:after {
- box-shadow: 0 0 0 2px ${curriedTransparentize$1(0.88, theme.color.secondary)};
- }
- `}
- `, Container10 = styled.div({
- minWidth: 250
- }), SidebarButton = styled(Button)(buttonStyleAdditions), SidebarToggleButton = styled(ToggleButton)(buttonStyleAdditions), MenuButtonGroup = styled.div({
- display: "flex",
- gap: 6
- }), SidebarMenuList = ({ menu, onHide }) => react_default.createElement(Container10, null, menu.filter((links) => links.length).flatMap((links) => react_default.createElement(ActionList, { key: links.map((link) => link.id).join("_") }, links.map((link) => {
- let linkContent = react_default.createElement(react_default.Fragment, null, (link.icon || link.input) && react_default.createElement(ActionList.Icon, null, link.icon || link.input), (link.title || link.center) && react_default.createElement(ActionList.Text, null, link.title || link.center), link.right);
- return react_default.createElement(ActionList.Item, { key: link.id, active: link.active }, react_default.createElement(
- ActionList.Action,
- {
- asChild: !!link.href,
- ariaLabel: !1,
- id: `list-item-${link.id}`,
- disabled: link.disabled,
- onClick: (e2) => {
- if (link.disabled) {
- e2.preventDefault();
- return;
- }
- link.href && link.internal && e2.preventDefault(), link.onClick?.(e2, {
- id: link.id,
- active: link.active,
- disabled: link.disabled,
- title: link.title,
- href: link.href
- }), link.closeOnClick && onHide();
- }
- },
- link.href ? react_default.createElement(
- "a",
- {
- href: link.href,
- target: link.internal ? void 0 : "_blank",
- rel: link.internal ? "canonical" : "noreferrer"
- },
- linkContent
- ) : linkContent
- ));
- })))), SidebarMenu = ({ menu, isHighlighted, onClick }) => {
- let [isTooltipVisible, setIsTooltipVisible] = useState(!1), { isMobile: isMobile2, setMobileMenuOpen } = useLayout();
- return isMobile2 ? react_default.createElement(MenuButtonGroup, null, react_default.createElement(
- SidebarButton,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "About Storybook",
- highlighted: !!isHighlighted,
- onClick: (e2) => {
- onClick?.(e2), e2.preventDefault();
- },
- isMobile: !0,
- asChild: !0
- },
- react_default.createElement("a", { href: "./?path=/settings/about", rel: "canonical" }, react_default.createElement(CogIcon, null))
- ), react_default.createElement(
- SidebarButton,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "Close menu",
- highlighted: !1,
- onClick: () => setMobileMenuOpen(!1),
- isMobile: !0
- },
- react_default.createElement(CloseIcon, null)
- )) : react_default.createElement(
- PopoverProvider,
- {
- ariaLabel: "Storybook menu",
- placement: "bottom-start",
- padding: 0,
- popover: ({ onHide }) => react_default.createElement(SidebarMenuList, { onHide, menu }),
- onVisibleChange: setIsTooltipVisible
- },
- react_default.createElement(
- SidebarToggleButton,
- {
- ariaLabel: "Settings",
- pressed: isTooltipVisible,
- highlighted: !!isHighlighted,
- padding: "small",
- variant: "ghost",
- size: "medium",
- isMobile: !1
- },
- react_default.createElement(CogIcon, null)
- )
- );
- };
-
- // src/manager/components/sidebar/Heading.tsx
- var BrandArea = styled.div(({ theme }) => ({
- fontSize: theme.typography.size.s2,
- fontWeight: theme.typography.weight.bold,
- color: theme.color.defaultText,
- marginRight: 20,
- display: "flex",
- width: "100%",
- alignItems: "center",
- minHeight: 22,
- "& > * > *": {
- maxWidth: "100%"
- },
- "& > *": {
- maxWidth: "100%",
- height: "auto",
- display: "block",
- flex: "1 1 auto"
- }
- })), HeadingWrapper = styled.div({
- display: "flex",
- alignItems: "center",
- justifyContent: "space-between",
- position: "relative",
- minHeight: 42,
- paddingLeft: 8
- }), SkipToCanvasLink = styled(Button)(({ theme }) => ({
- display: "none",
- "@media (min-width: 600px)": {
- display: "block",
- position: "absolute",
- fontSize: theme.typography.size.s1,
- border: 0,
- width: 1,
- height: 1,
- padding: 0,
- margin: -1,
- overflow: "hidden",
- clip: "rect(0, 0, 0, 0)",
- whiteSpace: "nowrap",
- wordWrap: "normal",
- opacity: 0,
- transition: "opacity 150ms ease-out",
- "&:focus": {
- width: "100%",
- height: "inherit",
- padding: "10px 15px",
- margin: 0,
- clip: "unset",
- overflow: "unset",
- opacity: 1,
- zIndex: 3
- }
- }
- })), Heading2 = ({
- menuHighlighted = !1,
- menu,
- skipLinkHref,
- isLoading,
- onMenuClick,
- ...props
- }) => react_default.createElement(HeadingWrapper, { ...props }, skipLinkHref && react_default.createElement(SkipToCanvasLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: skipLinkHref, tabIndex: 0 }, "Skip to content")), react_default.createElement(BrandArea, null, react_default.createElement(Brand, null)), react_default.createElement(SidebarMenu, { menu, isHighlighted: menuHighlighted, onClick: onMenuClick }));
-
- // src/manager/components/sidebar/Search.tsx
- init_react();
-
- // ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
- function _objectWithoutPropertiesLoose2(r4, e2) {
- if (r4 == null) return {};
- var t2 = {};
- for (var n3 in r4) if ({}.hasOwnProperty.call(r4, n3)) {
- if (e2.indexOf(n3) !== -1) continue;
- t2[n3] = r4[n3];
- }
- return t2;
- }
-
- // ../../node_modules/downshift/dist/downshift.esm.js
- var import_prop_types3 = __toESM(require_prop_types());
- init_react();
- var import_react_is = __toESM(require_react_is());
-
- // ../../node_modules/compute-scroll-into-view/dist/index.js
- var t = (t2) => typeof t2 == "object" && t2 != null && t2.nodeType === 1, e = (t2, e2) => (!e2 || t2 !== "hidden") && t2 !== "visible" && t2 !== "clip", n2 = (t2, n3) => {
- if (t2.clientHeight < t2.scrollHeight || t2.clientWidth < t2.scrollWidth) {
- let o3 = getComputedStyle(t2, null);
- return e(o3.overflowY, n3) || e(o3.overflowX, n3) || ((t3) => {
- let e2 = ((t4) => {
- if (!t4.ownerDocument || !t4.ownerDocument.defaultView) return null;
- try {
- return t4.ownerDocument.defaultView.frameElement;
- } catch {
- return null;
- }
- })(t3);
- return !!e2 && (e2.clientHeight < t3.scrollHeight || e2.clientWidth < t3.scrollWidth);
- })(t2);
- }
- return !1;
- }, o2 = (t2, e2, n3, o3, l3, r4, i2, s2) => r4 < t2 && i2 > e2 || r4 > t2 && i2 < e2 ? 0 : r4 <= t2 && s2 <= n3 || i2 >= e2 && s2 >= n3 ? r4 - t2 - o3 : i2 > e2 && s2 < n3 || r4 < t2 && s2 > n3 ? i2 - e2 + l3 : 0, l2 = (t2) => {
- let e2 = t2.parentElement;
- return e2 ?? (t2.getRootNode().host || null);
- }, r3 = (e2, r4) => {
- var i2, s2, d2, h2;
- if (typeof document > "u") return [];
- let { scrollMode: c2, block: f2, inline: u2, boundary: a2, skipOverflowHiddenElements: g2 } = r4, p2 = typeof a2 == "function" ? a2 : (t2) => t2 !== a2;
- if (!t(e2)) throw new TypeError("Invalid target");
- let m2 = document.scrollingElement || document.documentElement, w2 = [], W2 = e2;
- for (; t(W2) && p2(W2); ) {
- if (W2 = l2(W2), W2 === m2) {
- w2.push(W2);
- break;
- }
- W2 != null && W2 === document.body && n2(W2) && !n2(document.documentElement) || W2 != null && n2(W2, g2) && w2.push(W2);
- }
- let b2 = (s2 = (i2 = window.visualViewport) == null ? void 0 : i2.width) != null ? s2 : innerWidth, H7 = (h2 = (d2 = window.visualViewport) == null ? void 0 : d2.height) != null ? h2 : innerHeight, { scrollX: y2, scrollY: M2 } = window, { height: v2, width: E2, top: x2, right: C2, bottom: I2, left: R2 } = e2.getBoundingClientRect(), { top: T3, right: B2, bottom: F2, left: V } = ((t2) => {
- let e3 = window.getComputedStyle(t2);
- return { top: parseFloat(e3.scrollMarginTop) || 0, right: parseFloat(e3.scrollMarginRight) || 0, bottom: parseFloat(e3.scrollMarginBottom) || 0, left: parseFloat(e3.scrollMarginLeft) || 0 };
- })(e2), k2 = f2 === "start" || f2 === "nearest" ? x2 - T3 : f2 === "end" ? I2 + F2 : x2 + v2 / 2 - T3 + F2, D2 = u2 === "center" ? R2 + E2 / 2 - V + B2 : u2 === "end" ? C2 + B2 : R2 - V, L3 = [];
- for (let t2 = 0; t2 < w2.length; t2++) {
- let e3 = w2[t2], { height: l3, width: r5, top: i3, right: s3, bottom: d3, left: h3 } = e3.getBoundingClientRect();
- if (c2 === "if-needed" && x2 >= 0 && R2 >= 0 && I2 <= H7 && C2 <= b2 && (e3 === m2 && !n2(e3) || x2 >= i3 && I2 <= d3 && R2 >= h3 && C2 <= s3)) return L3;
- let a3 = getComputedStyle(e3), g3 = parseInt(a3.borderLeftWidth, 10), p3 = parseInt(a3.borderTopWidth, 10), W3 = parseInt(a3.borderRightWidth, 10), T4 = parseInt(a3.borderBottomWidth, 10), B3 = 0, F3 = 0, V2 = "offsetWidth" in e3 ? e3.offsetWidth - e3.clientWidth - g3 - W3 : 0, S2 = "offsetHeight" in e3 ? e3.offsetHeight - e3.clientHeight - p3 - T4 : 0, X = "offsetWidth" in e3 ? e3.offsetWidth === 0 ? 0 : r5 / e3.offsetWidth : 0, Y2 = "offsetHeight" in e3 ? e3.offsetHeight === 0 ? 0 : l3 / e3.offsetHeight : 0;
- if (m2 === e3) B3 = f2 === "start" ? k2 : f2 === "end" ? k2 - H7 : f2 === "nearest" ? o2(M2, M2 + H7, H7, p3, T4, M2 + k2, M2 + k2 + v2, v2) : k2 - H7 / 2, F3 = u2 === "start" ? D2 : u2 === "center" ? D2 - b2 / 2 : u2 === "end" ? D2 - b2 : o2(y2, y2 + b2, b2, g3, W3, y2 + D2, y2 + D2 + E2, E2), B3 = Math.max(0, B3 + M2), F3 = Math.max(0, F3 + y2);
- else {
- B3 = f2 === "start" ? k2 - i3 - p3 : f2 === "end" ? k2 - d3 + T4 + S2 : f2 === "nearest" ? o2(i3, d3, l3, p3, T4 + S2, k2, k2 + v2, v2) : k2 - (i3 + l3 / 2) + S2 / 2, F3 = u2 === "start" ? D2 - h3 - g3 : u2 === "center" ? D2 - (h3 + r5 / 2) + V2 / 2 : u2 === "end" ? D2 - s3 + W3 + V2 : o2(h3, s3, r5, g3, W3 + V2, D2, D2 + E2, E2);
- let { scrollLeft: t3, scrollTop: n3 } = e3;
- B3 = Y2 === 0 ? 0 : Math.max(0, Math.min(n3 + B3 / Y2, e3.scrollHeight - l3 / Y2 + S2)), F3 = X === 0 ? 0 : Math.max(0, Math.min(t3 + F3 / X, e3.scrollWidth - r5 / X + V2)), k2 += n3 - B3, D2 += t3 - F3;
- }
- L3.push({ el: e3, top: B3, left: F3 });
- }
- return L3;
- };
-
- // ../../node_modules/downshift/dist/downshift.esm.js
- var idCounter = 0;
- function cbToCb(cb) {
- return typeof cb == "function" ? cb : noop4;
- }
- function noop4() {
- }
- function scrollIntoView2(node, menuNode) {
- if (node) {
- var actions = r3(node, {
- boundary: menuNode,
- block: "nearest",
- scrollMode: "if-needed"
- });
- actions.forEach(function(_ref) {
- var el = _ref.el, top = _ref.top, left = _ref.left;
- el.scrollTop = top, el.scrollLeft = left;
- });
- }
- }
- function isOrContainsNode(parent, child, environment) {
- var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
- return result;
- }
- function debounce4(fn, time) {
- var timeoutId;
- function cancel() {
- timeoutId && clearTimeout(timeoutId);
- }
- function wrapper() {
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
- args[_key] = arguments[_key];
- cancel(), timeoutId = setTimeout(function() {
- timeoutId = null, fn.apply(void 0, args);
- }, time);
- }
- return wrapper.cancel = cancel, wrapper;
- }
- function callAllEventHandlers() {
- for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++)
- fns[_key2] = arguments[_key2];
- return function(event) {
- for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++)
- args[_key3 - 1] = arguments[_key3];
- return fns.some(function(fn) {
- return fn && fn.apply(void 0, [event].concat(args)), event.preventDownshiftDefault || event.hasOwnProperty("nativeEvent") && event.nativeEvent.preventDownshiftDefault;
- });
- };
- }
- function handleRefs() {
- for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++)
- refs[_key4] = arguments[_key4];
- return function(node) {
- refs.forEach(function(ref) {
- typeof ref == "function" ? ref(node) : ref && (ref.current = node);
- });
- };
- }
- function generateId() {
- return String(idCounter++);
- }
- function getA11yStatusMessage(_ref2) {
- var isOpen = _ref2.isOpen, resultCount = _ref2.resultCount, previousResultCount = _ref2.previousResultCount;
- return isOpen ? resultCount ? resultCount !== previousResultCount ? resultCount + " result" + (resultCount === 1 ? " is" : "s are") + " available, use up and down arrow keys to navigate. Press Enter key to select." : "" : "No results are available." : "";
- }
- function unwrapArray(arg, defaultValue) {
- return arg = Array.isArray(arg) ? (
- /* istanbul ignore next (preact) */
- arg[0]
- ) : arg, !arg && defaultValue ? defaultValue : arg;
- }
- function isDOMElement(element) {
- return typeof element.type == "string";
- }
- function getElementProps(element) {
- return element.props;
- }
- var stateKeys = ["highlightedIndex", "inputValue", "isOpen", "selectedItem", "type"];
- function pickState(state) {
- state === void 0 && (state = {});
- var result = {};
- return stateKeys.forEach(function(k2) {
- state.hasOwnProperty(k2) && (result[k2] = state[k2]);
- }), result;
- }
- function getState2(state, props) {
- return !state || !props ? state : Object.keys(state).reduce(function(prevState, key) {
- return prevState[key] = isControlledProp(props, key) ? props[key] : state[key], prevState;
- }, {});
- }
- function isControlledProp(props, key) {
- return props[key] !== void 0;
- }
- function normalizeArrowKey(event) {
- var key = event.key, keyCode = event.keyCode;
- return keyCode >= 37 && keyCode <= 40 && key.indexOf("Arrow") !== 0 ? "Arrow" + key : key;
- }
- function getHighlightedIndex(start, offset2, items, isItemDisabled2, circular) {
- circular === void 0 && (circular = !1);
- var count = items.length;
- if (count === 0)
- return -1;
- var itemsLastIndex = count - 1;
- (typeof start != "number" || start < 0 || start > itemsLastIndex) && (start = offset2 > 0 ? -1 : itemsLastIndex + 1);
- var current = start + offset2;
- current < 0 ? current = circular ? itemsLastIndex : 0 : current > itemsLastIndex && (current = circular ? 0 : itemsLastIndex);
- var highlightedIndex = getNonDisabledIndex(current, offset2 < 0, items, isItemDisabled2, circular);
- return highlightedIndex === -1 ? start >= count ? -1 : start : highlightedIndex;
- }
- function getNonDisabledIndex(start, backwards, items, isItemDisabled2, circular) {
- circular === void 0 && (circular = !1);
- var count = items.length;
- if (backwards) {
- for (var index = start; index >= 0; index--)
- if (!isItemDisabled2(items[index], index))
- return index;
- } else
- for (var _index = start; _index < count; _index++)
- if (!isItemDisabled2(items[_index], _index))
- return _index;
- return circular ? getNonDisabledIndex(backwards ? count - 1 : 0, backwards, items, isItemDisabled2) : -1;
- }
- function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
- return checkActiveElement === void 0 && (checkActiveElement = !0), environment && downshiftElements.some(function(contextNode) {
- return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
- });
- }
- var cleanupStatus = debounce4(function(documentProp) {
- getStatusDiv(documentProp).textContent = "";
- }, 500);
- function getStatusDiv(documentProp) {
- var statusDiv = documentProp.getElementById("a11y-status-message");
- return statusDiv || (statusDiv = documentProp.createElement("div"), statusDiv.setAttribute("id", "a11y-status-message"), statusDiv.setAttribute("role", "status"), statusDiv.setAttribute("aria-live", "polite"), statusDiv.setAttribute("aria-relevant", "additions text"), Object.assign(statusDiv.style, {
- border: "0",
- clip: "rect(0 0 0 0)",
- height: "1px",
- margin: "-1px",
- overflow: "hidden",
- padding: "0",
- position: "absolute",
- width: "1px"
- }), documentProp.body.appendChild(statusDiv), statusDiv);
- }
- function setStatus(status, documentProp) {
- if (!(!status || !documentProp)) {
- var div = getStatusDiv(documentProp);
- div.textContent = status, cleanupStatus(documentProp);
- }
- }
- function cleanupStatusDiv(documentProp) {
- var statusDiv = documentProp?.getElementById("a11y-status-message");
- statusDiv && statusDiv.remove();
- }
- var unknown = 0, mouseUp = 1, itemMouseEnter = 2, keyDownArrowUp = 3, keyDownArrowDown = 4, keyDownEscape = 5, keyDownEnter = 6, keyDownHome = 7, keyDownEnd = 8, clickItem = 9, blurInput = 10, changeInput = 11, keyDownSpaceButton = 12, clickButton = 13, blurButton = 14, controlledPropUpdatedSelectedItem = 15, touchEnd = 16, stateChangeTypes$3 = Object.freeze({
- __proto__: null,
- blurButton,
- blurInput,
- changeInput,
- clickButton,
- clickItem,
- controlledPropUpdatedSelectedItem,
- itemMouseEnter,
- keyDownArrowDown,
- keyDownArrowUp,
- keyDownEnd,
- keyDownEnter,
- keyDownEscape,
- keyDownHome,
- keyDownSpaceButton,
- mouseUp,
- touchEnd,
- unknown
- }), _excluded$3 = ["refKey", "ref"], _excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"], _excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"], _excluded4$2 = ["refKey", "ref"], _excluded5 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"], Downshift = (function() {
- var Downshift2 = (function(_Component) {
- function Downshift3(_props) {
- var _this;
- _this = _Component.call(this, _props) || this, _this.id = _this.props.id || "downshift-" + generateId(), _this.menuId = _this.props.menuId || _this.id + "-menu", _this.labelId = _this.props.labelId || _this.id + "-label", _this.inputId = _this.props.inputId || _this.id + "-input", _this.getItemId = _this.props.getItemId || function(index) {
- return _this.id + "-item-" + index;
- }, _this.items = [], _this.itemCount = null, _this.previousResultCount = 0, _this.timeoutIds = [], _this.internalSetTimeout = function(fn, time) {
- var id = setTimeout(function() {
- _this.timeoutIds = _this.timeoutIds.filter(function(i2) {
- return i2 !== id;
- }), fn();
- }, time);
- _this.timeoutIds.push(id);
- }, _this.setItemCount = function(count) {
- _this.itemCount = count;
- }, _this.unsetItemCount = function() {
- _this.itemCount = null;
- }, _this.isItemDisabled = function(_item, index) {
- var currentElementNode = _this.getItemNodeFromIndex(index);
- return currentElementNode && currentElementNode.hasAttribute("disabled");
- }, _this.setHighlightedIndex = function(highlightedIndex, otherStateToSet) {
- highlightedIndex === void 0 && (highlightedIndex = _this.props.defaultHighlightedIndex), otherStateToSet === void 0 && (otherStateToSet = {}), otherStateToSet = pickState(otherStateToSet), _this.internalSetState(_extends({
- highlightedIndex
- }, otherStateToSet));
- }, _this.clearSelection = function(cb) {
- _this.internalSetState({
- selectedItem: null,
- inputValue: "",
- highlightedIndex: _this.props.defaultHighlightedIndex,
- isOpen: _this.props.defaultIsOpen
- }, cb);
- }, _this.selectItem = function(item, otherStateToSet, cb) {
- otherStateToSet = pickState(otherStateToSet), _this.internalSetState(_extends({
- isOpen: _this.props.defaultIsOpen,
- highlightedIndex: _this.props.defaultHighlightedIndex,
- selectedItem: item,
- inputValue: _this.props.itemToString(item)
- }, otherStateToSet), cb);
- }, _this.selectItemAtIndex = function(itemIndex, otherStateToSet, cb) {
- var item = _this.items[itemIndex];
- item != null && _this.selectItem(item, otherStateToSet, cb);
- }, _this.selectHighlightedItem = function(otherStateToSet, cb) {
- return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
- }, _this.internalSetState = function(stateToSet, cb) {
- var isItemSelected, onChangeArg, onStateChangeArg = {}, isStateToSetFunction = typeof stateToSet == "function";
- return !isStateToSetFunction && stateToSet.hasOwnProperty("inputValue") && _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet)), _this.setState(function(state) {
- var _newStateToSet;
- state = _this.getState(state);
- var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
- newStateToSet = _this.props.stateReducer(state, newStateToSet), isItemSelected = newStateToSet.hasOwnProperty("selectedItem");
- var nextState = {};
- return isItemSelected && newStateToSet.selectedItem !== state.selectedItem && (onChangeArg = newStateToSet.selectedItem), (_newStateToSet = newStateToSet).type || (_newStateToSet.type = unknown), Object.keys(newStateToSet).forEach(function(key) {
- state[key] !== newStateToSet[key] && (onStateChangeArg[key] = newStateToSet[key]), key !== "type" && (newStateToSet[key], isControlledProp(_this.props, key) || (nextState[key] = newStateToSet[key]));
- }), isStateToSetFunction && newStateToSet.hasOwnProperty("inputValue") && _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet)), nextState;
- }, function() {
- cbToCb(cb)();
- var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
- hasMoreStateThanType && _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers()), isItemSelected && _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers()), onChangeArg !== void 0 && _this.props.onChange(onChangeArg, _this.getStateAndHelpers()), _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
- });
- }, _this.rootRef = function(node) {
- return _this._rootNode = node;
- }, _this.getRootProps = function(_temp, _temp2) {
- var _extends22, _ref = _temp === void 0 ? {} : _temp, _ref$refKey = _ref.refKey, refKey = _ref$refKey === void 0 ? "ref" : _ref$refKey, ref = _ref.ref, rest2 = _objectWithoutPropertiesLoose2(_ref, _excluded$3), _ref2 = _temp2 === void 0 ? {} : _temp2, _ref2$suppressRefErro = _ref2.suppressRefError, suppressRefError = _ref2$suppressRefErro === void 0 ? !1 : _ref2$suppressRefErro;
- _this.getRootProps.called = !0, _this.getRootProps.refKey = refKey, _this.getRootProps.suppressRefError = suppressRefError;
- var _this$getState = _this.getState(), isOpen = _this$getState.isOpen;
- return _extends((_extends22 = {}, _extends22[refKey] = handleRefs(ref, _this.rootRef), _extends22.role = "combobox", _extends22["aria-expanded"] = isOpen, _extends22["aria-haspopup"] = "listbox", _extends22["aria-owns"] = isOpen ? _this.menuId : void 0, _extends22["aria-labelledby"] = _this.labelId, _extends22), rest2);
- }, _this.keyDownHandlers = {
- ArrowDown: function(event) {
- var _this2 = this;
- if (event.preventDefault(), this.getState().isOpen) {
- var amount = event.shiftKey ? 5 : 1;
- this.moveHighlightedIndex(amount, {
- type: keyDownArrowDown
- });
- } else
- this.internalSetState({
- isOpen: !0,
- type: keyDownArrowDown
- }, function() {
- var itemCount = _this2.getItemCount();
- if (itemCount > 0) {
- var _this2$getState = _this2.getState(), highlightedIndex = _this2$getState.highlightedIndex, nextHighlightedIndex = getHighlightedIndex(highlightedIndex, 1, {
- length: itemCount
- }, _this2.isItemDisabled, !0);
- _this2.setHighlightedIndex(nextHighlightedIndex, {
- type: keyDownArrowDown
- });
- }
- });
- },
- ArrowUp: function(event) {
- var _this3 = this;
- if (event.preventDefault(), this.getState().isOpen) {
- var amount = event.shiftKey ? -5 : -1;
- this.moveHighlightedIndex(amount, {
- type: keyDownArrowUp
- });
- } else
- this.internalSetState({
- isOpen: !0,
- type: keyDownArrowUp
- }, function() {
- var itemCount = _this3.getItemCount();
- if (itemCount > 0) {
- var _this3$getState = _this3.getState(), highlightedIndex = _this3$getState.highlightedIndex, nextHighlightedIndex = getHighlightedIndex(highlightedIndex, -1, {
- length: itemCount
- }, _this3.isItemDisabled, !0);
- _this3.setHighlightedIndex(nextHighlightedIndex, {
- type: keyDownArrowUp
- });
- }
- });
- },
- Enter: function(event) {
- if (event.which !== 229) {
- var _this$getState2 = this.getState(), isOpen = _this$getState2.isOpen, highlightedIndex = _this$getState2.highlightedIndex;
- if (isOpen && highlightedIndex != null) {
- event.preventDefault();
- var item = this.items[highlightedIndex], itemNode = this.getItemNodeFromIndex(highlightedIndex);
- if (item == null || itemNode && itemNode.hasAttribute("disabled"))
- return;
- this.selectHighlightedItem({
- type: keyDownEnter
- });
- }
- }
- },
- Escape: function(event) {
- event.preventDefault(), this.reset(_extends({
- type: keyDownEscape
- }, !this.state.isOpen && {
- selectedItem: null,
- inputValue: ""
- }));
- }
- }, _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
- " ": function(event) {
- event.preventDefault(), this.toggleMenu({
- type: keyDownSpaceButton
- });
- }
- }), _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
- Home: function(event) {
- var _this$getState3 = this.getState(), isOpen = _this$getState3.isOpen;
- if (isOpen) {
- event.preventDefault();
- var itemCount = this.getItemCount();
- if (!(itemCount <= 0 || !isOpen)) {
- var newHighlightedIndex = getNonDisabledIndex(0, !1, {
- length: itemCount
- }, this.isItemDisabled);
- this.setHighlightedIndex(newHighlightedIndex, {
- type: keyDownHome
- });
- }
- }
- },
- End: function(event) {
- var _this$getState4 = this.getState(), isOpen = _this$getState4.isOpen;
- if (isOpen) {
- event.preventDefault();
- var itemCount = this.getItemCount();
- if (!(itemCount <= 0 || !isOpen)) {
- var newHighlightedIndex = getNonDisabledIndex(itemCount - 1, !0, {
- length: itemCount
- }, this.isItemDisabled);
- this.setHighlightedIndex(newHighlightedIndex, {
- type: keyDownEnd
- });
- }
- }
- }
- }), _this.getToggleButtonProps = function(_temp3) {
- var _ref3 = _temp3 === void 0 ? {} : _temp3, onClick = _ref3.onClick;
- _ref3.onPress;
- var onKeyDown = _ref3.onKeyDown, onKeyUp = _ref3.onKeyUp, onBlur = _ref3.onBlur, rest2 = _objectWithoutPropertiesLoose2(_ref3, _excluded2$3), _this$getState5 = _this.getState(), isOpen = _this$getState5.isOpen, enabledEventHandlers = {
- onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
- onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
- onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
- onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
- }, eventHandlers = rest2.disabled ? {} : enabledEventHandlers;
- return _extends({
- type: "button",
- role: "button",
- "aria-label": isOpen ? "close menu" : "open menu",
- "aria-haspopup": !0,
- "data-toggle": !0
- }, eventHandlers, rest2);
- }, _this.buttonHandleKeyUp = function(event) {
- event.preventDefault();
- }, _this.buttonHandleKeyDown = function(event) {
- var key = normalizeArrowKey(event);
- _this.buttonKeyDownHandlers[key] && _this.buttonKeyDownHandlers[key].call(_this, event);
- }, _this.buttonHandleClick = function(event) {
- if (event.preventDefault(), _this.props.environment) {
- var _this$props$environme = _this.props.environment.document, body = _this$props$environme.body, activeElement = _this$props$environme.activeElement;
- body && body === activeElement && event.target.focus();
- }
- _this.internalSetTimeout(function() {
- return _this.toggleMenu({
- type: clickButton
- });
- });
- }, _this.buttonHandleBlur = function(event) {
- var blurTarget = event.target;
- _this.internalSetTimeout(function() {
- if (!(_this.isMouseDown || !_this.props.environment)) {
- var activeElement = _this.props.environment.document.activeElement;
- (activeElement == null || activeElement.id !== _this.inputId) && activeElement !== blurTarget && _this.reset({
- type: blurButton
- });
- }
- });
- }, _this.getLabelProps = function(props) {
- return _extends({
- htmlFor: _this.inputId,
- id: _this.labelId
- }, props);
- }, _this.getInputProps = function(_temp4) {
- var _ref4 = _temp4 === void 0 ? {} : _temp4, onKeyDown = _ref4.onKeyDown, onBlur = _ref4.onBlur, onChange = _ref4.onChange, onInput = _ref4.onInput;
- _ref4.onChangeText;
- var rest2 = _objectWithoutPropertiesLoose2(_ref4, _excluded3$2), onChangeKey, eventHandlers = {};
- onChangeKey = "onChange";
- var _this$getState6 = _this.getState(), inputValue = _this$getState6.inputValue, isOpen = _this$getState6.isOpen, highlightedIndex = _this$getState6.highlightedIndex;
- if (!rest2.disabled) {
- var _eventHandlers;
- eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
- }
- return _extends({
- "aria-autocomplete": "list",
- "aria-activedescendant": isOpen && typeof highlightedIndex == "number" && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : void 0,
- "aria-controls": isOpen ? _this.menuId : void 0,
- "aria-labelledby": rest2 && rest2["aria-label"] ? void 0 : _this.labelId,
- // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
- // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
- autoComplete: "off",
- value: inputValue,
- id: _this.inputId
- }, eventHandlers, rest2);
- }, _this.inputHandleKeyDown = function(event) {
- var key = normalizeArrowKey(event);
- key && _this.inputKeyDownHandlers[key] && _this.inputKeyDownHandlers[key].call(_this, event);
- }, _this.inputHandleChange = function(event) {
- _this.internalSetState({
- type: changeInput,
- isOpen: !0,
- inputValue: event.target.value,
- highlightedIndex: _this.props.defaultHighlightedIndex
- });
- }, _this.inputHandleBlur = function() {
- _this.internalSetTimeout(function() {
- var _activeElement$datase;
- if (!(_this.isMouseDown || !_this.props.environment)) {
- var activeElement = _this.props.environment.document.activeElement, downshiftButtonIsActive = (activeElement == null || (_activeElement$datase = activeElement.dataset) == null ? void 0 : _activeElement$datase.toggle) && _this._rootNode && _this._rootNode.contains(activeElement);
- downshiftButtonIsActive || _this.reset({
- type: blurInput
- });
- }
- });
- }, _this.menuRef = function(node) {
- _this._menuNode = node;
- }, _this.getMenuProps = function(_temp5, _temp6) {
- var _extends3, _ref5 = _temp5 === void 0 ? {} : _temp5, _ref5$refKey = _ref5.refKey, refKey = _ref5$refKey === void 0 ? "ref" : _ref5$refKey, ref = _ref5.ref, props = _objectWithoutPropertiesLoose2(_ref5, _excluded4$2), _ref6 = _temp6 === void 0 ? {} : _temp6, _ref6$suppressRefErro = _ref6.suppressRefError, suppressRefError = _ref6$suppressRefErro === void 0 ? !1 : _ref6$suppressRefErro;
- return _this.getMenuProps.called = !0, _this.getMenuProps.refKey = refKey, _this.getMenuProps.suppressRefError = suppressRefError, _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = "listbox", _extends3["aria-labelledby"] = props && props["aria-label"] ? void 0 : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
- }, _this.getItemProps = function(_temp7) {
- var _enabledEventHandlers, _ref7 = _temp7 === void 0 ? {} : _temp7, onMouseMove = _ref7.onMouseMove, onMouseDown = _ref7.onMouseDown, onClick = _ref7.onClick;
- _ref7.onPress;
- var index = _ref7.index, _ref7$item = _ref7.item, item = _ref7$item === void 0 ? (
- /* istanbul ignore next */
- void 0
- ) : _ref7$item, rest2 = _objectWithoutPropertiesLoose2(_ref7, _excluded5);
- index === void 0 ? (_this.items.push(item), index = _this.items.indexOf(item)) : _this.items[index] = item;
- var onSelectKey = "onClick", customClickHandler = onClick, enabledEventHandlers = (_enabledEventHandlers = {
- // onMouseMove is used over onMouseEnter here. onMouseMove
- // is only triggered on actual mouse movement while onMouseEnter
- // can fire on DOM changes, interrupting keyboard navigation
- onMouseMove: callAllEventHandlers(onMouseMove, function() {
- index !== _this.getState().highlightedIndex && (_this.setHighlightedIndex(index, {
- type: itemMouseEnter
- }), _this.avoidScrolling = !0, _this.internalSetTimeout(function() {
- return _this.avoidScrolling = !1;
- }, 250));
- }),
- onMouseDown: callAllEventHandlers(onMouseDown, function(event) {
- event.preventDefault();
- })
- }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function() {
- _this.selectItemAtIndex(index, {
- type: clickItem
- });
- }), _enabledEventHandlers), eventHandlers = rest2.disabled ? {
- onMouseDown: enabledEventHandlers.onMouseDown
- } : enabledEventHandlers;
- return _extends({
- id: _this.getItemId(index),
- role: "option",
- "aria-selected": _this.getState().highlightedIndex === index
- }, eventHandlers, rest2);
- }, _this.clearItems = function() {
- _this.items = [];
- }, _this.reset = function(otherStateToSet, cb) {
- otherStateToSet === void 0 && (otherStateToSet = {}), otherStateToSet = pickState(otherStateToSet), _this.internalSetState(function(_ref8) {
- var selectedItem = _ref8.selectedItem;
- return _extends({
- isOpen: _this.props.defaultIsOpen,
- highlightedIndex: _this.props.defaultHighlightedIndex,
- inputValue: _this.props.itemToString(selectedItem)
- }, otherStateToSet);
- }, cb);
- }, _this.toggleMenu = function(otherStateToSet, cb) {
- otherStateToSet === void 0 && (otherStateToSet = {}), otherStateToSet = pickState(otherStateToSet), _this.internalSetState(function(_ref9) {
- var isOpen = _ref9.isOpen;
- return _extends({
- isOpen: !isOpen
- }, isOpen && {
- highlightedIndex: _this.props.defaultHighlightedIndex
- }, otherStateToSet);
- }, function() {
- var _this$getState7 = _this.getState(), isOpen = _this$getState7.isOpen, highlightedIndex = _this$getState7.highlightedIndex;
- isOpen && _this.getItemCount() > 0 && typeof highlightedIndex == "number" && _this.setHighlightedIndex(highlightedIndex, otherStateToSet), cbToCb(cb)();
- });
- }, _this.openMenu = function(cb) {
- _this.internalSetState({
- isOpen: !0
- }, cb);
- }, _this.closeMenu = function(cb) {
- _this.internalSetState({
- isOpen: !1
- }, cb);
- }, _this.updateStatus = debounce4(function() {
- var _this$props;
- if ((_this$props = _this.props) != null && (_this$props = _this$props.environment) != null && _this$props.document) {
- var state = _this.getState(), item = _this.items[state.highlightedIndex], resultCount = _this.getItemCount(), status = _this.props.getA11yStatusMessage(_extends({
- itemToString: _this.props.itemToString,
- previousResultCount: _this.previousResultCount,
- resultCount,
- highlightedItem: item
- }, state));
- _this.previousResultCount = resultCount, setStatus(status, _this.props.environment.document);
- }
- }, 200);
- var _this$props2 = _this.props, defaultHighlightedIndex = _this$props2.defaultHighlightedIndex, _this$props2$initialH = _this$props2.initialHighlightedIndex, _highlightedIndex = _this$props2$initialH === void 0 ? defaultHighlightedIndex : _this$props2$initialH, defaultIsOpen = _this$props2.defaultIsOpen, _this$props2$initialI = _this$props2.initialIsOpen, _isOpen = _this$props2$initialI === void 0 ? defaultIsOpen : _this$props2$initialI, _this$props2$initialI2 = _this$props2.initialInputValue, _inputValue = _this$props2$initialI2 === void 0 ? "" : _this$props2$initialI2, _this$props2$initialS = _this$props2.initialSelectedItem, _selectedItem = _this$props2$initialS === void 0 ? null : _this$props2$initialS, _state = _this.getState({
- highlightedIndex: _highlightedIndex,
- isOpen: _isOpen,
- inputValue: _inputValue,
- selectedItem: _selectedItem
- });
- return _state.selectedItem != null && _this.props.initialInputValue === void 0 && (_state.inputValue = _this.props.itemToString(_state.selectedItem)), _this.state = _state, _this;
- }
- _inheritsLoose(Downshift3, _Component);
- var _proto = Downshift3.prototype;
- return _proto.internalClearTimeouts = function() {
- this.timeoutIds.forEach(function(id) {
- clearTimeout(id);
- }), this.timeoutIds = [];
- }, _proto.getState = function(stateToMerge) {
- return stateToMerge === void 0 && (stateToMerge = this.state), getState2(stateToMerge, this.props);
- }, _proto.getItemCount = function() {
- var itemCount = this.items.length;
- return this.itemCount != null ? itemCount = this.itemCount : this.props.itemCount !== void 0 && (itemCount = this.props.itemCount), itemCount;
- }, _proto.getItemNodeFromIndex = function(index) {
- return this.props.environment ? this.props.environment.document.getElementById(this.getItemId(index)) : null;
- }, _proto.scrollHighlightedItemIntoView = function() {
- {
- var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
- this.props.scrollIntoView(node, this._menuNode);
- }
- }, _proto.moveHighlightedIndex = function(amount, otherStateToSet) {
- var itemCount = this.getItemCount(), _this$getState8 = this.getState(), highlightedIndex = _this$getState8.highlightedIndex;
- if (itemCount > 0) {
- var nextHighlightedIndex = getHighlightedIndex(highlightedIndex, amount, {
- length: itemCount
- }, this.isItemDisabled, !0);
- this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
- }
- }, _proto.getStateAndHelpers = function() {
- var _this$getState9 = this.getState(), highlightedIndex = _this$getState9.highlightedIndex, inputValue = _this$getState9.inputValue, selectedItem = _this$getState9.selectedItem, isOpen = _this$getState9.isOpen, itemToString2 = this.props.itemToString, id = this.id, getRootProps = this.getRootProps, getToggleButtonProps = this.getToggleButtonProps, getLabelProps = this.getLabelProps, getMenuProps = this.getMenuProps, getInputProps = this.getInputProps, getItemProps = this.getItemProps, openMenu = this.openMenu, closeMenu = this.closeMenu, toggleMenu = this.toggleMenu, selectItem = this.selectItem, selectItemAtIndex = this.selectItemAtIndex, selectHighlightedItem = this.selectHighlightedItem, setHighlightedIndex = this.setHighlightedIndex, clearSelection = this.clearSelection, clearItems = this.clearItems, reset = this.reset, setItemCount = this.setItemCount, unsetItemCount = this.unsetItemCount, setState = this.internalSetState;
- return {
- // prop getters
- getRootProps,
- getToggleButtonProps,
- getLabelProps,
- getMenuProps,
- getInputProps,
- getItemProps,
- // actions
- reset,
- openMenu,
- closeMenu,
- toggleMenu,
- selectItem,
- selectItemAtIndex,
- selectHighlightedItem,
- setHighlightedIndex,
- clearSelection,
- clearItems,
- setItemCount,
- unsetItemCount,
- setState,
- // props
- itemToString: itemToString2,
- // derived
- id,
- // state
- highlightedIndex,
- inputValue,
- isOpen,
- selectedItem
- };
- }, _proto.componentDidMount = function() {
- var _this4 = this;
- if (!this.props.environment)
- this.cleanup = function() {
- _this4.internalClearTimeouts();
- };
- else {
- var onMouseDown = function() {
- _this4.isMouseDown = !0;
- }, onMouseUp = function(event) {
- _this4.isMouseDown = !1;
- var contextWithinDownshift = targetWithinDownshift(event.target, [_this4._rootNode, _this4._menuNode], _this4.props.environment);
- !contextWithinDownshift && _this4.getState().isOpen && _this4.reset({
- type: mouseUp
- }, function() {
- return _this4.props.onOuterClick(_this4.getStateAndHelpers());
- });
- }, onTouchStart = function() {
- _this4.isTouchMove = !1;
- }, onTouchMove = function() {
- _this4.isTouchMove = !0;
- }, onTouchEnd = function(event) {
- var contextWithinDownshift = targetWithinDownshift(event.target, [_this4._rootNode, _this4._menuNode], _this4.props.environment, !1);
- !_this4.isTouchMove && !contextWithinDownshift && _this4.getState().isOpen && _this4.reset({
- type: touchEnd
- }, function() {
- return _this4.props.onOuterClick(_this4.getStateAndHelpers());
- });
- }, environment = this.props.environment;
- environment.addEventListener("mousedown", onMouseDown), environment.addEventListener("mouseup", onMouseUp), environment.addEventListener("touchstart", onTouchStart), environment.addEventListener("touchmove", onTouchMove), environment.addEventListener("touchend", onTouchEnd), this.cleanup = function() {
- _this4.internalClearTimeouts(), _this4.updateStatus.cancel(), environment.removeEventListener("mousedown", onMouseDown), environment.removeEventListener("mouseup", onMouseUp), environment.removeEventListener("touchstart", onTouchStart), environment.removeEventListener("touchmove", onTouchMove), environment.removeEventListener("touchend", onTouchEnd);
- };
- }
- }, _proto.shouldScroll = function(prevState, prevProps) {
- var _ref0 = this.props.highlightedIndex === void 0 ? this.getState() : this.props, currentHighlightedIndex = _ref0.highlightedIndex, _ref1 = prevProps.highlightedIndex === void 0 ? prevState : prevProps, prevHighlightedIndex = _ref1.highlightedIndex, scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen, scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
- return scrollWhenOpen || scrollWhenNavigating;
- }, _proto.componentDidUpdate = function(prevProps, prevState) {
- isControlledProp(this.props, "selectedItem") && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem) && this.internalSetState({
- type: controlledPropUpdatedSelectedItem,
- inputValue: this.props.itemToString(this.props.selectedItem)
- }), !this.avoidScrolling && this.shouldScroll(prevState, prevProps) && this.scrollHighlightedItemIntoView(), this.updateStatus();
- }, _proto.componentWillUnmount = function() {
- this.cleanup();
- }, _proto.render = function() {
- var children = unwrapArray(this.props.children, noop4);
- this.clearItems(), this.getRootProps.called = !1, this.getRootProps.refKey = void 0, this.getRootProps.suppressRefError = void 0, this.getMenuProps.called = !1, this.getMenuProps.refKey = void 0, this.getMenuProps.suppressRefError = void 0, this.getLabelProps.called = !1, this.getInputProps.called = !1;
- var element = unwrapArray(children(this.getStateAndHelpers()));
- if (!element)
- return null;
- if (this.getRootProps.called || this.props.suppressRefError)
- return element;
- if (isDOMElement(element))
- return cloneElement(element, this.getRootProps(getElementProps(element)));
- }, Downshift3;
- })(Component);
- return Downshift2.defaultProps = {
- defaultHighlightedIndex: null,
- defaultIsOpen: !1,
- getA11yStatusMessage,
- itemToString: function(i2) {
- return i2 == null ? "" : String(i2);
- },
- onStateChange: noop4,
- onInputValueChange: noop4,
- onUserAction: noop4,
- onChange: noop4,
- onSelect: noop4,
- onOuterClick: noop4,
- selectedItemChanged: function(prevItem, item) {
- return prevItem !== item;
- },
- environment: (
- /* istanbul ignore next (ssr) */
- typeof window > "u" ? void 0 : window
- ),
- stateReducer: function(state, stateToSet) {
- return stateToSet;
- },
- suppressRefError: !1,
- scrollIntoView: scrollIntoView2
- }, Downshift2.stateChangeTypes = stateChangeTypes$3, Downshift2;
- })();
- var dropdownDefaultStateValues = {
- highlightedIndex: -1,
- isOpen: !1,
- selectedItem: null,
- inputValue: ""
- };
- function callOnChangeProps(action, state, newState) {
- var props = action.props, type = action.type, changes = {};
- Object.keys(state).forEach(function(key) {
- invokeOnChangeHandler(key, action, state, newState), newState[key] !== state[key] && (changes[key] = newState[key]);
- }), props.onStateChange && Object.keys(changes).length && props.onStateChange(_extends({
- type
- }, changes));
- }
- function invokeOnChangeHandler(key, action, state, newState) {
- var props = action.props, type = action.type, handler = "on" + capitalizeString(key) + "Change";
- props[handler] && newState[key] !== void 0 && newState[key] !== state[key] && props[handler](_extends({
- type
- }, newState));
- }
- function stateReducer(s2, a2) {
- return a2.changes;
- }
- var updateA11yStatus = debounce4(function(status, document11) {
- setStatus(status, document11);
- }, 200), useIsomorphicLayoutEffect2 = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u" ? useLayoutEffect : useEffect, useElementIds = "useId" in react_default ? function(_ref) {
- var id = _ref.id, labelId = _ref.labelId, menuId = _ref.menuId, getItemId = _ref.getItemId, toggleButtonId = _ref.toggleButtonId, inputId = _ref.inputId, reactId = "downshift-" + react_default.useId();
- id || (id = reactId);
- var elementIdsRef = useRef({
- labelId: labelId || id + "-label",
- menuId: menuId || id + "-menu",
- getItemId: getItemId || function(index) {
- return id + "-item-" + index;
- },
- toggleButtonId: toggleButtonId || id + "-toggle-button",
- inputId: inputId || id + "-input"
- });
- return elementIdsRef.current;
- } : function(_ref2) {
- var _ref2$id = _ref2.id, id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id, labelId = _ref2.labelId, menuId = _ref2.menuId, getItemId = _ref2.getItemId, toggleButtonId = _ref2.toggleButtonId, inputId = _ref2.inputId, elementIdsRef = useRef({
- labelId: labelId || id + "-label",
- menuId: menuId || id + "-menu",
- getItemId: getItemId || function(index) {
- return id + "-item-" + index;
- },
- toggleButtonId: toggleButtonId || id + "-toggle-button",
- inputId: inputId || id + "-input"
- });
- return elementIdsRef.current;
- };
- function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
- var item, index;
- if (itemProp === void 0) {
- if (indexProp === void 0)
- throw new Error(errorMessage);
- item = items[indexProp], index = indexProp;
- } else
- index = indexProp === void 0 ? items.indexOf(itemProp) : indexProp, item = itemProp;
- return [item, index];
- }
- function isAcceptedCharacterKey(key) {
- return /^\S{1}$/.test(key);
- }
- function capitalizeString(string) {
- return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
- }
- function useLatestRef(val) {
- var ref = useRef(val);
- return ref.current = val, ref;
- }
- function useEnhancedReducer(reducer, props, createInitialState, isStateEqual2) {
- var prevStateRef = useRef(), actionRef = useRef(), enhancedReducer = useCallback(function(state2, action2) {
- actionRef.current = action2, state2 = getState2(state2, action2.props);
- var changes = reducer(state2, action2), newState = action2.props.stateReducer(state2, _extends({}, action2, {
- changes
- }));
- return newState;
- }, [reducer]), _useReducer = useReducer(enhancedReducer, props, createInitialState), state = _useReducer[0], dispatch = _useReducer[1], propsRef = useLatestRef(props), dispatchWithProps = useCallback(function(action2) {
- return dispatch(_extends({
- props: propsRef.current
- }, action2));
- }, [propsRef]), action = actionRef.current;
- return useEffect(function() {
- var prevState = getState2(prevStateRef.current, action?.props), shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual2(prevState, state);
- shouldCallOnChangeProps && callOnChangeProps(action, prevState, state), prevStateRef.current = state;
- }, [state, action, isStateEqual2]), [state, dispatchWithProps];
- }
- function useControlledReducer$1(reducer, props, createInitialState, isStateEqual2) {
- var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual2), state = _useEnhancedReducer[0], dispatch = _useEnhancedReducer[1];
- return [getState2(state, props), dispatch];
- }
- var defaultProps$3 = {
- itemToString: function(item) {
- return item ? String(item) : "";
- },
- itemToKey: function(item) {
- return item;
- },
- stateReducer,
- scrollIntoView: scrollIntoView2,
- environment: (
- /* istanbul ignore next (ssr) */
- typeof window > "u" ? void 0 : window
- )
- };
- function getDefaultValue$1(props, propKey, defaultStateValues2) {
- defaultStateValues2 === void 0 && (defaultStateValues2 = dropdownDefaultStateValues);
- var defaultValue = props["default" + capitalizeString(propKey)];
- return defaultValue !== void 0 ? defaultValue : defaultStateValues2[propKey];
- }
- function getInitialValue$1(props, propKey, defaultStateValues2) {
- defaultStateValues2 === void 0 && (defaultStateValues2 = dropdownDefaultStateValues);
- var value = props[propKey];
- if (value !== void 0)
- return value;
- var initialValue = props["initial" + capitalizeString(propKey)];
- return initialValue !== void 0 ? initialValue : getDefaultValue$1(props, propKey, defaultStateValues2);
- }
- function getInitialState$2(props) {
- var selectedItem = getInitialValue$1(props, "selectedItem"), isOpen = getInitialValue$1(props, "isOpen"), highlightedIndex = getInitialHighlightedIndex(props), inputValue = getInitialValue$1(props, "inputValue");
- return {
- highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function(item) {
- return props.itemToKey(item) === props.itemToKey(selectedItem);
- }) : highlightedIndex,
- isOpen,
- selectedItem,
- inputValue
- };
- }
- function getHighlightedIndexOnOpen(props, state, offset2) {
- var items = props.items, initialHighlightedIndex = props.initialHighlightedIndex, defaultHighlightedIndex = props.defaultHighlightedIndex, isItemDisabled2 = props.isItemDisabled, itemToKey2 = props.itemToKey, selectedItem = state.selectedItem, highlightedIndex = state.highlightedIndex;
- return items.length === 0 ? -1 : initialHighlightedIndex !== void 0 && highlightedIndex === initialHighlightedIndex && !isItemDisabled2(items[initialHighlightedIndex], initialHighlightedIndex) ? initialHighlightedIndex : defaultHighlightedIndex !== void 0 && !isItemDisabled2(items[defaultHighlightedIndex], defaultHighlightedIndex) ? defaultHighlightedIndex : selectedItem ? items.findIndex(function(item) {
- return itemToKey2(selectedItem) === itemToKey2(item);
- }) : offset2 < 0 && !isItemDisabled2(items[items.length - 1], items.length - 1) ? items.length - 1 : offset2 > 0 && !isItemDisabled2(items[0], 0) ? 0 : -1;
- }
- function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
- var mouseAndTouchTrackersRef = useRef({
- isMouseDown: !1,
- isTouchMove: !1,
- isTouchEnd: !1
- });
- return useEffect(function() {
- if (!environment)
- return noop4;
- var downshiftElements = downshiftElementsRefs.map(function(ref) {
- return ref.current;
- });
- function onMouseDown() {
- mouseAndTouchTrackersRef.current.isTouchEnd = !1, mouseAndTouchTrackersRef.current.isMouseDown = !0;
- }
- function onMouseUp(event) {
- mouseAndTouchTrackersRef.current.isMouseDown = !1, targetWithinDownshift(event.target, downshiftElements, environment) || handleBlur();
- }
- function onTouchStart() {
- mouseAndTouchTrackersRef.current.isTouchEnd = !1, mouseAndTouchTrackersRef.current.isTouchMove = !1;
- }
- function onTouchMove() {
- mouseAndTouchTrackersRef.current.isTouchMove = !0;
- }
- function onTouchEnd(event) {
- mouseAndTouchTrackersRef.current.isTouchEnd = !0, !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, !1) && handleBlur();
- }
- return environment.addEventListener("mousedown", onMouseDown), environment.addEventListener("mouseup", onMouseUp), environment.addEventListener("touchstart", onTouchStart), environment.addEventListener("touchmove", onTouchMove), environment.addEventListener("touchend", onTouchEnd), function() {
- environment.removeEventListener("mousedown", onMouseDown), environment.removeEventListener("mouseup", onMouseUp), environment.removeEventListener("touchstart", onTouchStart), environment.removeEventListener("touchmove", onTouchMove), environment.removeEventListener("touchend", onTouchEnd);
- };
- }, [downshiftElementsRefs, environment, handleBlur]), mouseAndTouchTrackersRef.current;
- }
- var useGetterPropsCalledChecker = function() {
- return noop4;
- };
- function useA11yMessageStatus(getA11yStatusMessage2, options2, dependencyArray, environment) {
- environment === void 0 && (environment = {});
- var document11 = environment.document, isInitialMount = useIsInitialMount();
- useEffect(function() {
- if (!(!getA11yStatusMessage2 || isInitialMount || !document11)) {
- var status = getA11yStatusMessage2(options2);
- updateA11yStatus(status, document11);
- }
- }, dependencyArray), useEffect(function() {
- return function() {
- updateA11yStatus.cancel(), cleanupStatusDiv(document11);
- };
- }, [document11]);
- }
- function useScrollIntoView(_ref3) {
- var highlightedIndex = _ref3.highlightedIndex, isOpen = _ref3.isOpen, itemRefs = _ref3.itemRefs, getItemNodeFromIndex = _ref3.getItemNodeFromIndex, menuElement = _ref3.menuElement, scrollIntoViewProp = _ref3.scrollIntoView, shouldScrollRef = useRef(!0);
- return useIsomorphicLayoutEffect2(function() {
- highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length || (shouldScrollRef.current === !1 ? shouldScrollRef.current = !0 : scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement));
- }, [highlightedIndex]), shouldScrollRef;
- }
- var useControlPropsValidator = noop4;
- function getChangesOnSelection(props, highlightedIndex, inputValue) {
- var _props$items;
- inputValue === void 0 && (inputValue = !0);
- var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
- return _extends({
- isOpen: !1,
- highlightedIndex: -1
- }, shouldSelect && _extends({
- selectedItem: props.items[highlightedIndex],
- isOpen: getDefaultValue$1(props, "isOpen"),
- highlightedIndex: getDefaultValue$1(props, "highlightedIndex")
- }, inputValue && {
- inputValue: props.itemToString(props.items[highlightedIndex])
- }));
- }
- function isDropdownsStateEqual(prevState, newState) {
- return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
- }
- function useIsInitialMount() {
- var isInitialMountRef = react_default.useRef(!0);
- return react_default.useEffect(function() {
- return isInitialMountRef.current = !1, function() {
- isInitialMountRef.current = !0;
- };
- }, []), isInitialMountRef.current;
- }
- function getDefaultHighlightedIndex(props) {
- var highlightedIndex = getDefaultValue$1(props, "highlightedIndex");
- return highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex) ? -1 : highlightedIndex;
- }
- function getInitialHighlightedIndex(props) {
- var highlightedIndex = getInitialValue$1(props, "highlightedIndex");
- return highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex) ? -1 : highlightedIndex;
- }
- var commonPropTypes = {
- environment: import_prop_types3.default.shape({
- addEventListener: import_prop_types3.default.func.isRequired,
- removeEventListener: import_prop_types3.default.func.isRequired,
- document: import_prop_types3.default.shape({
- createElement: import_prop_types3.default.func.isRequired,
- getElementById: import_prop_types3.default.func.isRequired,
- activeElement: import_prop_types3.default.any.isRequired,
- body: import_prop_types3.default.any.isRequired
- }).isRequired,
- Node: import_prop_types3.default.func.isRequired
- }),
- itemToString: import_prop_types3.default.func,
- itemToKey: import_prop_types3.default.func,
- stateReducer: import_prop_types3.default.func
- }, commonDropdownPropTypes = _extends({}, commonPropTypes, {
- getA11yStatusMessage: import_prop_types3.default.func,
- highlightedIndex: import_prop_types3.default.number,
- defaultHighlightedIndex: import_prop_types3.default.number,
- initialHighlightedIndex: import_prop_types3.default.number,
- isOpen: import_prop_types3.default.bool,
- defaultIsOpen: import_prop_types3.default.bool,
- initialIsOpen: import_prop_types3.default.bool,
- selectedItem: import_prop_types3.default.any,
- initialSelectedItem: import_prop_types3.default.any,
- defaultSelectedItem: import_prop_types3.default.any,
- id: import_prop_types3.default.string,
- labelId: import_prop_types3.default.string,
- menuId: import_prop_types3.default.string,
- getItemId: import_prop_types3.default.func,
- toggleButtonId: import_prop_types3.default.string,
- onSelectedItemChange: import_prop_types3.default.func,
- onHighlightedIndexChange: import_prop_types3.default.func,
- onStateChange: import_prop_types3.default.func,
- onIsOpenChange: import_prop_types3.default.func,
- scrollIntoView: import_prop_types3.default.func
- });
- function downshiftCommonReducer(state, action, stateChangeTypes2) {
- var type = action.type, props = action.props, changes;
- switch (type) {
- case stateChangeTypes2.ItemMouseMove:
- changes = {
- highlightedIndex: action.disabled ? -1 : action.index
- };
- break;
- case stateChangeTypes2.MenuMouseLeave:
- changes = {
- highlightedIndex: -1
- };
- break;
- case stateChangeTypes2.ToggleButtonClick:
- case stateChangeTypes2.FunctionToggleMenu:
- changes = {
- isOpen: !state.isOpen,
- highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
- };
- break;
- case stateChangeTypes2.FunctionOpenMenu:
- changes = {
- isOpen: !0,
- highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
- };
- break;
- case stateChangeTypes2.FunctionCloseMenu:
- changes = {
- isOpen: !1
- };
- break;
- case stateChangeTypes2.FunctionSetHighlightedIndex:
- changes = {
- highlightedIndex: props.isItemDisabled(props.items[action.highlightedIndex], action.highlightedIndex) ? -1 : action.highlightedIndex
- };
- break;
- case stateChangeTypes2.FunctionSetInputValue:
- changes = {
- inputValue: action.inputValue
- };
- break;
- case stateChangeTypes2.FunctionReset:
- changes = {
- highlightedIndex: getDefaultHighlightedIndex(props),
- isOpen: getDefaultValue$1(props, "isOpen"),
- selectedItem: getDefaultValue$1(props, "selectedItem"),
- inputValue: getDefaultValue$1(props, "inputValue")
- };
- break;
- default:
- throw new Error("Reducer called without proper action type.");
- }
- return _extends({}, state, changes);
- }
- function getItemIndexByCharacterKey(_a2) {
- for (var keysSoFar = _a2.keysSoFar, highlightedIndex = _a2.highlightedIndex, items = _a2.items, itemToString2 = _a2.itemToString, isItemDisabled2 = _a2.isItemDisabled, lowerCasedKeysSoFar = keysSoFar.toLowerCase(), index = 0; index < items.length; index++) {
- var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length, item = items[offsetIndex];
- if (item !== void 0 && itemToString2(item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled2(item, offsetIndex))
- return offsetIndex;
- }
- return highlightedIndex;
- }
- var propTypes$2 = __assign(__assign({}, commonDropdownPropTypes), { items: import_prop_types3.default.array.isRequired, isItemDisabled: import_prop_types3.default.func }), defaultProps$2 = __assign(__assign({}, defaultProps$3), { isItemDisabled: function() {
- return !1;
- } }), validatePropTypes$2 = noop4, ToggleButtonClick$1 = 0, ToggleButtonKeyDownArrowDown = 1, ToggleButtonKeyDownArrowUp = 2, ToggleButtonKeyDownCharacter = 3, ToggleButtonKeyDownEscape = 4, ToggleButtonKeyDownHome = 5, ToggleButtonKeyDownEnd = 6, ToggleButtonKeyDownEnter = 7, ToggleButtonKeyDownSpaceButton = 8, ToggleButtonKeyDownPageUp = 9, ToggleButtonKeyDownPageDown = 10, ToggleButtonBlur = 11, MenuMouseLeave$1 = 12, ItemMouseMove$1 = 13, ItemClick$1 = 14, FunctionToggleMenu$1 = 15, FunctionOpenMenu$1 = 16, FunctionCloseMenu$1 = 17, FunctionSetHighlightedIndex$1 = 18, FunctionSelectItem$1 = 19, FunctionSetInputValue$1 = 20, FunctionReset$2 = 21, stateChangeTypes$2 = Object.freeze({
- __proto__: null,
- FunctionCloseMenu: FunctionCloseMenu$1,
- FunctionOpenMenu: FunctionOpenMenu$1,
- FunctionReset: FunctionReset$2,
- FunctionSelectItem: FunctionSelectItem$1,
- FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
- FunctionSetInputValue: FunctionSetInputValue$1,
- FunctionToggleMenu: FunctionToggleMenu$1,
- ItemClick: ItemClick$1,
- ItemMouseMove: ItemMouseMove$1,
- MenuMouseLeave: MenuMouseLeave$1,
- ToggleButtonBlur,
- ToggleButtonClick: ToggleButtonClick$1,
- ToggleButtonKeyDownArrowDown,
- ToggleButtonKeyDownArrowUp,
- ToggleButtonKeyDownCharacter,
- ToggleButtonKeyDownEnd,
- ToggleButtonKeyDownEnter,
- ToggleButtonKeyDownEscape,
- ToggleButtonKeyDownHome,
- ToggleButtonKeyDownPageDown,
- ToggleButtonKeyDownPageUp,
- ToggleButtonKeyDownSpaceButton
- });
- function downshiftSelectReducer(state, action) {
- var _props$items, type = action.type, props = action.props, altKey = action.altKey, changes;
- switch (type) {
- case ItemClick$1:
- changes = {
- isOpen: getDefaultValue$1(props, "isOpen"),
- highlightedIndex: getDefaultHighlightedIndex(props),
- selectedItem: props.items[action.index]
- };
- break;
- case ToggleButtonKeyDownCharacter:
- {
- var lowercasedKey = action.key, inputValue = "" + state.inputValue + lowercasedKey, prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.findIndex(function(item) {
- return props.itemToKey(item) === props.itemToKey(state.selectedItem);
- }) : state.highlightedIndex, highlightedIndex = getItemIndexByCharacterKey({
- keysSoFar: inputValue,
- highlightedIndex: prevHighlightedIndex,
- items: props.items,
- itemToString: props.itemToString,
- isItemDisabled: props.isItemDisabled
- });
- changes = {
- inputValue,
- highlightedIndex,
- isOpen: !0
- };
- }
- break;
- case ToggleButtonKeyDownArrowDown:
- {
- var _highlightedIndex = state.isOpen ? getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
- changes = {
- highlightedIndex: _highlightedIndex,
- isOpen: !0
- };
- }
- break;
- case ToggleButtonKeyDownArrowUp:
- if (state.isOpen && altKey)
- changes = getChangesOnSelection(props, state.highlightedIndex, !1);
- else {
- var _highlightedIndex2 = state.isOpen ? getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled) : getHighlightedIndexOnOpen(props, state, -1);
- changes = {
- highlightedIndex: _highlightedIndex2,
- isOpen: !0
- };
- }
- break;
- // only triggered when menu is open.
- case ToggleButtonKeyDownEnter:
- case ToggleButtonKeyDownSpaceButton:
- changes = getChangesOnSelection(props, state.highlightedIndex, !1);
- break;
- case ToggleButtonKeyDownHome:
- changes = {
- highlightedIndex: getNonDisabledIndex(0, !1, props.items, props.isItemDisabled),
- isOpen: !0
- };
- break;
- case ToggleButtonKeyDownEnd:
- changes = {
- highlightedIndex: getNonDisabledIndex(props.items.length - 1, !0, props.items, props.isItemDisabled),
- isOpen: !0
- };
- break;
- case ToggleButtonKeyDownPageUp:
- changes = {
- highlightedIndex: getHighlightedIndex(state.highlightedIndex, -10, props.items, props.isItemDisabled)
- };
- break;
- case ToggleButtonKeyDownPageDown:
- changes = {
- highlightedIndex: getHighlightedIndex(state.highlightedIndex, 10, props.items, props.isItemDisabled)
- };
- break;
- case ToggleButtonKeyDownEscape:
- changes = {
- isOpen: !1,
- highlightedIndex: -1
- };
- break;
- case ToggleButtonBlur:
- changes = _extends({
- isOpen: !1,
- highlightedIndex: -1
- }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
- selectedItem: props.items[state.highlightedIndex]
- });
- break;
- case FunctionSelectItem$1:
- changes = {
- selectedItem: action.selectedItem
- };
- break;
- default:
- return downshiftCommonReducer(state, action, stateChangeTypes$2);
- }
- return _extends({}, state, changes);
- }
- var _excluded$2 = ["onClick"], _excluded2$2 = ["onMouseLeave", "refKey", "ref"], _excluded3$1 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"], _excluded4$1 = ["item", "index", "onMouseMove", "onClick", "onMouseDown", "onPress", "refKey", "disabled", "ref"];
- useSelect.stateChangeTypes = stateChangeTypes$2;
- function useSelect(userProps) {
- userProps === void 0 && (userProps = {}), validatePropTypes$2(userProps, useSelect);
- var props = _extends({}, defaultProps$2, userProps), scrollIntoView3 = props.scrollIntoView, environment = props.environment, getA11yStatusMessage2 = props.getA11yStatusMessage, _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual), state = _useControlledReducer[0], dispatch = _useControlledReducer[1], isOpen = state.isOpen, highlightedIndex = state.highlightedIndex, selectedItem = state.selectedItem, inputValue = state.inputValue, toggleButtonRef = useRef(null), menuRef = useRef(null), itemRefs = useRef({}), clearTimeoutRef = useRef(null), elementIds = useElementIds(props), latest = useLatestRef({
- state,
- props
- }), getItemNodeFromIndex = useCallback(function(index) {
- return itemRefs.current[elementIds.getItemId(index)];
- }, [elementIds]);
- useA11yMessageStatus(getA11yStatusMessage2, state, [isOpen, highlightedIndex, selectedItem, inputValue], environment);
- var shouldScrollRef = useScrollIntoView({
- menuElement: menuRef.current,
- highlightedIndex,
- isOpen,
- itemRefs,
- scrollIntoView: scrollIntoView3,
- getItemNodeFromIndex
- });
- useEffect(function() {
- return clearTimeoutRef.current = debounce4(function(outerDispatch) {
- outerDispatch({
- type: FunctionSetInputValue$1,
- inputValue: ""
- });
- }, 500), function() {
- clearTimeoutRef.current.cancel();
- };
- }, []), useEffect(function() {
- inputValue && clearTimeoutRef.current(dispatch);
- }, [dispatch, inputValue]), useControlPropsValidator({
- props,
- state
- }), useEffect(function() {
- var focusOnOpen = getInitialValue$1(props, "isOpen");
- focusOnOpen && toggleButtonRef.current && toggleButtonRef.current.focus();
- }, []);
- var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, useCallback(function() {
- latest.current.state.isOpen && dispatch({
- type: ToggleButtonBlur
- });
- }, [dispatch, latest]), useMemo(function() {
- return [menuRef, toggleButtonRef];
- }, [menuRef.current, toggleButtonRef.current])), setGetterPropCallInfo = useGetterPropsCalledChecker("getMenuProps", "getToggleButtonProps");
- useEffect(function() {
- isOpen || (itemRefs.current = {});
- }, [isOpen]);
- var toggleButtonKeyDownHandlers = useMemo(function() {
- return {
- ArrowDown: function(event) {
- event.preventDefault(), dispatch({
- type: ToggleButtonKeyDownArrowDown,
- altKey: event.altKey
- });
- },
- ArrowUp: function(event) {
- event.preventDefault(), dispatch({
- type: ToggleButtonKeyDownArrowUp,
- altKey: event.altKey
- });
- },
- Home: function(event) {
- event.preventDefault(), dispatch({
- type: ToggleButtonKeyDownHome
- });
- },
- End: function(event) {
- event.preventDefault(), dispatch({
- type: ToggleButtonKeyDownEnd
- });
- },
- Escape: function() {
- latest.current.state.isOpen && dispatch({
- type: ToggleButtonKeyDownEscape
- });
- },
- Enter: function(event) {
- event.preventDefault(), dispatch({
- type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
- });
- },
- PageUp: function(event) {
- latest.current.state.isOpen && (event.preventDefault(), dispatch({
- type: ToggleButtonKeyDownPageUp
- }));
- },
- PageDown: function(event) {
- latest.current.state.isOpen && (event.preventDefault(), dispatch({
- type: ToggleButtonKeyDownPageDown
- }));
- },
- " ": function(event) {
- event.preventDefault();
- var currentState = latest.current.state;
- if (!currentState.isOpen) {
- dispatch({
- type: ToggleButtonClick$1
- });
- return;
- }
- currentState.inputValue ? dispatch({
- type: ToggleButtonKeyDownCharacter,
- key: " "
- }) : dispatch({
- type: ToggleButtonKeyDownSpaceButton
- });
- }
- };
- }, [dispatch, latest]), toggleMenu = useCallback(function() {
- dispatch({
- type: FunctionToggleMenu$1
- });
- }, [dispatch]), closeMenu = useCallback(function() {
- dispatch({
- type: FunctionCloseMenu$1
- });
- }, [dispatch]), openMenu = useCallback(function() {
- dispatch({
- type: FunctionOpenMenu$1
- });
- }, [dispatch]), setHighlightedIndex = useCallback(function(newHighlightedIndex) {
- dispatch({
- type: FunctionSetHighlightedIndex$1,
- highlightedIndex: newHighlightedIndex
- });
- }, [dispatch]), selectItem = useCallback(function(newSelectedItem) {
- dispatch({
- type: FunctionSelectItem$1,
- selectedItem: newSelectedItem
- });
- }, [dispatch]), reset = useCallback(function() {
- dispatch({
- type: FunctionReset$2
- });
- }, [dispatch]), setInputValue = useCallback(function(newInputValue) {
- dispatch({
- type: FunctionSetInputValue$1,
- inputValue: newInputValue
- });
- }, [dispatch]), getLabelProps = useCallback(function(_temp) {
- var _ref = _temp === void 0 ? {} : _temp, onClick = _ref.onClick, labelProps = _objectWithoutPropertiesLoose2(_ref, _excluded$2), labelHandleClick = function() {
- var _toggleButtonRef$curr;
- (_toggleButtonRef$curr = toggleButtonRef.current) == null || _toggleButtonRef$curr.focus();
- };
- return _extends({
- id: elementIds.labelId,
- htmlFor: elementIds.toggleButtonId,
- onClick: callAllEventHandlers(onClick, labelHandleClick)
- }, labelProps);
- }, [elementIds]), getMenuProps = useCallback(function(_temp2, _temp3) {
- var _extends22, _ref2 = _temp2 === void 0 ? {} : _temp2, onMouseLeave = _ref2.onMouseLeave, _ref2$refKey = _ref2.refKey, refKey = _ref2$refKey === void 0 ? "ref" : _ref2$refKey, ref = _ref2.ref, rest2 = _objectWithoutPropertiesLoose2(_ref2, _excluded2$2), _ref3 = _temp3 === void 0 ? {} : _temp3, _ref3$suppressRefErro = _ref3.suppressRefError, suppressRefError = _ref3$suppressRefErro === void 0 ? !1 : _ref3$suppressRefErro, menuHandleMouseLeave = function() {
- dispatch({
- type: MenuMouseLeave$1
- });
- };
- return setGetterPropCallInfo("getMenuProps", suppressRefError, refKey, menuRef), _extends((_extends22 = {}, _extends22[refKey] = handleRefs(ref, function(menuNode) {
- menuRef.current = menuNode;
- }), _extends22.id = elementIds.menuId, _extends22.role = "listbox", _extends22["aria-labelledby"] = rest2 && rest2["aria-label"] ? void 0 : "" + elementIds.labelId, _extends22.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends22), rest2);
- }, [dispatch, setGetterPropCallInfo, elementIds]), getToggleButtonProps = useCallback(function(_temp4, _temp5) {
- var _extends3, _ref4 = _temp4 === void 0 ? {} : _temp4, onBlur = _ref4.onBlur, onClick = _ref4.onClick;
- _ref4.onPress;
- var onKeyDown = _ref4.onKeyDown, _ref4$refKey = _ref4.refKey, refKey = _ref4$refKey === void 0 ? "ref" : _ref4$refKey, ref = _ref4.ref, rest2 = _objectWithoutPropertiesLoose2(_ref4, _excluded3$1), _ref5 = _temp5 === void 0 ? {} : _temp5, _ref5$suppressRefErro = _ref5.suppressRefError, suppressRefError = _ref5$suppressRefErro === void 0 ? !1 : _ref5$suppressRefErro, latestState = latest.current.state, toggleButtonHandleClick = function() {
- dispatch({
- type: ToggleButtonClick$1
- });
- }, toggleButtonHandleBlur = function() {
- latestState.isOpen && !mouseAndTouchTrackers.isMouseDown && dispatch({
- type: ToggleButtonBlur
- });
- }, toggleButtonHandleKeyDown = function(event) {
- var key = normalizeArrowKey(event);
- key && toggleButtonKeyDownHandlers[key] ? toggleButtonKeyDownHandlers[key](event) : isAcceptedCharacterKey(key) && dispatch({
- type: ToggleButtonKeyDownCharacter,
- key
- });
- }, toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function(toggleButtonNode) {
- toggleButtonRef.current = toggleButtonNode;
- }), _extends3["aria-activedescendant"] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : "", _extends3["aria-controls"] = elementIds.menuId, _extends3["aria-expanded"] = latest.current.state.isOpen, _extends3["aria-haspopup"] = "listbox", _extends3["aria-labelledby"] = rest2 && rest2["aria-label"] ? void 0 : "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = "combobox", _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3), rest2);
- return rest2.disabled || (toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick), toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown)), setGetterPropCallInfo("getToggleButtonProps", suppressRefError, refKey, toggleButtonRef), toggleProps;
- }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]), getItemProps = useCallback(function(_temp6) {
- var _extends4, _ref6 = _temp6 === void 0 ? {} : _temp6, itemProp = _ref6.item, indexProp = _ref6.index, onMouseMove = _ref6.onMouseMove, onClick = _ref6.onClick, onMouseDown = _ref6.onMouseDown;
- _ref6.onPress;
- var _ref6$refKey = _ref6.refKey, refKey = _ref6$refKey === void 0 ? "ref" : _ref6$refKey, disabledProp = _ref6.disabled, ref = _ref6.ref, rest2 = _objectWithoutPropertiesLoose2(_ref6, _excluded4$1);
- disabledProp !== void 0 && console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useSelect.');
- var _latest$current = latest.current, latestState = _latest$current.state, latestProps = _latest$current.props, _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, "Pass either item or index to getItemProps!"), item = _getItemAndIndex[0], index = _getItemAndIndex[1], disabled = latestProps.isItemDisabled(item, index), itemHandleMouseMove = function() {
- mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex || (shouldScrollRef.current = !1, dispatch({
- type: ItemMouseMove$1,
- index,
- disabled
- }));
- }, itemHandleClick = function() {
- dispatch({
- type: ItemClick$1,
- index
- });
- }, itemHandleMouseDown = function(e2) {
- return e2.preventDefault();
- }, itemProps = _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function(itemNode) {
- itemNode && (itemRefs.current[elementIds.getItemId(index)] = itemNode);
- }), _extends4["aria-disabled"] = disabled, _extends4["aria-selected"] = item === latestState.selectedItem, _extends4.id = elementIds.getItemId(index), _extends4.role = "option", _extends4), rest2);
- return disabled || (itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick)), itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove), itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown), itemProps;
- }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
- return {
- // prop getters.
- getToggleButtonProps,
- getLabelProps,
- getMenuProps,
- getItemProps,
- // actions.
- toggleMenu,
- openMenu,
- closeMenu,
- setHighlightedIndex,
- selectItem,
- reset,
- setInputValue,
- // state.
- highlightedIndex,
- isOpen,
- selectedItem,
- inputValue
- };
- }
- var InputKeyDownArrowDown = 0, InputKeyDownArrowUp = 1, InputKeyDownEscape = 2, InputKeyDownHome = 3, InputKeyDownEnd = 4, InputKeyDownPageUp = 5, InputKeyDownPageDown = 6, InputKeyDownEnter = 7, InputChange = 8, InputBlur = 9, InputClick = 10, MenuMouseLeave = 11, ItemMouseMove = 12, ItemClick = 13, ToggleButtonClick = 14, FunctionToggleMenu = 15, FunctionOpenMenu = 16, FunctionCloseMenu = 17, FunctionSetHighlightedIndex = 18, FunctionSelectItem = 19, FunctionSetInputValue = 20, FunctionReset$1 = 21, ControlledPropUpdatedSelectedItem = 22, stateChangeTypes$1 = Object.freeze({
- __proto__: null,
- ControlledPropUpdatedSelectedItem,
- FunctionCloseMenu,
- FunctionOpenMenu,
- FunctionReset: FunctionReset$1,
- FunctionSelectItem,
- FunctionSetHighlightedIndex,
- FunctionSetInputValue,
- FunctionToggleMenu,
- InputBlur,
- InputChange,
- InputClick,
- InputKeyDownArrowDown,
- InputKeyDownArrowUp,
- InputKeyDownEnd,
- InputKeyDownEnter,
- InputKeyDownEscape,
- InputKeyDownHome,
- InputKeyDownPageDown,
- InputKeyDownPageUp,
- ItemClick,
- ItemMouseMove,
- MenuMouseLeave,
- ToggleButtonClick
- });
- function getInitialState$1(props) {
- var initialState = getInitialState$2(props), selectedItem = initialState.selectedItem, inputValue = initialState.inputValue;
- return inputValue === "" && selectedItem && props.defaultInputValue === void 0 && props.initialInputValue === void 0 && props.inputValue === void 0 && (inputValue = props.itemToString(selectedItem)), _extends({}, initialState, {
- inputValue
- });
- }
- var propTypes$1 = _extends({}, commonDropdownPropTypes, {
- items: import_prop_types3.default.array.isRequired,
- isItemDisabled: import_prop_types3.default.func,
- inputValue: import_prop_types3.default.string,
- defaultInputValue: import_prop_types3.default.string,
- initialInputValue: import_prop_types3.default.string,
- inputId: import_prop_types3.default.string,
- onInputValueChange: import_prop_types3.default.func
- });
- function useControlledReducer(reducer, props, createInitialState, isStateEqual2) {
- var previousSelectedItemRef = useRef(), _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual2), state = _useEnhancedReducer[0], dispatch = _useEnhancedReducer[1], isInitialMount = useIsInitialMount();
- return useEffect(function() {
- if (isControlledProp(props, "selectedItem")) {
- if (!isInitialMount) {
- var shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
- shouldCallDispatch && dispatch({
- type: ControlledPropUpdatedSelectedItem,
- inputValue: props.itemToString(props.selectedItem)
- });
- }
- previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
- }
- }, [state.selectedItem, props.selectedItem]), [getState2(state, props), dispatch];
- }
- var validatePropTypes$1 = noop4, defaultProps$1 = _extends({}, defaultProps$3, {
- isItemDisabled: function() {
- return !1;
- }
- });
- function downshiftUseComboboxReducer(state, action) {
- var _props$items, type = action.type, props = action.props, altKey = action.altKey, changes;
- switch (type) {
- case ItemClick:
- changes = {
- isOpen: getDefaultValue$1(props, "isOpen"),
- highlightedIndex: getDefaultHighlightedIndex(props),
- selectedItem: props.items[action.index],
- inputValue: props.itemToString(props.items[action.index])
- };
- break;
- case InputKeyDownArrowDown:
- state.isOpen ? changes = {
- highlightedIndex: getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled, !0)
- } : changes = {
- highlightedIndex: altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1),
- isOpen: props.items.length >= 0
- };
- break;
- case InputKeyDownArrowUp:
- state.isOpen ? altKey ? changes = getChangesOnSelection(props, state.highlightedIndex) : changes = {
- highlightedIndex: getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled, !0)
- } : changes = {
- highlightedIndex: getHighlightedIndexOnOpen(props, state, -1),
- isOpen: props.items.length >= 0
- };
- break;
- case InputKeyDownEnter:
- changes = getChangesOnSelection(props, state.highlightedIndex);
- break;
- case InputKeyDownEscape:
- changes = _extends({
- isOpen: !1,
- highlightedIndex: -1
- }, !state.isOpen && {
- selectedItem: null,
- inputValue: ""
- });
- break;
- case InputKeyDownPageUp:
- changes = {
- highlightedIndex: getHighlightedIndex(state.highlightedIndex, -10, props.items, props.isItemDisabled, !0)
- };
- break;
- case InputKeyDownPageDown:
- changes = {
- highlightedIndex: getHighlightedIndex(state.highlightedIndex, 10, props.items, props.isItemDisabled, !0)
- };
- break;
- case InputKeyDownHome:
- changes = {
- highlightedIndex: getNonDisabledIndex(0, !1, props.items, props.isItemDisabled)
- };
- break;
- case InputKeyDownEnd:
- changes = {
- highlightedIndex: getNonDisabledIndex(props.items.length - 1, !0, props.items, props.isItemDisabled)
- };
- break;
- case InputBlur:
- changes = _extends({
- isOpen: !1,
- highlightedIndex: -1
- }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
- selectedItem: props.items[state.highlightedIndex],
- inputValue: props.itemToString(props.items[state.highlightedIndex])
- });
- break;
- case InputChange:
- changes = {
- isOpen: !0,
- highlightedIndex: getDefaultHighlightedIndex(props),
- inputValue: action.inputValue
- };
- break;
- case InputClick:
- changes = {
- isOpen: !state.isOpen,
- highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
- };
- break;
- case FunctionSelectItem:
- changes = {
- selectedItem: action.selectedItem,
- inputValue: props.itemToString(action.selectedItem)
- };
- break;
- case ControlledPropUpdatedSelectedItem:
- changes = {
- inputValue: action.inputValue
- };
- break;
- default:
- return downshiftCommonReducer(state, action, stateChangeTypes$1);
- }
- return _extends({}, state, changes);
- }
- var _excluded$12 = ["onMouseLeave", "refKey", "ref"], _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"], _excluded3 = ["onClick", "onPress", "refKey", "ref"], _excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"];
- useCombobox.stateChangeTypes = stateChangeTypes$1;
- function useCombobox(userProps) {
- userProps === void 0 && (userProps = {}), validatePropTypes$1(userProps, useCombobox);
- var props = _extends({}, defaultProps$1, userProps), items = props.items, scrollIntoView3 = props.scrollIntoView, environment = props.environment, getA11yStatusMessage2 = props.getA11yStatusMessage, _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual), state = _useControlledReducer[0], dispatch = _useControlledReducer[1], isOpen = state.isOpen, highlightedIndex = state.highlightedIndex, selectedItem = state.selectedItem, inputValue = state.inputValue, menuRef = useRef(null), itemRefs = useRef({}), inputRef = useRef(null), toggleButtonRef = useRef(null), isInitialMount = useIsInitialMount(), elementIds = useElementIds(props), previousResultCountRef = useRef(), latest = useLatestRef({
- state,
- props
- }), getItemNodeFromIndex = useCallback(function(index) {
- return itemRefs.current[elementIds.getItemId(index)];
- }, [elementIds]);
- useA11yMessageStatus(getA11yStatusMessage2, state, [isOpen, highlightedIndex, selectedItem, inputValue], environment);
- var shouldScrollRef = useScrollIntoView({
- menuElement: menuRef.current,
- highlightedIndex,
- isOpen,
- itemRefs,
- scrollIntoView: scrollIntoView3,
- getItemNodeFromIndex
- });
- useControlPropsValidator({
- props,
- state
- }), useEffect(function() {
- var focusOnOpen = getInitialValue$1(props, "isOpen");
- focusOnOpen && inputRef.current && inputRef.current.focus();
- }, []), useEffect(function() {
- isInitialMount || (previousResultCountRef.current = items.length);
- });
- var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, useCallback(function() {
- latest.current.state.isOpen && dispatch({
- type: InputBlur,
- selectItem: !1
- });
- }, [dispatch, latest]), useMemo(function() {
- return [menuRef, toggleButtonRef, inputRef];
- }, [menuRef.current, toggleButtonRef.current, inputRef.current])), setGetterPropCallInfo = useGetterPropsCalledChecker("getInputProps", "getMenuProps");
- useEffect(function() {
- isOpen || (itemRefs.current = {});
- }, [isOpen]), useEffect(function() {
- var _inputRef$current;
- !isOpen || !(environment != null && environment.document) || !(inputRef != null && (_inputRef$current = inputRef.current) != null && _inputRef$current.focus) || environment.document.activeElement !== inputRef.current && inputRef.current.focus();
- }, [isOpen, environment]);
- var inputKeyDownHandlers = useMemo(function() {
- return {
- ArrowDown: function(event) {
- event.preventDefault(), dispatch({
- type: InputKeyDownArrowDown,
- altKey: event.altKey
- });
- },
- ArrowUp: function(event) {
- event.preventDefault(), dispatch({
- type: InputKeyDownArrowUp,
- altKey: event.altKey
- });
- },
- Home: function(event) {
- latest.current.state.isOpen && (event.preventDefault(), dispatch({
- type: InputKeyDownHome
- }));
- },
- End: function(event) {
- latest.current.state.isOpen && (event.preventDefault(), dispatch({
- type: InputKeyDownEnd
- }));
- },
- Escape: function(event) {
- var latestState = latest.current.state;
- (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) && (event.preventDefault(), dispatch({
- type: InputKeyDownEscape
- }));
- },
- Enter: function(event) {
- var latestState = latest.current.state;
- !latestState.isOpen || event.which === 229 || (event.preventDefault(), dispatch({
- type: InputKeyDownEnter
- }));
- },
- PageUp: function(event) {
- latest.current.state.isOpen && (event.preventDefault(), dispatch({
- type: InputKeyDownPageUp
- }));
- },
- PageDown: function(event) {
- latest.current.state.isOpen && (event.preventDefault(), dispatch({
- type: InputKeyDownPageDown
- }));
- }
- };
- }, [dispatch, latest]), getLabelProps = useCallback(function(labelProps) {
- return _extends({
- id: elementIds.labelId,
- htmlFor: elementIds.inputId
- }, labelProps);
- }, [elementIds]), getMenuProps = useCallback(function(_temp, _temp2) {
- var _extends22, _ref = _temp === void 0 ? {} : _temp, onMouseLeave = _ref.onMouseLeave, _ref$refKey = _ref.refKey, refKey = _ref$refKey === void 0 ? "ref" : _ref$refKey, ref = _ref.ref, rest2 = _objectWithoutPropertiesLoose2(_ref, _excluded$12), _ref2 = _temp2 === void 0 ? {} : _temp2, _ref2$suppressRefErro = _ref2.suppressRefError, suppressRefError = _ref2$suppressRefErro === void 0 ? !1 : _ref2$suppressRefErro;
- return setGetterPropCallInfo("getMenuProps", suppressRefError, refKey, menuRef), _extends((_extends22 = {}, _extends22[refKey] = handleRefs(ref, function(menuNode) {
- menuRef.current = menuNode;
- }), _extends22.id = elementIds.menuId, _extends22.role = "listbox", _extends22["aria-labelledby"] = rest2 && rest2["aria-label"] ? void 0 : "" + elementIds.labelId, _extends22.onMouseLeave = callAllEventHandlers(onMouseLeave, function() {
- dispatch({
- type: MenuMouseLeave
- });
- }), _extends22), rest2);
- }, [dispatch, setGetterPropCallInfo, elementIds]), getItemProps = useCallback(function(_temp3) {
- var _extends3, _ref4, _ref3 = _temp3 === void 0 ? {} : _temp3, itemProp = _ref3.item, indexProp = _ref3.index, _ref3$refKey = _ref3.refKey, refKey = _ref3$refKey === void 0 ? "ref" : _ref3$refKey, ref = _ref3.ref, onMouseMove = _ref3.onMouseMove, onMouseDown = _ref3.onMouseDown, onClick = _ref3.onClick;
- _ref3.onPress;
- var disabledProp = _ref3.disabled, rest2 = _objectWithoutPropertiesLoose2(_ref3, _excluded2$1);
- disabledProp !== void 0 && console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useCombobox.');
- var _latest$current = latest.current, latestProps = _latest$current.props, latestState = _latest$current.state, _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, "Pass either item or index to getItemProps!"), item = _getItemAndIndex[0], index = _getItemAndIndex[1], disabled = latestProps.isItemDisabled(item, index), onSelectKey = "onClick", customClickHandler = onClick, itemHandleMouseMove = function() {
- mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex || (shouldScrollRef.current = !1, dispatch({
- type: ItemMouseMove,
- index,
- disabled
- }));
- }, itemHandleClick = function() {
- dispatch({
- type: ItemClick,
- index
- });
- }, itemHandleMouseDown = function(e2) {
- return e2.preventDefault();
- };
- return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function(itemNode) {
- itemNode && (itemRefs.current[elementIds.getItemId(index)] = itemNode);
- }), _extends3["aria-disabled"] = disabled, _extends3["aria-selected"] = index === latestState.highlightedIndex, _extends3.id = elementIds.getItemId(index), _extends3.role = "option", _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
- onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
- onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
- }, rest2);
- }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]), getToggleButtonProps = useCallback(function(_temp4) {
- var _extends4, _ref5 = _temp4 === void 0 ? {} : _temp4, onClick = _ref5.onClick;
- _ref5.onPress;
- var _ref5$refKey = _ref5.refKey, refKey = _ref5$refKey === void 0 ? "ref" : _ref5$refKey, ref = _ref5.ref, rest2 = _objectWithoutPropertiesLoose2(_ref5, _excluded3), latestState = latest.current.state, toggleButtonHandleClick = function() {
- dispatch({
- type: ToggleButtonClick
- });
- };
- return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function(toggleButtonNode) {
- toggleButtonRef.current = toggleButtonNode;
- }), _extends4["aria-controls"] = elementIds.menuId, _extends4["aria-expanded"] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest2.disabled && _extends({}, {
- onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
- }), rest2);
- }, [dispatch, latest, elementIds]), getInputProps = useCallback(function(_temp5, _temp6) {
- var _extends5, _ref6 = _temp5 === void 0 ? {} : _temp5, onKeyDown = _ref6.onKeyDown, onChange = _ref6.onChange, onInput = _ref6.onInput, onBlur = _ref6.onBlur;
- _ref6.onChangeText;
- var onClick = _ref6.onClick, _ref6$refKey = _ref6.refKey, refKey = _ref6$refKey === void 0 ? "ref" : _ref6$refKey, ref = _ref6.ref, rest2 = _objectWithoutPropertiesLoose2(_ref6, _excluded4), _ref7 = _temp6 === void 0 ? {} : _temp6, _ref7$suppressRefErro = _ref7.suppressRefError, suppressRefError = _ref7$suppressRefErro === void 0 ? !1 : _ref7$suppressRefErro;
- setGetterPropCallInfo("getInputProps", suppressRefError, refKey, inputRef);
- var latestState = latest.current.state, inputHandleKeyDown = function(event) {
- var key = normalizeArrowKey(event);
- key && inputKeyDownHandlers[key] && inputKeyDownHandlers[key](event);
- }, inputHandleChange = function(event) {
- dispatch({
- type: InputChange,
- inputValue: event.target.value
- });
- }, inputHandleBlur = function(event) {
- if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
- var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
- dispatch({
- type: InputBlur,
- selectItem: !isBlurByTabChange
- });
- }
- }, inputHandleClick = function() {
- dispatch({
- type: InputClick
- });
- }, onChangeKey = "onChange", eventHandlers = {};
- if (!rest2.disabled) {
- var _eventHandlers;
- eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onClick = callAllEventHandlers(onClick, inputHandleClick), _eventHandlers);
- }
- return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function(inputNode) {
- inputRef.current = inputNode;
- }), _extends5["aria-activedescendant"] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : "", _extends5["aria-autocomplete"] = "list", _extends5["aria-controls"] = elementIds.menuId, _extends5["aria-expanded"] = latestState.isOpen, _extends5["aria-labelledby"] = rest2 && rest2["aria-label"] ? void 0 : elementIds.labelId, _extends5.autoComplete = "off", _extends5.id = elementIds.inputId, _extends5.role = "combobox", _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest2);
- }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]), toggleMenu = useCallback(function() {
- dispatch({
- type: FunctionToggleMenu
- });
- }, [dispatch]), closeMenu = useCallback(function() {
- dispatch({
- type: FunctionCloseMenu
- });
- }, [dispatch]), openMenu = useCallback(function() {
- dispatch({
- type: FunctionOpenMenu
- });
- }, [dispatch]), setHighlightedIndex = useCallback(function(newHighlightedIndex) {
- dispatch({
- type: FunctionSetHighlightedIndex,
- highlightedIndex: newHighlightedIndex
- });
- }, [dispatch]), selectItem = useCallback(function(newSelectedItem) {
- dispatch({
- type: FunctionSelectItem,
- selectedItem: newSelectedItem
- });
- }, [dispatch]), setInputValue = useCallback(function(newInputValue) {
- dispatch({
- type: FunctionSetInputValue,
- inputValue: newInputValue
- });
- }, [dispatch]), reset = useCallback(function() {
- dispatch({
- type: FunctionReset$1
- });
- }, [dispatch]);
- return {
- // prop getters.
- getItemProps,
- getLabelProps,
- getMenuProps,
- getInputProps,
- getToggleButtonProps,
- // actions.
- toggleMenu,
- openMenu,
- closeMenu,
- setHighlightedIndex,
- setInputValue,
- selectItem,
- reset,
- // state.
- highlightedIndex,
- isOpen,
- selectedItem,
- inputValue
- };
- }
- var defaultStateValues = {
- activeIndex: -1,
- selectedItems: []
- };
- function getInitialValue(props, propKey) {
- return getInitialValue$1(props, propKey, defaultStateValues);
- }
- function getDefaultValue(props, propKey) {
- return getDefaultValue$1(props, propKey, defaultStateValues);
- }
- function getInitialState(props) {
- var activeIndex = getInitialValue(props, "activeIndex"), selectedItems = getInitialValue(props, "selectedItems");
- return {
- activeIndex,
- selectedItems
- };
- }
- function isKeyDownOperationPermitted(event) {
- if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey)
- return !1;
- var element = event.target;
- return !(element instanceof HTMLInputElement && // if element is a text input
- element.value !== "" && // and we have text in it
- // and cursor is either not at the start or is currently highlighting text.
- (element.selectionStart !== 0 || element.selectionEnd !== 0));
- }
- function isStateEqual(prevState, newState) {
- return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
- }
- var propTypes = {
- stateReducer: commonPropTypes.stateReducer,
- itemToKey: commonPropTypes.itemToKey,
- environment: commonPropTypes.environment,
- selectedItems: import_prop_types3.default.array,
- initialSelectedItems: import_prop_types3.default.array,
- defaultSelectedItems: import_prop_types3.default.array,
- getA11yStatusMessage: import_prop_types3.default.func,
- activeIndex: import_prop_types3.default.number,
- initialActiveIndex: import_prop_types3.default.number,
- defaultActiveIndex: import_prop_types3.default.number,
- onActiveIndexChange: import_prop_types3.default.func,
- onSelectedItemsChange: import_prop_types3.default.func,
- keyNavigationNext: import_prop_types3.default.string,
- keyNavigationPrevious: import_prop_types3.default.string
- }, defaultProps2 = {
- itemToKey: defaultProps$3.itemToKey,
- stateReducer: defaultProps$3.stateReducer,
- environment: defaultProps$3.environment,
- keyNavigationNext: "ArrowRight",
- keyNavigationPrevious: "ArrowLeft"
- }, validatePropTypes = noop4, SelectedItemClick = 0, SelectedItemKeyDownDelete = 1, SelectedItemKeyDownBackspace = 2, SelectedItemKeyDownNavigationNext = 3, SelectedItemKeyDownNavigationPrevious = 4, DropdownKeyDownNavigationPrevious = 5, DropdownKeyDownBackspace = 6, DropdownClick = 7, FunctionAddSelectedItem = 8, FunctionRemoveSelectedItem = 9, FunctionSetSelectedItems = 10, FunctionSetActiveIndex = 11, FunctionReset = 12, stateChangeTypes = Object.freeze({
- __proto__: null,
- DropdownClick,
- DropdownKeyDownBackspace,
- DropdownKeyDownNavigationPrevious,
- FunctionAddSelectedItem,
- FunctionRemoveSelectedItem,
- FunctionReset,
- FunctionSetActiveIndex,
- FunctionSetSelectedItems,
- SelectedItemClick,
- SelectedItemKeyDownBackspace,
- SelectedItemKeyDownDelete,
- SelectedItemKeyDownNavigationNext,
- SelectedItemKeyDownNavigationPrevious
- });
- function downshiftMultipleSelectionReducer(state, action) {
- var type = action.type, index = action.index, props = action.props, selectedItem = action.selectedItem, activeIndex = state.activeIndex, selectedItems = state.selectedItems, changes;
- switch (type) {
- case SelectedItemClick:
- changes = {
- activeIndex: index
- };
- break;
- case SelectedItemKeyDownNavigationPrevious:
- changes = {
- activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1
- };
- break;
- case SelectedItemKeyDownNavigationNext:
- changes = {
- activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1
- };
- break;
- case SelectedItemKeyDownBackspace:
- case SelectedItemKeyDownDelete: {
- if (activeIndex < 0)
- break;
- var newActiveIndex = activeIndex;
- selectedItems.length === 1 ? newActiveIndex = -1 : activeIndex === selectedItems.length - 1 && (newActiveIndex = selectedItems.length - 2), changes = _extends({
- selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
- }, {
- activeIndex: newActiveIndex
- });
- break;
- }
- case DropdownKeyDownNavigationPrevious:
- changes = {
- activeIndex: selectedItems.length - 1
- };
- break;
- case DropdownKeyDownBackspace:
- changes = {
- selectedItems: selectedItems.slice(0, selectedItems.length - 1)
- };
- break;
- case FunctionAddSelectedItem:
- changes = {
- selectedItems: [].concat(selectedItems, [selectedItem])
- };
- break;
- case DropdownClick:
- changes = {
- activeIndex: -1
- };
- break;
- case FunctionRemoveSelectedItem: {
- var _newActiveIndex = activeIndex, selectedItemIndex = selectedItems.findIndex(function(item) {
- return props.itemToKey(item) === props.itemToKey(selectedItem);
- });
- if (selectedItemIndex < 0)
- break;
- selectedItems.length === 1 ? _newActiveIndex = -1 : selectedItemIndex === selectedItems.length - 1 && (_newActiveIndex = selectedItems.length - 2), changes = {
- selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)),
- activeIndex: _newActiveIndex
- };
- break;
- }
- case FunctionSetSelectedItems: {
- var newSelectedItems = action.selectedItems;
- changes = {
- selectedItems: newSelectedItems
- };
- break;
- }
- case FunctionSetActiveIndex: {
- var _newActiveIndex2 = action.activeIndex;
- changes = {
- activeIndex: _newActiveIndex2
- };
- break;
- }
- case FunctionReset:
- changes = {
- activeIndex: getDefaultValue(props, "activeIndex"),
- selectedItems: getDefaultValue(props, "selectedItems")
- };
- break;
- default:
- throw new Error("Reducer called without proper action type.");
- }
- return _extends({}, state, changes);
- }
- var _excluded2 = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"], _excluded22 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
- useMultipleSelection.stateChangeTypes = stateChangeTypes;
- function useMultipleSelection(userProps) {
- userProps === void 0 && (userProps = {}), validatePropTypes(userProps, useMultipleSelection);
- var props = _extends({}, defaultProps2, userProps), getA11yStatusMessage2 = props.getA11yStatusMessage, environment = props.environment, keyNavigationNext = props.keyNavigationNext, keyNavigationPrevious = props.keyNavigationPrevious, _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual), state = _useControlledReducer[0], dispatch = _useControlledReducer[1], activeIndex = state.activeIndex, selectedItems = state.selectedItems, isInitialMount = useIsInitialMount(), dropdownRef = useRef(null), selectedItemRefs = useRef();
- selectedItemRefs.current = [];
- var latest = useLatestRef({
- state,
- props
- });
- useA11yMessageStatus(getA11yStatusMessage2, state, [activeIndex, selectedItems], environment), useEffect(function() {
- isInitialMount || (activeIndex === -1 && dropdownRef.current ? dropdownRef.current.focus() : selectedItemRefs.current[activeIndex] && selectedItemRefs.current[activeIndex].focus());
- }, [activeIndex]), useControlPropsValidator({
- props,
- state
- });
- var setGetterPropCallInfo = useGetterPropsCalledChecker("getDropdownProps"), selectedItemKeyDownHandlers = useMemo(function() {
- var _ref;
- return _ref = {}, _ref[keyNavigationPrevious] = function() {
- dispatch({
- type: SelectedItemKeyDownNavigationPrevious
- });
- }, _ref[keyNavigationNext] = function() {
- dispatch({
- type: SelectedItemKeyDownNavigationNext
- });
- }, _ref.Delete = function() {
- dispatch({
- type: SelectedItemKeyDownDelete
- });
- }, _ref.Backspace = function() {
- dispatch({
- type: SelectedItemKeyDownBackspace
- });
- }, _ref;
- }, [dispatch, keyNavigationNext, keyNavigationPrevious]), dropdownKeyDownHandlers = useMemo(function() {
- var _ref2;
- return _ref2 = {}, _ref2[keyNavigationPrevious] = function(event) {
- isKeyDownOperationPermitted(event) && dispatch({
- type: DropdownKeyDownNavigationPrevious
- });
- }, _ref2.Backspace = function(event) {
- isKeyDownOperationPermitted(event) && dispatch({
- type: DropdownKeyDownBackspace
- });
- }, _ref2;
- }, [dispatch, keyNavigationPrevious]), getSelectedItemProps = useCallback(function(_temp) {
- var _extends22, _ref3 = _temp === void 0 ? {} : _temp, _ref3$refKey = _ref3.refKey, refKey = _ref3$refKey === void 0 ? "ref" : _ref3$refKey, ref = _ref3.ref, onClick = _ref3.onClick, onKeyDown = _ref3.onKeyDown, selectedItemProp = _ref3.selectedItem, indexProp = _ref3.index, rest2 = _objectWithoutPropertiesLoose2(_ref3, _excluded2), latestState = latest.current.state, _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, "Pass either item or index to getSelectedItemProps!"), index = _getItemAndIndex[1], isFocusable = index > -1 && index === latestState.activeIndex, selectedItemHandleClick = function() {
- dispatch({
- type: SelectedItemClick,
- index
- });
- }, selectedItemHandleKeyDown = function(event) {
- var key = normalizeArrowKey(event);
- key && selectedItemKeyDownHandlers[key] && selectedItemKeyDownHandlers[key](event);
- };
- return _extends((_extends22 = {}, _extends22[refKey] = handleRefs(ref, function(selectedItemNode) {
- selectedItemNode && selectedItemRefs.current.push(selectedItemNode);
- }), _extends22.tabIndex = isFocusable ? 0 : -1, _extends22.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends22.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends22), rest2);
- }, [dispatch, latest, selectedItemKeyDownHandlers]), getDropdownProps = useCallback(function(_temp2, _temp3) {
- var _extends3, _ref4 = _temp2 === void 0 ? {} : _temp2, _ref4$refKey = _ref4.refKey, refKey = _ref4$refKey === void 0 ? "ref" : _ref4$refKey, ref = _ref4.ref, onKeyDown = _ref4.onKeyDown, onClick = _ref4.onClick, _ref4$preventKeyActio = _ref4.preventKeyAction, preventKeyAction = _ref4$preventKeyActio === void 0 ? !1 : _ref4$preventKeyActio, rest2 = _objectWithoutPropertiesLoose2(_ref4, _excluded22), _ref5 = _temp3 === void 0 ? {} : _temp3, _ref5$suppressRefErro = _ref5.suppressRefError, suppressRefError = _ref5$suppressRefErro === void 0 ? !1 : _ref5$suppressRefErro;
- setGetterPropCallInfo("getDropdownProps", suppressRefError, refKey, dropdownRef);
- var dropdownHandleKeyDown = function(event) {
- var key = normalizeArrowKey(event);
- key && dropdownKeyDownHandlers[key] && dropdownKeyDownHandlers[key](event);
- }, dropdownHandleClick = function() {
- dispatch({
- type: DropdownClick
- });
- };
- return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function(dropdownNode) {
- dropdownNode && (dropdownRef.current = dropdownNode);
- }), _extends3), !preventKeyAction && {
- onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
- onClick: callAllEventHandlers(onClick, dropdownHandleClick)
- }, rest2);
- }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]), addSelectedItem = useCallback(function(selectedItem) {
- dispatch({
- type: FunctionAddSelectedItem,
- selectedItem
- });
- }, [dispatch]), removeSelectedItem = useCallback(function(selectedItem) {
- dispatch({
- type: FunctionRemoveSelectedItem,
- selectedItem
- });
- }, [dispatch]), setSelectedItems = useCallback(function(newSelectedItems) {
- dispatch({
- type: FunctionSetSelectedItems,
- selectedItems: newSelectedItems
- });
- }, [dispatch]), setActiveIndex = useCallback(function(newActiveIndex) {
- dispatch({
- type: FunctionSetActiveIndex,
- activeIndex: newActiveIndex
- });
- }, [dispatch]), reset = useCallback(function() {
- dispatch({
- type: FunctionReset
- });
- }, [dispatch]);
- return {
- getSelectedItemProps,
- getDropdownProps,
- addSelectedItem,
- removeSelectedItem,
- setSelectedItems,
- setActiveIndex,
- reset,
- selectedItems,
- activeIndex
- };
- }
-
- // src/manager/components/sidebar/Search.tsx
- var import_fuse = __toESM(require_fuse(), 1);
-
- // src/manager/components/sidebar/types.ts
- function isExpandType(x2) {
- return !!(x2 && x2.showAll);
- }
- function isSearchResult(x2) {
- return !!(x2 && x2.item);
- }
-
- // src/manager/components/sidebar/Search.tsx
- var { document: document7 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options = {
- shouldSort: !0,
- tokenize: !0,
- findAllMatches: !0,
- includeScore: !0,
- includeMatches: !0,
- threshold: 0.2,
- location: 0,
- distance: 100,
- maxPatternLength: 32,
- minMatchCharLength: 1,
- keys: [
- { name: "name", weight: 0.7 },
- { name: "path", weight: 0.3 }
- ]
- }, SearchBar = styled.div({
- display: "flex",
- flexDirection: "row",
- columnGap: 6
- }), ScreenReaderLabel = styled.label({
- position: "absolute",
- left: -1e4,
- top: "auto",
- width: 1,
- height: 1,
- overflow: "hidden"
- }), SearchField2 = styled.div(({ theme, isMobile: isMobile2 }) => ({
- display: "flex",
- flexDirection: "row",
- alignItems: "center",
- padding: isMobile2 ? 4 : 2,
- flexGrow: 1,
- height: isMobile2 ? 36 : 32,
- width: "100%",
- boxShadow: `${theme.button.border} 0 0 0 1px inset`,
- borderRadius: theme.appBorderRadius + 2,
- "&:has(input:focus), &:has(input:active)": {
- background: theme.background.app,
- outline: `2px solid ${theme.color.secondary}`,
- outlineOffset: 2
- }
- })), IconWrapper = styled.div(({ theme, onClick }) => ({
- cursor: onClick ? "pointer" : "default",
- flex: "0 0 28px",
- height: "100%",
- pointerEvents: onClick ? "auto" : "none",
- color: theme.textMutedColor,
- display: "flex",
- alignItems: "center",
- justifyContent: "center"
- })), Input = styled.input(({ theme, isMobile: isMobile2 }) => ({
- appearance: "none",
- height: 28,
- width: "100%",
- padding: 0,
- border: 0,
- background: "transparent",
- fontSize: isMobile2 ? "16px" : `${theme.typography.size.s1 + 1}px`,
- fontFamily: "inherit",
- transition: "all 150ms",
- color: theme.color.defaultText,
- outline: 0,
- "&::placeholder": {
- color: theme.textMutedColor,
- opacity: 1
- },
- "&:valid ~ code, &:focus ~ code": {
- display: "none"
- },
- "&:invalid ~ svg": {
- display: "none"
- },
- "&:valid ~ svg": {
- display: "block"
- },
- "&::-ms-clear": {
- display: "none"
- },
- "&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration": {
- display: "none"
- }
- })), FocusKey = styled.code(({ theme }) => ({
- margin: 5,
- marginTop: 6,
- height: 16,
- fontFamily: theme.typography.fonts.base,
- lineHeight: "16px",
- textAlign: "center",
- fontSize: "11px",
- color: theme.base === "light" ? theme.color.dark : theme.textMutedColor,
- userSelect: "none",
- pointerEvents: "none",
- display: "flex",
- alignItems: "center",
- gap: 4,
- flexShrink: 0
- })), FocusKeyCmd = styled.span({
- fontSize: "14px"
- }), Actions = styled.div({
- display: "flex",
- alignItems: "center",
- gap: 2
- }), FocusContainer = styled.div({ outline: 0 }), Search = react_default.memo(function({
- children,
- dataset,
- enableShortcuts = !0,
- getLastViewed,
- initialQuery = "",
- searchBarContent,
- searchFieldContent,
- belowSearchContent
- }) {
- let api = useStorybookApi(), inputRef = useRef(null), [inputPlaceholder, setPlaceholder] = useState("Find components"), [allComponents, showAllComponents] = useState(!1), searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : "/", makeFuse = useCallback(() => {
- let list = dataset.entries.reduce((acc, [refId, { index, allStatuses }]) => {
- let groupStatus = getGroupStatus(index || {}, allStatuses ?? {});
- return index && acc.push(
- ...Object.values(index).map((item) => {
- let storyStatuses = allStatuses?.[item.id], mostCriticalStatusValue = storyStatuses ? getMostCriticalStatusValue(Object.values(storyStatuses).map((s2) => s2.value)) : null;
- return {
- ...searchItem(item, dataset.hash[refId]),
- status: mostCriticalStatusValue ?? groupStatus[item.id] ?? null
- };
- })
- ), acc;
- }, []);
- return new import_fuse.default(list, options);
- }, [dataset]), getResults = useCallback(
- (input) => {
- let fuse = makeFuse();
- if (!input)
- return [];
- let results = [], resultIds = /* @__PURE__ */ new Set(), distinctResults = fuse.search(input).filter(({ item }) => !(item.type === "component" || item.type === "docs" || item.type === "story") || // @ts-expect-error (non strict)
- resultIds.has(item.parent) ? !1 : (resultIds.add(item.id), !0));
- return distinctResults.length && (results = distinctResults.slice(0, allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS), distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents && results.push({
- showAll: () => showAllComponents(!0),
- totalCount: distinctResults.length,
- moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS
- })), results;
- },
- [allComponents, makeFuse]
- ), onSelect = useCallback(
- (selectedItem) => {
- if (isSearchResult(selectedItem)) {
- let { id, refId } = selectedItem.item;
- api?.selectStory(id, void 0, { ref: refId !== DEFAULT_REF_ID && refId }), inputRef.current.blur(), showAllComponents(!1);
- return;
- }
- isExpandType(selectedItem) && selectedItem.showAll();
- },
- [api]
- ), onInputValueChange = useCallback((inputValue, stateAndHelpers) => {
- showAllComponents(!1);
- }, []), stateReducer2 = useCallback(
- (state, changes) => {
- switch (changes.type) {
- case Downshift.stateChangeTypes.blurInput:
- return {
- ...changes,
- // Prevent clearing the input on blur
- inputValue: state.inputValue,
- // Return to the tree view after selecting an item
- isOpen: state.inputValue && !state.selectedItem
- };
- case Downshift.stateChangeTypes.mouseUp:
- return state;
- case Downshift.stateChangeTypes.keyDownEscape:
- return state.inputValue ? { ...changes, inputValue: "", isOpen: !0, selectedItem: null } : { ...changes, isOpen: !1, selectedItem: null };
- case Downshift.stateChangeTypes.clickItem:
- case Downshift.stateChangeTypes.keyDownEnter:
- return isSearchResult(changes.selectedItem) ? { ...changes, inputValue: state.inputValue } : isExpandType(changes.selectedItem) ? state : changes;
- default:
- return changes;
- }
- },
- []
- ), { isMobile: isMobile2 } = useLayout(), searchLandmarkRef = useRef(null), { landmarkProps } = useLandmark({ role: "search" }, searchLandmarkRef);
- return (
- // @ts-expect-error (non strict)
- react_default.createElement(
- Downshift,
- {
- initialInputValue: initialQuery,
- stateReducer: stateReducer2,
- itemToString: (result) => result?.item?.name || "",
- scrollIntoView: (e2) => scrollIntoView(e2),
- onSelect,
- onInputValueChange
- },
- ({
- isOpen,
- openMenu,
- closeMenu,
- inputValue,
- getInputProps,
- getItemProps,
- getLabelProps,
- getMenuProps,
- getRootProps,
- highlightedIndex,
- reset
- }) => {
- let input = inputValue ? inputValue.trim() : "", results = input ? getResults(input) : [], lastViewed = !input && getLastViewed();
- lastViewed && lastViewed.length && (results = lastViewed.reduce((acc, { storyId, refId }) => {
- let data = dataset.hash[refId];
- if (data && data.index && data.index[storyId]) {
- let story = data.index[storyId], item = story.type === "story" ? data.index[story.parent] : story;
- acc.some((res) => res.item.refId === refId && res.item.id === item.id) || acc.push({ item: searchItem(item, dataset.hash[refId]), matches: [], score: 0 });
- }
- return acc;
- }, []));
- let inputId = "storybook-explorer-searchfield", inputProps = getInputProps({
- id: inputId,
- ref: inputRef,
- required: !0,
- type: "search",
- placeholder: inputPlaceholder,
- onFocus: () => {
- openMenu(), setPlaceholder("Type to find...");
- },
- onBlur: () => setPlaceholder("Find components"),
- onKeyDown: (e2) => {
- e2.key === "Escape" && inputValue.length === 0 && inputRef.current.blur();
- }
- }), labelProps = getLabelProps({
- htmlFor: inputId
- });
- return react_default.createElement(react_default.Fragment, null, react_default.createElement(ScreenReaderLabel, { ...labelProps }, "Search for components"), react_default.createElement(SearchBar, { ref: searchLandmarkRef, ...landmarkProps }, react_default.createElement(
- SearchField2,
- {
- ...getRootProps({ refKey: "" }, { suppressRefError: !0 }),
- isMobile: isMobile2,
- className: "search-field"
- },
- react_default.createElement(IconWrapper, null, react_default.createElement(SearchIcon, null)),
- react_default.createElement(Input, { ...inputProps, isMobile: isMobile2 }),
- !isMobile2 && enableShortcuts && !isOpen && react_default.createElement(FocusKey, null, searchShortcut === "\u2318 K" ? react_default.createElement(react_default.Fragment, null, react_default.createElement(FocusKeyCmd, null, "\u2318"), "K") : searchShortcut),
- react_default.createElement(Actions, null, input && react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- ariaLabel: "Clear search",
- onClick: () => {
- reset({ inputValue: "" }), closeMenu(), inputRef.current?.focus();
- }
- },
- react_default.createElement(CloseIcon, null)
- ), searchFieldContent)
- ), searchBarContent), !isOpen && belowSearchContent, react_default.createElement(FocusContainer, { tabIndex: 0, id: "storybook-explorer-menu" }, children({
- query: input,
- results,
- isNavVisible: !isOpen && document7.activeElement !== inputRef.current,
- isNavReachable: !isOpen || input.length === 0,
- isSearchResultRendered: isOpen,
- closeMenu,
- getMenuProps,
- getItemProps,
- highlightedIndex
- })));
- }
- )
- );
- });
-
- // src/manager/components/sidebar/SearchResults.tsx
- init_react();
- var { document: document8 } = scope, ResultsList = styled.ol({
- listStyle: "none",
- margin: 0,
- padding: 0
- }), ResultRow = styled.li(({ theme, isHighlighted }) => ({
- width: "100%",
- border: "none",
- cursor: "pointer",
- display: "flex",
- alignItems: "start",
- justifyContent: "space-between",
- textAlign: "left",
- color: "inherit",
- fontSize: `${theme.typography.size.s2}px`,
- background: isHighlighted ? theme.background.hoverable : "transparent",
- minHeight: 28,
- borderRadius: 4,
- gap: 6,
- paddingTop: 7,
- paddingBottom: 7,
- paddingLeft: 8,
- paddingRight: 8,
- "&:hover, &:focus": {
- background: curriedTransparentize$1(0.93, theme.color.secondary),
- outline: "none"
- }
- })), IconWrapper2 = styled.div({
- marginTop: 2
- }), ResultRowContent = styled.div({
- flex: 1,
- display: "flex",
- flexDirection: "column"
- }), Mark = styled.mark(({ theme }) => ({
- background: "transparent",
- color: theme.color.secondary,
- "@media (forced-colors: active)": {
- color: "HighlightText",
- background: "Highlight"
- }
- })), MoreWrapper = styled.div({
- marginTop: 8
- }), RecentlyOpenedTitle = styled.div(({ theme }) => ({
- display: "flex",
- justifyContent: "space-between",
- fontSize: `${theme.typography.size.s1 - 1}px`,
- fontWeight: theme.typography.weight.bold,
- minHeight: 28,
- letterSpacing: "0.16em",
- textTransform: "uppercase",
- color: theme.textMutedColor,
- marginBottom: 4,
- alignItems: "center",
- ".search-result-recentlyOpened-clear": {
- visibility: "hidden"
- },
- "&:hover": {
- ".search-result-recentlyOpened-clear": {
- visibility: "visible"
- }
- }
- })), Highlight = react_default.memo(function({
- children,
- match
- }) {
- if (!match)
- return children;
- let { value, indices } = match, { nodes: result } = indices.reduce(
- ({ cursor, nodes }, [start, end], index, { length }) => (nodes.push(react_default.createElement("span", { key: `${index}-1` }, value.slice(cursor, start))), nodes.push(react_default.createElement(Mark, { key: `${index}-2` }, value.slice(start, end + 1))), index === length - 1 && nodes.push(react_default.createElement("span", { key: `${index}-3` }, value.slice(end + 1))), { cursor: end + 1, nodes }),
- { cursor: 0, nodes: [] }
- );
- return react_default.createElement("span", null, result);
- }), Title = styled.div({
- display: "grid",
- justifyContent: "start",
- gridAutoColumns: "auto",
- gridAutoFlow: "column",
- "& > span": {
- display: "block",
- whiteSpace: "nowrap",
- overflow: "hidden",
- textOverflow: "ellipsis"
- }
- }), Path = styled.div(({ theme }) => ({
- display: "grid",
- justifyContent: "start",
- gridAutoColumns: "auto",
- gridAutoFlow: "column",
- fontSize: `${theme.typography.size.s1 - 1}px`,
- "& > span": {
- display: "block",
- whiteSpace: "nowrap",
- overflow: "hidden",
- textOverflow: "ellipsis"
- },
- "& > span + span": {
- "&:before": {
- content: "' / '"
- }
- }
- })), Result = react_default.memo(function({ item, matches, onClick, ...props }) {
- let theme = useTheme(), click = useCallback(
- (event) => {
- event.preventDefault(), onClick?.(event);
- },
- [onClick]
- ), api = useStorybookApi();
- useEffect(() => {
- api && props.isHighlighted && item.type === "component" && api.emit(PRELOAD_ENTRIES, { ids: [item.children[0]] }, { options: { target: item.refId } });
- }, [api, props.isHighlighted, item]);
- let nameMatch = matches.find((match) => match.key === "name"), pathMatches = matches.filter((match) => match.key === "path"), icon = item.status ? getStatus(theme, item.status).icon : null;
- return react_default.createElement(ResultRow, { ...props, onClick: click }, react_default.createElement(IconWrapper2, null, item.type === "component" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "component" }, react_default.createElement(UseSymbol, { type: "component" })), item.type === "story" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: item.subtype }, react_default.createElement(UseSymbol, { type: item.subtype })), !(item.type === "component" || item.type === "story") && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), react_default.createElement(ResultRowContent, { className: "search-result-item--label" }, react_default.createElement(Title, null, react_default.createElement(Highlight, { match: nameMatch }, item.name)), react_default.createElement(Path, null, item.path.map((group, index) => react_default.createElement("span", { key: index }, react_default.createElement(Highlight, { match: pathMatches.find((match) => match.arrayIndex === index) }, group))))), item.status ? react_default.createElement(StatusLabel, { status: item.status }, icon) : null);
- }), SearchResults = react_default.memo(function({
- query,
- results,
- closeMenu,
- getMenuProps,
- getItemProps,
- highlightedIndex,
- isLoading = !1,
- enableShortcuts = !0,
- clearLastViewed
- }) {
- let api = useStorybookApi();
- useEffect(() => {
- let handleEscape = (event) => {
- if (!(!enableShortcuts || isLoading || event.repeat) && matchesModifiers(!1, event) && matchesKeyCode("Escape", event)) {
- if (event.target?.id === "storybook-explorer-searchfield")
- return;
- event.preventDefault(), closeMenu();
- }
- };
- return document8.addEventListener("keydown", handleEscape), () => document8.removeEventListener("keydown", handleEscape);
- }, [closeMenu, enableShortcuts, isLoading]);
- let mouseOverHandler = useCallback((event) => {
- if (!api)
- return;
- let currentTarget = event.currentTarget, storyId = currentTarget.getAttribute("data-id"), refId = currentTarget.getAttribute("data-refid"), item = api.resolveStory(storyId, refId === "storybook_internal" ? void 0 : refId);
- item?.type === "component" && api.emit(PRELOAD_ENTRIES, {
- // @ts-expect-error (TODO)
- ids: [item.isLeaf ? item.id : item.children[0]],
- options: { target: refId }
- });
- }, []), handleClearLastViewed = () => {
- clearLastViewed(), closeMenu();
- };
- return react_default.createElement(ResultsList, { ...getMenuProps(), key: "results-list" }, results.length > 0 && !query && react_default.createElement(RecentlyOpenedTitle, { className: "search-result-recentlyOpened" }, "Recently opened", react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- className: "search-result-recentlyOpened-clear",
- onClick: handleClearLastViewed,
- ariaLabel: "Clear recently opened items"
- },
- react_default.createElement(TrashIcon, null)
- )), results.length === 0 && query && react_default.createElement("li", null, react_default.createElement(NoResults2, null, react_default.createElement("strong", null, "No components found"), react_default.createElement("small", null, "Find components by name or path."))), results.map((result, index) => {
- if (isExpandType(result)) {
- let props = { ...results, ...getItemProps({ key: index, index, item: result }) }, { key: key2, ...rest2 } = props;
- return react_default.createElement(MoreWrapper, { key: "search-result-expand" }, react_default.createElement(Button, { key: key2, ...rest2, size: "small" }, "Show ", result.moreCount, " more results"));
- }
- let { item } = result, key = `${item.refId}::${item.id}`;
- return react_default.createElement(
- Result,
- {
- ...result,
- ...getItemProps({ key, index, item: result }),
- isHighlighted: highlightedIndex === index,
- key,
- "data-id": result.item.id,
- "data-refid": result.item.refId,
- onMouseOver: mouseOverHandler,
- className: "search-result-item"
- }
- );
- }));
- });
-
- // src/manager/components/sidebar/SidebarBottom.tsx
- init_react();
-
- // src/manager/components/sidebar/TestingWidget.tsx
- init_react();
-
- // src/manager/components/sidebar/useDynamicFavicon.ts
- init_react();
- var STATUSES = ["active", "critical", "negative", "positive", "warning"], initialIcon, getFaviconUrl = (initialHref = "./favicon.svg", status) => {
- initialIcon ??= initialHref;
- let href = initialIcon + (status && STATUSES.includes(status) ? `?status=${status}` : "");
- return new Promise((resolve) => {
- let img = new Image();
- img.onload = () => resolve({ href, status }), img.onerror = () => resolve({ href: initialIcon, status }), img.src = href;
- });
- }, useDynamicFavicon = (status) => {
- let links = useRef(document.head.querySelectorAll("link[rel*='icon']"));
- useEffect(() => {
- let isMounted = !0, [element, ...others] = links.current;
- if (element && !others.length)
- return getFaviconUrl(element.href, status).then(
- (result) => {
- isMounted && result.status === status && element.dataset.status !== status && (element.href = result.href, result.status ? element.dataset.status = result.status : delete element.dataset.status);
- },
- () => {
- isMounted && (element.href = initialIcon);
- }
- ), () => {
- isMounted = !1, element.href = initialIcon;
- };
- }, [status]);
- };
-
- // src/manager/components/sidebar/TestingWidget.tsx
- var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
- display: "flex",
- flexDirection: "column-reverse",
- "&:hover #testing-module-collapse-toggle": {
- opacity: 1
- }
- }), Collapsible2 = styled.div(({ theme }) => ({
- overflow: "hidden",
- boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`
- })), Content3 = styled.div({
- display: "flex",
- flexDirection: "column"
- }), Bar2 = styled.div(({ onClick }) => ({
- display: "flex",
- width: "100%",
- cursor: onClick ? "pointer" : "default",
- userSelect: "none",
- alignItems: "center",
- justifyContent: "space-between",
- overflow: "hidden",
- padding: 4,
- gap: 4
- })), Action = styled.div({
- display: "flex",
- flexBasis: "100%",
- containerType: "inline-size"
- }), Filters = styled.div({
- display: "flex",
- justifyContent: "flex-end",
- gap: 4
- }), CollapseToggle3 = styled(ActionList.Button)({
- opacity: 0,
- transition: "opacity 250ms",
- "&:focus, &:hover": {
- opacity: 1
- }
- }), RunButton = ({
- children,
- isRunning,
- onRunAll,
- ...props
- }) => react_default.createElement(
- ActionList.Button,
- {
- ariaLabel: isRunning ? "Running..." : "Run tests",
- tooltip: isRunning ? "Running tests..." : "Start all tests",
- disabled: isRunning,
- onClick: (e2) => {
- e2.stopPropagation(), onRunAll();
- },
- ...props
- },
- react_default.createElement(ActionList.Icon, null, react_default.createElement(PlayAllHollowIcon, null)),
- children
- ), StatusButton2 = styled(ActionList.Toggle)(
- { minWidth: 28, outlineOffset: -2 },
- ({ pressed, status, theme }) => !pressed && (theme.base === "light" ? {
- background: {
- negative: theme.background.negative,
- warning: theme.background.warning
- }[status],
- color: {
- negative: theme.color.negativeText,
- warning: theme.color.warningText
- }[status]
- } : {
- background: {
- negative: `${theme.color.negative}22`,
- warning: `${theme.color.warning}22`
- }[status],
- color: {
- negative: theme.color.negative,
- warning: theme.color.warning
- }[status]
- })
- ), TestProvider = styled.div(({ theme }) => ({
- padding: 4,
- "&:not(:last-child)": {
- boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`
- }
- })), TestingWidget = ({
- registeredTestProviders,
- testProviderStates,
- hasStatuses,
- clearStatuses,
- onRunAll,
- errorCount,
- errorsActive,
- setErrorsActive,
- warningCount,
- warningsActive,
- setWarningsActive,
- successCount
- }) => {
- let timeoutRef = useRef(null), contentRef = useRef(null), [maxHeight, setMaxHeight] = useState(DEFAULT_HEIGHT), [isCollapsed, setCollapsed] = useState(!0), [isChangingCollapse, setChangingCollapse] = useState(!1), [isUpdated, setIsUpdated] = useState(!1), settingsUpdatedTimeoutRef = useRef();
- useEffect(() => {
- let unsubscribe = internal_fullTestProviderStore.onSettingsChanged(() => {
- setIsUpdated(!0), clearTimeout(settingsUpdatedTimeoutRef.current), settingsUpdatedTimeoutRef.current = setTimeout(() => {
- setIsUpdated(!1);
- }, 1e3);
- });
- return () => {
- unsubscribe(), clearTimeout(settingsUpdatedTimeoutRef.current);
- };
- }, []), useEffect(() => {
- if (contentRef.current) {
- setMaxHeight(contentRef.current?.getBoundingClientRect().height || DEFAULT_HEIGHT);
- let resizeObserver = new ResizeObserver(() => {
- requestAnimationFrame(() => {
- if (contentRef.current && !isCollapsed) {
- let height = contentRef.current?.getBoundingClientRect().height || DEFAULT_HEIGHT;
- setMaxHeight(height);
- }
- });
- });
- return resizeObserver.observe(contentRef.current), () => resizeObserver.disconnect();
- }
- }, [isCollapsed]);
- let toggleCollapsed = useCallback((event, value) => {
- event?.stopPropagation(), setChangingCollapse(!0), setCollapsed((s2) => value ?? !s2), timeoutRef.current && clearTimeout(timeoutRef.current), timeoutRef.current = setTimeout(() => {
- setChangingCollapse(!1);
- }, 250);
- }, []), isRunning = Object.values(testProviderStates).some(
- (testProviderState) => testProviderState === "test-provider-state:running"
- ), isCrashed = Object.values(testProviderStates).some(
- (testProviderState) => testProviderState === "test-provider-state:crashed"
- ), hasTestProviders = Object.values(registeredTestProviders).length > 0;
- useEffect(() => {
- isCrashed && isCollapsed && toggleCollapsed(void 0, !1);
- }, [isCrashed, isCollapsed, toggleCollapsed]), useDynamicFavicon(
- isCrashed ? "critical" : errorCount > 0 ? "negative" : warningCount > 0 ? "warning" : isRunning ? "active" : successCount > 0 ? "positive" : void 0
- );
- let cardRef = useRef(null), { landmarkProps } = useLandmark(
- { "aria-labelledby": "storybook-testing-widget-heading", role: "region" },
- cardRef
- );
- return !hasTestProviders && !errorCount && !warningCount ? null : react_default.createElement(
- HoverCard2,
- {
- id: "storybook-testing-module",
- "data-updated": isUpdated,
- outlineAnimation: isRunning ? "spin" : "none",
- outlineColor: isCrashed || isRunning && errorCount > 0 ? "negative" : isUpdated ? "positive" : void 0,
- ref: cardRef,
- outlineAttrs: landmarkProps
- },
- react_default.createElement("h2", { id: "storybook-testing-widget-heading", className: "sb-sr-only" }, "Component tests"),
- react_default.createElement(Bar2, { ...hasTestProviders ? { onClick: (e2) => toggleCollapsed(e2) } : {} }, react_default.createElement(Action, null, hasTestProviders && react_default.createElement(
- Optional,
- {
- content: react_default.createElement(RunButton, { isRunning, onRunAll }, isRunning ? "Running..." : "Run tests"),
- fallback: react_default.createElement(RunButton, { isRunning, onRunAll })
- }
- )), react_default.createElement(Filters, null, hasTestProviders && react_default.createElement(
- CollapseToggle3,
- {
- onClick: (e2) => toggleCollapsed(e2),
- id: "testing-module-collapse-toggle",
- ariaLabel: isCollapsed ? "Expand testing module" : "Collapse testing module"
- },
- react_default.createElement(
- ChevronSmallUpIcon,
- {
- style: {
- transform: isCollapsed ? "none" : "rotate(180deg)",
- transition: "transform 250ms"
- }
- }
- )
- ), errorCount > 0 && react_default.createElement(
- StatusButton2,
- {
- id: "errors-found-filter",
- size: "medium",
- variant: "ghost",
- padding: errorCount < 10 ? "medium" : "small",
- status: "negative",
- pressed: errorsActive,
- onClick: (e2) => {
- e2.stopPropagation(), setErrorsActive(!errorsActive);
- },
- ariaLabel: `Filter main navigation to show ${errorCount} tests with errors`,
- tooltip: errorsActive ? "Clear test error filter" : `Filter sidebar to show ${errorCount} tests with errors`
- },
- errorCount < 1e3 ? errorCount : "999+"
- ), warningCount > 0 && react_default.createElement(
- StatusButton2,
- {
- id: "warnings-found-filter",
- size: "medium",
- variant: "ghost",
- padding: warningCount < 10 ? "medium" : "small",
- status: "warning",
- pressed: warningsActive,
- onClick: (e2) => {
- e2.stopPropagation(), setWarningsActive(!warningsActive);
- },
- ariaLabel: `Filter main navigation to show ${warningCount} tests with warnings`,
- tooltip: warningsActive ? "Clear test warning filter" : `Filter sidebar to show ${warningCount} tests with warnings`
- },
- warningCount < 1e3 ? warningCount : "999+"
- ), hasStatuses && react_default.createElement(
- ActionList.Button,
- {
- id: "clear-statuses",
- onClick: (e2) => {
- e2.stopPropagation(), clearStatuses();
- },
- disabled: isRunning,
- ariaLabel: isRunning ? "Can't clear statuses while tests are running" : "Clear all statuses"
- },
- react_default.createElement(SweepIcon, null)
- ))),
- hasTestProviders && react_default.createElement(
- Collapsible2,
- {
- "data-testid": "collapse",
- ...isCollapsed && { inert: "" },
- style: {
- transition: isChangingCollapse ? "max-height 250ms" : "max-height 0ms",
- display: hasTestProviders ? "block" : "none",
- maxHeight: isCollapsed ? 0 : maxHeight
- }
- },
- react_default.createElement(Content3, { ref: contentRef }, Object.values(registeredTestProviders).map((registeredTestProvider) => {
- let { render: Render, id } = registeredTestProvider;
- return Render ? react_default.createElement(TestProvider, { key: id, "data-module-id": id }, react_default.createElement(Render, null)) : (once.warn(
- `No render function found for test provider with id '${id}', skipping...`
- ), null);
- }))
- )
- );
- };
-
- // src/manager/components/sidebar/SidebarBottom.tsx
- var SIDEBAR_BOTTOM_SPACER_ID = "sidebar-bottom-spacer", SIDEBAR_BOTTOM_WRAPPER_ID = "sidebar-bottom-wrapper", filterNone = () => !0, filterWarn = ({ statuses = {} }) => Object.values(statuses).some(({ value }) => value === "status-value:warning"), filterError = ({ statuses = {} }) => Object.values(statuses).some(({ value }) => value === "status-value:error"), filterBoth = ({ statuses = {} }) => Object.values(statuses).some(
- ({ value }) => ["status-value:warning", "status-value:error"].includes(value)
- ), getFilter = (warningsActive = !1, errorsActive = !1) => warningsActive && errorsActive ? filterBoth : warningsActive ? filterWarn : errorsActive ? filterError : filterNone, Spacer = styled.div({
- pointerEvents: "none"
- }), Content4 = styled.div(({ theme }) => ({
- position: "absolute",
- zIndex: 1,
- bottom: 0,
- left: 0,
- right: 0,
- padding: 12,
- display: "flex",
- flexDirection: "column",
- gap: 12,
- color: theme.color.defaultText,
- fontSize: theme.typography.size.s1,
- "&:empty": {
- display: "none"
- },
- "--card-box-shadow": `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
- // Integrators can use these to style their custom additions
- "--sb-sidebar-bottom-card-background": theme.background.content,
- "--sb-sidebar-bottom-card-border": `1px solid ${theme.appBorderColor}`,
- "--sb-sidebar-bottom-card-border-radius": `${theme.appBorderRadius + 1}px`,
- "--sb-sidebar-bottom-card-box-shadow": `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`
- })), SidebarBottomBase = ({
- api,
- notifications = [],
- errorCount,
- warningCount,
- successCount,
- hasStatuses,
- isDevelopment,
- testProviderStates,
- registeredTestProviders,
- onRunAll
- }) => {
- let spacerRef = useRef(null), wrapperRef = useRef(null), [warningsActive, setWarningsActive] = useState(!1), [errorsActive, setErrorsActive] = useState(!1);
- return useEffect(() => {
- if (spacerRef.current && wrapperRef.current) {
- let resizeObserver = new ResizeObserver(() => {
- spacerRef.current && wrapperRef.current && (spacerRef.current.style.height = `${wrapperRef.current.scrollHeight}px`);
- });
- return resizeObserver.observe(wrapperRef.current), () => resizeObserver.disconnect();
- }
- }, []), useEffect(() => {
- let filter = getFilter(warningCount > 0 && warningsActive, errorCount > 0 && errorsActive);
- api.experimental_setFilter("sidebar-bottom-filter", filter);
- }, [api, warningCount, errorCount, warningsActive, errorsActive]), !warningCount && !errorCount && Object.values(registeredTestProviders).length === 0 && notifications.length === 0 ? null : react_default.createElement(Fragment, null, react_default.createElement(Spacer, { id: SIDEBAR_BOTTOM_SPACER_ID, ref: spacerRef }), react_default.createElement(Content4, { id: SIDEBAR_BOTTOM_WRAPPER_ID, ref: wrapperRef }, react_default.createElement(NotificationList, { notifications, clearNotification: api.clearNotification }), isDevelopment && react_default.createElement(
- TestingWidget,
- {
- registeredTestProviders,
- testProviderStates,
- onRunAll: () => {
- onRunAll(), setErrorsActive(!1), setWarningsActive(!1);
- },
- hasStatuses,
- clearStatuses: () => {
- api.clearStatuses(), setErrorsActive(!1), setWarningsActive(!1);
- },
- errorCount,
- errorsActive,
- setErrorsActive,
- warningCount,
- warningsActive,
- setWarningsActive,
- successCount
- }
- )));
- }, SidebarBottom = ({ isDevelopment }) => {
- let api = useStorybookApi(), registeredTestProviders = api.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER), { notifications } = useStorybookState(), { hasStatuses, errorCount, warningCount, successCount } = experimental_useStatusStore(
- (statuses) => Object.values(statuses).reduce(
- (result, storyStatuses) => (Object.values(storyStatuses).forEach((status) => {
- result.hasStatuses = !0, status.value === "status-value:error" && (result.errorCount += 1), status.value === "status-value:warning" && (result.warningCount += 1), status.value === "status-value:success" && (result.successCount += 1);
- }), result),
- { errorCount: 0, warningCount: 0, successCount: 0, hasStatuses: !1 }
- )
- ), testProviderStates = experimental_useTestProviderStore();
- return react_default.createElement(
- SidebarBottomBase,
- {
- api,
- notifications,
- hasStatuses,
- errorCount,
- warningCount,
- successCount,
- isDevelopment,
- testProviderStates,
- registeredTestProviders,
- onRunAll: internal_fullTestProviderStore.runAll
- }
- );
- };
-
- // src/manager/components/sidebar/Filter.tsx
- init_react();
-
- // src/manager/components/sidebar/FilterPanel.tsx
- init_react();
-
- // src/manager/components/sidebar/FilterPanelLink.tsx
- init_react();
- var MutedText = styled.span(({ theme }) => ({
- color: theme.textMutedColor
- })), StatusIcon2 = styled.span(({ $iconColor }) => ({
- display: "contents",
- color: $iconColor ?? void 0,
- "> svg": {
- transform: "scale(1.3)"
- }
- })), createFilterLink = ({
- id,
- type,
- title: title2,
- tooltip,
- count,
- icon,
- isIncluded,
- isExcluded,
- onCheckboxChange,
- onInvert
- }) => {
- let isChecked = isIncluded || isExcluded, toggleLabel = `${type} filter: ${isExcluded ? `exclude ${title2}` : title2}`, toggleTooltip = tooltip ?? `${isChecked ? "Remove" : "Add"} ${type} filter: ${title2}`, invertButtonLabel = `${isExcluded ? "Include" : "Exclude"} ${type}: ${title2}`;
- return {
- id: `filter-${type}-${id}`,
- content: react_default.createElement(ActionList.HoverItem, { targetId: `filter-${type}-${id}` }, react_default.createElement(ActionList.Action, { as: "label", ariaLabel: !1, tabIndex: -1, tooltip: toggleTooltip }, react_default.createElement(ActionList.Icon, null, isExcluded ? react_default.createElement(DeleteIcon, null) : isIncluded ? null : icon, react_default.createElement(
- Form.Checkbox,
- {
- checked: isChecked,
- onChange: onCheckboxChange,
- "data-tag": title2,
- "aria-label": toggleLabel
- }
- )), react_default.createElement(ActionList.Text, null, react_default.createElement("span", null, title2, isExcluded && react_default.createElement(MutedText, null, " (excluded)"))), isExcluded ? react_default.createElement("s", null, count) : react_default.createElement("span", null, count)), react_default.createElement(
- ActionList.Button,
- {
- "data-target-id": `filter-${type}-${id}`,
- ariaLabel: invertButtonLabel,
- onClick: onInvert
- },
- react_default.createElement("span", { style: { minWidth: 45 } }, isExcluded ? "Include" : "Exclude")
- ))
- };
- };
-
- // src/shared/constants/tags.ts
- var Tag2 = {
- /** Indicates that autodocs should be generated for this component */
- AUTODOCS: "autodocs",
- /** MDX documentation attached to a component's stories file */
- ATTACHED_MDX: "attached-mdx",
- /** Standalone MDX documentation not attached to stories */
- UNATTACHED_MDX: "unattached-mdx",
- /** Story has a play function */
- PLAY_FN: "play-fn",
- /** Story has a test function */
- TEST_FN: "test-fn",
- /** Development environment tag */
- DEV: "dev",
- /** Test environment tag */
- TEST: "test",
- /** Manifest generation tag */
- MANIFEST: "manifest"
- }, BUILT_IN_FILTERS = {
- _docs: (entry, excluded) => excluded ? entry.type !== "docs" : entry.type === "docs",
- _play: (entry, excluded) => excluded ? entry.type !== "story" || !entry.tags?.includes(Tag2.PLAY_FN) : entry.type === "story" && !!entry.tags?.includes(Tag2.PLAY_FN),
- _test: (entry, excluded) => excluded ? entry.type !== "story" || entry.subtype !== "test" : entry.type === "story" && entry.subtype === "test"
- }, USER_TAG_FILTER = (tag) => (entry, excluded) => excluded ? !entry.tags?.includes(tag) : !!entry.tags?.includes(tag);
-
- // src/manager/components/sidebar/FilterPanel.utils.ts
- var BUILT_IN_TAGS = /* @__PURE__ */ new Set([
- "dev",
- "test",
- "autodocs",
- "attached-mdx",
- "unattached-mdx",
- "play-fn",
- "test-fn",
- "manifest"
- ]), STATUS_DISPLAY_ORDER = [
- "status-value:new",
- "status-value:modified",
- "status-value:affected"
- ], areFiltersEqual = (left, right) => left.length === right.length && (/* @__PURE__ */ new Set([...left, ...right])).size === left.length, getFilterFunction = (tag) => Object.hasOwn(BUILT_IN_FILTERS, tag) ? BUILT_IN_FILTERS[tag] : USER_TAG_FILTER(tag);
-
- // src/manager/components/sidebar/useFilterData.tsx
- init_react();
- var BUILT_IN_FILTER_DEFS = [
- { id: "_docs", title: "Documentation", icon: react_default.createElement(DocumentIcon, { color: color.gold }), tag: "_docs" },
- { id: "_play", title: "Play", icon: react_default.createElement(PlayHollowIcon, { color: color.seafoam }), tag: "_play" },
- { id: "_test", title: "Testing", icon: react_default.createElement(BeakerIcon, { color: color.green }), tag: "_test" }
- ];
- function useTagFilterEntries(indexJson) {
- return useMemo(() => {
- let entries = Object.values(indexJson.entries), userTagsCounts = entries.reduce((acc, entry) => (entry.tags?.forEach((tag) => {
- BUILT_IN_TAGS.has(tag) || (acc[tag] = (acc[tag] || 0) + 1);
- }), acc), {}), tagEntries = Object.entries(userTagsCounts).map(([tag, count]) => ({
- id: tag,
- type: "tag",
- title: tag,
- count,
- icon: null
- })), getBuiltInCount = (filterFn) => entries.filter((entry) => filterFn?.(entry)).length;
- return { builtInEntries: BUILT_IN_FILTER_DEFS.map((def) => ({
- id: def.id,
- type: "built-in",
- title: def.title,
- icon: def.icon,
- count: getBuiltInCount(getFilterFunction(def.tag))
- })), tagEntries };
- }, [indexJson.entries]);
- }
- function useStatusFilterEntries(allStatuses) {
- return useMemo(() => {
- if (!globalThis?.FEATURES?.changeDetection)
- return [];
- let counts = countStatusesByValue(allStatuses);
- return STATUS_DISPLAY_ORDER.map((statusValue) => ({
- statusValue,
- shortName: statusValueShortName(statusValue),
- description: statusValueDescription(statusValue),
- count: counts[statusValue] ?? 0
- }));
- }, [allStatuses]);
- }
-
- // src/manager/components/sidebar/FilterPanel.tsx
- var Wrapper7 = styled.div({
- minWidth: 240,
- maxWidth: 300,
- maxHeight: 15.5 * 32 + 8,
- // 15.5 items at 32px each + 8px padding
- overflow: "hidden",
- overflowY: "auto",
- scrollbarWidth: "thin"
- }), FilterPanel = ({
- api,
- indexJson,
- defaultIncludedFilters,
- defaultExcludedFilters,
- includedFilters,
- excludedFilters,
- allStatuses,
- includedStatusFilters,
- excludedStatusFilters
- }) => {
- let theme = useTheme(), { builtInEntries, tagEntries } = useTagFilterEntries(indexJson), statusEntries = useStatusFilterEntries(allStatuses), toTagFilterItem = useCallback(
- (entry) => {
- if (entry.count === 0 && entry.type === "built-in") return null;
- let isIncluded = includedFilters.includes(entry.id), isExcluded = excludedFilters.includes(entry.id), isChecked = isIncluded || isExcluded;
- return {
- id: entry.id,
- type: entry.type,
- title: entry.title,
- count: entry.count,
- icon: entry.icon,
- isIncluded,
- isExcluded,
- onCheckboxChange: () => {
- isChecked ? api.removeTagFilters([entry.id]) : api.addTagFilters([entry.id], !1);
- },
- onInvert: () => api.addTagFilters([entry.id], !isExcluded)
- };
- },
- [api, includedFilters, excludedFilters]
- ), toStatusFilterItem = useCallback(
- (entry) => {
- let shortName = entry.shortName === "affected" ? "related" : entry.shortName, isIncluded = includedStatusFilters.includes(entry.statusValue), isExcluded = excludedStatusFilters.includes(entry.statusValue), isChecked = isIncluded || isExcluded, { icon: statusIconEl, iconColor } = getStatus(theme, entry.statusValue), showIcon = statusIconEl && entry.statusValue !== "status-value:affected";
- return {
- id: shortName,
- type: "status",
- title: shortName.charAt(0).toUpperCase() + shortName.slice(1),
- tooltip: entry.description,
- count: entry.count,
- icon: showIcon ? react_default.createElement(StatusIcon2, { $iconColor: iconColor }, statusIconEl) : null,
- isIncluded,
- isExcluded,
- onCheckboxChange: () => {
- isChecked ? api.removeStatusFilters([entry.statusValue]) : api.addStatusFilters([entry.statusValue], !1);
- },
- onInvert: () => api.addStatusFilters([entry.statusValue], !isExcluded)
- };
- },
- [api, includedStatusFilters, excludedStatusFilters, theme]
- ), builtInItems = useMemo(
- () => builtInEntries.sort((a2, b2) => a2.id.localeCompare(b2.id)).map(toTagFilterItem).filter((f2) => f2 !== null),
- [builtInEntries, toTagFilterItem]
- ), tagItems = useMemo(
- () => tagEntries.sort((a2, b2) => a2.id.localeCompare(b2.id)).map(toTagFilterItem).filter((f2) => f2 !== null),
- [tagEntries, toTagFilterItem]
- ), statusItems = useMemo(
- () => statusEntries.map(toStatusFilterItem),
- [statusEntries, toStatusFilterItem]
- ), filterIds = useMemo(
- () => [...builtInEntries.map((e2) => e2.id), ...tagEntries.map((e2) => e2.id)],
- [builtInEntries, tagEntries]
- ), setAllFilters = useCallback(
- (selected) => api.setAllTagFilters(selected ? filterIds : [], []),
- [api, filterIds]
- ), isDefaultSelection = areFiltersEqual(includedFilters, defaultIncludedFilters) && areFiltersEqual(excludedFilters, defaultExcludedFilters), hasDefaultSelection = defaultIncludedFilters.length > 0 || defaultExcludedFilters.length > 0, isNothingSelectedYet = includedFilters.length === 0 && excludedFilters.length === 0 && includedStatusFilters.length === 0 && excludedStatusFilters.length === 0, hasItems = builtInItems.length > 0 || tagItems.length > 0;
- return react_default.createElement(Wrapper7, null, hasItems && react_default.createElement(ActionList, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div" }, isNothingSelectedYet ? react_default.createElement(
- ActionList.Button,
- {
- ariaLabel: !1,
- id: "select-all",
- key: "select-all",
- onClick: () => setAllFilters(!0)
- },
- react_default.createElement(BatchAcceptIcon, null),
- react_default.createElement(ActionList.Text, null, "Select all")
- ) : react_default.createElement(
- ActionList.Button,
- {
- ariaLabel: !1,
- id: "deselect-all",
- key: "deselect-all",
- onClick: async () => {
- await setAllFilters(!1), await api.resetStatusFilters();
- }
- },
- react_default.createElement(SweepIcon, null),
- react_default.createElement(ActionList.Text, null, "Clear filters")
- ), hasDefaultSelection && react_default.createElement(
- ActionList.Button,
- {
- id: "reset-filters",
- key: "reset-filters",
- onClick: () => api.resetTagFilters(),
- ariaLabel: "Reset filters",
- tooltip: "Reset to default selection",
- disabled: isDefaultSelection
- },
- react_default.createElement(UndoIcon, null)
- ))), builtInItems.length > 0 && react_default.createElement(ActionList, null, builtInItems.map((item) => {
- let link = createFilterLink(item);
- return react_default.createElement(Fragment, { key: link.id }, link.content);
- })), statusItems.length > 0 && react_default.createElement(ActionList, null, statusItems.map((item) => {
- let link = createFilterLink(item);
- return react_default.createElement(Fragment, { key: link.id }, link.content);
- })), tagItems.length > 0 && react_default.createElement(ActionList, null, tagItems.map((item) => {
- let link = createFilterLink(item);
- return react_default.createElement(Fragment, { key: link.id }, link.content);
- })), tagItems.length === 0 && react_default.createElement(ActionList, { as: "div" }, react_default.createElement(ActionList.Item, { as: "div" }, react_default.createElement(
- ActionList.Link,
- {
- ariaLabel: !1,
- href: api.getDocsUrl({ subpath: "writing-stories/tags#custom-tags" }),
- target: "_blank"
- },
- react_default.createElement(ActionList.Icon, null, react_default.createElement(DocumentIcon, null)),
- react_default.createElement(ActionList.Text, null, react_default.createElement("span", null, "Learn how to add tags")),
- react_default.createElement(ActionList.Icon, null, react_default.createElement(ShareAltIcon, null))
- ))));
- };
-
- // src/manager/components/sidebar/Filter.tsx
- var StyledButton2 = styled(Button)(({ $isHighlighted, theme }) => ({
- "&:focus-visible": {
- outlineOffset: 4
- },
- ...$isHighlighted && {
- background: theme.background.hoverable,
- color: theme.color.secondary
- }
- })), TagSelected = styled(Badge)(({ theme }) => ({
- position: "absolute",
- top: 7,
- right: 7,
- transform: "translate(50%, -50%)",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- padding: 3,
- height: 6,
- minWidth: 6,
- lineHeight: "px",
- boxShadow: `${theme.barSelectedColor} 0 0 0 1px inset`,
- fontSize: theme.typography.size.s1 - 1,
- background: theme.barSelectedColor,
- color: theme.color.inverseText
- })), filterMapper = ({ api, state }) => ({
- api,
- indexJson: state.internal_index,
- activeFilterCount: getActiveFilterCount(state),
- defaultIncludedFilters: state.defaultIncludedTagFilters,
- defaultExcludedFilters: state.defaultExcludedTagFilters,
- includedFilters: state.includedTagFilters,
- excludedFilters: state.excludedTagFilters,
- includedStatusFilters: state.includedStatusFilters ?? [],
- excludedStatusFilters: state.excludedStatusFilters ?? []
- }), FilterInner = ({
- api,
- indexJson,
- activeFilterCount,
- defaultIncludedFilters,
- defaultExcludedFilters,
- includedFilters,
- excludedFilters,
- includedStatusFilters,
- excludedStatusFilters
- }) => {
- let [expanded, setExpanded] = useState(!1), allStatuses = experimental_useStatusStore(), handleToggleExpand = useCallback(
- (event) => {
- event.preventDefault(), setExpanded(!expanded);
- },
- [expanded]
- );
- return react_default.createElement(
- PopoverProvider,
- {
- ariaLabel: "Tag filters",
- placement: "bottom",
- onVisibleChange: setExpanded,
- offset: 8,
- padding: 0,
- popover: () => react_default.createElement(
- FilterPanel,
- {
- api,
- indexJson,
- defaultIncludedFilters,
- defaultExcludedFilters,
- includedFilters,
- excludedFilters,
- allStatuses,
- includedStatusFilters,
- excludedStatusFilters
- }
- )
- },
- react_default.createElement(
- StyledButton2,
- {
- key: "tags",
- ariaLabel: activeFilterCount ? `${activeFilterCount} active tag ${activeFilterCount !== 1 ? "filters" : "filter"}` : "Tag filters",
- ariaDescription: "Filter the items shown in a sidebar based on the tags applied to them.",
- variant: "ghost",
- padding: "small",
- $isHighlighted: activeFilterCount > 0,
- onClick: handleToggleExpand
- },
- react_default.createElement(FilterIcon, null),
- activeFilterCount > 0 && react_default.createElement(TagSelected, null)
- )
- );
- }, Filter = () => react_default.createElement(Consumer, { filter: filterMapper }, ({
- api,
- indexJson,
- activeFilterCount,
- defaultIncludedFilters,
- defaultExcludedFilters,
- includedFilters,
- excludedFilters,
- includedStatusFilters,
- excludedStatusFilters
- }) => indexJson ? react_default.createElement(
- FilterInner,
- {
- api,
- indexJson,
- activeFilterCount,
- defaultIncludedFilters,
- defaultExcludedFilters,
- includedFilters,
- excludedFilters,
- includedStatusFilters,
- excludedStatusFilters
- }
- ) : null);
-
- // src/manager/components/sidebar/ReviewChangesButton.tsx
- init_react();
-
- // src/shared/universal-store/instances.ts
- var instances = /* @__PURE__ */ new Map();
-
- // src/shared/universal-store/index.ts
- var CHANNEL_EVENT_PREFIX = "UNIVERSAL_STORE:", ProgressState = {
- PENDING: "PENDING",
- RESOLVED: "RESOLVED",
- REJECTED: "REJECTED"
- }, _UniversalStore = class _UniversalStore {
- constructor(options2, environmentOverrides) {
- /** Enable debug logs for this store */
- this.debugging = !1;
- // TODO: narrow type of listeners based on event type
- this.listeners = /* @__PURE__ */ new Map([["*", /* @__PURE__ */ new Set()]]);
- /** Gets the current state */
- this.getState = () => (this.debug("getState", { state: this.state }), this.state);
- /**
- * Subscribes to store events
- *
- * @returns A function to unsubscribe
- */
- this.subscribe = (eventTypeOrListener, maybeListener) => {
- let subscribesToAllEvents = typeof eventTypeOrListener == "function", eventType = subscribesToAllEvents ? "*" : eventTypeOrListener, listener = subscribesToAllEvents ? eventTypeOrListener : maybeListener;
- if (this.debug("subscribe", { eventType, listener }), !listener)
- throw new TypeError(
- `Missing first subscribe argument, or second if first is the event type, when subscribing to a UniversalStore with id '${this.id}'`
- );
- return this.listeners.has(eventType) || this.listeners.set(eventType, /* @__PURE__ */ new Set()), this.listeners.get(eventType).add(listener), () => {
- this.debug("unsubscribe", { eventType, listener }), this.listeners.has(eventType) && (this.listeners.get(eventType).delete(listener), this.listeners.get(eventType)?.size === 0 && this.listeners.delete(eventType));
- };
- };
- /** Sends a custom event to the other stores */
- this.send = (event) => {
- if (this.debug("send", { event }), this.status !== _UniversalStore.Status.READY)
- throw new TypeError(
- dedent`Cannot send event before store is ready. You can get the current status with store.status,
- or await store.readyPromise to wait for the store to be ready before sending events.
- ${JSON.stringify(
- {
- event,
- id: this.id,
- actor: this.actor,
- environment: this.environment
- },
- null,
- 2
- )}`
- );
- this.emitToListeners(event, { actor: this.actor }), this.emitToChannel(event, { actor: this.actor });
- };
- if (this.debugging = options2.debug ?? !1, !_UniversalStore.isInternalConstructing)
- throw new TypeError(
- "UniversalStore is not constructable - use UniversalStore.create() instead"
- );
- if (_UniversalStore.isInternalConstructing = !1, this.id = options2.id, this.actorId = Date.now().toString(36) + Math.random().toString(36).substring(2), this.actorType = options2.leader ? _UniversalStore.ActorType.LEADER : _UniversalStore.ActorType.FOLLOWER, this.state = options2.initialState, this.channelEventName = `${CHANNEL_EVENT_PREFIX}${this.id}`, this.debug("constructor", {
- options: options2,
- environmentOverrides,
- channelEventName: this.channelEventName
- }), this.actor.type === _UniversalStore.ActorType.LEADER)
- this.syncing = {
- state: ProgressState.RESOLVED,
- promise: Promise.resolve()
- };
- else {
- let syncingResolve, syncingReject, syncingPromise = new Promise((resolve, reject) => {
- syncingResolve = () => {
- this.syncing.state === ProgressState.PENDING && (this.syncing.state = ProgressState.RESOLVED, resolve());
- }, syncingReject = (reason) => {
- this.syncing.state === ProgressState.PENDING && (this.syncing.state = ProgressState.REJECTED, reject(reason));
- };
- });
- this.syncing = {
- state: ProgressState.PENDING,
- promise: syncingPromise,
- resolve: syncingResolve,
- reject: syncingReject
- };
- }
- this.getState = this.getState.bind(this), this.setState = this.setState.bind(this), this.subscribe = this.subscribe.bind(this), this.onStateChange = this.onStateChange.bind(this), this.send = this.send.bind(this), this.emitToChannel = this.emitToChannel.bind(this), this.prepareThis = this.prepareThis.bind(this), this.emitToListeners = this.emitToListeners.bind(this), this.handleChannelEvents = this.handleChannelEvents.bind(this), this.debug = this.debug.bind(this), this.channel = environmentOverrides?.channel ?? _UniversalStore.preparation.channel, this.environment = environmentOverrides?.environment ?? _UniversalStore.preparation.environment, this.channel && this.environment ? (_UniversalStore.preparation.resolve({ channel: this.channel, environment: this.environment }), this.prepareThis({ channel: this.channel, environment: this.environment })) : _UniversalStore.preparation.promise.then(this.prepareThis);
- }
- static setupPreparationPromise() {
- let resolveRef, rejectRef, promise = new Promise(
- (resolve, reject) => {
- resolveRef = (args) => {
- resolve(args);
- }, rejectRef = (...args) => {
- reject(args);
- };
- }
- );
- _UniversalStore.preparation = {
- resolve: resolveRef,
- reject: rejectRef,
- promise
- };
- }
- /** The actor object representing the store instance with a unique ID and a type */
- get actor() {
- return Object.freeze({
- id: this.actorId,
- type: this.actorType,
- environment: this.environment ?? _UniversalStore.Environment.UNKNOWN
- });
- }
- /**
- * The current state of the store, that signals both if the store is prepared by Storybook and
- * also - in the case of a follower - if the state has been synced with the leader's state.
- */
- get status() {
- if (!this.channel || !this.environment)
- return _UniversalStore.Status.UNPREPARED;
- switch (this.syncing?.state) {
- case ProgressState.PENDING:
- case void 0:
- return _UniversalStore.Status.SYNCING;
- case ProgressState.REJECTED:
- return _UniversalStore.Status.ERROR;
- case ProgressState.RESOLVED:
- default:
- return _UniversalStore.Status.READY;
- }
- }
- /**
- * A promise that resolves when the store is fully ready. A leader will be ready when the store
- * has been prepared by Storybook, which is almost instantly.
- *
- * A follower will be ready when the state has been synced with the leader's state, within a few
- * hundred milliseconds.
- */
- untilReady() {
- return Promise.all([_UniversalStore.preparation.promise, this.syncing?.promise]);
- }
- /** Creates a new instance of UniversalStore */
- static create(options2) {
- if (!options2 || typeof options2?.id != "string")
- throw new TypeError("id is required and must be a string, when creating a UniversalStore");
- options2.debug && console.debug(
- dedent`[UniversalStore]
- create`,
- { options: options2 }
- );
- let existing = instances.get(options2.id);
- if (existing)
- return console.warn(dedent`UniversalStore with id "${options2.id}" already exists in this environment, re-using existing.
- You should reuse the existing instance instead of trying to create a new one.`), existing;
- _UniversalStore.isInternalConstructing = !0;
- let store2 = new _UniversalStore(options2);
- return instances.set(options2.id, store2), store2;
- }
- /**
- * Used by Storybook to set the channel for all instances of UniversalStore in the given
- * environment.
- *
- * @internal
- */
- static __prepare(channel, environment) {
- _UniversalStore.preparation.channel = channel, _UniversalStore.preparation.environment = environment, _UniversalStore.preparation.resolve({ channel, environment });
- }
- /**
- * Updates the store's state
- *
- * Either a new state or a state updater function can be passed to the method.
- */
- setState(updater) {
- let previousState = this.state, newState = typeof updater == "function" ? updater(previousState) : updater;
- if (this.debug("setState", { newState, previousState, updater }), this.status !== _UniversalStore.Status.READY)
- throw new TypeError(
- dedent`Cannot set state before store is ready. You can get the current status with store.status,
- or await store.readyPromise to wait for the store to be ready before sending events.
- ${JSON.stringify(
- {
- newState,
- id: this.id,
- actor: this.actor,
- environment: this.environment
- },
- null,
- 2
- )}`
- );
- this.state = newState;
- let event = {
- type: _UniversalStore.InternalEventType.SET_STATE,
- payload: {
- state: newState,
- previousState
- }
- };
- this.emitToChannel(event, { actor: this.actor }), this.emitToListeners(event, { actor: this.actor });
- }
- /**
- * Subscribes to state changes
- *
- * @returns Unsubscribe function
- */
- onStateChange(listener) {
- return this.debug("onStateChange", { listener }), this.subscribe(
- _UniversalStore.InternalEventType.SET_STATE,
- ({ payload }, eventInfo) => {
- listener(payload.state, payload.previousState, eventInfo);
- }
- );
- }
- emitToChannel(event, eventInfo) {
- this.debug("emitToChannel", { event, eventInfo, channel: !!this.channel }), this.channel?.emit(this.channelEventName, {
- event,
- eventInfo
- });
- }
- prepareThis({
- channel,
- environment
- }) {
- this.channel = channel, this.environment = environment, this.debug("prepared", { channel: !!channel, environment }), this.channel.on(this.channelEventName, this.handleChannelEvents), this.actor.type === _UniversalStore.ActorType.LEADER ? this.emitToChannel(
- { type: _UniversalStore.InternalEventType.LEADER_CREATED },
- { actor: this.actor }
- ) : (this.emitToChannel(
- { type: _UniversalStore.InternalEventType.FOLLOWER_CREATED },
- { actor: this.actor }
- ), this.emitToChannel(
- { type: _UniversalStore.InternalEventType.EXISTING_STATE_REQUEST },
- { actor: this.actor }
- ), setTimeout(() => {
- this.syncing.reject(
- new TypeError(
- `No existing state found for follower with id: '${this.id}'. Make sure a leader with the same id exists before creating a follower.`
- )
- );
- }, 1e3));
- }
- emitToListeners(event, eventInfo) {
- let eventTypeListeners = this.listeners.get(event.type), everythingListeners = this.listeners.get("*");
- this.debug("emitToListeners", {
- event,
- eventInfo,
- eventTypeListeners,
- everythingListeners
- }), [...eventTypeListeners ?? [], ...everythingListeners ?? []].forEach(
- (listener) => listener(event, eventInfo)
- );
- }
- handleChannelEvents(channelEvent) {
- let { event, eventInfo } = channelEvent;
- if ([eventInfo.actor.id, eventInfo.forwardingActor?.id].includes(this.actor.id)) {
- this.debug("handleChannelEvents: Ignoring event from self", { channelEvent });
- return;
- } else if (this.syncing?.state === ProgressState.PENDING && event.type !== _UniversalStore.InternalEventType.EXISTING_STATE_RESPONSE) {
- this.debug("handleChannelEvents: Ignoring event while syncing", { channelEvent });
- return;
- }
- if (this.debug("handleChannelEvents", { channelEvent }), this.actor.type === _UniversalStore.ActorType.LEADER) {
- let shouldForwardEvent = !0;
- switch (event.type) {
- case _UniversalStore.InternalEventType.EXISTING_STATE_REQUEST:
- shouldForwardEvent = !1;
- let responseEvent = {
- type: _UniversalStore.InternalEventType.EXISTING_STATE_RESPONSE,
- payload: this.state
- };
- this.debug("handleChannelEvents: responding to existing state request", {
- responseEvent
- }), this.emitToChannel(responseEvent, { actor: this.actor }), this.emitToListeners(responseEvent, { actor: this.actor });
- break;
- case _UniversalStore.InternalEventType.LEADER_CREATED:
- shouldForwardEvent = !1, this.syncing.state = ProgressState.REJECTED, this.debug("handleChannelEvents: erroring due to second leader being created", {
- event
- }), console.error(
- dedent`Detected multiple UniversalStore leaders created with the same id "${this.id}".
- Only one leader can exists at a time, your stores are now in an invalid state.
- Leaders detected:
- this: ${JSON.stringify(this.actor, null, 2)}
- other: ${JSON.stringify(eventInfo.actor, null, 2)}`
- );
- break;
- }
- shouldForwardEvent && (this.debug("handleChannelEvents: forwarding event", { channelEvent }), this.emitToChannel(event, { actor: eventInfo.actor, forwardingActor: this.actor }));
- }
- if (this.actor.type === _UniversalStore.ActorType.FOLLOWER)
- switch (event.type) {
- case _UniversalStore.InternalEventType.EXISTING_STATE_RESPONSE:
- if (this.debug("handleChannelEvents: Setting state from leader's existing state response", {
- event
- }), this.syncing?.state !== ProgressState.PENDING)
- break;
- this.syncing.resolve?.();
- let setStateEvent = {
- type: _UniversalStore.InternalEventType.SET_STATE,
- payload: {
- state: event.payload,
- previousState: this.state
- }
- };
- this.state = event.payload, this.emitToListeners(setStateEvent, eventInfo);
- break;
- }
- switch (event.type) {
- case _UniversalStore.InternalEventType.SET_STATE:
- this.debug("handleChannelEvents: Setting state", { event }), this.state = event.payload.state;
- break;
- }
- this.emitToListeners(event, { actor: eventInfo.actor });
- }
- debug(message, data) {
- this.debugging && console.debug(
- dedent`[UniversalStore::${this.id}::${this.environment ?? _UniversalStore.Environment.UNKNOWN}]
- ${message}`,
- JSON.stringify(
- {
- data,
- actor: this.actor,
- state: this.state,
- status: this.status
- },
- null,
- 2
- )
- );
- }
- /**
- * Used to reset the static fields of the UniversalStore class when cleaning up tests
- *
- * @internal
- */
- static __reset() {
- _UniversalStore.preparation.reject(new Error("reset")), _UniversalStore.setupPreparationPromise(), _UniversalStore.isInternalConstructing = !1;
- }
- };
- /**
- * Defines the possible actor types in the store system
- *
- * @readonly
- */
- _UniversalStore.ActorType = {
- LEADER: "LEADER",
- FOLLOWER: "FOLLOWER"
- }, /**
- * Defines the possible environments the store can run in
- *
- * @readonly
- */
- _UniversalStore.Environment = {
- SERVER: "SERVER",
- MANAGER: "MANAGER",
- PREVIEW: "PREVIEW",
- UNKNOWN: "UNKNOWN",
- MOCK: "MOCK"
- }, /**
- * Internal event types used for store synchronization
- *
- * @readonly
- */
- _UniversalStore.InternalEventType = {
- EXISTING_STATE_REQUEST: "__EXISTING_STATE_REQUEST",
- EXISTING_STATE_RESPONSE: "__EXISTING_STATE_RESPONSE",
- SET_STATE: "__SET_STATE",
- LEADER_CREATED: "__LEADER_CREATED",
- FOLLOWER_CREATED: "__FOLLOWER_CREATED"
- }, _UniversalStore.Status = {
- UNPREPARED: "UNPREPARED",
- SYNCING: "SYNCING",
- READY: "READY",
- ERROR: "ERROR"
- }, // This is used to check if constructor was called from the static factory create()
- _UniversalStore.isInternalConstructing = !1, _UniversalStore.setupPreparationPromise();
- var UniversalStore = _UniversalStore;
-
- // src/shared/universal-store/use-universal-store-manager.ts
- init_react();
- var useUniversalStore = (universalStore, selector) => {
- let snapshotRef = useRef(
- selector ? selector(universalStore.getState()) : universalStore.getState()
- ), subscribe = useCallback(
- (listener) => universalStore.onStateChange((state2, previousState) => {
- if (!selector) {
- snapshotRef.current = state2, listener();
- return;
- }
- let selectedState = selector(state2), selectedPreviousState = selector(previousState);
- !isEqual(selectedState, selectedPreviousState) && (snapshotRef.current = selectedState, listener());
- }),
- [universalStore, selector]
- ), getSnapshot = useCallback(() => {
- let currentState = universalStore.getState(), selectedState = selector ? selector(currentState) : currentState;
- return isEqual(selectedState, snapshotRef.current) || (snapshotRef.current = selectedState), snapshotRef.current;
- }, [universalStore, selector]);
- return [useSyncExternalStore(subscribe, getSnapshot), universalStore.setState];
- };
-
- // src/manager-api/stores/status.ts
- var statusStore = createStatusStore({
- universalStatusStore: UniversalStore.create({
- ...UNIVERSAL_STATUS_STORE_OPTIONS,
- leader: globalThis.CONFIG_TYPE === "PRODUCTION"
- }),
- useUniversalStore,
- environment: "manager"
- }), { fullStatusStore, getStatusStoreByTypeId, useStatusStore, universalStatusStore } = statusStore;
-
- // src/manager-api/modules/statuses.ts
- var computeStatusFilterFn = (includedStatusFilters, excludedStatusFilters) => (entry) => {
- if (!includedStatusFilters.length && !excludedStatusFilters.length)
- return !0;
- let storyStatuses = (fullStatusStore.getAll() ?? {})[entry.id], storyStatusValues = storyStatuses ? Object.values(storyStatuses).map((s2) => s2.value) : [], passesInclude = !includedStatusFilters.length || includedStatusFilters.some((v2) => storyStatusValues.includes(v2)), passesExclude = !excludedStatusFilters.length || excludedStatusFilters.every((v2) => !storyStatusValues.includes(v2));
- return passesInclude && passesExclude;
- };
-
- // src/manager-api/modules/tags.ts
- var import_memoizerific5 = __toESM(require_memoizerific(), 1);
- var getDefaultTagsFromPreset = (0, import_memoizerific5.default)(1)((presets) => {
- let presetEntries = Object.entries(presets);
- return {
- included: presetEntries.filter(([, option]) => option.defaultFilterSelection === "include").map(([tag]) => tag),
- excluded: presetEntries.filter(([, option]) => option.defaultFilterSelection === "exclude").map(([tag]) => tag)
- };
- });
- var computeTagsFilterFn = (includedTagFilters, excludedTagFilters) => {
- let computeFilterFunctions = (set) => Object.values(
- set.reduce(
- (acc, tag) => (Object.hasOwn(BUILT_IN_FILTERS, tag) ? acc["built-in"].push(BUILT_IN_FILTERS[tag]) : acc.user.push(USER_TAG_FILTER(tag)), acc),
- { "built-in": [], user: [] }
- )
- ).filter((group) => group.length > 0);
- return (item) => {
- let included = computeFilterFunctions(includedTagFilters), excluded = computeFilterFunctions(excludedTagFilters);
- return (!included.length || included.every((group) => group.some((filterFn) => filterFn(item, !1)))) && (!excluded.length || excluded.every((group) => group.every((filterFn) => filterFn(item, !0))));
- };
- };
-
- // src/manager/components/sidebar/ReviewChangesButton.tsx
- var Wrapper8 = styled.div({
- display: "flex",
- alignItems: "center",
- gap: 4,
- marginTop: -8
- }), StyledCTA = styled(ToggleButton)({
- flex: 1,
- justifyContent: "flex-start"
- }), StyledIcon = styled.svg(({ theme }) => ({
- color: theme.fgColor.accent
- })), NEW = "status-value:new", MOD = "status-value:modified", ReviewChangesButton = () => {
- let api = useStorybookApi(), {
- internal_index: index,
- includedStatusFilters: rawIncludedStatusFilters,
- excludedStatusFilters: rawExcludedStatusFilters,
- includedTagFilters: rawIncludedTagFilters,
- excludedTagFilters: rawExcludedTagFilters
- } = useStorybookState(), allStatuses = experimental_useStatusStore(), { newCount, modifiedCount } = useMemo(() => {
- if (!index)
- return { newCount: 0, modifiedCount: 0 };
- let includedStatusFilters2 = rawIncludedStatusFilters ?? [], excludedStatusFilters2 = rawExcludedStatusFilters ?? [], includedTagFilters = rawIncludedTagFilters ?? [], excludedTagFilters = rawExcludedTagFilters ?? [], contextualIncludedStatuses = includedStatusFilters2.filter((s2) => s2 !== NEW && s2 !== MOD), contextualExcludedStatuses = excludedStatusFilters2.filter((s2) => s2 !== NEW && s2 !== MOD), tagFilterFn = computeTagsFilterFn(includedTagFilters, excludedTagFilters), statusFilterFn = computeStatusFilterFn(
- contextualIncludedStatuses,
- contextualExcludedStatuses
- ), next = 0, modified = 0, entries = index.entries ?? {};
- for (let [storyId, statusesByType] of Object.entries(allStatuses)) {
- let entry = entries[storyId];
- if (!entry)
- continue;
- let entryWithStatuses = { ...entry, statuses: statusesByType };
- if (!tagFilterFn(entryWithStatuses) || !statusFilterFn(entryWithStatuses))
- continue;
- let statuses = Object.values(statusesByType);
- statuses.some(({ value }) => value === NEW) && (next += 1), statuses.some(({ value }) => value === MOD) && (modified += 1);
- }
- return { newCount: next, modifiedCount: modified };
- }, [
- index,
- allStatuses,
- rawIncludedStatusFilters,
- rawExcludedStatusFilters,
- rawIncludedTagFilters,
- rawExcludedTagFilters
- ]), includedStatusFilters = rawIncludedStatusFilters ?? [], excludedStatusFilters = rawExcludedStatusFilters ?? [], isReviewActive = includedStatusFilters.includes(NEW) && includedStatusFilters.includes(MOD);
- if (!globalThis.FEATURES?.changeDetection || newCount === 0 && modifiedCount === 0)
- return null;
- let clearReview = () => {
- let nextIncluded = includedStatusFilters.filter((s2) => s2 !== NEW && s2 !== MOD), nextExcluded = excludedStatusFilters.filter((s2) => s2 !== NEW && s2 !== MOD);
- api.setAllStatusFilters(nextIncluded, nextExcluded);
- }, onClick = () => {
- if (isReviewActive)
- clearReview();
- else {
- let nextIncluded = Array.from(/* @__PURE__ */ new Set([...includedStatusFilters, NEW, MOD])), nextExcluded = excludedStatusFilters.filter((s2) => s2 !== NEW && s2 !== MOD);
- api.setAllStatusFilters(nextIncluded, nextExcluded);
- }
- }, onClearClick = (e2) => {
- e2.stopPropagation(), clearReview();
- }, changeKinds = newCount > 0 && modifiedCount > 0 ? "new and modified" : newCount > 0 ? "new" : "modified", label = `${isReviewActive ? "Reviewing" : "Review"} ${changeKinds} stories`;
- return react_default.createElement(Wrapper8, null, react_default.createElement(
- StyledCTA,
- {
- variant: "ghost",
- padding: "small",
- pressed: isReviewActive,
- ariaLabel: label,
- onClick
- },
- react_default.createElement(StyledIcon, { viewBox: "0 0 14 14", width: "14", height: "14", "aria-hidden": !0 }, react_default.createElement(UseSymbol, { type: "new" })),
- label
- ), isReviewActive && react_default.createElement(
- Button,
- {
- variant: "ghost",
- padding: "small",
- size: "small",
- onClick: onClearClick,
- ariaLabel: "Clear",
- tooltip: "Clear"
- },
- react_default.createElement(CloseIcon, null)
- ));
- }, ReviewChangesButton_default = ReviewChangesButton;
-
- // src/manager/components/sidebar/useLastViewed.ts
- init_react();
- var import_store2 = __toESM(require_store2(), 1), save = debounce((value) => import_store2.default.set("lastViewedStoryIds", value), 1e3), useLastViewed = (selection) => {
- let initialLastViewedStoryIds = useMemo(() => {
- let items = import_store2.default.get("lastViewedStoryIds");
- return !items || !Array.isArray(items) ? [] : items.some((item) => typeof item == "object" && item.storyId && item.refId) ? items : [];
- }, [import_store2.default]), lastViewedRef = useRef(initialLastViewedStoryIds), updateLastViewed = useCallback(
- (story) => {
- let items = lastViewedRef.current, index = items.findIndex(
- ({ storyId, refId }) => storyId === story.storyId && refId === story.refId
- );
- index !== 0 && (index === -1 ? lastViewedRef.current = [story, ...items] : lastViewedRef.current = [story, ...items.slice(0, index), ...items.slice(index + 1)], save(lastViewedRef.current));
- },
- [lastViewedRef]
- );
- return useEffect(() => {
- selection && updateLastViewed(selection);
- }, [selection]), {
- getLastViewed: useCallback(() => lastViewedRef.current, [lastViewedRef]),
- clearLastViewed: useCallback(() => {
- lastViewedRef.current = lastViewedRef.current.slice(0, 1), save(lastViewedRef.current);
- }, [lastViewedRef])
- };
- };
-
- // src/manager/components/sidebar/Sidebar.tsx
- var DEFAULT_REF_ID = "storybook_internal", Container11 = styled.header(({ theme }) => ({
- position: "absolute",
- zIndex: 1,
- left: 0,
- top: 0,
- bottom: 0,
- right: 0,
- width: "100%",
- height: "100%",
- display: "flex",
- flexDirection: "column",
- background: theme.background.content,
- [MEDIA_DESKTOP_BREAKPOINT]: {
- background: theme.background.app
- }
- })), Stack = styled.div({
- display: "flex",
- flexDirection: "column",
- gap: 16,
- padding: "16px 12px 20px 12px"
- }), CreateNewStoryButton = styled(Button)(({ theme, isMobile: isMobile2 }) => ({
- color: theme.textMutedColor,
- width: isMobile2 ? 36 : 32,
- height: isMobile2 ? 36 : 32,
- borderRadius: theme.appBorderRadius + 2
- })), useCombination = (index, indexError, previewInitialized, allStatuses, refs) => {
- let hash = useMemo(
- () => ({
- [DEFAULT_REF_ID]: {
- index,
- filteredIndex: index,
- indexError,
- previewInitialized,
- allStatuses,
- title: null,
- id: DEFAULT_REF_ID,
- url: "iframe.html"
- },
- ...refs
- }),
- [refs, index, indexError, previewInitialized, allStatuses]
- );
- return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
- }, isRendererReact2 = scope.STORYBOOK_RENDERER === "react", Sidebar = react_default.memo(function({
- // @ts-expect-error (non strict)
- storyId = null,
- refId = DEFAULT_REF_ID,
- index,
- indexJson,
- indexError,
- allStatuses,
- previewInitialized,
- menu,
- menuHighlighted = !1,
- enableShortcuts = !0,
- isDevelopment = scope.CONFIG_TYPE === "DEVELOPMENT",
- refs = {},
- onMenuClick,
- showCreateStoryButton = isDevelopment && isRendererReact2
- }) {
- let [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(!1), selected = useMemo(() => storyId && { storyId, refId }, [storyId, refId]), dataset = useCombination(index, indexError, previewInitialized, allStatuses, refs), isLoading = !index && !indexError, hasEntries = Object.keys(indexJson?.entries ?? {}).length > 0, lastViewedProps = useLastViewed(selected), { isMobile: isMobile2 } = useLayout(), api = useStorybookApi(), { viewMode } = api.getUrlState(), headerRef = useRef(null), { landmarkProps } = useLandmark(
- { "aria-labelledby": "global-site-h1", role: "banner" },
- headerRef
- ), skipLinkHref = viewMode !== void 0 && viewMode !== "story" && viewMode !== "docs" ? "#main-content-wrapper" : "#storybook-preview-wrapper";
- return react_default.createElement(
- Container11,
- {
- className: "container sidebar-container",
- id: focusableUIElements.sidebarRegion,
- ref: headerRef,
- ...landmarkProps
- },
- react_default.createElement("h1", { id: "global-site-h1", className: "sb-sr-only" }, "Storybook"),
- react_default.createElement(IconSymbols, null),
- react_default.createElement(ScrollArea, { vertical: !0, offset: 3, scrollbarSize: 6, scrollPadding: "4rem" }, react_default.createElement(Stack, null, react_default.createElement("div", null, react_default.createElement(
- Heading2,
- {
- className: "sidebar-header",
- menuHighlighted,
- menu,
- skipLinkHref,
- isLoading,
- onMenuClick
- }
- ), !isLoading && scope.CONFIG_TYPE === "DEVELOPMENT" && scope.FEATURES?.sidebarOnboardingChecklist !== !1 && react_default.createElement(ChecklistWidget, null)), react_default.createElement(
- Search,
- {
- dataset,
- enableShortcuts,
- searchBarContent: showCreateStoryButton && react_default.createElement(react_default.Fragment, null, react_default.createElement(
- CreateNewStoryButton,
- {
- isMobile: isMobile2,
- onClick: () => {
- setIsFileSearchModalOpen(!0);
- },
- ariaLabel: "Create a new story",
- variant: "outline",
- padding: "small"
- },
- react_default.createElement(PlusIcon, null)
- ), react_default.createElement(
- CreateNewStoryFileModal,
- {
- open: isFileSearchModalOpen,
- onOpenChange: setIsFileSearchModalOpen
- }
- )),
- searchFieldContent: react_default.createElement(Filter, null),
- belowSearchContent: react_default.createElement(ReviewChangesButton_default, null),
- ...lastViewedProps
- },
- ({
- query,
- results,
- isNavVisible,
- isNavReachable,
- isSearchResultRendered,
- closeMenu,
- getMenuProps,
- getItemProps,
- highlightedIndex
- }) => react_default.createElement(react_default.Fragment, null, react_default.createElement(
- Explorer,
- {
- dataset,
- selected,
- isLoading,
- isBrowsing: isNavVisible,
- isHidden: !isNavReachable,
- hasEntries
- }
- ), isSearchResultRendered && react_default.createElement(
- SearchResults,
- {
- query,
- results,
- closeMenu,
- getMenuProps,
- getItemProps,
- highlightedIndex,
- enableShortcuts,
- isLoading,
- clearLastViewed: lastViewedProps.clearLastViewed
- }
- ))
- )), isMobile2 || isLoading ? null : react_default.createElement(SidebarBottom, { isDevelopment }))
- );
- });
-
- // src/manager/container/Menu.tsx
- init_react();
- var ProgressCircle2 = styled(ProgressSpinner)(({ theme }) => ({
- color: theme.color.secondary
- })), useMenu = ({
- api,
- showToolbar,
- isPanelShown,
- isNavShown,
- enableShortcuts
- }) => {
- let shortcutKeys = api.getShortcutKeys(), { progress } = useChecklist(), about = useMemo(
- () => ({
- id: "about",
- title: "About your Storybook",
- onClick: () => api.changeSettingsTab("about"),
- href: "./?path=/settings/about",
- internal: !0,
- closeOnClick: !0,
- icon: react_default.createElement(InfoIcon, null)
- }),
- [api]
- ), guide = useMemo(
- () => ({
- id: "guide",
- title: "Onboarding guide",
- onClick: () => api.changeSettingsTab("guide"),
- href: "./?path=/settings/guide",
- internal: !0,
- closeOnClick: !0,
- icon: react_default.createElement(ListUnorderedIcon, null),
- right: progress < 100 && react_default.createElement(ActionList.Button, { as: "div", readOnly: !0, padding: "none", ariaLabel: `${progress}% completed` }, react_default.createElement(ProgressCircle2, { percentage: progress, running: !1, size: 16, width: 1.5 }), progress, "%")
- }),
- [api, progress]
- ), shortcuts = useMemo(
- () => ({
- id: "shortcuts",
- title: "Keyboard shortcuts",
- onClick: () => api.changeSettingsTab("shortcuts"),
- href: "./?path=/settings/shortcuts",
- internal: !0,
- closeOnClick: !0,
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.shortcutsPage }) : null,
- icon: react_default.createElement(CommandIcon, null)
- }),
- [api, enableShortcuts, shortcutKeys.shortcutsPage]
- ), sidebarToggle = useMemo(
- () => ({
- id: "S",
- title: "Show sidebar",
- onClick: () => api.toggleNav(),
- closeOnClick: !0,
- active: isNavShown,
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toggleNav }) : null,
- icon: isNavShown ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys, isNavShown]
- ), toolbarToogle = useMemo(
- () => ({
- id: "T",
- title: "Show toolbar",
- onClick: () => api.toggleToolbar(),
- active: showToolbar,
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.toolbar }) : null,
- icon: showToolbar ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys, showToolbar]
- ), addonsToggle = useMemo(
- () => ({
- id: "A",
- title: "Show addons panel",
- onClick: () => api.togglePanel(),
- active: isPanelShown,
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.togglePanel }) : null,
- icon: isPanelShown ? react_default.createElement(CheckIcon, null) : react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys, isPanelShown]
- ), up = useMemo(
- () => ({
- id: "up",
- title: "Previous component",
- onClick: () => api.jumpToComponent(-1),
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevComponent }) : null,
- icon: react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys]
- ), down = useMemo(
- () => ({
- id: "down",
- title: "Next component",
- onClick: () => api.jumpToComponent(1),
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextComponent }) : null,
- icon: react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys]
- ), prev = useMemo(
- () => ({
- id: "prev",
- title: "Previous story",
- onClick: () => api.jumpToStory(-1),
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.prevStory }) : null,
- icon: react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys]
- ), next = useMemo(
- () => ({
- id: "next",
- title: "Next story",
- onClick: () => api.jumpToStory(1),
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.nextStory }) : null,
- icon: react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys]
- ), collapse = useMemo(
- () => ({
- id: "collapse",
- title: "Collapse all",
- onClick: () => api.emit(STORIES_COLLAPSE_ALL),
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: shortcutKeys.collapseAll }) : null,
- icon: react_default.createElement(react_default.Fragment, null)
- }),
- [api, enableShortcuts, shortcutKeys]
- ), documentation = useMemo(() => ({
- id: "documentation",
- title: "Documentation",
- closeOnClick: !0,
- href: api.getDocsUrl({ versioned: !0, renderer: !0 }),
- right: react_default.createElement(ActionList.Icon, null, react_default.createElement(ShareAltIcon, null)),
- icon: react_default.createElement(DocumentIcon, null)
- }), [api]), getAddonsShortcuts = useCallback(() => {
- let addonsShortcuts = api.getAddonsShortcuts(), keys = shortcutKeys;
- return Object.entries(addonsShortcuts).filter(([_2, { showInMenu }]) => showInMenu).map(([actionName, { label, action }]) => ({
- id: actionName,
- title: label,
- onClick: () => action(),
- right: enableShortcuts ? react_default.createElement(Shortcut, { keys: keys[actionName] }) : null
- }));
- }, [api, enableShortcuts, shortcutKeys]);
- return useMemo(
- () => [
- [
- about,
- ...scope.CONFIG_TYPE === "DEVELOPMENT" ? [guide] : [],
- ...enableShortcuts ? [shortcuts] : []
- ],
- [sidebarToggle, toolbarToogle, addonsToggle, up, down, prev, next, collapse],
- getAddonsShortcuts(),
- [documentation]
- ],
- [
- about,
- guide,
- documentation,
- shortcuts,
- sidebarToggle,
- toolbarToogle,
- addonsToggle,
- up,
- down,
- prev,
- next,
- collapse,
- getAddonsShortcuts,
- enableShortcuts
- ]
- );
- };
-
- // src/manager/container/Sidebar.tsx
- var Sidebar3 = react_default.memo(function({ onMenuClick }) {
- return react_default.createElement(Consumer, { filter: ({ state, api }) => {
- let {
- ui: { name, url, enableShortcuts },
- viewMode,
- storyId,
- refId,
- layout: { showToolbar },
- // FIXME: This is the actual `index.json` index where the `index` below
- // is actually the stories hash. We should fix this up and make it consistent.
- internal_index,
- filteredIndex: index,
- indexError,
- previewInitialized,
- refs
- } = state, whatsNewNotificationsEnabled = state.whatsNewData?.status === "SUCCESS" && !state.disableWhatsNewNotifications;
- return {
- api,
- title: name,
- url,
- indexJson: internal_index,
- index,
- indexError,
- previewInitialized,
- refs,
- storyId,
- refId,
- viewMode,
- showToolbar,
- isPanelShown: api.getIsPanelShown(),
- isNavShown: api.getIsNavShown(),
- menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
- enableShortcuts
- };
- } }, ({ api, showToolbar, isPanelShown, isNavShown, enableShortcuts, ...state }) => {
- let menu = useMenu({ api, showToolbar, isPanelShown, isNavShown, enableShortcuts }), allStatuses = experimental_useStatusStore();
- return react_default.createElement(
- Sidebar,
- {
- ...state,
- menu,
- onMenuClick,
- allStatuses,
- enableShortcuts
- }
- );
- });
- }), Sidebar_default = Sidebar3;
-
- // src/manager/App.tsx
- var App = ({ managerLayoutState, setManagerLayoutState, pages, hasTab }) => {
- let { setMobileAboutOpen } = useLayout(), { enableShortcuts = !0 } = addons.getConfig();
- return useEffect(() => {
- document.body.setAttribute("data-shortcuts-enabled", enableShortcuts ? "true" : "false");
- }, [enableShortcuts]), useEffect(() => {
- let rootElement = document.getElementById("root");
- if (!rootElement)
- return;
- let observer = new MutationObserver(() => {
- let hasInert = rootElement.hasAttribute("inert");
- addons.getChannel().emit(core_events_default.MANAGER_INERT_ATTRIBUTE_CHANGED, hasInert);
- });
- return observer.observe(rootElement, {
- attributes: !0,
- attributeFilter: ["inert"]
- }), () => observer.disconnect();
- }, []), react_default.createElement(react_default.Fragment, null, react_default.createElement(Global, { styles: createGlobal }), react_default.createElement(ManagerErrorBoundary, null, react_default.createElement(
- Layout,
- {
- hasTab,
- managerLayoutState,
- setManagerLayoutState,
- slotMain: react_default.createElement(Preview_default, { id: "main", withLoader: !0 }),
- slotSidebar: react_default.createElement(Sidebar_default, { onMenuClick: () => setMobileAboutOpen((state) => !state) }),
- slotPanel: react_default.createElement(Panel_default, null),
- slotPages: pages.map(({ id, render: Content6 }) => react_default.createElement(Content6, { key: id }))
- }
- )));
- };
-
- // src/manager/provider.ts
- var Provider2 = class {
- getElements(_type) {
- throw new Error("Provider.getElements() is not implemented!");
- }
- handleAPI(_api) {
- throw new Error("Provider.handleAPI() is not implemented!");
- }
- getConfig() {
- return console.error("Provider.getConfig() is not implemented!"), {};
- }
- };
-
- // src/manager/settings/index.tsx
- init_react();
-
- // src/manager/settings/AboutPage.tsx
- init_react();
-
- // src/manager/settings/About.tsx
- init_react();
- var Container12 = styled.div({
- display: "flex",
- alignItems: "center",
- flexDirection: "column",
- marginTop: 40
- }), Header = styled.header({
- marginBottom: 32,
- alignItems: "center",
- display: "flex",
- "> svg": {
- height: 48,
- width: "auto",
- marginRight: 8
- }
- }), Footer = styled.div(({ theme }) => ({
- marginBottom: 24,
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
- color: theme.base === "light" ? theme.color.dark : theme.color.lightest,
- fontWeight: theme.typography.weight.regular,
- fontSize: theme.typography.size.s2
- })), Actions2 = styled.div({
- display: "flex",
- flexDirection: "row",
- alignItems: "center",
- marginBottom: 24,
- marginTop: 24,
- gap: 16
- }), StyledLink = styled(Link)(({ theme }) => ({
- "&&": {
- fontWeight: theme.typography.weight.bold,
- color: theme.base === "light" ? theme.color.dark : theme.color.light
- },
- "&:hover": {
- color: theme.base === "light" ? theme.color.darkest : theme.color.lightest
- }
- })), AboutScreen = ({ onNavigateToWhatsNew }) => react_default.createElement(Container12, null, react_default.createElement(Header, null, react_default.createElement(StorybookLogo, { alt: "Storybook" })), react_default.createElement(UpgradeBlock, { onNavigateToWhatsNew }), react_default.createElement(Footer, null, react_default.createElement(Actions2, null, react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://github.com/storybookjs/storybook" }, react_default.createElement(GithubIcon, null), "GitHub")), react_default.createElement(Button, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "https://storybook.js.org/docs?ref=ui" }, react_default.createElement(DocumentIcon, { style: { display: "inline", marginRight: 5 } }), "Documentation"))), react_default.createElement("div", null, "Open source software maintained by", " ", react_default.createElement(StyledLink, { href: "https://www.chromatic.com/" }, "Chromatic"), " and the", " ", react_default.createElement(StyledLink, { href: "https://github.com/storybookjs/storybook/graphs/contributors" }, "Storybook Community"))));
-
- // src/manager/settings/AboutPage.tsx
- var NotificationClearer = class extends Component {
- componentDidMount() {
- let { api, notificationId } = this.props;
- api.clearNotification(notificationId);
- }
- render() {
- let { children } = this.props;
- return children;
- }
- }, AboutPage = () => {
- let api = useStorybookApi(), state = useStorybookState(), onNavigateToWhatsNew = useCallback(() => {
- api.changeSettingsTab("whats-new");
- }, [api]);
- return react_default.createElement(NotificationClearer, { api, notificationId: "update" }, react_default.createElement(
- AboutScreen,
- {
- onNavigateToWhatsNew: state.whatsNewData?.status === "SUCCESS" ? onNavigateToWhatsNew : void 0
- }
- ));
- };
-
- // src/manager/settings/GuidePage.tsx
- init_react();
-
- // src/manager/settings/Checklist/Checklist.tsx
- init_react();
-
- // src/manager/components/Focus/Focus.tsx
- init_react();
- var FocusOutline = styled.div(
- ({ theme, active = !1, outlineOffset = 0 }) => ({
- width: "100%",
- borderRadius: "inherit",
- transition: "outline-color var(--transition-duration, 0.2s)",
- outline: `2px solid ${active ? theme.color.secondary : "transparent"}`,
- outlineOffset
- })
- ), FocusProxy = styled(FocusOutline)(({ theme, targetId }) => ({
- [`&:has([data-target-id="${targetId}"]:focus-visible)`]: {
- outlineColor: theme.color.secondary
- }
- })), FocusRing = ({
- active = !1,
- highlightDuration,
- nodeRef,
- ...props
- }) => {
- let [visible, setVisible] = useState(active);
- return useEffect(() => {
- if (highlightDuration) {
- setVisible(active);
- let timeout = setTimeout(setVisible, highlightDuration, !1);
- return () => clearTimeout(timeout);
- }
- }, [active, highlightDuration]), react_default.createElement(FocusOutline, { ...props, active: highlightDuration ? visible : active, ref: nodeRef });
- }, FocusTarget = ({
- targetHash,
- highlightDuration,
- ...props
- }) => {
- let nodeRef = useRef(null), locationHash = useLocationHash(), [active, setActive] = useState(locationHash === targetHash);
- return useEffect(() => {
- let timeouts = [];
- return setActive(!1), locationHash === targetHash && (timeouts.push(
- setTimeout(() => {
- setActive(!0), nodeRef.current?.focus({ preventScroll: !0 }), nodeRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
- }, 0)
- ), highlightDuration && timeouts.push(setTimeout(setActive, highlightDuration, !1))), () => timeouts.forEach(clearTimeout);
- }, [locationHash, targetHash, highlightDuration]), react_default.createElement(FocusRing, { ...props, active, nodeRef, tabIndex: -1 });
- }, Focus = {
- Outline: FocusOutline,
- Proxy: FocusProxy,
- Ring: FocusRing,
- Target: FocusTarget
- };
-
- // src/manager/settings/Checklist/Checklist.tsx
- var Sections = styled.ol(({ theme }) => ({
- listStyle: "none",
- display: "flex",
- flexDirection: "column",
- gap: 20,
- margin: 0,
- padding: 0,
- "& > li": {
- background: theme.background.content,
- border: `1px solid ${theme.base === "dark" ? theme.color.darker : theme.color.border}`,
- borderRadius: 8
- }
- })), Items = styled.ol(({ theme }) => ({
- listStyle: "none",
- display: "flex",
- flexDirection: "column",
- margin: 0,
- padding: 0,
- "& > li:not(:last-child)": {
- boxShadow: `inset 0 -1px 0 ${theme.base === "dark" ? theme.color.darker : theme.color.border}`
- },
- "& > li:last-child": {
- borderBottomLeftRadius: 7,
- borderBottomRightRadius: 7
- }
- })), SectionSummary = styled.div(
- ({ theme, progress, isCollapsed, onClick }) => ({
- position: "relative",
- fontWeight: "bold",
- display: "flex",
- alignItems: "center",
- gap: 10,
- padding: "10px 10px 10px 15px",
- borderBottom: `5px solid ${theme.base === "dark" ? theme.color.darker : theme.color.light}`,
- borderBottomLeftRadius: isCollapsed ? 7 : 0,
- borderBottomRightRadius: isCollapsed ? 7 : 0,
- transition: "border-radius var(--transition-duration, 0.2s)",
- cursor: onClick ? "pointer" : "default",
- "--toggle-button-rotate": isCollapsed ? "0deg" : "180deg",
- "--toggle-button-opacity": 0,
- "&:hover, &:focus-visible": {
- outline: "none",
- "--toggle-button-opacity": 1
- },
- "&::after": {
- pointerEvents: "none",
- position: "absolute",
- top: 0,
- bottom: -5,
- left: 0,
- right: 0,
- content: '""',
- display: "block",
- width: `${progress}%`,
- borderBottom: `5px solid ${theme.color.positive}`,
- borderBottomLeftRadius: "inherit",
- borderBottomRightRadius: progress === 100 ? "inherit" : 0,
- transition: "width var(--transition-duration, 0.2s)"
- }
- })
- ), SectionHeading = styled.h2(({ theme }) => ({
- flex: 1,
- margin: 0,
- fontSize: theme.typography.size.s3,
- fontWeight: theme.typography.weight.bold
- })), ItemSummary = styled.div(
- ({ theme, isCollapsed, onClick }) => ({
- fontWeight: theme.typography.weight.regular,
- fontSize: theme.typography.size.s2,
- display: "flex",
- alignItems: "center",
- minHeight: 40,
- gap: 10,
- padding: isCollapsed ? "6px 10px 6px 15px" : "10px 10px 10px 15px",
- transition: "padding var(--transition-duration, 0.2s)",
- cursor: onClick ? "pointer" : "default",
- "--toggle-button-rotate": isCollapsed ? "0deg" : "180deg",
- "&:focus-visible": {
- outline: "none"
- }
- })
- ), ItemHeading = styled.h3(({ theme, skipped }) => ({
- flex: 1,
- margin: 0,
- color: skipped ? theme.textMutedColor : theme.color.defaultText,
- overflow: "hidden",
- textOverflow: "ellipsis",
- whiteSpace: "nowrap",
- fontSize: theme.typography.size.s2,
- fontWeight: theme.typography.weight.bold
- })), ItemContent2 = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- alignItems: "flex-start",
- gap: 8,
- padding: "0 15px 15px 41px",
- fontSize: theme.typography.size.s2,
- code: {
- fontSize: "0.9em",
- backgroundColor: theme.background.app,
- borderRadius: theme.appBorderRadius,
- padding: "1px 3px"
- },
- img: {
- maxWidth: "100%",
- margin: "15px auto"
- },
- p: {
- margin: 0,
- lineHeight: 1.4
- },
- "ol, ul": {
- paddingLeft: 25,
- listStyleType: "disc",
- "li::marker": {
- color: theme.color.mediumdark
- }
- }
- })), StatusIcon3 = styled.div(({ theme }) => ({
- position: "relative",
- flex: "0 0 auto",
- minHeight: 16,
- minWidth: 16,
- margin: 0,
- background: theme.base === "dark" ? theme.color.darkest : theme.background.app,
- borderRadius: 9,
- outline: `1px solid ${theme.base === "dark" ? theme.color.darker : theme.color.border}`,
- outlineOffset: -1
- })), Checked2 = styled(StatusPassIcon)(
- ({ theme, "data-visible": visible }) => ({
- position: "absolute",
- width: "inherit",
- height: "inherit",
- top: 0,
- left: 0,
- bottom: 0,
- right: 0,
- padding: 1,
- borderRadius: "50%",
- background: theme.color.positive,
- color: theme.background.content,
- opacity: visible ? 1 : 0,
- transform: visible ? "scale(1)" : "scale(0.7)",
- transition: "all var(--transition-duration, 0.2s)"
- })
- ), Skipped = styled.span(({ theme, visible }) => ({
- display: "flex",
- alignItems: "center",
- color: theme.textMutedColor,
- fontSize: "12px",
- fontWeight: "bold",
- overflow: "hidden",
- padding: visible ? "0 10px" : 0,
- opacity: visible ? 1 : 0,
- width: visible ? "auto" : 0,
- height: visible ? 18 : 16,
- transition: "all var(--transition-duration, 0.2s)"
- })), Actions3 = styled.div({
- alignSelf: "flex-end",
- flexDirection: "row-reverse",
- display: "flex",
- gap: 4
- }), ToggleButton2 = styled(Button)({
- opacity: "var(--toggle-button-opacity)",
- transition: "opacity var(--transition-duration, 0.2s)",
- "&:hover, &:focus": {
- opacity: 1
- },
- svg: {
- transform: "rotate(var(--toggle-button-rotate))",
- transition: "transform var(--transition-duration, 0.2s)"
- }
- }), ChecklistCopyButton = ({
- label,
- copyContent,
- onClick
- }) => {
- let { children: copyChildren, buttonProps: copyButtonProps } = useCopyButton({
- children: label,
- onCopy: onClick,
- content: copyContent
- });
- return react_default.createElement(Button, { variant: "solid", size: "small", ...copyButtonProps }, copyChildren);
- }, Checklist = ({
- availableItems,
- accept,
- skip,
- reset,
- forceCollapsed = !1
- }) => {
- let api = useStorybookApi(), locationHash = useLocationHash(), { itemsById, sectionsById } = useMemo(
- () => availableItems.reduce(
- (acc, item) => {
- acc.itemsById[item.id] = item;
- let { sectionId: id, sectionTitle: title2 } = item;
- return acc.sectionsById[id] = acc.sectionsById[id] ?? { id, title: title2, itemIds: [] }, acc.sectionsById[id].itemIds.push(item.id), acc;
- },
- { itemsById: {}, sectionsById: {} }
- ),
- [availableItems]
- ), sections = useMemo(
- () => Object.values(sectionsById).map(({ id, title: title2, itemIds }) => {
- let items = itemIds.map((id2) => itemsById[id2]).filter(({ showOnGuidePage }) => showOnGuidePage !== !1), progress = items.reduce((acc, item) => item.isOpen ? acc : acc + 1, 0) / items.length * 100;
- return { id, title: title2, items, progress };
- }),
- [itemsById, sectionsById]
- );
- return react_default.createElement(Sections, null, sections.map(({ id, title: title2, items, progress }) => {
- let collapsed = forceCollapsed || progress === 100 && items.every((item) => item.id !== locationHash);
- return react_default.createElement("li", { key: id }, react_default.createElement(Focus.Proxy, { targetId: `toggle-${id}` }, react_default.createElement(
- Collapsible,
- {
- collapsed,
- summary: ({ isCollapsed, toggleCollapsed, toggleProps }) => react_default.createElement(
- SectionSummary,
- {
- progress,
- isCollapsed,
- onClick: toggleCollapsed
- },
- react_default.createElement(StatusIcon3, null, react_default.createElement(Checked2, { "data-visible": progress === 100 })),
- react_default.createElement(SectionHeading, null, title2),
- react_default.createElement(Actions3, null, react_default.createElement(
- ToggleButton2,
- {
- ...toggleProps,
- "data-target-id": `toggle-${id}`,
- variant: "ghost",
- padding: "small",
- "aria-label": title2
- },
- react_default.createElement(ChevronSmallDownIcon, null)
- ))
- )
- },
- react_default.createElement(Items, null, items.map(
- ({
- content,
- isOpen,
- isAccepted,
- isDone,
- isLockedBy,
- isImmutable,
- isSkipped,
- ...item
- }) => {
- let isChecked = isAccepted || isDone, isCollapsed = item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
- return react_default.createElement(ActionList.Item, { key: item.id }, react_default.createElement(
- Focus.Target,
- {
- targetHash: item.id,
- highlightDuration: 2e3,
- outlineOffset: -2
- },
- react_default.createElement(Focus.Proxy, { targetId: `toggle-${item.id}`, outlineOffset: -2 }, react_default.createElement(
- Collapsible,
- {
- collapsed: isCollapsed,
- summary: ({ isCollapsed: isCollapsed2, toggleCollapsed, toggleProps }) => react_default.createElement(
- ItemSummary,
- {
- isCollapsed: isCollapsed2 || !itemContent,
- onClick: itemContent ? toggleCollapsed : void 0
- },
- react_default.createElement(StatusIcon3, null, react_default.createElement(Checked2, { "data-visible": isChecked }), react_default.createElement(Skipped, { visible: isSkipped }, "Skipped")),
- react_default.createElement(ItemHeading, { skipped: isSkipped }, item.label),
- react_default.createElement(Actions3, null, itemContent && react_default.createElement(
- ToggleButton2,
- {
- ...toggleProps,
- "data-target-id": `toggle-${item.id}`,
- variant: "ghost",
- padding: "small",
- ariaLabel: `${isCollapsed2 ? "Expand" : "Collapse"} ${item.label}`
- },
- react_default.createElement(ChevronSmallDownIcon, null)
- ), isLocked && react_default.createElement(
- Button,
- {
- variant: "ghost",
- padding: "small",
- ariaLabel: "Locked",
- tooltip: `Complete \u201C${itemsById[isLockedBy].label}\u201D first`,
- disabled: !0,
- readOnly: !0
- },
- react_default.createElement(LockIcon, null)
- ), isOpen && !isLocked && item.action && (item.action.copyContent ? react_default.createElement(
- ChecklistCopyButton,
- {
- label: item.action.label,
- copyContent: item.action.copyContent,
- onClick: () => item.action.onClick({
- api,
- accept: () => accept(item.id)
- })
- }
- ) : react_default.createElement(
- Button,
- {
- ariaLabel: !1,
- variant: "solid",
- size: "small",
- onClick: (e2) => {
- e2.stopPropagation(), item.action?.onClick({
- api,
- accept: () => accept(item.id)
- });
- }
- },
- item.action.label
- )), isOpen && !isLocked && !item.action && !item.subscribe && react_default.createElement(
- Button,
- {
- ariaLabel: !1,
- variant: "outline",
- size: "small",
- onClick: (e2) => {
- e2.stopPropagation(), accept(item.id);
- }
- },
- react_default.createElement(CheckIcon, null),
- "Mark as complete"
- ), isOpen && !isLocked && react_default.createElement(
- Button,
- {
- ariaLabel: !1,
- variant: "ghost",
- size: "small",
- onClick: (e2) => {
- e2.stopPropagation(), skip(item.id);
- }
- },
- "Skip"
- ), (isAccepted && !isImmutable || isSkipped) && !isLocked && react_default.createElement(
- Button,
- {
- ariaLabel: "Undo",
- variant: "ghost",
- padding: "small",
- onClick: (e2) => {
- e2.stopPropagation(), reset(item.id);
- }
- },
- react_default.createElement(UndoIcon, null)
- ))
- )
- },
- itemContent && react_default.createElement(ItemContent2, null, itemContent)
- ))
- ));
- }
- ))
- )));
- }));
- };
-
- // src/manager/settings/Checklist/AiSetupBlock.tsx
- init_react();
- var AiCtaCard = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- padding: "10px 10px 10px 15px",
- border: `1px solid ${theme.base === "dark" ? theme.color.darker : theme.color.border}`,
- borderRadius: 8,
- background: theme.background.content
- })), AiCtaHeadingRow = styled.div({
- display: "flex",
- alignItems: "center",
- gap: 10
- }), AiCtaHeading = styled.h2(({ theme, $skipped }) => ({
- flex: 1,
- margin: 0,
- color: $skipped ? theme.textMutedColor : theme.color.defaultText,
- fontSize: theme.typography.size.s2,
- fontWeight: theme.typography.weight.bold,
- textWrap: "pretty"
- })), AiCtaDescription = styled.p(({ theme }) => ({
- margin: 0,
- color: theme.color.defaultText,
- fontSize: theme.typography.size.s2,
- fontWeight: theme.typography.weight.regular,
- marginTop: 8
- })), AiCtaActions = styled.div({
- display: "flex",
- gap: 8,
- justifyContent: "flex-end",
- marginTop: 12
- }), CopyButton2 = ({ api }) => {
- let { children: buttonChildren, buttonProps } = useCopyButton({
- children: "Copy prompt",
- childrenOnCopy: react_default.createElement(react_default.Fragment, null, react_default.createElement(CheckIcon, null), " Copied!"),
- content: getAiSetupPrompt(),
- onCopy: () => {
- api.emit(AI_PROMPT_NUDGE, { id: "setup", origin: "onboarding-guide-page" });
- }
- });
- return react_default.createElement(Button, { variant: "solid", size: "medium", ...buttonProps }, buttonChildren);
- }, AiSetupBlock = ({
- item,
- reset,
- skip
- }) => {
- let api = useStorybookApi();
- return !item.isDone && !item.isAccepted && !item.isCompleted ? react_default.createElement(AiCtaCard, null, react_default.createElement(AiCtaHeadingRow, null, item.isSkipped && react_default.createElement(StatusIcon3, null, react_default.createElement(Skipped, { visible: !0 }, "Skipped")), react_default.createElement(AiCtaHeading, { $skipped: item.isSkipped }, "Set up Storybook with AI"), item.isSkipped && react_default.createElement(Button, { ariaLabel: "Undo", variant: "ghost", padding: "small", onClick: () => reset(item.id) }, react_default.createElement(UndoIcon, null))), react_default.createElement(Collapsible.Content, { collapsed: item.isSkipped }, react_default.createElement(AiCtaDescription, null, "Run a prompt in your AI agent to analyze your codebase, configure decorators and mocks, write sample stories for your UI components, and verify everything works."), react_default.createElement(AiCtaActions, null, react_default.createElement(Button, { variant: "ghost", size: "medium", ariaLabel: !1, onClick: () => skip(item.id) }, "Skip"), react_default.createElement(CopyButton2, { api })))) : null;
- };
-
- // src/manager/settings/GuidePage.tsx
- var Container13 = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- maxWidth: 600,
- margin: "0 auto",
- padding: "48px 20px",
- gap: 32,
- fontSize: theme.typography.size.s2,
- "--transition-duration": "0.2s"
- })), Intro = styled.div(({ theme }) => ({
- display: "flex",
- flexDirection: "column",
- gap: 8,
- "& h1": {
- fontSize: theme.typography.size.m3,
- fontWeight: theme.typography.weight.bold,
- margin: 0
- },
- "& > p": {
- margin: 0
- }
- })), GuidePage = () => {
- let checklist = useChecklist(), aiSetupItem = checklist.availableItems.find((item) => item.id === "aiSetup");
- return react_default.createElement(Container13, null, react_default.createElement(Intro, null, react_default.createElement("h1", null, "Guide"), react_default.createElement("p", null, "Whether you're just getting started or looking for ways to level up, this checklist will help you make the most of your Storybook.")), aiSetupItem && react_default.createElement(AiSetupBlock, { item: aiSetupItem, reset: checklist.reset, skip: checklist.skip }), react_default.createElement(Checklist, { ...checklist, forceCollapsed: aiSetupItem?.isOpen }), scope.FEATURES?.sidebarOnboardingChecklist !== !1 && react_default.createElement(react_default.Fragment, null, checklist.openItems.length === 0 ? react_default.createElement("center", null, "Your work here is done!") : checklist.widget.disable || checklist.openItems.every((item) => item.isMuted) ? react_default.createElement("center", null, "Want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.disable(!1) }, "Show in sidebar")) : react_default.createElement("center", null, "Don't want to see this in the sidebar?", " ", react_default.createElement(Link, { onClick: () => checklist.mute(checklist.allItems.map(({ id }) => id)) }, "Remove from sidebar"))));
- };
-
- // src/manager/settings/ShortcutsPage.tsx
- init_react();
-
- // src/manager/settings/shortcuts.tsx
- init_react();
-
- // src/manager/settings/SettingsFooter.tsx
- init_react();
- var Footer2 = styled.div(({ theme }) => ({
- display: "flex",
- paddingTop: 20,
- marginTop: 20,
- borderTop: `1px solid ${theme.appBorderColor}`,
- fontWeight: theme.typography.weight.bold,
- "& > * + *": {
- marginLeft: 20
- }
- })), SettingsFooter = (props) => react_default.createElement(Footer2, { ...props }, react_default.createElement(Link, { secondary: !0, href: "https://storybook.js.org?ref=ui", cancel: !1, target: "_blank" }, "Docs"), react_default.createElement(Link, { secondary: !0, href: "https://github.com/storybookjs/storybook", cancel: !1, target: "_blank" }, "GitHub"), react_default.createElement(
- Link,
- {
- secondary: !0,
- href: "https://storybook.js.org/community?ref=ui#support",
- cancel: !1,
- target: "_blank"
- },
- "Support"
- )), SettingsFooter_default = SettingsFooter;
-
- // src/manager/settings/shortcuts.tsx
- var Header2 = styled.header(({ theme }) => ({
- marginBottom: 20,
- fontSize: theme.typography.size.m3,
- fontWeight: theme.typography.weight.bold,
- alignItems: "center",
- display: "flex"
- })), HeaderItem = styled.div(({ theme }) => ({
- fontWeight: theme.typography.weight.bold
- })), GridHeaderRow = styled.div({
- alignSelf: "flex-end",
- display: "grid",
- margin: "10px 0",
- gridTemplateColumns: "1fr 1fr 12px",
- "& > *:last-of-type": {
- gridColumn: "2 / 2",
- justifySelf: "flex-end",
- gridRow: "1"
- }
- }), Row = styled.div(({ theme }) => ({
- padding: "6px 0",
- borderTop: `1px solid ${theme.appBorderColor}`,
- display: "grid",
- gridTemplateColumns: "1fr 1fr 0px"
- })), GridWrapper = styled.div({
- display: "grid",
- gridTemplateColumns: "1fr",
- gridAutoRows: "minmax(auto, auto)",
- marginBottom: 20
- }), Description = styled.div({
- alignSelf: "center"
- }), TextInput = styled(Form.Input)(
- ({ valid, theme }) => valid === "error" ? {
- animation: `${theme.animation.jiggle} 700ms ease-out`
- } : {},
- {
- display: "flex",
- width: 80,
- flexDirection: "column",
- justifySelf: "flex-end",
- paddingLeft: 4,
- paddingRight: 4,
- textAlign: "center"
- }
- ), Fade = keyframes`
- 0%,100% { opacity: 0; }
- 50% { opacity: 1; }
- `, SuccessIcon = styled(CheckIcon)(
- ({ valid, theme }) => valid === "valid" ? {
- color: theme.color.positive,
- animation: `${Fade} 2s ease forwards`
- } : {
- opacity: 0
- },
- {
- alignSelf: "center",
- display: "flex",
- marginLeft: 10,
- height: 14,
- width: 14
- }
- ), Container14 = styled.div(({ theme }) => ({
- fontSize: theme.typography.size.s2,
- padding: "3rem 20px",
- maxWidth: 600,
- margin: "0 auto"
- })), shortcutLabels = {
- fullScreen: "Go full screen",
- togglePanel: "Toggle addons",
- panelPosition: "Toggle addons orientation",
- toggleNav: "Toggle sidebar",
- toolbar: "Toggle toolbar",
- search: "Focus search",
- focusNav: "Focus sidebar",
- focusIframe: "Focus canvas",
- focusPanel: "Focus addons",
- prevComponent: "Previous component",
- nextComponent: "Next component",
- prevStory: "Previous story",
- nextStory: "Next story",
- shortcutsPage: "Go to shortcuts page",
- aboutPage: "Go to about page",
- collapseAll: "Collapse all items on sidebar",
- expandAll: "Expand all items on sidebar",
- remount: "Reload story",
- openInEditor: "Open story in editor",
- openInIsolation: "Open story in isolation",
- copyStoryLink: "Copy story link to clipboard",
- goToPreviousLandmark: "Go to previous landmark",
- goToNextLandmark: "Go to next landmark"
- // TODO: bring this back once we want to add shortcuts for this
- // copyStoryName: 'Copy story name to clipboard',
- }, fixedShortcuts = ["escape"], hardcodedShortcuts = ["goToPreviousLandmark", "goToNextLandmark"];
- function toShortcutState(shortcutKeys) {
- let state = {};
- for (let key of Object.keys(shortcutKeys).filter((k2) => !fixedShortcuts.includes(k2)))
- state[key] = {
- shortcut: shortcutKeys[key],
- error: !1,
- hardcoded: hardcodedShortcuts.includes(key)
- };
- return state;
- }
- var ShortcutsScreen = class extends Component {
- constructor(props) {
- super(props);
- this.onKeyDown = (e2) => {
- let { activeFeature, shortcutKeys } = this.state;
- if (e2.key === "Backspace")
- return this.restoreDefault();
- let shortcut = eventToShortcut(e2);
- if (!shortcut)
- return !1;
- let normalizedShortcut = shortcut.map(
- (key) => Array.isArray(key) ? key.at(-1) : key
- ), error = !!Object.entries(shortcutKeys).find(
- ([feature, { shortcut: existingShortcut }]) => feature !== activeFeature && existingShortcut && shortcutMatchesShortcut(normalizedShortcut, existingShortcut)
- );
- return this.setState({
- shortcutKeys: { ...shortcutKeys, [activeFeature]: { shortcut: normalizedShortcut, error } }
- });
- };
- this.onFocus = (focusedInput) => () => {
- let { shortcutKeys } = this.state;
- this.setState({
- activeFeature: focusedInput,
- shortcutKeys: {
- ...shortcutKeys,
- [focusedInput]: { shortcut: null, error: !1 }
- }
- });
- };
- this.onBlur = async () => {
- let { shortcutKeys, activeFeature } = this.state;
- if (shortcutKeys[activeFeature]) {
- let { shortcut, error } = shortcutKeys[activeFeature];
- return !shortcut || error ? this.restoreDefault() : this.saveShortcut();
- }
- return !1;
- };
- this.saveShortcut = async () => {
- let { activeFeature, shortcutKeys } = this.state, { setShortcut } = this.props;
- await setShortcut(activeFeature, shortcutKeys[activeFeature].shortcut), this.setState({ successField: activeFeature });
- };
- this.restoreDefaults = async () => {
- let { restoreAllDefaultShortcuts } = this.props, defaultShortcuts = await restoreAllDefaultShortcuts();
- return this.setState({ shortcutKeys: toShortcutState(defaultShortcuts) });
- };
- this.restoreDefault = async () => {
- let { activeFeature, shortcutKeys } = this.state, { restoreDefaultShortcut } = this.props, defaultShortcut = await restoreDefaultShortcut(activeFeature);
- return this.setState({
- shortcutKeys: {
- ...shortcutKeys,
- ...toShortcutState({ [activeFeature]: defaultShortcut })
- }
- });
- };
- this.displaySuccessMessage = (activeElement) => {
- let { successField, shortcutKeys } = this.state;
- return activeElement === successField && shortcutKeys[activeElement].error === !1 ? "valid" : void 0;
- };
- this.displayError = (activeElement) => {
- let { activeFeature, shortcutKeys } = this.state;
- return activeElement === activeFeature && shortcutKeys[activeElement].error === !0 ? "error" : void 0;
- };
- this.renderKeyInput = () => {
- let { shortcutKeys, addonsShortcutLabels } = this.state;
- return Object.entries(shortcutKeys).filter(
- ([feature]) => shortcutLabels[feature] !== void 0 || addonsShortcutLabels && addonsShortcutLabels[feature]
- ).map(
- ([feature, { shortcut, hardcoded }]) => react_default.createElement(Row, { key: feature }, react_default.createElement(Description, null, shortcutLabels[feature] || addonsShortcutLabels[feature]), hardcoded ? react_default.createElement(react_default.Fragment, null, react_default.createElement(
- TooltipProvider,
- {
- tooltip: react_default.createElement(Tooltip, { hasChrome: !0 }, "This shortcut cannot be changed."),
- placement: "right"
- },
- react_default.createElement(
- TextInput,
- {
- "aria-disabled": !0,
- readOnly: !0,
- valid: void 0,
- value: shortcut ? shortcutToHumanString(shortcut) : ""
- }
- )
- )) : react_default.createElement(
- TextInput,
- {
- spellCheck: "false",
- valid: this.displayError(feature),
- className: "modalInput",
- onBlur: this.onBlur,
- onFocus: this.onFocus(feature),
- onKeyDown: this.onKeyDown,
- value: shortcut ? shortcutToHumanString(shortcut) : "",
- placeholder: "Type keys",
- readOnly: !0
- }
- ), react_default.createElement(SuccessIcon, { valid: this.displaySuccessMessage(feature) }))
- );
- };
- this.renderKeyForm = () => react_default.createElement(GridWrapper, null, react_default.createElement(GridHeaderRow, null, react_default.createElement(HeaderItem, null, "Commands"), react_default.createElement(HeaderItem, null, "Shortcut")), this.renderKeyInput());
- this.state = {
- // @ts-expect-error (non strict)
- activeFeature: void 0,
- // @ts-expect-error (non strict)
- successField: void 0,
- // The initial shortcutKeys that come from props are the defaults/what was saved
- // As the user interacts with the page, the state stores the temporary, unsaved shortcuts
- // This object also includes the error attached to each shortcut
- shortcutKeys: toShortcutState(props.shortcutKeys),
- addonsShortcutLabels: props.addonsShortcutLabels
- };
- }
- render() {
- let layout = this.renderKeyForm();
- return react_default.createElement(Container14, null, react_default.createElement(Header2, null, "Keyboard shortcuts"), layout, react_default.createElement(
- Button,
- {
- ariaLabel: !1,
- variant: "outline",
- size: "small",
- id: "restoreDefaultsHotkeys",
- onClick: this.restoreDefaults
- },
- "Restore defaults"
- ), react_default.createElement(SettingsFooter_default, null));
- }
- };
-
- // src/manager/settings/ShortcutsPage.tsx
- var ShortcutsPage = () => react_default.createElement(Consumer, null, ({
- api: {
- getShortcutKeys,
- getAddonsShortcutLabels,
- setShortcut,
- restoreDefaultShortcut,
- restoreAllDefaultShortcuts
- }
- }) => react_default.createElement(
- ShortcutsScreen,
- {
- shortcutKeys: getShortcutKeys(),
- addonsShortcutLabels: getAddonsShortcutLabels(),
- setShortcut,
- restoreDefaultShortcut,
- restoreAllDefaultShortcuts
- }
- ));
-
- // src/manager/settings/whats_new_page.tsx
- init_react();
-
- // src/manager/settings/whats_new.tsx
- init_react();
- var Centered = styled.div({
- top: "50%",
- position: "absolute",
- transform: "translateY(-50%)",
- width: "100%",
- textAlign: "center"
- }), LoaderWrapper2 = styled.div({
- position: "relative",
- height: "32px"
- }), Message2 = styled.div(({ theme }) => ({
- paddingTop: "12px",
- color: theme.textMutedColor,
- maxWidth: "295px",
- margin: "0 auto",
- fontSize: `${theme.typography.size.s1}px`,
- lineHeight: "16px"
- })), Container15 = styled.div(({ theme }) => ({
- position: "absolute",
- width: "100%",
- height: 40,
- bottom: 0,
- background: theme.background.bar,
- fontSize: theme.typography.size.s2,
- borderTop: `1px solid ${theme.color.border}`,
- padding: "0 10px 0 15px",
- display: "flex",
- alignItems: "center",
- justifyContent: "space-between"
- })), WhatsNewFooter = ({
- isNotificationsEnabled,
- onToggleNotifications,
- copyContent
- }) => {
- let theme = useTheme(), { children: copyText, buttonProps: copyButtonProps } = useCopyButton({
- children: "Copy Link",
- content: copyContent
- });
- return react_default.createElement(Container15, null, react_default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, react_default.createElement(HeartIcon, { color: theme.color.mediumdark }), react_default.createElement("div", null, "Share this with your team."), react_default.createElement(Button, { size: "small", variant: "ghost", ...copyButtonProps }, copyText)), isNotificationsEnabled ? react_default.createElement(Button, { ariaLabel: !1, size: "small", variant: "ghost", onClick: onToggleNotifications }, react_default.createElement(EyeCloseIcon, null), "Hide notifications") : react_default.createElement(Button, { ariaLabel: !1, size: "small", variant: "ghost", onClick: onToggleNotifications }, react_default.createElement(EyeIcon, null), "Show notifications"));
- }, Iframe = styled.iframe(
- {
- position: "absolute",
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- border: 0,
- margin: 0,
- padding: 0,
- width: "100%",
- height: "calc(100% - 40px)",
- background: "white"
- },
- ({ isLoaded }) => ({ visibility: isLoaded ? "visible" : "hidden" })
- ), AlertIcon2 = styled(((props) => react_default.createElement(AlertIcon, { ...props })))(({ theme }) => ({
- color: theme.textMutedColor,
- width: 32,
- height: 32,
- margin: "0 auto"
- })), WhatsNewLoader = () => react_default.createElement(Centered, null, react_default.createElement(LoaderWrapper2, null, react_default.createElement(Loader, null)), react_default.createElement(Message2, null, "Loading...")), MaxWaitTimeMessaging = () => react_default.createElement(Centered, null, react_default.createElement(AlertIcon2, null), react_default.createElement(Message2, null, "The page couldn't be loaded. Check your internet connection and try again.")), PureWhatsNewScreen = ({
- didHitMaxWaitTime,
- isLoaded,
- onLoad,
- url,
- copyContent,
- onToggleNotifications,
- isNotificationsEnabled
- }) => react_default.createElement(Fragment, null, !isLoaded && !didHitMaxWaitTime && react_default.createElement(WhatsNewLoader, null), didHitMaxWaitTime ? react_default.createElement(MaxWaitTimeMessaging, null) : react_default.createElement(react_default.Fragment, null, react_default.createElement(Iframe, { isLoaded, onLoad, src: url, title: "What's new?" }), react_default.createElement(
- WhatsNewFooter,
- {
- isNotificationsEnabled,
- onToggleNotifications,
- copyContent
- }
- ))), MAX_WAIT_TIME = 1e4, WhatsNewScreen = () => {
- let api = useStorybookApi(), state = useStorybookState(), { whatsNewData } = state, [isLoaded, setLoaded] = useState(!1), [didHitMaxWaitTime, setDidHitMaxWaitTime] = useState(!1);
- if (useEffect(() => {
- let timer = setTimeout(() => !isLoaded && setDidHitMaxWaitTime(!0), MAX_WAIT_TIME);
- return () => clearTimeout(timer);
- }, [isLoaded]), whatsNewData?.status !== "SUCCESS")
- return null;
- let isNotificationsEnabled = !whatsNewData.disableWhatsNewNotifications;
- return react_default.createElement(
- PureWhatsNewScreen,
- {
- didHitMaxWaitTime,
- isLoaded,
- onLoad: () => {
- api.whatsNewHasBeenRead(), setLoaded(!0);
- },
- url: whatsNewData.url,
- isNotificationsEnabled,
- copyContent: whatsNewData.blogUrl ?? whatsNewData.url,
- onToggleNotifications: () => {
- isNotificationsEnabled ? scope.confirm("All update notifications will no longer be shown. Are you sure?") && api.toggleWhatsNewNotifications() : api.toggleWhatsNewNotifications();
- }
- }
- );
- };
-
- // src/manager/settings/whats_new_page.tsx
- var WhatsNewPage = () => react_default.createElement(WhatsNewScreen, null);
-
- // src/manager/settings/index.tsx
- var { document: document9 } = scope, Content5 = styled(ScrollArea)(({ theme }) => ({
- background: theme.background.content
- })), SidebarToggle = styled.div({
- // Extra specificity is necessary here
- "&&:has(*)": {
- order: 0,
- display: "flex",
- alignItems: "center",
- marginLeft: 10,
- marginRight: 6,
- gap: 6
- }
- }), RouteWrapper = ({ children, path }) => react_default.createElement(Content5, { vertical: !0, horizontal: !1 }, react_default.createElement(Route, { path }, children)), Pages = ({ changeTab, onClose, enableShortcuts = !0, enableWhatsNew }) => {
- react_default.useEffect(() => {
- let handleEscape = (event) => {
- !enableShortcuts || event.repeat || matchesModifiers(!1, event) && matchesKeyCode("Escape", event) && (event.preventDefault(), onClose());
- };
- return document9.addEventListener("keydown", handleEscape), () => document9.removeEventListener("keydown", handleEscape);
- }, [enableShortcuts, onClose]);
- let api = useStorybookApi(), toolsExtra = Object.values(api.getElements(Addon_TypesEnum.TOOLEXTRA)), tabs = useMemo(() => {
- let tabsToInclude = [
- {
- id: "about",
- title: "About",
- children: react_default.createElement(RouteWrapper, { path: "about" }, react_default.createElement(AboutPage, { key: "about" }))
- }
- ];
- return scope.CONFIG_TYPE === "DEVELOPMENT" && tabsToInclude.push({
- id: "guide",
- title: "Guide",
- children: react_default.createElement(RouteWrapper, { path: "guide" }, react_default.createElement(GuidePage, { key: "guide" }))
- }), tabsToInclude.push({
- id: "shortcuts",
- title: "Keyboard shortcuts",
- children: react_default.createElement(RouteWrapper, { path: "shortcuts" }, react_default.createElement(ShortcutsPage, { key: "shortcuts" }))
- }), enableWhatsNew && tabsToInclude.push({
- id: "whats-new",
- title: "What's new?",
- children: react_default.createElement(RouteWrapper, { path: "whats-new" }, react_default.createElement(WhatsNewPage, { key: "whats-new" }))
- }), tabsToInclude;
- }, [enableWhatsNew]);
- return react_default.createElement(Location, null, ({ path }) => {
- let selected = tabs.find((tab) => path.includes(`settings/${tab.id}`))?.id;
- return react_default.createElement(
- TabsView,
- {
- tabs,
- tools: react_default.createElement(react_default.Fragment, null, react_default.createElement(SidebarToggle, null, menuTool.render({})), toolsExtra.map((item) => react_default.createElement(react_default.Fragment, { key: item.id }, item.render({}))), react_default.createElement(
- Button,
- {
- padding: "small",
- variant: "ghost",
- onClick: (e2) => (e2.preventDefault(), onClose()),
- ariaLabel: "Close settings page"
- },
- react_default.createElement(CloseIcon, null)
- )),
- selected,
- onSelectionChange: changeTab
- }
- );
- });
- }, SettingsPages = () => {
- let api = useStorybookApi(), state = useStorybookState(), changeTab = (tab) => api.changeSettingsTab(tab);
- return react_default.createElement(
- Pages,
- {
- enableWhatsNew: state.whatsNewData?.status === "SUCCESS",
- enableShortcuts: state.ui.enableShortcuts,
- changeTab,
- onClose: api.closeSettings
- }
- );
- }, settingsPageAddon = {
- id: "settings",
- url: "/settings/",
- title: "Settings",
- type: types.experimental_PAGE,
- render: () => react_default.createElement(Route, { path: "/settings/", startsWith: !0 }, react_default.createElement(SettingsPages, null))
- };
-
- // src/manager/index.tsx
- ThemeProvider.displayName = "ThemeProvider";
- q.displayName = "HelmetProvider";
- var Root3 = ({ provider }) => react_default.createElement(q, { key: "helmet.Provider" }, react_default.createElement(LocationProvider, { key: "location.provider" }, react_default.createElement(Main, { provider }))), Main = ({ provider }) => {
- let navigate = useNavigate();
- return react_default.createElement(Location, { key: "location.consumer" }, (locationData) => react_default.createElement(
- Provider,
- {
- key: "manager",
- provider,
- ...locationData,
- navigate,
- docsOptions: scope?.DOCS_OPTIONS || {}
- },
- (combo) => {
- let { state, api } = combo, setManagerLayoutState = useCallback(
- (sizes) => {
- api.setSizes(sizes);
- },
- [api]
- ), pages = useMemo(
- () => [settingsPageAddon, ...Object.values(api.getElements(types.experimental_PAGE))],
- [Object.keys(api.getElements(types.experimental_PAGE)).join()]
- );
- return react_default.createElement(ThemeProvider, { key: "theme.provider", theme: ensure(state.theme) }, react_default.createElement(LayoutProvider, null, react_default.createElement(
- App,
- {
- key: "app",
- pages,
- managerLayoutState: {
- ...state.layout,
- viewMode: state.viewMode
- },
- hasTab: !!api.getQueryParam("tab"),
- setManagerLayoutState
- }
- )));
- }
- ));
- };
- function renderStorybookUI(domNode, provider) {
- if (!(provider instanceof Provider2))
- throw new ProviderDoesNotExtendBaseProviderError();
- createRoot(domNode).render(react_default.createElement(Root3, { key: "root", provider }));
- }
-
- // src/manager/runtime.tsx
- var WS_DISCONNECTED_NOTIFICATION_ID = "CORE/WS_DISCONNECTED";
- addons.register(
- TOOLBAR_ID,
- () => addons.add(TOOLBAR_ID, {
- title: TOOLBAR_ID,
- type: types.TOOL,
- match: ({ tabId }) => !tabId,
- render: () => react_default.createElement(ToolbarManager, null)
- })
- );
- var ReactProvider = class extends Provider2 {
- constructor() {
- super();
- this.wsDisconnected = !1;
- let channel = createBrowserChannel({ page: "manager" });
- addons.setChannel(channel), channel.emit(CHANNEL_CREATED), this.addons = addons, this.channel = channel, scope.__STORYBOOK_ADDONS_CHANNEL__ = channel;
- }
- getElements(type) {
- return this.addons.getElements(type);
- }
- getConfig() {
- return this.addons.getConfig();
- }
- handleAPI(api) {
- this.addons.loadAddons(api), this.channel.on(CHANNEL_WS_DISCONNECT, (ev) => {
- this.wsDisconnected = !0, api.addNotification({
- id: WS_DISCONNECTED_NOTIFICATION_ID,
- content: {
- headline: ev.code === 3008 ? "Server timed out" : "Connection lost",
- subHeadline: "Please restart your Storybook server and reload the page"
- },
- icon: react_default.createElement(FailedIcon, { color: color.negative }),
- link: void 0
- });
- });
- }
- }, { document: document10 } = scope, rootEl = document10.getElementById("root");
- setTimeout(() => {
- renderStorybookUI(rootEl, new ReactProvider());
- }, 0);
|