@semcore/time-picker 3.0.13 → 3.0.16

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.16] - 2022-07-21
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/select` [3.0.13 ~> 3.0.14]).
+
+## [3.0.15] - 2022-07-18
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/select` [3.0.12 ~> 3.0.13]).
+
+## [3.0.14] - 2022-07-14
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/input` [3.0.7 ~> 3.0.8], `@semcore/select` [3.0.11 ~> 3.0.12]).
+
 ## [3.0.13] - 2022-07-14
 
 ### Changed

package/lib/cjs/TimePicker.js

@@ -61,22 +61,22 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STimePicker_1yro5_gg_{position:relative;width:auto}.___STimePicker_1yro5_gg_.__disabled_1yro5_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_1yro5_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_1yro5_gg_.__placeholder_1yro5_gg_{text-overflow:clip}.___SPickerInput_1yro5_gg_._size_m_1yro5_gg_{width:19px}.___SPickerInput_1yro5_gg_._size_l_1yro5_gg_{width:21px}.___SPickerFormat_1yro5_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_1yro5_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_1yro5_gg_:active,.___SPickerFormat_1yro5_gg_.__active_1yro5_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_1yro5_gg_._size_m_1yro5_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_1yro5_gg_._size_m_1yro5_gg_ .___SPickerFormatText_1yro5_gg_{margin:0 8px}.___SPickerFormat_1yro5_gg_._size_l_1yro5_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_1yro5_gg_._size_l_1yro5_gg_ .___SPickerFormatText_1yro5_gg_{margin:0 12px}.___SPickerFormat_1yro5_gg_.__disabled_1yro5_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_1yro5_gg_.__keyboardFocused_1yro5_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_1yro5_gg_.__disabled_1yro5_gg_{opacity:0.3;pointer-events:none}"
+".___STimePicker_18gcr_gg_{position:relative;width:auto}.___STimePicker_18gcr_gg_.__disabled_18gcr_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_18gcr_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_18gcr_gg_.__placeholder_18gcr_gg_{text-overflow:clip}.___SPickerInput_18gcr_gg_._size_m_18gcr_gg_{width:19px}.___SPickerInput_18gcr_gg_._size_l_18gcr_gg_{width:21px}.___SPickerFormat_18gcr_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_18gcr_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_18gcr_gg_:active,.___SPickerFormat_18gcr_gg_.__active_18gcr_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_18gcr_gg_._size_m_18gcr_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_18gcr_gg_._size_m_18gcr_gg_ .___SPickerFormatText_18gcr_gg_{margin:0 8px}.___SPickerFormat_18gcr_gg_._size_l_18gcr_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_18gcr_gg_._size_l_18gcr_gg_ .___SPickerFormatText_18gcr_gg_{margin:0 12px}.___SPickerFormat_18gcr_gg_.__disabled_18gcr_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_18gcr_gg_.__keyboardFocused_18gcr_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_18gcr_gg_.__disabled_18gcr_gg_{opacity:0.3;pointer-events:none}"
 /*__inner_css_end__*/
-, "m3tn0e_gg_")
+, "18gcr_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STimePicker": "___STimePicker_1yro5_gg_",
-  "_disabled": "__disabled_1yro5_gg_",
-  "__SPickerInput": "___SPickerInput_1yro5_gg_",
-  "_placeholder": "__placeholder_1yro5_gg_",
-  "_size_m": "_size_m_1yro5_gg_",
-  "_size_l": "_size_l_1yro5_gg_",
-  "__SPickerFormat": "___SPickerFormat_1yro5_gg_",
-  "_active": "__active_1yro5_gg_",
-  "__SPickerFormatText": "___SPickerFormatText_1yro5_gg_",
-  "_keyboardFocused": "__keyboardFocused_1yro5_gg_",
-  "__STimePickerSeparator": "___STimePickerSeparator_1yro5_gg_"
+  "__STimePicker": "___STimePicker_18gcr_gg_",
+  "_disabled": "__disabled_18gcr_gg_",
+  "__SPickerInput": "___SPickerInput_18gcr_gg_",
+  "_placeholder": "__placeholder_18gcr_gg_",
+  "_size_m": "_size_m_18gcr_gg_",
+  "_size_l": "_size_l_18gcr_gg_",
+  "__SPickerFormat": "___SPickerFormat_18gcr_gg_",
+  "_active": "__active_18gcr_gg_",
+  "__SPickerFormatText": "___SPickerFormatText_18gcr_gg_",
+  "_keyboardFocused": "__keyboardFocused_18gcr_gg_",
+  "__STimePickerSeparator": "___STimePickerSeparator_18gcr_gg_"
 });
 var MAP_MERIDIEM = {
   AM: 'PM',

package/lib/es6/TimePicker.js

@@ -30,22 +30,22 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STimePicker_1yro5_gg_{position:relative;width:auto}.___STimePicker_1yro5_gg_.__disabled_1yro5_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_1yro5_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_1yro5_gg_.__placeholder_1yro5_gg_{text-overflow:clip}.___SPickerInput_1yro5_gg_._size_m_1yro5_gg_{width:19px}.___SPickerInput_1yro5_gg_._size_l_1yro5_gg_{width:21px}.___SPickerFormat_1yro5_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_1yro5_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_1yro5_gg_:active,.___SPickerFormat_1yro5_gg_.__active_1yro5_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_1yro5_gg_._size_m_1yro5_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_1yro5_gg_._size_m_1yro5_gg_ .___SPickerFormatText_1yro5_gg_{margin:0 8px}.___SPickerFormat_1yro5_gg_._size_l_1yro5_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_1yro5_gg_._size_l_1yro5_gg_ .___SPickerFormatText_1yro5_gg_{margin:0 12px}.___SPickerFormat_1yro5_gg_.__disabled_1yro5_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_1yro5_gg_.__keyboardFocused_1yro5_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_1yro5_gg_.__disabled_1yro5_gg_{opacity:0.3;pointer-events:none}"
+".___STimePicker_18gcr_gg_{position:relative;width:auto}.___STimePicker_18gcr_gg_.__disabled_18gcr_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_18gcr_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_18gcr_gg_.__placeholder_18gcr_gg_{text-overflow:clip}.___SPickerInput_18gcr_gg_._size_m_18gcr_gg_{width:19px}.___SPickerInput_18gcr_gg_._size_l_18gcr_gg_{width:21px}.___SPickerFormat_18gcr_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_18gcr_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_18gcr_gg_:active,.___SPickerFormat_18gcr_gg_.__active_18gcr_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_18gcr_gg_._size_m_18gcr_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_18gcr_gg_._size_m_18gcr_gg_ .___SPickerFormatText_18gcr_gg_{margin:0 8px}.___SPickerFormat_18gcr_gg_._size_l_18gcr_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_18gcr_gg_._size_l_18gcr_gg_ .___SPickerFormatText_18gcr_gg_{margin:0 12px}.___SPickerFormat_18gcr_gg_.__disabled_18gcr_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_18gcr_gg_.__keyboardFocused_18gcr_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_18gcr_gg_.__disabled_18gcr_gg_{opacity:0.3;pointer-events:none}"
 /*__inner_css_end__*/
-, "m3tn0e_gg_")
+, "18gcr_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STimePicker": "___STimePicker_1yro5_gg_",
-  "_disabled": "__disabled_1yro5_gg_",
-  "__SPickerInput": "___SPickerInput_1yro5_gg_",
-  "_placeholder": "__placeholder_1yro5_gg_",
-  "_size_m": "_size_m_1yro5_gg_",
-  "_size_l": "_size_l_1yro5_gg_",
-  "__SPickerFormat": "___SPickerFormat_1yro5_gg_",
-  "_active": "__active_1yro5_gg_",
-  "__SPickerFormatText": "___SPickerFormatText_1yro5_gg_",
-  "_keyboardFocused": "__keyboardFocused_1yro5_gg_",
-  "__STimePickerSeparator": "___STimePickerSeparator_1yro5_gg_"
+  "__STimePicker": "___STimePicker_18gcr_gg_",
+  "_disabled": "__disabled_18gcr_gg_",
+  "__SPickerInput": "___SPickerInput_18gcr_gg_",
+  "_placeholder": "__placeholder_18gcr_gg_",
+  "_size_m": "_size_m_18gcr_gg_",
+  "_size_l": "_size_l_18gcr_gg_",
+  "__SPickerFormat": "___SPickerFormat_18gcr_gg_",
+  "_active": "__active_18gcr_gg_",
+  "__SPickerFormatText": "___SPickerFormatText_18gcr_gg_",
+  "_keyboardFocused": "__keyboardFocused_18gcr_gg_",
+  "__STimePickerSeparator": "___STimePickerSeparator_18gcr_gg_"
 });
 var MAP_MERIDIEM = {
   AM: 'PM',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/time-picker",
   "description": "SEMRush TimePicker Component",
-  "version": "3.0.13",
+  "version": "3.0.16",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

package/src/PickerFormat.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Component, sstyled, Root } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-class TimePickerFormat extends Component {
-  static enhance = [keyboardFocusEnhance()];
-  render() {
-    const SPickerFormat = Root;
-    const { Children, meridiem, styles } = this.asProps;
-    const SPickerFormatText = 'span';
-
-    return sstyled(styles)(
-      <SPickerFormat render={Box} type="button" tag="button">
-        {Children.origin ? <Children /> : <SPickerFormatText>{meridiem}</SPickerFormatText>}
-      </SPickerFormat>,
-    );
-  }
-}
-
-export default TimePickerFormat;

package/src/PickerInput.jsx

@@ -1,217 +0,0 @@
-import React from 'react';
-import Input from '@semcore/input';
-import Select from '@semcore/select';
-import { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';
-import { Component, sstyled, Root } from '@semcore/core';
-import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
-
-const MAP_FIELD_TO_TIME = {
-  hours: 0,
-  minutes: 1,
-};
-
-const MAP_SIZE_SELECT = {
-  m: 'm',
-  l: 'l',
-};
-
-function getOptions(min, max, step = 1) {
-  const length = Number(((max + 1 - min) / step).toFixed(0));
-  const options = Array(length).fill('');
-  let numValue = min;
-  return options.map((i, index) => {
-    numValue = index === 0 ? numValue : numValue + step;
-    const value = withLeadingZero(String(numValue));
-    return (
-      <Select.Option value={value} key={value}>
-        {value}
-      </Select.Option>
-    );
-  });
-}
-
-class ItemPicker extends Component {
-  static defaultProps = {
-    placeholder: '00',
-  };
-
-  $input = React.createRef();
-
-  minMax() {
-    return [];
-  }
-
-  state = {
-    dirtyValue: undefined,
-    visible: false,
-  };
-
-  parseValueWithMinMax = (value) => {
-    const [min, max] = this.minMax();
-    return String(Math.max(min, Math.min(max, value)));
-  };
-
-  dispatchOnChange(value, event) {
-    this.setState({ dirtyValue: undefined });
-    this.asProps.$onValueChange(value, this.field, event);
-  }
-
-  submitChanges(event) {
-    let { dirtyValue } = this.state;
-    if (dirtyValue !== undefined) {
-      // if changes value
-      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not ""
-      this.dispatchOnChange(dirtyValue, event);
-    }
-  }
-
-  handleChange = (value, e) => {
-    /* hide props for bubbling events */
-    e.stopPropagation();
-    const numberValue = intOrDefault(Number(value), NaN);
-
-    if (!Number.isNaN(numberValue)) {
-      this.setState({ dirtyValue: value.slice(-2) });
-    }
-  };
-
-  handleBlur = (e) => this.submitChanges(e);
-
-  handleFocus = () => {
-    this.$input?.current.select();
-  };
-
-  /* rewrite method */
-  handleKeyDown = () => {};
-
-  handleSelect = (value, e) => {
-    this.dispatchOnChange(value, e);
-  };
-
-  handleVisibleChange = (visible) => this.setState({ visible });
-
-  render() {
-    const SPickerInput = Root;
-    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =
-      this.asProps;
-    const { dirtyValue, visible } = this.state;
-    const timeValue = time[MAP_FIELD_TO_TIME[this.field]];
-    const value = dirtyValue === undefined ? timeValue : dirtyValue;
-    const [min, max] = this.minMax();
-
-    return sstyled(styles)(
-      <Select
-        {...other}
-        interaction="focus"
-        size={size ? MAP_SIZE_SELECT[size] : false}
-        onChange={callAllEventHandlers(onSelect, this.handleSelect)}
-        onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}
-        visible={visible}
-        value={timeValue}
-      >
-        <SPickerInput
-          interaction="focus"
-          render={Select.Trigger}
-          tag={Input.Value}
-          ref={this.$input}
-          size={size}
-          disabled={disabled}
-          neighborLocation={false}
-          value={value}
-          aria-label={`Search ${this.field}`}
-          onChange={this.handleChange}
-          onBlur={this.handleBlur}
-          onFocus={this.handleFocus}
-          onKeyDown={this.handleKeyDown}
-        />
-        <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>
-      </Select>,
-    );
-  }
-}
-
-class Hours extends ItemPicker {
-  field = 'hours';
-
-  minMax() {
-    const { is12Hour } = this.asProps;
-    if (is12Hour) {
-      return [1, 12];
-    } else {
-      return [0, 23];
-    }
-  }
-
-  nextInput() {
-    if (this.$input.current) {
-      const $input = nextInput(this.$input.current);
-      if ($input) {
-        this.setState({ visible: false });
-        $input.focus();
-      }
-    }
-  }
-
-  handleKeyDown = (e) => {
-    const { currentTarget } = e;
-    if (e.keyCode === 13) this.submitChanges(e);
-    if (e.keyCode === 39) {
-      if (
-        currentTarget.selectionStart >= currentTarget.value.length &&
-        currentTarget.selectionStart === currentTarget.selectionEnd
-      ) {
-        e.preventDefault();
-        this.nextInput();
-      }
-    }
-  };
-
-  componentDidUpdate(prevProps, prevState) {
-    const { dirtyValue } = this.state;
-    if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;
-
-    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {
-      this.nextInput();
-    }
-  }
-}
-
-class Minutes extends ItemPicker {
-  field = 'minutes';
-
-  minMax() {
-    return [0, 59];
-  }
-
-  prevFocus() {
-    if (this.$input.current) {
-      const $input = prevInput(this.$input.current);
-      if ($input) {
-        this.setState({ visible: false });
-        $input.focus();
-      }
-    }
-  }
-
-  handleKeyDown = (e) => {
-    const { currentTarget } = e;
-    if (e.keyCode === 13) this.submitChanges(e);
-    if (e.keyCode === 37) {
-      if (
-        currentTarget.selectionStart <= 0 &&
-        currentTarget.selectionStart === currentTarget.selectionEnd
-      ) {
-        e.preventDefault();
-        this.prevFocus();
-      }
-    }
-    if (e.keyCode === 8) {
-      if (currentTarget.value.length === 0) {
-        e.preventDefault();
-        this.prevFocus();
-      }
-    }
-  };
-}
-
-export { Hours, Minutes };

package/src/TimePicker.jsx

@@ -1,243 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import Input from '@semcore/input';
-import { Box } from '@semcore/flex-box';
-import { Hours, Minutes } from './PickerInput';
-import Format from './PickerFormat';
-
-import style from './style/time-picker.shadow.css';
-
-const MAP_MERIDIEM = {
-  AM: 'PM',
-  PM: 'AM',
-};
-const MAP_FIELD_TO_TIME = {
-  hours: 0,
-  minutes: 1,
-};
-
-export function nextInput(element) {
-  do {
-    element = element.nextElementSibling;
-  } while (element && element.tagName !== 'INPUT');
-  return element;
-}
-
-export function prevInput(element) {
-  do {
-    element = element.previousElementSibling;
-  } while (element && element.tagName !== 'INPUT');
-  return element;
-}
-
-export function intOrDefault(value, def = 0) {
-  const number = Number.parseInt(value);
-  return Number.isNaN(number) ? def : number;
-}
-
-export function withLeadingZero(value) {
-  value = String(value);
-  if (value.length === 1) return `0${value}`;
-  return String(value);
-}
-
-export function meridiemByHours(hours) {
-  return hours >= 12 ? 'PM' : 'AM';
-}
-
-export function formatHoursTo12(hours /* hours by 24 */) {
-  const nHours = intOrDefault(hours, NaN); // if not (:00)
-  if (Number.isNaN(nHours)) return hours;
-
-  // if not (HH:00)
-  if (nHours === 0) return 12; // 0 => 12 PM
-  if (nHours > 12) return nHours - 12; // 22 => 12 PM
-
-  return hours;
-}
-
-export function formatHoursTo24(hours /* hours by 12 */, meridiem) {
-  const nHours = intOrDefault(hours, NaN); // if not (:00)
-
-  if (Number.isNaN(nHours)) return hours;
-
-  if (meridiem === 'AM') {
-    if (nHours === 12) return 0; // 12 AM => 0
-  }
-
-  if (meridiem === 'PM') {
-    if (nHours < 12) return nHours + 12; // 10 PM => 22
-  }
-
-  return hours;
-}
-
-class TimePickerRoot extends Component {
-  static displayName = 'TimePicker';
-  static style = style;
-  static defaultProps = ({ is12Hour }) => ({
-    defaultValue: '',
-    size: 'm',
-    children: (
-      <>
-        <TimePicker.Hours />
-        <TimePicker.Separator />
-        <TimePicker.Minutes />
-        {is12Hour && <TimePicker.Format />}
-      </>
-    ),
-  });
-
-  _lastMeridiem = 'AM'; // default AM
-
-  uncontrolledProps() {
-    return {
-      value: null,
-    };
-  }
-
-  get value() {
-    const { value } = this.asProps;
-    return value === null || value === undefined ? ':' : value;
-  }
-
-  get meridiem() {
-    const { value } = this.asProps;
-    const [hours = ''] = value.split(':');
-
-    const nHours = intOrDefault(hours, NaN);
-
-    if (!Number.isNaN(nHours)) {
-      this._lastMeridiem = meridiemByHours(nHours);
-    }
-
-    return this._lastMeridiem;
-  }
-
-  valueToTime(value) {
-    const { is12Hour } = this.asProps;
-    let [hours = '', minutes = ''] = value.split(':');
-
-    if (is12Hour) hours = formatHoursTo12(hours);
-
-    hours = withLeadingZero(hours);
-    minutes = withLeadingZero(minutes);
-
-    return [hours, minutes];
-  }
-
-  timeToValue(time, meridiem) {
-    const { is12Hour } = this.asProps;
-    let [hours = '', minutes = ''] = time;
-
-    hours = intOrDefault(hours, hours); // 03 => 3
-    minutes = intOrDefault(minutes, minutes); // MM => MM
-
-    if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0
-
-    return `${hours}:${minutes}`;
-  }
-
-  handleValueChange = (value, field, event) => {
-    const { is12Hour } = this.asProps;
-    const { meridiem } = this;
-
-    let time;
-    if (field) {
-      time = this.value.split(':');
-      time[MAP_FIELD_TO_TIME[field]] = value;
-    } else {
-      time = value.split(':');
-    }
-
-    let [hours = '', minutes = ''] = time;
-
-    if (is12Hour) hours = String(formatHoursTo12(hours));
-
-    value = this.timeToValue([hours, minutes], meridiem);
-    this.handlers.value(value, event);
-  };
-
-  handleMeridiemClick = (event) => {
-    const { is12Hour } = this.asProps;
-    let { value, meridiem } = this;
-    let [hours = '', minutes = ''] = value.split(':');
-
-    if (is12Hour) hours = String(formatHoursTo12(hours));
-
-    value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);
-    this.handlers.value(value, event);
-  };
-
-  _getHoursAndMinutesProps = () => {
-    const { is12Hour, size, disabled } = this.asProps;
-    const time = this.valueToTime(this.value);
-
-    return {
-      time,
-      size,
-      is12Hour,
-      disabled,
-      $onValueChange: this.handleValueChange,
-    };
-  };
-
-  getHoursProps = this._getHoursAndMinutesProps;
-  getMinutesProps = this._getHoursAndMinutesProps;
-
-  getSeparatorProps() {
-    return {
-      disabled: this.asProps.disabled,
-    };
-  }
-
-  getFormatProps() {
-    const { size, disabled, disablePortal } = this.asProps;
-    return {
-      size,
-      disabled,
-      disablePortal,
-      meridiem: this.meridiem,
-      onClick: this.handleMeridiemClick,
-    };
-  }
-
-  render() {
-    const STimePicker = Root;
-    const { styles, Children } = this.asProps;
-
-    return sstyled(styles)(
-      <STimePicker render={Input}>
-        <Children />
-      </STimePicker>,
-    );
-  }
-}
-
-class Separator extends Component {
-  static defaultProps = {
-    children: ':',
-  };
-
-  $el = React.createRef();
-
-  handlerClick = () => {
-    if (this.$el.current) {
-      prevInput(this.$el.current)?.focus();
-    }
-  };
-
-  render() {
-    const STimePickerSeparator = Root;
-    return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;
-  }
-}
-
-const TimePicker = createComponent(TimePickerRoot, {
-  Hours,
-  Minutes,
-  Separator,
-  Format,
-});
-
-export default TimePicker;

package/src/index.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { IInputProps, IInputValueProps } from '@semcore/input';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export interface ITimePickerProps extends Omit<IInputProps, 'size'> {
-  /** Time in the hh:mm format */
-  value?: string;
-  /** The event responses upon time changing */
-  onChange?: (time: string, event?: React.SyntheticEvent) => void;
-  /** In charge of the component blocking */
-  disabled?: boolean;
-  /** Control size
-   * @default m */
-  size?: 'm' | 'l';
-  /** 12-hour time format */
-  is12Hour?: boolean;
-}
-
-export interface ITimePickerItemProps extends IInputValueProps {
-  /** Step for changing of the values in the dropdown list */
-  step?: number;
-}
-
-export interface ITimePickerFormatProps extends IBoxProps, IKeyboardFocusProps {}
-
-export interface ITimePickerContext {
-  getHoursProps: PropGetterFn;
-  getFormatProps: PropGetterFn;
-  getMinutesProps: PropGetterFn;
-}
-
-export interface ITimePickerHandlers {
-  value: (value: string) => void;
-}
-
-declare const TimePicker: (<T>(
-  props: CProps<ITimePickerProps & T, ITimePickerContext, ITimePickerHandlers>,
-) => ReturnEl) & {
-  Hours: <T>(props: ITimePickerItemProps & T) => ReturnEl;
-  Minutes: <T>(props: ITimePickerItemProps & T) => ReturnEl;
-  Separator: typeof Box;
-  Format: <T>(props: ITimePickerFormatProps & T) => ReturnEl;
-};
-
-export default TimePicker;

package/src/index.js

@@ -1,2 +0,0 @@
-export { default } from './TimePicker';
-export * from './TimePicker';

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

@@ -1,99 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-STimePicker {
-  position: relative;
-  width: auto;
-}
-
-STimePicker[disabled] {
-  color: color-mod(var(--gray-800) a(30%));
-  cursor: default;
-}
-
-SPickerInput {
-  box-sizing: content-box;
-  text-align: center;
-  z-index: 1;
-
-  &[placeholder] {
-    text-overflow: initial;
-  }
-}
-
-SPickerInput[size='m'] {
-  width: 19px;
-}
-
-SPickerInput[size='l'] {
-  width: 21px;
-}
-
-SPickerFormat {
-  flex-shrink: 0;
-  position: relative;
-  display: inline-flex;
-  padding: 0;
-  white-space: nowrap;
-  font-family: inherit;
-  font-weight: 500;
-  line-height: normal;
-  text-decoration: none;
-  align-items: center;
-  border: 1px solid var(--gray-200);
-  border-radius: 0 var(--rounded-m) var(--rounded-m) 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(--gray-500);
-  background-color: color-mod(var(--gray-400) a(10%));
-
-  &:hover {
-    color: var(--gray-500);
-    background-color: color-mod(var(--gray-400) a(20%));
-  }
-
-  &:active,
-  &[active] {
-    color: var(--gray-500);
-    background-color: color-mod(var(--gray-400) a(30%));
-  }
-}
-
-SPickerFormat[size='m'] {
-  height: var(--form-control-m);
-  font-size: var(--fs-200);
-  margin: 0 -1px 0 0;
-  & SPickerFormatText {
-    margin: 0 8px;
-  }
-}
-
-SPickerFormat[size='l'] {
-  height: var(--form-control-l);
-  font-size: var(--fs-300);
-  margin: 0 -4px 0 0;
-  & SPickerFormatText {
-    margin: 0 12px;
-  }
-}
-
-SPickerFormat[disabled] {
-  opacity: var(--disabled-opacity);
-  cursor: default;
-  pointer-events: none;
-  border-color: transparent transparent transparent var(--gray-200);
-}
-
-SPickerFormat[keyboardFocused] {
-  box-shadow: var(--keyboard-focus);
-}
-
-STimePickerSeparator[disabled] {
-  opacity: var(--disabled-opacity);
-  pointer-events: none;
-}