@semcore/time-picker 16.1.13 → 16.1.14-prerelease.8

package/lib/esm/component/TimePicker/TimePicker.mjs

@@ -0,0 +1,220 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _applyDecs from "@babel/runtime/helpers/esm/applyDecs2311";
+import _identity from "@babel/runtime/helpers/esm/identity";
+import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
+import { ScreenReaderOnly, Box } from "@semcore/base-components";
+import propsObserver from "@semcore/core/lib/decorators/propsObserver";
+import reactive from "@semcore/core/lib/decorators/reactive";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import Input from "@semcore/input";
+import React from "react";
+import TimePickerEntity from "../../entity/TimePickerEntity.mjs";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import TimePickerFormat from "../PickerFormat/PickerFormat.mjs";
+import { Minutes, Hours } from "../PickerInput/PickerInput.mjs";
+var _Class, _TimePickerRoot3;
+let _initClass, _classDecs, _entityDecs, _init_entity, _init_extra_entity, _TimePickerRoot2, _ref5;
+/*!__reshadow-styles__:"./time-picker.shadow.css"*/
+const style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___STimePicker_17xeh_gg_{position:relative;width:auto;outline:0}.___STimePicker_17xeh_gg_ .___SPickerInput_17xeh_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___STimePicker_17xeh_gg_ .___SPickerInput_17xeh_gg_.__placeholder_17xeh_gg_{text-overflow:initial}.___STimePicker_17xeh_gg_ .___SPickerInput_17xeh_gg_:focus{outline:0;background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___STimePicker_17xeh_gg_.__disabled_17xeh_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___STimePickerSeparator_17xeh_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_17xeh_gg_.__disabled_17xeh_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}",
+    /*__inner_css_end__*/
+    "17xeh_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__STimePicker": "___STimePicker_17xeh_gg_",
+    "_disabled": "__disabled_17xeh_gg_",
+    "__STimePickerSeparator": "___STimePickerSeparator_17xeh_gg_",
+    "__SPickerInput": "___SPickerInput_17xeh_gg_",
+    "_placeholder": "__placeholder_17xeh_gg_"
+  })
+);
+_classDecs = [propsObserver(["value", "is12Hour"])];
+let _TimePickerRoot;
+new (_TimePickerRoot2 = (_ref5 = (_entityDecs = reactive(["meridiem"], function() {
+  this.forceUpdate();
+}), "hoursInputRef"), _TimePickerRoot3 = class TimePickerRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, _ref5, /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "minutesInputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "state", {
+      ariaLabel: ""
+    });
+    _defineProperty(this, "entity", _init_entity(this, new TimePickerEntity(this.props.value ?? this.props.defaultValue, this.props.is12Hour)));
+    _defineProperty(this, "handleValueChange", (_init_extra_entity(this), (value, field, event) => {
+      this.entity[field] = value;
+      this.handlers.value(this.entity.toString(), event);
+    }));
+    _defineProperty(this, "handleMeridiemClick", (event) => {
+      this.entity.toggleMeridiem();
+      this.handlers.value(this.entity.toString(), event);
+    });
+    _defineProperty(this, "getCommonPickerInputProps", () => {
+      const {
+        is12Hour,
+        size,
+        disabled
+      } = this.asProps;
+      return {
+        size,
+        is12Hour,
+        disabled,
+        $onValueChange: this.handleValueChange,
+        minutesInputRef: this.minutesInputRef,
+        hoursInputRef: this.hoursInputRef
+      };
+    });
+    _defineProperty(this, "getHoursProps", () => {
+      return {
+        ...this.getCommonPickerInputProps(),
+        time: this.entity.hours,
+        ariaLabel: this.asProps.getI18nText("hours"),
+        ref: this.hoursInputRef
+      };
+    });
+    _defineProperty(this, "getMinutesProps", () => {
+      return {
+        ...this.getCommonPickerInputProps(),
+        time: this.entity.minutes,
+        ariaLabel: this.asProps.getI18nText("minutes"),
+        ref: this.minutesInputRef
+      };
+    });
+  }
+  componentDidMount() {
+    const {
+      id,
+      "aria-describedby": ariaDescribedBy
+    } = this.asProps;
+    const selector = `[for=${id}]`;
+    const element = document.querySelector(selector) ?? document.querySelector(`#${ariaDescribedBy}`);
+    if (element) {
+      this.setState({
+        ariaLabel: element.textContent
+      });
+    }
+  }
+  onPropsChange(changedProps) {
+    const {
+      value,
+      is12Hour
+    } = changedProps;
+    if (value !== void 0) {
+      const [hours = "", minutes = ""] = value.split(":");
+      this.entity.hours = hours;
+      this.entity.minutes = minutes;
+    }
+    if (is12Hour !== void 0) {
+      this.entity.is12Hour = is12Hour;
+    }
+  }
+  uncontrolledProps() {
+    return {
+      value: null
+    };
+  }
+  getSeparatorProps() {
+    return {
+      disabled: this.asProps.disabled,
+      hoursInputRef: this.hoursInputRef
+    };
+  }
+  getFormatProps() {
+    const {
+      size,
+      disabled,
+      getI18nText
+    } = this.asProps;
+    return {
+      size,
+      disabled,
+      meridiem: this.entity.meridiem,
+      onClick: this.handleMeridiemClick,
+      getI18nText
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref3;
+    const STimePicker = Input;
+    const {
+      styles,
+      Children,
+      value,
+      is12Hour,
+      getI18nText,
+      id
+    } = this.asProps;
+    const time = `${this.entity.hours}:${this.entity.minutes}`;
+    const meridiem = is12Hour ? this.entity.meridiem : "";
+    const label = value ? `${this.state.ariaLabel} ${getI18nText("title", {
+      time,
+      meridiem
+    })}` : `${this.state.ariaLabel} ${getI18nText("titleEmpty")}`;
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STimePicker, _ref3.cn("STimePicker", {
+      ...assignProps({
+        "role": "group",
+        "aria-label": label,
+        "__excludeProps": ["value", "id"]
+      }, _ref)
+    }), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref3.cn("ScreenReaderOnly", {
+      "tag": "input",
+      "tabIndex": -1,
+      "id": id,
+      "aria-hidden": true,
+      "value": `${time} ${meridiem}`
+    })));
+  }
+}, {
+  e: [_init_entity, _init_extra_entity],
+  c: [_TimePickerRoot, _initClass]
+} = _applyDecs(_TimePickerRoot3, _classDecs, [[_entityDecs, 0, "entity"]], 0, void 0, Component), _TimePickerRoot3), _Class = class extends _identity {
+  constructor() {
+    super(_TimePickerRoot), _defineProperty(this, "displayName", "TimePicker"), _defineProperty(this, "style", style), _defineProperty(this, "enhance", [i18nEnhance(localizedMessages)]), _defineProperty(this, "defaultProps", ({
+      is12Hour
+    }) => ({
+      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)),
+      locale: "en"
+    })), _initClass();
+  }
+}, _defineProperty(_Class, _TimePickerRoot2, void 0), _Class)();
+class Separator extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handlerClick", () => {
+      var _a;
+      if (this.asProps.hoursInputRef.current) {
+        (_a = this.asProps.hoursInputRef.current) == null ? void 0 : _a.focus();
+      }
+    });
+  }
+  render() {
+    var _ref2 = this.asProps, _ref4;
+    const STimePickerSeparator = Box;
+    const {
+      styles
+    } = this.asProps;
+    return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(STimePickerSeparator, _ref4.cn("STimePickerSeparator", {
+      ...assignProps({
+        "onClick": this.handlerClick,
+        "aria-hidden": "true"
+      }, _ref2)
+    }));
+  }
+}
+_defineProperty(Separator, "defaultProps", {
+  children: ":"
+});
+const TimePicker = createComponent(_TimePickerRoot, {
+  Hours,
+  Minutes,
+  Separator,
+  Format: TimePickerFormat
+});
+export {
+  TimePicker as default
+};

