@alfalab/core-components-date-range-input 3.0.11 → 3.1.0

package/modern/Component.mobile.js

@@ -14,6 +14,10 @@ import '@alfalab/icons-glyph/CalendarMIcon';
 import './utils/format.js';
 import 'date-fns/parse';
 
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
 const DateRangeInputMobile = forwardRef((props, ref) => (React.createElement(DateRangeInput, { InputComponent: InputMobile, Calendar: CalendarMobile, view: 'mobile', ...props, ref: ref })));
 
 export { DateRangeInputMobile };

package/modern/Component.responsive.d.ts

@@ -9,5 +9,9 @@ type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker'
     breakpoint?: number;
 };
 type DateRangeInputMedia = 'desktop' | 'mobile';
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
 declare const DateRangeInputResponsive: React.ForwardRefExoticComponent<DateRangeInputResponsiveProps & React.RefAttributes<HTMLInputElement>>;
 export { DateRangeInputResponsiveProps, DateRangeInputMedia, DateRangeInputResponsive };

package/modern/Component.responsive.js

@@ -18,6 +18,10 @@ import 'date-fns/parse';
 import '@alfalab/core-components-calendar/modern/mobile';
 import '@alfalab/core-components-input/modern/mobile';
 
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
 const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
     const [view] = useMedia([
         ['mobile', `(max-width: ${breakpoint - 1}px)`],

package/modern/components/date-range-input/Component.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from 'react';
 import { ChangeEvent, ElementType } from "react";
-import { CalendarDesktopProps } from "../../desktop-63dec22f";
-import { CalendarMobileProps } from "../../mobile-c219f8ca";
+import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
+import { CalendarMobileProps } from "@alfalab/core-components-calendar/mobile";
 import { InputProps } from "@alfalab/core-components-input";
 import { PopoverProps } from "@alfalab/core-components-popover";
 type ConditionalProps = {

package/modern/components/date-range-input/Component.js

@@ -11,7 +11,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-const styles = {"component":"date-range-input__component_wks86","calendarContainer":"date-range-input__calendarContainer_wks86","calendarResponsive":"date-range-input__calendarResponsive_wks86","block":"date-range-input__block_wks86","calendarIcon":"date-range-input__calendarIcon_wks86"};
+const styles = {"component":"date-range-input__component_1soho","calendarContainer":"date-range-input__calendarContainer_1soho","calendarResponsive":"date-range-input__calendarResponsive_1soho","block":"date-range-input__block_1soho","calendarIcon":"date-range-input__calendarIcon_1soho"};
 require('./index.css')
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -197,12 +197,13 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,
         }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
+        InputComponent ? (React.createElement(InputComponent, { autoComplete: picker ? 'off' : undefined, ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
                 picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
-        picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
-                [styles.calendarResponsive]: calendarResponsive,
-            }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+        picker &&
+            (view === 'desktop' ? (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
+                    [styles.calendarResponsive]: calendarResponsive,
+                }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar())) : (renderCalendar()))));
 });
 
 export { DateRangeInput };

