diff --git a/package-lock.json b/package-lock.json index 2622b62b4e..73ad2e10d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2749,9 +2749,9 @@ } }, "node_modules/@internationalized/date": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz", - "integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==", + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz", + "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==", "dependencies": { "@swc/helpers": "^0.5.0" } @@ -29206,6 +29206,7 @@ "@deephaven/utils": "file:../utils", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@internationalized/date": "^3.5.5", "@react-spectrum/theme-default": "^3.5.1", "@react-spectrum/utils": "^3.11.5", "@react-types/radio": "^3.8.1", @@ -31652,6 +31653,7 @@ "@deephaven/utils": "file:../utils", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@internationalized/date": "*", "@react-spectrum/theme-default": "^3.5.1", "@react-spectrum/utils": "^3.11.5", "@react-types/radio": "^3.8.1", @@ -32662,9 +32664,9 @@ "dev": true }, "@internationalized/date": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz", - "integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==", + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz", + "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==", "requires": { "@swc/helpers": "^0.5.0" } diff --git a/packages/code-studio/src/styleguide/CheckboxGroups.tsx b/packages/code-studio/src/styleguide/CheckboxGroups.tsx new file mode 100644 index 0000000000..ebe8cd3c9e --- /dev/null +++ b/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 ( + +

Checkbox Groups

+ + + Single Child + + Aaa + + + + + Multiple Children + + Aaa + Bbb + Ccc + + + + + Mixed Children Types + + {/* eslint-disable react/jsx-curly-brace-presence */} + {'String 1'} + {'String 2'} + {444} + {999} + {true} + {false} + Aaa + + + + + ); +} + +export default CheckboxGroups; diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx index c2a24bfb31..89e396f75f 100644 --- a/packages/code-studio/src/styleguide/StyleGuide.tsx +++ b/packages/code-studio/src/styleguide/StyleGuide.tsx @@ -39,6 +39,7 @@ import SpectrumComparison from './SpectrumComparison'; import Pickers from './Pickers'; import ListViews from './ListViews'; import ErrorViews from './ErrorViews'; +import CheckboxGroups from './CheckboxGroups'; const stickyProps = { position: 'sticky', @@ -117,6 +118,7 @@ function StyleGuide(): React.ReactElement { + diff --git a/packages/components/package.json b/packages/components/package.json index 65b10b928d..8c8fee305d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -31,6 +31,7 @@ "@deephaven/utils": "file:../utils", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@internationalized/date": "^3.5.5", "@react-spectrum/theme-default": "^3.5.1", "@react-spectrum/utils": "^3.11.5", "@react-types/radio": "^3.8.1", diff --git a/packages/components/src/spectrum/CheckboxGroup.tsx b/packages/components/src/spectrum/CheckboxGroup.tsx new file mode 100644 index 0000000000..2cfd701c8c --- /dev/null +++ b/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; + +/** + * 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 + ) : ( + + {String(child)} + + ) + ), + [children] + ); + + return ( + // eslint-disable-next-line react/jsx-props-no-spreading + {wrappedChildren} + ); +} + +export default CheckboxGroup; diff --git a/packages/components/src/spectrum/dateAndTime.ts b/packages/components/src/spectrum/dateAndTime.ts index c866dc4486..4e4c164be7 100644 --- a/packages/components/src/spectrum/dateAndTime.ts +++ b/packages/components/src/spectrum/dateAndTime.ts @@ -1,3 +1,9 @@ +import { + CalendarDate, + CalendarDateTime, + ZonedDateTime, +} from '@internationalized/date'; + export { Calendar, type SpectrumCalendarProps as CalendarProps, @@ -12,3 +18,17 @@ export { TimeField, type SpectrumTimeFieldProps as TimeFieldProps, } from '@adobe/react-spectrum'; + +export type { CalendarDate, CalendarDateTime, ZonedDateTime }; + +// This is the type for the DatePicker value +export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; + +// This is the type for DatePicker onChange +export type MappedDateValue = T extends ZonedDateTime + ? ZonedDateTime + : T extends CalendarDateTime + ? CalendarDateTime + : T extends CalendarDate + ? CalendarDate + : never; diff --git a/packages/components/src/spectrum/forms.ts b/packages/components/src/spectrum/forms.ts index 584ff2bc9d..3663bd47b2 100644 --- a/packages/components/src/spectrum/forms.ts +++ b/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, diff --git a/packages/components/src/spectrum/index.ts b/packages/components/src/spectrum/index.ts index 28630b2da9..6b4f5a84f2 100644 --- a/packages/components/src/spectrum/index.ts +++ b/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 diff --git a/tests/styleguide.spec.ts b/tests/styleguide.spec.ts index 6b9ed4d958..b444f4d3ef 100644 --- a/tests/styleguide.spec.ts +++ b/tests/styleguide.spec.ts @@ -47,6 +47,7 @@ const sampleSectionIds: string[] = [ 'sample-section-spectrum-overlays', 'sample-section-spectrum-well', 'sample-section-error-views', + 'sample-section-checkbox-groups', ]; const buttonSectionIds: string[] = [ 'sample-section-buttons-regular', diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png new file mode 100644 index 0000000000..6e8e7e9e03 Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png differ diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png new file mode 100644 index 0000000000..8759cf8fe6 Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png differ diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png new file mode 100644 index 0000000000..cbfacc3df7 Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png differ