feat: checkbox_group re-export (#2212)

Resolves #2211 

Needed for changes in plugins PR:
deephaven/deephaven-plugins#813

Author: AkshatJawne

packages/code-studio/src/styleguide/CheckboxGroups.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { CheckboxGroup, Flex, Text } from '@deephaven/components';
+// eslint-disable-next-line no-restricted-imports
+import { Checkbox } from '@adobe/react-spectrum';
+import SampleSection from './SampleSection';
+
+export function CheckboxGroups(): JSX.Element {
+  return (
+    <SampleSection name="checkbox-groups">
+      <h2 className="ui-title">Checkbox Groups</h2>
+      <Flex gap="size-100" gridColumn="span 3" height="100%">
+        <Flex direction="column">
+          <Text>Single Child</Text>
+          <CheckboxGroup aria-label="Single Child">
+            <Checkbox value="Aaa">Aaa</Checkbox>
+          </CheckboxGroup>
+        </Flex>
+
+        <Flex direction="column">
+          <Text>Multiple Children</Text>
+          <CheckboxGroup aria-label="Multiple Children">
+            <Checkbox value="Aaa">Aaa</Checkbox>
+            <Checkbox value="Bbb">Bbb</Checkbox>
+            <Checkbox value="Ccc">Ccc</Checkbox>
+          </CheckboxGroup>
+        </Flex>
+
+        <Flex direction="column">
+          <Text>Mixed Children Types</Text>
+          <CheckboxGroup aria-label="Mixed Children Types">
+            {/* eslint-disable react/jsx-curly-brace-presence */}
+            {'String 1'}
+            {'String 2'}
+            {444}
+            {999}
+            {true}
+            {false}
+            <Checkbox>Aaa</Checkbox>
+          </CheckboxGroup>
+        </Flex>
+      </Flex>
+    </SampleSection>
+  );
+}
+
+export default CheckboxGroups;

packages/code-studio/src/styleguide/StyleGuide.tsx

@@ -40,6 +40,7 @@ import Pickers from './Pickers';
 import ListViews from './ListViews';
 import ErrorViews from './ErrorViews';
 import XComponents from './XComponents';
+import CheckboxGroups from './CheckboxGroups';
 
 const stickyProps = {
   position: 'sticky',
@@ -118,6 +119,7 @@ function StyleGuide(): React.ReactElement {
         <ItemListInputs />
         <DraggableLists />
         <TimeSliderInputs />
+        <CheckboxGroups />
         <Dialog />
         <Modals />
         <ContextMenus />

packages/components/src/spectrum/CheckboxGroup.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-array-index-key */
+import { isElementOfType } from '@deephaven/react-hooks';
+import React, { type ReactNode, useMemo } from 'react';
+import {
+  Checkbox,
+  CheckboxGroup as SpectrumCheckboxGroup,
+  type SpectrumCheckboxGroupProps,
+} from '@adobe/react-spectrum';
+import { ensureArray } from '@deephaven/utils';
+
+export type CheckboxGroupProps = {
+  children: ReactNode;
+} & Omit<SpectrumCheckboxGroupProps, 'children'>;
+
+/**
+ * Augmented version of the Spectrum CheckboxGroup component that supports
+ * primitive item children.
+ */
+export function CheckboxGroup({
+  children,
+  ...props
+}: CheckboxGroupProps): JSX.Element {
+  const wrappedChildren = useMemo(
+    () =>
+      ensureArray(children).map(child =>
+        isElementOfType(child, Checkbox) ? (
+          child
+        ) : (
+          <Checkbox key={String(child)} value={String(child)}>
+            {String(child)}
+          </Checkbox>
+        )
+      ),
+    [children]
+  );
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <SpectrumCheckboxGroup {...props}>{wrappedChildren}</SpectrumCheckboxGroup>
+  );
+}
+
+export default CheckboxGroup;

packages/components/src/spectrum/forms.ts

@@ -1,8 +1,6 @@
 export {
   Checkbox as SpectrumCheckbox,
   type SpectrumCheckboxProps,
-  CheckboxGroup,
-  type SpectrumCheckboxGroupProps as CheckboxGroupProps,
   Form,
   type SpectrumFormProps as FormProps,
   NumberField,

packages/components/src/spectrum/index.ts

@@ -26,6 +26,7 @@ export * from './picker';
 export * from './Heading';
 export * from './Text';
 export * from './View';
+export * from './CheckboxGroup';
 
 /**
  * Custom DH spectrum utils

tests/styleguide.spec.ts

@@ -48,6 +48,7 @@ const sampleSectionIds: string[] = [
   'sample-section-spectrum-forms',
   'sample-section-spectrum-overlays',
   'sample-section-spectrum-well',
+  'sample-section-checkbox-groups',
 ];
 const buttonSectionIds: string[] = [
   'sample-section-buttons-regular',