@atlaskit/side-nav-items 1.0.0

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-header.compiled.css

@@ -0,0 +1,11 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._2lx21sbv{flex-direction:row-reverse}
+._4cvr1h6o{align-items:center}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-header.js

@@ -0,0 +1,47 @@
+/* flyout-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-header.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useContext } from 'react';
+import Heading from '@atlaskit/heading';
+import { Flex } from '@atlaskit/primitives/compiled';
+import { CloseButton } from './close-button';
+import { OnCloseContext, useTitleId } from './flyout-menu-item-context';
+const headerStyles = {
+  root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
+  flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
+};
+/**
+ * __FlyoutHeader__
+ *
+ * The header section of a flyout menu. This component displays the title, and
+ * close button, as well as any other provided actions relevant to the menu.
+ * This component should be placed first within the FlyoutMenuItemContent.
+ */
+export const FlyoutHeader = props => {
+  const {
+    children,
+    testId,
+    title,
+    closeButtonLabel
+  } = props;
+  const id = useTitleId();
+  const onCloseRef = useContext(OnCloseContext);
+  const handleClose = useCallback(event => {
+    var _onCloseRef$current;
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, event, 'close-button');
+  }, [onCloseRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([headerStyles.root])
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: headerStyles.flex
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    label: closeButtonLabel,
+    onClick: handleClose,
+    testId: testId && `${testId}--close-button`
+  }), /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall",
+    as: "h2",
+    id: id
+  }, title)), children);
+};

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css

