@wix/patterns 1.364.0 → 1.369.0

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -35,6 +35,7 @@ import { CollectionSearch } from '../CollectionSearch';
 import { CollectionToolbarLeftGroup } from './CollectionToolbarLeftGroup';
 import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
 import { getToolbarMode } from './toolbarModeUtils';
+import { TableGridSwitchButtonProps } from '../TableGridSwitchButton/TableGridSwitchButton';
 
 export interface CollectionToolbarProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -257,10 +258,6 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           ...[rendersStart ? undefined : classes.fullWidth],
         )}
       >
-        {isLayoutToggleRedesignEnabled && tableGridSwitchButton && (
-          <TableToolbar.Item>{tableGridSwitchButton}</TableToolbar.Item>
-        )}
-
         <CollectionToolbarActionsGroup
           state={state}
           viewsToolbarItem={viewsToolbarItem}
@@ -274,6 +271,16 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           showCustomColumnsOnTheLeft={showCustomColumnsOnTheLeft}
           left={left}
           hasTabs={!!tabs}
+          tableGridSwitchButton={
+            isLayoutToggleRedesignEnabled ? tableGridSwitchButton : undefined
+          }
+          viewTypeState={
+            isLayoutToggleRedesignEnabled
+              ? (
+                  tableGridSwitchButton as ReactElement<TableGridSwitchButtonProps>
+                )?.props?.state
+              : undefined
+          }
         />
 
         {primaryActionButton && (

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupProps.ts

@@ -1,6 +1,7 @@
 import { FunctionComponent, ReactElement } from 'react';
 import { ToolbarBaseProps } from '../ToolbarCollection';
 import { ToolbarCollectionState } from '../../state';
+import { ViewTypeState } from '../../state/ViewTypeState';
 
 export interface CollectionToolbarActionsGroupProps {
   state: ToolbarCollectionState<any, any>;
@@ -15,4 +16,6 @@ export interface CollectionToolbarActionsGroupProps {
   search?: ToolbarBaseProps['search'];
   showCustomColumnsOnTheLeft?: boolean;
   hasTabs?: boolean;
+  tableGridSwitchButton?: ReactElement;
+  viewTypeState?: ViewTypeState;
 }

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupResponsiveLayout.tsx

@@ -1,5 +1,6 @@
-import React, { cloneElement, Fragment } from 'react';
+import React, { cloneElement, Fragment, useEffect } from 'react';
 import { Box } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
 import { ToolbarItem } from '../ToolbarItem/ToolbarItem';
 import { ToolbarGroupScrollWidthBox } from './ToolbarGroupScrollWidthBox';
 import { SearchOrCustomFilter } from './SearchOrCustomFilter';
@@ -7,8 +8,11 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { CollectionToolbarActionsGroupProps } from './CollectionToolbarActionsGroupProps';
 import { InitialLoadingConditional } from '../InitialLoadingConditional';
 import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
+import { ToolbarOverflowMenu } from './ToolbarOverflowMenu';
+import { useToolbarOverflowItems } from './useToolbarOverflowItems';
+import { LAYOUT_SWITCH_BUTTON_WIDTH } from '../../state/Toolbar/toolbarResponsiveConstants';
 
-export function CollectionToolbarActionsGroupResponsiveLayout(
+function _CollectionToolbarActionsGroupResponsiveLayout(
   props: CollectionToolbarActionsGroupProps,
 ) {
   const {
@@ -23,6 +27,8 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
     importButton,
     search,
     showCustomColumnsOnTheLeft,
+    tableGridSwitchButton,
+    viewTypeState,
   } = props;
 
   const toolbarState = useToolbarCollectionContext();
@@ -30,6 +36,32 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
     toolbar: { responsive },
   } = toolbarState;
 
+  const overflowItems = useToolbarOverflowItems(toolbarState, {
+    customColumns,
+    multiLevelSorting,
+    exportButton,
+    importButton,
+    MoreFiltersButton,
+    viewTypeState,
+  });
+
+  const overflowItemCount =
+    overflowItems.primaryItems.length +
+    overflowItems.secondaryItems.length +
+    (overflowItems.layoutSwitchConfig ? 1 : 0);
+
+  // Don't show a "More" menu for a single item — keep it as an inline icon.
+  const shouldOverflow = responsive._shouldOverflow && overflowItemCount > 1;
+
+  // Track width of non-group content hidden during overflow so the algorithm
+  // doesn't overestimate available space when deciding whether to exit overflow.
+  // Tied to effective shouldOverflow (not just _shouldOverflow) so the single-item
+  // bypass doesn't cause a mismatch between DOM and algorithm.
+  useEffect(() => {
+    responsive._overflowHiddenContentWidth =
+      tableGridSwitchButton && shouldOverflow ? LAYOUT_SWITCH_BUTTON_WIDTH : 0;
+  }, [responsive, !!tableGridSwitchButton, shouldOverflow]);
+
   let child = (
     <Fragment>
       {left ? (
@@ -53,25 +85,46 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
         filtersElement
       ) : undefined}
 
-      {MoreFiltersButton && (
+      {!shouldOverflow && tableGridSwitchButton}
+
+      {!shouldOverflow && MoreFiltersButton && (
         <ToolbarGroupScrollWidthBox state={responsive.filters} gap="SP2">
           <MoreFiltersButton />
         </ToolbarGroupScrollWidthBox>
       )}
 
-      <ToolbarGroupScrollWidthBox state={responsive.actions} gap="SP2">
-        {customColumns && showCustomColumnsOnTheLeft && customColumns}
-        {multiLevelSorting}
-        {exportButton &&
-          cloneElement(exportButton, {
-            toolbarType: 'default',
-          })}
-        {importButton &&
-          cloneElement(importButton, {
-            toolbarType: 'default',
-          })}
-        {customColumns && !showCustomColumnsOnTheLeft && customColumns}
-      </ToolbarGroupScrollWidthBox>
+      {!shouldOverflow && (
+        <ToolbarGroupScrollWidthBox state={responsive.actions} gap="SP2">
+          {customColumns && showCustomColumnsOnTheLeft && customColumns}
+          {multiLevelSorting}
+          {exportButton &&
+            cloneElement(exportButton, {
+              toolbarType: 'default',
+            })}
+          {importButton &&
+            cloneElement(importButton, {
+              toolbarType: 'default',
+            })}
+          {customColumns && !showCustomColumnsOnTheLeft && customColumns}
+        </ToolbarGroupScrollWidthBox>
+      )}
+
+      {shouldOverflow && (exportButton || importButton) && (
+        <Box display="none">
+          {exportButton &&
+            cloneElement(exportButton, { toolbarType: 'default' })}
+          {importButton &&
+            cloneElement(importButton, { toolbarType: 'default' })}
+        </Box>
+      )}
+
+      {shouldOverflow && (
+        <ToolbarOverflowMenu
+          primaryItems={overflowItems.primaryItems}
+          secondaryItems={overflowItems.secondaryItems}
+          layoutSwitchConfig={overflowItems.layoutSwitchConfig}
+        />
+      )}
 
       {search && <SearchOrCustomFilter state={state} search={search} />}
     </Fragment>
@@ -109,3 +162,7 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
 
   return child;
 }
+
+export const CollectionToolbarActionsGroupResponsiveLayout = observer(
+  _CollectionToolbarActionsGroupResponsiveLayout,
+);

package/src/components/CollectionToolbar/CollectionToolbarActionsToolbarItemsGroup.tsx

@@ -23,6 +23,7 @@ function _CollectionToolbarActionsToolbarItemsGroup(
     importButton,
     search,
     showCustomColumnsOnTheLeft,
+    tableGridSwitchButton,
   } = props;
 
   const toolbarState = useToolbarCollectionContext();
@@ -57,6 +58,9 @@ function _CollectionToolbarActionsToolbarItemsGroup(
           ) : viewsToolbarItem ? (
             filtersElement
           ) : undefined}
+          {tableGridSwitchButton && (
+            <TableToolbar.Item>{tableGridSwitchButton}</TableToolbar.Item>
+          )}
           {MoreFiltersButton && (
             <TableToolbar.Item>
               <MoreFiltersButton />

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1304714687";
+var _namespace_ = "SearchOrCustomFilter1183156895";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter1304714687__root","search":"SearchOrCustomFilter1304714687__search","searchMobile":"SearchOrCustomFilter1304714687__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1183156895__root","search":"SearchOrCustomFilter1183156895__search","searchMobile":"SearchOrCustomFilter1183156895__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/ToolbarOverflowMenu.tsx

@@ -0,0 +1,323 @@
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Box,
+  IconButton,
+  ListItemAction,
+  Popover,
+  Text,
+  TextButton,
+  Thumbnail,
+} from '@wix/design-system';
+import {
+  ChevronLeft,
+  DataCollection,
+  MoreSmall,
+} from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { ViewTypeState } from '../../state/ViewTypeState';
+import {
+  layoutOptions,
+  layoutConfig,
+} from '../TableGridSwitchButton/layoutConfig';
+
+type Translate = ReturnType<typeof useWixPatternsContainer>['translate'];
+type Focusable = { focus: () => void };
+
+export interface ToolbarOverflowPrimaryItem {
+  text: string;
+  icon: ReactElement;
+  onClick: () => void;
+  dataHook?: string;
+}
+
+export interface ToolbarOverflowSecondaryItem {
+  text: string;
+  prefixIcon: ReactElement;
+  onClick: () => void;
+  dataHook?: string;
+}
+
+export interface ToolbarOverflowLayoutSwitchConfig {
+  viewTypeState: ViewTypeState;
+}
+
+type ActiveView = 'main' | 'layout';
+
+export interface ToolbarOverflowMenuProps {
+  primaryItems: ToolbarOverflowPrimaryItem[];
+  secondaryItems: ToolbarOverflowSecondaryItem[];
+  layoutSwitchConfig?: ToolbarOverflowLayoutSwitchConfig;
+}
+
+export function ToolbarOverflowMenu({
+  primaryItems,
+  secondaryItems,
+  layoutSwitchConfig,
+}: ToolbarOverflowMenuProps) {
+  const [shown, setShown] = useState(false);
+  const [activeView, setActiveView] = useState<ActiveView>('main');
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const focusTargetRef = useRef<'first' | 'layoutSwitch' | null>(null);
+  const { translate: t } = useWixPatternsContainer();
+
+  const shouldFocusTriggerOnCloseRef = useRef(false);
+
+  const close = useCallback(() => {
+    setShown(false);
+    setActiveView('main');
+  }, []);
+
+  const closeAndFocusTrigger = useCallback(() => {
+    shouldFocusTriggerOnCloseRef.current = true;
+    close();
+  }, [close]);
+
+  useEffect(() => {
+    if (!shown && shouldFocusTriggerOnCloseRef.current) {
+      shouldFocusTriggerOnCloseRef.current = false;
+      setTimeout(() => {
+        triggerRef.current?.focus();
+      });
+    }
+  }, [shown]);
+
+  const hasItems =
+    primaryItems.length > 0 ||
+    secondaryItems.length > 0 ||
+    !!layoutSwitchConfig;
+
+  if (!hasItems) {
+    return null;
+  }
+
+  return (
+    <Popover
+      dataHook="toolbar-overflow-menu"
+      shown={shown}
+      placement="bottom"
+      showArrow
+      flip
+      appendTo="parent"
+      onClickOutside={closeAndFocusTrigger}
+      onEscPress={closeAndFocusTrigger}
+      onTabOut={close}
+      zIndex={1101}
+    >
+      <Popover.Element>
+        <IconButton
+          ref={triggerRef}
+          size="small"
+          skin="inverted"
+          dataHook="toolbar-overflow-menu-trigger"
+          aria-label={t('cairo.moreActions')}
+          onClick={() => {
+            setShown((prev) => {
+              if (!prev) {
+                focusTargetRef.current = 'first';
+              }
+              return !prev;
+            });
+          }}
+        >
+          <MoreSmall />
+        </IconButton>
+      </Popover.Element>
+      <Popover.Content>
+        <Box
+          dataHook="toolbar-overflow-menu-content"
+          direction="vertical"
+          minWidth={activeView === 'main' ? '300px' : '184px'}
+          paddingTop="SP1"
+          paddingBottom="SP1"
+        >
+          {activeView === 'main' ? (
+            <MainView
+              primaryItems={primaryItems}
+              secondaryItems={secondaryItems}
+              layoutSwitchConfig={layoutSwitchConfig}
+              onItemClick={closeAndFocusTrigger}
+              onLayoutSwitchClick={() => setActiveView('layout')}
+              focusTarget={focusTargetRef}
+              t={t}
+            />
+          ) : (
+            <LayoutSwitchView
+              config={layoutSwitchConfig!}
+              onBack={() => {
+                focusTargetRef.current = 'layoutSwitch';
+                setActiveView('main');
+              }}
+              onSelect={closeAndFocusTrigger}
+              t={t}
+            />
+          )}
+        </Box>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+function MainView({
+  primaryItems,
+  secondaryItems,
+  layoutSwitchConfig,
+  onItemClick,
+  onLayoutSwitchClick,
+  focusTarget,
+  t,
+}: {
+  primaryItems: ToolbarOverflowPrimaryItem[];
+  secondaryItems: ToolbarOverflowSecondaryItem[];
+  layoutSwitchConfig?: ToolbarOverflowLayoutSwitchConfig;
+  onItemClick: () => void;
+  onLayoutSwitchClick: () => void;
+  focusTarget: React.MutableRefObject<'first' | 'layoutSwitch' | null>;
+  t: Translate;
+}) {
+  const firstItemRef = useRef<Focusable | null>(null);
+  const layoutSwitchRef = useRef<Focusable | null>(null);
+
+  useEffect(() => {
+    const target = focusTarget.current;
+    focusTarget.current = null;
+
+    if (target === 'first') {
+      firstItemRef.current?.focus();
+    } else if (target === 'layoutSwitch') {
+      layoutSwitchRef.current?.focus();
+    }
+  });
+
+  const isFirstItemPrimary = primaryItems.length > 0;
+
+  return (
+    <>
+      {primaryItems.length > 0 && (
+        <Box direction="horizontal" gap="SP2" padding="SP2">
+          {primaryItems.map((item, index) => (
+            <Box key={index} flex={1} minWidth={0}>
+              <Thumbnail
+                ref={index === 0 ? (firstItemRef as any) : undefined}
+                size="tiny"
+                skin="secondary"
+                image={item.icon}
+                onClick={() => {
+                  item.onClick();
+                  onItemClick();
+                }}
+                dataHook={item.dataHook}
+                title={
+                  <Text size="medium" weight="thin">
+                    {item.text}
+                  </Text>
+                }
+                width="100%"
+              />
+            </Box>
+          ))}
+        </Box>
+      )}
+      {layoutSwitchConfig && (
+        <ListItemAction
+          ref={
+            !isFirstItemPrimary
+              ? (r) => {
+                  layoutSwitchRef.current = r;
+                  if (!firstItemRef.current) {
+                    firstItemRef.current = r;
+                  }
+                }
+              : layoutSwitchRef
+          }
+          size="medium"
+          dataHook="overflow-layout-switch"
+          prefixIcon={<DataCollection />}
+          title={t('cairo.table.layout.switchLayout')}
+          onClick={() => {
+            layoutSwitchConfig.viewTypeState.reportLayoutSwitch();
+            onLayoutSwitchClick();
+          }}
+        />
+      )}
+      {secondaryItems.map((item, index) => (
+        <ListItemAction
+          key={index}
+          ref={
+            !isFirstItemPrimary && !layoutSwitchConfig && index === 0
+              ? firstItemRef
+              : undefined
+          }
+          size="medium"
+          title={item.text}
+          onClick={() => {
+            item.onClick();
+            onItemClick();
+          }}
+          prefixIcon={item.prefixIcon}
+          dataHook={item.dataHook}
+        />
+      ))}
+    </>
+  );
+}
+
+function LayoutSwitchView({
+  config,
+  onBack,
+  onSelect,
+  t,
+}: {
+  config: ToolbarOverflowLayoutSwitchConfig;
+  onBack: () => void;
+  onSelect: () => void;
+  t: Translate;
+}) {
+  const { viewTypeState } = config;
+  const activeOptionRef = useRef<Focusable>(null);
+
+  useEffect(() => {
+    activeOptionRef.current?.focus();
+  }, []);
+
+  return (
+    <>
+      <Box padding="SP1 SP3">
+        <TextButton
+          size="small"
+          dataHook="overflow-layout-switch-back"
+          prefixIcon={<ChevronLeft />}
+          onClick={onBack}
+        >
+          {t('cairo.import.back')}
+        </TextButton>
+      </Box>
+      {layoutOptions.map((option, index) => {
+        const isActive = viewTypeState.viewType === option;
+        return (
+          <ListItemAction
+            key={option}
+            ref={isActive ? activeOptionRef : undefined}
+            size="medium"
+            dataHook={`overflow-layout-option-${option}`}
+            prefixIcon={layoutConfig[option].icon as ReactElement}
+            title={t(layoutConfig[option].translationKey)}
+            highlighted={isActive ? true : undefined}
+            onClick={() => {
+              viewTypeState.reportLayoutOptionClicked(option, index);
+              if (!isActive) {
+                viewTypeState.changeViewType(option);
+              }
+              onSelect();
+            }}
+          />
+        );
+      })}
+    </>
+  );
+}

package/src/components/CollectionToolbar/useToolbarOverflowItems.ts

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import {
+  ToolbarOverflowPrimaryItem,
+  ToolbarOverflowSecondaryItem,
+  ToolbarOverflowLayoutSwitchConfig,
+} from './ToolbarOverflowMenu';
+import { ToolbarCollectionState } from '../../state';
+import { ViewTypeState } from '../../state/ViewTypeState';
+import {
+  ContentFilter,
+  Adjust,
+  ChangeOrder,
+  UploadExport,
+  DownloadImport,
+} from '@wix/wix-ui-icons-common';
+
+export interface ToolbarOverflowItems {
+  primaryItems: ToolbarOverflowPrimaryItem[];
+  secondaryItems: ToolbarOverflowSecondaryItem[];
+  layoutSwitchConfig?: ToolbarOverflowLayoutSwitchConfig;
+}
+
+export function useToolbarOverflowItems(
+  state: ToolbarCollectionState<any, any>,
+  props: {
+    customColumns?: unknown;
+    multiLevelSorting?: unknown;
+    exportButton?: unknown;
+    importButton?: unknown;
+    MoreFiltersButton?: unknown;
+    viewTypeState?: ViewTypeState;
+  },
+): ToolbarOverflowItems {
+  const { container, panels, exportState, importState } = state;
+  const { translate: t } = container;
+
+  return useMemo(() => {
+    const primaryItems: ToolbarOverflowPrimaryItem[] = [];
+    const secondaryItems: ToolbarOverflowSecondaryItem[] = [];
+
+    // Primary actions (rendered as Thumbnails)
+    if (props.MoreFiltersButton) {
+      primaryItems.push({
+        text: t('cairo.toolbar.moreFiltersButton', { defaultValue: '' }),
+        icon: React.createElement(ContentFilter),
+        onClick: () => panels.openSidePanel('filters'),
+        dataHook: 'overflow-more-filters',
+      });
+    }
+
+    if (props.customColumns) {
+      primaryItems.push({
+        text: t('cairo.table.custom-columns.button.cta', {
+          defaultValue: '',
+        }),
+        icon: React.createElement(Adjust),
+        onClick: () => panels.openSidePanel('customColumns'),
+        dataHook: 'overflow-custom-columns',
+      });
+    }
+
+    // Secondary actions (rendered as ListItemAction)
+    if (props.multiLevelSorting) {
+      secondaryItems.push({
+        text: t('cairo.table.advanced-sorting.button.cta', {
+          defaultValue: '',
+        }),
+        prefixIcon: React.createElement(ChangeOrder),
+        onClick: () => panels.openSidePanel('multiLevelSorting'),
+        dataHook: 'overflow-multi-level-sorting',
+      });
+    }
+
+    if (props.exportButton && exportState) {
+      secondaryItems.push({
+        text: t('cairo.export.export', { defaultValue: '' }),
+        prefixIcon: React.createElement(UploadExport),
+        onClick: () => exportState.open(),
+        dataHook: 'overflow-export',
+      });
+    }
+
+    if (props.importButton && importState) {
+      secondaryItems.push({
+        text: t('cairo.import.import', { defaultValue: '' }),
+        prefixIcon: React.createElement(DownloadImport),
+        onClick: () => importState.open(),
+        dataHook: 'overflow-import',
+      });
+    }
+
+    const layoutSwitchConfig: ToolbarOverflowLayoutSwitchConfig | undefined =
+      props.viewTypeState
+        ? {
+            viewTypeState: props.viewTypeState,
+          }
+        : undefined;
+
+    return { primaryItems, secondaryItems, layoutSwitchConfig };
+  }, [
+    props.customColumns,
+    props.multiLevelSorting,
+    props.exportButton,
+    props.importButton,
+    props.MoreFiltersButton,
+    props.viewTypeState,
+    t,
+    panels,
+    exportState,
+    importState,
+  ]);
+}

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly844239590";
+var _namespace_ = "AutoCompleteReadonly1590410434";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly844239590__root"};
+export var classes = {"root":"AutoCompleteReadonly1590410434__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown267929420";
+var _namespace_ = "ViewsDropdown2299579084";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown267929420__root"};
+export var classes = {"root":"ViewsDropdown2299579084__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};