@semcore/date-picker 4.58.0-prerelease.1 → 4.58.0-prerelease.5

package/lib/esm/components/index.mjs

@@ -2,20 +2,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { assignProps, sstyled, Component } from "@semcore/core";
-import React from "react";
-import dayjs from "dayjs";
-import Dropdown from "@semcore/dropdown";
-import { Box } from "@semcore/flex-box";
+import { Box } from "@semcore/base-components";
 import Button from "@semcore/button";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import Dropdown from "@semcore/dropdown";
 import ChevronLeft from "@semcore/icon/ChevronLeft/m";
 import ChevronRight from "@semcore/icon/ChevronRight/m";
-import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
+import dayjs from "dayjs";
+import React from "react";
 import ButtonTrigger from "./ButtonTrigger.mjs";
 import InputTrigger$1 from "./InputTrigger.mjs";
 var _excluded = ["value", "onClick", "onMouseEnter", "onMouseLeave"];
@@ -47,49 +46,45 @@ function Popper(props) {
   }, _ref3))));
 }
 function Header(props) {
-  var _ref4 = arguments[0], _ref10;
+  var _ref4 = arguments[0], _ref0;
   var SHeader = Box;
-  return _ref10 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SHeader, _ref10.cn("SHeader", _objectSpread({}, assignProps({}, _ref4))));
+  return _ref0 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SHeader, _ref0.cn("SHeader", _objectSpread({}, assignProps({}, _ref4))));
 }
-var Title = function Title2(_ref13) {
-  var _ref5 = arguments[0], _ref11;
-  var Children = _ref13.Children, styles = _ref13.styles;
+function Title(_ref11) {
+  var _ref5 = arguments[0], _ref1;
+  var Children = _ref11.Children, styles = _ref11.styles;
   var STitle = Box;
-  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref11.cn("STitle", _objectSpread({}, assignProps({
+  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref1.cn("STitle", _objectSpread({}, assignProps({
     "aria-live": "polite"
-  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})));
-};
-function Prev(_ref14) {
+  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})));
+}
+function Prev(_ref12) {
   var _ref6 = arguments[0];
-  _ref14.getI18nText;
-  var children = _ref14.children, Children = _ref14.Children;
+  var children = _ref12.children, Children = _ref12.Children;
   return /* @__PURE__ */ React.createElement(Button, assignProps({
     "use": "tertiary",
     "theme": "muted",
     "size": "l"
   }, _ref6), children ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(ChevronLeft, null)));
 }
-function Next(_ref15) {
+function Next(_ref13) {
   var _ref7 = arguments[0];
-  _ref15.getI18nText;
-  var children = _ref15.children, Children = _ref15.Children;
+  var children = _ref13.children, Children = _ref13.Children;
   return /* @__PURE__ */ React.createElement(Button, assignProps({
     "use": "tertiary",
     "theme": "muted",
     "size": "l"
   }, _ref7), children ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(ChevronRight, null)));
 }