@@ -0,0 +1,8 @@
+._1e0c1txw{display:flex}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+@media (min-width:48rem){._14b51kdj{width:25pc}}

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -0,0 +1,211 @@
+/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-menu-item-content.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { PopupContent } from '@atlaskit/popup/experimental';
+import { OnCloseContext, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
+/**
+ * The vertical offset in px to ensure the flyout container does not exceed the bounds of
+ * the window. This matches the padding of the content container, and it's position within
+ * the viewport.
+ *
+ * - FlyoutMenuItemContent: paddingBlock: token('space.100'); – 8px top, 8px bottom
+ * - Position: 5px top, 5px bottom
+ *
+ * Total vertical padding:
+ * 		(8px [content top] + 8px [content bottom]) +
+ * 		(5px [position top] + 5px [position bottom]) = 26px
+ */
+const FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
+
+/**
+ * The maximum height of the flyout menu in pixels, following the Confluence standard maximum
+ * height of 760px.
+ */
+const FLYOUT_MENU_MAX_HEIGHT_PX = 760;
+const flyoutMenuItemContentStyles = {
+  root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
+};
+const flyoutMenuItemContentContainerStyles = {
+  container: "_1e0c1txw _4t3i1osq _2lx21bp4"
+};
+/**
+ * __FlyoutMenuItemContent__
+ *
+ * The content that appears when the flyout menu is open.
+ */
+export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
+  children,
+  containerTestId,
+  onClose,
+  autoFocus,
+  maxHeight = FLYOUT_MENU_MAX_HEIGHT_PX
+}, forwardedRef) => {
+  const setIsOpen = useContext(SetIsOpenContext);
+  const onCloseRef = useContext(OnCloseContext);
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+
+  // The source of the close is not accessible to the consumer, it is determined within the
+  // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
+  // or FlyoutHeader (close-button).
+  const handleClose = useCallback((event, source) => {
+    if (fg("platform_dst_nav4_flyout_menu_slots_close_button")) {
+      // Use the passed source if provided, otherwise determine from event
+      let determinedSource = source || 'other';
+      if (!source) {
+        if (event instanceof KeyboardEvent) {
+          const keyboardEvent = event;
+          if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
+            determinedSource = 'escape-key';
+          }
+        } else if (event instanceof MouseEvent) {
+          if (event && 'type' in event && event.type === 'click') {
+            determinedSource = 'outside-click';
+          }
+        }
+      }
+
+      // When flyout menu is closed, fire analytics event
+      const navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'sideNav',
+        actionSubject: 'flyoutMenu',
+        action: 'closed',
+        attributes: {
+          closeSource: determinedSource
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
+    }
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    setIsOpen(false);
+  }, [setIsOpen, onClose, createAnalyticsEvent]);
+
+  // Register handleClose in the ref to allow the FlyoutMenuItemTrigger to access it
+  useEffect(() => {
+    onCloseRef.current = handleClose;
+  }, [handleClose, onCloseRef]);
+  const titleId = useId();
+  const computedMaxHeight = useMemo(() => `min(
+			calc(100vh - ${FLYOUT_MENU_VERTICAL_OFFSET_PX}px),
+			${maxHeight}px
+		)`, [maxHeight]);
+  return /*#__PURE__*/React.createElement(PopupContent, {
+    appearance: "UNSAFE_modal-below-sm",
+    onClose: handleClose,
+    placement: "right-start"
+    // Using a capture event listener so that we are more resilient against
+    // code that stops events. We _really_ want to close the flyout whenever
+    // user user clicks outside the flyout content
+    ,
+    shouldUseCaptureOnOutsideClick: true,
+    shouldFitViewport: true,
+    testId: containerTestId,
+    xcss: flyoutMenuItemContentStyles.root,
+    autoFocus: autoFocus,
+    role: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
+    /**
+     * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
+     *
+     * This allows makers to use popups with `shouldRenderToParent` inside the flyout.
+     *
+     * Without this, the `transform` makes the flyout the containing element for fixed positioning.
+     * Because the flyout is also a scroll container then any nested, layered element is unable to
+     * escape the flyout.
+     *
+     * Disabling the `transform` is the simplest way to resolve this layering issue,
+     * and should have negligible performance impacts, because the flyout menus should rarely
+     * need to be repositioned.
+     */,
+    shouldDisableGpuAcceleration: true,
+    shouldRenderToParent: fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')
+  }, ({
+    update
+  }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
+    ref: forwardedRef,
+    update: update
+  }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
+    value: titleId
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxHeight: computedMaxHeight
+    },
+    "data-testid": containerTestId ? `${containerTestId}--container` : undefined,
+    className: ax([flyoutMenuItemContentContainerStyles.container])
+  }, children)) : children));
+});
+function createResizeObserver(update) {
+  return new ResizeObserver(update);
+}
+
+/**
+ * Will call the Popper.js `update()` method to recalculate positioning, when the flyout menu changes size.
+ * This is the size of the scroll container, NOT the scroll content.
+ *
+ * We could potentially bake this into `@atlaskit/popup` or `@atlaskit/popper` but there are a few
+ * reasons to keep it scoped to flyout menus for now:
+ *
+ * 1. It's easier to unwind
+ * 2. We've only had bug reports for flyout menus
+ * 3. Popup exposes the `update` function so consumers can already do this themselves if necessary
+ * 4. Flyout menus are a lot more restricted to other popups, it might not make sense more generally
+ */
+const UpdatePopperOnContentResize = /*#__PURE__*/forwardRef(({
+  update,
+  children
+}, forwardedRef) => {
+  /**
+   * Storing our `update` function in a ref so that we have a stable reference to it.
+   * We need this because our `ResizeObserver` callback cannot be changed after creating it.
+   */
+  const updateRef = useRef(update);
+  useEffect(() => {
+    updateRef.current = update;
+  }, [update]);
+
+  /**
+   * Stable function that calls the latest `update` function by calling it through the stable ref.
+   */
+  const triggerUpdate = useCallback(() => {
+    var _updateRef$current;
+    (_updateRef$current = updateRef.current) === null || _updateRef$current === void 0 ? void 0 : _updateRef$current.call(updateRef);
+  }, []);
+  const [resizeObserver] = useState(() => createResizeObserver(triggerUpdate));
+
+  /**
+   * This is a callback ref that will update which `HTMLElement` we are observing,
+   * if or when the underlying `HTMLElement` changes or unmounts.
+   */
+  const observeCallbackRef = useCallback(element => {
+    /**
+     * Unobserves all observed elements.
+     * Allows us to cleanup without needing to store a reference to the previous element.
+     */
+    resizeObserver.disconnect();
+    if (!element) {
+      return;
+    }
+    resizeObserver.observe(element);
+  }, [resizeObserver]);
+
+  /**
+   * We need to memoize the ref otherwise `triggerUpdate` is repeatedly called.
+   *
+   * This stems from ResizeObserver firing once after calling `.observe()` even if there
+   * was no resize.
+   *
+   * Without memoizing the ref, the update causes a rerender, which causes the ref to
+   * get recreated, which triggers an update and so on in a loop.
+   */
+  const ref = useMemo(() => {
+    return mergeRefs([forwardedRef, observeCallbackRef]);
+  }, [forwardedRef, observeCallbackRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children);
+});

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-context.js

@@ -0,0 +1,45 @@
+import { createContext, useContext } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+/**
+ * __Is open context__
+ *
+ * A context for storing the isOpen value of the FlyoutMenuItem.
+ */
+export const IsOpenContext = /*#__PURE__*/createContext(false);
+
+/**
+ * __Set is open context__
+ *
+ * A context for storing a function that sets isOpen value of the FlyoutMenuItem.
+ */
+export const SetIsOpenContext = /*#__PURE__*/createContext(noop);
+export const useFlyoutMenuOpen = () => useContext(IsOpenContext);
+export const useSetFlyoutMenuOpen = () => useContext(SetIsOpenContext);
+
+/**
+ * __On close context__
+ *
+ * A context for storing a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
+ */
+export const OnCloseContext = /*#__PURE__*/createContext({
+  current: null
+});
+
+/**
+ * __Title id context__
+ *
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export const TitleIdContext = /*#__PURE__*/createContext(undefined);
+export const useTitleId = () => useContext(TitleIdContext);
+
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export const TitleIdContextProvider = TitleIdContext.Provider;

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.compiled.css

@@ -0,0 +1,2 @@
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js

@@ -0,0 +1,57 @@
+/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-menu-item-trigger.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { PopupTrigger } from '@atlaskit/popup/experimental';
+import { MenuItemBase } from '../menu-item';
+const elemAfterStyles = {
+  root: "_18zr12x7 _1tz3r0mg"
+};
+/**
+ * __FlyoutMenuItemTrigger__
+ *
+ * The button that toggles the flyout menu.
+ */
+export const FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(({
+  children,
+  elemBefore,
+  onClick,
+  isSelected,
+  interactionName,
+  testId,
+  isContentTooltipDisabled,
+  visualContentRef,
+  isDragging,
+  hasDragIndicator,
+  dropIndicator
+}, forwardedRef) => /*#__PURE__*/React.createElement(PopupTrigger, null, ({
+  ref,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup
+}) => /*#__PURE__*/React.createElement(MenuItemBase, {
+  testId: testId,
+  ref: mergeRefs([ref, forwardedRef]),
+  visualContentRef: visualContentRef,
+  elemBefore: elemBefore,
+  elemAfter: /*#__PURE__*/React.createElement("div", {
+    className: ax([elemAfterStyles.root])
+  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    label: "",
+    color: "currentColor",
+    size: "small"
+  })),
+  onClick: onClick,
+  ariaControls: ariaControls,
+  ariaExpanded: ariaExpanded,
+  ariaHasPopup: ariaHasPopup,
+  interactionName: interactionName,
+  isContentTooltipDisabled: isContentTooltipDisabled,
+  isSelected: isSelected,
+  isDragging: isDragging,
+  hasDragIndicator: hasDragIndicator,
+  dropIndicator: dropIndicator
+}, children)));

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item.js