package/modern/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fu7x */
+/* hash: 1etz5 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_wks86 {
+} .date-range-input__component_1soho {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_wks86 {
+} .date-range-input__calendarContainer_1soho {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_wks86 {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1soho {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_wks86 {
+    } .date-range-input__calendarResponsive_1soho {
     width: var(--calendar-width);
-} .date-range-input__block_wks86 {
+} .date-range-input__block_1soho {
     width: 100%;
-} .date-range-input__calendarIcon_wks86 {
+} .date-range-input__calendarIcon_1soho {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

package/modern/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../Component.desktop";
+export {};

package/modern/{desktop.js → desktop/index.js}

@@ -1,8 +1,8 @@
-export { DateRangeInputDesktop } from './Component.desktop.js';
+export { DateRangeInputDesktop } from '../Component.desktop.js';
 import 'react';
 import '@alfalab/core-components-calendar/modern/desktop';
 import '@alfalab/core-components-input/modern/desktop';
-import './components/date-range-input/Component.js';
+import '../components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns/isValid';
@@ -12,5 +12,5 @@ import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/core-components-popover/modern';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './utils/format.js';
+import '../utils/format.js';
 import 'date-fns/parse';

package/modern/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../Component.mobile";
+export {};

package/modern/{mobile.js → mobile/index.js}

@@ -1,8 +1,8 @@
-export { DateRangeInputMobile } from './Component.mobile.js';
+export { DateRangeInputMobile } from '../Component.mobile.js';
 import 'react';
 import '@alfalab/core-components-calendar/modern/mobile';
 import '@alfalab/core-components-input/modern/mobile';
-import './components/date-range-input/Component.js';
+import '../components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns/isValid';
@@ -12,5 +12,5 @@ import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/core-components-popover/modern';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './utils/format.js';
+import '../utils/format.js';
 import 'date-fns/parse';

package/package.json

@@ -1,31 +1,11 @@
 {
     "name": "@alfalab/core-components-date-range-input",
-    "version": "3.0.11",
+    "version": "3.1.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "exports": {
-        ".": {
-            "import": "./esm/index.js",
-            "require": "./index.js"
-        },
-        "./mobile": {
-            "import": "./esm/mobile.js",
-            "require": "./mobile.js"
-        },
-        "./desktop": {
-            "import": "./esm/desktop.js",
-            "require": "./desktop.js"
-        },
-        "./esm": "./esm/index.js",
-        "./cssm": "./cssm/index.js",
-        "./modern": "./modern/index.js",
-        "./esm/*": "./esm/*",
-        "./cssm/*": "./cssm/*",
-        "./modern/*": "./modern/*"
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -35,9 +15,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^12.2.0",
-        "@alfalab/core-components-icon-button": "^6.3.0",
-        "@alfalab/core-components-calendar": "^7.0.8",
+        "@alfalab/core-components-input": "^12.3.0",
+        "@alfalab/core-components-icon-button": "^6.3.2",
+        "@alfalab/core-components-calendar": "^7.1.0",
         "@alfalab/core-components-popover": "^6.1.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",

package/src/Component.desktop.tsx

@@ -17,6 +17,10 @@ export type DateRangeInputDesktopProps = Omit<
 > &
     ConditionalProps;
 
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
 export const DateRangeInputDesktop = forwardRef<HTMLInputElement, DateRangeInputDesktopProps>(
     (props, ref) => (
         <DateRangeInput

package/src/Component.mobile.tsx

@@ -17,6 +17,10 @@ export type DateRangeInputMobileProps = Omit<
 > &
     ConditionalProps;
 
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
 export const DateRangeInputMobile = forwardRef<HTMLInputElement, DateRangeInputMobileProps>(
     (props, ref) => (
         <DateRangeInput

package/src/Component.responsive.tsx

@@ -22,6 +22,10 @@ export type DateRangeInputResponsiveProps = Omit<
 
 export type DateRangeInputMedia = 'desktop' | 'mobile';
 
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
 export const DateRangeInputResponsive = forwardRef<HTMLInputElement, DateRangeInputResponsiveProps>(
     ({ breakpoint = 1024, ...restProps }, ref) => {
         const [view] = useMedia<DateRangeInputMedia>(

package/src/components/date-range-input/Component.tsx

@@ -458,6 +458,7 @@ export const DateRangeInput = React.forwardRef<HTMLInputElement, DateRangeInputP
             >
                 {InputComponent ? (
                     <InputComponent
+                        autoComplete={picker ? 'off' : undefined}
                         {...restProps}
                         block={block}
                         ref={mergeRefs([ref, inputRef])}
@@ -484,24 +485,27 @@ export const DateRangeInput = React.forwardRef<HTMLInputElement, DateRangeInputP
                         }
                     />
                 ) : null}
-                {picker && (
-                    <Popover
-                        open={open}
-                        useAnchorWidth={useAnchorWidth}
-                        anchorElement={inputRef.current as HTMLElement}
-                        popperClassName={cn(styles.calendarContainer, {
-                            [styles.calendarResponsive]: calendarResponsive,
-                        })}
-                        className={popoverClassName}
-                        position={popoverPosition}
-                        offset={[0, 8]}
-                        withTransition={false}
-                        preventFlip={preventFlip}
-                        zIndex={zIndexPopover}
-                    >
-                        {renderCalendar()}
-                    </Popover>
-                )}
+                {picker &&
+                    (view === 'desktop' ? (
+                        <Popover
+                            open={open}
+                            useAnchorWidth={useAnchorWidth}
+                            anchorElement={inputRef.current as HTMLElement}
+                            popperClassName={cn(styles.calendarContainer, {
+                                [styles.calendarResponsive]: calendarResponsive,
+                            })}
+                            className={popoverClassName}
+                            position={popoverPosition}
+                            offset={[0, 8]}
+                            withTransition={false}
+                            preventFlip={preventFlip}
+                            zIndex={zIndexPopover}
+                        >
+                            {renderCalendar()}
+                        </Popover>
+                    ) : (
+                        renderCalendar()
+                    ))}
             </div>
         );
     },

package/src/desktop/index.ts

@@ -0,0 +1 @@
+export * from '../Component.desktop';

package/src/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/mobile/index.ts

@@ -0,0 +1 @@
+export * from '../Component.mobile';

package/src/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/Component-63dec22f.d.ts

@@ -1,184 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
-import { TextElementType, TextSkeletonProps } from "./types-1b036d4b";
-declare const colors: readonly [
-    "tertiary",
-    "disabled",
-    "accent",
-    "primary",
-    "attention",
-    "positive",
-    "secondary",
-    "tertiary-inverted",
-    "primary-inverted",
-    "secondary-inverted",
-    "link",
-    "negative",
-    "static-primary-light",
-    "static-secondary-light",
-    "static-tertiary-light",
-    "static-primary-dark",
-    "static-secondary-dark",
-    "static-tertiary-dark",
-    "static-accent"
-];
-type Color = (typeof colors)[number];
-type NativeProps = HTMLAttributes<HTMLSpanElement>;
-type TextBaseProps = {
-    /**
-     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
-     */
-    view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
-    /**
-     * Цвет текста
-     */
-    color?: Color;
-    /**
-     * Толщина шрифта
-     */
-    weight?: "regular" | "medium" | "bold";
-    /**
-     * Делает цифры моноширинными
-     */
-    monospaceNumbers?: boolean;
-    /**
-     * HTML тег
-     */
-    tag?: "span" | "div";
-    /**
-     * Css-класс для стилизации (native prop)
-     */
-    className?: string;
-    /**
-     * Id компонента для тестов
-     */
-    dataTestId?: string;
-    /**
-     * Контент (native prop)
-     */
-    children?: React.ReactNode;
-    /**
-     * Добавляет отступы к тэгу 'p'
-     */
-    defaultMargins?: never;
-    /**
-     * Количество строк (не поддерживает IE)
-     */
-    rowLimit?: 1 | 2 | 3;
-    /**
-     * Показать скелетон
-     */
-    showSkeleton?: boolean;
-    /**
-     * Пропы для скелетона
-     */
-    skeletonProps?: TextSkeletonProps;
-};
-type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
-    tag?: "p";
-    defaultMargins?: boolean;
-};
-type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
-type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
-type TitleProps = Omit<NativeProps$0, "color"> & {
-    /**
-     * HTML тег
-     */
-    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
-    /**
-     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
-     */
-    view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
-    /**
-     * Цвет текста
-     */
-    color?: Color;
-    /**
-     * Толщина шрифта
-     */
-    weight?: "regular" | "medium" | "bold";
-    /**
-     * Шрифт текста
-     */
-    font?: "styrene" | "system";
-    /**
-     * Добавляет отступы
-     */
-    defaultMargins?: boolean;
-    /**
-     * Css-класс для стилизации (native prop)
-     */
-    className?: string;
-    /**
-     * Id компонента для тестов
-     */
-    dataTestId?: string;
-    /**
-     * Контент (native prop)
-     */
-    children?: React.ReactNode;
-    /**
-     * Количество строк (не поддерживает IE)
-     */
-    rowLimit?: 1 | 2 | 3;
-    /**
-     * Показать скелетон
-     */
-    showSkeleton?: boolean;
-    /**
-     * Пропы для скелетона
-     */
-    skeletonProps?: TextSkeletonProps;
-};
-type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
-declare const Typography: {
-    Title: FC<TitleProps>;
-    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
-    TitleResponsive: FC<TitleProps>;
-    TitleMobile: FC<TitleMobileProps>;
-};
-declare const typographyPresets: {
-    mobile: {
-        list: {
-            text: {
-                primary: {
-                    tag: string;
-                    view: string;
-                };
-                secondary: {
-                    tag: string;
-                    color: string;
-                    view: string;
-                };
-            };
-        };
-    };
-};
-declare const TitleResponsive: FC<TitleProps>;
-interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    /**
-     * Текст после иконки
-     */
-    text?: string;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Вид компонента
-     */
-    view: 'mobile' | 'desktop';
-    /**
-     * Прозрачность текста
-     */
-    textOpacity?: number;
-    /**
-     * Обработчик клика
-     */
-    onClick?: () => void;
-}
-declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
-export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
-export type { TitleProps, TextProps, Color };
-export * from "./useSkeleton-1b036d4b";

