fix(ListBox): add component and fix other docs (#712)

Author: tenphi

.changeset/rare-spies-obey.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Unify the focused state in Menu component.

.changeset/short-bottles-fold.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix errorMessage type.

src/components/fields/Checkbox/CheckboxGroup.tsx

@@ -46,7 +46,7 @@ const CheckGroupElement = tasty({
 
 export interface CubeCheckboxGroupProps
   extends BaseProps,
-    AriaCheckboxGroupProps,
+    Omit<AriaCheckboxGroupProps, 'errorMessage'>,
     FieldBaseProps,
     ContainerStyleProps {
   orientation?: 'vertical' | 'horizontal';

src/components/fields/ComboBox/ComboBox.stories.tsx

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 import { IconCoin } from '@tabler/icons-react';
 
-import { SELECTED_KEY_ARG } from '../../../stories/FormFieldArgs';
 import { baseProps } from '../../../stories/lists/baseProps';
 import { wait } from '../../../test/utils/wait';
 import { Button } from '../../actions/index';
@@ -12,7 +11,7 @@ import { Flow } from '../../layout/Flow';
 import { ComboBox, CubeComboBoxProps } from './ComboBox';
 
 export default {
-  title: 'Pickers/ComboBox',
+  title: 'Forms/ComboBox',
   component: ComboBox,
   subcomponents: { Item: ComboBox.Item, Section: ComboBox.Section },
   args: { id: 'name', width: '200px', label: 'Choose your favourite color' },

src/components/fields/ComboBox/ComboBox.tsx

@@ -22,6 +22,7 @@ import { Section as BaseSection, Item, useComboBoxState } from 'react-stately';
 import { useEvent } from '../../../_internal/index';
 import { DownIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
+import { FieldBaseProps } from '../../../shared';
 import {
   BASE_STYLES,
   COLOR_STYLES,
@@ -96,8 +97,9 @@ export interface CubeComboBoxProps<T>
       CubeSelectBaseProps<T>,
       'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'
     >,
-    AriaComboBoxProps<T>,
-    AriaTextFieldProps {
+    Omit<AriaComboBoxProps<T>, 'errorMessage'>,
+    Omit<AriaTextFieldProps, 'errorMessage'>,
+    FieldBaseProps {
   defaultSelectedKey?: string | null;
   selectedKey?: string | null;
   onSelectionChange?: (selectedKey: string | null) => void;

src/components/fields/DatePicker/DateInput.tsx

@@ -28,7 +28,7 @@ import { DEFAULT_DATE_PROPS } from './props';
 import { formatSegments, useFocusManagerRef } from './utils';
 
 export interface CubeDateInputProps<T extends DateValue = DateValue>
-  extends AriaDateFieldProps<T>,
+  extends Omit<AriaDateFieldProps<T>, 'errorMessage'>,
     BaseProps,
     ContainerStyleProps,
     FieldBaseProps {

src/components/fields/DatePicker/DatePicker.tsx

@@ -33,7 +33,7 @@ import { DateFieldBase } from './types';
 import { useFocusManagerRef } from './utils';
 
 export interface CubeDatePickerProps<T extends DateValue = DateValue>
-  extends AriaDatePickerProps<T>,
+  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,
     DateFieldBase<T>,
     BaseProps,
     ContainerStyleProps,

src/components/fields/DatePicker/DatePickerInput.tsx

@@ -26,7 +26,7 @@ const DateInputElement = tasty({
 });
 
 interface CubeDatePickerInputProps<T extends DateValue>
-  extends AriaDatePickerProps<T>,
+  extends Omit<AriaDatePickerProps<T>, 'errorMessage'>,
     DateFieldBase<T> {
   hideValidationIcon?: boolean;
   maxGranularity?: Granularity;

src/components/fields/DatePicker/DateRangePicker.tsx

@@ -44,7 +44,7 @@ const DateRangeDash = tasty({
 });
 
 export interface CubeDateRangePickerProps<T extends DateValue = DateValue>
-  extends AriaDateRangePickerProps<T>,
+  extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,
     BaseProps,
     DateFieldBase<T>,
     ContainerStyleProps,

src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx

@@ -46,7 +46,7 @@ const DateRangeDash = tasty({
 
 export interface CubeDateRangeSeparatedPickerProps<
   T extends DateValue = DateValue,
-> extends AriaDateRangePickerProps<T>,
+> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>,
     BaseProps,
     ContainerStyleProps,
     DateFieldBase<T>,