@utrecht/web-component-library-stencil 1.0.0-alpha.16 → 1.0.0-alpha.160

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/sidebar/types.js

@@ -0,0 +1,12 @@
+export function isCloseType(x) {
+  return !!(x && x.closeMenu);
+}
+export function isClearType(x) {
+  return !!(x && x.clearLastViewed);
+}
+export function isExpandType(x) {
+  return !!(x && x.showAll);
+}
+export function isSearchResult(x) {
+  return !!(x && x.item);
+}

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/sidebar/useExpanded.js

@@ -0,0 +1,191 @@
+import "core-js/modules/es.array.reduce.js";
+import { useStorybookApi } from '@storybook/api';
+import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
+import global from 'global';
+import throttle from 'lodash/throttle';
+import { useCallback, useEffect, useReducer } from 'react';
+import { matchesKeyCode, matchesModifiers } from '../../keybinding';
+import { isAncestor, getAncestorIds, getDescendantIds, scrollIntoView } from './utils';
+const {
+  document
+} = global;
+
+const initializeExpanded = ({
+  refId,
+  data,
+  initialExpanded,
+  highlightedRef,
+  rootIds
+}) => {
+  var _highlightedRef$curre, _highlightedRef$curre2;
+
+  const highlightedAncestors = ((_highlightedRef$curre = highlightedRef.current) === null || _highlightedRef$curre === void 0 ? void 0 : _highlightedRef$curre.refId) === refId ? getAncestorIds(data, (_highlightedRef$curre2 = highlightedRef.current) === null || _highlightedRef$curre2 === void 0 ? void 0 : _highlightedRef$curre2.itemId) : [];
+  return [...rootIds, ...highlightedAncestors].reduce((acc, id) => Object.assign(acc, {
+    [id]: id in initialExpanded ? initialExpanded[id] : true
+  }), {});
+};
+
+const noop = () => {};
+
+export const useExpanded = ({
+  containerRef,
+  isBrowsing,
+  refId,
+  data,
+  initialExpanded,
+  rootIds,
+  highlightedRef,
+  setHighlightedItemId,
+  selectedStoryId,
+  onSelectStoryId
+}) => {
+  const api = useStorybookApi(); // Track the set of currently expanded nodes within this tree.
+  // Root nodes are expanded by default.
+
+  const [expanded, setExpanded] = useReducer((state, {
+    ids,
+    value
+  }) => ids.reduce((acc, id) => Object.assign(acc, {
+    [id]: value
+  }), Object.assign({}, state)), {
+    refId,
+    data,
+    highlightedRef,
+    rootIds,
+    initialExpanded
+  }, initializeExpanded);
+  const getElementByDataItemId = useCallback(id => {
+    var _containerRef$current;
+
+    return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector(`[data-item-id="${id}"]`);
+  }, [containerRef]);
+  const highlightElement = useCallback(element => {
+    setHighlightedItemId(element.getAttribute('data-item-id'));
+    scrollIntoView(element);
+  }, [setHighlightedItemId]);
+  const updateExpanded = useCallback(({
+    ids,
+    value
+  }) => {
+    setExpanded({
+      ids,
+      value
+    });
+
+    if (ids.length === 1) {
+      var _containerRef$current2;
+
+      const element = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelector(`[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`);
+      if (element) highlightElement(element);
+    }
+  }, [containerRef, highlightElement, refId]); // Expand the whole ancestry of the currently selected story whenever it changes.
+
+  useEffect(() => {
+    setExpanded({
+      ids: getAncestorIds(data, selectedStoryId),
+      value: true
+    });
+  }, [data, selectedStoryId]);
+  const collapseAll = useCallback(() => {
+    const ids = Object.keys(data).filter(id => !rootIds.includes(id));
+    setExpanded({
+      ids,
+      value: false
+    });
+  }, [data, rootIds]);
+  const expandAll = useCallback(() => {
+    setExpanded({
+      ids: Object.keys(data),
+      value: true
+    });
+  }, [data]);
+  useEffect(() => {
+    if (!api) return noop;
+    api.on(STORIES_COLLAPSE_ALL, collapseAll);
+    api.on(STORIES_EXPAND_ALL, expandAll);
+    return () => {
+      api.off(STORIES_COLLAPSE_ALL, collapseAll);
+      api.off(STORIES_EXPAND_ALL, expandAll);
+    };
+  }, [api, collapseAll, expandAll]); // Expand, collapse or select nodes in the tree using keyboard shortcuts.
+
+  useEffect(() => {
+    const menuElement = document.getElementById('storybook-explorer-menu'); // Even though we ignore repeated events, use throttle because IE doesn't support event.repeat.
+
+    const navigateTree = throttle(event => {
+      var _highlightedRef$curre3, _highlightedRef$curre4;
+
+      const highlightedItemId = ((_highlightedRef$curre3 = highlightedRef.current) === null || _highlightedRef$curre3 === void 0 ? void 0 : _highlightedRef$curre3.refId) === refId && ((_highlightedRef$curre4 = highlightedRef.current) === null || _highlightedRef$curre4 === void 0 ? void 0 : _highlightedRef$curre4.itemId);
+      if (!isBrowsing || !containerRef.current || !highlightedItemId || event.repeat) return;
+      if (!matchesModifiers(false, event)) return;
+      const isEnter = matchesKeyCode('Enter', event);
+      const isSpace = matchesKeyCode('Space', event);
+      const isArrowLeft = matchesKeyCode('ArrowLeft', event);
+      const isArrowRight = matchesKeyCode('ArrowRight', event);
+      if (!(isEnter || isSpace || isArrowLeft || isArrowRight)) return;
+      const highlightedElement = getElementByDataItemId(highlightedItemId);
+      if (!highlightedElement || highlightedElement.getAttribute('data-ref-id') !== refId) return;
+      const target = event.target;
+      if (!isAncestor(menuElement, target) && !isAncestor(target, menuElement)) return;
+
+      if (target.hasAttribute('data-action')) {
+        if (isEnter || isSpace) return;
+        target.blur();
+      }
+
+      event.preventDefault();
+      const type = highlightedElement.getAttribute('data-nodetype');
+
+      if ((isEnter || isSpace) && ['component', 'story', 'document'].includes(type)) {
+        onSelectStoryId(highlightedItemId);
+      }
+
+      const isExpanded = highlightedElement.getAttribute('aria-expanded');
+
+      if (isArrowLeft) {
+        if (isExpanded === 'true') {
+          // The highlighted node is expanded, so we collapse it.
+          setExpanded({
+            ids: [highlightedItemId],
+            value: false
+          });
+          return;
+        }
+
+        const parentId = highlightedElement.getAttribute('data-parent-id');
+        const parentElement = parentId && getElementByDataItemId(parentId);
+
+        if (parentElement && parentElement.getAttribute('data-highlightable') === 'true') {
+          // The highlighted node isn't expanded, so we move the highlight to its parent instead.
+          highlightElement(parentElement);
+          return;
+        } // The parent can't be highlighted, which means it must be a root.
+        // The highlighted node is already collapsed, so we collapse its descendants.
+
+
+        setExpanded({
+          ids: getDescendantIds(data, highlightedItemId, true),
+          value: false
+        });
+        return;
+      }
+
+      if (isArrowRight) {
+        if (isExpanded === 'false') {
+          updateExpanded({
+            ids: [highlightedItemId],
+            value: true
+          });
+        } else if (isExpanded === 'true') {
+          updateExpanded({
+            ids: getDescendantIds(data, highlightedItemId, true),
+            value: true
+          });
+        }
+      }
+    }, 60);
+    document.addEventListener('keydown', navigateTree);
+    return () => document.removeEventListener('keydown', navigateTree);
+  }, [containerRef, isBrowsing, refId, data, highlightedRef, setHighlightedItemId, onSelectStoryId]);
+  return [expanded, updateExpanded];
+};

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/sidebar/useHighlighted.js