-var Period = /* @__PURE__ */ function(_Component) {
-  _inherits(Period2, _Component);
-  var _super = _createSuper(Period2);
+var Period = /* @__PURE__ */ (function(_Component) {
   function Period2() {
     var _this;
     _classCallCheck(this, Period2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "getActiveControl", function() {
+    _this = _callSuper(this, Period2, [].concat(args));
+    _defineProperty(_this, "getActiveControl", function() {
       var period = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
       var value = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : void 0;
       function compareMonth(monthOne, monthTwo) {
@@ -104,15 +99,17 @@ var Period = /* @__PURE__ */ function(_Component) {
     });
     return _this;
   }
-  _createClass(Period2, [{
+  _inherits(Period2, _Component);
+  return _createClass(Period2, [{
     key: "render",
     value: function render() {
-      var _ref8 = this.asProps, _ref12, _this2 = this;
+      var _ref8 = this.asProps, _ref10, _this2 = this;
       var SPeriod = Box;
-      var _this$asProps = this.asProps, styles = _this$asProps.styles, value = _this$asProps.value, onChange = _this$asProps.onChange, periods = _this$asProps.periods, onHighlightedChange = _this$asProps.onHighlightedChange, onDisplayedPeriodChange = _this$asProps.onDisplayedPeriodChange;
-      return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriod, _ref12.cn("SPeriod", _objectSpread({}, assignProps({}, _ref8))), periods.map(function(_ref16, i) {
-        var period = _ref16.value, onClick = _ref16.onClick, onMouseEnter = _ref16.onMouseEnter, onMouseLeave = _ref16.onMouseLeave, other = _objectWithoutProperties(_ref16, _excluded);
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, value = _this$asProps.value, onChange = _this$asProps.onChange, periods = _this$asProps.periods, onHighlightedChange = _this$asProps.onHighlightedChange, onDisplayedPeriodChange = _this$asProps.onDisplayedPeriodChange, periodRef = _this$asProps.periodRef;
+      return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriod, _ref10.cn("SPeriod", _objectSpread({}, assignProps({}, _ref8))), periods.map(function(_ref14, i) {
+        var period = _ref14.value, onClick = _ref14.onClick, onMouseEnter = _ref14.onMouseEnter, onMouseLeave = _ref14.onMouseLeave, other = _objectWithoutProperties(_ref14, _excluded);
         return /* @__PURE__ */ React.createElement(Button, _extends({
+          ref: periodRef === null || periodRef === void 0 ? void 0 : periodRef(i),
           key: i,
           use: "tertiary",
           theme: "muted",
@@ -134,8 +131,7 @@ var Period = /* @__PURE__ */ function(_Component) {
       }));
     }
   }]);
-  return Period2;
-}(Component);
+})(Component);
 export {
   Header,
   InputTrigger,

package/lib/esm/style/calendar.shadow.css

@@ -1,6 +1,11 @@
 SCalendar {
   display: flex;
   flex-direction: column;
+  border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
+
+  SCalendarUnit:focus-visible {
+    outline: none;
+  }
 }
 
 SGridDays {
@@ -59,7 +64,7 @@ SCalendarUnit {
   min-height: 32px;
   min-width: 32px;
   position: relative;
-  transition: color 0.15s, background 0.15s, box-shadow 0.15s, border-radius 0.15s 0.15s;
+  transition: border-radius 0.15s 0.15s;
   outline: none;
   margin: 0;
   margin-top: 4px;
@@ -93,30 +98,30 @@ SCalendarUnit[today]SCalendarUnit[endSelected] {
 }
 
 SCalendarUnit[selected] {
-  background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.015 278.4));
+  background-color: var(--intergalactic-date-picker-cell-range, oklch(0.959 0.021 267.8));
   border-radius: 0;
-  transition: color 0.15s, background 0.15s, box-shadow 0.15s, border-radius 0s 0s;
+  transition: border-radius 0s 0s;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
   &:hover {
-    background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.038 278.4));
+    background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.898 0.054 268.3));
   }
 }
 
 SCalendarUnit[highlighted] {
-  background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.038 278.4));
+  background-color: var(--intergalactic-date-picker-cell-range, oklch(0.959 0.021 267.8));
   border-radius: 0;
-  transition: color 0.15s, background 0.15s, box-shadow 0.15s, border-radius 0s 0s;
+  transition: border-radius 0s 0s;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
   &:hover {
-    background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.038 278.4));
+    background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.898 0.054 268.3));
   }
 }
 
 SCalendarUnit[startSelected] {
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-  background-color: var(--intergalactic-date-picker-cell-active, oklch(0.64 0.135 278.4));
+  background-color: var(--intergalactic-date-picker-cell-active, oklch(0.64 0.152 276.7));
 
   &:not([highlighted]) {
     border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
@@ -127,12 +132,12 @@ SCalendarUnit[startSelected] {
 
   &:hover {
     color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.6 0.15 278.4));
+    background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.6 0.166 277.7));
   }
 }
 
 SCalendarUnit[endSelected] {
-  background-color: var(--intergalactic-date-picker-cell-active, oklch(0.64 0.135 278.4));
+  background-color: var(--intergalactic-date-picker-cell-active, oklch(0.64 0.152 276.7));
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
 
   &:not([highlighted]) {
@@ -144,7 +149,7 @@ SCalendarUnit[endSelected] {
 
   &:hover {
     color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.6 0.15 278.4));
+    background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.6 0.166 277.7));
   }
 }
 
