@skbkontur/react-ui 6.0.6 → 6.0.7-eab55.0

package/components/TimePicker/TimeFragmentsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFragmentsView.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeFragmentsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from './helpers/TimePicker.constants.js';\nimport type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';\nimport { getDisplaySegments, getTimeSegments } from './helpers/TimePicker.shared.js';\nimport { getStyles } from './TimeFragmentsView.styles.js';\n\nexport interface TimeFragmentsViewRef {\n  isFragment(el: HTMLElement | EventTarget | null): boolean;\n\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n\n  getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsViewProps {\n  value: string;\n  precision: TimePrecision;\n  size: SizeProp;\n\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, size: SizeProp): string => {\n  switch (size) {\n    case 'large':\n      return styles.separatorLarge();\n    case 'medium':\n      return styles.separatorMedium();\n    case 'small':\n    default:\n      return styles.separatorSmall();\n  }\n};\n\nexport const TimeFragmentsView = forwardRefAndName<TimeFragmentsViewRef, TimeFragmentsViewProps>(\n  'TimeFragmentsView',\n  (props, ref) => {\n    const { value, precision, size, onSelectSegment } = props;\n\n    const theme = useContext(ThemeContext);\n\n    const { cx } = useEmotion();\n\n    const styles = useStyles(getStyles);\n\n    const rootRef = useRef<HTMLSpanElement>(null);\n\n    const rootClassName = cx(styles.root(), styles.selected(theme));\n    const maskClassName = styles.mask(theme);\n    const separatorSizeClassName = getSeparatorSizeClassName(styles, size);\n\n    const getSegment = useCallback(\n      (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n        const rootNode = rootRef.current;\n\n        if (!rootNode || !el) {\n          return null;\n        }\n\n        const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n        const segments = getTimeSegments(precision);\n\n        const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n        return index >= 0 ? (segments[index] ?? null) : null;\n      },\n      [precision],\n    );\n\n    const isFragment = useCallback(\n      (el: HTMLElement | EventTarget | null): boolean => {\n        return getSegment(el) !== null;\n      },\n      [getSegment],\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        isFragment,\n        getSegment,\n        getRootNode: () => rootRef.current,\n      }),\n      [getSegment, isFragment],\n    );\n\n    const segments = getTimeSegments(precision);\n    const displaySegments = getDisplaySegments(value, precision);\n\n    return (\n      <span ref={rootRef} className={rootClassName}>\n        {value\n          ? segments.flatMap((segment, index) => {\n              const segmentValue = displaySegments[index] ?? '';\n\n              const valueMask = Array.from(segmentValue)\n                .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n                .join('');\n\n              const placeholderLength = segmentValue.length - valueMask.length;\n\n              const nodes = [\n                <span\n                  key={segment}\n                  data-fragment=\"\"\n                  className={styles.segment()}\n                  onMouseUp={(event) => onSelectSegment?.(segment, event)}\n                >\n                  {valueMask}\n                  <span className={maskClassName}>{Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}</span>\n                </span>,\n              ];\n\n              if (index < segments.length - 1) {\n                nodes.push(\n                  <span\n                    key={`separator-${index}`}\n                    className={cx(maskClassName, styles.separator(), separatorSizeClassName, {\n                      [styles.separatorFilled()]: !segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n                    })}\n                  >\n                    {TIME_SEPARATOR}\n                  </span>,\n                );\n              }\n\n              return nodes;\n            })\n          : null}\n      </span>\n    );\n  },\n);\n"]}

package/components/TimePicker/TimeFragmentsView.styles.d.ts

@@ -0,0 +1,12 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    selected(t: Theme): string;
+    segment(): string;
+    separator(): string;
+    separatorSmall(): string;
+    separatorMedium(): string;
+    separatorLarge(): string;
+    mask(t: Theme): string;
+    separatorFilled(): string;
+}>;

