Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx (TypeScript)

Code before:
  align-items: center;
  gap: ${({ theme }) => theme.spacing(1)};
  padding: ${({ theme, noPadding }) => (noPadding ? '0' : theme.spacing(2))};
  padding-bottom: 0;
`;

type RelativeDatePickerHeaderProps = {
  direction: RelativeDateFilterDirection;
  amount?: Nullable<number>;
  unit: RelativeDateFilterUnit;
  onChange?: (value: RelativeDateFilter) => void;
  isFormField?: boolean;
  readonly?: boolean;
  unitDropdownWidth?: number;
};

export const RelativeDatePickerHeader = ({
  direction,
  unit,
  amount,
  isFormField,
  onChange,
  readonly,
  unitDropdownWidth,
}: RelativeDatePickerHeaderProps) => {
  const instanceId = useId();

  const amountString = amount?.toString() ?? '';

  const textInputValue = direction === 'THIS' ? '' : amountString;
  const textInputPlaceholder = direction === 'THIS' ? '-' : 'Number';

  const isUnitPlural = amount && amount > 1 && direction !== 'THIS';
  const unitSelectOptions = RELATIVE_DATE_UNITS_SELECT_OPTIONS.map((unit) => ({
    ...unit,
    label: `${unit.label}${isUnitPlural ? 's' : ''}`,
  }));

  return (
    <StyledContainer noPadding={isFormField ?? false}>
      <Select
        dropdownId={`direction-select-${instanceId}`}
        value={direction}
        onChange={(newDirection) => {
          if (amount === undefined && newDirection !== 'THIS') {
            return;
          }

          onChange?.({
            direction: newDirection,
            amount: amount,

Review comment (suggestion):
I suggest not using useId has it is not resistant to re-renders, we should always use a static if that we can obtain from the context.

Code after:
  gap: ${({ theme }) => theme.spacing(1)};
  padding: ${({ theme, noPadding }) => (noPadding ? '0' : theme.spacing(2))};
  padding-bottom: 0;
`;

type RelativeDatePickerHeaderProps = {
  instanceId: string;
  direction: RelativeDateFilterDirection;
  amount?: Nullable<number>;
  unit: RelativeDateFilterUnit;
  onChange?: (value: RelativeDateFilter) => void;
  isFormField?: boolean;
  readonly?: boolean;
  unitDropdownWidth?: number;
};

export const RelativeDatePickerHeader = ({
  instanceId,
  direction,
  unit,
  amount,
  isFormField,
  onChange,
  readonly,
  unitDropdownWidth,
}: RelativeDatePickerHeaderProps) => {
  const amountString = amount?.toString() ?? '';

  const textInputValue = direction === 'THIS' ? '' : amountString;
  const textInputPlaceholder = direction === 'THIS' ? '-' : 'Number';

  const isUnitPlural = amount && amount > 1 && direction !== 'THIS';
  const unitSelectOptions = RELATIVE_DATE_UNITS_SELECT_OPTIONS.map((unit) => ({
    ...unit,
    label: `${unit.label}${isUnitPlural ? 's' : ''}`,
  }));

  return (
    <StyledContainer noPadding={isFormField ?? false}>
      <Select
        dropdownId={`direction-select-${instanceId}`}
        value={direction}
        onChange={(newDirection) => {
          if (amount === undefined && newDirection !== 'THIS') {
            return;
          }

          onChange?.({
            direction: newDirection,
            amount: amount,
            unit: unit,