feat(plasma-new-hope): add DatePicker

packages/plasma-new-hope/package.json

@@ -98,9 +98,10 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/plasma-core": "1.160.0-dev.0",
+    "dayjs": "1.11.11",
     "focus-visible": "5.2.0",
     "react-draggable": "4.4.3",
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   }
-}
+}

packages/plasma-new-hope/src/components/Calendar/hooks/useDays.ts

@@ -272,4 +272,4 @@ export const useDays = (
         }
 
         return getMatrix<DateItem>(days);
-    }, [date, value, eventList, disabledList, max, min]);
+    }, [date, value, eventList, disabledList, max, min, includeEdgeDates]);

packages/plasma-new-hope/src/components/Combobox/Combobox.tsx

@@ -2,8 +2,7 @@ import React, { Children, forwardRef, useEffect, useRef, useState } from 'react'
 import { safeUseId, useForkRef } from '@salutejs/plasma-core';
 
 import { RootProps } from '../../engines';
-import { cx } from '../../utils';
-import { getPlacements } from '../Dropdown/utils';
+import { cx, getPlacements } from '../../utils';
 import { getChildren, getNewSelected, getValues } from '../Select/utils';
 import { useKeyNavigation } from '../Select/hooks';
 import { useDidMountEffect, useForceUpdate } from '../../hooks';

packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts

