feat: allow to set data-* attributes (#221)

Author: ValeraS

src/components/CalendarView/hooks/useCalendarProps.ts

@@ -5,6 +5,7 @@ import type {ButtonButtonProps} from '@gravity-ui/uikit';
 
 import type {CalendarProps} from '../../Calendar/Calendar';
 import {formatDateTime} from '../../utils/dates';
+import {filterDOMProps} from '../../utils/filterDOMProps';
 import {i18n} from '../i18n';
 
 import type {CalendarLayout, CalendarState, RangeCalendarState} from './types';
@@ -29,12 +30,9 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra
     });
 
     const calendarProps: React.HTMLAttributes<HTMLElement> = {
+        ...filterDOMProps(props, {labelable: true}),
         role: 'group',
-        id: props.id,
         'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),
-        'aria-labelledby': props['aria-labelledby'] || undefined,
-        'aria-describedby': props['aria-describedby'] || undefined,
-        'aria-details': props['aria-details'] || undefined,
         'aria-disabled': state.disabled || undefined,
         ...focusWithinProps,
     };

src/components/DateField/DateField.tsx

@@ -6,6 +6,7 @@ import {TextInput, useFocusWithin} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 import {HiddenInput} from '../HiddenInput/HiddenInput';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {useDateFieldProps} from './hooks/useDateFieldProps';
 import type {DateFieldProps} from './hooks/useDateFieldProps';
@@ -27,8 +28,11 @@ export function DateField({className, ...props}: DateFieldProps) {
         },
     });
 
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+
     return (
-        <div className={b(null, className)} style={props.style} {...focusWithinProps}>
+        <div {...DOMProps} className={b(null, className)} style={props.style} {...focusWithinProps}>
             <TextInput
                 {...inputProps}
                 value={state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}

src/components/DatePicker/hooks/useDatePickerProps.ts

@@ -9,6 +9,7 @@ import type {CalendarInstance, CalendarProps} from '../../Calendar';
 import {useDateFieldProps} from '../../DateField';
 import type {DateFieldProps} from '../../DateField';
 import type {RangeValue} from '../../types';
+import {filterDOMProps} from '../../utils/filterDOMProps';
 import {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';
 import {mergeProps} from '../../utils/mergeProps';
 import type {DatePickerProps} from '../DatePicker';
@@ -90,8 +91,12 @@ export function useDatePickerProps<T extends DateTime | RangeValue<DateTime>>(
 
     const {t} = i18n.useTranslation();
 
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+
     return {
         groupProps: {
+            ...DOMProps,
             ref: groupRef,
             tabIndex: -1,
             role: 'group',

src/components/RangeDateField/RangeDateField.tsx

@@ -10,6 +10,7 @@ import {useDateFieldProps} from '../DateField/hooks/useDateFieldProps';
 import type {DateFieldProps} from '../DateField/hooks/useDateFieldProps';
 import {HiddenInput} from '../HiddenInput/HiddenInput';
 import type {RangeValue} from '../types';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {useRangeDateFieldState} from './hooks/useRangeDateFieldState';
 
@@ -37,8 +38,11 @@ export function RangeDateField({className, ...props}: RangeDateFieldProps) {
         },
     });
 
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+
     return (
-        <div className={b(null, className)} style={props.style} {...focusWithinProps}>
+        <div {...DOMProps} className={b(null, className)} style={props.style} {...focusWithinProps}>
             <TextInput
                 {...inputProps}
                 value={state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}

src/components/RelativeDateField/RelativeDateField.tsx

@@ -19,6 +19,7 @@ import type {
     TextInputExtendProps,
     TextInputProps,
 } from '../types';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {useRelativeDateFieldProps} from './hooks/useRelativeDateFieldProps';
 import {useRelativeDateFieldState} from './hooks/useRelativeDateFieldState';
@@ -65,8 +66,12 @@ export function RelativeDateField(props: RelativeDateFieldProps) {
         isDisabled: isMobile,
     });
 
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+
     return (
         <div
+            {...DOMProps}
             role="group"
             className={b(null, props.className)}
             style={props.style}

src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts

@@ -8,6 +8,7 @@ import {useDateFieldProps} from '../../DateField';
 import type {DateFieldProps} from '../../DateField';
 import {getCalendarModes} from '../../DatePicker/utils';
 import {useRelativeDateFieldProps} from '../../RelativeDateField';
+import {filterDOMProps} from '../../utils/filterDOMProps';
 import {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';
 import {mergeProps} from '../../utils/mergeProps';
 import type {RelativeDatePickerProps} from '../RelativeDatePicker';
@@ -136,8 +137,12 @@ export function useRelativeDatePickerProps(
 
     const {t} = i18n.useTranslation();
 
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+
     return {
         groupProps: {
+            ...DOMProps,
             ref: groupRef,
             tabIndex: -1,
             role: 'group',

src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx

@@ -7,6 +7,7 @@ import {useControlledState, useFocusWithin, useMobile} from '@gravity-ui/uikit';
 import {block} from '../../utils/cn';
 import {HiddenInput} from '../HiddenInput/HiddenInput';
 import type {Value} from '../RelativeDatePicker';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {Control} from './components/Control/Control';
 import {PickerDialog} from './components/PickerDialog/PickerDialog';
@@ -43,8 +44,12 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
         },
     });
 
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+
     return (
         <div
+            {...DOMProps}
             ref={setAnchor}
             {...focusWithinProps}
             className={b(null, props.className)}