@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

package/cjs/components/DatePicker/MobilePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Calendar","_CalendarUtils","_ThemeContext","_MobilePopup","_DateInput","_Button","_useLocaleForControl","_useEffectWithoutInitCall","_locale","_MobilePicker","_getMobilePickerTheme","MobilePickerDataTids","exports","input","today","MobilePicker","props","locale","useLocaleForControl","DatePickerLocaleHelper","theme","getMobilePickerTheme","useContext","ThemeContext","onValueChange","date","onCloseRequest","inputRef","useRef","useLayoutEffect","current","focus","calendarRef","_useState","useState","getTodayDate","_useState$","monthNative","month","year","getMonthInHumanFormat","onTodayClick","scrollToMonth","useEffectWithoutInitCall","value","substring","default","createElement","Provider","MobilePopup","opened","headerChildComponent","DateInput","width","withIcon","ref","minDate","maxDate","size","warning","error","footerChildComponent","enableTodayLink","Button","onClick","Calendar","className","styles","calendarRoot","isHoliday","renderDay","onMonthChange"],"sources":["MobilePicker.tsx"],"sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Calendar } from '../Calendar';\nimport { getMonthInHumanFormat, getTodayDate } from '../Calendar/CalendarUtils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MobilePopup } from '../../internal/MobilePopup';\nimport { DateInput } from '../DateInput';\nimport { Button } from '../Button';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { useEffectWithoutInitCall } from '../../hooks/useEffectWithoutInitCall';\n\nimport { DatePickerProps } from './DatePicker';\nimport { DatePickerLocaleHelper } from './locale';\nimport { styles } from './MobilePicker.styles';\nimport { getMobilePickerTheme } from './getMobilePickerTheme';\n\nexport const MobilePickerDataTids = {\n  input: 'MobilePicker__input',\n  today: 'MobilePicker__today',\n} as const;\n\nexport interface MobilePickerProps\n  extends Pick<\n    DatePickerProps,\n    | 'error'\n    | 'warning'\n    | 'value'\n    | 'minDate'\n    | 'maxDate'\n    | 'onValueChange'\n    | 'isHoliday'\n    | 'enableTodayLink'\n    | 'renderDay'\n    | 'onMonthChange'\n  > {\n  onCloseRequest?: () => void;\n}\n\nexport const MobilePicker: React.FC<MobilePickerProps> = (props) => {\n  const locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper);\n\n  const theme = getMobilePickerTheme(useContext(ThemeContext));\n\n  const onValueChange = (date: string) => {\n    if (props.onValueChange) {\n      props.onValueChange(date);\n    }\n    if (props.onCloseRequest) {\n      props.onCloseRequest();\n    }\n  };\n\n  const inputRef = useRef<DateInput>(null);\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, []);\n\n  const calendarRef = useRef<Calendar>(null);\n  const [{ month: monthNative, year }] = useState(() => getTodayDate());\n  const month = getMonthInHumanFormat(monthNative);\n\n  const onTodayClick = () => {\n    if (calendarRef.current) {\n      calendarRef.current.scrollToMonth(month, year);\n    }\n  };\n\n  useEffectWithoutInitCall(() => {\n    if (props.value && calendarRef.current) {\n      const month = getMonthInHumanFormat(+props.value.substring(3, 5));\n      const year = +props.value.substring(6);\n      calendarRef.current.scrollToMonth(month, year);\n    }\n  }, [props.value]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <MobilePopup\n        opened\n        headerChildComponent={\n          <DateInput\n            value={props.value || ''}\n            width=\"100%\"\n            withIcon\n            ref={inputRef}\n            minDate={props.minDate}\n            maxDate={props.maxDate}\n            onValueChange={props.onValueChange}\n            size=\"medium\"\n            warning={props.warning}\n            error={props.error}\n            data-tid={MobilePickerDataTids.input}\n          />\n        }\n        footerChildComponent={\n          props.enableTodayLink && (\n            <Button size=\"medium\" onClick={onTodayClick} data-tid={MobilePickerDataTids.today}>\n              {locale.today}\n            </Button>\n          )\n        }\n        onCloseRequest={props.onCloseRequest}\n      >\n        <Calendar\n          ref={calendarRef}\n          value={props.value}\n          className={styles.calendarRoot()}\n          minDate={props.minDate}\n          maxDate={props.maxDate}\n          onValueChange={onValueChange}\n          isHoliday={props.isHoliday}\n          renderDay={props.renderDay}\n          onMonthChange={props.onMonthChange}\n        />\n      </MobilePopup>\n    </ThemeContext.Provider>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_Calendar","_CalendarUtils","_ThemeContext","_MobilePopup","_DateInput","_Button","_useLocaleForControl","_locale","_MobilePicker","_getMobilePickerTheme","MobilePickerDataTids","exports","input","today","MobilePicker","props","locale","useLocaleForControl","DatePickerLocaleHelper","theme","getMobilePickerTheme","useContext","ThemeContext","calendarRef","useRef","inputRef","_useState","useState","getTodayDate","_useState$","monthNative","month","year","getMonthInHumanFormat","onValueChange","date","onCloseRequest","useLayoutEffect","setTimeout","_inputRef$current","current","focus","onTodayClick","scrollToMonth","default","createElement","Provider","value","MobilePopup","opened","headerChildComponent","DateInput","width","withIcon","ref","minDate","maxDate","size","warning","error","footerChildComponent","enableTodayLink","Button","onClick","Calendar","className","styles","calendarRoot","isHoliday","renderDay","onMonthChange"],"sources":["MobilePicker.tsx"],"sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Calendar } from '../Calendar';\nimport { getMonthInHumanFormat, getTodayDate } from '../Calendar/CalendarUtils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MobilePopup } from '../../internal/MobilePopup';\nimport { DateInput } from '../DateInput';\nimport { Button } from '../Button';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\n\nimport { DatePickerProps } from './DatePicker';\nimport { DatePickerLocaleHelper } from './locale';\nimport { styles } from './MobilePicker.styles';\nimport { getMobilePickerTheme } from './getMobilePickerTheme';\n\nexport const MobilePickerDataTids = {\n  input: 'MobilePicker__input',\n  today: 'MobilePicker__today',\n} as const;\n\nexport interface MobilePickerProps\n  extends Pick<\n    DatePickerProps,\n    | 'error'\n    | 'warning'\n    | 'value'\n    | 'minDate'\n    | 'maxDate'\n    | 'onValueChange'\n    | 'isHoliday'\n    | 'enableTodayLink'\n    | 'renderDay'\n    | 'onMonthChange'\n  > {\n  onCloseRequest?: () => void;\n}\n\nexport const MobilePicker: React.FC<MobilePickerProps> = (props) => {\n  const locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper);\n  const theme = getMobilePickerTheme(useContext(ThemeContext));\n\n  const calendarRef = useRef<Calendar>(null);\n  const inputRef = useRef<DateInput>(null);\n\n  const [{ month: monthNative, year }] = useState(() => getTodayDate());\n  const month = getMonthInHumanFormat(monthNative);\n\n  const onValueChange = (date: string) => {\n    props.onValueChange?.(date);\n    props.onCloseRequest?.();\n  };\n\n  useLayoutEffect(() => {\n    // fix DateInput flushSync warning in React 18\n    setTimeout(() => {\n      inputRef.current?.focus();\n    });\n  }, []);\n\n  const onTodayClick = () => {\n    if (calendarRef.current) {\n      calendarRef.current.scrollToMonth(month, year);\n    }\n  };\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <MobilePopup\n        opened\n        headerChildComponent={\n          <DateInput\n            value={props.value || ''}\n            width=\"100%\"\n            withIcon\n            ref={inputRef}\n            minDate={props.minDate}\n            maxDate={props.maxDate}\n            onValueChange={props.onValueChange}\n            size=\"medium\"\n            warning={props.warning}\n            error={props.error}\n            data-tid={MobilePickerDataTids.input}\n          />\n        }\n        footerChildComponent={\n          props.enableTodayLink && (\n            <Button size=\"medium\" onClick={onTodayClick} data-tid={MobilePickerDataTids.today}>\n              {locale.today}\n            </Button>\n          )\n        }\n        onCloseRequest={props.onCloseRequest}\n      >\n        <Calendar\n          ref={calendarRef}\n          value={props.value}\n          className={styles.calendarRoot()}\n          minDate={props.minDate}\n          maxDate={props.maxDate}\n          onValueChange={onValueChange}\n          isHoliday={props.isHoliday}\n          renderDay={props.renderDay}\n          onMonthChange={props.onMonthChange}\n        />\n      </MobilePopup>\n    </ThemeContext.Provider>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/DatePicker/__creevey__/DatePicker.creevey.mts

@@ -0,0 +1,209 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('DatePicker', () => {
+  story('WithMouseeventHandlers', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: {
+          in: ['chrome2022Dark'],
+          tests: ['DateSelect year'],
+        },
+      },
+    });
+    test('opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+
+    test('DateSelect month', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect month');
+    });
+
+    test('DateSelect year', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect year');
+    });
+  });
+
+  story('DatePickerWithMinMaxDate', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: {
+          in: /^(?!\b(chrome|ie11)\b)/,
+          tests: ['DateSelect months', 'DateSelect years'],
+        },
+      },
+    });
+
+    test('DateSelect months', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .pause(1000)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .pause(1000)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect months');
+    });
+
+    test('DateSelect years', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .pause(1000)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .pause(1000)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect years');
+    });
+  });
+
+  story('DatePickerInRelativeBody', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="toggle-relative-position"]' }))
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened top without relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top without relative position');
+    });
+
+    test('opened bottom without relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom without relative position');
+    });
+
+    test('opened top with relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="relative"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top with relative position');
+    });
+
+    test('opened bottom with relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid~="relative"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom');
+    });
+  });
+  story('MobilePicker', () => {
+    test('MobilePicker on iphone opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'MobilePicker on iphone opened');
+    });
+  });
+});