@@ -233,19 +238,12 @@ SCalendarUnit[disabled] {
 }
 
 SCalendar:focus {
-  outline: none;
   & SCalendarUnit[highlighted] {
     z-index: 1;
-    box-shadow: var(
-      --intergalactic-keyboard-focus,
-      0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441)
-    );
   }
+
   &:not(&:has(SCalendarUnit[highlighted])) {
-    box-shadow: var(
-      --intergalactic-keyboard-focus,
-      0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441)
-    );
+    border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
   }
 }
 
@@ -256,4 +254,4 @@ SCalendar:focus {
   SCalendarUnit[highlighted] {
     transition: none;
   }
-}
+}

package/lib/esm/style/date-picker.shadow.css

@@ -10,13 +10,8 @@ SPopper {
   &:active,
   &:hover,
   &:focus {
-    outline: 0;
     text-decoration: none;
   }
-
-  &:focus {
-    box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
-  }
 }
 
 SHeader {
@@ -63,6 +58,10 @@ SInputMask[animationsDisabled] {
 
 SInputMask SValue {
   letter-spacing: 0;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 SIndicator {
@@ -75,7 +74,7 @@ SRangeIndicator {
 }
 
 SRangeIndicator[range='value'] {
-  background-color: var(--intergalactic-date-picker-cell-active, oklch(0.64 0.135 278.4));
+  background-color: var(--intergalactic-date-picker-cell-active, oklch(0.64 0.152 276.7));
 }
 
 SRangeIndicator[range='compare'] {
@@ -138,7 +137,7 @@ SInputMask[noHumanizedDate] SMask {
 }
 
 SDateRange SInputMask:focus-within SMask {
-  background-color: var(--intergalactic-bg-highlight-focus, oklch(0.405 0.257 264.2 / 0.093));
+  background-color: var(--intergalactic-bg-highlight-focus, oklch(0.524 0.266 263.1 / 0.116));
 }
 
 SRangeSep[fulfilled],
@@ -176,4 +175,4 @@ SCompareToggle {
   SInputMask {
     transition: none;
   }
-}
+}

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -6,13 +6,13 @@ import it from "./it.json.mjs";
 import ja from "./ja.json.mjs";
 import ko from "./ko.json.mjs";
 import nl from "./nl.json.mjs";
+import pl from "./pl.json.mjs";
 import pt from "./pt.json.mjs";
 import ru from "./ru.json.mjs";
+import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
-import pl from "./pl.json.mjs";
-import sv from "./sv.json.mjs";
 var localizedMessages = {
   de,
   en,

package/lib/esm/translations/de.json.mjs

@@ -9,13 +9,17 @@ const last2Months = "Letzte 2 Monate";
 const last3Months = "Letzte 3 Monate";
 const last6Months = "Letzte 6 Monate";
 const last12Months = "Letzte 12 Monate";
-const prev = "Voriger Zeitraum";
-const next = "Nächster Zeitraum";
+const prevYear = "Voriges Jahr";
+const nextYear = "Folgejahr";
+const prevMonth = "Vormonat";
+const nextMonth = "Folgemonat";
 const input = "Datumsfeld";
 const compare = "Vergleichen mit";
 const fromDate = "Vom {date}";
 const toDate = "Bis {date}";
+const fromDatePlaceholder = "Von-Datum";
 const periods = "Vorgaben";
+const toDatePlaceholder = "Bis-Datum";
 const dateRange = "Datumsbereich";
 const dateRange1 = "Erster Datumsbereich";
 const dateRange2 = "Zweiter Datumsbereich";
@@ -37,13 +41,17 @@ const de = {
   last3Months,
   last6Months,
   last12Months,
-  prev,
-  next,
+  prevYear,
+  nextYear,
+  prevMonth,
+  nextMonth,
   input,
   compare,
   fromDate,
   toDate,
+  fromDatePlaceholder,
   periods,
+  toDatePlaceholder,
   dateRange,
   dateRange1,
   dateRange2,
@@ -65,6 +73,7 @@ export {
   dateRange2,
   de as default,
   fromDate,
+  fromDatePlaceholder,
   input,
   last12Months,
   last2Days,
@@ -74,13 +83,16 @@ export {
   last6Months,
   lastMonth,
   lastWeek,
-  next,
+  nextMonth,
+  nextYear,
   periods,
-  prev,
+  prevMonth,
+  prevYear,
   reset,
   selectingFinished,
   selectingStarted,
   toDate,
+  toDatePlaceholder,
   today,
   unavailableDate,
   unavailableEndDate,

package/lib/esm/translations/es.json.mjs

@@ -9,13 +9,17 @@ const last2Months = "Últimos 2 meses";
 const last3Months = "Últimos 3 meses";
 const last6Months = "Últimos 6 meses";
 const last12Months = "Últimos 12 meses";
-const prev = "Periodo precedente";
-const next = "Periodo siguiente";
+const prevYear = "Año anterior";
+const nextYear = "Año siguiente";
+const prevMonth = "Mes anterior";
+const nextMonth = "Mes siguiente";
 const input = "Campo de datos";
 const compare = "Comparar con";
 const fromDate = "Desde {date}";
 const toDate = "Hasta {date}";
+const fromDatePlaceholder = "Fecha de inicio";
 const periods = "Predefinidos";
+const toDatePlaceholder = "Fecha de fin";
 const dateRange = "Rango de fechas";
 const dateRange1 = "Primer rango de fechas";
 const dateRange2 = "Segundo rango de fechas";
@@ -37,13 +41,17 @@ const es = {
   last3Months,
   last6Months,
   last12Months,
-  prev,
-  next,
+  prevYear,
+  nextYear,
+  prevMonth,
+  nextMonth,
   input,
   compare,
   fromDate,
   toDate,
+  fromDatePlaceholder,
   periods,
+  toDatePlaceholder,
   dateRange,
   dateRange1,
   dateRange2,
@@ -65,6 +73,7 @@ export {
   dateRange2,
   es as default,
   fromDate,
+  fromDatePlaceholder,
   input,
   last12Months,
   last2Days,
@@ -74,13 +83,16 @@ export {
   last6Months,
   lastMonth,
   lastWeek,
-  next,
+  nextMonth,
+  nextYear,
   periods,
-  prev,
+  prevMonth,
+  prevYear,
   reset,
   selectingFinished,
   selectingStarted,
   toDate,
+  toDatePlaceholder,
   today,
   unavailableDate,
   unavailableEndDate,

package/lib/esm/translations/fr.json.mjs

@@ -9,13 +9,17 @@ const last2Months = "2 derniers mois";
 const last3Months = "3 derniers mois";
 const last6Months = "6 derniers mois";
 const last12Months = "12 derniers mois";
-const prev = "Période précédente";
-const next = "Période suivante";
+const prevYear = "Année précédente";
+const nextYear = "Année suivante";
+const prevMonth = "Mois précédent";
+const nextMonth = "Mois suivant";
 const input = "Champ de date";
 const compare = "Comparer à";
 const fromDate = "Du {date}";
 const toDate = "Au {date}";
+const fromDatePlaceholder = "Date de début";
 const periods = "Préréglages";
+const toDatePlaceholder = "Date de fin";
 const dateRange = "Plage de dates";
 const dateRange1 = "Première plage de dates";
 const dateRange2 = "Deuxième plage de dates";
@@ -37,13 +41,17 @@ const fr = {
   last3Months,
   last6Months,
   last12Months,
-  prev,
-  next,
+  prevYear,
+  nextYear,
+  prevMonth,
+  nextMonth,
   input,
   compare,
   fromDate,
   toDate,
+  fromDatePlaceholder,
   periods,
+  toDatePlaceholder,
   dateRange,
   dateRange1,
   dateRange2,
@@ -65,6 +73,7 @@ export {
   dateRange2,
   fr as default,
   fromDate,
+  fromDatePlaceholder,
   input,
   last12Months,
   last2Days,
@@ -74,13 +83,16 @@ export {
   last6Months,
   lastMonth,
   lastWeek,
-  next,
+  nextMonth,
+  nextYear,
   periods,
-  prev,
+  prevMonth,
+  prevYear,
   reset,
   selectingFinished,
   selectingStarted,
   toDate,
+  toDatePlaceholder,
   today,
   unavailableDate,
   unavailableEndDate,

package/lib/esm/translations/it.json.mjs

@@ -9,13 +9,17 @@ const last2Months = "Ultimi 2 mesi";
 const last3Months = "Ultimi 3 mesi";
 const last6Months = "Ultimi 6 mesi";
 const last12Months = "Ultimi 12 mesi";
-const prev = "Periodo precedente";
-const next = "Periodo successivo";
+const prevYear = "Anno precedente";
+const nextYear = "Anno successivo";
+const prevMonth = "Mese precedente";
+const nextMonth = "Mese successivo";
 const input = "Campo data";
 const compare = "Confronta con";
 const fromDate = "Da {date}";
 const toDate = "A {date}";
+const fromDatePlaceholder = "Dalla data";
 const periods = "Impostazioni predefinite";
+const toDatePlaceholder = "Alla data";
 const dateRange = "Intervallo temporale";
 const dateRange1 = "Primo intervallo temporale";
 const dateRange2 = "Secondo intervallo temporale";
@@ -37,13 +41,17 @@ const it = {
   last3Months,
   last6Months,
   last12Months,
-  prev,
-  next,
+  prevYear,
+  nextYear,
+  prevMonth,
+  nextMonth,
   input,
   compare,
   fromDate,
   toDate,
+  fromDatePlaceholder,
   periods,
+  toDatePlaceholder,
   dateRange,
   dateRange1,
   dateRange2,
@@ -65,6 +73,7 @@ export {
   dateRange2,
   it as default,
   fromDate,
+  fromDatePlaceholder,
   input,
   last12Months,
   last2Days,
@@ -74,13 +83,16 @@ export {
   last6Months,
   lastMonth,
   lastWeek,
-  next,
+  nextMonth,
+  nextYear,
   periods,
-  prev,
+  prevMonth,
+  prevYear,
   reset,
   selectingFinished,
   selectingStarted,
   toDate,
+  toDatePlaceholder,
   today,
   unavailableDate,
   unavailableEndDate,

package/lib/esm/translations/ja.json.mjs

@@ -9,13 +9,17 @@ const last2Months = "過去2か月間";
 const last3Months = "過去3か月間";
 const last6Months = "過去6か月間";
 const last12Months = "過去12か月間";
-const prev = "前期間";
-const next = "次の期間";
+const prevYear = "前年";
+const nextYear = "翌年";
+const prevMonth = "前月";
+const nextMonth = "翌月";
 const input = "データフィールド";
 const compare = "次と比較";
 const fromDate = "{date}から";
 const toDate = "{date}まで";
+const fromDatePlaceholder = "開始日";
 const periods = "プリセット";
+const toDatePlaceholder = "終了日";
 const dateRange = "日付範囲";
 const dateRange1 = "一番目の日付範囲";
 const dateRange2 = "二番目の日付範囲";
@@ -37,13 +41,17 @@ const ja = {
   last3Months,
   last6Months,
   last12Months,
-  prev,
-  next,
+  prevYear,
+  nextYear,
+  prevMonth,
+  nextMonth,
   input,
   compare,
   fromDate,
   toDate,
+  fromDatePlaceholder,
   periods,
+  toDatePlaceholder,
   dateRange,
   dateRange1,
   dateRange2,
@@ -65,6 +73,7 @@ export {
   dateRange2,
   ja as default,
   fromDate,
+  fromDatePlaceholder,
   input,
   last12Months,
   last2Days,
@@ -74,13 +83,16 @@ export {
   last6Months,
   lastMonth,
   lastWeek,
-  next,
+  nextMonth,
+  nextYear,
   periods,
-  prev,
+  prevMonth,
+  prevYear,
   reset,
   selectingFinished,
   selectingStarted,
   toDate,
+  toDatePlaceholder,
   today,
   unavailableDate,
   unavailableEndDate,