storybook 10.2.0-alpha.16 → 10.2.0-alpha.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_node-chunks/{builder-manager-DQ6DNDHX.js → builder-manager-RC5VXLE2.js} +14 -12
- package/dist/_node-chunks/{camelcase-ILOVTISA.js → camelcase-3YERF6B7.js} +7 -7
- package/dist/_node-chunks/chunk-2H33L3XJ.js +61 -0
- package/dist/_node-chunks/{chunk-47ZRY4XW.js → chunk-2M7TBZBZ.js} +6 -6
- package/dist/_node-chunks/{chunk-TTACLBSG.js → chunk-4HG57EIN.js} +7 -7
- package/dist/_node-chunks/{chunk-CFXIZS6A.js → chunk-4PWGJYBL.js} +7 -7
- package/dist/_node-chunks/{chunk-K6FMM5LS.js → chunk-54FLVGBQ.js} +6 -6
- package/dist/_node-chunks/{chunk-3PMH6BEP.js → chunk-5BYTBW23.js} +6 -6
- package/dist/_node-chunks/{chunk-TDBTCAEB.js → chunk-5QNVOHBZ.js} +125 -73
- package/dist/_node-chunks/{chunk-SWN4HCJE.js → chunk-6TOW3ZMZ.js} +6 -6
- package/dist/_node-chunks/{chunk-FNQ5WLS5.js → chunk-A2364FS2.js} +7 -7
- package/dist/_node-chunks/{chunk-ZN5DGHF3.js → chunk-BWA66NDS.js} +10 -10
- package/dist/_node-chunks/{chunk-RIEIAV32.js → chunk-DIZCVGPK.js} +7 -7
- package/dist/_node-chunks/{chunk-PGYIGHRK.js → chunk-F347QVLI.js} +9 -9
- package/dist/_node-chunks/chunk-GJRLPTXZ.js +144 -0
- package/dist/_node-chunks/{chunk-LOJ73E6E.js → chunk-H4TYBETM.js} +9 -9
- package/dist/_node-chunks/{chunk-IVYTDHSW.js → chunk-HXE2FZ3F.js} +7 -7
- package/dist/_node-chunks/{chunk-KAAWGCHX.js → chunk-IHBEBZVB.js} +12 -12
- package/dist/_node-chunks/chunk-JK62DOZL.js +23 -0
- package/dist/_node-chunks/{chunk-WVXPIXUS.js → chunk-LMYIILVH.js} +7 -7
- package/dist/_node-chunks/{chunk-XWGABQX7.js → chunk-N73BCSUL.js} +6 -6
- package/dist/_node-chunks/{chunk-OKUHCLLJ.js → chunk-OT3P3RDM.js} +9 -9
- package/dist/_node-chunks/{chunk-JXU4P6K3.js → chunk-OZGI27C5.js} +6 -6
- package/dist/_node-chunks/{chunk-6QEWR44T.js → chunk-OZHRGJKY.js} +7 -7
- package/dist/_node-chunks/chunk-Q3WHGQXN.js +18 -0
- package/dist/_node-chunks/{chunk-TLGG6YAX.js → chunk-QNYGS5WG.js} +511 -127
- package/dist/_node-chunks/{chunk-WIOSV6HC.js → chunk-QXDUEJWP.js} +6 -6
- package/dist/_node-chunks/{chunk-M6AUSQA3.js → chunk-USLMTVEL.js} +22 -22
- package/dist/_node-chunks/{chunk-YFUVKP3W.js → chunk-XH6HLMNG.js} +7 -7
- package/dist/_node-chunks/{chunk-XJMJA2L4.js → chunk-ZUTW3EKD.js} +250 -14
- package/dist/_node-chunks/{globby-A35XB3PP.js → globby-IVEL6LAU.js} +9 -9
- package/dist/_node-chunks/{lib-D5I6ETBH.js → lib-IDUN2DHZ.js} +7 -7
- package/dist/_node-chunks/{mdx-N42X6CFJ-DZ4EAFAE.js → mdx-N42X6CFJ-V7NAUWUX.js} +8 -8
- package/dist/_node-chunks/{p-limit-2CRKZRXN.js → p-limit-VA3OYXXM.js} +7 -7
- package/dist/babel/index.js +10 -10
- package/dist/bin/core.js +12 -12
- package/dist/bin/dispatcher.js +11 -11
- package/dist/bin/loader.js +9 -9
- package/dist/cli/index.js +18 -18
- package/dist/common/index.js +19 -19
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.js +55 -60
- package/dist/core-events/index.d.ts +19 -3
- package/dist/core-events/index.js +5 -1
- package/dist/core-server/index.d.ts +69 -2
- package/dist/core-server/index.js +38 -34
- package/dist/core-server/presets/common-override-preset.js +11 -11
- package/dist/core-server/presets/common-preset.js +519 -234
- package/dist/csf/index.d.ts +15 -3
- package/dist/csf/index.js +37 -13
- package/dist/csf-tools/index.d.ts +19 -1
- package/dist/csf-tools/index.js +11 -10
- package/dist/manager/globals-runtime.js +107 -81
- package/dist/manager/runtime.js +829 -167
- package/dist/manager-api/index.d.ts +2 -0
- package/dist/manager-api/index.js +10 -2
- package/dist/mocking-utils/index.js +8 -8
- package/dist/node-logger/index.js +9 -9
- package/dist/preview/runtime.js +33 -6
- package/dist/preview-api/index.d.ts +68 -67
- package/dist/server-errors.js +11 -11
- package/dist/telemetry/index.d.ts +14 -2
- package/dist/telemetry/index.js +23 -22
- package/dist/theming/index.js +16 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +2 -1
- package/dist/_node-chunks/chunk-5E2HAJXY.js +0 -35
- package/dist/_node-chunks/chunk-DGLVYUKY.js +0 -61
- package/dist/_node-chunks/chunk-MSK3YTQT.js +0 -23
- package/dist/_node-chunks/chunk-SPPXK6CQ.js +0 -18
package/dist/manager/runtime.js
CHANGED
|
@@ -9,6 +9,9 @@ var __require = /* @__PURE__ */ ((x2) => typeof require < "u" ? require : typeof
|
|
|
9
9
|
if (typeof require < "u") return require.apply(this, arguments);
|
|
10
10
|
throw Error('Dynamic require of "' + x2 + '" is not supported');
|
|
11
11
|
});
|
|
12
|
+
var __esm = (fn, res) => function() {
|
|
13
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
14
|
+
};
|
|
12
15
|
var __commonJS = (cb, mod) => function() {
|
|
13
16
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
14
17
|
};
|
|
@@ -28,7 +31,54 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
31
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
32
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
30
33
|
mod
|
|
31
|
-
));
|
|
34
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
35
|
+
|
|
36
|
+
// global-externals:react
|
|
37
|
+
var react_exports = {};
|
|
38
|
+
__export(react_exports, {
|
|
39
|
+
Children: () => Children,
|
|
40
|
+
Component: () => Component,
|
|
41
|
+
Fragment: () => Fragment,
|
|
42
|
+
Profiler: () => Profiler,
|
|
43
|
+
PureComponent: () => PureComponent,
|
|
44
|
+
StrictMode: () => StrictMode,
|
|
45
|
+
Suspense: () => Suspense,
|
|
46
|
+
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: () => __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
|
|
47
|
+
act: () => act,
|
|
48
|
+
cloneElement: () => cloneElement,
|
|
49
|
+
createContext: () => createContext,
|
|
50
|
+
createElement: () => createElement,
|
|
51
|
+
createFactory: () => createFactory,
|
|
52
|
+
createRef: () => createRef,
|
|
53
|
+
default: () => react_default,
|
|
54
|
+
forwardRef: () => forwardRef,
|
|
55
|
+
isValidElement: () => isValidElement,
|
|
56
|
+
lazy: () => lazy,
|
|
57
|
+
memo: () => memo,
|
|
58
|
+
startTransition: () => startTransition,
|
|
59
|
+
unstable_act: () => unstable_act,
|
|
60
|
+
useCallback: () => useCallback,
|
|
61
|
+
useContext: () => useContext,
|
|
62
|
+
useDebugValue: () => useDebugValue,
|
|
63
|
+
useDeferredValue: () => useDeferredValue,
|
|
64
|
+
useEffect: () => useEffect,
|
|
65
|
+
useId: () => useId,
|
|
66
|
+
useImperativeHandle: () => useImperativeHandle,
|
|
67
|
+
useInsertionEffect: () => useInsertionEffect,
|
|
68
|
+
useLayoutEffect: () => useLayoutEffect,
|
|
69
|
+
useMemo: () => useMemo,
|
|
70
|
+
useReducer: () => useReducer,
|
|
71
|
+
useRef: () => useRef,
|
|
72
|
+
useState: () => useState,
|
|
73
|
+
useSyncExternalStore: () => useSyncExternalStore,
|
|
74
|
+
useTransition: () => useTransition,
|
|
75
|
+
version: () => version
|
|
76
|
+
});
|
|
77
|
+
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({
|
|
78
|
+
"global-externals:react"() {
|
|
79
|
+
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__;
|
|
80
|
+
}
|
|
81
|
+
});
|
|
32
82
|
|
|
33
83
|
// ../../node_modules/prop-types/lib/ReactPropTypesSecret.js
|
|
34
84
|
var require_ReactPropTypesSecret = __commonJS({
|
|
@@ -213,6 +263,57 @@ var require_shallowequal = __commonJS({
|
|
|
213
263
|
}
|
|
214
264
|
});
|
|
215
265
|
|
|
266
|
+
// ../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
|
|
267
|
+
var require_use_sync_external_store_shim_production = __commonJS({
|
|
268
|
+
"../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
|
|
269
|
+
"use strict";
|
|
270
|
+
var React = (init_react(), __toCommonJS(react_exports));
|
|
271
|
+
function is4(x2, y2) {
|
|
272
|
+
return x2 === y2 && (x2 !== 0 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
|
|
273
|
+
}
|
|
274
|
+
var objectIs = typeof Object.is == "function" ? Object.is : is4, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
|
|
275
|
+
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
276
|
+
var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
|
|
277
|
+
return useLayoutEffect2(
|
|
278
|
+
function() {
|
|
279
|
+
inst.value = value, inst.getSnapshot = getSnapshot, checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
280
|
+
},
|
|
281
|
+
[subscribe, value, getSnapshot]
|
|
282
|
+
), useEffect2(
|
|
283
|
+
function() {
|
|
284
|
+
return checkIfSnapshotChanged(inst) && forceUpdate({ inst }), subscribe(function() {
|
|
285
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
286
|
+
});
|
|
287
|
+
},
|
|
288
|
+
[subscribe]
|
|
289
|
+
), useDebugValue2(value), value;
|
|
290
|
+
}
|
|
291
|
+
function checkIfSnapshotChanged(inst) {
|
|
292
|
+
var latestGetSnapshot = inst.getSnapshot;
|
|
293
|
+
inst = inst.value;
|
|
294
|
+
try {
|
|
295
|
+
var nextValue = latestGetSnapshot();
|
|
296
|
+
return !objectIs(inst, nextValue);
|
|
297
|
+
} catch {
|
|
298
|
+
return !0;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
302
|
+
return getSnapshot();
|
|
303
|
+
}
|
|
304
|
+
var shim = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? useSyncExternalStore$1 : useSyncExternalStore$2;
|
|
305
|
+
exports.useSyncExternalStore = React.useSyncExternalStore !== void 0 ? React.useSyncExternalStore : shim;
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
// ../../node_modules/use-sync-external-store/shim/index.js
|
|
310
|
+
var require_shim = __commonJS({
|
|
311
|
+
"../../node_modules/use-sync-external-store/shim/index.js"(exports, module) {
|
|
312
|
+
"use strict";
|
|
313
|
+
module.exports = require_use_sync_external_store_shim_production();
|
|
314
|
+
}
|
|
315
|
+
});
|
|
316
|
+
|
|
216
317
|
// ../../node_modules/memoizerific/memoizerific.js
|
|
217
318
|
var require_memoizerific = __commonJS({
|
|
218
319
|
"../../node_modules/memoizerific/memoizerific.js"(exports, module) {
|
|
@@ -1209,14 +1310,14 @@ var require_store2 = __commonJS({
|
|
|
1209
1310
|
}
|
|
1210
1311
|
});
|
|
1211
1312
|
|
|
1212
|
-
//
|
|
1213
|
-
|
|
1313
|
+
// src/manager/runtime.tsx
|
|
1314
|
+
init_react();
|
|
1214
1315
|
|
|
1215
1316
|
// global-externals:storybook/internal/channels
|
|
1216
1317
|
var channels_default = __STORYBOOK_CHANNELS__, { Channel, HEARTBEAT_INTERVAL, HEARTBEAT_MAX_LATENCY, PostMessageTransport, WebsocketTransport, createBrowserChannel } = __STORYBOOK_CHANNELS__;
|
|
1217
1318
|
|
|
1218
1319
|
// global-externals:storybook/internal/core-events
|
|
1219
|
-
var core_events_default = __STORYBOOK_CORE_EVENTS__, { 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, 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, 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__;
|
|
1320
|
+
var core_events_default = __STORYBOOK_CORE_EVENTS__, { 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, 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__;
|
|
1220
1321
|
|
|
1221
1322
|
// ../../node_modules/@storybook/global/dist/index.mjs
|
|
1222
1323
|
var scope = (() => {
|
|
@@ -1489,6 +1590,9 @@ var manager_api_default = __STORYBOOK_API__, { ActiveTabs, Consumer, ManagerCont
|
|
|
1489
1590
|
// global-externals:storybook/theming
|
|
1490
1591
|
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, styled, themes, tokens, typography, useTheme, withTheme } = __STORYBOOK_THEMING__;
|
|
1491
1592
|
|
|
1593
|
+
// src/toolbar/components/ToolbarManager.tsx
|
|
1594
|
+
init_react();
|
|
1595
|
+
|
|
1492
1596
|
// global-externals:storybook/internal/components
|
|
1493
1597
|
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__;
|
|
1494
1598
|
|
|
@@ -1509,6 +1613,12 @@ var defaultItemValues = {
|
|
|
1509
1613
|
}
|
|
1510
1614
|
});
|
|
1511
1615
|
|
|
1616
|
+
// src/toolbar/components/ToolbarMenuSelect.tsx
|
|
1617
|
+
init_react();
|
|
1618
|
+
|
|
1619
|
+
// src/components/components/icon/icon.tsx
|
|
1620
|
+
init_react();
|
|
1621
|
+
|
|
1512
1622
|
// global-externals:storybook/internal/client-logger
|
|
1513
1623
|
var client_logger_default = __STORYBOOK_CLIENT_LOGGER__, { deprecate, logger, once, pretty } = __STORYBOOK_CLIENT_LOGGER__;
|
|
1514
1624
|
|
|
@@ -1755,6 +1865,9 @@ var NEW_ICON_MAP = icons_exports, Svg = styled.svg`
|
|
|
1755
1865
|
vscode: "VSCodeIcon"
|
|
1756
1866
|
};
|
|
1757
1867
|
|
|
1868
|
+
// src/toolbar/hoc/withKeyboardCycle.tsx
|
|
1869
|
+
init_react();
|
|
1870
|
+
|
|
1758
1871
|
// src/toolbar/utils/create-cycle-value-array.ts
|
|
1759
1872
|
var disallowedCycleableItemTypes = ["reset"], createCycleValueArray = (items) => items.filter((item) => !disallowedCycleableItemTypes.includes(item.type)).map((item) => item.value);
|
|
1760
1873
|
|
|
@@ -1873,6 +1986,9 @@ var ToolbarManager = () => {
|
|
|
1873
1986
|
})) : null;
|
|
1874
1987
|
};
|
|
1875
1988
|
|
|
1989
|
+
// src/manager/index.tsx
|
|
1990
|
+
init_react();
|
|
1991
|
+
|
|
1876
1992
|
// global-externals:react-dom/client
|
|
1877
1993
|
var client_default = __REACT_DOM_CLIENT__, { createRoot, hydrateRoot } = __REACT_DOM_CLIENT__;
|
|
1878
1994
|
|
|
@@ -1883,6 +1999,7 @@ var manager_errors_default = __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__, { Categor
|
|
|
1883
1999
|
var router_default = __STORYBOOK_ROUTER__, { BaseLocationProvider, DEEPLY_EQUAL, Link: Link2, Location, LocationProvider, Match, Route, buildArgsParam, deepDiff, getMatch, parsePath, queryFromLocation, stringifyQuery, useNavigate } = __STORYBOOK_ROUTER__;
|
|
1884
2000
|
|
|
1885
2001
|
// ../../node_modules/react-helmet-async/lib/index.module.js
|
|
2002
|
+
init_react();
|
|
1886
2003
|
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());
|
|
1887
2004
|
function a() {
|
|
1888
2005
|
return a = Object.assign || function(t2) {
|
|
@@ -2226,6 +2343,12 @@ var F = ["children"], G = ["children"], W = (function(e2) {
|
|
|
2226
2343
|
})(Component);
|
|
2227
2344
|
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";
|
|
2228
2345
|
|
|
2346
|
+
// src/manager/App.tsx
|
|
2347
|
+
init_react();
|
|
2348
|
+
|
|
2349
|
+
// src/manager/components/error-boundary/ManagerErrorBoundary.tsx
|
|
2350
|
+
init_react();
|
|
2351
|
+
|
|
2229
2352
|
// ../../node_modules/@babel/runtime/helpers/esm/extends.js
|
|
2230
2353
|
function _extends() {
|
|
2231
2354
|
return _extends = Object.assign ? Object.assign.bind() : function(n3) {
|
|
@@ -2940,10 +3063,23 @@ Component Stack:${errorInfo.componentStack}`)
|
|
|
2940
3063
|
}
|
|
2941
3064
|
};
|
|
2942
3065
|
|
|
3066
|
+
// src/manager/components/layout/Layout.tsx
|
|
3067
|
+
init_react();
|
|
3068
|
+
|
|
2943
3069
|
// src/manager/constants.ts
|
|
2944
3070
|
var MEDIA_DESKTOP_BREAKPOINT = "@media (min-width: 600px)";
|
|
2945
3071
|
|
|
3072
|
+
// src/manager/container/Notifications.tsx
|
|
3073
|
+
init_react();
|
|
3074
|
+
|
|
3075
|
+
// src/manager/components/notifications/NotificationList.tsx
|
|
3076
|
+
init_react();
|
|
3077
|
+
|
|
3078
|
+
// src/manager/components/layout/LayoutProvider.tsx
|
|
3079
|
+
init_react();
|
|
3080
|
+
|
|
2946
3081
|
// src/manager/hooks/useMedia.tsx
|
|
3082
|
+
init_react();
|
|
2947
3083
|
function useMediaQuery(query) {
|
|
2948
3084
|
let getMatches = (queryMatch) => typeof window < "u" ? window.matchMedia(queryMatch).matches : !1, [matches, setMatches] = useState(getMatches(query));
|
|
2949
3085
|
function handleChange() {
|
|
@@ -2997,6 +3133,7 @@ var LayoutContext = createContext({
|
|
|
2997
3133
|
}, useLayout = () => useContext(LayoutContext);
|
|
2998
3134
|
|
|
2999
3135
|
// src/manager/components/notifications/NotificationItem.tsx
|
|
3136
|
+
init_react();
|
|
3000
3137
|
var slideIn = keyframes({
|
|
3001
3138
|
"0%": {
|
|
3002
3139
|
opacity: 0,
|
|
@@ -3175,14 +3312,22 @@ var mapper = ({ state, api }) => ({
|
|
|
3175
3312
|
clearNotification: api.clearNotification
|
|
3176
3313
|
}), Notifications = (props) => react_default.createElement(Consumer, { filter: mapper }, (fromState) => react_default.createElement(NotificationList, { ...props, ...fromState }));
|
|
3177
3314
|
|
|
3315
|
+
// src/manager/components/mobile/navigation/MobileNavigation.tsx
|
|
3316
|
+
init_react();
|
|
3317
|
+
|
|
3178
3318
|
// ../../node_modules/@react-aria/utils/dist/useLayoutEffect.mjs
|
|
3319
|
+
init_react();
|
|
3179
3320
|
var $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document < "u" ? react_default.useLayoutEffect : () => {
|
|
3180
3321
|
};
|
|
3181
3322
|
|
|
3182
|
-
// ../../node_modules/@react-aria/utils/dist/
|
|
3183
|
-
|
|
3323
|
+
// ../../node_modules/@react-aria/utils/dist/useValueEffect.mjs
|
|
3324
|
+
init_react();
|
|
3325
|
+
|
|
3326
|
+
// ../../node_modules/@react-aria/utils/dist/useId.mjs
|
|
3327
|
+
init_react();
|
|
3184
3328
|
|
|
3185
3329
|
// ../../node_modules/@react-aria/ssr/dist/SSRProvider.mjs
|
|
3330
|
+
init_react();
|
|
3186
3331
|
var $b5e257d569688ac6$var$defaultContext = {
|
|
3187
3332
|
prefix: String(Math.round(Math.random() * 1e10)),
|
|
3188
3333
|
current: 0
|
|
@@ -3336,6 +3481,7 @@ var $c87311424ea30a05$export$9ac100e40613ea10 = $c87311424ea30a05$var$cached(fun
|
|
|
3336
3481
|
});
|
|
3337
3482
|
|
|
3338
3483
|
// ../../node_modules/@react-aria/utils/dist/openLink.mjs
|
|
3484
|
+
init_react();
|
|
3339
3485
|
var $ea8dcbcb9ea1b556$var$RouterContext = createContext({
|
|
3340
3486
|
isNative: !0,
|
|
3341
3487
|
open: $ea8dcbcb9ea1b556$var$openSyntheticLink,
|
|
@@ -3356,6 +3502,7 @@ function $ea8dcbcb9ea1b556$export$95185d699e05d4d7(target, modifiers2, setOpenin
|
|
|
3356
3502
|
ctrlKey,
|
|
3357
3503
|
altKey,
|
|
3358
3504
|
shiftKey,
|
|
3505
|
+
detail: 1,
|
|
3359
3506
|
bubbles: !0,
|
|
3360
3507
|
cancelable: !0
|
|
3361
3508
|
});
|
|
@@ -3398,12 +3545,59 @@ function $bbed8b41f857bcc0$var$setupGlobalEvents() {
|
|
|
3398
3545
|
}
|
|
3399
3546
|
typeof document < "u" && (document.readyState !== "loading" ? $bbed8b41f857bcc0$var$setupGlobalEvents() : document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents));
|
|
3400
3547
|
|
|
3548
|
+
// ../../node_modules/@react-aria/utils/dist/useDrag1D.mjs
|
|
3549
|
+
init_react();
|
|
3550
|
+
|
|
3551
|
+
// ../../node_modules/@react-aria/utils/dist/useGlobalListeners.mjs
|
|
3552
|
+
init_react();
|
|
3553
|
+
|
|
3554
|
+
// ../../node_modules/@react-aria/utils/dist/useObjectRef.mjs
|
|
3555
|
+
init_react();
|
|
3556
|
+
|
|
3557
|
+
// ../../node_modules/@react-aria/utils/dist/useEffectEvent.mjs
|
|
3558
|
+
init_react();
|
|
3559
|
+
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;
|
|
3560
|
+
|
|
3561
|
+
// ../../node_modules/@react-aria/utils/dist/useUpdateEffect.mjs
|
|
3562
|
+
init_react();
|
|
3563
|
+
|
|
3564
|
+
// ../../node_modules/@react-aria/utils/dist/useUpdateLayoutEffect.mjs
|
|
3565
|
+
init_react();
|
|
3566
|
+
|
|
3567
|
+
// ../../node_modules/@react-aria/utils/dist/useResizeObserver.mjs
|
|
3568
|
+
init_react();
|
|
3569
|
+
|
|
3401
3570
|
// ../../node_modules/@react-aria/utils/dist/useViewportSize.mjs
|
|
3571
|
+
init_react();
|
|
3402
3572
|
var $5df64b3807dc15ee$var$visualViewport = typeof document < "u" && window.visualViewport;
|
|
3403
3573
|
|
|
3574
|
+
// ../../node_modules/@react-aria/utils/dist/useDescription.mjs
|
|
3575
|
+
init_react();
|
|
3576
|
+
|
|
3577
|
+
// ../../node_modules/@react-aria/utils/dist/useEvent.mjs
|
|
3578
|
+
init_react();
|
|
3579
|
+
|
|
3580
|
+
// ../../node_modules/@react-aria/utils/dist/useDeepMemo.mjs
|
|
3581
|
+
init_react();
|
|
3582
|
+
|
|
3583
|
+
// ../../node_modules/@react-aria/utils/dist/useFormReset.mjs
|
|
3584
|
+
init_react();
|
|
3585
|
+
|
|
3586
|
+
// ../../node_modules/@react-aria/utils/dist/useLoadMore.mjs
|
|
3587
|
+
init_react();
|
|
3588
|
+
|
|
3589
|
+
// ../../node_modules/@react-aria/utils/dist/useLoadMoreSentinel.mjs
|
|
3590
|
+
init_react();
|
|
3591
|
+
|
|
3592
|
+
// ../../node_modules/@react-aria/utils/dist/inertValue.mjs
|
|
3593
|
+
init_react();
|
|
3594
|
+
|
|
3404
3595
|
// global-externals:react-dom
|
|
3405
3596
|
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__;
|
|
3406
3597
|
|
|
3598
|
+
// ../../node_modules/@react-aria/utils/dist/animation.mjs
|
|
3599
|
+
init_react();
|
|
3600
|
+
|
|
3407
3601
|
// ../../node_modules/@react-aria/utils/dist/isElementVisible.mjs
|
|
3408
3602
|
var $7d2416ea0959daaa$var$supportsCheckVisibility = typeof Element < "u" && "checkVisibility" in Element.prototype;
|
|
3409
3603
|
|
|
@@ -3427,7 +3621,284 @@ var $b4b717babfbb907b$var$focusableElements = [
|
|
|
3427
3621
|
$b4b717babfbb907b$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
|
|
3428
3622
|
var $b4b717babfbb907b$var$TABBABLE_ELEMENT_SELECTOR = $b4b717babfbb907b$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
|
|
3429
3623
|
|
|
3624
|
+
// ../../node_modules/@react-stately/utils/dist/useControlledState.mjs
|
|
3625
|
+
init_react();
|
|
3626
|
+
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 : () => {
|
|
3627
|
+
};
|
|
3628
|
+
|
|
3629
|
+
// ../../node_modules/@react-aria/landmark/dist/useLandmark.mjs
|
|
3630
|
+
init_react();
|
|
3631
|
+
var import_shim = __toESM(require_shim(), 1), $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION = 1, $a86207c5d7f7e1fb$var$landmarkSymbol = Symbol.for("react-aria-landmark-manager");
|
|
3632
|
+
function $a86207c5d7f7e1fb$var$subscribe(fn) {
|
|
3633
|
+
return document.addEventListener("react-aria-landmark-manager-change", fn), () => document.removeEventListener("react-aria-landmark-manager-change", fn);
|
|
3634
|
+
}
|
|
3635
|
+
function $a86207c5d7f7e1fb$var$getLandmarkManager() {
|
|
3636
|
+
if (typeof document > "u") return null;
|
|
3637
|
+
let instance = document[$a86207c5d7f7e1fb$var$landmarkSymbol];
|
|
3638
|
+
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]);
|
|
3639
|
+
}
|
|
3640
|
+
function $a86207c5d7f7e1fb$var$useLandmarkManager() {
|
|
3641
|
+
return (0, import_shim.useSyncExternalStore)($a86207c5d7f7e1fb$var$subscribe, $a86207c5d7f7e1fb$var$getLandmarkManager, $a86207c5d7f7e1fb$var$getLandmarkManager);
|
|
3642
|
+
}
|
|
3643
|
+
var $a86207c5d7f7e1fb$var$LandmarkManager = class {
|
|
3644
|
+
setupIfNeeded() {
|
|
3645
|
+
this.isListening || (document.addEventListener("keydown", this.f6Handler, {
|
|
3646
|
+
capture: !0
|
|
3647
|
+
}), document.addEventListener("focusin", this.focusinHandler, {
|
|
3648
|
+
capture: !0
|
|
3649
|
+
}), document.addEventListener("focusout", this.focusoutHandler, {
|
|
3650
|
+
capture: !0
|
|
3651
|
+
}), this.isListening = !0);
|
|
3652
|
+
}
|
|
3653
|
+
teardownIfNeeded() {
|
|
3654
|
+
!this.isListening || this.landmarks.length > 0 || this.refCount > 0 || (document.removeEventListener("keydown", this.f6Handler, {
|
|
3655
|
+
capture: !0
|
|
3656
|
+
}), document.removeEventListener("focusin", this.focusinHandler, {
|
|
3657
|
+
capture: !0
|
|
3658
|
+
}), document.removeEventListener("focusout", this.focusoutHandler, {
|
|
3659
|
+
capture: !0
|
|
3660
|
+
}), this.isListening = !1);
|
|
3661
|
+
}
|
|
3662
|
+
focusLandmark(landmark, direction) {
|
|
3663
|
+
var _this_landmarks_find_focus, _this_landmarks_find;
|
|
3664
|
+
(_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);
|
|
3665
|
+
}
|
|
3666
|
+
/**
|
|
3667
|
+
* Return set of landmarks with a specific role.
|
|
3668
|
+
*/
|
|
3669
|
+
getLandmarksByRole(role) {
|
|
3670
|
+
return new Set(this.landmarks.filter((l3) => l3.role === role));
|
|
3671
|
+
}
|
|
3672
|
+
/**
|
|
3673
|
+
* Return first landmark with a specific role.
|
|
3674
|
+
*/
|
|
3675
|
+
getLandmarkByRole(role) {
|
|
3676
|
+
return this.landmarks.find((l3) => l3.role === role);
|
|
3677
|
+
}
|
|
3678
|
+
addLandmark(newLandmark) {
|
|
3679
|
+
if (this.setupIfNeeded(), this.landmarks.find((landmark) => landmark.ref === newLandmark.ref) || !newLandmark.ref.current) return;
|
|
3680
|
+
if (this.landmarks.filter((landmark) => landmark.role === "main").length > 1, this.landmarks.length === 0) {
|
|
3681
|
+
this.landmarks = [
|
|
3682
|
+
newLandmark
|
|
3683
|
+
], this.checkLabels(newLandmark.role);
|
|
3684
|
+
return;
|
|
3685
|
+
}
|
|
3686
|
+
let start = 0, end = this.landmarks.length - 1;
|
|
3687
|
+
for (; start <= end; ) {
|
|
3688
|
+
let mid = Math.floor((start + end) / 2), comparedPosition = newLandmark.ref.current.compareDocumentPosition(this.landmarks[mid].ref.current);
|
|
3689
|
+
!!(comparedPosition & Node.DOCUMENT_POSITION_PRECEDING || comparedPosition & Node.DOCUMENT_POSITION_CONTAINS) ? start = mid + 1 : end = mid - 1;
|
|
3690
|
+
}
|
|
3691
|
+
this.landmarks.splice(start, 0, newLandmark), this.checkLabels(newLandmark.role);
|
|
3692
|
+
}
|
|
3693
|
+
updateLandmark(landmark) {
|
|
3694
|
+
let index = this.landmarks.findIndex((l3) => l3.ref === landmark.ref);
|
|
3695
|
+
index >= 0 && (this.landmarks[index] = {
|
|
3696
|
+
...this.landmarks[index],
|
|
3697
|
+
...landmark
|
|
3698
|
+
}, this.checkLabels(this.landmarks[index].role));
|
|
3699
|
+
}
|
|
3700
|
+
removeLandmark(ref) {
|
|
3701
|
+
this.landmarks = this.landmarks.filter((landmark) => landmark.ref !== ref), this.teardownIfNeeded();
|
|
3702
|
+
}
|
|
3703
|
+
/**
|
|
3704
|
+
* Warn if there are 2+ landmarks with the same role but no label.
|
|
3705
|
+
* Labels for landmarks with the same role must also be unique.
|
|
3706
|
+
*
|
|
3707
|
+
* See https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/.
|
|
3708
|
+
*/
|
|
3709
|
+
checkLabels(role) {
|
|
3710
|
+
let landmarksWithRole = this.getLandmarksByRole(role);
|
|
3711
|
+
landmarksWithRole.size > 1 && [
|
|
3712
|
+
...landmarksWithRole
|
|
3713
|
+
].filter((landmark) => !landmark.label).length > 0;
|
|
3714
|
+
}
|
|
3715
|
+
/**
|
|
3716
|
+
* Get the landmark that is the closest parent in the DOM.
|
|
3717
|
+
* Returns undefined if no parent is a landmark.
|
|
3718
|
+
*/
|
|
3719
|
+
closestLandmark(element) {
|
|
3720
|
+
let landmarkMap = new Map(this.landmarks.map((l3) => [
|
|
3721
|
+
l3.ref.current,
|
|
3722
|
+
l3
|
|
3723
|
+
])), currentElement = element;
|
|
3724
|
+
for (; currentElement && !landmarkMap.has(currentElement) && currentElement !== document.body && currentElement.parentElement; ) currentElement = currentElement.parentElement;
|
|
3725
|
+
return landmarkMap.get(currentElement);
|
|
3726
|
+
}
|
|
3727
|
+
/**
|
|
3728
|
+
* Gets the next landmark, in DOM focus order, or previous if backwards is specified.
|
|
3729
|
+
* If last landmark, next should be the first landmark.
|
|
3730
|
+
* If not inside a landmark, will return first landmark.
|
|
3731
|
+
* Returns undefined if there are no landmarks.
|
|
3732
|
+
*/
|
|
3733
|
+
getNextLandmark(element, { backward }) {
|
|
3734
|
+
var _this_landmarks_nextLandmarkIndex_ref_current;
|
|
3735
|
+
let currentLandmark = this.closestLandmark(element), nextLandmarkIndex = backward ? this.landmarks.length - 1 : 0;
|
|
3736
|
+
currentLandmark && (nextLandmarkIndex = this.landmarks.indexOf(currentLandmark) + (backward ? -1 : 1));
|
|
3737
|
+
let wrapIfNeeded = () => {
|
|
3738
|
+
if (nextLandmarkIndex < 0) {
|
|
3739
|
+
if (!element.dispatchEvent(new CustomEvent("react-aria-landmark-navigation", {
|
|
3740
|
+
detail: {
|
|
3741
|
+
direction: "backward"
|
|
3742
|
+
},
|
|
3743
|
+
bubbles: !0,
|
|
3744
|
+
cancelable: !0
|
|
3745
|
+
}))) return !0;
|
|
3746
|
+
nextLandmarkIndex = this.landmarks.length - 1;
|
|
3747
|
+
} else if (nextLandmarkIndex >= this.landmarks.length) {
|
|
3748
|
+
if (!element.dispatchEvent(new CustomEvent("react-aria-landmark-navigation", {
|
|
3749
|
+
detail: {
|
|
3750
|
+
direction: "forward"
|
|
3751
|
+
},
|
|
3752
|
+
bubbles: !0,
|
|
3753
|
+
cancelable: !0
|
|
3754
|
+
}))) return !0;
|
|
3755
|
+
nextLandmarkIndex = 0;
|
|
3756
|
+
}
|
|
3757
|
+
return nextLandmarkIndex < 0 || nextLandmarkIndex >= this.landmarks.length;
|
|
3758
|
+
};
|
|
3759
|
+
if (wrapIfNeeded()) return;
|
|
3760
|
+
let i2 = nextLandmarkIndex;
|
|
3761
|
+
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]"); ) {
|
|
3762
|
+
if (nextLandmarkIndex += backward ? -1 : 1, wrapIfNeeded()) return;
|
|
3763
|
+
if (nextLandmarkIndex === i2) break;
|
|
3764
|
+
}
|
|
3765
|
+
return this.landmarks[nextLandmarkIndex];
|
|
3766
|
+
}
|
|
3767
|
+
/**
|
|
3768
|
+
* Look at next landmark. If an element was previously focused inside, restore focus there.
|
|
3769
|
+
* If not, focus the landmark itself.
|
|
3770
|
+
* If no landmarks at all, or none with focusable elements, don't move focus.
|
|
3771
|
+
*/
|
|
3772
|
+
f6Handler(e2) {
|
|
3773
|
+
e2.key === "F6" && (e2.altKey ? this.focusMain() : this.navigate(e2.target, e2.shiftKey)) && (e2.preventDefault(), e2.stopPropagation());
|
|
3774
|
+
}
|
|
3775
|
+
focusMain() {
|
|
3776
|
+
let main = this.getLandmarkByRole("main");
|
|
3777
|
+
return main && main.ref.current && document.contains(main.ref.current) ? (this.focusLandmark(main.ref.current, "forward"), !0) : !1;
|
|
3778
|
+
}
|
|
3779
|
+
navigate(from, backward) {
|
|
3780
|
+
let nextLandmark = this.getNextLandmark(from, {
|
|
3781
|
+
backward
|
|
3782
|
+
});
|
|
3783
|
+
if (!nextLandmark) return !1;
|
|
3784
|
+
if (nextLandmark.lastFocused) {
|
|
3785
|
+
let lastFocused = nextLandmark.lastFocused;
|
|
3786
|
+
if (document.body.contains(lastFocused))
|
|
3787
|
+
return lastFocused.focus(), !0;
|
|
3788
|
+
}
|
|
3789
|
+
return nextLandmark.ref.current && document.contains(nextLandmark.ref.current) ? (this.focusLandmark(nextLandmark.ref.current, backward ? "backward" : "forward"), !0) : !1;
|
|
3790
|
+
}
|
|
3791
|
+
/**
|
|
3792
|
+
* Sets lastFocused for a landmark, if focus is moved within that landmark.
|
|
3793
|
+
* Lets the last focused landmark know it was blurred if something else is focused.
|
|
3794
|
+
*/
|
|
3795
|
+
focusinHandler(e2) {
|
|
3796
|
+
let currentLandmark = this.closestLandmark(e2.target);
|
|
3797
|
+
currentLandmark && currentLandmark.ref.current !== e2.target && this.updateLandmark({
|
|
3798
|
+
ref: currentLandmark.ref,
|
|
3799
|
+
lastFocused: e2.target
|
|
3800
|
+
});
|
|
3801
|
+
let previousFocusedElement = e2.relatedTarget;
|
|
3802
|
+
if (previousFocusedElement) {
|
|
3803
|
+
let closestPreviousLandmark = this.closestLandmark(previousFocusedElement);
|
|
3804
|
+
closestPreviousLandmark && closestPreviousLandmark.ref.current === previousFocusedElement && closestPreviousLandmark.blur();
|
|
3805
|
+
}
|
|
3806
|
+
}
|
|
3807
|
+
/**
|
|
3808
|
+
* Track if the focus is lost to the body. If it is, do cleanup on the landmark that last had focus.
|
|
3809
|
+
*/
|
|
3810
|
+
focusoutHandler(e2) {
|
|
3811
|
+
let previousFocusedElement = e2.target, nextFocusedElement = e2.relatedTarget;
|
|
3812
|
+
if (!nextFocusedElement || nextFocusedElement === document) {
|
|
3813
|
+
let closestPreviousLandmark = this.closestLandmark(previousFocusedElement);
|
|
3814
|
+
closestPreviousLandmark && closestPreviousLandmark.ref.current === previousFocusedElement && closestPreviousLandmark.blur();
|
|
3815
|
+
}
|
|
3816
|
+
}
|
|
3817
|
+
createLandmarkController() {
|
|
3818
|
+
let instance = this;
|
|
3819
|
+
return instance.refCount++, instance.setupIfNeeded(), {
|
|
3820
|
+
navigate(direction, opts) {
|
|
3821
|
+
let element = opts?.from || document.activeElement;
|
|
3822
|
+
return instance.navigate(element, direction === "backward");
|
|
3823
|
+
},
|
|
3824
|
+
focusNext(opts) {
|
|
3825
|
+
let element = opts?.from || document.activeElement;
|
|
3826
|
+
return instance.navigate(element, !1);
|
|
3827
|
+
},
|
|
3828
|
+
focusPrevious(opts) {
|
|
3829
|
+
let element = opts?.from || document.activeElement;
|
|
3830
|
+
return instance.navigate(element, !0);
|
|
3831
|
+
},
|
|
3832
|
+
focusMain() {
|
|
3833
|
+
return instance.focusMain();
|
|
3834
|
+
},
|
|
3835
|
+
dispose() {
|
|
3836
|
+
instance && (instance.refCount--, instance.teardownIfNeeded(), instance = null);
|
|
3837
|
+
}
|
|
3838
|
+
};
|
|
3839
|
+
}
|
|
3840
|
+
registerLandmark(landmark) {
|
|
3841
|
+
return this.landmarks.find((l3) => l3.ref === landmark.ref) ? this.updateLandmark(landmark) : this.addLandmark(landmark), () => this.removeLandmark(landmark.ref);
|
|
3842
|
+
}
|
|
3843
|
+
constructor() {
|
|
3844
|
+
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);
|
|
3845
|
+
}
|
|
3846
|
+
};
|
|
3847
|
+
function $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref) {
|
|
3848
|
+
let { role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, focus } = props, manager = $a86207c5d7f7e1fb$var$useLandmarkManager(), label = ariaLabel || ariaLabelledby, [isLandmarkFocused, setIsLandmarkFocused] = useState(!1), defaultFocus = useCallback(() => {
|
|
3849
|
+
setIsLandmarkFocused(!0);
|
|
3850
|
+
}, [
|
|
3851
|
+
setIsLandmarkFocused
|
|
3852
|
+
]), blur = useCallback(() => {
|
|
3853
|
+
setIsLandmarkFocused(!1);
|
|
3854
|
+
}, [
|
|
3855
|
+
setIsLandmarkFocused
|
|
3856
|
+
]);
|
|
3857
|
+
return $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
3858
|
+
if (manager) return manager.registerLandmark({
|
|
3859
|
+
ref,
|
|
3860
|
+
label,
|
|
3861
|
+
role,
|
|
3862
|
+
focus: focus || defaultFocus,
|
|
3863
|
+
blur
|
|
3864
|
+
});
|
|
3865
|
+
}, [
|
|
3866
|
+
manager,
|
|
3867
|
+
label,
|
|
3868
|
+
ref,
|
|
3869
|
+
role,
|
|
3870
|
+
focus,
|
|
3871
|
+
defaultFocus,
|
|
3872
|
+
blur
|
|
3873
|
+
]), useEffect(() => {
|
|
3874
|
+
var _ref_current;
|
|
3875
|
+
isLandmarkFocused && ((_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.focus());
|
|
3876
|
+
}, [
|
|
3877
|
+
isLandmarkFocused,
|
|
3878
|
+
ref
|
|
3879
|
+
]), {
|
|
3880
|
+
landmarkProps: {
|
|
3881
|
+
role,
|
|
3882
|
+
tabIndex: isLandmarkFocused ? -1 : void 0,
|
|
3883
|
+
"aria-label": ariaLabel,
|
|
3884
|
+
"aria-labelledby": ariaLabelledby
|
|
3885
|
+
}
|
|
3886
|
+
};
|
|
3887
|
+
}
|
|
3888
|
+
|
|
3889
|
+
// src/manager/hooks/useLandmark.ts
|
|
3890
|
+
function useLandmark(props, ref) {
|
|
3891
|
+
let { landmarkProps } = $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref);
|
|
3892
|
+
return {
|
|
3893
|
+
landmarkProps: {
|
|
3894
|
+
...landmarkProps,
|
|
3895
|
+
"data-sb-landmark": !0
|
|
3896
|
+
}
|
|
3897
|
+
};
|
|
3898
|
+
}
|
|
3899
|
+
|
|
3430
3900
|
// src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx
|
|
3901
|
+
init_react();
|
|
3431
3902
|
var MobileAddonsDrawer = ({
|
|
3432
3903
|
children,
|
|
3433
3904
|
id,
|
|
@@ -3447,6 +3918,15 @@ var MobileAddonsDrawer = ({
|
|
|
3447
3918
|
children
|
|
3448
3919
|
);
|
|
3449
3920
|
|
|
3921
|
+
// src/manager/components/mobile/navigation/MobileMenuDrawer.tsx
|
|
3922
|
+
init_react();
|
|
3923
|
+
|
|
3924
|
+
// src/manager/components/mobile/about/MobileAbout.tsx
|
|
3925
|
+
init_react();
|
|
3926
|
+
|
|
3927
|
+
// ../../node_modules/react-transition-state/dist/esm/hooks/useTransitionState.mjs
|
|
3928
|
+
init_react();
|
|
3929
|
+
|
|
3450
3930
|
// ../../node_modules/react-transition-state/dist/esm/hooks/utils.mjs
|
|
3451
3931
|
var STATUS = ["preEnter", "entering", "entered", "preExit", "exiting", "exited", "unmounted"], getState = (status) => ({
|
|
3452
3932
|
_s: status,
|
|
@@ -3509,6 +3989,7 @@ var updateState = (status, setState, latestState, timeoutId, onChange) => {
|
|
|
3509
3989
|
};
|
|
3510
3990
|
|
|
3511
3991
|
// ../../node_modules/react-transition-state/dist/esm/hooks/useTransitionMap.mjs
|
|
3992
|
+
init_react();
|
|
3512
3993
|
var updateState2 = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
|
|
3513
3994
|
clearTimeout(timeoutId);
|
|
3514
3995
|
let state = getState(status), stateMap = new Map(latestStateMap.current);
|
|
@@ -3578,6 +4059,7 @@ var updateState2 = (key, status, setStateMap, latestStateMap, timeoutId, onChang
|
|
|
3578
4059
|
};
|
|
3579
4060
|
|
|
3580
4061
|
// src/manager/components/upgrade/UpgradeBlock.tsx
|
|
4062
|
+
init_react();
|
|
3581
4063
|
var UpgradeBlock = ({ onNavigateToWhatsNew }) => {
|
|
3582
4064
|
let api = useStorybookApi(), [activeTab, setActiveTab] = useState("npm");
|
|
3583
4065
|
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"));
|
|
@@ -3769,7 +4251,10 @@ var useFullStoryName = () => {
|
|
|
3769
4251
|
showPanel,
|
|
3770
4252
|
...props
|
|
3771
4253
|
}) => {
|
|
3772
|
-
let { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(), fullStoryName = useFullStoryName(), headingId = $bdb11010cef70236$export$f680877a34711e37()
|
|
4254
|
+
let { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(), fullStoryName = useFullStoryName(), headingId = $bdb11010cef70236$export$f680877a34711e37(), sectionRef = useRef(null), { landmarkProps } = useLandmark(
|
|
4255
|
+
{ "aria-labelledby": headingId, role: "banner" },
|
|
4256
|
+
sectionRef
|
|
4257
|
+
);
|
|
3773
4258
|
return react_default.createElement(Container4, { ...props }, react_default.createElement(
|
|
3774
4259
|
MobileMenuDrawer,
|
|
3775
4260
|
{
|
|
@@ -3786,7 +4271,7 @@ var useFullStoryName = () => {
|
|
|
3786
4271
|
onOpenChange: setMobilePanelOpen
|
|
3787
4272
|
},
|
|
3788
4273
|
panel
|
|
3789
|
-
), !isMobilePanelOpen && react_default.createElement(MobileBottomBar, { className: "sb-bar",
|
|
4274
|
+
), !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(
|
|
3790
4275
|
BottomBarButton,
|
|
3791
4276
|
{
|
|
3792
4277
|
padding: "small",
|
|
@@ -3810,14 +4295,14 @@ var useFullStoryName = () => {
|
|
|
3810
4295
|
},
|
|
3811
4296
|
react_default.createElement(BottomBarToggleIcon, null)
|
|
3812
4297
|
)));
|
|
3813
|
-
}, Container4 = styled.
|
|
4298
|
+
}, Container4 = styled.section(({ theme }) => ({
|
|
3814
4299
|
bottom: 0,
|
|
3815
4300
|
left: 0,
|
|
3816
4301
|
width: "100%",
|
|
3817
4302
|
zIndex: 10,
|
|
3818
4303
|
background: theme.barBg,
|
|
3819
4304
|
borderTop: `1px solid ${theme.appBorderColor}`
|
|
3820
|
-
})), MobileBottomBar = styled.
|
|
4305
|
+
})), MobileBottomBar = styled.header({
|
|
3821
4306
|
display: "flex",
|
|
3822
4307
|
alignItems: "center",
|
|
3823
4308
|
justifyContent: "space-between",
|
|
@@ -3850,6 +4335,7 @@ var useFullStoryName = () => {
|
|
|
3850
4335
|
});
|
|
3851
4336
|
|
|
3852
4337
|
// src/manager/components/layout/useDragging.ts
|
|
4338
|
+
init_react();
|
|
3853
4339
|
var SNAP_THRESHOLD_PX = 30, SIDEBAR_MIN_WIDTH_PX = 240, RIGHT_PANEL_MIN_WIDTH_PX = 270, MIN_WIDTH_STIFFNESS = 0.9;
|
|
3854
4340
|
function clamp(value, min, max) {
|
|
3855
4341
|
return Math.min(Math.max(value, min), max);
|
|
@@ -3949,6 +4435,46 @@ function useDragging({
|
|
|
3949
4435
|
]), { panelResizerRef, sidebarResizerRef };
|
|
3950
4436
|
}
|
|
3951
4437
|
|
|
4438
|
+
// src/manager/components/layout/useLandmarkIndicator.ts
|
|
4439
|
+
init_react();
|
|
4440
|
+
function findActiveLandmarkElement() {
|
|
4441
|
+
let currentElement = document.activeElement, landmarkElement = null;
|
|
4442
|
+
for (; currentElement; ) {
|
|
4443
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-sb-landmark")) {
|
|
4444
|
+
landmarkElement = currentElement;
|
|
4445
|
+
break;
|
|
4446
|
+
}
|
|
4447
|
+
currentElement = currentElement.parentElement;
|
|
4448
|
+
}
|
|
4449
|
+
return landmarkElement;
|
|
4450
|
+
}
|
|
4451
|
+
function useLandmarkIndicator() {
|
|
4452
|
+
let theme = useTheme(), currentAnimationRef = useRef(null);
|
|
4453
|
+
useEffect(() => {
|
|
4454
|
+
let handleKeyDown = (e2) => {
|
|
4455
|
+
if (e2.key !== "F6")
|
|
4456
|
+
return;
|
|
4457
|
+
let landmarkElement = findActiveLandmarkElement();
|
|
4458
|
+
if (!landmarkElement)
|
|
4459
|
+
return;
|
|
4460
|
+
currentAnimationRef.current && (currentAnimationRef.current.cancel(), currentAnimationRef.current = null);
|
|
4461
|
+
let animation = landmarkElement.animate(
|
|
4462
|
+
[{ border: `2px solid ${theme.color.primary}` }, { border: "2px solid transparent" }],
|
|
4463
|
+
{
|
|
4464
|
+
duration: 1500,
|
|
4465
|
+
pseudoElement: "::after"
|
|
4466
|
+
}
|
|
4467
|
+
);
|
|
4468
|
+
currentAnimationRef.current = animation, animation.onfinish = () => {
|
|
4469
|
+
currentAnimationRef.current = null;
|
|
4470
|
+
};
|
|
4471
|
+
};
|
|
4472
|
+
return document.addEventListener("keydown", handleKeyDown, { capture: !0 }), () => {
|
|
4473
|
+
document.removeEventListener("keydown", handleKeyDown, { capture: !0 });
|
|
4474
|
+
};
|
|
4475
|
+
}, [theme.color.primary]);
|
|
4476
|
+
}
|
|
4477
|
+
|
|
3952
4478
|
// src/manager/components/layout/Layout.tsx
|
|
3953
4479
|
var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state.navSize === other.navSize && state.bottomPanelHeight === other.bottomPanelHeight && state.rightPanelWidth === other.rightPanelWidth && state.panelPosition === other.panelPosition, useLayoutSyncingState = ({
|
|
3954
4480
|
api,
|
|
@@ -4008,7 +4534,7 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
|
|
|
4008
4534
|
showPanel,
|
|
4009
4535
|
isDragging
|
|
4010
4536
|
} = useLayoutSyncingState({ api, managerLayoutState, setManagerLayoutState, isDesktop, hasTab });
|
|
4011
|
-
return react_default.createElement(
|
|
4537
|
+
return useLandmarkIndicator(), react_default.createElement(
|
|
4012
4538
|
LayoutContainer,
|
|
4013
4539
|
{
|
|
4014
4540
|
navSize,
|
|
@@ -4134,11 +4660,14 @@ var MINIMUM_CONTENT_WIDTH_PX = 100, layoutStateIsEqual = (state, other) => state
|
|
|
4134
4660
|
}
|
|
4135
4661
|
);
|
|
4136
4662
|
|
|
4663
|
+
// src/manager/container/Panel.tsx
|
|
4664
|
+
init_react();
|
|
4665
|
+
|
|
4137
4666
|
// global-externals:storybook/internal/types
|
|
4138
4667
|
var types_default = __STORYBOOK_TYPES__, { Addon_TypesEnum, CoreWebpackCompiler, Feature, SupportedBuilder, SupportedFramework, SupportedLanguage, SupportedRenderer } = __STORYBOOK_TYPES__;
|
|
4139
4668
|
|
|
4140
4669
|
// src/core-events/index.ts
|
|
4141
|
-
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.OPEN_IN_EDITOR_REQUEST = "openInEditorRequest", events2.OPEN_IN_EDITOR_RESPONSE = "openInEditorResponse", events2.MANAGER_INERT_ATTRIBUTE_CHANGED = "managerInertAttributeChanged", events2))(events || {});
|
|
4670
|
+
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.OPEN_IN_EDITOR_REQUEST = "openInEditorRequest", events2.OPEN_IN_EDITOR_RESPONSE = "openInEditorResponse", events2.MANAGER_INERT_ATTRIBUTE_CHANGED = "managerInertAttributeChanged", events2))(events || {});
|
|
4142
4671
|
var {
|
|
4143
4672
|
CHANNEL_WS_DISCONNECT: CHANNEL_WS_DISCONNECT2,
|
|
4144
4673
|
CHANNEL_CREATED: CHANNEL_CREATED2,
|
|
@@ -4198,12 +4727,15 @@ var {
|
|
|
4198
4727
|
SAVE_STORY_RESPONSE: SAVE_STORY_RESPONSE2,
|
|
4199
4728
|
ARGTYPES_INFO_REQUEST: ARGTYPES_INFO_REQUEST2,
|
|
4200
4729
|
ARGTYPES_INFO_RESPONSE: ARGTYPES_INFO_RESPONSE2,
|
|
4730
|
+
GHOST_STORIES_REQUEST: GHOST_STORIES_REQUEST2,
|
|
4731
|
+
GHOST_STORIES_RESPONSE: GHOST_STORIES_RESPONSE2,
|
|
4201
4732
|
OPEN_IN_EDITOR_REQUEST: OPEN_IN_EDITOR_REQUEST2,
|
|
4202
4733
|
OPEN_IN_EDITOR_RESPONSE: OPEN_IN_EDITOR_RESPONSE2,
|
|
4203
4734
|
MANAGER_INERT_ATTRIBUTE_CHANGED: MANAGER_INERT_ATTRIBUTE_CHANGED2
|
|
4204
4735
|
} = events;
|
|
4205
4736
|
|
|
4206
4737
|
// src/manager/components/panel/Panel.tsx
|
|
4738
|
+
init_react();
|
|
4207
4739
|
var TabErrorBoundary = class extends Component {
|
|
4208
4740
|
constructor(props) {
|
|
4209
4741
|
super(props), this.state = { hasError: !1 };
|
|
@@ -4227,7 +4759,7 @@ var TabErrorBoundary = class extends Component {
|
|
|
4227
4759
|
let { children } = this.props;
|
|
4228
4760
|
return children;
|
|
4229
4761
|
}
|
|
4230
|
-
},
|
|
4762
|
+
}, Aside = styled.aside({
|
|
4231
4763
|
height: "100%",
|
|
4232
4764
|
display: "flex",
|
|
4233
4765
|
flexDirection: "column"
|
|
@@ -4278,8 +4810,11 @@ var PreRenderAddons = ({ panels }) => Object.entries(panels).map(([k2, v2]) => r
|
|
|
4278
4810
|
react_default.createElement(CloseIcon, null)
|
|
4279
4811
|
)),
|
|
4280
4812
|
[actions, isDesktop, panelPosition, setMobilePanelOpen, shortcuts]
|
|
4813
|
+
), asideRef = useRef(null), { landmarkProps } = useLandmark(
|
|
4814
|
+
{ "aria-labelledby": "storybook-panel-heading", role: "region" },
|
|
4815
|
+
asideRef
|
|
4281
4816
|
);
|
|
4282
|
-
return react_default.createElement(
|
|
4817
|
+
return react_default.createElement(Aside, { ref: asideRef, ...landmarkProps }, react_default.createElement("h2", { id: "storybook-panel-heading", className: "sb-sr-only" }, "Addon panel"), react_default.createElement(
|
|
4283
4818
|
StatelessTabsView,
|
|
4284
4819
|
{
|
|
4285
4820
|
id: "storybook-panel-root",
|
|
@@ -4342,8 +4877,21 @@ var Panel = (props) => {
|
|
|
4342
4877
|
}, Panel_default = Panel;
|
|
4343
4878
|
|
|
4344
4879
|
// src/manager/container/Preview.tsx
|
|
4880
|
+
init_react();
|
|
4345
4881
|
var import_memoizerific = __toESM(require_memoizerific(), 1);
|
|
4346
4882
|
|
|
4883
|
+
// src/manager/components/preview/Preview.tsx
|
|
4884
|
+
init_react();
|
|
4885
|
+
|
|
4886
|
+
// src/manager/components/preview/FramesRenderer.tsx
|
|
4887
|
+
init_react();
|
|
4888
|
+
|
|
4889
|
+
// src/manager/components/preview/Viewport.tsx
|
|
4890
|
+
init_react();
|
|
4891
|
+
|
|
4892
|
+
// src/viewport/useViewport.ts
|
|
4893
|
+
init_react();
|
|
4894
|
+
|
|
4347
4895
|
// src/viewport/constants.ts
|
|
4348
4896
|
var ADDON_ID = "storybook/viewport", PARAM_KEY = "viewport", PANEL_ID = `${ADDON_ID}/panel`, TOOL_ID = `${ADDON_ID}/tool`;
|
|
4349
4897
|
|
|
@@ -4522,6 +5070,7 @@ var URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/, V
|
|
|
4522
5070
|
};
|
|
4523
5071
|
|
|
4524
5072
|
// src/manager/components/preview/Iframe.tsx
|
|
5073
|
+
init_react();
|
|
4525
5074
|
var StyledIframe = styled.iframe(({ theme }) => ({
|
|
4526
5075
|
backgroundColor: theme.background.preview,
|
|
4527
5076
|
display: "block",
|
|
@@ -4552,6 +5101,7 @@ function IFrame(props) {
|
|
|
4552
5101
|
}
|
|
4553
5102
|
|
|
4554
5103
|
// src/manager/components/preview/NumericInput.tsx
|
|
5104
|
+
init_react();
|
|
4555
5105
|
var Wrapper = styled.div(
|
|
4556
5106
|
({ after: after2, before: before2, theme }) => ({
|
|
4557
5107
|
position: "relative",
|
|
@@ -4983,10 +5533,11 @@ var getActive = (refId, refs) => refId && refs[refId] ? `storybook-ref-${refId}`
|
|
|
4983
5533
|
refId: ref.id,
|
|
4984
5534
|
viewMode
|
|
4985
5535
|
}).previewHref);
|
|
4986
|
-
}), 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
|
|
5536
|
+
}), 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 })));
|
|
4987
5537
|
};
|
|
4988
5538
|
|
|
4989
5539
|
// src/manager/components/preview/Toolbar.tsx
|
|
5540
|
+
init_react();
|
|
4990
5541
|
var fullScreenMapper = ({ api, state }) => ({
|
|
4991
5542
|
toggle: api.toggleFullscreen,
|
|
4992
5543
|
isFullscreen: api.getIsFullscreen(),
|
|
@@ -5021,13 +5572,18 @@ var fullScreenMapper = ({ api, state }) => ({
|
|
|
5021
5572
|
tabs,
|
|
5022
5573
|
tabState
|
|
5023
5574
|
}) {
|
|
5575
|
+
let sectionRef = useRef(null), { landmarkProps } = useLandmark(
|
|
5576
|
+
{ "aria-labelledby": "sb-preview-toolbar-title", role: "region" },
|
|
5577
|
+
sectionRef
|
|
5578
|
+
);
|
|
5024
5579
|
return isShown && (tabs || tools || toolsExtra) ? react_default.createElement(
|
|
5025
5580
|
StyledSection,
|
|
5026
5581
|
{
|
|
5027
5582
|
className: "sb-bar",
|
|
5028
5583
|
key: "toolbar",
|
|
5029
5584
|
"data-testid": "sb-preview-toolbar",
|
|
5030
|
-
|
|
5585
|
+
ref: sectionRef,
|
|
5586
|
+
...landmarkProps
|
|
5031
5587
|
},
|
|
5032
5588
|
react_default.createElement("h2", { id: "sb-preview-toolbar-title", className: "sb-sr-only" }, "Toolbar"),
|
|
5033
5589
|
tabs.length > 1 ? react_default.createElement(react_default.Fragment, null, react_default.createElement(TabList, { state: tabState }), react_default.createElement(Separator, null)) : null,
|
|
@@ -5088,14 +5644,17 @@ var StyledSection = styled.section(({ theme }) => ({
|
|
|
5088
5644
|
alignItems: "center"
|
|
5089
5645
|
});
|
|
5090
5646
|
|
|
5647
|
+
// src/manager/components/preview/Wrappers.tsx
|
|
5648
|
+
init_react();
|
|
5649
|
+
|
|
5091
5650
|
// src/manager/components/preview/utils/components.ts
|
|
5092
|
-
var PreviewContainer = styled.
|
|
5651
|
+
var PreviewContainer = styled.div({
|
|
5093
5652
|
display: "flex",
|
|
5094
5653
|
flexDirection: "column",
|
|
5095
5654
|
width: "100%",
|
|
5096
5655
|
height: "100%",
|
|
5097
5656
|
overflow: "hidden"
|
|
5098
|
-
}), FrameWrap = styled.
|
|
5657
|
+
}), FrameWrap = styled.main({
|
|
5099
5658
|
overflow: "auto",
|
|
5100
5659
|
width: "100%",
|
|
5101
5660
|
zIndex: 3,
|
|
@@ -5163,7 +5722,11 @@ var ApplyWrappers = ({
|
|
|
5163
5722
|
}
|
|
5164
5723
|
];
|
|
5165
5724
|
|
|
5725
|
+
// src/manager/components/preview/tools/zoom.tsx
|
|
5726
|
+
init_react();
|
|
5727
|
+
|
|
5166
5728
|
// src/manager/components/Shortcut.tsx
|
|
5729
|
+
init_react();
|
|
5167
5730
|
var Wrapper2 = styled.span(({ theme }) => ({
|
|
5168
5731
|
display: "inline-flex",
|
|
5169
5732
|
alignItems: "center",
|
|
@@ -5361,7 +5924,7 @@ var canvasMapper = ({ state, api }) => ({
|
|
|
5361
5924
|
});
|
|
5362
5925
|
tabs.length > 1 && deprecate("Addon tabs are deprecated and will be removed in Storybook 11.");
|
|
5363
5926
|
let tabContent = tabs.find((tab) => tab.id === tabId)?.render, shouldScale = viewMode === "story", { showToolbar } = options2, customisedShowToolbar = api.getShowToolbarWithCustomisations(showToolbar), previousStoryId = useRef(storyId);
|
|
5364
|
-
|
|
5927
|
+
useEffect(() => {
|
|
5365
5928
|
if (entry && viewMode) {
|
|
5366
5929
|
if (storyId === previousStoryId.current)
|
|
5367
5930
|
return;
|
|
@@ -5374,7 +5937,12 @@ var canvasMapper = ({ state, api }) => ({
|
|
|
5374
5937
|
});
|
|
5375
5938
|
}
|
|
5376
5939
|
}
|
|
5377
|
-
}, [entry, viewMode, storyId, api])
|
|
5940
|
+
}, [entry, viewMode, storyId, api]);
|
|
5941
|
+
let mainRef = useRef(null), { landmarkProps } = useLandmark(
|
|
5942
|
+
{ "aria-labelledby": "main-preview-heading", role: "main" },
|
|
5943
|
+
mainRef
|
|
5944
|
+
);
|
|
5945
|
+
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(
|
|
5378
5946
|
ToolbarComp,
|
|
5379
5947
|
{
|
|
5380
5948
|
key: "tools",
|
|
@@ -5384,7 +5952,7 @@ var canvasMapper = ({ state, api }) => ({
|
|
|
5384
5952
|
tools,
|
|
5385
5953
|
toolsExtra
|
|
5386
5954
|
}
|
|
5387
|
-
), react_default.createElement(FrameWrap, {
|
|
5955
|
+
), 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 }))))));
|
|
5388
5956
|
});
|
|
5389
5957
|
var Canvas = ({ baseUrl, withLoader, wrappers }) => react_default.createElement(Consumer, { filter: canvasMapper }, ({
|
|
5390
5958
|
api,
|
|
@@ -5450,6 +6018,7 @@ function filterTabs(panels, parameters) {
|
|
|
5450
6018
|
}
|
|
5451
6019
|
|
|
5452
6020
|
// src/manager/components/preview/tools/addons.tsx
|
|
6021
|
+
init_react();
|
|
5453
6022
|
var menuMapper = ({ api, state }) => ({
|
|
5454
6023
|
isVisible: api.getIsPanelShown(),
|
|
5455
6024
|
singleStory: state.singleStory,
|
|
@@ -5474,6 +6043,7 @@ var menuMapper = ({ api, state }) => ({
|
|
|
5474
6043
|
};
|
|
5475
6044
|
|
|
5476
6045
|
// src/manager/components/preview/tools/menu.tsx
|
|
6046
|
+
init_react();
|
|
5477
6047
|
var menuMapper2 = ({ api, state }) => ({
|
|
5478
6048
|
isVisible: api.getIsNavShown(),
|
|
5479
6049
|
singleStory: state.singleStory,
|
|
@@ -5498,6 +6068,7 @@ var menuMapper2 = ({ api, state }) => ({
|
|
|
5498
6068
|
};
|
|
5499
6069
|
|
|
5500
6070
|
// src/manager/components/preview/tools/open-in-editor.tsx
|
|
6071
|
+
init_react();
|
|
5501
6072
|
var mapper2 = ({ state, api }) => {
|
|
5502
6073
|
let { storyId, refId } = state, entry = api.getData(storyId, refId);
|
|
5503
6074
|
return {
|
|
@@ -5529,6 +6100,7 @@ var mapper2 = ({ state, api }) => {
|
|
|
5529
6100
|
};
|
|
5530
6101
|
|
|
5531
6102
|
// src/manager/components/preview/tools/remount.tsx
|
|
6103
|
+
init_react();
|
|
5532
6104
|
var StyledAnimatedButton = styled(Button)(({ theme, animating, disabled }) => ({
|
|
5533
6105
|
opacity: disabled ? 0.5 : 1,
|
|
5534
6106
|
svg: {
|
|
@@ -5571,9 +6143,11 @@ var StyledAnimatedButton = styled(Button)(({ theme, animating, disabled }) => ({
|
|
|
5571
6143
|
};
|
|
5572
6144
|
|
|
5573
6145
|
// src/manager/components/preview/tools/share.tsx
|
|
6146
|
+
init_react();
|
|
5574
6147
|
var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
|
|
5575
6148
|
|
|
5576
6149
|
// ../../node_modules/qrcode.react/lib/esm/index.js
|
|
6150
|
+
init_react();
|
|
5577
6151
|
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) => {
|
|
5578
6152
|
for (var prop in b2 || (b2 = {}))
|
|
5579
6153
|
__hasOwnProp2.call(b2, prop) && __defNormalProp(a2, prop, b2[prop]);
|
|
@@ -6537,7 +7111,17 @@ var defaultTabs = [createCanvasTab()], defaultTools = [menuTool, remountTool], d
|
|
|
6537
7111
|
return react_default.createElement(Consumer, { filter: mapper4 }, (fromState) => react_default.createElement(Preview, { ...props, ...fromState }));
|
|
6538
7112
|
}), Preview_default = PreviewConnected;
|
|
6539
7113
|
|
|
7114
|
+
// src/manager/container/Sidebar.tsx
|
|
7115
|
+
init_react();
|
|
7116
|
+
|
|
7117
|
+
// src/manager/components/sidebar/Sidebar.tsx
|
|
7118
|
+
init_react();
|
|
7119
|
+
|
|
7120
|
+
// src/manager/components/sidebar/ChecklistWidget.tsx
|
|
7121
|
+
init_react();
|
|
7122
|
+
|
|
6540
7123
|
// src/manager/components/Optional/Optional.tsx
|
|
7124
|
+
init_react();
|
|
6541
7125
|
var Wrapper3 = styled.div({
|
|
6542
7126
|
display: "inline-grid",
|
|
6543
7127
|
gridTemplateColumns: "max-content",
|
|
@@ -6563,6 +7147,7 @@ var Wrapper3 = styled.div({
|
|
|
6563
7147
|
};
|
|
6564
7148
|
|
|
6565
7149
|
// src/manager/components/Particles/Particles.tsx
|
|
7150
|
+
init_react();
|
|
6566
7151
|
var Shape = styled.svg(({ color: color2 }) => ({
|
|
6567
7152
|
fill: color2,
|
|
6568
7153
|
position: "absolute",
|
|
@@ -6641,6 +7226,7 @@ var Shape = styled.svg(({ color: color2 }) => ({
|
|
|
6641
7226
|
});
|
|
6642
7227
|
|
|
6643
7228
|
// src/manager/components/TextFlip.tsx
|
|
7229
|
+
init_react();
|
|
6644
7230
|
var slideIn2 = keyframes({
|
|
6645
7231
|
from: {
|
|
6646
7232
|
transform: "translateY(var(--slide-in-from))",
|
|
@@ -6699,6 +7285,9 @@ function numericCompare(a2, b2) {
|
|
|
6699
7285
|
return Number.isNaN(na) || Number.isNaN(nb) ? a2.localeCompare(b2, void 0, { numeric: !0 }) > 0 : na > nb;
|
|
6700
7286
|
}
|
|
6701
7287
|
|
|
7288
|
+
// src/manager/components/sidebar/useChecklist.ts
|
|
7289
|
+
init_react();
|
|
7290
|
+
|
|
6702
7291
|
// ../../node_modules/es-toolkit/dist/function/debounce.mjs
|
|
6703
7292
|
function debounce(func, debounceMs, { signal, edges } = {}) {
|
|
6704
7293
|
let pendingThis, pendingArgs = null, leading = edges != null && edges.includes("leading"), trailing = edges == null || edges.includes("trailing"), invoke = () => {
|
|
@@ -6770,6 +7359,9 @@ function throttle(func, throttleMs, { signal, edges = ["leading", "trailing"] }
|
|
|
6770
7359
|
return throttled.cancel = debounced.cancel, throttled.flush = debounced.flush, throttled;
|
|
6771
7360
|
}
|
|
6772
7361
|
|
|
7362
|
+
// src/shared/checklist-store/checklistData.tsx
|
|
7363
|
+
init_react();
|
|
7364
|
+
|
|
6773
7365
|
// ../addons/a11y/src/constants.ts
|
|
6774
7366
|
var ADDON_ID2 = "storybook/a11y", PANEL_ID2 = `${ADDON_ID2}/panel`;
|
|
6775
7367
|
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`;
|
|
@@ -6840,6 +7432,12 @@ var SUPPORTED_FRAMEWORKS = [
|
|
|
6840
7432
|
var ADDON_ID6 = "storybook/docs", PANEL_ID4 = `${ADDON_ID6}/panel`;
|
|
6841
7433
|
var SNIPPET_RENDERED = `${ADDON_ID6}/snippet-rendered`;
|
|
6842
7434
|
|
|
7435
|
+
// src/manager/components/TourGuide/TourGuide.tsx
|
|
7436
|
+
init_react();
|
|
7437
|
+
|
|
7438
|
+
// ../../node_modules/react-joyride/dist/index.mjs
|
|
7439
|
+
init_react();
|
|
7440
|
+
|
|
6843
7441
|
// ../../node_modules/@gilbarbara/deep-equal/dist/index.mjs
|
|
6844
7442
|
function isOfType(type) {
|
|
6845
7443
|
return (value) => typeof value === type;
|
|
@@ -7170,11 +7768,17 @@ function treeChanges(previousData, data) {
|
|
|
7170
7768
|
|
|
7171
7769
|
// ../../node_modules/react-joyride/dist/index.mjs
|
|
7172
7770
|
var import_scroll = __toESM(require_scroll(), 1), import_scrollparent = __toESM(require_scrollparent(), 1);
|
|
7771
|
+
init_react();
|
|
7173
7772
|
var import_react_innertext = __toESM(require_react_innertext(), 1);
|
|
7174
7773
|
var import_deepmerge2 = __toESM(require_cjs(), 1);
|
|
7175
7774
|
var import_deepmerge3 = __toESM(require_cjs(), 1);
|
|
7775
|
+
init_react();
|
|
7776
|
+
init_react();
|
|
7777
|
+
init_react();
|
|
7778
|
+
init_react();
|
|
7176
7779
|
|
|
7177
7780
|
// ../../node_modules/react-floater/es/index.js
|
|
7781
|
+
init_react();
|
|
7178
7782
|
var import_prop_types2 = __toESM(require_prop_types());
|
|
7179
7783
|
|
|
7180
7784
|
// ../../node_modules/popper.js/dist/esm/popper.js
|
|
@@ -9251,6 +9855,10 @@ _defineProperty(ReactFloater, "propTypes", { autoOpen: import_prop_types2.defaul
|
|
|
9251
9855
|
_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 } });
|
|
9252
9856
|
|
|
9253
9857
|
// ../../node_modules/react-joyride/dist/index.mjs
|
|
9858
|
+
init_react();
|
|
9859
|
+
init_react();
|
|
9860
|
+
init_react();
|
|
9861
|
+
init_react();
|
|
9254
9862
|
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 = {
|
|
9255
9863
|
INIT: "init",
|
|
9256
9864
|
START: "start",
|
|
@@ -10700,6 +11308,7 @@ __publicField(Joyride, "defaultProps", defaultProps);
|
|
|
10700
11308
|
var components_default2 = Joyride;
|
|
10701
11309
|
|
|
10702
11310
|
// src/manager/components/TourGuide/HighlightElement.tsx
|
|
11311
|
+
init_react();
|
|
10703
11312
|
var HIGHLIGHT_KEYFRAMES_ID = "storybook-highlight-element-keyframes", keyframes2 = `
|
|
10704
11313
|
@keyframes sb-highlight-pulsate {
|
|
10705
11314
|
0% {
|
|
@@ -10763,6 +11372,7 @@ function HighlightElement({
|
|
|
10763
11372
|
}
|
|
10764
11373
|
|
|
10765
11374
|
// src/manager/components/TourGuide/TourTooltip.tsx
|
|
11375
|
+
init_react();
|
|
10766
11376
|
var ONBOARDING_ARROW_STYLE_ID = "storybook-onboarding-arrow-style", TooltipBody = styled.div`
|
|
10767
11377
|
padding: 15px;
|
|
10768
11378
|
border-radius: 5px;
|
|
@@ -10941,6 +11551,7 @@ TourGuide.render = (props) => {
|
|
|
10941
11551
|
};
|
|
10942
11552
|
|
|
10943
11553
|
// src/manager/hooks/useLocation.ts
|
|
11554
|
+
init_react();
|
|
10944
11555
|
var LocationMonitor = {
|
|
10945
11556
|
_currentHref: globalThis.window?.location.href ?? "",
|
|
10946
11557
|
_intervalId: null,
|
|
@@ -12059,7 +12670,11 @@ var fadeScaleIn = keyframes`
|
|
|
12059
12670
|
)));
|
|
12060
12671
|
};
|
|
12061
12672
|
|
|
12673
|
+
// src/manager/components/sidebar/CreateNewStoryFileModal.tsx
|
|
12674
|
+
init_react();
|
|
12675
|
+
|
|
12062
12676
|
// src/manager/hooks/useDebounce.ts
|
|
12677
|
+
init_react();
|
|
12063
12678
|
function useDebounce(value, delay2) {
|
|
12064
12679
|
let [debouncedValue, setDebouncedValue] = useState(value);
|
|
12065
12680
|
return useEffect(() => {
|
|
@@ -12072,7 +12687,11 @@ function useDebounce(value, delay2) {
|
|
|
12072
12687
|
}, [value, delay2]), debouncedValue;
|
|
12073
12688
|
}
|
|
12074
12689
|
|
|
12690
|
+
// src/manager/components/sidebar/FileSearchModal.tsx
|
|
12691
|
+
init_react();
|
|
12692
|
+
|
|
12075
12693
|
// src/manager/hooks/useMeasure.tsx
|
|
12694
|
+
init_react();
|
|
12076
12695
|
function useMeasure() {
|
|
12077
12696
|
let [dimensions, setDimensions] = react_default.useState({
|
|
12078
12697
|
width: null,
|
|
@@ -12091,6 +12710,12 @@ function useMeasure() {
|
|
|
12091
12710
|
}, []), dimensions];
|
|
12092
12711
|
}
|
|
12093
12712
|
|
|
12713
|
+
// src/manager/components/sidebar/FileSearchList.tsx
|
|
12714
|
+
init_react();
|
|
12715
|
+
|
|
12716
|
+
// ../../node_modules/@tanstack/react-virtual/dist/esm/index.js
|
|
12717
|
+
init_react();
|
|
12718
|
+
|
|
12094
12719
|
// ../../node_modules/@tanstack/virtual-core/dist/esm/utils.js
|
|
12095
12720
|
function memo2(getDeps, fn, opts) {
|
|
12096
12721
|
let deps = opts.initialDeps ?? [], result;
|
|
@@ -12643,6 +13268,7 @@ function useVirtualizer(options2) {
|
|
|
12643
13268
|
}
|
|
12644
13269
|
|
|
12645
13270
|
// src/manager/components/sidebar/FIleSearchList.utils.tsx
|
|
13271
|
+
init_react();
|
|
12646
13272
|
var useArrowKeyNavigation = ({
|
|
12647
13273
|
parentRef,
|
|
12648
13274
|
rowVirtualizer,
|
|
@@ -12858,6 +13484,7 @@ var FileListWrapper = styled("div")(({ theme }) => ({
|
|
|
12858
13484
|
}));
|
|
12859
13485
|
|
|
12860
13486
|
// src/manager/components/sidebar/FileSearchListSkeleton.tsx
|
|
13487
|
+
init_react();
|
|
12861
13488
|
var FileListItemContentWrapperSkeleton = styled("div")(({ theme }) => ({
|
|
12862
13489
|
display: "flex",
|
|
12863
13490
|
alignItems: "flex-start",
|
|
@@ -13214,78 +13841,6 @@ var MODAL_HEIGHT = 418, ModalStyled = styled(Modal)(() => ({
|
|
|
13214
13841
|
};
|
|
13215
13842
|
|
|
13216
13843
|
// src/manager/components/sidebar/FileSearchModal.utils.tsx
|
|
13217
|
-
function extractSeededRequiredArgs(argTypes) {
|
|
13218
|
-
return Object.keys(argTypes).reduce(
|
|
13219
|
-
(acc, key) => {
|
|
13220
|
-
let argType = argTypes[key];
|
|
13221
|
-
if (typeof argType.control == "object" && "type" in argType.control)
|
|
13222
|
-
switch (argType.control.type) {
|
|
13223
|
-
case "object":
|
|
13224
|
-
acc[key] = {};
|
|
13225
|
-
break;
|
|
13226
|
-
case "inline-radio":
|
|
13227
|
-
case "radio":
|
|
13228
|
-
case "inline-check":
|
|
13229
|
-
case "check":
|
|
13230
|
-
case "select":
|
|
13231
|
-
case "multi-select":
|
|
13232
|
-
acc[key] = argType.control.options?.[0];
|
|
13233
|
-
break;
|
|
13234
|
-
case "color":
|
|
13235
|
-
acc[key] = "#000000";
|
|
13236
|
-
break;
|
|
13237
|
-
default:
|
|
13238
|
-
break;
|
|
13239
|
-
}
|
|
13240
|
-
return setArgType(argType.type, acc, key), acc;
|
|
13241
|
-
},
|
|
13242
|
-
{}
|
|
13243
|
-
);
|
|
13244
|
-
}
|
|
13245
|
-
function setArgType(type, obj, objKey) {
|
|
13246
|
-
if (!(typeof type == "string" || !type.required))
|
|
13247
|
-
switch (type.name) {
|
|
13248
|
-
case "boolean":
|
|
13249
|
-
obj[objKey] = !0;
|
|
13250
|
-
break;
|
|
13251
|
-
case "number":
|
|
13252
|
-
obj[objKey] = 0;
|
|
13253
|
-
break;
|
|
13254
|
-
case "string":
|
|
13255
|
-
obj[objKey] = objKey;
|
|
13256
|
-
break;
|
|
13257
|
-
case "array":
|
|
13258
|
-
obj[objKey] = [];
|
|
13259
|
-
break;
|
|
13260
|
-
case "object":
|
|
13261
|
-
obj[objKey] = {}, Object.entries(type.value ?? {}).forEach(([typeKey, typeVal]) => {
|
|
13262
|
-
setArgType(typeVal, obj[objKey], typeKey);
|
|
13263
|
-
});
|
|
13264
|
-
break;
|
|
13265
|
-
case "function":
|
|
13266
|
-
obj[objKey] = () => {
|
|
13267
|
-
};
|
|
13268
|
-
break;
|
|
13269
|
-
case "intersection":
|
|
13270
|
-
type.value?.every((v2) => v2.name === "object") && (obj[objKey] = {}, type.value?.forEach((typeVal) => {
|
|
13271
|
-
typeVal.name === "object" && Object.entries(typeVal.value ?? {}).forEach(([typeValKey, typeValVal]) => {
|
|
13272
|
-
setArgType(typeValVal, obj[objKey], typeValKey);
|
|
13273
|
-
});
|
|
13274
|
-
}));
|
|
13275
|
-
break;
|
|
13276
|
-
case "union":
|
|
13277
|
-
type.value?.[0] !== void 0 && setArgType(type.value[0], obj, objKey);
|
|
13278
|
-
break;
|
|
13279
|
-
case "enum":
|
|
13280
|
-
type.value?.[0] !== void 0 && (obj[objKey] = type.value?.[0]);
|
|
13281
|
-
break;
|
|
13282
|
-
case "other":
|
|
13283
|
-
typeof type.value == "string" && type.value === "tuple" && (obj[objKey] = []);
|
|
13284
|
-
break;
|
|
13285
|
-
default:
|
|
13286
|
-
break;
|
|
13287
|
-
}
|
|
13288
|
-
}
|
|
13289
13844
|
async function trySelectNewStory(selectStory, storyId, attempt = 1) {
|
|
13290
13845
|
if (attempt > 10)
|
|
13291
13846
|
throw new Error("We could not select the new story. Please try again.");
|
|
@@ -13297,10 +13852,10 @@ async function trySelectNewStory(selectStory, storyId, attempt = 1) {
|
|
|
13297
13852
|
}
|
|
13298
13853
|
|
|
13299
13854
|
// src/manager/components/sidebar/CreateNewStoryFileModal.tsx
|
|
13300
|
-
var
|
|
13855
|
+
var isRendererReact = scope.STORYBOOK_RENDERER === "react", CreateNewStoryFileModal = ({ open, onOpenChange }) => {
|
|
13301
13856
|
let [isLoading, setLoading] = useState(!1), [fileSearchQuery, setFileSearchQuery] = useState(""), fileSearchQueryDebounced = useDebounce(fileSearchQuery, 600), fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced), emittedValue = useRef(null), [error, setError] = useState(
|
|
13302
13857
|
null
|
|
13303
|
-
), api = useStorybookApi(), [searchResults, setSearchResults] = useState(null), handleSuccessfullyCreatedStory = useCallback(
|
|
13858
|
+
), api = useStorybookApi(), hasRunGhostStoriesFlow = useRef(!1), [searchResults, setSearchResults] = useState(null), handleSuccessfullyCreatedStory = useCallback(
|
|
13304
13859
|
(componentExportName) => {
|
|
13305
13860
|
api.addNotification({
|
|
13306
13861
|
id: "create-new-story-file-success",
|
|
@@ -13351,24 +13906,7 @@ var stringifyArgs = (args) => JSON.stringify(args, (_2, value) => typeof value =
|
|
|
13351
13906
|
});
|
|
13352
13907
|
setError(null);
|
|
13353
13908
|
let storyId = createNewStoryResult.storyId;
|
|
13354
|
-
await trySelectNewStory(api.selectStory, storyId);
|
|
13355
|
-
try {
|
|
13356
|
-
let argTypes = (await experimental_requestResponse(channel, ARGTYPES_INFO_REQUEST, ARGTYPES_INFO_RESPONSE, {
|
|
13357
|
-
storyId
|
|
13358
|
-
})).argTypes, requiredArgs = extractSeededRequiredArgs(argTypes);
|
|
13359
|
-
await experimental_requestResponse(
|
|
13360
|
-
channel,
|
|
13361
|
-
SAVE_STORY_REQUEST,
|
|
13362
|
-
SAVE_STORY_RESPONSE,
|
|
13363
|
-
{
|
|
13364
|
-
args: stringifyArgs(requiredArgs),
|
|
13365
|
-
importPath: createNewStoryResult.storyFilePath,
|
|
13366
|
-
csfId: storyId
|
|
13367
|
-
}
|
|
13368
|
-
);
|
|
13369
|
-
} catch {
|
|
13370
|
-
}
|
|
13371
|
-
handleSuccessfullyCreatedStory(componentExportName), handleFileSearch();
|
|
13909
|
+
await trySelectNewStory(api.selectStory, storyId), handleSuccessfullyCreatedStory(componentExportName), handleFileSearch();
|
|
13372
13910
|
} catch (e2) {
|
|
13373
13911
|
switch (e2?.payload?.type) {
|
|
13374
13912
|
case "STORY_FILE_EXISTS":
|
|
@@ -13383,9 +13921,15 @@ var stringifyArgs = (args) => JSON.stringify(args, (_2, value) => typeof value =
|
|
|
13383
13921
|
},
|
|
13384
13922
|
[api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch, handleStoryAlreadyExists]
|
|
13385
13923
|
);
|
|
13386
|
-
|
|
13924
|
+
useEffect(() => {
|
|
13387
13925
|
setError(null);
|
|
13388
|
-
}, [fileSearchQueryDeferred]), useEffect(() => handleFileSearch(), [handleFileSearch])
|
|
13926
|
+
}, [fileSearchQueryDeferred]), useEffect(() => handleFileSearch(), [handleFileSearch]);
|
|
13927
|
+
let executeGhostStoriesFlow = useCallback(async () => {
|
|
13928
|
+
addons.getChannel().emit(GHOST_STORIES_REQUEST);
|
|
13929
|
+
}, []);
|
|
13930
|
+
return useEffect(() => {
|
|
13931
|
+
open && isRendererReact && !hasRunGhostStoriesFlow.current && (hasRunGhostStoriesFlow.current = !0, executeGhostStoriesFlow());
|
|
13932
|
+
}, [open, executeGhostStoriesFlow]), react_default.createElement(
|
|
13389
13933
|
FileSearchModal,
|
|
13390
13934
|
{
|
|
13391
13935
|
error,
|
|
@@ -13402,7 +13946,11 @@ var stringifyArgs = (args) => JSON.stringify(args, (_2, value) => typeof value =
|
|
|
13402
13946
|
);
|
|
13403
13947
|
};
|
|
13404
13948
|
|
|
13949
|
+
// src/manager/components/sidebar/Explorer.tsx
|
|
13950
|
+
init_react();
|
|
13951
|
+
|
|
13405
13952
|
// src/manager/components/sidebar/HighlightStyles.tsx
|
|
13953
|
+
init_react();
|
|
13406
13954
|
var HighlightStyles = ({ refId, itemId }) => react_default.createElement(
|
|
13407
13955
|
Global,
|
|
13408
13956
|
{
|
|
@@ -13425,6 +13973,9 @@ var HighlightStyles = ({ refId, itemId }) => react_default.createElement(
|
|
|
13425
13973
|
}
|
|
13426
13974
|
);
|
|
13427
13975
|
|
|
13976
|
+
// src/manager/components/sidebar/Refs.tsx
|
|
13977
|
+
init_react();
|
|
13978
|
+
|
|
13428
13979
|
// src/manager/utils/tree.ts
|
|
13429
13980
|
var import_memoizerific2 = __toESM(require_memoizerific(), 1);
|
|
13430
13981
|
var { document: document2, window: globalWindow } = scope, createId = (itemId, refId) => !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`, getLink = (item, refId) => `${document2.location.pathname}?path=/${item.type}/${createId(item.id, refId)}`;
|
|
@@ -13475,7 +14026,11 @@ var scrollIntoView = (element, center = !1) => {
|
|
|
13475
14026
|
}
|
|
13476
14027
|
}, 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);
|
|
13477
14028
|
|
|
14029
|
+
// src/manager/components/sidebar/RefBlocks.tsx
|
|
14030
|
+
init_react();
|
|
14031
|
+
|
|
13478
14032
|
// src/manager/components/sidebar/Loader.tsx
|
|
14033
|
+
init_react();
|
|
13479
14034
|
var LOADER_SEQUENCE = [0, 0, 1, 1, 2, 3, 3, 3, 1, 1, 1, 2, 2, 2, 3], Loadingitem = styled.div(
|
|
13480
14035
|
{
|
|
13481
14036
|
cursor: "progress",
|
|
@@ -13599,6 +14154,7 @@ var { window: globalWindow2 } = scope, TextStyle = styled.div(({ theme }) => ({
|
|
|
13599
14154
|
), " ", "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 }));
|
|
13600
14155
|
|
|
13601
14156
|
// src/manager/components/sidebar/RefIndicator.tsx
|
|
14157
|
+
init_react();
|
|
13602
14158
|
var { document: document3, window: globalWindow3 } = scope, IndicatorPlacement = styled.div(({ theme }) => ({
|
|
13603
14159
|
height: 16,
|
|
13604
14160
|
display: "flex",
|
|
@@ -13754,10 +14310,15 @@ var { document: document3, window: globalWindow3 } = scope, IndicatorPlacement =
|
|
|
13754
14310
|
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.")));
|
|
13755
14311
|
};
|
|
13756
14312
|
|
|
14313
|
+
// src/manager/components/sidebar/Tree.tsx
|
|
14314
|
+
init_react();
|
|
14315
|
+
|
|
13757
14316
|
// src/manager/utils/status.tsx
|
|
14317
|
+
init_react();
|
|
13758
14318
|
var import_memoizerific3 = __toESM(require_memoizerific(), 1);
|
|
13759
14319
|
|
|
13760
14320
|
// src/manager/components/sidebar/IconSymbols.tsx
|
|
14321
|
+
init_react();
|
|
13761
14322
|
var Svg2 = styled.svg`
|
|
13762
14323
|
position: absolute;
|
|
13763
14324
|
width: 0;
|
|
@@ -13886,9 +14447,11 @@ function getGroupStatus(collapsedData, allStatuses) {
|
|
|
13886
14447
|
}
|
|
13887
14448
|
|
|
13888
14449
|
// src/manager/components/sidebar/ContextMenu.tsx
|
|
14450
|
+
init_react();
|
|
13889
14451
|
var import_copy_to_clipboard2 = __toESM(require_copy_to_clipboard(), 1);
|
|
13890
14452
|
|
|
13891
14453
|
// src/manager/components/sidebar/StatusButton.tsx
|
|
14454
|
+
init_react();
|
|
13892
14455
|
var withStatusColor = ({ theme, status }) => {
|
|
13893
14456
|
let defaultColor = theme.base === "light" ? curriedTransparentize$1(0.3, theme.color.defaultText) : curriedTransparentize$1(0.6, theme.color.defaultText);
|
|
13894
14457
|
return {
|
|
@@ -13941,6 +14504,7 @@ var withStatusColor = ({ theme, status }) => {
|
|
|
13941
14504
|
StatusButton.displayName = "StatusButton";
|
|
13942
14505
|
|
|
13943
14506
|
// src/manager/components/sidebar/StatusContext.tsx
|
|
14507
|
+
init_react();
|
|
13944
14508
|
var StatusContext = createContext({});
|
|
13945
14509
|
|
|
13946
14510
|
// src/manager/components/sidebar/ContextMenu.tsx
|
|
@@ -14059,7 +14623,11 @@ function generateTestProviderLinks(registeredTestProviders, context) {
|
|
|
14059
14623
|
}).filter(Boolean);
|
|
14060
14624
|
}
|
|
14061
14625
|
|
|
14626
|
+
// src/manager/components/sidebar/TreeNode.tsx
|
|
14627
|
+
init_react();
|
|
14628
|
+
|
|
14062
14629
|
// src/manager/components/sidebar/components/CollapseIcon.tsx
|
|
14630
|
+
init_react();
|
|
14063
14631
|
var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
|
|
14064
14632
|
width: 8,
|
|
14065
14633
|
height: 8,
|
|
@@ -14173,6 +14741,9 @@ var TypeIcon2 = styled.svg(
|
|
|
14173
14741
|
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);
|
|
14174
14742
|
});
|
|
14175
14743
|
|
|
14744
|
+
// src/manager/components/sidebar/useExpanded.ts
|
|
14745
|
+
init_react();
|
|
14746
|
+
|
|
14176
14747
|
// src/manager/keybinding.ts
|
|
14177
14748
|
var codeToKeyMap = {
|
|
14178
14749
|
// event.code => event.key
|
|
@@ -14455,7 +15026,7 @@ var statusOrder = [
|
|
|
14455
15026
|
},
|
|
14456
15027
|
item.renderLabel?.(item, api) || item.name
|
|
14457
15028
|
),
|
|
14458
|
-
isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to
|
|
15029
|
+
isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
|
|
14459
15030
|
contextMenu.node,
|
|
14460
15031
|
icon ? react_default.createElement(
|
|
14461
15032
|
StatusButton,
|
|
@@ -14560,7 +15131,7 @@ var statusOrder = [
|
|
|
14560
15131
|
},
|
|
14561
15132
|
item.renderLabel?.(item, api) || item.name
|
|
14562
15133
|
),
|
|
14563
|
-
isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to
|
|
15134
|
+
isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
|
|
14564
15135
|
contextMenu.node,
|
|
14565
15136
|
showBranchStatus ? react_default.createElement(
|
|
14566
15137
|
StatusButton,
|
|
@@ -14602,7 +15173,7 @@ var statusOrder = [
|
|
|
14602
15173
|
},
|
|
14603
15174
|
item.renderLabel?.(item, api) || item.name
|
|
14604
15175
|
),
|
|
14605
|
-
isSelected && react_default.createElement(SkipToContentLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to
|
|
15176
|
+
isSelected && react_default.createElement(SkipToContentLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to content")),
|
|
14606
15177
|
contextMenu.node,
|
|
14607
15178
|
itemStatusButton
|
|
14608
15179
|
);
|
|
@@ -14757,7 +15328,7 @@ var statusOrder = [
|
|
|
14757
15328
|
setExpanded,
|
|
14758
15329
|
allStatuses
|
|
14759
15330
|
]);
|
|
14760
|
-
return react_default.createElement(StatusContext.Provider, { value: { data, allStatuses, groupStatus } }, react_default.createElement("div", { ref: containerRef },
|
|
15331
|
+
return react_default.createElement(StatusContext.Provider, { value: { data, allStatuses, groupStatus } }, react_default.createElement("div", { ref: containerRef }, treeItems));
|
|
14761
15332
|
});
|
|
14762
15333
|
|
|
14763
15334
|
// src/manager/components/sidebar/Refs.tsx
|
|
@@ -14854,6 +15425,7 @@ var Wrapper6 = styled.div(({ isMain }) => ({
|
|
|
14854
15425
|
});
|
|
14855
15426
|
|
|
14856
15427
|
// src/manager/components/sidebar/useHighlighted.ts
|
|
15428
|
+
init_react();
|
|
14857
15429
|
var { document: document5, window: globalWindow4 } = scope, fromSelection = (selection) => selection ? { itemId: selection.storyId, refId: selection.refId } : null, scrollToSelector = (selector, options2 = {}, _attempt = 1) => {
|
|
14858
15430
|
let { containerRef, center = !1, attempts = 3, delay: delay2 = 500 } = options2, element = (containerRef ? containerRef.current : document5)?.querySelector(selector);
|
|
14859
15431
|
element ? scrollIntoView(element, center) : _attempt <= attempts && setTimeout(scrollToSelector, delay2, selector, options2, _attempt + 1);
|
|
@@ -14917,23 +15489,34 @@ var Explorer = react_default.memo(function({
|
|
|
14917
15489
|
hasEntries,
|
|
14918
15490
|
isLoading,
|
|
14919
15491
|
isBrowsing,
|
|
15492
|
+
isHidden,
|
|
14920
15493
|
dataset,
|
|
14921
|
-
selected
|
|
15494
|
+
selected,
|
|
15495
|
+
...restProps
|
|
14922
15496
|
}) {
|
|
14923
15497
|
let containerRef = useRef(null), [highlighted, setHighlighted, highlightedRef] = useHighlighted({
|
|
14924
15498
|
containerRef,
|
|
14925
15499
|
isLoading,
|
|
14926
15500
|
isBrowsing,
|
|
14927
15501
|
selected
|
|
14928
|
-
})
|
|
15502
|
+
}), { landmarkProps } = useLandmark(
|
|
15503
|
+
{ "aria-labelledby": "storybook-explorer-tree-heading", role: "navigation" },
|
|
15504
|
+
containerRef
|
|
15505
|
+
);
|
|
14929
15506
|
return react_default.createElement(
|
|
14930
|
-
"
|
|
15507
|
+
"nav",
|
|
14931
15508
|
{
|
|
15509
|
+
hidden: isHidden || void 0,
|
|
15510
|
+
"aria-hidden": isHidden || void 0,
|
|
15511
|
+
className: isBrowsing ? void 0 : "sb-sr-only",
|
|
14932
15512
|
ref: containerRef,
|
|
14933
15513
|
id: "storybook-explorer-tree",
|
|
14934
15514
|
"data-highlighted-ref-id": highlighted?.refId,
|
|
14935
|
-
"data-highlighted-item-id": highlighted?.itemId
|
|
15515
|
+
"data-highlighted-item-id": highlighted?.itemId,
|
|
15516
|
+
...landmarkProps,
|
|
15517
|
+
...restProps
|
|
14936
15518
|
},
|
|
15519
|
+
react_default.createElement("h2", { id: "storybook-explorer-tree-heading", className: "sb-sr-only" }, "Stories"),
|
|
14937
15520
|
highlighted && react_default.createElement(HighlightStyles, { ...highlighted }),
|
|
14938
15521
|
dataset.entries.map(([refId, ref]) => react_default.createElement(
|
|
14939
15522
|
Ref,
|
|
@@ -14951,7 +15534,11 @@ var Explorer = react_default.memo(function({
|
|
|
14951
15534
|
);
|
|
14952
15535
|
});
|
|
14953
15536
|
|
|
15537
|
+
// src/manager/components/sidebar/Heading.tsx
|
|
15538
|
+
init_react();
|
|
15539
|
+
|
|
14954
15540
|
// src/manager/components/sidebar/Brand.tsx
|
|
15541
|
+
init_react();
|
|
14955
15542
|
var StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({
|
|
14956
15543
|
width: "auto",
|
|
14957
15544
|
height: "22px !important",
|
|
@@ -14984,6 +15571,7 @@ var StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({
|
|
|
14984
15571
|
});
|
|
14985
15572
|
|
|
14986
15573
|
// src/manager/components/sidebar/Menu.tsx
|
|
15574
|
+
init_react();
|
|
14987
15575
|
var buttonStyleAdditions = ({
|
|
14988
15576
|
highlighted,
|
|
14989
15577
|
isMobile: isMobile2,
|
|
@@ -15172,7 +15760,10 @@ var BrandArea = styled.div(({ theme }) => ({
|
|
|
15172
15760
|
isLoading,
|
|
15173
15761
|
onMenuClick,
|
|
15174
15762
|
...props
|
|
15175
|
-
}) => react_default.createElement(HeadingWrapper, { ...props }, skipLinkHref && react_default.createElement(SkipToCanvasLink, { ariaLabel: !1, asChild: !0 }, react_default.createElement("a", { href: skipLinkHref, tabIndex: 0 }, "Skip to
|
|
15763
|
+
}) => 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 }));
|
|
15764
|
+
|
|
15765
|
+
// src/manager/components/sidebar/Search.tsx
|
|
15766
|
+
init_react();
|
|
15176
15767
|
|
|
15177
15768
|
// ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
|
|
15178
15769
|
function _objectWithoutPropertiesLoose2(r3, e2) {
|
|
@@ -15187,6 +15778,7 @@ function _objectWithoutPropertiesLoose2(r3, e2) {
|
|
|
15187
15778
|
|
|
15188
15779
|
// ../../node_modules/downshift/dist/downshift.esm.js
|
|
15189
15780
|
var import_prop_types3 = __toESM(require_prop_types());
|
|
15781
|
+
init_react();
|
|
15190
15782
|
var import_react_is = __toESM(require_react_is());
|
|
15191
15783
|
|
|
15192
15784
|
// ../../node_modules/compute-scroll-into-view/dist/index.js
|
|
@@ -17427,7 +18019,7 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
|
|
|
17427
18019
|
}
|
|
17428
18020
|
},
|
|
17429
18021
|
[]
|
|
17430
|
-
), { isMobile: isMobile2 } = useLayout();
|
|
18022
|
+
), { isMobile: isMobile2 } = useLayout(), searchLandmarkRef = useRef(null), { landmarkProps } = useLandmark({ role: "search" }, searchLandmarkRef);
|
|
17431
18023
|
return (
|
|
17432
18024
|
// @ts-expect-error (non strict)
|
|
17433
18025
|
react_default.createElement(
|
|
@@ -17478,7 +18070,7 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
|
|
|
17478
18070
|
}), labelProps = getLabelProps({
|
|
17479
18071
|
htmlFor: inputId
|
|
17480
18072
|
});
|
|
17481
|
-
return react_default.createElement(react_default.Fragment, null, react_default.createElement(ScreenReaderLabel, { ...labelProps }, "Search for components"), react_default.createElement(SearchBar,
|
|
18073
|
+
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(
|
|
17482
18074
|
SearchField2,
|
|
17483
18075
|
{
|
|
17484
18076
|
...getRootProps({ refKey: "" }, { suppressRefError: !0 }),
|
|
@@ -17503,7 +18095,9 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
|
|
|
17503
18095
|
), searchBarContent), react_default.createElement(FocusContainer, { tabIndex: 0, id: "storybook-explorer-menu" }, children({
|
|
17504
18096
|
query: input,
|
|
17505
18097
|
results,
|
|
17506
|
-
|
|
18098
|
+
isNavVisible: !isOpen && document6.activeElement !== inputRef.current,
|
|
18099
|
+
isNavReachable: input.length === 0,
|
|
18100
|
+
isSearchResultRendered: isOpen,
|
|
17507
18101
|
closeMenu,
|
|
17508
18102
|
getMenuProps,
|
|
17509
18103
|
getItemProps,
|
|
@@ -17515,6 +18109,7 @@ var { document: document6 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
|
|
|
17515
18109
|
});
|
|
17516
18110
|
|
|
17517
18111
|
// src/manager/components/sidebar/SearchResults.tsx
|
|
18112
|
+
init_react();
|
|
17518
18113
|
var { document: document7 } = scope, ResultsList = styled.ol({
|
|
17519
18114
|
listStyle: "none",
|
|
17520
18115
|
margin: 0,
|
|
@@ -17692,7 +18287,14 @@ var { document: document7 } = scope, ResultsList = styled.ol({
|
|
|
17692
18287
|
}));
|
|
17693
18288
|
});
|
|
17694
18289
|
|
|
18290
|
+
// src/manager/components/sidebar/SidebarBottom.tsx
|
|
18291
|
+
init_react();
|
|
18292
|
+
|
|
18293
|
+
// src/manager/components/sidebar/TestingWidget.tsx
|
|
18294
|
+
init_react();
|
|
18295
|
+
|
|
17695
18296
|
// src/manager/components/sidebar/useDynamicFavicon.ts
|
|
18297
|
+
init_react();
|
|
17696
18298
|
var STATUSES = ["active", "critical", "negative", "positive", "warning"], initialIcon, getFaviconUrl = (initialHref = "./favicon.svg", status) => {
|
|
17697
18299
|
initialIcon ??= initialHref;
|
|
17698
18300
|
let href = initialIcon + (status && STATUSES.includes(status) ? `?status=${status}` : "");
|
|
@@ -17846,18 +18448,26 @@ var DEFAULT_HEIGHT = 500, HoverCard2 = styled(Card)({
|
|
|
17846
18448
|
), isCrashed = Object.values(testProviderStates).some(
|
|
17847
18449
|
(testProviderState) => testProviderState === "test-provider-state:crashed"
|
|
17848
18450
|
), hasTestProviders = Object.values(registeredTestProviders).length > 0;
|
|
17849
|
-
|
|
18451
|
+
useEffect(() => {
|
|
17850
18452
|
isCrashed && isCollapsed && toggleCollapsed(void 0, !1);
|
|
17851
18453
|
}, [isCrashed, isCollapsed, toggleCollapsed]), useDynamicFavicon(
|
|
17852
18454
|
isCrashed ? "critical" : errorCount > 0 ? "negative" : warningCount > 0 ? "warning" : isRunning ? "active" : successCount > 0 ? "positive" : void 0
|
|
17853
|
-
)
|
|
18455
|
+
);
|
|
18456
|
+
let cardRef = useRef(null), { landmarkProps } = useLandmark(
|
|
18457
|
+
{ "aria-labelledby": "storybook-testing-widget-heading", role: "region" },
|
|
18458
|
+
cardRef
|
|
18459
|
+
);
|
|
18460
|
+
return !hasTestProviders && !errorCount && !warningCount ? null : react_default.createElement(
|
|
17854
18461
|
HoverCard2,
|
|
17855
18462
|
{
|
|
17856
18463
|
id: "storybook-testing-module",
|
|
17857
18464
|
"data-updated": isUpdated,
|
|
17858
18465
|
outlineAnimation: isRunning ? "spin" : "none",
|
|
17859
|
-
outlineColor: isCrashed || isRunning && errorCount > 0 ? "negative" : isUpdated ? "positive" : void 0
|
|
18466
|
+
outlineColor: isCrashed || isRunning && errorCount > 0 ? "negative" : isUpdated ? "positive" : void 0,
|
|
18467
|
+
ref: cardRef,
|
|
18468
|
+
outlineAttrs: landmarkProps
|
|
17860
18469
|
},
|
|
18470
|
+
react_default.createElement("h2", { id: "storybook-testing-widget-heading", className: "sb-sr-only" }, "Component tests"),
|
|
17861
18471
|
react_default.createElement(Bar2, { ...hasTestProviders ? { onClick: (e2) => toggleCollapsed(e2) } : {} }, react_default.createElement(Action, null, hasTestProviders && react_default.createElement(
|
|
17862
18472
|
Optional,
|
|
17863
18473
|
{
|
|
@@ -18041,7 +18651,11 @@ var SIDEBAR_BOTTOM_SPACER_ID = "sidebar-bottom-spacer", SIDEBAR_BOTTOM_WRAPPER_I
|
|
|
18041
18651
|
);
|
|
18042
18652
|
};
|
|
18043
18653
|
|
|
18654
|
+
// src/manager/components/sidebar/TagsFilter.tsx
|
|
18655
|
+
init_react();
|
|
18656
|
+
|
|
18044
18657
|
// src/manager/components/sidebar/TagsFilterPanel.tsx
|
|
18658
|
+
init_react();
|
|
18045
18659
|
var groupByType = (filters) => filters.reduce(
|
|
18046
18660
|
(acc, filter) => (acc[filter.type] = acc[filter.type] || [], acc[filter.type].push(filter), acc),
|
|
18047
18661
|
{}
|
|
@@ -18288,6 +18902,7 @@ var TAGS_FILTER = "tags-filter", BUILT_IN_TAGS = new Set(Object.values(Tag)), St
|
|
|
18288
18902
|
};
|
|
18289
18903
|
|
|
18290
18904
|
// src/manager/components/sidebar/useLastViewed.ts
|
|
18905
|
+
init_react();
|
|
18291
18906
|
var import_store2 = __toESM(require_store2(), 1), save = debounce((value) => import_store2.default.set("lastViewedStoryIds", value), 1e3), useLastViewed = (selection) => {
|
|
18292
18907
|
let initialLastViewedStoryIds = useMemo(() => {
|
|
18293
18908
|
let items = import_store2.default.get("lastViewedStoryIds");
|
|
@@ -18312,7 +18927,7 @@ var import_store2 = __toESM(require_store2(), 1), save = debounce((value) => imp
|
|
|
18312
18927
|
};
|
|
18313
18928
|
|
|
18314
18929
|
// src/manager/components/sidebar/Sidebar.tsx
|
|
18315
|
-
var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.
|
|
18930
|
+
var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.header(({ theme }) => ({
|
|
18316
18931
|
position: "absolute",
|
|
18317
18932
|
zIndex: 1,
|
|
18318
18933
|
left: 0,
|
|
@@ -18337,13 +18952,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
|
|
|
18337
18952
|
width: isMobile2 ? 36 : 32,
|
|
18338
18953
|
height: isMobile2 ? 36 : 32,
|
|
18339
18954
|
borderRadius: theme.appBorderRadius + 2
|
|
18340
|
-
})),
|
|
18341
|
-
children,
|
|
18342
|
-
condition
|
|
18343
|
-
}) {
|
|
18344
|
-
let [a2, b2] = react_default.Children.toArray(children);
|
|
18345
|
-
return react_default.createElement(react_default.Fragment, null, react_default.createElement("div", { style: { display: condition ? "block" : "none" } }, a2), react_default.createElement("div", { style: { display: condition ? "none" : "block" } }, b2));
|
|
18346
|
-
}), useCombination = (index, indexError, previewInitialized, allStatuses, refs) => {
|
|
18955
|
+
})), useCombination = (index, indexError, previewInitialized, allStatuses, refs) => {
|
|
18347
18956
|
let hash = useMemo(
|
|
18348
18957
|
() => ({
|
|
18349
18958
|
[DEFAULT_REF_ID]: {
|
|
@@ -18361,7 +18970,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
|
|
|
18361
18970
|
[refs, index, indexError, previewInitialized, allStatuses]
|
|
18362
18971
|
);
|
|
18363
18972
|
return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
|
|
18364
|
-
},
|
|
18973
|
+
}, isRendererReact2 = scope.STORYBOOK_RENDERER === "react", Sidebar = react_default.memo(function({
|
|
18365
18974
|
// @ts-expect-error (non strict)
|
|
18366
18975
|
storyId = null,
|
|
18367
18976
|
refId = DEFAULT_REF_ID,
|
|
@@ -18376,7 +18985,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
|
|
|
18376
18985
|
isDevelopment = scope.CONFIG_TYPE === "DEVELOPMENT",
|
|
18377
18986
|
refs = {},
|
|
18378
18987
|
onMenuClick,
|
|
18379
|
-
showCreateStoryButton = isDevelopment &&
|
|
18988
|
+
showCreateStoryButton = isDevelopment && isRendererReact2
|
|
18380
18989
|
}) {
|
|
18381
18990
|
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(), tagPresets = useMemo(
|
|
18382
18991
|
() => Object.entries(scope.TAGS_OPTIONS ?? {}).reduce((acc, entry) => {
|
|
@@ -18384,8 +18993,11 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
|
|
|
18384
18993
|
return acc[tag] = option, acc;
|
|
18385
18994
|
}, {}),
|
|
18386
18995
|
[]
|
|
18996
|
+
), headerRef = useRef(null), { landmarkProps } = useLandmark(
|
|
18997
|
+
{ "aria-labelledby": "global-site-h1", role: "banner" },
|
|
18998
|
+
headerRef
|
|
18387
18999
|
);
|
|
18388
|
-
return react_default.createElement(Container8, { className: "container sidebar-container", "
|
|
19000
|
+
return react_default.createElement(Container8, { className: "container sidebar-container", 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(
|
|
18389
19001
|
Heading2,
|
|
18390
19002
|
{
|
|
18391
19003
|
className: "sidebar-header",
|
|
@@ -18425,21 +19037,24 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
|
|
|
18425
19037
|
({
|
|
18426
19038
|
query,
|
|
18427
19039
|
results,
|
|
18428
|
-
|
|
19040
|
+
isNavVisible,
|
|
19041
|
+
isNavReachable,
|
|
19042
|
+
isSearchResultRendered,
|
|
18429
19043
|
closeMenu,
|
|
18430
19044
|
getMenuProps,
|
|
18431
19045
|
getItemProps,
|
|
18432
19046
|
highlightedIndex
|
|
18433
|
-
}) => react_default.createElement(
|
|
19047
|
+
}) => react_default.createElement(react_default.Fragment, null, react_default.createElement(
|
|
18434
19048
|
Explorer,
|
|
18435
19049
|
{
|
|
18436
19050
|
dataset,
|
|
18437
19051
|
selected,
|
|
18438
19052
|
isLoading,
|
|
18439
|
-
isBrowsing,
|
|
19053
|
+
isBrowsing: isNavVisible,
|
|
19054
|
+
isHidden: !isNavReachable,
|
|
18440
19055
|
hasEntries
|
|
18441
19056
|
}
|
|
18442
|
-
), react_default.createElement(
|
|
19057
|
+
), isSearchResultRendered && react_default.createElement(
|
|
18443
19058
|
SearchResults,
|
|
18444
19059
|
{
|
|
18445
19060
|
query,
|
|
@@ -18457,6 +19072,7 @@ var DEFAULT_REF_ID = "storybook_internal", Container8 = styled.nav(({ theme }) =
|
|
|
18457
19072
|
});
|
|
18458
19073
|
|
|
18459
19074
|
// src/manager/container/Menu.tsx
|
|
19075
|
+
init_react();
|
|
18460
19076
|
var ProgressCircle2 = styled(ProgressSpinner)(({ theme }) => ({
|
|
18461
19077
|
color: theme.color.secondary
|
|
18462
19078
|
})), useMenu = ({
|
|
@@ -18717,7 +19333,14 @@ var Provider2 = class {
|
|
|
18717
19333
|
}
|
|
18718
19334
|
};
|
|
18719
19335
|
|
|
19336
|
+
// src/manager/settings/index.tsx
|
|
19337
|
+
init_react();
|
|
19338
|
+
|
|
19339
|
+
// src/manager/settings/AboutPage.tsx
|
|
19340
|
+
init_react();
|
|
19341
|
+
|
|
18720
19342
|
// src/manager/settings/About.tsx
|
|
19343
|
+
init_react();
|
|
18721
19344
|
var Container9 = styled.div({
|
|
18722
19345
|
display: "flex",
|
|
18723
19346
|
alignItems: "center",
|
|
@@ -18779,7 +19402,14 @@ var NotificationClearer = class extends Component {
|
|
|
18779
19402
|
));
|
|
18780
19403
|
};
|
|
18781
19404
|
|
|
19405
|
+
// src/manager/settings/GuidePage.tsx
|
|
19406
|
+
init_react();
|
|
19407
|
+
|
|
19408
|
+
// src/manager/settings/Checklist/Checklist.tsx
|
|
19409
|
+
init_react();
|
|
19410
|
+
|
|
18782
19411
|
// src/manager/components/Focus/Focus.tsx
|
|
19412
|
+
init_react();
|
|
18783
19413
|
var FocusOutline = styled.div(
|
|
18784
19414
|
({ theme, active = !1, outlineOffset = 0 }) => ({
|
|
18785
19415
|
width: "100%",
|
|
@@ -19190,7 +19820,14 @@ var Container10 = styled.div(({ theme }) => ({
|
|
|
19190
19820
|
return react_default.createElement(Container10, 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.")), react_default.createElement(Checklist, { ...checklist }), 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"))));
|
|
19191
19821
|
};
|
|
19192
19822
|
|
|
19823
|
+
// src/manager/settings/ShortcutsPage.tsx
|
|
19824
|
+
init_react();
|
|
19825
|
+
|
|
19826
|
+
// src/manager/settings/shortcuts.tsx
|
|
19827
|
+
init_react();
|
|
19828
|
+
|
|
19193
19829
|
// src/manager/settings/SettingsFooter.tsx
|
|
19830
|
+
init_react();
|
|
19194
19831
|
var Footer2 = styled.div(({ theme }) => ({
|
|
19195
19832
|
display: "flex",
|
|
19196
19833
|
paddingTop: 20,
|
|
@@ -19298,16 +19935,21 @@ var Header2 = styled.header(({ theme }) => ({
|
|
|
19298
19935
|
remount: "Reload story",
|
|
19299
19936
|
openInEditor: "Open story in editor",
|
|
19300
19937
|
openInIsolation: "Open story in isolation",
|
|
19301
|
-
copyStoryLink: "Copy story link to clipboard"
|
|
19938
|
+
copyStoryLink: "Copy story link to clipboard",
|
|
19939
|
+
goToPreviousLandmark: "Go to previous landmark",
|
|
19940
|
+
goToNextLandmark: "Go to next landmark"
|
|
19302
19941
|
// TODO: bring this back once we want to add shortcuts for this
|
|
19303
19942
|
// copyStoryName: 'Copy story name to clipboard',
|
|
19304
|
-
}, fixedShortcuts = ["escape"];
|
|
19943
|
+
}, fixedShortcuts = ["escape"], hardcodedShortcuts = ["goToPreviousLandmark", "goToNextLandmark"];
|
|
19305
19944
|
function toShortcutState(shortcutKeys) {
|
|
19306
|
-
|
|
19307
|
-
|
|
19308
|
-
|
|
19309
|
-
|
|
19310
|
-
|
|
19945
|
+
let state = {};
|
|
19946
|
+
for (let key of Object.keys(shortcutKeys).filter((k2) => !fixedShortcuts.includes(k2)))
|
|
19947
|
+
state[key] = {
|
|
19948
|
+
shortcut: shortcutKeys[key],
|
|
19949
|
+
error: !1,
|
|
19950
|
+
hardcoded: hardcodedShortcuts.includes(key)
|
|
19951
|
+
};
|
|
19952
|
+
return state;
|
|
19311
19953
|
}
|
|
19312
19954
|
var ShortcutsScreen = class extends Component {
|
|
19313
19955
|
constructor(props) {
|
|
@@ -19375,20 +20017,37 @@ var ShortcutsScreen = class extends Component {
|
|
|
19375
20017
|
let { shortcutKeys, addonsShortcutLabels } = this.state;
|
|
19376
20018
|
return Object.entries(shortcutKeys).filter(
|
|
19377
20019
|
([feature]) => shortcutLabels[feature] !== void 0 || addonsShortcutLabels && addonsShortcutLabels[feature]
|
|
19378
|
-
).map(
|
|
19379
|
-
|
|
19380
|
-
|
|
19381
|
-
|
|
19382
|
-
|
|
19383
|
-
|
|
19384
|
-
|
|
19385
|
-
|
|
19386
|
-
|
|
19387
|
-
|
|
19388
|
-
|
|
19389
|
-
|
|
19390
|
-
|
|
19391
|
-
|
|
20020
|
+
).map(
|
|
20021
|
+
([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(
|
|
20022
|
+
TooltipProvider,
|
|
20023
|
+
{
|
|
20024
|
+
tooltip: react_default.createElement(Tooltip, { hasChrome: !0 }, "This shortcut cannot be changed."),
|
|
20025
|
+
placement: "right"
|
|
20026
|
+
},
|
|
20027
|
+
react_default.createElement(
|
|
20028
|
+
TextInput,
|
|
20029
|
+
{
|
|
20030
|
+
"aria-disabled": !0,
|
|
20031
|
+
readOnly: !0,
|
|
20032
|
+
valid: void 0,
|
|
20033
|
+
value: shortcut ? shortcutToHumanString(shortcut) : ""
|
|
20034
|
+
}
|
|
20035
|
+
)
|
|
20036
|
+
)) : react_default.createElement(
|
|
20037
|
+
TextInput,
|
|
20038
|
+
{
|
|
20039
|
+
spellCheck: "false",
|
|
20040
|
+
valid: this.displayError(feature),
|
|
20041
|
+
className: "modalInput",
|
|
20042
|
+
onBlur: this.onBlur,
|
|
20043
|
+
onFocus: this.onFocus(feature),
|
|
20044
|
+
onKeyDown: this.onKeyDown,
|
|
20045
|
+
value: shortcut ? shortcutToHumanString(shortcut) : "",
|
|
20046
|
+
placeholder: "Type keys",
|
|
20047
|
+
readOnly: !0
|
|
20048
|
+
}
|
|
20049
|
+
), react_default.createElement(SuccessIcon, { valid: this.displaySuccessMessage(feature) }))
|
|
20050
|
+
);
|
|
19392
20051
|
};
|
|
19393
20052
|
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());
|
|
19394
20053
|
this.state = {
|
|
@@ -19399,7 +20058,6 @@ var ShortcutsScreen = class extends Component {
|
|
|
19399
20058
|
// The initial shortcutKeys that come from props are the defaults/what was saved
|
|
19400
20059
|
// As the user interacts with the page, the state stores the temporary, unsaved shortcuts
|
|
19401
20060
|
// This object also includes the error attached to each shortcut
|
|
19402
|
-
// @ts-expect-error (non strict)
|
|
19403
20061
|
shortcutKeys: toShortcutState(props.shortcutKeys),
|
|
19404
20062
|
addonsShortcutLabels: props.addonsShortcutLabels
|
|
19405
20063
|
};
|
|
@@ -19440,7 +20098,11 @@ var ShortcutsPage = () => react_default.createElement(Consumer, null, ({
|
|
|
19440
20098
|
}
|
|
19441
20099
|
));
|
|
19442
20100
|
|
|
20101
|
+
// src/manager/settings/whats_new_page.tsx
|
|
20102
|
+
init_react();
|
|
20103
|
+
|
|
19443
20104
|
// src/manager/settings/whats_new.tsx
|
|
20105
|
+
init_react();
|
|
19444
20106
|
var Centered = styled.div({
|
|
19445
20107
|
top: "50%",
|
|
19446
20108
|
position: "absolute",
|