@semcore/date-picker 4.57.0 → 4.57.1

package/lib/esm/components/index.mjs

@@ -1,130 +1,148 @@
-import L from "@babel/runtime/helpers/esm/extends";
-import j from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import w from "@babel/runtime/helpers/esm/classCallCheck";
-import z from "@babel/runtime/helpers/esm/createClass";
-import B from "@babel/runtime/helpers/esm/assertThisInitialized";
-import b from "@babel/runtime/helpers/esm/inherits";
-import F from "@babel/runtime/helpers/esm/createSuper";
-import $ from "@babel/runtime/helpers/esm/defineProperty";
-import E from "@babel/runtime/helpers/esm/objectSpread2";
-import { assignProps as l, sstyled as y, Component as N } from "@semcore/core";
-import n from "react";
-import C from "dayjs";
-import T from "@semcore/dropdown";
-import { Box as _ } from "@semcore/flex-box";
-import f from "@semcore/button";
-import W from "@semcore/icon/ChevronLeft/m";
-import q from "@semcore/icon/ChevronRight/m";
-import { callAllEventHandlers as I } from "@semcore/utils/lib/assignProps";
-import G from "./ButtonTrigger.mjs";
-import u from "./InputTrigger.mjs";
-var J = ["value", "onClick", "onMouseEnter", "onMouseLeave"];
-function ce() {
-  var e = arguments[0];
-  return /* @__PURE__ */ n.createElement(T.Trigger, l({
-    tag: G
-  }, e));
+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 _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 Button from "@semcore/button";
+import ChevronLeft from "@semcore/icon/ChevronLeft/m";
+import ChevronRight from "@semcore/icon/ChevronRight/m";
+import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
+import ButtonTrigger from "./ButtonTrigger.mjs";
+import InputTrigger$1 from "./InputTrigger.mjs";
+var _excluded = ["value", "onClick", "onMouseEnter", "onMouseLeave"];
+function Trigger() {
+  var _ref = arguments[0];
+  return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({
+    "tag": ButtonTrigger
+  }, _ref));
 }
-function p() {
-  var e = arguments[0];
-  return /* @__PURE__ */ n.createElement(T.Trigger, l({
-    tag: u,
-    __excludeProps: ["role", "aria-haspopup", "aria-expanded", "onChange", "value", "id"]
-  }, e));
+function InputTrigger() {
+  var _ref2 = arguments[0];
+  return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({
+    "tag": InputTrigger$1,
+    "__excludeProps": ["role", "aria-haspopup", "aria-expanded", "onChange", "value", "id"]
+  }, _ref2));
 }
-p.Indicator = u.Indicator;
-p.MaskedInput = u.MaskedInput;
-p.Addon = u.Addon;
-p.SingleDateInput = u.SingleDateInput;
-p.DateRange = u.DateRange;
-p.DateRangeFromInput = u.DateRangeFromInput;
-p.DateRangeToInput = u.DateRangeToInput;
-function de(e) {
-  var a = arguments[0], r, t = T.Popper;
-  return r = y(e.styles), /* @__PURE__ */ n.createElement(t, r.cn("SPopper", E({}, l({
-    role: "dialog"
-  }, a))));
+InputTrigger.Indicator = InputTrigger$1.Indicator;
+InputTrigger.MaskedInput = InputTrigger$1.MaskedInput;
+InputTrigger.Addon = InputTrigger$1.Addon;
+InputTrigger.SingleDateInput = InputTrigger$1.SingleDateInput;
+InputTrigger.DateRange = InputTrigger$1.DateRange;
+InputTrigger.DateRangeFromInput = InputTrigger$1.DateRangeFromInput;
+InputTrigger.DateRangeToInput = InputTrigger$1.DateRangeToInput;
+function Popper(props) {
+  var _ref3 = arguments[0], _ref9;
+  var SPopper = Dropdown.Popper;
+  return _ref9 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SPopper, _ref9.cn("SPopper", _objectSpread({}, assignProps({
+    "role": "dialog"
+  }, _ref3))));
 }
-function ge(e) {
-  var a = arguments[0], r, t = _;
-  return r = y(e.styles), /* @__PURE__ */ n.createElement(t, r.cn("SHeader", E({}, l({}, a))));
+function Header(props) {
+  var _ref4 = arguments[0], _ref10;
+  var SHeader = Box;
+  return _ref10 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SHeader, _ref10.cn("SHeader", _objectSpread({}, assignProps({}, _ref4))));
 }
