@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

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

@@ -0,0 +1,602 @@
+@import "../global/variables.css";
+@import "../global/global.css";
+
+@value cellSize: calc(var(--ring-unit) * 3);
+@value calHeight: calc(var(--ring-unit) * 36);
+@value calWidth: calc(var(--ring-unit) * 37);
+@value yearHeight: calc(var(--ring-unit) * 4);
+@value yearWidth: calc(var(--ring-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: var(--ring-unit);
+
+  &.inline {
+    padding: 0;
+  }
+
+  &.sizeS {
+    width: calc(var(--ring-unit) * 12);
+  }
+
+  &.sizeM {
+    width: calc(var(--ring-unit) * 30);
+  }
+
+  &.sizeL {
+    width: calc(var(--ring-unit) * 50);
+  }
+
+  &.sizeFULL {
+    width: 100%;
+  }
+
+  &.sizeAUTO {
+    max-width: 100%;
+  }
+}
+
+.displayDate {
+  display: inline-block;
+
+  min-width: calc(var(--ring-unit) * 11);
+
+  text-align: left;
+}
+
+.displayDate.displayRange {
+  min-width: calc(var(--ring-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(var(--ring-unit) * 2);
+}
+
+.filter {
+  composes: filter from "../select/select-popup.css";
+}
+
+.calendarIcon {
+  margin-right: calc(var(--ring-unit) / 2);
+
+  color: var(--ring-icon-color);
+}
+
+.anchor {
+  width: 100%;
+  padding: 0 var(--ring-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(var(--ring-unit) * 13);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.fromInputWithDivider {
+  &::after {
+    position: absolute;
+    top: 0;
+    right: var(--ring-unit);
+
+    content: "—";
+
+    line-height: calc(4 * var(--ring-unit) - 2px);
+  }
+}
+
+.toInput {
+  flex-basis: calc(var(--ring-unit) * 13);
+  flex-grow: 1;
+  flex-shrink: 0;
+
+  width: calc(var(--ring-unit) * 13);
+}
+
+.dateInput {
+  flex-basis: calc(var(--ring-unit) * 11);
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.timeInputWithDivider {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    left: calc(-1 * var(--ring-unit));
+
+    content: ",";
+
+    line-height: calc(4 * var(--ring-unit) - 3px);
+  }
+}
+
+.weekdays {
+  height: calc(var(--ring-unit) * 4);
+  padding: 5px calc(var(--ring-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(var(--ring-unit) * 21);
+  margin: calc(var(--ring-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(var(--ring-unit) * 12);
+
+  padding-left: calc(var(--ring-unit) * 0.5);
+
+  text-align: left;
+
+  text-transform: capitalize;
+
+  font-weight: bold;
+
+  @supports (flex-basis: 1px) {
+    flex-basis: calc(var(--ring-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(var(--ring-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(var(--ring-unit) * 23);
+    height: calc(var(--ring-unit) * 8);
+
+    content: "";
+    transition: background-color var(--ring-ease);
+  }
+
+  &::before {
+    right: 100%;
+    bottom: 0;
+  }
+
+  &::after {
+    bottom: 100%;
+    left: 0;
+  }
+
+  &.Monday {
+    &::after {
+      height: calc(var(--ring-unit) * 5);
+    }
+  }
+
+  & + .Tuesday {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      z-index: var(--ring-invisible-element-z-index);
+      top: calc(var(--ring-unit) * -8);
+      left: 600%;
+
+      width: calc(var(--ring-unit) * 2);
+      height: 100%;
+
+      content: "";
+      transition: background-color var(--ring-ease);
+    }
+  }
+}
+
+.Friday,
+.Saturday,
+.Sunday {
+  &::before,
+  &::after {
+    height: calc(var(--ring-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(var(--ring-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(var(--ring-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(var(--ring-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(var(--ring-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

@@ -0,0 +1,77 @@
+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>;