Add splitBySeparator util

Author: kraenhansen

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

@@ -0,0 +1,52 @@
+import { expect } from 'chai';
+import { splitBySeparator } from './utils';
+
+describe('item action utils', function () {
+  describe('splitBySeparator', function () {
+    it('returns an empty array for an empty input', function () {
+      const result = splitBySeparator([]);
+      expect(result).is.empty;
+    });
+
+    it('returns a single item for a single input', function () {
+      const result = splitBySeparator([{ label: 'Foo', action: 'foo' }]);
+      expect(result).deep.equal([[{ label: 'Foo', action: 'foo' }]]);
+    });
+
+    it('splits four items separated by a separator', function () {
+      const result = splitBySeparator([
+        { label: 'Foo', action: 'foo' },
+        { label: 'Bar', action: 'bar' },
+        { separator: true },
+        { label: 'Baz', action: 'baz' },
+        { label: 'Qux', action: 'qux' },
+      ]);
+      expect(result).deep.equal([
+        [
+          { label: 'Foo', action: 'foo' },
+          { label: 'Bar', action: 'bar' },
+        ],
+        [
+          { label: 'Baz', action: 'baz' },
+          { label: 'Qux', action: 'qux' },
+        ],
+      ]);
+    });
+
+    it('disregards leading separators', function () {
+      const result = splitBySeparator([
+        { separator: true },
+        { label: 'Foo', action: 'foo' },
+      ]);
+      expect(result).deep.equal([[{ label: 'Foo', action: 'foo' }]]);
+    });
+
+    it('disregards trailing separators', function () {
+      const result = splitBySeparator([
+        { label: 'Foo', action: 'foo' },
+        { separator: true },
+      ]);
+      expect(result).deep.equal([[{ label: 'Foo', action: 'foo' }]]);
+    });
+  });
+});

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

@@ -1,4 +1,4 @@
-import type { ItemSeparator, ItemAction, MenuAction } from './types';
+import type { ItemBase, ItemSeparator, MenuAction } from './types';
 
 export function isSeparatorMenuAction(value: unknown): value is ItemSeparator {
   return (
@@ -12,3 +12,24 @@ export function isSeparatorMenuAction(value: unknown): value is ItemSeparator {
 export function actionTestId(dataTestId: string | undefined, action: string) {
   return dataTestId ? `${dataTestId}-${action}-action` : undefined;
 }
+
+export function splitBySeparator<Action extends string>(
+  actions: MenuAction<Action>[]
+) {
+  const result: ItemBase<Action>[][] = [];
+  let currentGroup: ItemBase<Action>[] = [];
+  for (const action of actions) {
+    if (isSeparatorMenuAction(action)) {
+      if (currentGroup.length > 0) {
+        result.push(currentGroup);
+        currentGroup = [];
+      }
+    } else {
+      currentGroup.push(action);
+    }
+  }
+  if (currentGroup.length > 0) {
+    result.push(currentGroup);
+  }
+  return result;
+}

packages/compass-components/src/index.ts

@@ -57,6 +57,7 @@ export type {
   ItemSeparator,
   MenuAction,
 } from './components/actions/types';
+export { splitBySeparator } from './components/actions/utils';
 export type { GroupedItemAction } from './components/actions/item-action-group';
 
 export { ItemActionControls } from './components/actions/item-action-controls';