@@ -0,0 +1,61 @@
+import React, { forwardRef, useEffect } from 'react';
+import useControlled from '@atlaskit/ds-lib/use-controlled';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Popup } from '@atlaskit/popup/experimental';
+import { MenuListItem } from '../menu-list-item';
+import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
+/**
+ * __FlyoutMenuItem__
+ *
+ * Displays content in a flyout menu, triggered by a button.
+ *
+ * The top-level component that contains the trigger and content of a flyout menu.
+ *
+ * Usage example:
+ * ```tsx
+ * <FlyoutMenuItem>
+ *   <FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+ *   <FlyoutMenuItemContent>
+ *     <MenuList>
+ *       <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *       <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *     </MenuList>
+ *   </FlyoutMenuItemContent>
+ * </FlyoutMenuItem>
+ * ```
+ */
+export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
+  children,
+  id,
+  isOpen: isOpenControlled,
+  isDefaultOpen = false,
+  onOpenChange
+}, forwardedRef) => {
+  const [isOpen, setIsOpen] = useControlled(isOpenControlled, () => isDefaultOpen);
+  const previousIsOpen = usePreviousValue(isOpen);
+  useEffect(() => {
+    if (previousIsOpen === undefined || previousIsOpen === isOpen) {
+      /**
+       * The previous value is `undefined` on initialization, so if it is `undefined` then the value hasn't changed.
+       *
+       * The previous value can be equal to the current one if the component re-renders due to something else changing.
+       *
+       * In both cases the value hasn't changed and we don't want to notify consumers.
+       */
+      return;
+    }
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+  }, [isOpen, onOpenChange, previousIsOpen]);
+  return /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
+    value: isOpen
+  }, /*#__PURE__*/React.createElement(SetIsOpenContext.Provider, {
+    value: setIsOpen
+  }, /*#__PURE__*/React.createElement(MenuListItem, {
+    ref: forwardedRef
+  }, /*#__PURE__*/React.createElement(Popup, {
+    id: id,
+    isOpen: isOpen,
+    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
+  }, children))));
+});

