@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/date-picker/date-picker.css

@@ -1,603 +0,0 @@
-@import "../global/variables.css";
-@import "../global/global.css";
-
-@value unit from "../global/global.css";
-@value cellSize: calc(unit * 3);
-@value calHeight: calc(unit * 36);
-@value calWidth: calc(unit * 37);
-@value yearHeight: calc(unit * 4);
-@value yearWidth: calc(unit * 6);
-
-:root {
-  /* stylelint-disable-next-line color-no-hex */
-  --ring-date-picker-hover-color: #b3dfff;
-}
-
-.container {
-  display: inline-block;
-}
-
-.hoverable {
-  cursor: pointer;
-  transition: color 0.2s ease-out 0s;
-}
-
-.hoverable:hover {
-  transition: none;
-
-  color: var(--ring-link-hover-color);
-}
-
-.datePicker.datePicker {
-  padding-right: unit;
-
-  &.inline {
-    padding: 0;
-  }
-
-  &.sizeS {
-    width: calc(unit * 12);
-  }
-
-  &.sizeM {
-    width: calc(unit * 30);
-  }
-
-  &.sizeL {
-    width: calc(unit * 50);
-  }
-
-  &.sizeFULL {
-    width: 100%;
-  }
-
-  &.sizeAUTO {
-    max-width: 100%;
-  }
-}
-
-.displayDate {
-  display: inline-block;
-
-  min-width: calc(unit * 11);
-
-  text-align: left;
-}
-
-.displayDate.displayRange {
-  min-width: calc(unit * 22);
-}
-
-.clear {
-  cursor: pointer;
-  transition: opacity var(--ring-ease);
-
-  opacity: 0.3;
-}
-
-.datePicker:hover .clear {
-  opacity: 0.5;
-}
-
-.datePicker .clear:hover {
-  transition: none;
-
-  opacity: 1;
-}
-
-.datePopup {
-  width: min-content;
-
-  user-select: none;
-  text-align: left;
-
-  color: var(--ring-text-color);
-}
-
-.datePopup * {
-  box-sizing: border-box;
-}
-
-.filterWrapper {
-  composes: filterWrapper from "../select/select-popup.css";
-
-  display: flex;
-
-  padding-left: calc(unit * 2);
-}
-
-.filter {
-  composes: filter from "../select/select-popup.css";
-}
-
-.calendarIcon {
-  margin-right: calc(unit / 2);
-
-  color: var(--ring-icon-color);
-}
-
-.anchor {
-  width: 100%;
-  padding: 0 unit;
-
-  text-align: start;
-  white-space: nowrap;
-
-  .inline & {
-    min-width: initial;
-    padding: 0;
-
-    cursor: pointer;
-  }
-}
-
-.anchorContent {
-  display: flex;
-  align-items: baseline;
-}
-
-.chevronDownIcon {
-  margin-left: auto;
-
-  color: var(--ring-icon-secondary-color);
-}
-
-.fromInput {
-  position: relative;
-
-  flex-basis: calc(unit * 13);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.fromInputWithDivider {
-  &::after {
-    position: absolute;
-    top: 0;
-    right: unit;
-
-    content: "—";
-
-    line-height: calc(4 * unit - 2px);
-  }
-}
-
-.toInput {
-  flex-basis: calc(unit * 13);
-  flex-grow: 1;
-  flex-shrink: 0;
-
-  width: calc(unit * 13);
-}
-
-.dateInput {
-  flex-basis: calc(unit * 11);
-  flex-grow: 1;
-  flex-shrink: 0;
-}
-
-.timeInputWithDivider {
-  position: relative;
-
-  &::before {
-    position: absolute;
-    left: calc(-1 * unit);
-
-    content: ",";
-
-    line-height: calc(4 * unit - 3px);
-  }
-}
-
-.weekdays {
-  height: calc(unit * 4);
-  padding: 5px calc(unit * 2) 0;
-
-  color: var(--ring-secondary-color);
-}
-
-.weekday.weekday {
-  display: inline-block;
-
-  width: cellSize;
-
-  text-align: center;
-  text-transform: capitalize;
-}
-
-.weekend.weekend {
-  color: var(--ring-error-color);
-}
-
-.calendar {
-  position: relative;
-
-  overflow: hidden;
-
-  width: calWidth;
-  height: calHeight;
-
-  box-shadow: 0 -1px var(--ring-line-color);
-}
-
-.months.months {
-  position: absolute;
-  top: 0;
-  right: yearWidth;
-  bottom: 0;
-  left: 0;
-}
-
-.days {
-  position: relative;
-  left: 0;
-}
-
-.month.month {
-  display: flex;
-  flex-wrap: wrap;
-
-  width: calc(unit * 21);
-  margin: calc(unit * 2);
-}
-
-.month.month > * {
-  flex-shrink: 0;
-
-  height: cellSize;
-
-  line-height: cellSize;
-}
-
-.monthTitle {
-  /* IE workaround, see https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box */
-
-  width: calc(unit * 12);
-
-  padding-left: calc(unit * 0.5);
-
-  text-align: left;
-
-  text-transform: capitalize;
-
-  font-weight: bold;
-
-  @supports (flex-basis: 1px) {
-    flex-basis: calc(unit * 12);
-
-    width: auto;
-  }
-}
-
-.day {
-  composes: resetButton from "../global/global.css";
-}
-
-.day.day {
-  position: relative;
-
-  flex-basis: cellSize;
-
-  margin: 0;
-
-  cursor: pointer;
-  transition: background-color var(--ring-ease), color var(--ring-ease);
-  text-align: center;
-
-  &::before,
-  &::after {
-    pointer-events: none;
-  }
-}
-
-.between.between {
-  transition: none;
-
-  background-color: var(--ring-selected-background-color);
-}
-
-.activeBetween.activeBetween {
-  transition: none;
-
-  background-color: var(--ring-date-picker-hover-color);
-}
-
-.current.current {
-  color: var(--ring-white-text-color);
-  border-radius: var(--ring-border-radius);
-  background-color: var(--ring-main-color);
-}
-
-.active.active {
-  transition: none;
-
-  color: var(--ring-link-hover-color);
-  border-radius: var(--ring-border-radius);
-  background-color: var(--ring-date-picker-hover-color);
-}
-
-.disabled.disabled {
-  cursor: not-allowed;
-
-  color: var(--ring-disabled-color);
-}
-
-.from.from {
-  border-radius: var(--ring-border-radius) 0 0 var(--ring-border-radius);
-}
-
-.to.to {
-  border-radius: 0 var(--ring-border-radius) var(--ring-border-radius) 0;
-}
-
-.from.to {
-  border-radius: var(--ring-border-radius);
-}
-
-.Monday {
-  position: relative;
-
-  &::before,
-  &::after {
-    position: absolute;
-
-    width: calc(unit * 2);
-    height: 100%;
-
-    content: "";
-    transition: background-color var(--ring-ease);
-  }
-
-  &::before {
-    right: 100%;
-  }
-
-  &::after {
-    bottom: 100%;
-    left: 700%;
-  }
-
-  &.spread {
-    &::before,
-    &::after {
-      transition: none;
-
-      background-color: var(--ring-selected-background-color);
-    }
-  }
-
-  &.activeSpread {
-    &::before,
-    &::after {
-      transition: none;
-
-      background-color: var(--ring-date-picker-hover-color);
-    }
-  }
-}
-
-.first {
-  position: relative;
-
-  &::before,
-  &::after {
-    position: absolute;
-    z-index: var(--ring-invisible-element-z-index);
-
-    width: calc(unit * 23);
-    height: calc(unit * 8);
-
-    content: "";
-    transition: background-color var(--ring-ease);
-  }
-
-  &::before {
-    right: 100%;
-    bottom: 0;
-  }
-
-  &::after {
-    bottom: 100%;
-    left: 0;
-  }
-
-  &.Monday {
-    &::after {
-      height: calc(unit * 5);
-    }
-  }
-
-  & + .Tuesday {
-    position: relative;
-
-    &::before {
-      position: absolute;
-      z-index: var(--ring-invisible-element-z-index);
-      top: calc(unit * -8);
-      left: 600%;
-
-      width: calc(unit * 2);
-      height: 100%;
-
-      content: "";
-      transition: background-color var(--ring-ease);
-    }
-  }
-}
-
-.Friday,
-.Saturday,
-.Sunday {
-  &::before,
-  &::after {
-    height: calc(unit * 5);
-  }
-}
-
-.spread {
-  &::before,
-  &::after,
-  & + .Tuesday::before {
-    transition: none;
-
-    background-color: var(--ring-selected-background-color);
-  }
-}
-
-.activeSpread {
-  &::before,
-  &::after,
-  & + .Tuesday::before {
-    transition: none;
-
-    background-color: var(--ring-date-picker-hover-color);
-  }
-}
-
-.empty.empty {
-  pointer-events: none;
-
-  opacity: 0;
-}
-
-.today.today {
-  position: relative;
-
-  font-weight: bold;
-}
-
-.today::before {
-  position: absolute;
-  top: 0;
-  left: calc(unit * 0.5);
-
-  content: "•";
-
-  font-size: var(--ring-font-size-smaller);
-}
-
-.day > .today::before {
-  top: 4px;
-  left: 0;
-
-  width: 100%;
-
-  text-align: center;
-}
-
-.year.today::before {
-  top: -1px;
-  left: 2px;
-}
-
-.monthNames {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-
-  width: calc(unit * 6);
-
-  background-color: var(--ring-content-background-color);
-  box-shadow: -1px 0 var(--ring-line-color);
-}
-
-.monthName {
-  composes: hoverable;
-  composes: resetButton from "../global/global.css";
-}
-
-.monthName.monthName {
-  position: relative;
-
-  width: 100%;
-
-  height: cellSize;
-  padding-left: calc(unit * 1.5);
-
-  text-transform: capitalize;
-
-  line-height: cellSize;
-}
-
-.monthSlider {
-  composes: resetButton from "../global/global.css";
-}
-
-.monthSlider.monthSlider {
-  position: absolute;
-  z-index: var(--ring-fixed-z-index);
-  right: 0;
-  left: -1px;
-
-  width: calc(100% + 1px);
-
-  height: calc(unit * 6);
-
-  cursor: grab;
-
-  opacity: 0.17;
-  background-color: var(--ring-main-color);
-}
-
-.monthSlider:hover {
-  opacity: 0.3;
-}
-
-.dragging {
-  cursor: grabbing;
-
-  opacity: 0.35;
-}
-
-.range {
-  position: absolute;
-  left: 0;
-
-  width: 2px;
-
-  background-color: var(--ring-main-color);
-}
-
-.years {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  width: yearWidth;
-
-  background-color: var(--ring-content-background-color);
-  box-shadow: -1px 0 var(--ring-line-color);
-
-  font-size: var(--ring-font-size-smaller);
-}
-
-.year {
-  composes: hoverable;
-  composes: resetButton from "../global/global.css";
-}
-
-.year.year {
-  position: relative;
-
-  width: 100%;
-
-  height: yearHeight;
-
-  text-align: center;
-
-  color: var(--ring-secondary-color);
-
-  line-height: yearHeight;
-}
-
-.currentYear.currentYear {
-  cursor: auto;
-  transition: none;
-
-  color: var(--ring-text-color);
-}
-
-.currentYear:hover {
-  color: var(--ring-text-color);
-}

package/components/date-picker/date-picker.d.ts

@@ -1,77 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import type { Locale } from 'date-fns';
-import Popup from '../popup/popup';
-import { DropdownAttrs } from '../dropdown/dropdown';
-import { Size } from '../input/input';
-import { DatePopupProps } from './date-popup';
-import { DateInputTranslations, DatePickerChange } from './consts';
-export interface DatePickerTranslations extends Partial<DateInputTranslations> {
-    setDate: string;
-    setDateTime: string;
-    setPeriod: string;
-}
-export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateInput' | 'onComplete' | 'hidden'> & {
-    className: string;
-    clear: boolean;
-    inline: boolean;
-    popupClassName?: string | null | undefined;
-    dropdownProps?: DropdownAttrs;
-    translations?: DatePickerTranslations | null | undefined;
-    displayMonthFormat: (date: Date, locale: Locale | undefined) => string;
-    displayDayFormat: (date: Date, locale: Locale | undefined) => string;
-    displayTimeFormat: (date: Date, locale: Locale | undefined) => string;
-    applyTimeInput: (date: Date, time: string | null | undefined) => Date;
-    datePlaceholder?: string;
-    dateTimePlaceholder?: string;
-    rangePlaceholder?: string;
-    disabled?: boolean | null | undefined;
-    parseDateInput: (input: string | null | undefined) => Date | null;
-    size?: Size;
-};
-/**
- * @name Date Picker
- */
-export default class DatePicker extends PureComponent<DatePickerProps> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        popupClassName: PropTypes.Requireable<string>;
-        date: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        withTime: PropTypes.Requireable<boolean>;
-        range: PropTypes.Requireable<boolean>;
-        from: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        to: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        clear: PropTypes.Requireable<boolean>;
-        inline: PropTypes.Requireable<boolean>;
-        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
-        displayMonthFormat: PropTypes.Requireable<(...args: any[]) => any>;
-        displayDayFormat: PropTypes.Requireable<(...args: any[]) => any>;
-        displayTimeFormat: PropTypes.Requireable<(...args: any[]) => any>;
-        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
-        applyTimeInput: PropTypes.Requireable<(...args: any[]) => any>;
-        datePlaceholder: PropTypes.Requireable<string>;
-        dateTimePlaceholder: PropTypes.Requireable<string>;
-        rangePlaceholder: PropTypes.Requireable<string>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        dropdownProps: PropTypes.Requireable<object>;
-        disabled: PropTypes.Requireable<boolean>;
-        minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        translations: PropTypes.Requireable<object>;
-        locale: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<Size>;
-    };
-    static defaultProps: DatePickerProps;
-    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
-    context: React.ContextType<typeof DatePicker.contextType>;
-    handleChange: (change: DatePickerChange | Date | null | undefined) => void;
-    clear: () => void;
-    popup?: Popup | null;
-    popupRef: (el: Popup | null) => void;
-    closePopup: () => void;
-    parse: (arg: string | number | Date | null | undefined) => Date | null;
-    formatTime(): string | null;
-    getAnchorText: () => string;
-    render(): React.JSX.Element;
-}
-export type DatePickerAttrs = JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;