@moysklad/uikit 30.4.0 → 31.20.0

package/README.md

@@ -57,6 +57,7 @@ ReactDOM.render(
 - AutoComplete
 - Badge
 - Banner
+- BentoBlock
 - BodyL
 - BodyText
 - BodyTextStrong
@@ -70,13 +71,13 @@ ReactDOM.render(
 - Chip
 - Counter
 - Datepicker
+- DateRange
 - Dot
 - Dropdown
+- EditableDate
 - EditableTitle
 - EmptyState
 - EmptyStateLarge
-- FieldLabel
-- FieldRow
 - FileUploader
 - H1
 - H2
@@ -88,17 +89,19 @@ ReactDOM.render(
 - HStack
 - ImagePreview
 - Indicator
-- Info
+- Informer
 - Input
-- InputClear
 - InputUnit
 - Label
 - LabelValue
 - LabelValueCheckbox
 - LabelValueDate
+- LabelValueFile
 - LabelValueInput
+- LabelValueLink
 - LabelValueSelect
 - LabelValueTextfield
+- Layout
 - Link
 - Listing
 - MentionsTextfield
@@ -106,6 +109,7 @@ ReactDOM.render(
 - Multiselect
 - OverlayActions
 - Pagination
+- Panel
 - Progressbar
 - Quantity
 - Radiobutton
@@ -119,6 +123,7 @@ ReactDOM.render(
 - Skeleton
 - Snackbar
 - Spinner
+- StatusBadge
 - Switch
 - Tabs
 - Text

package/dist/colorVariables.css

@@ -18,6 +18,7 @@
         --light-grey-alpha-8: #84a0ca14;
         --light-grey-alpha-10: #84a0ca1a;
         --light-grey-alpha-12: #84a0ca1f;
+        --light-blue-50: #dff0fe;
         --light-blue-100: #bfddf7bf;
         --light-blue-200: #b9d3f0cc;
         --light-blue-350: #b5cae8f2;
@@ -65,6 +66,7 @@
         --bgd-grey: var(--light-grey-100);
         --bgd-secondary: var(--light-grey-200);
         --bgd-overlay: #01040b5c;
+        --bgd-accent: var(--light-blue-50);
         --button-primary-normal: var(--product-blue-700);
         --button-primary-hover: var(--product-blue-600);
         --button-primary-focus: var(--product-blue-500);
@@ -84,7 +86,6 @@
         --elements-normal: var(--dark-grey-grey-800);
         --elements-hover: var(--dark-grey-dark-900);
         --elements-disable: var(--light-grey-400);
-        --elements-disabled: var(--dark-grey-grey-500);
         --elements-inactive: var(--dark-grey-grey-500);
         --elements-accent: var(--product-blue-700);
         --elements-positive: var(--colorful-green-600);
@@ -172,6 +173,27 @@
       }
     }
 
+    @layer gwt-status {
+      :root {
+        --gwt-statuses-grey: #999;
+        --gwt-statuses-red: #e92919;
+        --gwt-statuses-orange: #e68116;
+        --gwt-statuses-brown: #694b1e;
+        --gwt-statuses-yellow-green: #bdae00;
+        --gwt-statuses-lime-green: #a2c617;
+        --gwt-statuses-mint-green: #86aa60;
+        --gwt-statuses-green: #008739;
+        --gwt-statuses-sky-blue: #85c6de;
+        --gwt-statuses-blue: #009fe3;
+        --gwt-statuses-dusty-blue: #427081;
+        --gwt-statuses-dark-blue: #00499a;
+        --gwt-statuses-pink: #ec619f;
+        --gwt-statuses-violet: #a466bd;
+        --gwt-statuses-dark-red: #8d1430;
+        --gwt-statuses-black: #000;
+      }
+    }
+
     @layer viewers-stack {
       :root {
         --viewers-stack-green: #bae86b;

package/dist/components/AutoComplete/AutoComplete.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "../../common/css/cn.js";
+import { FieldRow } from "../_shared/FieldRow/FieldRow.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
 import { getListboxTriggerA11y } from "../Dropdown/utils/getListboxTriggerA11y.js";
-import { FieldRow } from "../FieldRow/FieldRow.js";
-import { Info } from "../Info/Info.js";
 import { Label } from "../Label/Label.js";
 import { OptionsList } from "../Select/OptionsList/OptionsList.js";
 import { useId } from "../../hooks/useId/index.js";

package/dist/components/BentoBlock/BentoBlock.d.ts

@@ -0,0 +1,15 @@
+import { type ElementRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type ValueOf } from '../../common';
+import { BentoBlockPaddingVariant, BentoBlockTag } from './consts';
+type BentoBlockTagValue = ValueOf<typeof BentoBlockTag>;
+type DefaultBentoBlockTagValue = (typeof BentoBlockTag)['div'];
+export interface BentoBlockProps<Tag extends BentoBlockTagValue = DefaultBentoBlockTagValue> extends HTMLAttributes<HTMLDivElement> {
+    as?: Tag;
+    paddingVariant?: ValueOf<typeof BentoBlockPaddingVariant>;
+    containerClassName?: string;
+    testId?: string;
+}
+export declare const BentoBlock: <Tag extends BentoBlockTagValue = DefaultBentoBlockTagValue>(props: BentoBlockProps<Tag> & {
+    ref?: Ref<ElementRef<Tag>>;
+}) => ReactNode;
+export { BentoBlockPaddingVariant, BentoBlockTag } from './consts';

package/dist/components/BentoBlock/BentoBlock.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement, forwardRef } from "react";
+import { getOptionalTestId } from "../../common/index.js";
+import { cn } from "../../common/css/index.js";
+import { BentoBlockPaddingVariant, BentoBlockTag } from "./consts.js";
+import BentoBlock_module from "./BentoBlock.module.js";
+const ForwardedRefBentoBlock = /*#__PURE__*/ forwardRef(({ as: element = BentoBlockTag.div, paddingVariant = BentoBlockPaddingVariant.P20, containerClassName, testId, ...props }, ref)=>/*#__PURE__*/ createElement(element, {
+        ...props,
+        ref,
+        'data-test-id': testId,
+        className: cn(BentoBlock_module.container, BentoBlock_module[paddingVariant], containerClassName)
+    }, /*#__PURE__*/ jsx("div", {
+        className: cn(BentoBlock_module.scrollContainer, props.className),
+        style: props.style,
+        "data-test-id": getOptionalTestId(testId, 'scroll-container'),
+        children: props.children
+    })));
+ForwardedRefBentoBlock.displayName = 'BentoBlock';
+const BentoBlock = ForwardedRefBentoBlock;
+export { BentoBlock, BentoBlockPaddingVariant, BentoBlockTag };

package/dist/components/BentoBlock/BentoBlock.module.js

@@ -0,0 +1,9 @@
+import "./BentoBlock_module.css";
+const BentoBlock_module = {
+    container: "container-xzbFVY",
+    p12: "p12-_3Iki0",
+    p16: "p16-ef7B_k",
+    p20: "p20-Xgd0vH",
+    scrollContainer: "scrollContainer-_5IBjn"
+};
+export default BentoBlock_module;

package/dist/components/BentoBlock/BentoBlock_module.css

@@ -0,0 +1,50 @@
+.container-xzbFVY {
+  --bento-padding: 20px;
+  --bento-scrollbar-width: 8px;
+  --bento-right-padding: calc((var(--bento-padding) - var(--bento-scrollbar-width)) / 2);
+  padding: var(--bento-padding);
+  padding-right: var(--bento-right-padding);
+  background-color: var(--bgd-white, #fff);
+  border-radius: 12px;
+  flex-direction: column;
+  display: flex;
+}
+
+.p12-_3Iki0 {
+  --bento-padding: 12px;
+}
+
+.p16-ef7B_k {
+  --bento-padding: 16px;
+}
+
+.p20-Xgd0vH {
+  --bento-padding: 20px;
+}
+
+.scrollContainer-_5IBjn {
+  scrollbar-gutter: stable;
+  padding-right: calc(var(--bento-right-padding) + var(--bento-scrollbar-width));
+  overflow: auto;
+}
+
+@supports selector(::-webkit-scrollbar) {
+  .scrollContainer-_5IBjn {
+    padding-right: var(--bento-right-padding);
+  }
+
+  .scrollContainer-_5IBjn::-webkit-scrollbar {
+    width: var(--bento-scrollbar-width);
+    height: var(--bento-scrollbar-width);
+  }
+
+  .scrollContainer-_5IBjn::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  .scrollContainer-_5IBjn::-webkit-scrollbar-thumb {
+    background-color: var(--light-grey-400);
+    border-radius: 8px;
+  }
+}
+

package/dist/components/BentoBlock/consts.d.ts

@@ -0,0 +1,14 @@
+export declare const BentoBlockPaddingVariant: {
+    readonly P12: "p12";
+    readonly P16: "p16";
+    readonly P20: "p20";
+};
+export declare const BentoBlockTag: {
+    div: "div";
+    section: "section";
+    article: "article";
+    aside: "aside";
+    header: "header";
+    footer: "footer";
+    nav: "nav";
+};

package/dist/components/BentoBlock/consts.js

@@ -0,0 +1,15 @@
+const BentoBlockPaddingVariant = {
+    P12: 'p12',
+    P16: 'p16',
+    P20: 'p20'
+};
+const BentoBlockTag = {
+    div: 'div',
+    section: 'section',
+    article: 'article',
+    aside: 'aside',
+    header: 'header',
+    footer: 'footer',
+    nav: 'nav'
+};
+export { BentoBlockPaddingVariant, BentoBlockTag };

package/dist/components/Button/Button.d.ts

@@ -20,14 +20,17 @@ export declare const ButtonColor: {
     readonly WHITE: "white";
 };
 export type ButtonColorValue = ValueOf<typeof ButtonColor>;
-export interface IButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>, IHasTestId {
+export interface ButtonOwnProps extends IHasTestId {
     variant?: ButtonVariantsValue;
     color?: ButtonColorValue;
     size?: ButtonSizeValue;
+    disabled?: boolean;
     isLoading?: boolean;
     isIconButton?: boolean;
     stretch?: boolean;
     withHorisontalPadding?: boolean;
     noPadding?: boolean;
 }
-export declare const Button: import("react").ForwardRefExoticComponent<IButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface IButtonProps extends ButtonOwnProps, Omit<PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>, keyof ButtonOwnProps> {
+}
+export declare const Button: import("../_shared/utils/polymorphicClickableTypes").ClickableComponent<ButtonOwnProps, "button">;

package/dist/components/Button/Button.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
 import { cn } from "../../common/css/cn.js";
+import { ClickableTag, polymorphicClickableRef } from "../_shared/utils/polymorphicClickableTypes.js";
 import { Loader12Icon, Loader20Icon } from "../../icon/index.js";
 import Button_module from "./Button.module.js";
 const ButtonSize = {
@@ -34,29 +35,37 @@ const getFilledColorClass = (color)=>{
             return Button_module.filledGrey;
     }
 };
-const Button = /*#__PURE__*/ forwardRef(({ testId, type = 'button', variant = ButtonVariants.PRIMARY, color, disabled, className: classNameProp, children, size = ButtonSize.L, isLoading = false, onClick, isIconButton = false, stretch = false, withHorisontalPadding = false, noPadding = false, ...rest }, ref)=>{
+const Button = polymorphicClickableRef((props, ref)=>{
+    const { testId, as: elementProp = ClickableTag.button, type, variant = ButtonVariants.PRIMARY, color, disabled, className: classNameProp, children, size = ButtonSize.L, isLoading = false, onClick, isIconButton = false, stretch = false, withHorisontalPadding = false, noPadding = false, ...rest } = props;
+    const element = elementProp;
     const LoaderIcon = LoaderBySizeMap[size];
+    const isAnchor = element === ClickableTag.a;
     const className = cn(Button_module.button, Button_module[variant], Button_module[size], variant === ButtonVariants.FILLED && getFilledColorClass(color), variant === ButtonVariants.FRAMELESS && noPadding && Button_module.noPadding, isLoading ? Button_module.isLoading : '', isIconButton && Button_module.iconButton, stretch && Button_module.stretch, classNameProp, withHorisontalPadding && Button_module.withHorisontalPadding);
     const handleClick = (e)=>{
-        if (isLoading || disabled) return;
+        if (isLoading || disabled) {
+            if (isAnchor) e.preventDefault();
+            return;
+        }
         onClick?.(e);
     };
-    return /*#__PURE__*/ jsxs("button", {
+    const tagSpecificProps = isAnchor ? {
+        href: disabled ? void 0 : rest.href,
+        'aria-disabled': disabled || void 0
+    } : {
+        type: type ?? 'button',
+        disabled
+    };
+    return /*#__PURE__*/ createElement(element, {
         ...rest,
-        disabled: disabled,
-        ref: ref,
-        "data-test-id": testId,
-        type: type,
-        className: className,
-        onClick: handleClick,
-        children: [
-            children,
-            isLoading && !disabled ? /*#__PURE__*/ jsx("div", {
-                className: Button_module.spinner,
-                children: /*#__PURE__*/ jsx(LoaderIcon, {})
-            }) : null
-        ]
-    });
+        ...tagSpecificProps,
+        ref,
+        'data-test-id': testId,
+        className,
+        onClick: handleClick
+    }, children, isLoading && !disabled ? /*#__PURE__*/ jsx("div", {
+        className: Button_module.spinner,
+        children: /*#__PURE__*/ jsx(LoaderIcon, {})
+    }) : null);
 });
 Button.displayName = 'Button';
 export { Button, ButtonColor, ButtonSize, ButtonVariants };

package/dist/components/Button/Button_module.css

@@ -10,6 +10,7 @@
   --cb-button-active-background: var(--cb-button-background);
   --cb-button-disabled-background: var(--button-primary-disabled, #d3d8ddb3);
   background: var(--cb-button-background);
+  width: fit-content;
   color: var(--cb-button-color);
   border: none;
   align-items: center;
@@ -17,6 +18,7 @@
   font-family: ALS Hauss, sans-serif;
   font-size: 14px;
   line-height: 20px;
+  text-decoration: none;
   display: flex;
   position: relative;
 }
@@ -36,7 +38,7 @@
   color: var(--cb-button-active-color);
 }
 
-.button-UGhzQm:disabled {
+.button-UGhzQm:disabled, .button-UGhzQm[aria-disabled="true"] {
   cursor: initial;
 }
 
@@ -63,7 +65,7 @@
   color: #0000;
 }
 
-.isLoading-IoL_rp:hover:not(:disabled) > :not(.spinner-MFPKSD), .isLoading-IoL_rp:not(:disabled) > :not(.spinner-MFPKSD) {
+.isLoading-IoL_rp:hover:not(:disabled, [aria-disabled="true"]) > :not(.spinner-MFPKSD), .isLoading-IoL_rp:not(:disabled, [aria-disabled="true"]) > :not(.spinner-MFPKSD) {
   opacity: 0;
 }
 
@@ -115,12 +117,12 @@
   outline: none;
 }
 
-.primary-gpQ7Mi:disabled {
+.primary-gpQ7Mi:disabled, .primary-gpQ7Mi[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.primary-gpQ7Mi:disabled svg path {
+.primary-gpQ7Mi:disabled svg path, .primary-gpQ7Mi[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -139,12 +141,12 @@
   outline: none;
 }
 
-.accent-eZImES:disabled {
+.accent-eZImES:disabled, .accent-eZImES[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.accent-eZImES:disabled svg path {
+.accent-eZImES:disabled svg path, .accent-eZImES[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -181,14 +183,14 @@
   outline: 1px solid var(--cb-button-active-color);
 }
 
-.additional-Ftulks:disabled {
+.additional-Ftulks:disabled, .additional-Ftulks[aria-disabled="true"] {
   outline: 1px solid var(--border-normal, #d1d6df);
   outline-offset: -1px;
   background: var(--button-secondary-normal, #fff);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.additional-Ftulks:disabled svg path {
+.additional-Ftulks:disabled svg path, .additional-Ftulks[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -222,11 +224,11 @@
   outline: 0;
 }
 
-.frameless-gZ67sX:disabled {
+.frameless-gZ67sX:disabled, .frameless-gZ67sX[aria-disabled="true"] {
   color: var(--text-tertiary, #9fa7af);
 }
 
-.frameless-gZ67sX:disabled svg path {
+.frameless-gZ67sX:disabled svg path, .frameless-gZ67sX[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -273,12 +275,12 @@
   box-shadow: 0 0 4px 0 var(--product-blue-400, #7eb4ff);
 }
 
-.secondary-bjc5zI:disabled {
+.secondary-bjc5zI:disabled, .secondary-bjc5zI[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.secondary-bjc5zI:disabled svg path {
+.secondary-bjc5zI:disabled svg path, .secondary-bjc5zI[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -314,12 +316,12 @@
   box-shadow: 0 0 4px 0 var(--product-blue-400, #7eb4ff);
 }
 
-.filled-WTubUm:disabled {
+.filled-WTubUm:disabled, .filled-WTubUm[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--elements-disable, #d1d6df);
 }
 
-.filled-WTubUm:disabled svg path {
+.filled-WTubUm:disabled svg path, .filled-WTubUm[aria-disabled="true"] svg path {
   stroke: var(--elements-disable, #d1d6df);
 }
 

package/dist/components/Checkbox/Checkbox.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { cn } from "../../common/css/cn.js";
 import { getTestId } from "../../common/testId/index.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Indicator } from "../Indicator/Indicator.js";
 import { getIndicatorProps } from "../Indicator/Indicator.helpers.js";
-import { Info } from "../Info/Info.js";
 import { useControlledState } from "../../hooks/useControlledState/index.js";
 import { useId } from "../../hooks/useId/index.js";
 import { CheckboxContent } from "./components/CheckboxContent.js";

package/dist/components/DateRange/ArrowButton/ArrowButton.module.js

@@ -0,0 +1,6 @@
+import "./ArrowButton_module.css";
+const ArrowButton_module = {
+    arrowButton: "arrowButton-jxtNrM",
+    disabled: "disabled-xcLgOR"
+};
+export default ArrowButton_module;

package/dist/components/DateRange/ArrowButton/ArrowButton_module.css

@@ -0,0 +1,26 @@
+.arrowButton-jxtNrM {
+  background: none;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.arrowButton-jxtNrM:focus-visible:not(.disabled-xcLgOR) {
+  outline: 1px solid var(--border-focused, #091739);
+}
+
+.arrowButton-jxtNrM.disabled-xcLgOR svg path {
+  stroke: var(--elements-disable, #d1d6df);
+}
+
+.arrowButton-jxtNrM:not(.disabled-xcLgOR) {
+  cursor: pointer;
+}
+

package/dist/components/DateRange/ArrowButton/index.d.ts

@@ -0,0 +1,8 @@
+import type { KeyboardEvent, PropsWithChildren } from 'react';
+interface ArrowButtonProps extends PropsWithChildren {
+    disabled?: boolean;
+    onClick?: () => void;
+    onPressTab?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const ArrowButton: (props: ArrowButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/ArrowButton/index.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../common/css/index.js";
+import { KEYBOARD_ACTIVATION_KEYS } from "../consts.js";
+import ArrowButton_module from "./ArrowButton.module.js";
+const ArrowButton = (props)=>{
+    const handleKeyDown = (event)=>{
+        event.stopPropagation();
+        if ('Tab' === event.key) return void props.onPressTab?.(event);
+        if (KEYBOARD_ACTIVATION_KEYS.includes(event.key)) props.onClick?.();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: cn(ArrowButton_module.arrowButton, props.disabled && ArrowButton_module.disabled),
+        disabled: props.disabled,
+        onMouseDown: (event)=>{
+            event.stopPropagation();
+            props.onClick?.();
+        },
+        onKeyDown: handleKeyDown,
+        children: props.children
+    });
+};
+export { ArrowButton };

package/dist/components/DateRange/Calendar/index.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+import type { DateRangeValue } from '../types';
+interface CalendarProps {
+    virtuosoRef?: RefObject<VirtuosoHandle>;
+    minDate: Date;
+    maxDate: Date;
+    value: DateRangeValue;
+    onSelectDate?: (date: Date) => void;
+}
+export declare const Calendar: (props: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/Calendar/index.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { CalendarVariant } from "../consts.js";
+import { MonthList } from "../MonthList/index.js";
+import { YearsList } from "../YearsList/index.js";
+const Calendar = (props)=>{
+    const showYearsCalendar = props.value.type === CalendarVariant.month;
+    if (showYearsCalendar) return /*#__PURE__*/ jsx(YearsList, {
+        virtuosoRef: props.virtuosoRef,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        value: props.value,
+        onSelectDate: props.onSelectDate
+    });
+    return /*#__PURE__*/ jsx(MonthList, {
+        virtuosoRef: props.virtuosoRef,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        onSelectDate: props.onSelectDate,
+        value: props.value
+    });
+};
+export { Calendar };

package/dist/components/DateRange/DateRange.d.ts

@@ -0,0 +1,6 @@
+import type { DateRangeProps } from './props';
+export type { DateRangeProps, DateRangeRenderInputOptions } from './props';
+export declare const DateRange: import("react").ForwardRefExoticComponent<DateRangeProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { DateRangeAnyDateValue, DateRangeDayValue, DateRangeFeatureProps, DateRangeLocale, DateRangeMonthValue, DateRangeNoDateValue, DateRangeRangeValue, DateRangeValue, DateRangeWeekValue, DateSelectVariant, DatesPeriod, DayQuickFilter, } from './types';
+export { DEFAULT_QUICK_FILTER } from './types';
+export { getPeriodValue, getRangeDates, getRequiredDateRangeValue, isAnyDateValue, isDayValue, isMonthValue, isNoDateValue, isRangeValue, isValueNullable, isValuePeriod, isWeekValue, } from './utils';

package/dist/components/DateRange/DateRange.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Dropdown } from "../Dropdown/Dropdown.js";
+import { DateRangeInput } from "./DateRangeInput/DateRangeInput.js";
+import { useDateRange } from "./hooks/useDateRange.js";
+import { DropdownContent } from "./DropdownContent/index.js";
+const DateRange = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const dateRange = useDateRange(props, ref);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            dateRange.renderInput ? dateRange.renderInput(dateRange.renderInputOptions) : /*#__PURE__*/ jsx(DateRangeInput, {
+                ...dateRange
+            }),
+            /*#__PURE__*/ jsx(Dropdown, {
+                ...dateRange.datepickerDropdown.dropdownAriaProps,
+                open: dateRange.datepickerDropdown.open,
+                triggerRef: dateRange.datepickerDropdown.triggerRef,
+                ref: dateRange.datepickerDropdown.dropdownRef,
+                onClose: dateRange.handleCloseDropdown,
+                isInnerScroll: true,
+                zIndex: props.dropdownZIndex,
+                children: /*#__PURE__*/ jsx(DropdownContent, {
+                    value: dateRange.value,
+                    withTime: dateRange.withTime,
+                    minDate: dateRange.calendar.minDate,
+                    maxDate: dateRange.calendar.maxDate,
+                    hintZIndex: dateRange.hintZIndex,
+                    withPeriod: dateRange.withPeriod,
+                    withAnyDate: dateRange.withAnyDate,
+                    withNoDate: dateRange.withNoDate,
+                    withTimeSelection: dateRange.withTimeSelection,
+                    withClearButton: dateRange.withClearButton,
+                    quickFilter: dateRange.quickFilter,
+                    requiredDate: dateRange.requiredDate,
+                    onChangeWithTime: dateRange.handleChangeWithTime,
+                    onChange: dateRange.onChange,
+                    onClearButtonClick: dateRange.handleClickOnClearButton,
+                    virtuosoRef: dateRange.monthList.virtuosoRef,
+                    variantsListRef: dateRange.variantsListRef,
+                    onPickDate: dateRange.calendar.handlePickDate,
+                    scrollToMonthHandler: dateRange.monthList.scrollToMonth,
+                    handleClose: dateRange.handleCloseDropdown
+                })
+            })
+        ]
+    });
+});
+DateRange.displayName = 'DateRange';
+export { DEFAULT_QUICK_FILTER } from "./types.js";
+export { getPeriodValue, getRangeDates, getRequiredDateRangeValue, isAnyDateValue, isDayValue, isMonthValue, isNoDateValue, isRangeValue, isValueNullable, isValuePeriod, isWeekValue } from "./utils.js";
+export { DateRange };