-var he = function(a) {
-  var r = arguments[0], t, c = a.Children, s = a.styles, i = _;
-  return t = y(s), /* @__PURE__ */ n.createElement(i, t.cn("STitle", E({}, l({
+var Title = function Title2(_ref13) {
+  var _ref5 = arguments[0], _ref11;
+  var Children = _ref13.Children, styles = _ref13.styles;
+  var STitle = Box;
+  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref11.cn("STitle", _objectSpread({}, assignProps({
     "aria-live": "polite"
-  }, r))), /* @__PURE__ */ n.createElement(c, t.cn("Children", {})));
+  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})));
 };
-function fe(e) {
-  var a = arguments[0];
-  e.getI18nText;
-  var r = e.children, t = e.Children;
-  return /* @__PURE__ */ n.createElement(f, l({
-    use: "tertiary",
-    theme: "muted",
-    size: "l"
-  }, a), r ? /* @__PURE__ */ n.createElement(t, null) : /* @__PURE__ */ n.createElement(f.Addon, null, /* @__PURE__ */ n.createElement(W, null)));
+function Prev(_ref14) {
+  var _ref6 = arguments[0];
+  _ref14.getI18nText;
+  var children = _ref14.children, Children = _ref14.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 ve(e) {
-  var a = arguments[0];
-  e.getI18nText;
-  var r = e.children, t = e.Children;
-  return /* @__PURE__ */ n.createElement(f, l({
-    use: "tertiary",
-    theme: "muted",
-    size: "l"
-  }, a), r ? /* @__PURE__ */ n.createElement(t, null) : /* @__PURE__ */ n.createElement(f.Addon, null, /* @__PURE__ */ n.createElement(q, null)));
+function Next(_ref15) {
+  var _ref7 = arguments[0];
+  _ref15.getI18nText;
+  var children = _ref15.children, Children = _ref15.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 Ce = /* @__PURE__ */ function(e) {
-  b(r, e);
-  var a = F(r);
-  function r() {
-    var t;
-    w(this, r);
-    for (var c = arguments.length, s = new Array(c), i = 0; i < c; i++)
-      s[i] = arguments[i];
-    return t = a.call.apply(a, [this].concat(s)), $(B(t), "getActiveControl", function() {
-      var m = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : void 0;
-      function d(g, P) {
-        return C(g).isSame(C(P), "date");
+var Period = /* @__PURE__ */ function(_Component) {
+  _inherits(Period2, _Component);
+  var _super = _createSuper(Period2);
+  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() {
+      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) {
+        return dayjs(monthOne).isSame(dayjs(monthTwo), "date");
+      }
+      if (!period || !value) return false;
+      if (Array.isArray(value) && period.length !== value.length) return false;
+      if (Array.isArray(value)) {
+        return compareMonth(period[0], value[0]) && compareMonth(period[1], value[1]);
       }
-      return !m || !o || Array.isArray(o) && m.length !== o.length ? !1 : Array.isArray(o) ? d(m[0], o[0]) && d(m[1], o[1]) : d(m[0], o);
-    }), t;
+      return compareMonth(period[0], value);
+    });
+    return _this;
   }
-  return z(r, [{
+  _createClass(Period2, [{
     key: "render",
-    value: function() {
-      var c = this.asProps, s, i = this, m = _, o = this.asProps, d = o.styles, g = o.value, P = o.onChange, A = o.periods, D = o.onHighlightedChange, S = o.onDisplayedPeriodChange;
-      return s = y(d), /* @__PURE__ */ n.createElement(m, s.cn("SPeriod", E({}, l({}, c))), A.map(function(h, M) {
-        var v = h.value, x = h.onClick, R = h.onMouseEnter, k = h.onMouseLeave, H = j(h, J);
-        return /* @__PURE__ */ n.createElement(f, L({
-          key: M,
+    value: function render() {
+      var _ref8 = this.asProps, _ref12, _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);
+        return /* @__PURE__ */ React.createElement(Button, _extends({
+          key: i,
           use: "tertiary",
           theme: "muted",
           role: "option",
-          styles: d,
-          active: i.getActiveControl(v, g),
-          onClick: I(x, function() {
-            return P(v);
+          styles,
+          active: _this2.getActiveControl(period, value),
+          onClick: callAllEventHandlers(onClick, function() {
+            return onChange(period);
           }),
-          onMouseEnter: I(R, function() {
-            D(v), S(C(v[0]).toDate());
+          onMouseEnter: callAllEventHandlers(onMouseEnter, function() {
+            onHighlightedChange(period);
+            onDisplayedPeriodChange(dayjs(period[0]).toDate());
           }),
-          onMouseLeave: I(k, function() {
-            D([]), S(g[0] ? C(g[0]).toDate() : /* @__PURE__ */ new Date());
+          onMouseLeave: callAllEventHandlers(onMouseLeave, function() {
+            onHighlightedChange([]);
+            onDisplayedPeriodChange(value[0] ? dayjs(value[0]).toDate() : /* @__PURE__ */ new Date());
           })
-        }, H));
+        }, other));
       }));
     }
-  }]), r;
-}(N);
+  }]);
+  return Period2;
+}(Component);
 export {
-  ge as Header,
-  p as InputTrigger,
-  ve as Next,
-  Ce as Period,
-  de as Popper,
-  fe as Prev,
-  he as Title,
-  ce as Trigger
+  Header,
+  InputTrigger,
+  Next,
+  Period,
+  Popper,
+  Prev,
+  Title,
+  Trigger
 };

package/lib/esm/index.mjs

@@ -1,15 +1,15 @@
-import { default as t, DatePickerRoot as o } from "./DatePicker.mjs";
-import { default as f } from "./DateRangePicker.mjs";
-import { default as p } from "./DateRangeComparator.mjs";
-import { default as d } from "./MonthPicker.mjs";
-import { default as s } from "./MonthRangePicker.mjs";
-import { default as x } from "./MonthDateRangeComparator.mjs";
+import { default as default2, DatePickerRoot } from "./DatePicker.mjs";
+import { default as default3 } from "./DateRangePicker.mjs";
+import { default as default4 } from "./DateRangeComparator.mjs";
+import { default as default5 } from "./MonthPicker.mjs";
+import { default as default6 } from "./MonthRangePicker.mjs";
+import { default as default7 } from "./MonthDateRangeComparator.mjs";
 export {
-  t as DatePicker,
-  o as DatePickerRoot,
-  p as DateRangeComparator,
-  f as DateRangePicker,
-  x as MonthDateRangeComparator,
-  d as MonthPicker,
-  s as MonthRangePicker
+  default2 as DatePicker,
+  DatePickerRoot,
+  default4 as DateRangeComparator,
+  default3 as DateRangePicker,
+  default7 as MonthDateRangeComparator,
+  default5 as MonthPicker,
+  default6 as MonthRangePicker
 };

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

@@ -0,0 +1,259 @@
+SCalendar {
+  display: flex;
+  flex-direction: column;
+}
+
+SGridDays {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(32px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(32px, auto));
+}
+
+SGridMonths {
+  display: grid;
+  grid-row-gap: var(--intergalactic-spacing-2x, 8px);
+  grid-template-columns: repeat(3, minmax(60px, auto));
+  grid-template-rows: repeat(4, minmax(32px, auto));
+}
+
+SWeekDays {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(32px, auto));
+}
+
+SWeekDay {
+  min-width: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  font-size: var(--intergalactic-fs-200, 14px);
+  font-weight: var(--intergalactic-regular, 400);
+  overflow: hidden;
+}
+
+SCalendarUnit {
+  font-family: inherit;
+  font-weight: normal;
+  line-height: normal;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  color: var(--intergalactic-text-primary, #191b23);
+  box-shadow: none;
+  overflow: visible;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  background-color: var(--intergalactic-date-picker-cell, #ffffff);
+
+  align-items: center;
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  font-size: var(--intergalactic-fs-200, 14px);
+  justify-content: center;
+  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;
+  outline: none;
+  margin: 0;
+  margin-top: 4px;
+
+  &:hover {
+    color: var(--intergalactic-text-primary, #191b23);
+    background-color: var(--intergalactic-date-picker-cell-hover, #e0e1e9);
+  }
+}
+
+SCalendarUnit[today] {
+  &:before {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 1px;
+    left: 1px;
+    border-radius: var(--intergalactic-control-rounded, 6px);
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+    box-sizing: border-box;
+    border: 1px solid var(--intergalactic-date-picker-cell-current, #8a8e9b);
+  }
+}
+
+SCalendarUnit[today]SCalendarUnit[startSelected],
+SCalendarUnit[today]SCalendarUnit[endSelected] {
+  &:before {
+    border-color: var(--intergalactic-border-secondary, #e0e1e9);
+  }
+}
+
+SCalendarUnit[selected] {
+  background-color: var(--intergalactic-date-picker-cell-range, #c4e5fe);
+  border-radius: 0;
+  transition: color 0.15s, background 0.15s, box-shadow 0.15s, border-radius 0s 0s;
+  color: var(--intergalactic-text-primary, #191b23);
+
+  &:hover {
+    background-color: var(--intergalactic-date-picker-cell-range-hover, #8ecdff);
+  }
+}
+
+SCalendarUnit[highlighted] {
+  background-color: var(--intergalactic-date-picker-cell-range-hover, #8ecdff);
+  border-radius: 0;
+  transition: color 0.15s, background 0.15s, box-shadow 0.15s, border-radius 0s 0s;
+  color: var(--intergalactic-text-primary, #191b23);
+
+  &:hover {
+    background-color: var(--intergalactic-date-picker-cell-range-hover, #8ecdff);
+  }
+}
+
+SCalendarUnit[startSelected] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-date-picker-cell-active, #2bb3ff);
+
+  &:not([highlighted]) {
+    border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--intergalactic-control-rounded, 6px);
+    border-top-right-radius: 0;
+  }
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-date-picker-cell-active-hover, #008ff8);
+  }
+}
+
+SCalendarUnit[endSelected] {
+  background-color: var(--intergalactic-date-picker-cell-active, #2bb3ff);
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+
+  &:not([highlighted]) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
+    border-top-left-radius: 0;
+    border-top-right-radius: var(--intergalactic-control-rounded, 6px);
+  }
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-date-picker-cell-active-hover, #008ff8);
+  }
+}
+
+SCalendarUnit[startHighlighted]:not([selected]) {
+  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-bottom-right-radius: 0;
+  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-top-right-radius: 0;
+}
+
+SCalendarUnit[endHighlighted]:not([selected]) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
+  border-top-left-radius: 0;
+  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
+}
+
+SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] {
+  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
+  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
+}
+
+SCalendarUnit[startSelected]SCalendarUnit[endSelected] {
+  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
+  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
+}
+
+SCalendarUnit[compareHighlighted] {
+  border-top: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
+  border-bottom: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
+  border-radius: 0;
+  transition: none;
+}
+
+
+SCalendarUnit[compareStartHighlighted],
+SCalendarUnit[compareEndHighlighted] {
+  border-left: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
+  border-right: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
+}
+
+SCalendarUnit[compareStart],
+SCalendarUnit[compareEnd] {
+  border-radius: 0;
+  background-color: var(--intergalactic-date-picker-cell-comparison-active, #8649e1);
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-date-picker-cell-comparison-active-hover, #5925ab);
+  }
+}
+
+SCalendarUnit[compareStartHighlighted] {
+  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
+}
+
+SCalendarUnit[compareEndHighlighted] {
+  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
+  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
+}
+
+SCalendarUnit[compareStart]:not([compareHighlighted]) {
+  border-top-left-radius: var(--intergalactic-control-rounded, 6px);
+  border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);
+}
+
+SCalendarUnit[compareEnd]:not([compareHighlighted]) {
+  border-top-right-radius: var(--intergalactic-control-rounded, 6px);
+  border-bottom-right-radius: var(--intergalactic-control-rounded, 6px);
+}
+
+SCalendarUnit[outdated] {
+  opacity: 0.2;
+}
+
+SCalendarUnit[disabled] {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
+
+SCalendar:focus {
+  outline: none;
+  & SCalendarUnit[highlighted] {
+    z-index: 1;
+    box-shadow: var(
+      --intergalactic-keyboard-focus,
+      0px 0px 0px 3px rgba(0, 143, 248, 0.5)
+    );
+  }
+  &:not(&:has(SCalendarUnit[highlighted])) {
+    box-shadow: var(
+      --intergalactic-keyboard-focus,
+      0px 0px 0px 3px rgba(0, 143, 248, 0.5)
+    );
+  }
+}
+
+@media (prefers-reduced-motion) {
+
+  SCalendarUnit,
+  SCalendarUnit[selected],
+  SCalendarUnit[highlighted] {
+    transition: none;
+  }
+}