@semcore/time-picker 4.52.2 → 4.53.0-prerelease.0

package/lib/esm/TimePicker.mjs

@@ -1,305 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-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 { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
-import React from "react";
-import Input from "@semcore/input";
-import { Box } from "@semcore/flex-box";
-import { Hours, Minutes } from "./PickerInput.mjs";
-import TimePickerFormat from "./PickerFormat.mjs";
-import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
-import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
-import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-/*!__reshadow-styles__:"./style/time-picker.shadow.css"*/
-var style = (
-  /*__reshadow_css_start__*/
-  (sstyled.insert(
-    /*__inner_css_start__*/
-    ".___STimePicker_wcad9_gg_{position:relative;width:auto;outline:0}.___STimePicker_wcad9_gg_.__keyboardFocused_wcad9_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePicker_wcad9_gg_.__disabled_wcad9_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___SPickerInput_wcad9_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___SPickerInput_wcad9_gg_.__placeholder_wcad9_gg_{text-overflow:initial}.___SPickerInput_wcad9_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SPickerInput_wcad9_gg_._size_l_wcad9_gg_,.___SPickerInput_wcad9_gg_._size_m_wcad9_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_wcad9_gg_._size_l_wcad9_gg_{width:21px}.___SPickerFormat_wcad9_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_wcad9_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_wcad9_gg_.__active_wcad9_gg_,.___SPickerFormat_wcad9_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_wcad9_gg_:focus,.___SPickerFormat_wcad9_gg_:focus-visible{outline:0}.___SPickerFormat_wcad9_gg_._size_m_wcad9_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_wcad9_gg_._size_m_wcad9_gg_ .___SPickerFormatText_wcad9_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_wcad9_gg_._size_l_wcad9_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0 calc(-1*var(--intergalactic-spacing-1x, 4px))0 0}.___SPickerFormat_wcad9_gg_._size_l_wcad9_gg_ .___SPickerFormatText_wcad9_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_wcad9_gg_.__disabled_wcad9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}.___SPickerFormat_wcad9_gg_.__keyboardFocused_wcad9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePickerSeparator_wcad9_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_wcad9_gg_.__disabled_wcad9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}",
-    /*__inner_css_end__*/
-    "wcad9_gg_"
-  ), /*__reshadow_css_end__*/
-  {
-    "__STimePicker": "___STimePicker_wcad9_gg_",
-    "_keyboardFocused": "__keyboardFocused_wcad9_gg_",
-    "_disabled": "__disabled_wcad9_gg_",
-    "__SPickerInput": "___SPickerInput_wcad9_gg_",
-    "_size_m": "_size_m_wcad9_gg_",
-    "_size_l": "_size_l_wcad9_gg_",
-    "__SPickerFormat": "___SPickerFormat_wcad9_gg_",
-    "__STimePickerSeparator": "___STimePickerSeparator_wcad9_gg_",
-    "_placeholder": "__placeholder_wcad9_gg_",
-    "_active": "__active_wcad9_gg_",
-    "__SPickerFormatText": "___SPickerFormatText_wcad9_gg_"
-  })
-);
-var MAP_MERIDIEM = {
-  AM: "PM",
-  PM: "AM"
-};
-var MAP_FIELD_TO_TIME = {
-  hours: 0,
-  minutes: 1
-};
-function intOrDefault(value) {
-  var def = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
-  var number = Number.parseInt(value);
-  return Number.isNaN(number) ? def : number;
-}
-function withLeadingZero(value) {
-  value = String(value);
-  if (value.length === 1) return "0".concat(value);
-  return String(value);
-}
-function meridiemByHours(hours) {
-  return hours >= 12 ? "PM" : "AM";
-}
-function formatHoursTo12(hours) {
-  var nHours = intOrDefault(hours, NaN);
-  if (Number.isNaN(nHours)) return hours;
-  if (nHours === 0) return 12;
-  if (nHours > 12) return nHours - 12;
-  return hours;
-}
-function formatHoursTo24(hours, meridiem) {
-  var nHours = intOrDefault(hours, NaN);
-  if (Number.isNaN(nHours)) return hours;
-  if (meridiem === "AM") {
-    if (nHours === 12) return 0;
-  }
-  if (meridiem === "PM") {
-    if (nHours < 12) return nHours + 12;
-  }
-  return hours;
-}
-var TimePickerRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(TimePickerRoot2, _Component);
-  var _super = _createSuper(TimePickerRoot2);
-  function TimePickerRoot2() {
-    var _this;
-    _classCallCheck(this, TimePickerRoot2);
-    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), "hoursInputRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "minutesInputRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "_lastMeridiem", "AM");
-    _defineProperty(_assertThisInitialized(_this), "handleValueChange", function(value, field, event) {
-      var is12Hour = _this.asProps.is12Hour;
-      var _assertThisInitialize = _assertThisInitialized(_this), meridiem = _assertThisInitialize.meridiem;
-      var time;
-      if (field) {
-        time = _this.value.split(":");
-        time[MAP_FIELD_TO_TIME[field]] = value;
-      } else {
-        time = value.split(":");
-      }
-      var _time = time, _time2 = _slicedToArray(_time, 2), _time2$ = _time2[0], hours = _time2$ === void 0 ? "" : _time2$, _time2$2 = _time2[1], minutes = _time2$2 === void 0 ? "" : _time2$2;
-      if (is12Hour) hours = String(formatHoursTo12(hours));
-      value = _this.timeToValue([hours, minutes], meridiem);
-      _this.handlers.value(value, event);
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleMeridiemClick", function(event) {
-      var is12Hour = _this.asProps.is12Hour;
-      var _assertThisInitialize2 = _assertThisInitialized(_this), value = _assertThisInitialize2.value, meridiem = _assertThisInitialize2.meridiem;
-      var _value$split = value.split(":"), _value$split2 = _slicedToArray(_value$split, 2), _value$split2$ = _value$split2[0], hours = _value$split2$ === void 0 ? "" : _value$split2$, _value$split2$2 = _value$split2[1], minutes = _value$split2$2 === void 0 ? "" : _value$split2$2;
-      if (is12Hour) hours = String(formatHoursTo12(hours));
-      value = _this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);
-      _this.handlers.value(value, event);
-    });
-    _defineProperty(_assertThisInitialized(_this), "_getHoursAndMinutesProps", function() {
-      var _this$asProps = _this.asProps, is12Hour = _this$asProps.is12Hour, size = _this$asProps.size, disabled = _this$asProps.disabled, getI18nText = _this$asProps.getI18nText;
-      var time = _this.valueToTime(_this.value);
-      return {
-        time,
-        size,
-        is12Hour,
-        disabled,
-        $onValueChange: _this.handleValueChange,
-        minutesInputRef: _this.minutesInputRef,
-        hoursInputRef: _this.hoursInputRef,
-        _getI18nText: getI18nText
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "getHoursProps", function() {
-      return _objectSpread(_objectSpread({}, _this._getHoursAndMinutesProps()), {}, {
-        ref: _this.hoursInputRef
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "getMinutesProps", function() {
-      return _objectSpread(_objectSpread({}, _this._getHoursAndMinutesProps()), {}, {
-        ref: _this.minutesInputRef
-      });
-    });
-    return _this;
-  }
-  _createClass(TimePickerRoot2, [{
-    key: "uncontrolledProps",
-    value: (
-      // default AM
-      function uncontrolledProps() {
-        return {
-          value: null,
-          title: null
-        };
-      }
-    )
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _document$querySelect;
-      var _this$asProps2 = this.asProps, id = _this$asProps2.id, ariaDescribedBy = _this$asProps2["aria-describedby"];
-      var selector = "[for=".concat(id, "]");
-      var titleElement = (_document$querySelect = document.querySelector(selector)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("#".concat(ariaDescribedBy));
-      if (titleElement) {
-        this.handlers.title(titleElement.textContent);
-      }
-    }
-  }, {
-    key: "value",
-    get: function get() {
-      var value = this.asProps.value;
-      return value === null || value === void 0 ? ":" : value;
-    }
-  }, {
-    key: "meridiem",
-    get: function get() {
-      var value = this.asProps.value;
-      var _value$split3 = value.split(":"), _value$split4 = _slicedToArray(_value$split3, 1), _value$split4$ = _value$split4[0], hours = _value$split4$ === void 0 ? "" : _value$split4$;
-      var nHours = intOrDefault(hours, NaN);
-      if (!Number.isNaN(nHours)) {
-        this._lastMeridiem = meridiemByHours(nHours);
-      }
-      return this._lastMeridiem;
-    }
-  }, {
-    key: "valueToTime",
-    value: function valueToTime(value) {
-      var is12Hour = this.asProps.is12Hour;
-      var _value$split5 = value.split(":"), _value$split6 = _slicedToArray(_value$split5, 2), _value$split6$ = _value$split6[0], hours = _value$split6$ === void 0 ? "" : _value$split6$, _value$split6$2 = _value$split6[1], minutes = _value$split6$2 === void 0 ? "" : _value$split6$2;
-      if (is12Hour) hours = formatHoursTo12(hours);
-      hours = withLeadingZero(hours);
-      minutes = withLeadingZero(minutes);
-      return [hours, minutes];
-    }
-  }, {
-    key: "timeToValue",
-    value: function timeToValue(time, meridiem) {
-      var is12Hour = this.asProps.is12Hour;
-      var _time3 = _slicedToArray(time, 2), _time3$ = _time3[0], hours = _time3$ === void 0 ? "" : _time3$, _time3$2 = _time3[1], minutes = _time3$2 === void 0 ? "" : _time3$2;
-      hours = intOrDefault(hours, hours);
-      minutes = intOrDefault(minutes, minutes);
-      if (is12Hour) hours = formatHoursTo24(hours, meridiem);
-      return "".concat(hours, ":").concat(minutes);
-    }
-  }, {
-    key: "getSeparatorProps",
-    value: function getSeparatorProps() {
-      return {
-        disabled: this.asProps.disabled,
-        hoursInputRef: this.hoursInputRef
-      };
-    }
-  }, {
-    key: "getFormatProps",
-    value: function getFormatProps() {
-      var _this$asProps3 = this.asProps, size = _this$asProps3.size, disabled = _this$asProps3.disabled, disablePortal = _this$asProps3.disablePortal, getI18nText = _this$asProps3.getI18nText;
-      return {
-        size,
-        disabled,
-        disablePortal,
-        meridiem: this.meridiem,
-        onClick: this.handleMeridiemClick,
-        getI18nText
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref3;
-      var STimePicker = Input;
-      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, value = _this$asProps4.value, is12Hour = _this$asProps4.is12Hour, getI18nText = _this$asProps4.getI18nText, title = _this$asProps4.title;
-      var _this$valueToTime = this.valueToTime(this.value), _this$valueToTime2 = _slicedToArray(_this$valueToTime, 2), hours = _this$valueToTime2[0], minutes = _this$valueToTime2[1];
-      var label = value ? "".concat(title, " ").concat(getI18nText("title", {
-        time: "".concat(hours, ":").concat(withLeadingZero(minutes)),
-        meridiem: is12Hour ? this.meridiem : ""
-      })) : "".concat(title, " ").concat(getI18nText("titleEmpty"));
-      return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STimePicker, _ref3.cn("STimePicker", _objectSpread({}, assignProps({
-        "role": "group",
-        "aria-label": label,
-        "__excludeProps": ["value", "title"]
-      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
-    }
-  }]);
-  return TimePickerRoot2;
-}(Component);
-_defineProperty(TimePickerRoot, "displayName", "TimePicker");
-_defineProperty(TimePickerRoot, "style", style);
-_defineProperty(TimePickerRoot, "enhance", [i18nEnhance(localizedMessages), keyboardFocusEnhance()]);
-_defineProperty(TimePickerRoot, "defaultProps", function(_ref5) {
-  var is12Hour = _ref5.is12Hour;
-  return {
-    defaultValue: "",
-    size: "m",
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TimePicker.Hours, null), /* @__PURE__ */ React.createElement(TimePicker.Separator, null), /* @__PURE__ */ React.createElement(TimePicker.Minutes, null), is12Hour && /* @__PURE__ */ React.createElement(TimePicker.Format, null)),
-    i18n: localizedMessages,
-    locale: "en",
-    defaultTitle: ""
-  };
-});
-var Separator = /* @__PURE__ */ function(_Component2) {
-  _inherits(Separator2, _Component2);
-  var _super2 = _createSuper(Separator2);
-  function Separator2() {
-    var _this2;
-    _classCallCheck(this, Separator2);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this2), "handlerClick", function() {
-      if (_this2.asProps.hoursInputRef.current) {
-        var _this2$asProps$hoursI;
-        (_this2$asProps$hoursI = _this2.asProps.hoursInputRef.current) === null || _this2$asProps$hoursI === void 0 ? void 0 : _this2$asProps$hoursI.focus();
-      }
-    });
-    return _this2;
-  }
-  _createClass(Separator2, [{
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps, _ref4;
-      var STimePickerSeparator = Box;
-      var styles = this.asProps.styles;
-      return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STimePickerSeparator, _ref4.cn("STimePickerSeparator", _objectSpread({}, assignProps({
-        "onClick": this.handlerClick,
-        "aria-hidden": "true"
-      }, _ref2))));
-    }
-  }]);
-  return Separator2;
-}(Component);
-_defineProperty(Separator, "defaultProps", {
-  children: ":"
-});
-var TimePicker = createComponent(TimePickerRoot, {
-  Hours,
-  Minutes,
-  Separator,
-  Format: TimePickerFormat
-});
-export {
-  TimePicker as default,
-  formatHoursTo12,
-  formatHoursTo24,
-  intOrDefault,
-  meridiemByHours,
-  withLeadingZero
-};

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

@@ -1,121 +0,0 @@
-STimePicker {
-  position: relative;
-  width: auto;
-  outline: none;
-}
-
-STimePicker[keyboardFocused]:focus {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
-
-STimePicker[disabled] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  cursor: default;
-}
-
-SPickerInput {
-  box-sizing: content-box;
-  text-align: center;
-  z-index: 1;
-  height: 1.5em;
-
-  &[placeholder] {
-    text-overflow: initial;
-  }
-  &:focus {
-    background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
-  }
-}
-
-SPickerInput[size='m'] {
-  width: 19px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
-SPickerInput[size='l'] {
-  width: 21px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
-SPickerFormat {
-  flex-shrink: 0;
-  position: relative;
-  display: inline-flex;
-  padding: 0;
-  white-space: nowrap;
-  font-family: inherit;
-  font-weight: var(--intergalactic-medium, 500);
-  line-height: normal;
-  text-decoration: none;
-  align-items: center;
-  border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
-  border-radius: 0 var(--intergalactic-control-rounded, 6px)
-    var(--intergalactic-control-rounded, 6px) 0;
-  outline: 0;
-  box-shadow: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  overflow: visible;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
-
-  &:hover {
-    color: var(--intergalactic-text-secondary, #6c6e79);
-    background-color: var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9);
-  }
-
-  &:active,
-  &[active] {
-    color: var(--intergalactic-text-secondary, #6c6e79);
-    background-color: var(--intergalactic-bg-secondary-neutral-active, #c4c7cf);
-  }
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-SPickerFormat[size='m'] {
-  height: var(--intergalactic-form-control-m, 28px);
-  font-size: var(--intergalactic-fs-200, 14px);
-  /* disable-tokens-validator */
-  margin: 0 -1px 0 0;
-  & SPickerFormatText {
-    margin: 0 var(--intergalactic-spacing-2x, 8px);
-  }
-}
-
-SPickerFormat[size='l'] {
-  height: var(--intergalactic-form-control-l, 40px);
-  font-size: var(--intergalactic-fs-300, 16px);
-  margin: 0 calc(-1 * var(--intergalactic-spacing-1x, 4px)) 0 0;
-  & SPickerFormatText {
-    margin: 0 var(--intergalactic-spacing-3x, 12px);
-  }
-}
-
-SPickerFormat[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  cursor: default;
-  pointer-events: none;
-  border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
-}
-
-SPickerFormat[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
-
-STimePickerSeparator {
-  color: var(--intergalactic-text-primary, #191b23);
-}
-
-STimePickerSeparator[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  pointer-events: none;
-}