@gravity-ui/date-components 3.4.2 → 4.1.0

package/dist/docs/INDEX.md

@@ -0,0 +1,131 @@
+# @gravity-ui/date-components documentation
+
+Documentation for the **installed** version of `@gravity-ui/date-components`.
+Your training data may be outdated — these files are the source of truth.
+
+Paths are relative to this file (`node_modules/@gravity-ui/date-components/dist/docs/`).
+
+## For AI agents
+
+React date and time controls for Gravity UI apps — date/time pickers, calendars, and absolute/relative range selectors built on `@gravity-ui/date-utils`.
+
+### When to use
+
+- A single date or date-time input: `DatePicker`, `DateField`.
+- Calendars for month/day selection: `Calendar`, `CalendarView`.
+- Date ranges: `RangeDatePicker`, `RangeCalendar`, `RangeDateField`.
+- Relative and mixed absolute/relative ranges (e.g. "last 7 days"): `RelativeDatePicker`, `RelativeRangeDatePicker`, `RelativeDateField`.
+
+### When not to use
+
+- Plain text or number inputs, buttons, or other generic controls — use [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit).
+- Low-level date math, parsing, formatting, or timezone handling without UI — use [`@gravity-ui/date-utils`](https://github.com/gravity-ui/date-utils) directly.
+
+### Common pitfalls
+
+- **Values are `DateTime` objects, not JS `Date`.** Components work with `dateTime()` from [`@gravity-ui/date-utils`](https://github.com/gravity-ui/date-utils); pass and read `DateTime`, not native `Date` or ISO strings.
+- **Requires uikit setup.** Render inside `ThemeProvider` and import `@gravity-ui/uikit/styles/styles.css`; `@gravity-ui/uikit` and `@gravity-ui/date-utils` are required peer dependencies.
+- **Locale is loaded, not just set.** Set language via `ThemeProvider` `lang`, but load the locale data first with `settings.loadLocale('ru')` from `@gravity-ui/date-utils`, or dates render in the default locale.
+- **Component-specific translations use `addLanguageKeysets`.** For languages beyond `en`/`ru`, register keysets via `addLanguageKeysets` from `@gravity-ui/uikit/i18n` using the `Keysets`/`PartialKeysets` types exported here.
+
+## Install
+
+```shell
+npm install react react-dom @gravity-ui/uikit @gravity-ui/date-components @gravity-ui/date-utils
+```
+
+## Usage
+
+```jsx
+import {createRoot} from 'react-dom/client';
+import {DatePicker} from '@gravity-ui/date-components';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/styles.css';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <h1>DatePicker</h1>
+      <form>
+        <label htmlFor="date-picker">Date: </label>
+        <DatePicker id="date-picker" name="date" />
+      </form>
+    </ThemeProvider>
+  );
+}
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+### Localization
+
+```jsx
+import {settings} from '@gravity-ui/date-utils';
+
+// Load date locales that will be used in an application.
+await settings.loadLocale('ru');
+
+function App() {
+  return (
+    // Set the language to use with components.
+    <ThemeProvider lang="ru">
+      <h1>DatePicker</h1>
+      <form>
+        <label htmlFor="date-picker">Дата: </label>
+        <DatePicker id="date-picker" name="date" />
+      </form>
+    </ThemeProvider>
+  );
+}
+```
+
+If the app supports language switching, preload all supported locales when the app first loads, or load the locales before switching the language:
+
+```jsx
+// Preload locales
+await Promise.all([settings.loadLocale('ru'), settings.loadLocale('nl')]);
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+
+// or load locales on demand.
+
+function App() {
+  const [lang, setLang] = React.useState('en');
+
+  const handleLangChange = (newLang) => {
+    settings.loadLocale(newLang).then(() => {
+      setLang(newLang);
+    });
+  };
+
+  return <ThemeProvider lang={lang}>...</ThemeProvider>;
+}
+```
+
+The components have translations into English and Russian. To add translations into other languages, use `addLanguageKeysets` from `@gravity-ui/uikit`:
+
+```ts
+import {addLanguageKeysets} from '@gravity-ui/uikit/i18n';
+import type {Keysets, PartialKeysets} from '@gravity-ui/date-components';
+
+// Use the Keyset type to specify translations for all available components
+addLanguageKeysets<Keysets>(lang, {...});
+
+// or use the PartialKeysets type to specify only the ones you need
+addLanguageKeysets<PartialKeysets>(lang, {...});
+
+// To specify translations for some components
+addLanguageKeysets<Pick<Keysets, 'g-date-calendar' | 'g-date-date-field' | 'g-date-date-picker'>>(lang, {...});
+```
+
+## Components
+
+- [Calendar](./components/Calendar.md) — Calendar is a flexible, user-friendly calendar component for React applications. It allows users to view, select, and manage dates with ease. Ideal for event scheduling, booking systems, and any application where date selection is essential. It can be controlled if you set value property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property defaultValue. Component is uncontrolled by default.
+- [DateField](./components/DateField.md) — DateField component is a versatile and convenient input field specifically designed for date entry in React applications. With an intuitive interface and easy integration, it's perfect for any form that requires date or time input, such as event schedulers, booking systems, or data-driven reports. It can be controlled if you set value property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property defaultValue. Component is uncontrolled by default.
+- [DatePicker](./components/DatePicker.md) — DatePicker is a sophisticated, lightweight, and fully customizable component designed to provide intuitive date picking functionality in your React applications. Built with user experience and ease of integration in mind, it fits seamlessly within forms, modals, or any UI element requiring date input. It can be controlled if you set value property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property defaultValue. Component is uncontrolled by default.
+- [RangeCalendar](./components/RangeCalendar.md) — RangeCalendar is a powerful, flexible, and user-friendly UI component designed for selecting a range of dates. Built with React, it combines the functionality of a calendar and a date range picker, making it an ideal choice for applications that require users to input a start and end date. It can be controlled if you set value property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property defaultValue. Component is uncontrolled by default.
+- [RelativeDateField](./components/RelativeDateField.md) — RelativeDateField component is used only for entering relative dates. It can't be used as "normal" DateField.
+- [RelativeDatePicker](./components/RelativeDatePicker.md) — RelativeDatePicker is almost the same component as DatePicker but it has ability to use relative dates.

package/dist/docs/components/Calendar.md

@@ -0,0 +1,125 @@
+# Calendar
+
+`Calendar` is a flexible, user-friendly calendar component for React applications. It allows users to view, select, and manage dates with ease. Ideal for event scheduling, booking systems, and any application where date selection is essential. It can be controlled if you set `value` property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property `defaultValue`. Component is uncontrolled by default.
+
+```tsx
+import {Calendar} from '@gravity-ui/date-components';
+```
+
+## Useful addition
+
+To set dates in the right format you may need to include additional helpers from [Date Utils library](https://gravity-ui.com/libraries/date-utils)
+
+```tsx
+import {dateTimeParse} from '@gravity-ui/date-utils';
+```
+
+## Size
+
+To control the size of the `Calendar` use the `size` property. Default size is `m`.
+
+```tsx
+<Calendar size="m" />
+<Calendar size="l" />
+<Calendar size="xl" />
+```
+
+## Value
+
+### Min and max value
+
+The `minValue` property allows you to specify the earliest date and time that can be entered by the user. Conversely, the `maxValue` property specifies the latest date and time that can be entered. All other values will be disabled for user.
+
+```tsx
+<Calendar minValue={dateTimeParse('01.01.2024')} maxValue={dateTimeParse('01.01.2025')} />
+```
+
+## Mode
+
+Defines the time interval that `Calendar` should display. With `mode` you can choose it in controlled way. For uncontrolled way you don't need to specify any value. Also you can set the initial mode in uncontrolled way with `defaultMode` prop.
+
+`days` - default mode for `Calendar`. It shows days in month.
+
+`months` - shows months in year
+
+`quarters` - shows quarters by years (not available as value in `defaultMode`)
+
+`years` - shows several years for select
+
+You can limit enabled modes by using prop `modes`.
+
+```tsx
+<Calendar defaultMode="months" />
+```
+
+## States
+
+### Disabled
+
+The state of the `Calendar` where you don't want the user to be able to interact with the component.
+
+```tsx
+<Calendar disabled={true} />
+```
+
+### Readonly
+
+`readOnly` is a boolean attribute that, when set to true, makes the `Calendar` component immutable to the user. This means that while the input will display its current value, users will not be able to change it.
+
+```tsx
+<Calendar readOnly={true} />
+```
+
+## Focused value
+
+Allows to select the date that `Calendar` view is focused on. If you need it to be controlled you should use `focusedValue` prop. You can set the initial focused value for uncontrolled component with optional prop `defaultFocusedValue`.
+
+```tsx
+<Calendar defaultFocusedValue={dateTimeParse('01.01.2020')} />
+```
+
+## Multiple selection
+
+Set the `selectionMode="multiple"` prop to enable the user to select multiple dates. When multiple selection is enabled, the value prop should be an array of dates instead of a single date, and onChange will be called with an array.
+
+```tsx
+<Calendar selectionMode="multiple" />
+```
+
+## Time zone
+
+`timeZone` is the property to set the time zone of the value in the input. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)
+
+## Properties
+
+| Name                                  | Description                                                                                                          |                               Type                               |                           Default                           |
+| :------------------------------------ | :------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------: | :---------------------------------------------------------: |
+| aria-describedby                      | The control's `aria-describedby` attribute                                                                           |                             `string`                             |                                                             |
+| aria-details                          | The control's `aria-details` attribute                                                                               |                             `string`                             |                                                             |
+| aria-label                            | The control's `aria-label` attribute                                                                                 |                             `string`                             |                                                             |
+| aria-labelledby                       | The control's `aria-labelledby` attribute                                                                            |                             `string`                             |                                                             |
+| autoFocus                             | The control's `autofocus` attribute                                                                                  |                            `boolean`                             |                                                             |
+| className                             | The control's wrapper class name                                                                                     |                             `string`                             |                                                             |
+| [defaultFocusedValue](#focused-value) | The date that is focused when the calendar first mounts (uncontrolled)                                               |                            `DateTime`                            |                                                             |
+| [defaultMode](#mode)                  | Initial mode to show in calendar                                                                                     |                `days` `months` `quarters` `years`                |                                                             |
+| [defaultValue](#value)                | Sets the initial value for uncontrolled component.                                                                   |                            `DateTime`                            |                                                             |
+| [disabled](#disabled)                 | Indicates that the user cannot interact with the control                                                             |                            `boolean`                             |                           `false`                           |
+| [focusedValue](#focused-value)        | Set the default view of uncontrolled component which includes this value                                             |                        `DateTime` `null`                         |                                                             |
+| id                                    | The control's `id` attribute                                                                                         |                             `string`                             |                                                             |
+| isDateUnavailable                     | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.             |                 `((date: DateTime) => boolean)`                  |                                                             |
+| isWeekend                             | Callback that is called for each date of the calendar. If it returns true, then the date is weekend.                 |                 `((date: DateTime) => boolean)`                  |                                                             |
+| [maxValue](#min-and-max-value)        | The maximum allowed date that a user may select.                                                                     |                            `DateTime`                            |                                                             |
+| [minValue](#min-and-max-value)        | The minimum allowed date that a user may select.                                                                     |                            `DateTime`                            |                                                             |
+| [mode](#mode)                         | Defines the time interval that `Calendar` should display in controlled way.                                          |                `days` `months` `quarters` `years`                |                                                             |
+| modes                                 | Modes available to user                                                                                              |            `Partial<Record<CalendarLayout, boolean>>`            | `{days: true, months: true, quarters: false, years: true }` |
+| onBlur                                | Fires when the control lost focus. Provides focus event as a callback's argument                                     |          `((e: FocusEvent<Element, Element>) => void)`           |                                                             |
+| onFocus                               | Fires when the control gets focus. Provides focus event as a callback's argument                                     |          `((e: FocusEvent<Element, Element>) => void)`           |                                                             |
+| onFocusUpdate                         | Fires when the control's focused date changes.                                                                       |                   `((date: DateTime) => void)`                   |                                                             |
+| onUpdate                              | Fires when the value is changed.                                                                                     |                   `((value: DateTime) => void`                   |                                                             |
+| onUpdateMode                          | Fires when the mode is changed.                                                                                      | `((value: 'days' \| 'months' \| 'quarters' \| 'years' ) => void` |                                                             |
+| [readOnly](#readonly)                 | Whether the calendar value is immutable.                                                                             |                            `boolean`                             |                           `false`                           |
+| [size](#size)                         | The size of the control                                                                                              |                        `"m"` `"l"` `"xl"`                        |                            `"m"`                            |
+| selectionMode                         | Whether single or multiple selection is enabled.                                                                     |                     `'single' \| 'multiple'`                     |                         `'single'`                          |
+| style                                 | Sets inline style for the element.                                                                                   |                         `CSSProperties`                          |                                                             |
+| [timeZone](#time-zone)                | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) |                             `string`                             |                                                             |
+| [value](#calendar)                    | The value of the control                                                                                             |                        `DateTime` `null`                         |                                                             |

package/dist/docs/components/DateField.md

@@ -0,0 +1,206 @@
+# DateField
+
+`DateField` component is a versatile and convenient input field specifically designed for date entry in React applications. With an intuitive interface and easy integration, it's perfect for any form that requires date or time input, such as event schedulers, booking systems, or data-driven reports. It can be controlled if you set `value` property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property `defaultValue`. Component is uncontrolled by default.
+
+```tsx
+import {DateField} from '@gravity-ui/date-components';
+```
+
+## Useful addition
+
+To set dates in the right format you may need to include additional helpers from [Date Utils library](https://gravity-ui.com/libraries/date-utils)
+
+```tsx
+import {dateTimeParse} from '@gravity-ui/date-utils';
+```
+
+## Appearance
+
+The appearance of `DateField` is controlled by the `size`, `view` and `pin` properties.
+
+### Size
+
+To control the size of the `DateField` use the `size` property. Default size is `m`.
+
+```tsx
+<DateField size="s" />
+<DateField size="m" />
+<DateField size="l" />
+<DateField size="xl" />
+```
+
+### View
+
+`normal` - the main view of `DateField` (used by default).
+
+`clear` - view of `DateField` without visible borders (can be used with a custom wrapper)
+
+```tsx
+<DateField view="normal" />
+<DateField view="clear" />
+```
+
+### Pin
+
+The `pin` property allows you to control the shape of the right and left edges and is usually used for combining multiple controls in a single unit.
+The value of the `pin` property consists of left and edge style names divided by a dash, e.g. `"round-brick"`.
+The edge styles are: `round` (default), `circle`, `brick` and `clear`.
+
+```tsx
+<DateField pin="round-brick" />
+<DateField pin="brick-brick" />
+<DateField pin="brick-round" />
+```
+
+## Value
+
+### Min and max value
+
+The `minValue` property allows you to specify the earliest date and time that can be entered by the user. Conversely, the `maxValue` property specifies the latest date and time that can be entered. If you input the value out of this bounds component changes it's view like in case of invalid validation state.
+
+```tsx
+
+<DateField minValue={dateTimeParse('01.01.2024')} />
+<DateField maxValue={dateTimeParse('01.01.2025')} />
+```
+
+## States
+
+### Disabled
+
+The state of the `DateField` where you don't want the user to be able to interact with the component.
+
+```tsx
+<DateField disabled defaultValue={dateTimeParse(new Date())} />
+```
+
+### Readonly
+
+`readOnly` is a boolean attribute that, when set to true, makes the `DateField` component immutable to the user. This means that while the input will display its current value, users will not be able to change it.
+
+```tsx
+<DateField readOnly defaultValue={dateTimeParse(new Date())} />
+```
+
+### Error
+
+The state of the `DateField` in which you want to indicate incorrect user input. To change `DateField` appearance, use the `validationState` property with the `"invalid"` value. An optional message text can be added via the `errorMessage` property. Message text will be rendered under the component.
+
+```tsx
+<DateField errorMessage="Error message" validationState="invalid" />
+<DateField validationState="invalid" />
+```
+
+## Additional content
+
+### Placeholder
+
+This prop allows you to provide a short hint that describes the expected value of the input field. This hint is displayed within the input field before the user enters a value, and it disappears upon the entry of text.
+
+```tsx
+<DateField placeholder="Placeholder" />
+```
+
+### Label
+
+Allows you to place the label in the left part of the field. Label can take up no more than half the width of the entire space of `DateField`.
+
+```tsx
+<DateField label="Label" />
+```
+
+### Clear button
+
+`hasClear` is a boolean prop that, provides users with the ability to quickly clear the content of the input field.
+
+```tsx
+<DateField hasClear />
+```
+
+### Start content
+
+Allows you to add content to the start part of the field. It is placed before all other components.
+
+```tsx
+<DateField label="Label" startContent={<Label>Start content</Label>} />
+```
+
+### End content
+
+Allows you to add content to the end part of the field. It is placed after all other components.
+
+```tsx
+<DateField hasClear endContent={<Label>End content</Label>} />
+```
+
+## Format
+
+The `format` prop is a string that defines the date and time format the `DateField` component will accept and display. This prop determines how the date and time are visually presented to the user and how the user's input is expected to be formatted. [Available formats](https://day.js.org/docs/en/display/format)
+
+```tsx
+<DateField format="LTS" />
+```
+
+### Custom Date Parser
+
+You can provide a custom parser function to handle pasted date strings through the `parseDateFromString` prop. This is useful when you need to support specific date formats or custom parsing logic that differs from the default behavior.
+
+```tsx
+import {dateTime} from '@gravity-ui/date-utils';
+
+const customParser = (dateStr: string, format: string, timeZone?: string) => {
+  // Custom parsing logic
+  // For example, handle DD/MM/YYYY format specifically
+  if (dateStr.match(/^\d{2}\/\d{2}\/\d{4}$/)) {
+    const [day, month, year] = dateStr.split('/');
+    return dateTime({input: `${year}-${month}-${day}`, timeZone});
+  }
+  // Fallback to default parsing
+  return dateTime({input: dateStr, format, timeZone});
+};
+
+<DateField parseDateFromString={customParser} />;
+```
+
+## Time zone
+
+`timeZone` is the property to set the time zone of the value in the input. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)
+
+## Properties
+
+| Name                | Description                                                                                                          |                                 Type                                 |          Default          |
+| :------------------ | :------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------: | :-----------------------: |
+| aria-describedby    | The control's `aria-describedby` attribute                                                                           |                               `string`                               |                           |
+| aria-details        | The control's `aria-details` attribute                                                                               |                               `string`                               |                           |
+| aria-label          | The control's `aria-label` attribute                                                                                 |                               `string`                               |                           |
+| aria-labelledby     | The control's `aria-labelledby` attribute                                                                            |                               `string`                               |                           |
+| autoFocus           | The control's `autofocus` attribute                                                                                  |                              `boolean`                               |                           |
+| className           | The control's wrapper class name                                                                                     |                               `string`                               |                           |
+| defaultValue        | Sets the initial value for uncontrolled component.                                                                   |                              `DateTime`                              |                           |
+| disabled            | Indicates that the user cannot interact with the control                                                             |                              `boolean`                               |          `false`          |
+| errorMessage        | Error text                                                                                                           |                             `ReactNode`                              |                           |
+| format              | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format)        |                               `string`                               |                           |
+| hasClear            | Shows the icon for clearing control's value                                                                          |                              `boolean`                               |          `false`          |
+| id                  | The control's `id` attribute                                                                                         |                               `string`                               |                           |
+| isDateUnavailable   | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.             |                   `((date: DateTime) => boolean)`                    |                           |
+| label               | Help text rendered to the left of the input node                                                                     |                               `string`                               |                           |
+| startContent        | The user`s node rendered before label and input                                                                      |                          `React.ReactNode`                           |                           |
+| maxValue            | The maximum allowed date that a user may select.                                                                     |                              `DateTime`                              |                           |
+| minValue            | The minimum allowed date that a user may select.                                                                     |                              `DateTime`                              |                           |
+| onBlur              | Fires when the control lost focus. Provides focus event as a callback's argument                                     |            `((e: FocusEvent<Element, Element>) => void)`             |                           |
+| onFocus             | Fires when the control gets focus. Provides focus event as a callback's argument                                     |            `((e: FocusEvent<Element, Element>) => void)`             |                           |
+| onKeyDown           | Fires when a key is pressed. Provides keyboard event as a callback's argument                                        |               `((e: KeyboardEvent<Element>) => void)`                |                           |
+| onKeyUp             | Fires when a key is released. Provides keyboard event as a callback's argument                                       |               `((e: KeyboardEvent<Element>) => void)`                |                           |
+| onUpdate            | Fires when the value is changed by the user. Provides new value as an callback's argument                            |                 `((value: DateTime \| null) => void`                 |                           |
+| parseDateFromString | Custom parser function for parsing pasted date strings. If not provided, the default parser will be used.            | `((dateStr: string, format: string, timeZone?: string) => DateTime)` |                           |
+| pin                 | Corner rounding                                                                                                      |                               `string`                               |      `'round-round'`      |
+| placeholder         | Text that appears in the control when it has no value set                                                            |                               `string`                               |                           |
+| placeholderValue    | A placeholder date that controls the default values of each segment when the user first interacts with them.         |                              `DateTime`                              | `today's date at midnigh` |
+| readOnly            | Whether the component's value is immutable.                                                                          |                              `boolean`                               |          `false`          |
+| endContent          | User`s node rendered after the input node and clear button                                                           |                          `React.ReactNode`                           |                           |
+| size                | The size of the control                                                                                              |                       `"s"` `"m"` `"l"` `"xl"`                       |           `"m"`           |
+| style               | Sets inline style for the element.                                                                                   |                           `CSSProperties`                            |                           |
+| timeZone            | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) |                               `string`                               |                           |
+| validationState     | Validation state                                                                                                     |                             `"invalid"`                              |                           |
+| value               | The value of the control                                                                                             |                          `DateTime` `null`                           |                           |
+| view                | The view of the control                                                                                              |                         `"normal"` `"clear"`                         |        `"normal"`         |