@@ -0,0 +1,137 @@
+export const classes = {
+    datePickerError: 'date-picker-error',
+    datePickerSuccess: 'date-picker-success',
+};
+
+export const tokens = {
+    /** Токены лейбла */
+    labelColor: '--plasma-date-picker__label-color',
+    labelColorReadOnly: '--plasma-date-picker__label-color-readonly',
+    labelOffset: '--plasma-date-picker__label-offset',
+
+    labelFontFamily: '--plasma-date-picker__label-font-family',
+    labelFontStyle: '--plasma-date-picker__label-font-style',
+    labelFontSize: '--plasma-date-picker__label-font-size',
+    labelFontWeight: '--plasma-date-picker__label-font-weight',
+    labelLetterSpacing: '--plasma-date-picker__label-letter-spacing',
+    labelLineHeight: '--plasma-date-picker__label-line-height',
+
+    /** Токены вспомогательного текста */
+    leftHelperColor: '--plasma-date-picker__left-helper-color',
+    leftHelperColorReadOnly: '--plasma-date-picker__left-helper-color-readonly',
+    leftHelperOffset: '--plasma-date-picker__left-helper-offset',
+
+    leftHelperFontFamily: '--plasma-date-picker__left-helper-font-family',
+    leftHelperFontStyle: '--plasma-date-picker__left-helper-font-style',
+    leftHelperFontSize: '--plasma-date-picker__left-helper-font-size',
+    leftHelperFontWeight: '--plasma-date-picker__left-helper-font-weight',
+    leftHelperLetterSpacing: '--plasma-date-picker__left-helper-letter-spacing',
+    leftHelperLineHeight: '--plasma-date-picker__left-helper-line-height',
+
+    /** Прозрачность для всего компонента в состоянии disabled */
+    disabledOpacity: '--plasma-date-picker-disabled-opacity',
+
+    /** Цвет обводки поля ввода при фокусе */
+    focusColor: '--plasma-date-picker-focus-color',
+
+    /** Токены полей ввода */
+    textFieldColor: '--plasma-date-picker-textfield-color',
+    textFieldFocusColor: '--plasma-date-picker-textfield-focus-color',
+    textFieldPlaceholderColor: '--plasma-date-picker-textfield-placeholder-color',
+    textFieldCaretColor: '--plasma-date-picker-textfield-caret-color',
+
+    textFieldBackgroundColor: '--plasma-date-picker-textfield-background-color',
+    textFieldBackgroundColorHover: '--plasma-date-picker-textfield-background-color-hover',
+    textFieldBackgroundColorFocus: '--plasma-date-picker-textfield-background-color-focus',
+    textFieldBackgroundErrorColor: '--plasma-date-picker-textfield-background-color-error',
+    textFieldBackgroundErrorColorHover: '--plasma-date-picker-textfield-background-color-error-hover',
+    textFieldBackgroundErrorColorFocus: '--plasma-date-picker-textfield-background-color-error-focus',
+    textFieldBackgroundSuccessColor: '--plasma-date-picker-textfield-background-color-success',
+    textFieldBackgroundSuccessColorHover: '--plasma-date-picker-textfield-background-color-success-hover',
+    textFieldBackgroundSuccessColorFocus: '--plasma-date-picker-textfield-background-color-success-focus',
+
+    textFieldBorderColor: '--plasma-date-picker-textfield-border-color',
+    textFieldBorderColorHover: '--plasma-date-picker-textfield-border-color-hover',
+    textFieldBorderColorFocus: '--plasma-date-picker-textfield-border-color-focus',
+    textFieldBorderColorError: '--plasma-date-picker-textfield-border-color-error',
+    textFieldBorderColorErrorHover: '--plasma-date-picker-textfield-border-color-error-hover',
+    textFieldBorderColorErrorFocus: '--plasma-date-picker-textfield-border-color-error-focus',
+    textFieldBorderColorSuccess: '--plasma-date-picker-textfield-border-color-success',
+    textFieldBorderColorSuccessHover: '--plasma-date-picker-textfield-border-color-success-hover',
+    textFieldBorderColorSuccessFocus: '--plasma-date-picker-textfield-border-color-success-focus',
+
+    textFieldColorReadOnly: '--plasma-date-picker-textfield-color-readonly',
+    textFieldBackgroundColorReadOnly: '--plasma-date-picker-textfield-background-color-readonly',
+    textFieldBorderColorReadOnly: '--plasma-date-picker-textfield-border-color-readonly',
+    textFieldPlaceholderColorReadOnly: '--plasma-date-picker-textfield-placeholder-color-readonly',
+
+    textFieldHeight: '--plasma-date-picker-textfield-height',
+    textFieldBorderWidth: '--plasma-date-picker-textfield-border-width',
+    textFieldBorderRadius: '--plasma-date-picker-textfield-border-radius',
+    textFieldPadding: '--plasma-date-picker-textfield-padding',
+    textFieldLeftContentMargin: '--plasma-date-picker-textfield__left-content-margin',
+    textFieldRightContentMargin: '--plasma-date-picker-textfield__right-content-margin',
+    textFieldFontFamily: '--plasma-date-picker-textfield-font-family',
+    textFieldFontStyle: '--plasma-date-picker-textfield-font-style',
+    textFieldFontSize: '--plasma-date-picker-textfield-font-size',
+    textFieldFontWeight: '--plasma-date-picker-textfield-font-weight',
+    textFieldLetterSpacing: '--plasma-date-picker-textfield-letter-spacing',
+    textFieldLineHeight: '--plasma-date-picker-textfield-line-height',
+
+    textFieldTextBeforeColor: '--plasma-date-picker-textfield__before-text-color',
+    textFieldTextAfterColor: '--plasma-date-picker-textfield__after-text-color',
+    textFieldTextBeforeMargin: '--plasma-date-picker-textfield__before-text-margin',
+    textFieldTextAfterMargin: '--plasma-date-picker-textfield__after-text-margin',
+
+    /** Токены календаря */
+    calendarShadow: '--plasma-date-picker-calendar-shadow',
+    calendarBackgroundColor: '--plasma-date-picker-calendar-background',
+    calendarItemBorderRadius: '--plasma-date-picker-calendar-item-border-radius',
+    calendarSelectedItemBackground: '--plasma-date-picker-calendar-selected-item-background',
+    calendarSelectedItemColor: '--plasma-date-picker-calendar-selected-item-color',
+    calendarSelectableItemBackgroundHover: '--plasma-date-picker-calendar-selectable-item-bg-hover',
+    calendarCurrentItemBorderColor: '--plasma-date-picker-calendar-current-item-border-color',
+    calendarCurrentItemBackgroundHover: '--plasma-date-picker-calendar-current-item-bg-hover',
+    calendarCurrentItemColorHover: '--plasma-date-picker-calendar-current-item-color-hover',
+    calendarCurrentItemChildBackgroundHover: '--plasma-date-picker-calendar-current-item-child-bg-hover',
+    calendarActiveItemBackground: '--plasma-date-picker-calendar-active-item-bg',
+    calendarActiveItemColor: '--plasma-date-picker-calendar-active-item-color',
+    calendarHoveredItemBackground: '--plasma-date-picker-calendar-hovered-item-bg',
+    calendarHoveredItemColor: '--plasma-date-picker-calendar-hovered-item-color',
+    calendarSeparatorBackground: '--plasma-date-picker-calendar-separator-background',
+    calendarRangeBackground: '--plasma-date-picker-calendar-range-background',
+    calendarOutlineFocusColor: '--plasma-date-picker-calendar-outline-focus-color',
+    calendarContentPrimaryColor: '--plasma-date-picker-calendar-content-primary-color',
+    calendarContentSecondaryColor: '--plasma-date-picker-calendar-content-secondary-color',
+
+    calendarHeaderArrowContainerWidth: '--plasma-date-picker-calendar-arrow-container-width',
+
+    calendarHeaderFontFamily: '--plasma-date-picker-calendar-header-font-family',
+    calendarHeaderFontSize: '--plasma-date-picker-calendar-header-font-size',
+    calendarHeaderFontStyle: '--plasma-date-picker-calendar-header-font-style',
+    calendarHeaderFontLetterSpacing: '--plasma-date-picker-calendar-header-font-letter-spacing',
+    calendarHeaderFontLineHeight: '--plasma-date-picker-calendar-header-line-height',
+    calendarHeaderFontWeight: '--plasma-date-picker-calendar-header-font-weight',
+    calendarHeaderFontWeightBold: '--plasma-date-picker-calendar-header-font-weight-bold',
+
+    calendarYearFontFamily: '--plasma-date-picker-calendar-year-font-family',
+    calendarYearFontSize: '--plasma-date-picker-calendar-year-font-size',
+    calendarYearFontStyle: '--plasma-date-picker-calendar-year-font-style',
+    calendarYearFontLetterSpacing: '--plasma-date-picker-calendar-year-font-letter-spacing',
+    calendarYearFontLineHeight: '--plasma-date-picker-calendar-year-line-height',
+    calendarYearFontWeight: '--plasma-date-picker-calendar-year-font-weight',
+
+    calendarMonthFontFamily: '--plasma-date-picker-calendar-month-font-family',
+    calendarMonthFontSize: '--plasma-date-picker-calendar-month-font-size',
+    calendarMonthFontStyle: '--plasma-date-picker-calendar-month-font-style',
+    calendarMonthFontLetterSpacing: '--plasma-date-picker-calendar-month-font-letter-spacing',
+    calendarMonthFontLineHeight: '--plasma-date-picker-calendar-month-line-height',
+    calendarMonthFontWeight: '--plasma-date-picker-calendar-month-font-weight',
+
+    calendarDayFontFamily: '--plasma-date-picker-calendar-day-font-family',
+    calendarDayFontSize: '--plasma-date-picker-calendar-day-font-size',
+    calendarDayFontStyle: '--plasma-date-picker-calendar-day-font-style',
+    calendarDayFontLetterSpacing: '--plasma-date-picker-calendar-day-font-letter-spacing',
+    calendarDayFontLineHeight: '--plasma-date-picker-calendar-day-line-height',
+    calendarDayFontWeight: '--plasma-date-picker-calendar-day-font-weight',
+};