package/dist/es2019/ui/menu-item/link-menu-item.compiled.css

@@ -0,0 +1 @@
+._10m98stt{scroll-margin-inline:750pt}

package/dist/es2019/ui/menu-item/link-menu-item.js

@@ -0,0 +1,73 @@
+/* link-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./link-menu-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useMemo, useRef } from 'react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { ListItem } from './list-item';
+import { MenuItemBase } from './menu-item';
+import { useScrollMenuItemIntoView } from './use-scroll-menu-item-into-view';
+const listItemStyles = {
+  root: "_10m98stt"
+};
+const LinkMenuItemNoRef = ({
+  testId,
+  actions,
+  children,
+  description,
+  elemAfter,
+  elemBefore,
+  href,
+  target,
+  actionsOnHover,
+  isSelected,
+  onClick,
+  interactionName,
+  isContentTooltipDisabled,
+  visualContentRef,
+  listItemRef,
+  isDragging,
+  hasDragIndicator,
+  dropIndicator
+}, forwardedRef) => {
+  const itemRef = useRef(null);
+  useScrollMenuItemIntoView({
+    elementRef: itemRef,
+    isSelected: isSelected !== null && isSelected !== void 0 ? isSelected : false
+  });
+  const ref = useMemo(() => {
+    return mergeRefs([itemRef, listItemRef !== null && listItemRef !== void 0 ? listItemRef : null]);
+  }, [itemRef, listItemRef]);
+  return /*#__PURE__*/React.createElement(ListItem, {
+    ref: ref,
+    xcss: listItemStyles.root
+  }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    testId: testId,
+    description: description,
+    actions: actions,
+    elemAfter: elemAfter
+    // TODO Always use "open in new window" icon when `openInNewWindow` prop is true
+    ,
+    elemBefore: elemBefore,
+    href: href,
+    target: target,
+    actionsOnHover: actionsOnHover,
+    isSelected: isSelected,
+    onClick: onClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+};
+
+/**
+ * LinkMenuItem
+ *
+ * A menu item link. It should be used within a `ul`.
+ */
+export const LinkMenuItem = forwardRefWithGeneric(LinkMenuItemNoRef);

package/dist/es2019/ui/menu-item/list-item.js

@@ -0,0 +1,23 @@
+/* list-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+function _ListItem({
+  children,
+  testId,
+  xcss
+}, ref) {
+  return /*#__PURE__*/React.createElement("div", {
+    role: "listitem",
+    ref: ref,
+    className: xcss,
+    "data-testid": testId
+  }, children);
+}
+
+/**
+ * __List item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+export const ListItem = /*#__PURE__*/forwardRef(_ListItem);

package/dist/es2019/ui/menu-item/list.js

@@ -0,0 +1,33 @@
+/* list.tsx generated by @compiled/babel-plugin v0.38.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+function _List({
+  children,
+  testId,
+  xcss
+}, forwardedRef) {
+  return (
+    /*#__PURE__*/
+    /**
+     * We are using `role="list"` instead of a `ul` element to enable more flexible
+     * composition. By using ARIA roles we can validly have elements between a list
+     * and list items, as long as those in-between elements have no semantics.
+     */
+    React.createElement("div", {
+      role: "list",
+      ref: forwardedRef,
+      className: xcss,
+      "data-testid": testId
+    }, children)
+  );
+}
+
+/**
+ * __List__
+ *
+ * A an element with the role of `list` for semantically grouping list items.
+ *
+ * This is the internal primitive used by other external components in the navigation system.
+ */
+export const List = /*#__PURE__*/forwardRef(_List);

package/dist/es2019/ui/menu-item/menu-item-signals.js

@@ -0,0 +1,5 @@
+/**
+ * A symbol to collapse the `elemBefore` slot.
+ * This should be placed in the `elemBefore` prop of supported menu items.
+ */
+export const COLLAPSE_ELEM_BEFORE = Symbol('collapse-elem-before');