package/components/TimePicker/TimeFragmentsView.styles.js

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "], ["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "])));
+        },
+        selected: function (t) {
+            var getSelection = function (background, color) {
+                return (background || color) &&
+                    "& ::selection {\n        background: ".concat(background, ";\n        color: ").concat(color, ";\n      }");
+            };
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: text;\n      ", "\n    "], ["\n      cursor: text;\n      ", "\n    "])), getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor));
+        },
+        segment: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "], ["\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "])));
+        },
+        separator: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: inline;\n      position: relative;\n    "], ["\n      display: inline;\n      position: relative;\n    "])));
+        },
+        separatorSmall: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      top: -1px;\n      padding-left: 1px;\n      padding-right: 1px;\n    "], ["\n      top: -1px;\n      padding-left: 1px;\n      padding-right: 1px;\n    "])));
+        },
+        separatorMedium: function () {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      top: -1px;\n      padding-left: 2px;\n      padding-right: 2px;\n    "], ["\n      top: -1px;\n      padding-left: 2px;\n      padding-right: 2px;\n    "])));
+        },
+        separatorLarge: function () {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      top: -2px;\n      padding-left: 2px;\n      padding-right: 2px;\n    "], ["\n      top: -2px;\n      padding-left: 2px;\n      padding-right: 2px;\n    "])));
+        },
+        mask: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.inputPlaceholderColor);
+        },
+        separatorFilled: function () {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: inherit;\n    "], ["\n      color: inherit;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=TimeFragmentsView.styles.js.map

package/components/TimePicker/TimeFragmentsView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFragmentsView.styles.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeFragmentsView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,QAAQ,YAAC,CAAQ;YACf,IAAM,YAAY,GAAG,UAAC,UAAkB,EAAE,KAAa;gBACrD,OAAA,CAAC,UAAU,IAAI,KAAK,CAAC;oBACrB,+CACgB,UAAU,+BACf,KAAK,eACd;YAJF,CAIE,CAAC;YAEL,OAAO,GAAG,4GAAA,+BAEN,EAAwF,QAC3F,KADG,YAAY,CAAC,CAAC,CAAC,iCAAiC,EAAE,CAAC,CAAC,mCAAmC,CAAC,EAC1F;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,8HAAA,2DAGT,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,kJAAA,+EAIT,KAAC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,kJAAA,+EAIT,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,kJAAA,+EAIT,KAAC;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,+FAAA,iBACC,EAAuB,SACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;KACF,CAAC;AAzE8D,CAyE9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    `;\n  },\n\n  selected(t: Theme) {\n    const getSelection = (background: string, color: string) =>\n      (background || color) &&\n      `& ::selection {\n        background: ${background};\n        color: ${color};\n      }`;\n\n    return css`\n      cursor: text;\n      ${getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor)}\n    `;\n  },\n\n  segment() {\n    return css`\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    `;\n  },\n\n  separator() {\n    return css`\n      display: inline;\n      position: relative;\n    `;\n  },\n\n  separatorSmall() {\n    return css`\n      top: -1px;\n      padding-left: 1px;\n      padding-right: 1px;\n    `;\n  },\n\n  separatorMedium() {\n    return css`\n      top: -1px;\n      padding-left: 2px;\n      padding-right: 2px;\n    `;\n  },\n\n  separatorLarge() {\n    return css`\n      top: -2px;\n      padding-left: 2px;\n      padding-right: 2px;\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.inputPlaceholderColor};\n    `;\n  },\n\n  separatorFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n}));\n"]}

package/components/TimePicker/TimeInput.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';
+export interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'rightIcon' | 'inputMode'> {
+    dropdown?: boolean;
+    precision: TimePrecision;
+    value: string;
+    onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;
+}
+export interface TimeInputRef {
+    focus(): void;
+    blur(): void;
+    blink(): void;
+    isFragment(el: HTMLElement | EventTarget | null): boolean;
+    isAllSelected(): boolean;
+    getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
+    selectSegment(segment: TimeSegment): void;
+    selectAll(): void;
+    getNode(): HTMLElement | null;
+}
+export declare const TimeInput: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeInputRef, TimeInputProps> & Record<never, never>;

package/components/TimePicker/TimeInput.js

@@ -0,0 +1,98 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';
+import { InputLikeText } from '../../internal/InputLikeText/index.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getTimePickerInputWidth } from './helpers/TimePicker.layout.js';
+import { getTimeSegmentSelectionNodeRange } from './helpers/TimePicker.selection.js';
+import { TimeClockIcon } from './TimeClockIcon.js';
+import { TimeFragmentsView } from './TimeFragmentsView.js';
+import { getStyles } from './TimePicker.styles.js';
+export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
+    var _a;
+    var _b = props.dropdown, dropdown = _b === void 0 ? false : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, disabled = props.disabled, autoFocus = props.autoFocus, width = props.width, precision = props.precision, value = props.value, onSelectSegment = props.onSelectSegment, rest = __rest(props, ["dropdown", "size", "disabled", "autoFocus", "width", "precision", "value", "onSelectSegment"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var inputLikeTextRef = useRef(null);
+    var fragmentsViewRef = useRef(null);
+    useImperativeHandle(ref, function () { return ({
+        focus: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        blink: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blink(); },
+        getNode: function () { var _a, _b; return (_b = (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
+        isFragment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.isFragment(el)) !== null && _b !== void 0 ? _b : false; },
+        getSegment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(el)) !== null && _b !== void 0 ? _b : null; },
+        selectAll: function () {
+            var _a, _b, _c;
+            var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return;
+            }
+            (_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, 0, rootNode.childNodes.length);
+        },
+        isAllSelected: function () {
+            var _a, _b, _c, _d, _e;
+            var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return false;
+            }
+            var selection = (_d = (_c = rootNode.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.getSelection()) !== null && _d !== void 0 ? _d : null;
+            if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+                return false;
+            }
+            var range = selection.getRangeAt(0);
+            var text = (_e = rootNode.textContent) !== null && _e !== void 0 ? _e : '';
+            return (range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer));
+        },
+        selectSegment: function (segment) {
+            var _a, _b, _c;
+            var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return;
+            }
+            var _d = getTimeSegmentSelectionNodeRange(segment, precision), start = _d[0], end = _d[1];
+            (_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, start, end);
+        },
+    }); }, [precision]);
+    useEffect(function () {
+        if (!autoFocus || disabled) {
+            return;
+        }
+        var timer = setTimeout(function () {
+            var _a;
+            (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+        return function () {
+            clearTimeout(timer);
+        };
+    }, []);
+    return (React.createElement(InputLikeText, __assign({ ref: inputLikeTextRef }, rest, { disabled: disabled, takeContentWidth: true, inputMode: "numeric", size: size, width: width !== null && width !== void 0 ? width : getTimePickerInputWidth(size, precision), value: value, rightIcon: React.createElement("span", { className: cx(styles.rightIcon(), styles.rightIconDefault(theme), (_a = {},
+                _a[styles.rightIconInteractive()] = dropdown && !disabled,
+                _a)) },
+            React.createElement(TimeClockIcon, { size: size })) }),
+        React.createElement(TimeFragmentsView, { ref: fragmentsViewRef, precision: precision, size: size, value: value, onSelectSegment: onSelectSegment })));
+});
+//# sourceMappingURL=TimeInput.js.map

package/components/TimePicker/TimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { InputLikeText } from '../../internal/InputLikeText/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps } from '../Input/index.js';\nimport { getTimePickerInputWidth } from './helpers/TimePicker.layout.js';\nimport { getTimeSegmentSelectionNodeRange } from './helpers/TimePicker.selection.js';\nimport type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from './TimeClockIcon.js';\nimport type { TimeFragmentsViewRef } from './TimeFragmentsView.js';\nimport { TimeFragmentsView } from './TimeFragmentsView.js';\nimport { getStyles } from './TimePicker.styles.js';\n\nexport interface TimeInputProps extends Omit<\n  InputProps,\n  'type' | 'value' | 'onValueChange' | 'rightIcon' | 'inputMode'\n> {\n  dropdown?: boolean;\n  precision: TimePrecision;\n  value: string;\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport interface TimeInputRef {\n  focus(): void;\n\n  blur(): void;\n\n  blink(): void;\n\n  isFragment(el: HTMLElement | EventTarget | null): boolean;\n\n  isAllSelected(): boolean;\n\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n\n  selectSegment(segment: TimeSegment): void;\n\n  selectAll(): void;\n\n  getNode(): HTMLElement | null;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n  const {\n    dropdown = false,\n    size = 'small',\n    disabled,\n    autoFocus,\n    width,\n    precision,\n    value,\n    onSelectSegment,\n    ...rest\n  } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const { cx } = useEmotion();\n\n  const styles = useStyles(getStyles);\n\n  const inputLikeTextRef = useRef<InputLikeText>(null);\n  const fragmentsViewRef = useRef<TimeFragmentsViewRef>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => inputLikeTextRef.current?.focus(),\n      blur: () => inputLikeTextRef.current?.blur(),\n      blink: () => inputLikeTextRef.current?.blink(),\n      getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n      isFragment: (el) => fragmentsViewRef.current?.isFragment(el) ?? false,\n      getSegment: (el) => fragmentsViewRef.current?.getSegment(el) ?? null,\n      selectAll: () => {\n        const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n      },\n\n      isAllSelected: () => {\n        const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return false;\n        }\n\n        const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n          return false;\n        }\n\n        const range = selection.getRangeAt(0);\n        const text = rootNode.textContent ?? '';\n\n        return (\n          range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n        );\n      },\n\n      selectSegment: (segment) => {\n        const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        const [start, end] = getTimeSegmentSelectionNodeRange(segment, precision);\n        inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n      },\n    }),\n    [precision],\n  );\n\n  useEffect(() => {\n    if (!autoFocus || disabled) {\n      return;\n    }\n\n    const timer = setTimeout(() => {\n      inputLikeTextRef.current?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, []);\n\n  return (\n    <InputLikeText\n      ref={inputLikeTextRef}\n      {...rest}\n      disabled={disabled}\n      takeContentWidth\n      inputMode=\"numeric\"\n      size={size}\n      width={width ?? getTimePickerInputWidth(size, precision)}\n      value={value}\n      rightIcon={\n        <span\n          className={cx(styles.rightIcon(), styles.rightIconDefault(theme), {\n            [styles.rightIconInteractive()]: dropdown && !disabled,\n          })}\n        >\n          <TimeClockIcon size={size} />\n        </span>\n      }\n    >\n      <TimeFragmentsView\n        ref={fragmentsViewRef}\n        precision={precision}\n        size={size}\n        value={value}\n        onSelectSegment={onSelectSegment}\n      />\n    </InputLikeText>\n  );\n});\n"]}

package/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { AriaAttributes } from 'react';
+import type { SizeProp } from '../../lib/types/props.js';
+import type { InputProps } from '../Input/index.js';
+import type { TimePrecision, TimeSlot } from './helpers/TimePicker.shared.js';
+type UnsupportedInputProps = 'autofocus' | 'type' | 'defaultValue' | 'value' | 'leftIcon' | 'rightIcon' | 'showClearIcon' | 'inputMode' | 'element' | 'align' | 'suffix' | 'prefix' | 'borderless' | 'selectAllOnFocus' | 'onValueChange' | 'onUnexpectedInput';
+export interface TimePickerProps extends Omit<InputProps, UnsupportedInputProps>, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'> {
+    /** Добавляет выпадающее меню с часовыми слотами в рабочее время @default false */
+    dropdown?: boolean;
+    /** Устанавливает точность времени @default minute */
+    precision?: TimePrecision;
+    /** Определяет массив объектов с кастомными слотами в формате TimeSlot */
+    slots?: TimeSlot[];
+    /** Задает нижнюю границу времени. Слоты за границей становятся disabled */
+    minValue?: string;
+    /** Задает верхнюю границу времени. Слоты за границей становятся disabled */
+    maxValue?: string;
+    /** Значение поля @param value 'hh.mm.[:ss]' */
+    value?: string;
+    /** Событие изменения значения `value` в поле @param value - 'hh.mm.[:ss]' */
+    onValueChange?(value: string): void;
+    /** Устанавливает фокус на поле ввода после окончания загрузки страницы @default false */
+    autoFocus?: boolean;
+    /** Включает нативный системный выбор времени на мобильных устройствах */
+    useMobileNativeTimePicker?: boolean;
+    /** Расположение выпадающего меню */
+    menuPos?: 'top' | 'bottom';
+    /** Выравнивание выпадающего меню */
+    menuAlign?: 'left' | 'right';
+    /** Ширина выпадающего меню. @default Равна ширине поля ввода */
+    menuWidth?: React.CSSProperties['width'];
+    /** Размер поля ввода и выпадающего меню */
+    size?: SizeProp;
+}
+export interface TimePickerRef {
+    /** Устанавливает фокус на поле ввода */
+    focus(): void;
+    /** Снимает фокус с поля ввода */
+    blur(): void;
+    /** Запускает анимацию blink у поля ввода времени */
+    blink(): void;
+    /** Возвращает DOM-узел поля ввода */
+    getNode(): HTMLElement | null;
+    /** Возвращает корневой DOM-узел компонента */
+    getRootNode(): HTMLElement | null;
+}
+export type TimePicker = TimePickerRef;
+export declare const TimePickerDataTids: {
+    readonly root: "TimePicker__root";
+    readonly input: "TimePicker__input";
+    readonly mobileInput: "TimePicker__mobileInput";
+    readonly nativeInput: "TimePicker__nativeInput";
+    readonly popup: "TimePicker__popup";
+    readonly mobilePopup: "TimePicker__mobilePopup";
+    readonly slot: "TimePicker__slot";
+};
+/** Поле с временем помогает вводить время с клавиатуры или выбирать его с помощью мыши */
+export declare const TimePicker: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimePickerRef, TimePickerProps> & Record<never, never>;
+export {};