package/cjs/components/DatePicker/__docs__/DatePicker.mdx

@@ -0,0 +1,28 @@
+import * as DatePickerStories from './DatePicker.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={DatePickerStories} />
+
+# DatePicker
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/input-fields/calendar/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A18389)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,82 @@
+import React, { type AriaAttributes } from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { DateInput } from '../DateInput';
+import { DatePickerProps } from '../DatePicker';
+import { validateDateRangePicker } from './helpers/validateDateRangePicker';
+export declare const DateRangePickerDataTids: {
+    readonly root: "DateRangePicker__root";
+    readonly start: "DateRangePicker__start";
+    readonly end: "DateRangePicker__end";
+    readonly popup: "DateRangePicker__popup";
+    readonly calendar: "DateRangePicker__calendar";
+    readonly todayButton: "DateRangePicker__todayButton";
+    readonly startOptionalButton: "DateRangePicker__startOptionalButton";
+    readonly endOptionalButton: "DateRangePicker__endOptionalButton";
+    readonly mobileStart: "DateRangePicker__mobileStart";
+    readonly mobileEnd: "DateRangePicker__mobileEnd";
+};
+export interface DateRangePickerProps extends CommonProps, Pick<AriaAttributes, 'aria-describedby' | 'aria-label' | 'aria-labelledby'>, Pick<DatePickerProps, 'size' | 'renderDay' | 'menuPos' | 'menuAlign' | 'useMobileNativeDatePicker' | 'enableTodayLink' | 'onMonthChange'> {
+    /**
+     * Элементы DateRangePicker:
+     * `<DateRangePicker.Start />`
+     * `<DateRangePicker.Separator />`
+     * `<DateRangePicker.End />`
+     */
+    children: React.ReactNode;
+}
+export declare const DateRangePicker: {
+    Start: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<DateInput, {
+        style?: React.CSSProperties | undefined;
+        children?: React.ReactNode;
+        className?: string | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+        disabled?: boolean | undefined;
+        size?: import("../..").SizeProp | undefined;
+        value?: string | null | undefined;
+        width?: string | number | undefined;
+        autoFocus?: boolean | undefined;
+        id?: string | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        onFocus?: ((x0: React.FocusEvent<HTMLElement, Element>) => void) | undefined;
+        onBlur?: ((x0: React.FocusEvent<HTMLElement, Element>) => void) | undefined;
+        onKeyDown?: ((x0: React.KeyboardEvent<HTMLElement>) => void) | undefined;
+        onClick?: ((x0: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
+        'data-tid'?: string | undefined;
+        error?: boolean | undefined;
+        warning?: boolean | undefined;
+        minDate?: string | undefined;
+        maxDate?: string | undefined;
+        withIcon?: boolean | undefined;
+        optional?: boolean | undefined;
+    }> & Record<never, never>;
+    End: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<DateInput, {
+        style?: React.CSSProperties | undefined;
+        children?: React.ReactNode;
+        className?: string | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+        disabled?: boolean | undefined;
+        size?: import("../..").SizeProp | undefined;
+        value?: string | null | undefined;
+        width?: string | number | undefined;
+        autoFocus?: boolean | undefined;
+        id?: string | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        onFocus?: ((x0: React.FocusEvent<HTMLElement, Element>) => void) | undefined;
+        onBlur?: ((x0: React.FocusEvent<HTMLElement, Element>) => void) | undefined;
+        onKeyDown?: ((x0: React.KeyboardEvent<HTMLElement>) => void) | undefined;
+        onClick?: ((x0: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
+        'data-tid'?: string | undefined;
+        error?: boolean | undefined;
+        warning?: boolean | undefined;
+        minDate?: string | undefined;
+        maxDate?: string | undefined;
+        withIcon?: boolean | undefined;
+        optional?: boolean | undefined;
+    }> & Record<never, never>;
+    Separator: () => React.JSX.Element;
+    validate: typeof validateDateRangePicker;
+} & import("../../lib/forwardRefAndName").ReactUIComponentWithRef<unknown, DateRangePickerProps> & Record<never, never>;