Refactor actions, separating out types and utils

Author: kraenhansen

packages/compass-components/src/components/actions/dropdown-menu-button.tsx

@@ -7,9 +7,9 @@ import { Button, Icon, Menu, MenuItem, MenuSeparator } from '../leafygreen';
 import { WorkspaceContainer } from '../workspace-container';
 
 import { ItemActionButtonSize } from './constants';
-import { actionTestId } from './utils';
 import { ActionGlyph } from './action-glyph';
-import { isSeparatorMenuAction, type MenuAction } from './item-action-menu';
+import { actionTestId, isSeparatorMenuAction } from './utils';
+import type { MenuAction } from './types';
 
 const hiddenOnNarrowStyles = css({
   [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:

packages/compass-components/src/components/actions/item-action-group.tsx

@@ -6,9 +6,8 @@ import { MenuSeparator, Tooltip } from '../leafygreen';
 
 import { ItemActionButtonSize } from './constants';
 import type { ItemAction, ItemSeparator } from './types';
-import { isSeparatorMenuAction } from './item-action-menu';
 import { ItemActionButton } from './item-action-button';
-import { actionTestId } from './utils';
+import { actionTestId, isSeparatorMenuAction } from './utils';
 
 export type GroupedItemAction<Action extends string> = ItemAction<Action> & {
   tooltipProps?: Parameters<typeof Tooltip>;

packages/compass-components/src/components/actions/item-action-menu.tsx

@@ -6,22 +6,9 @@ import { Menu, MenuItem, MenuSeparator } from '../leafygreen';
 
 import { ItemActionButtonSize } from './constants';
 import { ActionGlyph } from './action-glyph';
-import type { ItemBase, ItemSeparator } from './types';
+import type { MenuAction } from './types';
 import { SmallIconButton } from './small-icon-button';
-import { actionTestId } from './utils';
-
-export type MenuAction<Action extends string> =
-  | ItemBase<Action>
-  | ItemSeparator;
-
-export function isSeparatorMenuAction(value: unknown): value is ItemSeparator {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'separator' in value &&
-    value.separator === true
-  );
-}
+import { actionTestId, isSeparatorMenuAction } from './utils';
 
 const containerStyle = css({
   flex: 'none',

packages/compass-components/src/components/actions/types.ts

@@ -36,3 +36,7 @@ export type ItemAction<Action extends string> = {
 } & ItemBase<Action>;
 
 export type ItemSeparator = { separator: true };
+
+export type MenuAction<Action extends string> =
+  | ItemBase<Action>
+  | ItemSeparator;

packages/compass-components/src/components/actions/utils.ts

@@ -1,3 +1,14 @@
+import type { ItemSeparator, ItemAction, MenuAction } from './types';
+
+export function isSeparatorMenuAction(value: unknown): value is ItemSeparator {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'separator' in value &&
+    value.separator === true
+  );
+}
+
 export function actionTestId(dataTestId: string | undefined, action: string) {
   return dataTestId ? `${dataTestId}-${action}-action` : undefined;
 }

packages/compass-components/src/index.ts

@@ -51,18 +51,18 @@ import ResizableSidebar, {
   defaultSidebarWidth,
 } from './components/resizeable-sidebar';
 
-import type {
+export type {
   ItemAction,
   ItemComponentProps,
   ItemSeparator,
+  MenuAction,
 } from './components/actions/types';
-import type { GroupedItemAction } from './components/actions/item-action-group';
-import type { MenuAction } from './components/actions/item-action-menu';
+export type { GroupedItemAction } from './components/actions/item-action-group';
 
-import { ItemActionControls } from './components/actions/item-action-controls';
-import { ItemActionGroup } from './components/actions/item-action-group';
-import { ItemActionMenu } from './components/actions/item-action-menu';
-import { DropdownMenuButton } from './components/actions/dropdown-menu-button';
+export { ItemActionControls } from './components/actions/item-action-controls';
+export { ItemActionGroup } from './components/actions/item-action-group';
+export { ItemActionMenu } from './components/actions/item-action-menu';
+export { DropdownMenuButton } from './components/actions/dropdown-menu-button';
 
 export { DocumentIcon } from './components/icons/document-icon';
 export { FavoriteIcon } from './components/icons/favorite-icon';
@@ -108,11 +108,6 @@ export {
 
 export type {
   FileInputBackend,
-  ItemAction,
-  ItemComponentProps,
-  GroupedItemAction,
-  MenuAction,
-  ItemSeparator,
   ElectronFileDialogOptions,
   ElectronShowFileDialogProvider,
 };
@@ -131,10 +126,6 @@ export {
   ResizableSidebar,
   WarningSummary,
   WorkspaceTabs,
-  ItemActionControls,
-  ItemActionGroup,
-  ItemActionMenu,
-  DropdownMenuButton,
   defaultSidebarWidth,
   createElectronFileInputBackend,
   createJSDomFileInputDummyBackend,