@@ -0,0 +1,93 @@
+import global from 'global';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { matchesKeyCode, matchesModifiers } from '../../keybinding';
+import { cycle, isAncestor, scrollIntoView } from './utils';
+const {
+  document,
+  window: globalWindow
+} = global;
+
+const fromSelection = selection => selection ? {
+  itemId: selection.storyId,
+  refId: selection.refId
+} : null;
+
+export const useHighlighted = ({
+  containerRef,
+  isLoading,
+  isBrowsing,
+  dataset,
+  selected
+}) => {
+  const initialHighlight = fromSelection(selected);
+  const highlightedRef = useRef(initialHighlight);
+  const [highlighted, setHighlighted] = useState(initialHighlight);
+  const updateHighlighted = useCallback(highlight => {
+    highlightedRef.current = highlight;
+    setHighlighted(highlight);
+  }, [highlightedRef]); // Sets the highlighted node and scrolls it into view, using DOM elements as reference
+
+  const highlightElement = useCallback((element, center = false) => {
+    const itemId = element.getAttribute('data-item-id');
+    const refId = element.getAttribute('data-ref-id');
+    if (!itemId || !refId) return;
+    updateHighlighted({
+      itemId,
+      refId
+    });
+    scrollIntoView(element, center);
+  }, [updateHighlighted]); // Highlight and scroll to the selected story whenever the selection or dataset changes
+
+  useEffect(() => {
+    const highlight = fromSelection(selected);
+    updateHighlighted(highlight);
+
+    if (highlight) {
+      const {
+        itemId,
+        refId
+      } = highlight;
+      setTimeout(() => {
+        var _containerRef$current;
+
+        scrollIntoView((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`), true // make sure it's clearly visible by centering it
+        );
+      }, 0);
+    }
+  }, [dataset, highlightedRef, containerRef, selected]); // Highlight nodes up/down the tree using arrow keys
+
+  useEffect(() => {
+    const menuElement = document.getElementById('storybook-explorer-menu');
+    let lastRequestId;
+
+    const navigateTree = event => {
+      if (isLoading || !isBrowsing || !containerRef.current) return; // allow event.repeat
+
+      if (!matchesModifiers(false, event)) return;
+      const isArrowUp = matchesKeyCode('ArrowUp', event);
+      const isArrowDown = matchesKeyCode('ArrowDown', event);
+      if (!(isArrowUp || isArrowDown)) return;
+      event.preventDefault();
+      const requestId = globalWindow.requestAnimationFrame(() => {
+        globalWindow.cancelAnimationFrame(lastRequestId);
+        lastRequestId = requestId;
+        const target = event.target;
+        if (!isAncestor(menuElement, target) && !isAncestor(target, menuElement)) return;
+        if (target.hasAttribute('data-action')) target.blur();
+        const highlightable = Array.from(containerRef.current.querySelectorAll('[data-highlightable=true]'));
+        const currentIndex = highlightable.findIndex(el => {
+          var _highlightedRef$curre, _highlightedRef$curre2;
+
+          return el.getAttribute('data-item-id') === ((_highlightedRef$curre = highlightedRef.current) === null || _highlightedRef$curre === void 0 ? void 0 : _highlightedRef$curre.itemId) && el.getAttribute('data-ref-id') === ((_highlightedRef$curre2 = highlightedRef.current) === null || _highlightedRef$curre2 === void 0 ? void 0 : _highlightedRef$curre2.refId);
+        });
+        const nextIndex = cycle(highlightable, currentIndex, isArrowUp ? -1 : 1);
+        const didRunAround = isArrowUp ? nextIndex === highlightable.length - 1 : nextIndex === 0;
+        highlightElement(highlightable[nextIndex], didRunAround);
+      });
+    };
+
+    document.addEventListener('keydown', navigateTree);
+    return () => document.removeEventListener('keydown', navigateTree);
+  }, [isLoading, isBrowsing, highlightedRef, highlightElement]);
+  return [highlighted, updateHighlighted, highlightedRef];
+};

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/sidebar/useLastViewed.js

@@ -0,0 +1,39 @@
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import store from 'store2';
+const save = debounce(value => store.set('lastViewedStoryIds', value), 1000);
+export const useLastViewed = selection => {
+  const initialLastViewedStoryIds = useMemo(() => {
+    const items = store.get('lastViewedStoryIds');
+    if (!items || !Array.isArray(items)) return [];
+    if (!items.some(item => typeof item === 'object' && item.storyId && item.refId)) return [];
+    return items;
+  }, [store]);
+  const lastViewedRef = useRef(initialLastViewedStoryIds);
+  const updateLastViewed = useCallback(story => {
+    const items = lastViewedRef.current;
+    const index = items.findIndex(({
+      storyId,
+      refId
+    }) => storyId === story.storyId && refId === story.refId);
+    if (index === 0) return;
+
+    if (index === -1) {
+      lastViewedRef.current = [story, ...items];
+    } else {
+      lastViewedRef.current = [story, ...items.slice(0, index), ...items.slice(index + 1)];
+    }
+
+    save(lastViewedRef.current);
+  }, [lastViewedRef]);
+  useEffect(() => {
+    if (selection) updateLastViewed(selection);
+  }, [selection]);
+  return {
+    getLastViewed: useCallback(() => lastViewedRef.current, [lastViewedRef]),
+    clearLastViewed: useCallback(() => {
+      lastViewedRef.current = lastViewedRef.current.slice(0, 1);
+      save(lastViewedRef.current);
+    }, [lastViewedRef])
+  };
+};

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/sidebar/utils.js

@@ -0,0 +1,90 @@
+import "core-js/modules/es.array.reduce.js";
+import memoize from 'memoizerific';
+import global from 'global';
+import { isRoot } from '@storybook/api';
+import { DEFAULT_REF_ID } from './data';
+const {
+  document,
+  window: globalWindow,
+  DOCS_MODE
+} = global;
+export const createId = (itemId, refId) => !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`;
+export const getLink = (itemId, refId) => {
+  const type = DOCS_MODE ? 'docs' : 'story';
+  return `${document.location.pathname}?path=/${type}/${createId(itemId, refId)}`;
+};
+export const prevent = e => {
+  e.preventDefault();
+  return false;
+};
+export const get = memoize(1000)((id, dataset) => dataset[id]);
+export const getParent = memoize(1000)((id, dataset) => {
+  const item = get(id, dataset);
+  return item && !isRoot(item) ? get(item.parent, dataset) : undefined;
+});
+export const getParents = memoize(1000)((id, dataset) => {
+  const parent = getParent(id, dataset);
+  return parent ? [parent, ...getParents(parent.id, dataset)] : [];
+});
+export const getAncestorIds = memoize(1000)((data, id) => getParents(id, data).map(item => item.id));
+export const getDescendantIds = memoize(1000)((data, id, skipLeafs) => {
+  const {
+    children = []
+  } = data[id] || {};
+  return children.reduce((acc, childId) => {
+    if (!data[childId] || skipLeafs && data[childId].isLeaf) return acc;
+    acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
+    return acc;
+  }, []);
+});
+export function getPath(item, ref) {
+  const parent = !isRoot(item) && item.parent ? ref.stories[item.parent] : null;
+  if (parent) return [...getPath(parent, ref), parent.name];
+  return ref.id === DEFAULT_REF_ID ? [] : [ref.title || ref.id];
+}
+export const searchItem = (item, ref) => {
+  return Object.assign({}, item, {
+    refId: ref.id,
+    path: getPath(item, ref)
+  });
+};
+export function cycle(array, index, delta) {
+  let next = index + delta % array.length;
+  if (next < 0) next = array.length + next;
+  if (next >= array.length) next -= array.length;
+  return next;
+}
+export const scrollIntoView = (element, center = false) => {
+  if (!element) return;
+  const {
+    top,
+    bottom
+  } = element.getBoundingClientRect();
+  const isInView = top >= 0 && bottom <= (globalWindow.innerHeight || document.documentElement.clientHeight);
+  if (!isInView) element.scrollIntoView({
+    block: center ? 'center' : 'nearest'
+  });
+};
+export const getStateType = (isLoading, isAuthRequired, isError, isEmpty) => {
+  switch (true) {
+    case isAuthRequired:
+      return 'auth';
+
+    case isError:
+      return 'error';
+
+    case isLoading:
+      return 'loading';
+
+    case isEmpty:
+      return 'empty';
+
+    default:
+      return 'ready';
+  }
+};
+export const isAncestor = (element, maybeAncestor) => {
+  if (!element || !maybeAncestor) return false;
+  if (element === maybeAncestor) return true;
+  return isAncestor(element.parentElement, maybeAncestor);
+};

package/dist/collection/node_modules/@storybook/ui/dist/modern/containers/menu.js

@@ -0,0 +1,194 @@
+import React, { useMemo } from 'react';
+import { Badge } from '@storybook/components';
+import { styled, useTheme } from '@storybook/theming';
+import { shortcutToHumanString } from '@storybook/api/shortcut';
+import { MenuItemIcon } from '../components/sidebar/Menu';
+const focusableUIElements = {
+  storySearchField: 'storybook-explorer-searchfield',
+  storyListMenu: 'storybook-explorer-menu',
+  storyPanelRoot: 'storybook-panel-root'
+};
+const Key = styled.code(({
+  theme
+}) => ({
+  width: 16,
+  height: 16,
+  lineHeight: '17px',
+  textAlign: 'center',
+  fontSize: '11px',
+  background: 'rgba(0,0,0,0.07)',
+  color: theme.color.defaultText,
+  borderRadius: 2,
+  userSelect: 'none',
+  pointerEvents: 'none',
+  '& + &': {
+    marginLeft: 2
+  }
+}));
+
+const Shortcut = ({
+  keys
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, keys.map((key, index) =>
+/*#__PURE__*/
+// eslint-disable-next-line react/no-array-index-key
+React.createElement(Key, {
+  key: index
+}, shortcutToHumanString([key]))));
+
+export const useMenu = (api, isToolshown, isFullscreen, showPanel, showNav, enableShortcuts) => {
+  const theme = useTheme();
+  const shortcutKeys = api.getShortcutKeys();
+  const about = useMemo(() => ({
+    id: 'about',
+    title: 'About your Storybook',
+    onClick: () => api.navigateToSettingsPage('/settings/about'),
+    right: api.versionUpdateAvailable() && /*#__PURE__*/React.createElement(Badge, {
+      status: "positive"
+    }, "Update"),
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const releaseNotes = useMemo(() => ({
+    id: 'release-notes',
+    title: 'Release notes',
+    onClick: () => api.navigateToSettingsPage('/settings/release-notes'),
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const shortcuts = useMemo(() => ({
+    id: 'shortcuts',
+    title: 'Keyboard shortcuts',
+    onClick: () => api.navigateToSettingsPage('/settings/shortcuts'),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.shortcutsPage
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null),
+    style: {
+      borderBottom: `4px solid ${theme.appBorderColor}`
+    }
+  }), [api, enableShortcuts, shortcutKeys]);
+  const sidebarToggle = useMemo(() => ({
+    id: 'S',
+    title: 'Show sidebar',
+    onClick: () => api.toggleNav(),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.toggleNav
+    }) : null,
+    left: showNav ? /*#__PURE__*/React.createElement(MenuItemIcon, {
+      icon: "check"
+    }) : /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys, showNav]);
+  const toolbarToogle = useMemo(() => ({
+    id: 'T',
+    title: 'Show toolbar',
+    onClick: () => api.toggleToolbar(),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.toolbar
+    }) : null,
+    left: isToolshown ? /*#__PURE__*/React.createElement(MenuItemIcon, {
+      icon: "check"
+    }) : /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys, isToolshown]);
+  const addonsToggle = useMemo(() => ({
+    id: 'A',
+    title: 'Show addons',
+    onClick: () => api.togglePanel(),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.togglePanel
+    }) : null,
+    left: showPanel ? /*#__PURE__*/React.createElement(MenuItemIcon, {
+      icon: "check"
+    }) : /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys, showPanel]);
+  const addonsOrientationToggle = useMemo(() => ({
+    id: 'D',
+    title: 'Change addons orientation',
+    onClick: () => api.togglePanelPosition(),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.panelPosition
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const fullscreenToggle = useMemo(() => ({
+    id: 'F',
+    title: 'Go full screen',
+    onClick: () => api.toggleFullscreen(),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.fullScreen
+    }) : null,
+    left: isFullscreen ? 'check' : /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys, isFullscreen]);
+  const searchToggle = useMemo(() => ({
+    id: '/',
+    title: 'Search',
+    onClick: () => api.focusOnUIElement(focusableUIElements.storySearchField),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.search
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const up = useMemo(() => ({
+    id: 'up',
+    title: 'Previous component',
+    onClick: () => api.jumpToComponent(-1),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.prevComponent
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const down = useMemo(() => ({
+    id: 'down',
+    title: 'Next component',
+    onClick: () => api.jumpToComponent(1),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.nextComponent
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const prev = useMemo(() => ({
+    id: 'prev',
+    title: 'Previous story',
+    onClick: () => api.jumpToStory(-1),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.prevStory
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const next = useMemo(() => ({
+    id: 'next',
+    title: 'Next story',
+    onClick: () => api.jumpToStory(1),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.nextStory
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+  const collapse = useMemo(() => ({
+    id: 'collapse',
+    title: 'Collapse all',
+    onClick: () => api.collapseAll(),
+    right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+      keys: shortcutKeys.collapseAll
+    }) : null,
+    left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+  }), [api, enableShortcuts, shortcutKeys]);
+
+  const getAddonsShortcuts = () => {
+    const addonsShortcuts = api.getAddonsShortcuts();
+    const keys = shortcutKeys;
+    return Object.entries(addonsShortcuts).filter(([actionName, {
+      showInMenu
+    }]) => showInMenu).map(([actionName, {
+      label,
+      action
+    }]) => ({
+      id: actionName,
+      title: label,
+      onClick: () => action(),
+      right: enableShortcuts ? /*#__PURE__*/React.createElement(Shortcut, {
+        keys: keys[actionName]
+      }) : null,
+      left: /*#__PURE__*/React.createElement(MenuItemIcon, null)
+    }));
+  };
+
+  return useMemo(() => [about, ...(api.releaseNotesVersion() ? [releaseNotes] : []), shortcuts, sidebarToggle, toolbarToogle, addonsToggle, addonsOrientationToggle, fullscreenToggle, searchToggle, up, down, prev, next, collapse, ...getAddonsShortcuts()], [about, ...(api.releaseNotesVersion() ? [releaseNotes] : []), shortcuts, sidebarToggle, toolbarToogle, addonsToggle, addonsOrientationToggle, fullscreenToggle, searchToggle, up, down, prev, next, collapse]);
+};

package/dist/collection/node_modules/@storybook/ui/dist/modern/containers/notifications.js

@@ -0,0 +1,26 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Consumer, useStorybookApi } from '@storybook/api';
+import NotificationList from '../components/notifications/NotificationList';
+export const mapper = ({
+  state
+}) => {
+  const {
+    clearNotification
+  } = useStorybookApi();
+  const {
+    notifications
+  } = state;
+  return {
+    notifications,
+    clearNotification
+  };
+};
+
+const NotificationConnect = props => /*#__PURE__*/React.createElement(Consumer, {
+  filter: mapper
+}, fromState => /*#__PURE__*/React.createElement(NotificationList, _extends({}, props, fromState)));
+
+NotificationConnect.displayName = "NotificationConnect";
+export default NotificationConnect;

package/dist/collection/node_modules/@storybook/ui/dist/modern/containers/panel.js

@@ -0,0 +1,29 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import memoize from 'memoizerific';
+import { Consumer } from '@storybook/api';
+import AddonPanel from '../components/panel/panel';
+const createPanelActions = memoize(1)(api => ({
+  onSelect: panel => api.setSelectedPanel(panel),
+  toggleVisibility: () => api.togglePanel(),
+  togglePosition: () => api.togglePanelPosition()
+}));
+
+const mapper = ({
+  state,
+  api
+}) => ({
+  panels: api.getStoryPanels(),
+  selectedPanel: api.getSelectedPanel(),
+  panelPosition: state.layout.panelPosition,
+  actions: createPanelActions(api),
+  shortcuts: api.getShortcutKeys()
+});
+
+const Panel = props => /*#__PURE__*/React.createElement(Consumer, {
+  filter: mapper
+}, customProps => /*#__PURE__*/React.createElement(AddonPanel, _extends({}, props, customProps)));
+
+Panel.displayName = "Panel";
+export default Panel;