package/Component-72308007.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { NavigationBarProps } from "./types-1c79e231";
-declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
-export * from "./Component-63dec22f";
-export { NavigationBar };

package/Component-72dda473.d.ts

@@ -1,53 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
-type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
-type BadgeProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     *  Вид компонента
-     */
-    view: 'icon' | 'count';
-    /**
-     * Размер компонента (только для view=icon)
-     * //deprecated(используйте height для view=count )
-     */
-    size?: 's' | 'm' | 'l' | 'xl';
-    /**
-     *  Видимость белой обводки вокруг иконки
-     */
-    visibleIconOutline?: boolean;
-    /**
-     *  Видимость цветной обводки вокруг иконки (только для view=icon)
-     */
-    visibleColorOutline?: boolean;
-    /**
-     * Контент компонента
-     */
-    content?: React.ReactElement | number;
-    /**
-     * Высота компонента, min = 16; max = 48 (только для view=count)
-     */
-    height?: number;
-    /**
-     * Цветовое оформление бейджа при view='count'
-     */
-    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
-    /**
-     * Цветовое оформление бейджа при view='icon'
-     */
-    iconColor?: IconColorType;
-    /**
-     * Цвет подложки под иконкой
-     */
-    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
-export { IconColorType, BadgeProps, Badge };