package/lib/esm/component/TimePicker/time-picker.shadow.css

@@ -0,0 +1,34 @@
+STimePicker {
+  position: relative;
+  width: auto;
+  outline: none;
+
+  SPickerInput {
+    box-sizing: content-box;
+    text-align: center;
+    z-index: 1;
+    height: 1.5em;
+
+    &[placeholder] {
+      text-overflow: initial;
+    }
+    &:focus {
+      outline: none;
+      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
+    }
+  }
+}
+
+STimePicker[disabled] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  cursor: default;
+}
+
+STimePickerSeparator {
+  color: var(--intergalactic-text-primary, #191b23);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  pointer-events: none;
+}

package/lib/esm/entity/TimePickerEntity.mjs

@@ -0,0 +1,65 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+class TimePickerEntity {
+  constructor(value = ":", is12Hour = false) {
+    _defineProperty(this, "_hours", "");
+    _defineProperty(this, "_minutes", "");
+    _defineProperty(this, "_is12Hour", void 0);
+    _defineProperty(this, "_meridiem", "AM");
+    const [hours = "", minutes = ""] = value.split(":");
+    this._is12Hour = is12Hour;
+    this._hours = hours;
+    this._minutes = minutes;
+  }
+  get meridiem() {
+    return this._meridiem;
+  }
+  get hours() {
+    return this._is12Hour ? this.formatHoursTo12(this._hours) : this.formatHoursTo24(this._hours);
+  }
+  get minutes() {
+    return this._minutes && this.withLeadingZero(this._minutes);
+  }
+  set is12Hour(newIs12Hour) {
+    this._is12Hour = newIs12Hour;
+  }
+  set hours(newHours) {
+    this._hours = newHours;
+  }
+  set minutes(newMinutes) {
+    this._minutes = newMinutes;
+  }
+  set meridiem(newMeridiem) {
+    this._meridiem = newMeridiem;
+  }
+  withLeadingZero(value) {
+    return String(value).padStart(2, "0");
+  }
+  formatHoursTo12(hours) {
+    const numberHours = Number.parseInt(hours, 10);
+    if (Number.isNaN(numberHours)) return hours;
+    if (numberHours === 0) {
+      return "12";
+    } else if (numberHours > 12) {
+      return this.withLeadingZero(numberHours - 12);
+    }
+    return this.withLeadingZero(numberHours);
+  }
+  formatHoursTo24(hours) {
+    const numberHours = Number.parseInt(hours, 10);
+    if (Number.isNaN(numberHours)) return hours;
+    if (this.meridiem === "AM") {
+      return this.withLeadingZero(numberHours === 12 ? 0 : numberHours);
+    }
+    return this.withLeadingZero(numberHours < 12 ? numberHours + 12 : numberHours);
+  }
+  toggleMeridiem() {
+    this.meridiem = this._meridiem === "AM" ? "PM" : "AM";
+  }
+  toString() {
+    const hours = this._is12Hour ? this.formatHoursTo24(this.hours) : this.hours;
+    return `${hours}:${this.minutes}`;
+  }
+}
+export {
+  TimePickerEntity as default
+};

package/lib/esm/index.mjs

@@ -1,9 +1,4 @@
-import { default as default2, formatHoursTo12, formatHoursTo24, intOrDefault, meridiemByHours, withLeadingZero } from "./TimePicker.mjs";
+import { default as default2 } from "./component/TimePicker/TimePicker.mjs";
 export {
-  default2 as default,
-  formatHoursTo12,
-  formatHoursTo24,
-  intOrDefault,
-  meridiemByHours,
-  withLeadingZero
+  default2 as default
 };

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

@@ -12,7 +12,7 @@ import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
-var localizedMessages = {
+const localizedMessages = {
   de,
   en,
   es,

package/lib/types/component/PickerFormat/PickerFormat.d.ts

@@ -0,0 +1,17 @@
+import { Component } from '@semcore/core';
+import React from 'react';
+import type { TimePickerFormatProps, TimePickerFormatPropsInternal } from './PickerFormat.type';
+declare class TimePickerFormat extends Component<TimePickerFormatProps, typeof TimePickerFormat.enhance, {}, TimePickerFormatPropsInternal> {
+    static style: {
+        [key: string]: string;
+    };
+    static enhance: readonly [(props: any) => {
+        uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
+    }];
+    state: {
+        changedFormatNotice: string;
+    };
+    handleClick: () => void;
+    render(): React.ReactNode;
+}
+export default TimePickerFormat;

package/lib/types/component/PickerFormat/PickerFormat.type.d.ts

@@ -0,0 +1,16 @@
+import type { BoxProps } from '@semcore/base-components';
+import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
+import type { TimePickerMeridiem } from '../TimePicker/TimePicker.type';
+export type TimePickerFormatProps = BoxProps & {};
+export type TimePickerFormatPropsInternal = {
+    /** @Internal */
+    getI18nText: ReturnType<typeof useI18n>;
+    /** @Internal */
+    size: 'm' | 'l';
+    /** @Internal */
+    disabled: boolean;
+    /** @Internal */
+    meridiem: TimePickerMeridiem;
+    /** @Internal */
+    onClick: (event: React.SyntheticEvent) => void;
+};

package/lib/types/component/PickerInput/PickerInput.d.ts

@@ -0,0 +1,54 @@
+import { Component } from '@semcore/core';
+import React from 'react';
+import type { PickerInputMinMax, PickerInputProps } from './PickerInput.type';
+import type { TimePickerField } from '../TimePicker/TimePicker.type';
+type State = {
+    dirtyValue?: string;
+    visible: boolean;
+};
+declare abstract class AbstractPickerInput extends Component<PickerInputProps, [], {}, {}, State> {
+    static style: {
+        [key: string]: string;
+    };
+    static defaultProps: (_: PickerInputProps) => {
+        placeholder: string;
+        offset: number[];
+    };
+    state: State;
+    inputRef: React.RefObject<unknown>;
+    abstract get field(): TimePickerField;
+    abstract get minMax(): PickerInputMinMax;
+    abstract handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
+    parseValueWithMinMax: (value: string) => string;
+    dispatchOnChange(value: string, event: React.SyntheticEvent): void;
+    submitChanges(event: React.SyntheticEvent): void;
+    handleChange: (value: string, event: React.SyntheticEvent) => void;
+    handleBlur: (event: React.SyntheticEvent) => void;
+    handleSelect: (value: string, event: React.SyntheticEvent) => void;
+    handleVisibleChange: (visible: boolean) => void;
+    render(): React.ReactNode;
+}
+declare class Hours extends AbstractPickerInput {
+    static defaultProps: (props: PickerInputProps) => {
+        ml: number | undefined;
+        placeholder: string;
+        offset: number[];
+    };
+    get field(): TimePickerField;
+    get minMax(): PickerInputMinMax;
+    focusNext(): void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    componentDidUpdate(_: PickerInputProps, prevState: State): void;
+}
+declare class Minutes extends AbstractPickerInput {
+    static defaultProps: (props: PickerInputProps) => {
+        mr: number | undefined;
+        placeholder: string;
+        offset: number[];
+    };
+    get field(): TimePickerField;
+    get minMax(): PickerInputMinMax;
+    focusPrev(): void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export { Hours, Minutes };

package/lib/types/component/PickerInput/PickerInput.type.d.ts

@@ -0,0 +1,13 @@
+import type { SelectProps } from '@semcore/select';
+import type { TimePickerField, TimePickerItemProps } from '../TimePicker/TimePicker.type';
+export type PickerInputProps = SelectProps & TimePickerItemProps & {
+    time: string;
+    size?: 'm' | 'l';
+    is12Hour?: boolean;
+    disabled?: boolean;
+    $onValueChange: (value: string, field: TimePickerField, event: React.SyntheticEvent) => void;
+    minutesInputRef: React.RefObject<HTMLElement>;
+    hoursInputRef: React.RefObject<HTMLElement>;
+    ariaLabel: string;
+};
+export type PickerInputMinMax = [number, number];

package/lib/types/component/TimePicker/TimePicker.d.ts

@@ -0,0 +1,3 @@
+import type { TimePickerComponent } from './TimePicker.type';
+declare const TimePicker: TimePickerComponent;
+export default TimePicker;

package/lib/types/component/TimePicker/TimePicker.type.d.ts

@@ -0,0 +1,50 @@
+import type { Box } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { InputProps, InputValueProps } from '@semcore/input';
+import type { TimePickerFormatProps } from '../PickerFormat/PickerFormat.type';
+export type TimePickerProps = Omit<InputProps, 'size'> & {
+    /** Time in the hh:mm format */
+    value?: string;
+    /** Default value if `value` property is not provided */
+    defaultValue?: 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;
+    /** Specifies the locale for i18n support */
+    locale?: string;
+};
+export type TimePickerSeparatorProps = {
+    /** @Internal */
+    hoursInputRef: React.RefObject<HTMLElement>;
+    /** @Internal */
+    disabled?: boolean;
+};
+export type TimePickerItemProps = InputValueProps & {
+    /** Step for changing of the values in the dropdown list */
+    step?: number;
+};
+export type TimePickerContext = {
+    getHoursProps: PropGetterFn;
+    getFormatProps: PropGetterFn;
+    getMinutesProps: PropGetterFn;
+    getSeparatorProps: PropGetterFn;
+};
+export type TimePickerHandlers = {
+    value: (value: string) => void;
+};
+export type TimePickerMeridiem = 'AM' | 'PM';
+export type TimePickerField = 'hours' | 'minutes';
+export type TimePickerComponent = Intergalactic.Component<'div', TimePickerProps, TimePickerContext, [
+    handlers: TimePickerHandlers
+]> & {
+    Hours: Intergalactic.Component<'div', TimePickerItemProps>;
+    Minutes: Intergalactic.Component<'div', TimePickerItemProps>;
+    Separator: typeof Box;
+    Format: Intergalactic.Component<'div', TimePickerFormatProps>;
+};

package/lib/types/entity/TimePickerEntity.d.ts

@@ -0,0 +1,22 @@
+import type { TimePickerMeridiem } from '../component/TimePicker/TimePicker.type';
+declare class TimePickerEntity {
+    private _hours;
+    private _minutes;
+    private _is12Hour;
+    private _meridiem;
+    constructor(value?: string, // should be in the format 'HH:mm'
+    is12Hour?: boolean);
+    get meridiem(): TimePickerMeridiem;
+    get hours(): string;
+    get minutes(): string;
+    set is12Hour(newIs12Hour: boolean);
+    set hours(newHours: string);
+    set minutes(newMinutes: string);
+    private set meridiem(value);
+    private withLeadingZero;
+    private formatHoursTo12;
+    private formatHoursTo24;
+    toggleMeridiem(): void;
+    toString(): string;
+}
+export default TimePickerEntity;

package/lib/types/index.d.ts

@@ -1,63 +1,2 @@
-import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import type { Box, BoxProps } from '@semcore/flex-box';
-import type { InputProps, InputValueProps } from '@semcore/input';
-import type React from 'react';
-
-/** @deprecated */
-export interface ITimePickerProps extends TimePickerProps, UnknownProperties {}
-export type TimePickerProps = Omit<InputProps, 'size'> & {
-  /** Time in the hh:mm format */
-  value?: string;
-  /** Default value if `value` property is not provided */
-  defaultValue?: 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;
-  /** Specifies the locale for i18n support */
-  locale?: string;
-};
-
-/** @deprecated */
-export interface ITimePickerItemProps extends TimePickerItemProps, UnknownProperties {}
-export type TimePickerItemProps = InputValueProps & {
-  /** Step for changing of the values in the dropdown list */
-  step?: number;
-};
-
-/** @deprecated */
-export interface ITimePickerFormatProps extends TimePickerFormatProps, UnknownProperties {}
-export type TimePickerFormatProps = BoxProps & {};
-
-/** @deprecated */
-export interface ITimePickerContext extends TimePickerContext, UnknownProperties {}
-export type TimePickerContext = {
-  getHoursProps: PropGetterFn;
-  getFormatProps: PropGetterFn;
-  getMinutesProps: PropGetterFn;
-};
-
-/** @deprecated */
-export interface ITimePickerHandlers extends TimePickerHandlers, UnknownProperties {}
-export type TimePickerHandlers = {
-  value: (value: string) => void;
-};
-
-declare const TimePicker: Intergalactic.Component<
-  'div',
-  TimePickerProps,
-  TimePickerContext,
-  [handlers: TimePickerHandlers]
-> & {
-  Hours: Intergalactic.Component<'div', TimePickerItemProps>;
-  Minutes: Intergalactic.Component<'div', TimePickerItemProps>;
-  Separator: typeof Box;
-  Format: Intergalactic.Component<'div', TimePickerFormatProps>;
-};
-
-export default TimePicker;
+export { default } from './component/TimePicker/TimePicker';
+export * from './component/TimePicker/TimePicker.type';