@semcore/date-picker 2.8.3 → 3.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/date-picker",
   "description": "SEMRush DatePicker Component",
-  "version": "2.8.3",
+  "version": "3.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,14 +14,14 @@
   },
   "dependencies": {
     "@semcore/utils": "^3.27",
-    "@semcore/base-trigger": "^2",
+    "@semcore/base-trigger": "^3.0.0",
     "@semcore/flex-box": "^4",
-    "@semcore/button": "^3.3.2",
+    "@semcore/button": "^4",
     "@semcore/divider": "^2",
     "@semcore/icon": "^2.16",
     "@semcore/dropdown": "^2",
     "@semcore/typography": "^3",
-    "dayjs": "^1.8"
+    "dayjs": "1.8.36"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
@@ -34,5 +34,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/date-picker"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }

package/src/DatePicker.jsx

@@ -52,7 +52,7 @@ export class DatePickerRoot extends PickerAbstract {
         <>
           <DatePicker.Header />
           <DatePicker.Calendar />
-          <Divider ml={-4} w="calc(100% + 32px)" />
+          <Divider ml={-4} mt={4} w="calc(100% + 32px)" />
           <DatePicker.Today />
         </>
       ),

package/src/components/ButtonTrigger.jsx

@@ -1,11 +1,10 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import BaseTrigger from '@semcore/base-trigger';
-import { Box } from '@semcore/flex-box';
 import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
 import Calendar from '@semcore/icon/Calendar/m';
 import createComponent, { Root } from '@semcore/core';
 
-const ButtonTriggerRoot = ({ Children, size }) => {
+const ButtonTriggerRoot = ({ Children }) => {
   return (
     <Root render={BaseTrigger}>
       <ButtonTrigger.Addon tag={Calendar} />

package/src/components/PickerAbstract.jsx

@@ -131,7 +131,6 @@ class PickerAbstract extends Component {
   }
 
   getPopperProps() {
-    const { interaction } = this.asProps;
     const Picker = this[CORE_INSTANCE];
     return {
       tabIndex: 0,

package/src/components/RangePickerAbstract.jsx

@@ -109,7 +109,7 @@ class RangePickerAbstract extends Component {
     const day = this.keyDiff[e.keyCode];
 
     const setNextDisplayedPeriod = (next_highlighted) => {
-      const [_, right_period] = next_highlighted;
+      const [, right_period] = next_highlighted;
 
       if (right_period) {
         const month_right_period = right_period.getMonth();
@@ -193,13 +193,7 @@ class RangePickerAbstract extends Component {
 
   getPopperProps() {
     const Picker = this[CORE_INSTANCE];
-    const {
-      value,
-      periods = this.getDefaultPeriods(),
-      unclearable,
-      getI18nText,
-      interaction,
-    } = this.asProps;
+    const { value, periods = this.getDefaultPeriods(), unclearable, getI18nText } = this.asProps;
     const { dirtyValue } = this.state;
 
     const buttons = (
@@ -292,8 +286,14 @@ class RangePickerAbstract extends Component {
   }
 
   getCalendarProps(props, index) {
-    const { locale, displayedPeriod, disabled, value, highlighted, onHighlightedChange } =
-      this.asProps;
+    const {
+      locale,
+      displayedPeriod,
+      disabled,
+      value,
+      highlighted,
+      onHighlightedChange,
+    } = this.asProps;
     const { dirtyValue } = this.state;
 
     return {

package/src/index.d.ts

@@ -100,7 +100,7 @@ export interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps
    * Component size
    * @default m
    */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /**
    * The selected date, accepts everything which is accepted by `new Date()`
    * */

package/src/index.js

@@ -2,10 +2,7 @@ export { default as DatePicker } from './DatePicker';
 export * from './DatePicker';
 
 export { default as DateRangePicker } from './DateRangePicker';
-export * from './DateRangePicker';
 
 export { default as MonthPicker } from './MonthPicker';
-export * from './MonthPicker';
 
 export { default as MonthRangePicker } from './MonthRangePicker';
-export * from './MonthRangePicker';

package/src/style/calendar.shadow.css

@@ -29,8 +29,8 @@ SWeekDay {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray60);
-  font-size: var(--fs-100);
+  color: var(--gray-500);
+  font-size: var(--fs-200);
   font-weight: 400;
   overflow: hidden;
 }
@@ -43,7 +43,7 @@ SCalendarUnit {
   text-align: center;
   vertical-align: middle;
   border: 1px solid transparent;
-  color: var(--gray20);
+  color: var(--gray-800);
   outline: 0;
   box-shadow: none;
   overflow: visible;
@@ -53,11 +53,11 @@ SCalendarUnit {
   background: transparent;
 
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--rounded-m);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
-  font-size: 12px;
+  font-size: var(--fs-200);
   justify-content: center;
   min-height: 32px;
   min-width: 32px;
@@ -66,12 +66,12 @@ SCalendarUnit {
   outline: none;
 
   &:hover {
-    color: var(--gray20);
-    background: color-mod(var(--stone) alpha(20%));
+    color: var(--gray-800);
+    background: var(--gray-100);
   }
 
   &:focus-visible {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
@@ -80,13 +80,13 @@ SCalendarUnit[today] {
     content: '';
     position: absolute;
     display: block;
-    top: 2px;
-    left: 2px;
-    border-radius: 3px;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
+    top: 1px;
+    left: 1px;
+    border-radius: var(--rounded-m);
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
     box-sizing: border-box;
-    border: 1px solid color-mod(black alpha(20%));
+    border: 1px solid var(--gray-200);
   }
 }
 
@@ -98,79 +98,83 @@ SCalendarUnit[today]SCalendarUnit[endSelected] {
 }
 
 SCalendarUnit[selected] {
-  background: color-mod(var(--light-blue) alpha(10%));
+  background: var(--blue-100);
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[highlighted] {
-  background: color-mod(var(--light-blue) alpha(20%));
+  background: color-mod(var(--blue-400) alpha(20%));
   border-radius: 0;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &:hover {
-    background: color-mod(var(--light-blue) alpha(30%));
+    background: color-mod(var(--blue-400) alpha(30%));
   }
 }
 
 SCalendarUnit[startSelected] {
-  background: var(--light-blue);
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
   color: white;
+  background: var(--blue-300);
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[endSelected] {
-  background: var(--light-blue);
+  background: var(--blue-300);
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
   color: white;
 
   &:hover {
     color: white;
-    background: color-mod(var(--light-blue) shade(12%));
+    background: var(--blue-400);
   }
 }
 
 SCalendarUnit[startHighlighted] {
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
   border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-top-left-radius: var(--rounded-m);
   border-top-right-radius: 0;
 }
 
 SCalendarUnit[endHighlighted] {
   border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: var(--rounded-m);
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
 }
 
 SCalendarUnit[startSelected]SCalendarUnit[endSelected] {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: var(--rounded-m);
+  border-bottom-right-radius: var(--rounded-m);
+  border-top-left-radius: var(--rounded-m);
+  border-top-right-radius: var(--rounded-m);
+}
+
+SCalendarUnit[outdated] {
+  opacity: 0.2;
 }
 
 SCalendarUnit[disabled] {
@@ -179,10 +183,6 @@ SCalendarUnit[disabled] {
   pointer-events: none;
 }
 
-SCalendarUnit[outdated] {
-  opacity: 0.2;
-}
-
 @media (prefers-reduced-motion) {
   SCalendarUnit {
     transition: none;

package/src/style/date-picker.shadow.css

@@ -17,16 +17,18 @@ SPopper {
   }
 
   &:focus {
-    box-shadow: var(--keyborad-focus);
+    box-shadow: var(--keyboard-focus);
   }
 }
 
 SHeader {
   display: flex;
+  align-items: center;
 }
 
 STitle {
-  font-size: var(--fs-100);
+  font-size: var(--fs-200);
+  color: var(--gray-800);
   height: 32px;
   width: 100%;
   display: flex;

package/src/utils/shortDateRangeFormat.js

@@ -47,6 +47,7 @@ export default function shortDateRangeFormat(dates, { locale = 'en-US', ...optio
     }
 
     if (isSimilarYear) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { year, ...newOptions } = options;
       if (getDayJSLocale(locale) === 'en') {
         return `${new Intl.DateTimeFormat(locale, newOptions).format(