@salutejs/plasma-new-hope 0.93.0 → 0.94.0-canary.1224.9693519563.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Calendar/Calendar.tokens.js +67 -28
- package/cjs/components/Calendar/Calendar.tokens.js.map +1 -1
- package/cjs/components/Calendar/Calendar.types.js.map +1 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.css +57 -29
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js +6 -0
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.styles.js +1 -1
- package/cjs/components/Calendar/CalendarBase/CalendarBase.styles.js.map +1 -1
- package/cjs/components/Calendar/CalendarBase/{CalendarBase.styles_rv9ax9.css → CalendarBase.styles_1m6uih1.css} +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.css +58 -30
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +6 -0
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.styles.js +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.styles.js.map +1 -1
- package/{es/components/Calendar/CalendarDouble/CalendarDouble.styles_1rc2ejs.css → cjs/components/Calendar/CalendarDouble/CalendarDouble.styles_e9ada0.css} +2 -2
- package/cjs/components/Calendar/hoc/withRange.js.map +1 -1
- package/cjs/components/Calendar/hooks/useDays.js +1 -1
- package/cjs/components/Calendar/hooks/useDays.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarDayItem/CalendarDayItem.css +4 -4
- package/cjs/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js +9 -9
- package/cjs/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles_107vqka.css +4 -0
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.css +7 -7
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +1 -1
- package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarDays/{CalendarDays.styles_bnrjbd.css → CalendarDays.styles_1oq8sud.css} +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.css +36 -8
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +31 -17
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js +27 -12
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.styles_gnorek.css +8 -0
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.css +4 -4
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +1 -1
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +1 -1
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_7jeg2n.css +4 -0
- package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.css +4 -4
- package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js +1 -1
- package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +1 -1
- package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles_4z2ki7.css +4 -0
- package/cjs/components/Calendar/utils/index.js.map +1 -1
- package/cjs/components/Combobox/Combobox.js +2 -2
- package/cjs/components/Combobox/Combobox.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.tokens.js +189 -0
- package/cjs/components/DatePicker/DatePicker.tokens.js.map +1 -0
- package/cjs/components/DatePicker/DatePickerBase.styles.js +30 -0
- package/cjs/components/DatePicker/DatePickerBase.styles.js.map +1 -0
- package/cjs/components/DatePicker/DatePickerBase.styles_1thp2xv.css +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +152 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +285 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.styles.js +51 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.styles.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDate.styles_ww61h9.css +5 -0
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +144 -0
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +83 -0
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +42 -0
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_wp3vfj.css +2 -0
- package/cjs/components/DatePicker/RangeDate/variations/_disabled/base.js +9 -0
- package/cjs/components/DatePicker/RangeDate/variations/_disabled/base.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/variations/_disabled/base_tl4jc7.css +1 -0
- package/cjs/components/DatePicker/RangeDate/variations/_readonly/base.js +9 -0
- package/cjs/components/DatePicker/RangeDate/variations/_readonly/base.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/variations/_readonly/base_f58pkk.css +1 -0
- package/cjs/components/DatePicker/RangeDate/variations/_size/base.js +9 -0
- package/cjs/components/DatePicker/RangeDate/variations/_size/base.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/variations/_size/base_1911nyw.css +1 -0
- package/cjs/components/DatePicker/RangeDate/variations/_view/base.js +9 -0
- package/cjs/components/DatePicker/RangeDate/variations/_view/base.js.map +1 -0
- package/cjs/components/DatePicker/RangeDate/variations/_view/base_11yn9y8.css +1 -0
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +134 -0
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +183 -0
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -0
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +51 -0
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -0
- package/cjs/components/DatePicker/SingleDate/SingleDate.styles_18b5qkz.css +5 -0
- package/cjs/components/DatePicker/SingleDate/variations/_disabled/base.js +9 -0
- package/cjs/components/DatePicker/SingleDate/variations/_disabled/base.js.map +1 -0
- package/cjs/components/DatePicker/SingleDate/variations/_disabled/base_1rfgfsz.css +1 -0
- package/cjs/components/DatePicker/SingleDate/variations/_readonly/base.js +9 -0
- package/cjs/components/DatePicker/SingleDate/variations/_readonly/base.js.map +1 -0
- package/cjs/components/DatePicker/SingleDate/variations/_readonly/base_1jucwp.css +1 -0
- package/cjs/components/DatePicker/SingleDate/variations/_size/base.js +9 -0
- package/cjs/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -0
- package/cjs/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +1 -0
- package/cjs/components/DatePicker/SingleDate/variations/_view/base.js +9 -0
- package/cjs/components/DatePicker/SingleDate/variations/_view/base.js.map +1 -0
- package/cjs/components/DatePicker/SingleDate/variations/_view/base_15vaheb.css +1 -0
- package/cjs/components/DatePicker/hooks/useDatePicker.js +79 -0
- package/cjs/components/DatePicker/hooks/useDatePicker.js.map +1 -0
- package/cjs/components/DatePicker/utils/dateHelper.js +84 -0
- package/cjs/components/DatePicker/utils/dateHelper.js.map +1 -0
- package/cjs/components/Dropdown/Dropdown.js +4 -2
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +8 -4
- package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +6 -5
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Dropdown/utils/index.js +0 -17
- package/cjs/components/Dropdown/utils/index.js.map +1 -1
- package/cjs/components/Range/Range.css +6 -6
- package/cjs/components/Range/Range.js +17 -2
- package/cjs/components/Range/Range.js.map +1 -1
- package/cjs/components/Range/Range.styles.js +1 -1
- package/cjs/components/Range/Range.styles.js.map +1 -1
- package/cjs/components/Range/Range.styles_9rort8.css +8 -0
- package/cjs/components/Select/Select.js +2 -2
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Slider/Slider.css +3 -3
- package/cjs/components/Slider/components/Double/Double.css +3 -3
- package/cjs/components/TextField/TextField.tokens.js +1 -1
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/cjs/components/TextField/variations/_read-only/base_1vu13zn.css +1 -0
- package/cjs/components/TextField/variations/_size/base.js +1 -1
- package/cjs/components/TextField/variations/_size/base.js.map +1 -1
- package/cjs/components/TextField/variations/_size/base_orwx1f.css +1 -0
- package/cjs/components/TextField/variations/_view/base.js +1 -1
- package/cjs/components/TextField/variations/_view/base_18ea6z7.css +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureDownFill.js +23 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureDownFill.js.map +1 -0
- package/cjs/components/_Icon/Icon.assets/DisclosureLeft.js +1 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureLeft.js.map +1 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +5 -15
- package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/cjs/components/_Icon/Icons/IconDisclosureDownFill.js +23 -0
- package/cjs/components/_Icon/Icons/IconDisclosureDownFill.js.map +1 -0
- package/cjs/index.css +71 -38
- package/cjs/index.js +12 -0
- package/cjs/index.js.map +1 -1
- package/cjs/utils/datejs.js +12 -0
- package/cjs/utils/datejs.js.map +1 -0
- package/cjs/utils/getPopoverPlacement.js +23 -0
- package/cjs/utils/getPopoverPlacement.js.map +1 -0
- package/cjs/utils/index.js.map +1 -1
- package/es/components/Calendar/Calendar.tokens.js +67 -28
- package/es/components/Calendar/Calendar.tokens.js.map +1 -1
- package/es/components/Calendar/Calendar.types.js.map +1 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.css +57 -29
- package/es/components/Calendar/CalendarBase/CalendarBase.js +7 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.styles.js +1 -1
- package/es/components/Calendar/CalendarBase/CalendarBase.styles.js.map +1 -1
- package/es/components/Calendar/CalendarBase/{CalendarBase.styles_rv9ax9.css → CalendarBase.styles_1m6uih1.css} +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.css +58 -30
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js +7 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js.map +1 -1
- package/{cjs/components/Calendar/CalendarDouble/CalendarDouble.styles_1rc2ejs.css → es/components/Calendar/CalendarDouble/CalendarDouble.styles_e9ada0.css} +2 -2
- package/es/components/Calendar/hoc/withRange.js.map +1 -1
- package/es/components/Calendar/hooks/useDays.js +1 -1
- package/es/components/Calendar/hooks/useDays.js.map +1 -1
- package/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.css +4 -4
- package/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js +9 -9
- package/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js.map +1 -1
- package/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles_107vqka.css +4 -0
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.css +7 -7
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +1 -1
- package/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js.map +1 -1
- package/es/components/Calendar/ui/CalendarDays/{CalendarDays.styles_bnrjbd.css → CalendarDays.styles_1oq8sud.css} +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.css +36 -8
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +32 -18
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js +26 -13
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js.map +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles_gnorek.css +8 -0
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.css +4 -4
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +1 -1
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +1 -1
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js.map +1 -1
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_7jeg2n.css +4 -0
- package/es/components/Calendar/ui/CalendarYears/CalendarYears.css +4 -4
- package/es/components/Calendar/ui/CalendarYears/CalendarYears.js +1 -1
- package/es/components/Calendar/ui/CalendarYears/CalendarYears.js.map +1 -1
- package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +1 -1
- package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js.map +1 -1
- package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles_4z2ki7.css +4 -0
- package/es/components/Calendar/utils/index.js.map +1 -1
- package/es/components/Combobox/Combobox.js +1 -1
- package/es/components/Combobox/Combobox.js.map +1 -1
- package/es/components/DatePicker/DatePicker.tokens.js +184 -0
- package/es/components/DatePicker/DatePicker.tokens.js.map +1 -0
- package/es/components/DatePicker/DatePickerBase.styles.js +26 -0
- package/es/components/DatePicker/DatePickerBase.styles.js.map +1 -0
- package/es/components/DatePicker/DatePickerBase.styles_1thp2xv.css +1 -0
- package/es/components/DatePicker/RangeDate/RangeDate.css +152 -0
- package/es/components/DatePicker/RangeDate/RangeDate.js +280 -0
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -0
- package/es/components/DatePicker/RangeDate/RangeDate.styles.js +43 -0
- package/es/components/DatePicker/RangeDate/RangeDate.styles.js.map +1 -0
- package/es/components/DatePicker/RangeDate/RangeDate.styles_ww61h9.css +5 -0
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +144 -0
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +79 -0
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -0
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +37 -0
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js.map +1 -0
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_wp3vfj.css +2 -0
- package/es/components/DatePicker/RangeDate/variations/_disabled/base.js +5 -0
- package/es/components/DatePicker/RangeDate/variations/_disabled/base.js.map +1 -0
- package/es/components/DatePicker/RangeDate/variations/_disabled/base_tl4jc7.css +1 -0
- package/es/components/DatePicker/RangeDate/variations/_readonly/base.js +5 -0
- package/es/components/DatePicker/RangeDate/variations/_readonly/base.js.map +1 -0
- package/es/components/DatePicker/RangeDate/variations/_readonly/base_f58pkk.css +1 -0
- package/es/components/DatePicker/RangeDate/variations/_size/base.js +5 -0
- package/es/components/DatePicker/RangeDate/variations/_size/base.js.map +1 -0
- package/es/components/DatePicker/RangeDate/variations/_size/base_1911nyw.css +1 -0
- package/es/components/DatePicker/RangeDate/variations/_view/base.js +5 -0
- package/es/components/DatePicker/RangeDate/variations/_view/base.js.map +1 -0
- package/es/components/DatePicker/RangeDate/variations/_view/base_11yn9y8.css +1 -0
- package/es/components/DatePicker/SingleDate/SingleDate.css +134 -0
- package/es/components/DatePicker/SingleDate/SingleDate.js +178 -0
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -0
- package/es/components/DatePicker/SingleDate/SingleDate.styles.js +43 -0
- package/es/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -0
- package/es/components/DatePicker/SingleDate/SingleDate.styles_18b5qkz.css +5 -0
- package/es/components/DatePicker/SingleDate/variations/_disabled/base.js +5 -0
- package/es/components/DatePicker/SingleDate/variations/_disabled/base.js.map +1 -0
- package/es/components/DatePicker/SingleDate/variations/_disabled/base_1rfgfsz.css +1 -0
- package/es/components/DatePicker/SingleDate/variations/_readonly/base.js +5 -0
- package/es/components/DatePicker/SingleDate/variations/_readonly/base.js.map +1 -0
- package/es/components/DatePicker/SingleDate/variations/_readonly/base_1jucwp.css +1 -0
- package/es/components/DatePicker/SingleDate/variations/_size/base.js +5 -0
- package/es/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -0
- package/es/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +1 -0
- package/es/components/DatePicker/SingleDate/variations/_view/base.js +5 -0
- package/es/components/DatePicker/SingleDate/variations/_view/base.js.map +1 -0
- package/es/components/DatePicker/SingleDate/variations/_view/base_15vaheb.css +1 -0
- package/es/components/DatePicker/hooks/useDatePicker.js +75 -0
- package/es/components/DatePicker/hooks/useDatePicker.js.map +1 -0
- package/es/components/DatePicker/utils/dateHelper.js +76 -0
- package/es/components/DatePicker/utils/dateHelper.js.map +1 -0
- package/es/components/Dropdown/Dropdown.js +4 -2
- package/es/components/Dropdown/Dropdown.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +8 -4
- package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +6 -5
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Dropdown/utils/index.js +1 -16
- package/es/components/Dropdown/utils/index.js.map +1 -1
- package/es/components/Range/Range.css +6 -6
- package/es/components/Range/Range.js +18 -3
- package/es/components/Range/Range.js.map +1 -1
- package/es/components/Range/Range.styles.js +1 -1
- package/es/components/Range/Range.styles.js.map +1 -1
- package/es/components/Range/Range.styles_9rort8.css +8 -0
- package/es/components/Select/Select.js +1 -1
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Slider/Slider.css +3 -3
- package/es/components/Slider/components/Double/Double.css +3 -3
- package/es/components/TextField/TextField.tokens.js +1 -1
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/variations/_read-only/base.js +1 -1
- package/es/components/TextField/variations/_read-only/base_1vu13zn.css +1 -0
- package/es/components/TextField/variations/_size/base.js +1 -1
- package/es/components/TextField/variations/_size/base.js.map +1 -1
- package/es/components/TextField/variations/_size/base_orwx1f.css +1 -0
- package/es/components/TextField/variations/_view/base.js +1 -1
- package/es/components/TextField/variations/_view/base_18ea6z7.css +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureDownFill.js +19 -0
- package/es/components/_Icon/Icon.assets/DisclosureDownFill.js.map +1 -0
- package/es/components/_Icon/Icon.assets/DisclosureLeft.js +1 -1
- package/es/components/_Icon/Icon.assets/DisclosureLeft.js.map +1 -1
- package/es/components/_Icon/Icon.assets/DisclosureRight.js +5 -15
- package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
- package/es/components/_Icon/Icons/IconDisclosureDownFill.js +19 -0
- package/es/components/_Icon/Icons/IconDisclosureDownFill.js.map +1 -0
- package/es/index.css +71 -38
- package/es/index.js +4 -0
- package/es/index.js.map +1 -1
- package/es/utils/datejs.js +8 -0
- package/es/utils/datejs.js.map +1 -0
- package/es/utils/getPopoverPlacement.js +18 -0
- package/es/utils/getPopoverPlacement.js.map +1 -0
- package/es/utils/index.js.map +1 -1
- package/package.json +3 -2
- package/styled-components/cjs/components/Calendar/Calendar.tokens.js +67 -28
- package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +6 -0
- package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.styles.js +2 -1
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +6 -0
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.styles.js +2 -2
- package/styled-components/cjs/components/Calendar/hooks/useDays.js +1 -1
- package/styled-components/cjs/components/Calendar/mixins/active.js +12 -0
- package/styled-components/cjs/components/Calendar/mixins/flex.js +8 -0
- package/styled-components/cjs/components/Calendar/mixins/index.js +30 -29
- package/styled-components/cjs/components/Calendar/mixins/selected.js +24 -0
- package/styled-components/cjs/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js +27 -20
- package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +2 -1
- package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +30 -16
- package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js +29 -11
- package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +1 -1
- package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +26 -12
- package/styled-components/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js +1 -1
- package/styled-components/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +26 -14
- package/styled-components/cjs/components/Combobox/Combobox.js +6 -7
- package/styled-components/cjs/components/DatePicker/DatePicker.template-doc.mdx +150 -0
- package/styled-components/cjs/components/DatePicker/DatePicker.tokens.js +187 -0
- package/styled-components/cjs/components/DatePicker/DatePickerBase.styles.js +19 -0
- package/styled-components/cjs/components/DatePicker/DatePickerBase.types.js +5 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +293 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.styles.js +33 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.types.js +5 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +81 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +26 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.js +5 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_disabled/base.js +9 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_disabled/tokens.json +0 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_readonly/base.js +10 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_readonly/tokens.json +4 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_size/base.js +10 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_view/base.js +10 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +190 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +33 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.types.js +5 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_disabled/base.js +9 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_disabled/tokens.json +4 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_readonly/base.js +10 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_readonly/tokens.json +4 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_size/base.js +10 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_size/tokens.json +16 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_view/base.js +10 -0
- package/styled-components/cjs/components/DatePicker/SingleDate/variations/_view/tokens.json +1 -0
- package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js +77 -0
- package/styled-components/cjs/components/DatePicker/index.js +44 -0
- package/styled-components/cjs/components/DatePicker/utils/dateHelper.js +78 -0
- package/styled-components/cjs/components/Dropdown/Dropdown.js +3 -2
- package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +8 -4
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +6 -5
- package/styled-components/cjs/components/Dropdown/utils/index.js +1 -16
- package/styled-components/cjs/components/Range/Range.js +17 -2
- package/styled-components/cjs/components/Range/Range.styles.js +3 -2
- package/styled-components/cjs/components/Select/Select.js +7 -8
- package/styled-components/cjs/components/TextField/TextField.tokens.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDownFill.js +22 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeft.js +1 -1
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +5 -15
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDownFill.js +22 -0
- package/styled-components/cjs/components/_Icon/index.js +7 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +24 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +5 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +5 -2
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +31 -0
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.js +13 -0
- package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +257 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx +24 -6
- package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarBase.config.js +5 -2
- package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarDouble.config.js +5 -2
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.config.js +31 -0
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.js +13 -0
- package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +257 -0
- package/styled-components/cjs/examples/plasma_web/components/Range/Range.config.js +4 -4
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/Calendar.stories.tsx +24 -6
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarBase.config.js +5 -2
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarDouble.config.js +5 -2
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/cjs/utils/datejs.js +11 -0
- package/styled-components/cjs/utils/getPopoverPlacement.js +21 -0
- package/styled-components/cjs/utils/index.js +22 -0
- package/styled-components/es/components/Calendar/Calendar.tokens.js +67 -28
- package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +7 -1
- package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.styles.js +2 -1
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +7 -1
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js +2 -2
- package/styled-components/es/components/Calendar/hooks/useDays.js +1 -1
- package/styled-components/es/components/Calendar/mixins/active.js +6 -0
- package/styled-components/es/components/Calendar/mixins/flex.js +2 -0
- package/styled-components/es/components/Calendar/mixins/index.js +3 -27
- package/styled-components/es/components/Calendar/mixins/selected.js +18 -0
- package/styled-components/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js +26 -19
- package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +2 -1
- package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +32 -18
- package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js +29 -11
- package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +1 -1
- package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +25 -11
- package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.js +1 -1
- package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +25 -13
- package/styled-components/es/components/Combobox/Combobox.js +1 -2
- package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx +150 -0
- package/styled-components/es/components/DatePicker/DatePicker.tokens.js +181 -0
- package/styled-components/es/components/DatePicker/DatePickerBase.styles.js +12 -0
- package/styled-components/es/components/DatePicker/DatePickerBase.types.js +1 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +284 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.styles.js +25 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.types.js +1 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +74 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +19 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.js +1 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_disabled/base.js +3 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_disabled/tokens.json +0 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_readonly/base.js +4 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_readonly/tokens.json +4 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_size/base.js +4 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_view/base.js +4 -0
- package/styled-components/es/components/DatePicker/RangeDate/variations/_view/tokens.json +0 -0
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +181 -0
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js +25 -0
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.types.js +1 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_disabled/base.js +3 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_disabled/tokens.json +4 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_readonly/base.js +4 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_readonly/tokens.json +4 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_size/base.js +4 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_size/tokens.json +16 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_view/base.js +4 -0
- package/styled-components/es/components/DatePicker/SingleDate/variations/_view/tokens.json +1 -0
- package/styled-components/es/components/DatePicker/hooks/useDatePicker.js +71 -0
- package/styled-components/es/components/DatePicker/index.js +3 -0
- package/styled-components/es/components/DatePicker/utils/dateHelper.js +72 -0
- package/styled-components/es/components/Dropdown/Dropdown.js +4 -3
- package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +8 -4
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +6 -5
- package/styled-components/es/components/Dropdown/utils/index.js +0 -15
- package/styled-components/es/components/Range/Range.js +18 -3
- package/styled-components/es/components/Range/Range.styles.js +3 -2
- package/styled-components/es/components/Select/Select.js +1 -2
- package/styled-components/es/components/TextField/TextField.tokens.js +1 -1
- package/styled-components/es/components/TextField/variations/_size/base.js +1 -1
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureDownFill.js +15 -0
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeft.js +1 -1
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +5 -15
- package/styled-components/es/components/_Icon/Icons/IconDisclosureDownFill.js +15 -0
- package/styled-components/es/components/_Icon/index.js +1 -0
- package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +24 -6
- package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +5 -2
- package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +5 -2
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +25 -0
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.js +7 -0
- package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +257 -0
- package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx +24 -6
- package/styled-components/es/examples/plasma_web/components/Calendar/CalendarBase.config.js +5 -2
- package/styled-components/es/examples/plasma_web/components/Calendar/CalendarDouble.config.js +5 -2
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.config.js +25 -0
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.js +7 -0
- package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +257 -0
- package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +4 -4
- package/styled-components/es/examples/sds_engineer/components/Calendar/Calendar.stories.tsx +24 -6
- package/styled-components/es/examples/sds_engineer/components/Calendar/CalendarBase.config.js +5 -2
- package/styled-components/es/examples/sds_engineer/components/Calendar/CalendarDouble.config.js +5 -2
- package/styled-components/es/index.js +2 -1
- package/styled-components/es/utils/datejs.js +4 -0
- package/styled-components/es/utils/getPopoverPlacement.js +15 -0
- package/styled-components/es/utils/index.js +1 -0
- package/types/components/Accordion/utils/index.d.ts +1 -1
- package/types/components/Calendar/Calendar.tokens.d.ts +60 -26
- package/types/components/Calendar/Calendar.tokens.d.ts.map +1 -1
- package/types/components/Calendar/Calendar.types.d.ts +1 -1
- package/types/components/Calendar/Calendar.types.d.ts.map +1 -1
- package/types/components/Calendar/CalendarBase/CalendarBase.d.ts +27 -3
- package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
- package/types/components/Calendar/CalendarBase/CalendarBase.styles.d.ts.map +1 -1
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts +30 -3
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
- package/types/components/Calendar/hooks/useDays.d.ts.map +1 -1
- package/types/components/Calendar/mixins/active.d.ts +17 -0
- package/types/components/Calendar/mixins/active.d.ts.map +1 -0
- package/types/components/Calendar/mixins/flex.d.ts +3 -0
- package/types/components/Calendar/mixins/flex.d.ts.map +1 -0
- package/types/components/Calendar/mixins/index.d.ts +3 -8
- package/types/components/Calendar/mixins/index.d.ts.map +1 -1
- package/types/components/Calendar/mixins/selected.d.ts +40 -0
- package/types/components/Calendar/mixins/selected.d.ts.map +1 -0
- package/types/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarDays/CalendarDays.styles.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.d.ts +47 -7
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts +1 -0
- package/types/components/Calendar/ui/CalendarHeader/CalendarHeader.types.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.d.ts.map +1 -1
- package/types/components/Calendar/ui/CalendarYears/CalendarYears.styles.d.ts.map +1 -1
- package/types/components/Calendar/utils/index.d.ts +1 -1
- package/types/components/Calendar/utils/index.d.ts.map +1 -1
- package/types/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/components/DatePicker/DatePicker.tokens.d.ts +182 -0
- package/types/components/DatePicker/DatePicker.tokens.d.ts.map +1 -0
- package/types/components/DatePicker/DatePickerBase.styles.d.ts +8 -0
- package/types/components/DatePicker/DatePickerBase.styles.d.ts.map +1 -0
- package/types/components/DatePicker/DatePickerBase.types.d.ts +37 -0
- package/types/components/DatePicker/DatePickerBase.types.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts +110 -0
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts +115 -0
- package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +76 -0
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts +4 -0
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.d.ts +5 -0
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.d.ts +29 -0
- package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/variations/_disabled/base.d.ts +2 -0
- package/types/components/DatePicker/RangeDate/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/variations/_readonly/base.d.ts +2 -0
- package/types/components/DatePicker/RangeDate/variations/_readonly/base.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/variations/_size/base.d.ts +2 -0
- package/types/components/DatePicker/RangeDate/variations/_size/base.d.ts.map +1 -0
- package/types/components/DatePicker/RangeDate/variations/_view/base.d.ts +2 -0
- package/types/components/DatePicker/RangeDate/variations/_view/base.d.ts.map +1 -0
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts +31 -0
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -0
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +45 -0
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -0
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +120 -0
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -0
- package/types/components/DatePicker/SingleDate/variations/_disabled/base.d.ts +2 -0
- package/types/components/DatePicker/SingleDate/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/DatePicker/SingleDate/variations/_readonly/base.d.ts +2 -0
- package/types/components/DatePicker/SingleDate/variations/_readonly/base.d.ts.map +1 -0
- package/types/components/DatePicker/SingleDate/variations/_size/base.d.ts +2 -0
- package/types/components/DatePicker/SingleDate/variations/_size/base.d.ts.map +1 -0
- package/types/components/DatePicker/SingleDate/variations/_view/base.d.ts +2 -0
- package/types/components/DatePicker/SingleDate/variations/_view/base.d.ts.map +1 -0
- package/types/components/DatePicker/hooks/useDatePicker.d.ts +10 -0
- package/types/components/DatePicker/hooks/useDatePicker.d.ts.map +1 -0
- package/types/components/DatePicker/index.d.ts +6 -0
- package/types/components/DatePicker/index.d.ts.map +1 -0
- package/types/components/DatePicker/utils/dateHelper.d.ts +10 -0
- package/types/components/DatePicker/utils/dateHelper.d.ts.map +1 -0
- package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts +1 -0
- package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +1 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
- package/types/components/Dropdown/utils/index.d.ts +1 -3
- package/types/components/Dropdown/utils/index.d.ts.map +1 -1
- package/types/components/Range/Range.d.ts +3 -3
- package/types/components/Range/Range.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Range/Range.types.d.ts +8 -3
- package/types/components/Range/Range.types.d.ts.map +1 -1
- package/types/components/Range/index.d.ts +1 -1
- package/types/components/Range/index.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
- package/types/components/_Icon/Icon.assets/DisclosureDownFill.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/DisclosureDownFill.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/DisclosureRight.d.ts.map +1 -1
- package/types/components/_Icon/Icons/IconDisclosureDownFill.d.ts +4 -0
- package/types/components/_Icon/Icons/IconDisclosureDownFill.d.ts.map +1 -0
- package/types/components/_Icon/index.d.ts +1 -0
- package/types/components/_Icon/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Calendar/Calendar.d.ts +15 -4
- package/types/examples/plasma_b2c/components/Calendar/Calendar.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Calendar/CalendarBase.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Calendar/CalendarBase.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Calendar/CalendarDouble.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Calendar/CalendarDouble.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.config.d.ts +24 -0
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +75 -0
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Range/Range.d.ts +3 -3
- package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Calendar/Calendar.d.ts +15 -4
- package/types/examples/plasma_web/components/Calendar/Calendar.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Calendar/CalendarBase.config.d.ts +3 -0
- package/types/examples/plasma_web/components/Calendar/CalendarBase.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Calendar/CalendarDouble.config.d.ts +3 -0
- package/types/examples/plasma_web/components/Calendar/CalendarDouble.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/DatePicker/DatePicker.config.d.ts +24 -0
- package/types/examples/plasma_web/components/DatePicker/DatePicker.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +75 -0
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Range/Range.d.ts +3 -3
- package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Calendar/Calendar.d.ts +15 -4
- package/types/examples/sds_engineer/components/Calendar/Calendar.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Calendar/CalendarBase.config.d.ts +3 -0
- package/types/examples/sds_engineer/components/Calendar/CalendarBase.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Calendar/CalendarDouble.config.d.ts +3 -0
- package/types/examples/sds_engineer/components/Calendar/CalendarDouble.config.d.ts.map +1 -1
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/types/utils/datejs.d.ts +3 -0
- package/types/utils/datejs.d.ts.map +1 -0
- package/types/utils/getPopoverPlacement.d.ts +5 -0
- package/types/utils/getPopoverPlacement.d.ts.map +1 -0
- package/types/utils/index.d.ts +1 -0
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Calendar/mixins/index.js +0 -18
- package/cjs/components/Calendar/mixins/index.js.map +0 -1
- package/cjs/components/Calendar/mixins/index_o3bz9l.css +0 -1
- package/cjs/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles_xf9c5e.css +0 -4
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.styles_1c4p417.css +0 -6
- package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_1jnzviu.css +0 -4
- package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles_1lubnwe.css +0 -4
- package/cjs/components/Range/Range.styles_mc4w65.css +0 -8
- package/cjs/components/TextField/variations/_read-only/base_134hshp.css +0 -1
- package/cjs/components/TextField/variations/_size/base_ntoddv.css +0 -1
- package/cjs/components/TextField/variations/_view/base_19gxyva.css +0 -1
- package/es/components/Calendar/mixins/index.js +0 -14
- package/es/components/Calendar/mixins/index.js.map +0 -1
- package/es/components/Calendar/mixins/index_o3bz9l.css +0 -1
- package/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles_xf9c5e.css +0 -4
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles_1c4p417.css +0 -6
- package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_1jnzviu.css +0 -4
- package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles_1lubnwe.css +0 -4
- package/es/components/Range/Range.styles_mc4w65.css +0 -8
- package/es/components/TextField/variations/_read-only/base_134hshp.css +0 -1
- package/es/components/TextField/variations/_size/base_ntoddv.css +0 -1
- package/es/components/TextField/variations/_view/base_19gxyva.css +0 -1
@@ -1,27 +1,3 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
export var flexCenter = "\n display: flex;\n justify-content: center;\n align-items: center;\n";
|
5
|
-
export var flexSpaceBetween = "\n display: flex;\n justify-content: space-between;\n align-items: center;\n";
|
6
|
-
|
7
|
-
/**
|
8
|
-
* Миксин для установки синтетического фокуса на выбранной кнопке.
|
9
|
-
*/
|
10
|
-
export var buttonFocus = /*#__PURE__*/styled.button.withConfig({
|
11
|
-
componentId: "plasma-new-hope__sc-1tntqjy-0"
|
12
|
-
})(["border:none;background-color:transparent;padding:0;outline:none;", ";"], /*#__PURE__*/addFocus({
|
13
|
-
outlineSize: '0.063rem',
|
14
|
-
outlineOffset: '-0.125rem',
|
15
|
-
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
16
|
-
outlineRadius: '0.563rem'
|
17
|
-
}));
|
18
|
-
|
19
|
-
/**
|
20
|
-
* Миксины для изменения стиля выбранного дня.
|
21
|
-
*/
|
22
|
-
var active = "\n &:active {\n background-color: var(--calendar_private-active-background);\n color: var(--calendar_private-active-color);\n font-weight: var(--plasma-typo-body-s-bold-font-weight);\n }\n";
|
23
|
-
|
24
|
-
/*
|
25
|
-
* Если использовать токены и классы из ./tokens rollup ругается на этот миксин
|
26
|
-
*/
|
27
|
-
export var selectedMixin = /*#__PURE__*/"\n outline: none;\n cursor: pointer;\n\n &:hover:not(.item-selected) {\n background-color: var(--calendar_private-selectable-background-hover);\n \n ".concat(String(active), ";\n };\n\n &.item-selected {\n border: 0;\n background-color: var(--calendar_private-selected-background);\n color: var(--calendar_private-selected-color);\n cursor: default;\n font-weight: var(--plasma-typo-body-s-bold-font-weight);\n };\n\n &.item-current {\n border: 0.063rem solid var(--calendar_private-current-border-color);\n\n &:not(.item-selected):hover {\n background-color: var(--calendar_private-current-background-hover);\n color: var(--calendar_private-current-color-hover);\n\n & > div:first-of-type {\n background-color: var(--calendar_private-current-child-background-hover);\n min-width: var(--calendar_private-selected-min-width);\n min-height: var(--calendar_private-selected-min-height);\n }\n \n ").concat(String(active), ";\n }\n };\n\n &.item-hovered, &.item-hovered:hover {\n background-color: var(--calendar_private-hovered-background);\n color: var(--calendar_private-hovered-color);\n cursor: pointer;\n font-weight: var(--plasma-typo-body-s-bold-font-weight);\n ").concat(String(active), ";\n }\n\n ").concat( /*#__PURE__*/String(active), ";\n");
|
1
|
+
export { addActive } from './active';
|
2
|
+
export { addSelected } from './selected';
|
3
|
+
export * from './flex';
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { classes } from '../Calendar.tokens';
|
2
|
+
import { addActive } from './active';
|
3
|
+
export var addSelected = function addSelected(args) {
|
4
|
+
var minWidth = args.minWidth,
|
5
|
+
minHeight = args.minHeight,
|
6
|
+
selectedFontWeight = args.selectedFontWeight,
|
7
|
+
selectedBackground = args.selectedBackground,
|
8
|
+
selectedColor = args.selectedColor,
|
9
|
+
selectableBackgroundHover = args.selectableBackgroundHover,
|
10
|
+
currentBorderColor = args.currentBorderColor,
|
11
|
+
activeBackground = args.activeBackground,
|
12
|
+
activeColor = args.activeColor;
|
13
|
+
return "\n outline: none;\n cursor: pointer;\n\n &:hover {\n background-color: ".concat(selectableBackgroundHover, ";\n };\n \n\n &.").concat(classes.hoveredItem, ", &.").concat(classes.hoveredItem, ":hover {\n background-color: ").concat(selectedBackground, ";\n color: ").concat(selectedColor, ";\n cursor: pointer;\n font-weight: ").concat(selectedFontWeight, ";\n }\n\n &.").concat(classes.selectedItem, ":not(.").concat(classes.currentItem, ") {\n border: 0;\n background-color: ").concat(selectedBackground, ";\n color: ").concat(selectedColor, ";\n cursor: default;\n font-weight: ").concat(selectedFontWeight, ";\n };\n \n ").concat(addActive({
|
14
|
+
activeBackground: activeBackground,
|
15
|
+
activeColor: activeColor,
|
16
|
+
activeFontWeight: selectedFontWeight
|
17
|
+
}), ";\n\n &.").concat(classes.currentItem, " {\n border: 0.063rem solid ").concat(currentBorderColor, ";\n\n &.").concat(classes.selectedItem, " {\n background-color: initial;\n color: ").concat(selectedColor, ";\n font-weight: ").concat(selectedFontWeight, ";\n\n & > div:first-of-type {\n background-color: ").concat(selectedBackground, ";\n min-width: ").concat(minWidth, ";\n min-height: ").concat(minHeight, ";\n }\n }\n };\n ");
|
18
|
+
};
|
package/styled-components/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js
CHANGED
@@ -1,51 +1,58 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import { flexCenter, selectedMixin } from '../../mixins';
|
3
2
|
import { classes, tokens } from '../../Calendar.tokens';
|
4
3
|
import { addFocus } from '../../../../mixins';
|
4
|
+
import { addSelected, flexCenter } from '../../mixins';
|
5
5
|
var inRange = function inRange() {
|
6
|
-
return "\n &:before {\n content: '';\n z-index: -1;\n position: absolute;\n width:
|
6
|
+
return "\n &:before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 100%;\n height: calc(100% - 0.125rem);\n background: var(".concat(tokens.calendarRangeBackground, ");\n }\n");
|
7
7
|
};
|
8
8
|
var sideInRange = function sideInRange() {
|
9
|
-
return "\n &:before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 0.
|
9
|
+
return "\n &:before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 0.75rem;\n height: calc(100% - 0.125rem);\n background: var(".concat(tokens.calendarRangeBackground, ");\n }\n");
|
10
10
|
};
|
11
11
|
export var StyledDay = /*#__PURE__*/styled.div.withConfig({
|
12
12
|
componentId: "plasma-new-hope__sc-2y5uj0-0"
|
13
|
-
})(["border-radius:0.
|
13
|
+
})(["border-radius:calc(var(", ") - 0.125rem);", ";&.", "{", ";}&.", "{", ";}&.", "{&:before{left:", ";}}&.", "{&:before{right:", ";}}"], tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(classes.dayInRange), /*#__PURE__*/inRange(), /*#__PURE__*/String(classes.daySideInRange), /*#__PURE__*/sideInRange(), /*#__PURE__*/String(classes.daySideLeft), function (_ref) {
|
14
14
|
var offset = _ref.offset;
|
15
15
|
return "".concat(offset, "px");
|
16
16
|
}, /*#__PURE__*/String(classes.daySideRight), function (_ref2) {
|
17
17
|
var offset = _ref2.offset;
|
18
18
|
return "".concat(offset, "px");
|
19
19
|
});
|
20
|
-
var dayOfWeek = function dayOfWeek() {
|
21
|
-
return "\n color: var(--plasma-colors-tertiary);\n";
|
22
|
-
};
|
23
20
|
var disabledDay = function disabledDay() {
|
24
|
-
return "\n cursor: not-allowed;\n opacity: 0.4;\n
|
25
|
-
outlineSize: '0.063rem',
|
26
|
-
outlineOffset: '-0.063rem',
|
27
|
-
outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
28
|
-
outlineRadius: '0.563rem'
|
29
|
-
}), ";\n");
|
21
|
+
return "\n cursor: not-allowed;\n opacity: 0.4;\n";
|
30
22
|
};
|
31
23
|
var disabledCurrentDay = function disabledCurrentDay() {
|
32
|
-
return "\n ".concat(disabledDay(), ";\n
|
24
|
+
return "\n ".concat(disabledDay(), ";\n");
|
33
25
|
};
|
34
26
|
export var StyledDayRoot = /*#__PURE__*/styled.div.withConfig({
|
35
27
|
componentId: "plasma-new-hope__sc-2y5uj0-1"
|
36
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-width:
|
28
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-width:var(", ");min-height:var(", ");border-radius:var(", ");", ";color:", ";visibility:", ";&.", "{", ";", ";&.", "{", ";}}&.", "{color:var(", ");}&.", "{", ";}&.", "{", ";}&.", "{& > .", ":before{width:calc(100% + 2px);height:100%;}& > .", ":before{width:100%;right:-1px;left:unset;}& > .", ":before{width:100%;left:-1px;right:unset;}}"], tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontWeight, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(flexCenter), function (_ref3) {
|
37
29
|
var isDayInCurrentMonth = _ref3.isDayInCurrentMonth;
|
38
30
|
return isDayInCurrentMonth ? "var(".concat(tokens.calendarContentPrimaryColor, ")") : "var(".concat(tokens.calendarContentSecondaryColor, ")");
|
39
31
|
}, function (_ref4) {
|
40
32
|
var isDayInCurrentMonth = _ref4.isDayInCurrentMonth,
|
41
33
|
isDouble = _ref4.isDouble;
|
42
34
|
return !isDayInCurrentMonth && isDouble ? 'hidden' : 'visible';
|
43
|
-
}, /*#__PURE__*/String(classes.selectableItem),
|
35
|
+
}, /*#__PURE__*/String(classes.selectableItem), /*#__PURE__*/addSelected({
|
36
|
+
minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemWidth, ") - 0.25rem)"),
|
37
|
+
minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemHeight, ") - 0.25rem)"),
|
38
|
+
selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarDaySelectedFontWeight, ")"),
|
39
|
+
selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
|
40
|
+
selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
|
41
|
+
selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
|
42
|
+
currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
|
43
|
+
activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
|
44
|
+
activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
|
45
|
+
}), /*#__PURE__*/addFocus({
|
46
|
+
outlineSize: '0.063rem',
|
47
|
+
outlineOffset: '-0.125rem',
|
48
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
49
|
+
outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemBorderRadius, ") + 0.125rem)")
|
50
|
+
}), classes.currentItem, /*#__PURE__*/addFocus({
|
44
51
|
outlineSize: '0.063rem',
|
45
|
-
outlineOffset: '-0.
|
52
|
+
outlineOffset: '-0.1875rem',
|
46
53
|
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
47
|
-
outlineRadius:
|
48
|
-
}),
|
54
|
+
outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemBorderRadius, ") + 0.125rem)")
|
55
|
+
}), classes.dayOfWeek, tokens.calendarDayOfWeekColor, classes.dayDisabled, /*#__PURE__*/disabledDay(), classes.dayDisabledCurrent, /*#__PURE__*/disabledCurrentDay(), classes.currentItem, classes.dayInRange, classes.daySideRight, classes.daySideLeft);
|
49
56
|
export var StyledEvents = /*#__PURE__*/styled.div.withConfig({
|
50
57
|
componentId: "plasma-new-hope__sc-2y5uj0-2"
|
51
58
|
})(["display:flex;position:absolute;bottom:0.25rem;"]);
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
2
|
import { flexCenter } from '../../mixins';
|
3
|
+
import { tokens } from '../../Calendar.tokens';
|
3
4
|
export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
|
4
5
|
componentId: "plasma-new-hope__sc-3ydwr5-0"
|
5
6
|
})(["", ";"], /*#__PURE__*/String(flexCenter));
|
6
7
|
export var StyledCalendarDays = /*#__PURE__*/styled.div.withConfig({
|
7
8
|
componentId: "plasma-new-hope__sc-3ydwr5-1"
|
8
|
-
})(["outline:none;padding:
|
9
|
+
})(["outline:none;padding:var(", ");box-sizing:border-box;"], tokens.calendarDaysPadding);
|
9
10
|
export var StyledCalendarDaysHint = /*#__PURE__*/styled.span.withConfig({
|
10
11
|
componentId: "plasma-new-hope__sc-3ydwr5-2"
|
11
12
|
})(["display:none;"]);
|
@@ -1,9 +1,9 @@
|
|
1
|
-
var _IconDisclosureLeft, _IconDisclosureRight;
|
2
1
|
import React, { useCallback, useMemo } from 'react';
|
3
|
-
import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
|
2
|
+
import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
|
4
3
|
import { CalendarState } from '../../store/types';
|
5
4
|
import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
|
6
|
-
import {
|
5
|
+
import { classes } from '../../Calendar.tokens';
|
6
|
+
import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation } from './CalendarHeader.styles';
|
7
7
|
|
8
8
|
/**
|
9
9
|
* Компонент шапки календаря.
|
@@ -13,6 +13,7 @@ export var CalendarHeader = function CalendarHeader(_ref) {
|
|
13
13
|
type = _ref$type === void 0 ? 'Days' : _ref$type,
|
14
14
|
_ref$startYear = _ref.startYear,
|
15
15
|
startYear = _ref$startYear === void 0 ? 0 : _ref$startYear,
|
16
|
+
size = _ref.size,
|
16
17
|
firstDate = _ref.firstDate,
|
17
18
|
secondDate = _ref.secondDate,
|
18
19
|
isDouble = _ref.isDouble,
|
@@ -32,42 +33,55 @@ export var CalendarHeader = function CalendarHeader(_ref) {
|
|
32
33
|
return '';
|
33
34
|
}
|
34
35
|
if (type === CalendarState.Days) {
|
35
|
-
return
|
36
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderDate, null, MONTH_NAMES[date.monthIndex]), /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
|
37
|
+
color: "inherit",
|
38
|
+
size: size === 'xs' ? 'xs' : 's'
|
39
|
+
})));
|
36
40
|
}
|
37
41
|
if (type === CalendarState.Months) {
|
38
|
-
return
|
42
|
+
return /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
|
43
|
+
color: "inherit",
|
44
|
+
size: size === 'xs' ? 'xs' : 's'
|
45
|
+
}));
|
39
46
|
}
|
40
47
|
if (type === CalendarState.Years) {
|
41
|
-
return
|
48
|
+
return /*#__PURE__*/React.createElement(StyledHeaderDate, null, startYear, "\u2014", startYear + YEAR_RENDER_COUNT - 1, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
|
49
|
+
color: "inherit",
|
50
|
+
size: size === 'xs' ? 'xs' : 's'
|
51
|
+
}));
|
42
52
|
}
|
43
53
|
return '';
|
44
|
-
}, [type, startYear]);
|
54
|
+
}, [type, startYear, size]);
|
45
55
|
var currentCalendarType = getCalendarType(isDouble ? CalendarState.Days : type);
|
46
56
|
var PreviousButton = useMemo(function () {
|
47
57
|
return /*#__PURE__*/React.createElement(StyledArrow, {
|
48
|
-
type: "button",
|
49
58
|
"aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 ".concat(currentCalendarType),
|
50
|
-
tabIndex: 0,
|
51
59
|
onClick: function onClick() {
|
52
60
|
return onPrev();
|
53
61
|
}
|
54
|
-
},
|
55
|
-
|
62
|
+
}, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
|
63
|
+
color: "inherit",
|
64
|
+
size: size === 'xs' ? 'xs' : 's'
|
65
|
+
}));
|
66
|
+
}, [currentCalendarType, size, onPrev]);
|
56
67
|
var NextButton = useMemo(function () {
|
57
68
|
return /*#__PURE__*/React.createElement(StyledArrow, {
|
58
|
-
type: "button",
|
59
69
|
"aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 ".concat(currentCalendarType),
|
60
|
-
tabIndex: 0,
|
61
70
|
onClick: function onClick() {
|
62
71
|
return onNext();
|
63
72
|
}
|
64
|
-
},
|
65
|
-
|
66
|
-
|
73
|
+
}, /*#__PURE__*/React.createElement(IconDisclosureRight, {
|
74
|
+
color: "inherit",
|
75
|
+
size: size === 'xs' ? 'xs' : 's'
|
76
|
+
}));
|
77
|
+
}, [currentCalendarType, size, onNext]);
|
78
|
+
return /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isDouble ? /*#__PURE__*/React.createElement(StyledNavigation, null, /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, null, PreviousButton, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
|
67
79
|
"aria-live": "polite"
|
68
|
-
}, getHeaderContent(firstDate)), /*#__PURE__*/React.createElement(
|
80
|
+
}, getHeaderContent(firstDate))), /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, {
|
81
|
+
className: classes.doubleHeaderLastDateWrapper
|
82
|
+
}, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
|
69
83
|
"aria-live": "polite"
|
70
|
-
}, getHeaderContent(secondDate)), NextButton) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
|
84
|
+
}, getHeaderContent(secondDate)), NextButton)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
|
71
85
|
type: "button",
|
72
86
|
"aria-live": "polite",
|
73
87
|
id: "id-grid-label",
|
@@ -1,21 +1,39 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import {
|
3
|
-
import {
|
2
|
+
import { classes, tokens } from '../../Calendar.tokens';
|
3
|
+
import { component, mergeConfig } from '../../../../engines';
|
4
|
+
import { iconButtonConfig, iconButtonTokens } from '../../../IconButton';
|
5
|
+
import { flexCenter } from '../../mixins';
|
6
|
+
import { addFocus } from '../../../../mixins';
|
7
|
+
var mergedIconButtonConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
|
8
|
+
var IconButton = /*#__PURE__*/component(mergedIconButtonConfig);
|
4
9
|
export var StyledCalendarHeader = /*#__PURE__*/styled.div.withConfig({
|
5
10
|
componentId: "plasma-new-hope__sc-186pzg3-0"
|
6
|
-
})(["
|
7
|
-
export var StyledHeader = /*#__PURE__*/styled
|
11
|
+
})(["display:flex;justify-content:space-between;align-items:center;padding:var(", ");"], tokens.calendarHeaderWrapperPadding);
|
12
|
+
export var StyledHeader = /*#__PURE__*/styled.button.withConfig({
|
8
13
|
componentId: "plasma-new-hope__sc-186pzg3-1"
|
9
|
-
})(["
|
10
|
-
|
14
|
+
})(["border:none;background-color:transparent;padding:0;outline:none;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");padding:var(", ");color:var(", ");cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;&:hover,&:active{color:var(", ");}", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderPadding, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, tokens.calendarContentSecondaryColor, /*#__PURE__*/addFocus({
|
15
|
+
outlineSize: '0.063rem',
|
16
|
+
outlineOffset: '-0.125rem',
|
17
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
18
|
+
outlineRadius: '0.563rem'
|
19
|
+
}));
|
20
|
+
export var StyledHeaderDate = /*#__PURE__*/styled.span.withConfig({
|
11
21
|
componentId: "plasma-new-hope__sc-186pzg3-2"
|
12
|
-
})(["
|
22
|
+
})(["", ";pointer-events:none;"], flexCenter);
|
13
23
|
export var StyledArrows = /*#__PURE__*/styled.div.withConfig({
|
14
24
|
componentId: "plasma-new-hope__sc-186pzg3-3"
|
15
|
-
})(["
|
16
|
-
|
25
|
+
})(["display:flex;gap:var(", ");padding:var(", ");"], tokens.calendarHeaderArrowGap, tokens.calendarHeaderArrowPadding);
|
26
|
+
|
27
|
+
// NOTE: переопределение токенов IconButton
|
28
|
+
export var StyledArrow = /*#__PURE__*/styled(IconButton).withConfig({
|
17
29
|
componentId: "plasma-new-hope__sc-186pzg3-4"
|
18
|
-
})(["
|
30
|
+
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonColor, tokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, tokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, tokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, tokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, tokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, tokens.iconButtonRadius, iconButtonTokens.iconButtonFocusColor, tokens.iconButtonFocusColor);
|
19
31
|
export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
|
20
32
|
componentId: "plasma-new-hope__sc-186pzg3-5"
|
21
|
-
})(["width:100%;", ";"],
|
33
|
+
})(["width:100%;", ";"], flexCenter);
|
34
|
+
export var StyledDoubleHeaderWrapper = /*#__PURE__*/styled.div.withConfig({
|
35
|
+
componentId: "plasma-new-hope__sc-186pzg3-6"
|
36
|
+
})(["width:100%;display:grid;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
|
37
|
+
export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
|
38
|
+
componentId: "plasma-new-hope__sc-186pzg3-7"
|
39
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;margin:0;", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderDateGap, /*#__PURE__*/String(flexCenter));
|
@@ -60,7 +60,7 @@ export var CalendarMonths = function CalendarMonths(_ref) {
|
|
60
60
|
isCurrent = _ref2.isCurrent,
|
61
61
|
monthFullName = _ref2.monthFullName;
|
62
62
|
var selectedClass = isSelected ? classes.selectedItem : undefined;
|
63
|
-
var currentClass =
|
63
|
+
var currentClass = isCurrent ? classes.currentItem : undefined;
|
64
64
|
return /*#__PURE__*/React.createElement(StyledMonthRoot, {
|
65
65
|
id: "month-test-".concat(i, "-").concat(j),
|
66
66
|
className: cx(selectedClass, currentClass, classes.selectableItem),
|
@@ -1,22 +1,36 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import {
|
3
|
-
import { tokens } from '../../Calendar.tokens';
|
2
|
+
import { classes, tokens } from '../../Calendar.tokens';
|
4
3
|
import { addFocus } from '../../../../mixins';
|
4
|
+
import { addSelected, flexCenter } from '../../mixins';
|
5
5
|
export var StyledCalendarMonths = /*#__PURE__*/styled.div.withConfig({
|
6
6
|
componentId: "plasma-new-hope__sc-mx5ps9-0"
|
7
|
-
})(["padding:
|
7
|
+
})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarMonthsPadding);
|
8
8
|
export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
|
9
9
|
componentId: "plasma-new-hope__sc-mx5ps9-1"
|
10
10
|
})(["", ";"], /*#__PURE__*/String(flexCenter));
|
11
11
|
export var StyledMonth = /*#__PURE__*/styled.div.withConfig({
|
12
12
|
componentId: "plasma-new-hope__sc-mx5ps9-2"
|
13
|
-
})(["border-radius:0.
|
14
|
-
var selectable = /*#__PURE__*/"\n ".concat(addFocus({
|
15
|
-
outlineSize: '0.063rem',
|
16
|
-
outlineOffset: '-0.063rem',
|
17
|
-
outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
18
|
-
outlineRadius: '0.563rem'
|
19
|
-
}), ";\n\n --calendar_private-selected-min-width: 5.25rem;\n --calendar_private-selected-min-height: 3.25rem;\n --calendar_private-selected-background: var(").concat(tokens.calendarSelectedItemBackground, ");\n --calendar_private-selected-color: var(").concat(tokens.calendarSelectedItemColor, ");\n --calendar_private-selectable-background-hover: var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n --calendar_private-current-border-color: var(").concat(tokens.calendarCurrentItemBorderColor, ");\n --calendar_private-current-background-hover: var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n --calendar_private-current-color-hover: var(").concat(tokens.calendarCurrentItemColorHover, ");\n --calendar_private-current-child-background-hover: var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n --calendar_private-active-background: var(").concat(tokens.calendarActiveItemBackground, ");\n --calendar_private-active-color-hover: var(").concat(tokens.calendarActiveItemColor, ");\n --calendar_private-hovered-background: var(").concat(tokens.calendarHoveredItemBackground, ");\n --calendar_private-hovered-color: var(").concat(tokens.calendarHoveredItemColor, ");\n\n ").concat( /*#__PURE__*/String(selectedMixin), ";\n");
|
13
|
+
})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter));
|
20
14
|
export var StyledMonthRoot = /*#__PURE__*/styled.div.withConfig({
|
21
15
|
componentId: "plasma-new-hope__sc-mx5ps9-3"
|
22
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:
|
16
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthItemHeight, tokens.calendarMonthItemWidth, tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
|
17
|
+
minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemWidth, ") - 0.25rem)"),
|
18
|
+
minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemHeight, ") - 0.25rem)"),
|
19
|
+
selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarMonthSelectedFontWeight, ")"),
|
20
|
+
selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
|
21
|
+
selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
|
22
|
+
selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
|
23
|
+
currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
|
24
|
+
activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
|
25
|
+
activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
|
26
|
+
}), /*#__PURE__*/addFocus({
|
27
|
+
outlineSize: '0.063rem',
|
28
|
+
outlineOffset: '-0.125rem',
|
29
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
30
|
+
outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
|
31
|
+
}), classes.currentItem, /*#__PURE__*/addFocus({
|
32
|
+
outlineSize: '0.063rem',
|
33
|
+
outlineOffset: '-0.1875rem',
|
34
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
35
|
+
outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
|
36
|
+
}));
|
@@ -59,7 +59,7 @@ export var CalendarYears = function CalendarYears(_ref) {
|
|
59
59
|
isSelected = _ref2.isSelected,
|
60
60
|
isCurrent = _ref2.isCurrent;
|
61
61
|
var selectedClass = isSelected ? classes.selectedItem : undefined;
|
62
|
-
var currentClass =
|
62
|
+
var currentClass = isCurrent ? classes.currentItem : undefined;
|
63
63
|
return /*#__PURE__*/React.createElement(StyledYearRoot, {
|
64
64
|
className: cx(selectedClass, currentClass, classes.selectableItem),
|
65
65
|
ref: function ref(element) {
|
@@ -1,24 +1,36 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
import {
|
3
|
-
import { tokens } from '../../Calendar.tokens';
|
2
|
+
import { classes, tokens } from '../../Calendar.tokens';
|
4
3
|
import { addFocus } from '../../../../mixins';
|
4
|
+
import { addSelected, flexCenter } from '../../mixins';
|
5
5
|
export var StyledCalendarYears = /*#__PURE__*/styled.div.withConfig({
|
6
6
|
componentId: "plasma-new-hope__sc-153qwc7-0"
|
7
|
-
})(["padding:
|
7
|
+
})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarYearsPadding);
|
8
8
|
export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
|
9
9
|
componentId: "plasma-new-hope__sc-153qwc7-1"
|
10
10
|
})(["", ";"], /*#__PURE__*/String(flexCenter));
|
11
11
|
export var StyledYear = /*#__PURE__*/styled.div.withConfig({
|
12
12
|
componentId: "plasma-new-hope__sc-153qwc7-2"
|
13
|
-
})(["border-radius:0.
|
14
|
-
var selectable = function selectable() {
|
15
|
-
return "\n ".concat(addFocus({
|
16
|
-
outlineSize: '0.063rem',
|
17
|
-
outlineOffset: '-0.063rem',
|
18
|
-
outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
19
|
-
outlineRadius: '0.563rem'
|
20
|
-
}), ";\n\n --calendar_private-selected-min-width: 5.25rem;\n --calendar_private-selected-min-height: 3.25rem;\n --calendar_private-selected-background: var(").concat(tokens.calendarSelectedItemBackground, ");\n --calendar_private-selected-color: var(").concat(tokens.calendarSelectedItemColor, ");\n --calendar_private-selectable-background-hover: var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n --calendar_private-current-border-color: var(").concat(tokens.calendarCurrentItemBorderColor, ");\n --calendar_private-current-background-hover: var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n --calendar_private-current-color-hover: var(").concat(tokens.calendarCurrentItemColorHover, ");\n --calendar_private-current-child-background-hover: var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n --calendar_private-active-background: var(").concat(tokens.calendarActiveItemBackground, ");\n --calendar_private-active-color: var(").concat(tokens.calendarActiveItemColor, ");\n --calendar_private-hovered-background: var(").concat(tokens.calendarHoveredItemBackground, ");\n --calendar_private-hovered-color: var(").concat(tokens.calendarHoveredItemColor, ");\n \n ").concat(String(selectedMixin), ";\n");
|
21
|
-
};
|
13
|
+
})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarYearItemBorderRadius, /*#__PURE__*/String(flexCenter));
|
22
14
|
export var StyledYearRoot = /*#__PURE__*/styled.div.withConfig({
|
23
15
|
componentId: "plasma-new-hope__sc-153qwc7-3"
|
24
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:
|
16
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontWeight, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearItemHeight, tokens.calendarYearItemWidth, tokens.calendarYearItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
|
17
|
+
minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemWidth, ") - 0.25rem)"),
|
18
|
+
minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemHeight, ") - 0.25rem)"),
|
19
|
+
selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarYearSelectedFontWeight, ")"),
|
20
|
+
selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
|
21
|
+
selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
|
22
|
+
selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
|
23
|
+
currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
|
24
|
+
activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
|
25
|
+
activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
|
26
|
+
}), /*#__PURE__*/addFocus({
|
27
|
+
outlineSize: '0.063rem',
|
28
|
+
outlineOffset: '-0.125rem',
|
29
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
30
|
+
outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemBorderRadius, ") + 0.125rem)")
|
31
|
+
}), classes.currentItem, /*#__PURE__*/addFocus({
|
32
|
+
outlineSize: '0.063rem',
|
33
|
+
outlineOffset: '-0.1875rem',
|
34
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
|
35
|
+
outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemBorderRadius, ") + 0.125rem)")
|
36
|
+
}));
|
@@ -10,8 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
10
10
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
11
|
import React, { Children, forwardRef, useEffect, useRef, useState } from 'react';
|
12
12
|
import { safeUseId, useForkRef } from '@salutejs/plasma-core';
|
13
|
-
import { cx } from '../../utils';
|
14
|
-
import { getPlacements } from '../Dropdown/utils';
|
13
|
+
import { cx, getPlacements } from '../../utils';
|
15
14
|
import { getChildren, getNewSelected, getValues } from '../Select/utils';
|
16
15
|
import { useKeyNavigation } from '../Select/hooks';
|
17
16
|
import { useDidMountEffect, useForceUpdate } from '../../hooks';
|
@@ -0,0 +1,150 @@
|
|
1
|
+
---
|
2
|
+
id: datepicker
|
3
|
+
title: DatePicker
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# DatePicker
|
9
|
+
<Description name="DatePicker" />
|
10
|
+
<PropsTable name="DatePicker" exclude={['css']} />
|
11
|
+
|
12
|
+
## Использование
|
13
|
+
Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем.
|
14
|
+
|
15
|
+
Размер `DatePicker` задаётся с помощью свойства `size`.
|
16
|
+
Возможные значения свойтсва: `"l"`, `"m"`, `"s"`, `"xs"`.
|
17
|
+
|
18
|
+
```tsx live
|
19
|
+
import React, {useState} from 'react';
|
20
|
+
import { DatePicker, IconButton } from '@salutejs/{{ package }}';
|
21
|
+
import { IconDone } from '@salutejs/plasma-icons';
|
22
|
+
|
23
|
+
export function App() {
|
24
|
+
return (
|
25
|
+
<div style={{ height: "450px" }}>
|
26
|
+
<DatePicker
|
27
|
+
label="Лейбл"
|
28
|
+
leftHelper="Подсказка к полю"
|
29
|
+
placeholder="Введите дату"
|
30
|
+
contentRight={<IconDone size="s" />}
|
31
|
+
size="l"
|
32
|
+
/>
|
33
|
+
</div>
|
34
|
+
);
|
35
|
+
}
|
36
|
+
```
|
37
|
+
|
38
|
+
### Формат даты
|
39
|
+
Формат даты задается с помощью свойства `format`.
|
40
|
+
При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
|
41
|
+
Свойство `maskWithFormat` позволяет маскировать ввод:
|
42
|
+
|
43
|
+
```tsx live
|
44
|
+
import React, {useState} from 'react';
|
45
|
+
import { DatePicker, IconButton } from '@salutejs/{{ package }}';
|
46
|
+
import { IconDone } from '@salutejs/plasma-icons';
|
47
|
+
|
48
|
+
export function App() {
|
49
|
+
return (
|
50
|
+
<div style={{ height: "450px" }}>
|
51
|
+
<DatePicker
|
52
|
+
label="Лейбл"
|
53
|
+
leftHelper="Подсказка к полю"
|
54
|
+
placeholder="Введите дату"
|
55
|
+
format="DD-MM-YYYY"
|
56
|
+
maskWithFormat
|
57
|
+
contentRight={<IconDone size="s" />}
|
58
|
+
/>
|
59
|
+
</div>
|
60
|
+
);
|
61
|
+
}
|
62
|
+
```
|
63
|
+
|
64
|
+
### Валидация и индикация успешного ввода даты.
|
65
|
+
За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`.
|
66
|
+
В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:
|
67
|
+
|
68
|
+
```tsx live
|
69
|
+
import React, {useState} from 'react';
|
70
|
+
import { DatePicker, IconButton } from '@salutejs/{{ package }}';
|
71
|
+
import { IconDone } from '@salutejs/plasma-icons';
|
72
|
+
|
73
|
+
export function App() {
|
74
|
+
const [isOpen, setIsOpen] = useState(false);
|
75
|
+
const [error, setError] = useState(false);
|
76
|
+
const [success, setSuccess] = useState(false);
|
77
|
+
|
78
|
+
const handleCommitDate = (newDate: Date | string, dateError?: boolean, dateSuccess?: boolean) => {
|
79
|
+
if (dateError) {
|
80
|
+
setError(true);
|
81
|
+
return;
|
82
|
+
}
|
83
|
+
|
84
|
+
if (dateSuccess) {
|
85
|
+
setSuccess(true);
|
86
|
+
}
|
87
|
+
|
88
|
+
setIsOpen(false);
|
89
|
+
};
|
90
|
+
|
91
|
+
return (
|
92
|
+
<div style={{ height: "450px" }}>
|
93
|
+
<DatePicker
|
94
|
+
isOpen={isOpen}
|
95
|
+
label="Лейбл"
|
96
|
+
leftHelper="Подсказка к полю"
|
97
|
+
placeholder="Введите дату"
|
98
|
+
format="DD-MM-YYYY"
|
99
|
+
maskWithFormat
|
100
|
+
valueError={error}
|
101
|
+
valueSuccess={success}
|
102
|
+
contentRight={<IconDone size="s" />}
|
103
|
+
onChangeValue={() => {
|
104
|
+
setError(false);
|
105
|
+
setSuccess(false);
|
106
|
+
}}
|
107
|
+
onCommitDate={handleCommitDate}
|
108
|
+
/>
|
109
|
+
</div>
|
110
|
+
);
|
111
|
+
}
|
112
|
+
```
|
113
|
+
|
114
|
+
## DatePickerRange
|
115
|
+
<Description name="DatePickerRange" />
|
116
|
+
<PropsTable name="DatePickerRange" exclude={['css']} />
|
117
|
+
|
118
|
+
## Использование
|
119
|
+
Компонент `DatePickerRange` представляет собой `Range` с выпадающим календарем.
|
120
|
+
Календарь может быть одиночным или двойным. За это отвечает свойство `isDoubleCalendar`.
|
121
|
+
|
122
|
+
```tsx live
|
123
|
+
import React, {useState} from 'react';
|
124
|
+
import { DatePickerRange, IconButton } from '@salutejs/{{ package }}';
|
125
|
+
import { IconDone } from '@salutejs/plasma-icons';
|
126
|
+
|
127
|
+
export function App() {
|
128
|
+
const ActionButton = () => {
|
129
|
+
return (
|
130
|
+
<IconButton view="clear" size="l">
|
131
|
+
<IconDone size="s" />
|
132
|
+
</IconButton>
|
133
|
+
);
|
134
|
+
};
|
135
|
+
|
136
|
+
return (
|
137
|
+
<div style={{ height: "500px" }}>
|
138
|
+
<DatePickerRange
|
139
|
+
size="l"
|
140
|
+
label="Лейбл"
|
141
|
+
leftHelper="Подсказка к полю"
|
142
|
+
firstPlaceholder="Введите дату 1"
|
143
|
+
secondPlaceholder="Введите дату 2"
|
144
|
+
contentRight={<ActionButton />}
|
145
|
+
isDoubleCalendar
|
146
|
+
/>
|
147
|
+
</div>
|
148
|
+
);
|
149
|
+
}
|
150
|
+
```
|