npm - @skbkontur/react-ui - Versions diffs - 6.1.7-65057.0 → 6.1.7-e032b.0 - Mend

@skbkontur/react-ui 6.1.7-65057.0 → 6.1.7-e032b.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/internal/NativeTimeInput/NativeTimeInput.utils.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import type { TimeFormat } from '../../components/TimePicker/index.js';
 import type { Nullable } from '../../typings/utility-types.js';
+/** Приводит время компонента к форме нативного инпута. Пустое значение отдается как отсутствующее. */
 export declare const getTimeForNative: (componentTime: Nullable<string>, format: TimeFormat) => string | undefined;
+/** Приводит время нативного инпута к форме компонента. Пустое значение отдается пустой строкой. */
 export declare const getTimeForComponent: (nativeTime: Nullable<string>, format: TimeFormat) => string;
 export declare const getDefaultMinTime: (format: TimeFormat) => string;
 export declare const getDefaultMaxTime: (format: TimeFormat) => string;

package/internal/NativeTimeInput/NativeTimeInput.utils.js CHANGED Viewed

@@ -6,17 +6,13 @@ var normalizeNativeTime = function (value, format) {
     var normalizedTime = "".concat(padTimePart(hours), ":").concat(padTimePart(minutes), ":").concat(padTimePart(seconds));
     return format === 'HH:mm' ? normalizedTime.slice(0, 5) : normalizedTime;
 };
+/** Приводит время компонента к форме нативного инпута. Пустое значение отдается как отсутствующее. */
 export var getTimeForNative = function (componentTime, format) {
-    if (!componentTime) {
-        return undefined;
-    }
-    return normalizeNativeTime(componentTime, format);
+    return componentTime ? normalizeNativeTime(componentTime, format) : undefined;
 };
+/** Приводит время нативного инпута к форме компонента. Пустое значение отдается пустой строкой. */
 export var getTimeForComponent = function (nativeTime, format) {
-    if (!nativeTime) {
-        return '';
-    }
-    return normalizeNativeTime(nativeTime, format);
+    return nativeTime ? normalizeNativeTime(nativeTime, format) : '';
 };
 export var getDefaultMinTime = function (format) {
     return format === 'HH:mm' ? DEFAULT_NATIVE_MIN_TIME.slice(0, 5) : DEFAULT_NATIVE_MIN_TIME;

package/internal/NativeTimeInput/NativeTimeInput.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeTimeInput.utils.js","sourceRoot":"","sources":["NativeTimeInput.utils.ts"],"names":[],"mappings":"AAGA,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAC3C,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAE3C,IAAM,WAAW,GAAG,UAAC,KAAyB,IAAa,OAAA,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAhC,CAAgC,CAAC;AAE5F,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,MAAkB;IACtD,IAAA,KAA4B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAA3C,KAAK,QAAA,EAAE,OAAO,QAAA,EAAE,OAAO,QAAoB,CAAC;IAEnD,IAAM,cAAc,GAAG,UAAG,WAAW,CAAC,KAAK,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,CAAE,CAAC;IAE/F,OAAO,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;AAC1E,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,aAA+B,EAAE,MAAkB;IAClF,~~IAAI~~,~~CAAC,~~aAAa,~~EAAE,~~CAAC~~;QACnB~~,~~OAAO,SAAS,~~CAAC~~;IACnB~~,CAAC~~;IAED~~,~~OAAO,~~mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC~~;AACpD~~,CAAC,CAAC;~~AAEF~~,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,UAA4B,EAAE,MAAkB;IAClF,~~IAAI~~,~~CAAC,~~UAAU,~~EAAE,~~CAAC~~;QAChB~~,~~OAAO,EAAE,~~CAAC~~;IACZ~~,CAAC~~;IAED~~,~~OAAO,~~mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC~~;AACjD~~,CAAC,CAAC;~~AAEF~~,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB,IAAa,OAAA,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAA7B,CAA6B,CAAC","sourcesContent":["import type { TimeFormat } from '../../components/TimePicker/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\n\nconst DEFAULT_NATIVE_MIN_TIME = '00:00:00';\nconst DEFAULT_NATIVE_MAX_TIME = '23:59:59';\n\nconst padTimePart = (value: string \| undefined): string => (value ?? '00').padStart(2, '0');\n\nconst normalizeNativeTime = (value: string, format: TimeFormat): string => {\n const [hours, minutes, seconds] = value.split(':');\n\n const normalizedTime = `${padTimePart(hours)}:${padTimePart(minutes)}:${padTimePart(seconds)}`;\n\n return format === 'HH:mm' ? normalizedTime.slice(0, 5) : normalizedTime;\n};\n\nexport const getTimeForNative = (componentTime: Nullable<string>, format: TimeFormat): string \| undefined ~~=> {\~~n if (!componentTime) ~~{\n return~~ undefined;\n }\n~~\n return~~ ~~normalizeNativeTime(componentTime,~~ ~~format);\n};\n\~~nexport const getTimeForComponent = (nativeTime: Nullable<string>, format: TimeFormat): string ~~=> {\~~n ~~if (!~~nativeTime) ~~{\n return~~ ~~'';\n }\n\n return~~ normalizeNativeTime(nativeTime, format);\n~~};\n~~\nexport const getDefaultMinTime = (format: TimeFormat): string =>\n format === 'HH:mm' ? DEFAULT_NATIVE_MIN_TIME.slice(0, 5) : DEFAULT_NATIVE_MIN_TIME;\n\nexport const getDefaultMaxTime = (format: TimeFormat): string =>\n format === 'HH:mm' ? DEFAULT_NATIVE_MAX_TIME.slice(0, 5) : DEFAULT_NATIVE_MAX_TIME;\n\nexport const getNativeTimeStep = (format: TimeFormat): number => (format === 'HH:mm' ? 60 : 1);\n"]}
1	+ {"version":3,"file":"NativeTimeInput.utils.js","sourceRoot":"","sources":["NativeTimeInput.utils.ts"],"names":[],"mappings":"AAGA,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAC3C,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAE3C,IAAM,WAAW,GAAG,UAAC,KAAyB,IAAa,OAAA,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAhC,CAAgC,CAAC;AAE5F,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,MAAkB;IACtD,IAAA,KAA4B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAA3C,KAAK,QAAA,EAAE,OAAO,QAAA,EAAE,OAAO,QAAoB,CAAC;IAEnD,IAAM,cAAc,GAAG,UAAG,WAAW,CAAC,KAAK,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,CAAE,CAAC;IAE/F,OAAO,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;AAC1E,CAAC,CAAC;AAEF,sGAAsG;AACtG,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,aAA+B,EAAE,MAAkB;IAClF,OAAA,aAAa,CAAC,CAAC,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;AAAtE,CAAsE,CAAC;AAEzE,mGAAmG;AACnG,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,UAA4B,EAAE,MAAkB;IAClF,OAAA,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;AAAzD,CAAyD,CAAC;AAE5D,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB,IAAa,OAAA,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAA7B,CAA6B,CAAC","sourcesContent":["import type { TimeFormat } from '../../components/TimePicker/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\n\nconst DEFAULT_NATIVE_MIN_TIME = '00:00:00';\nconst DEFAULT_NATIVE_MAX_TIME = '23:59:59';\n\nconst padTimePart = (value: string \| undefined): string => (value ?? '00').padStart(2, '0');\n\nconst normalizeNativeTime = (value: string, format: TimeFormat): string => {\n const [hours, minutes, seconds] = value.split(':');\n\n const normalizedTime = `${padTimePart(hours)}:${padTimePart(minutes)}:${padTimePart(seconds)}`;\n\n return format === 'HH:mm' ? normalizedTime.slice(0, 5) : normalizedTime;\n};\n\n/** Приводит время компонента к форме нативного инпута. Пустое значение отдается как отсутствующее. /\nexport const getTimeForNative = (componentTime: Nullable<string>, format: TimeFormat): string \| undefined =>\n componentTime ? normalizeNativeTime(componentTime, format) : undefined;\n\n/* Приводит время нативного инпута к форме компонента. Пустое значение отдается пустой строкой. */\nexport const getTimeForComponent = (nativeTime: Nullable<string>, format: TimeFormat): string =>\n nativeTime ? normalizeNativeTime(nativeTime, format) : '';\n\nexport const getDefaultMinTime = (format: TimeFormat): string =>\n format === 'HH:mm' ? DEFAULT_NATIVE_MIN_TIME.slice(0, 5) : DEFAULT_NATIVE_MIN_TIME;\n\nexport const getDefaultMaxTime = (format: TimeFormat): string =>\n format === 'HH:mm' ? DEFAULT_NATIVE_MAX_TIME.slice(0, 5) : DEFAULT_NATIVE_MAX_TIME;\n\nexport const getNativeTimeStep = (format: TimeFormat): number => (format === 'HH:mm' ? 60 : 1);\n"]}

package/internal/TimeInput/TimeFragments.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import React from 'react';
 import type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';
 import type { SizeProp } from '../../lib/types/props.js';
 export interface TimeFragmentsRef {
-    isFragment(el: HTMLElement | EventTarget | null): boolean;
     getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
     getRootNode(): HTMLSpanElement | null;
 }

package/internal/TimeInput/TimeFragments.js CHANGED Viewed

@@ -5,6 +5,28 @@ import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
 import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { getStyles } from './TimeFragments.styles.js';
+var getEmptyPlaceholderClassName = function (styles, theme, size, format) {
+    if (format === 'HH:mm:ss') {
+        switch (size) {
+            case 'large':
+                return styles.emptyPlaceholderWithSecondsLarge(theme);
+            case 'medium':
+                return styles.emptyPlaceholderWithSecondsMedium(theme);
+            case 'small':
+            default:
+                return styles.emptyPlaceholderWithSecondsSmall(theme);
+        }
+    }
+    switch (size) {
+        case 'large':
+            return styles.emptyPlaceholderLarge(theme);
+        case 'medium':
+            return styles.emptyPlaceholderMedium(theme);
+        case 'small':
+        default:
+            return styles.emptyPlaceholderSmall(theme);
+    }
+};
 var getSeparatorSizeClassName = function (styles, theme, size) {
     switch (size) {
         case 'large':
@@ -17,12 +39,15 @@ var getSeparatorSizeClassName = function (styles, theme, size) {
     }
 };
 export var TimeFragments = forwardRefAndName('TimeFragments', function (props, ref) {
+    var _a;
     var value = props.value, format = props.format, size = props.size, onSelectSegment = props.onSelectSegment;
     var theme = useContext(ThemeContext);
     var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var rootRef = useRef(null);
-    var rootClassName = cx(styles.root(), styles.selected(theme));
+    var rootClassName = cx(styles.root(), styles.selected(theme), (_a = {},
+        _a[getEmptyPlaceholderClassName(styles, theme, size, format)] = !value,
+        _a));
     var maskClassName = styles.mask(theme);
     var separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);
     var getSegment = useCallback(function (el) {
@@ -36,14 +61,10 @@ export var TimeFragments = forwardRefAndName('TimeFragments', function (props, r
         var index = fragments.findIndex(function (fragment) { return fragment === el || fragment.contains(el); });
         return index >= 0 ? ((_a = segments[index]) !== null && _a !== void 0 ? _a : null) : null;
     }, [format]);
-    var isFragment = useCallback(function (el) {
-        return getSegment(el) !== null;
-    }, [getSegment]);
     useImperativeHandle(ref, function () { return ({
-        isFragment: isFragment,
         getSegment: getSegment,
         getRootNode: function () { return rootRef.current; },
-    }); }, [getSegment, isFragment]);
+    }); }, [getSegment]);
     var segments = getTimeSegments(format);
     var displaySegments = getDisplaySegments(value, format);
     return (React.createElement("span", { ref: rootRef, className: rootClassName }, value

package/internal/TimeInput/TimeFragments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeFragments.js","sourceRoot":"","sources":["TimeFragments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,6DAA6D,CAAC;AACpH,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,0DAA0D,CAAC;AAE/G,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;~~AAgBtD~~,IAAM,yBAAyB,GAAG,UAAC,MAAoC,EAAE,KAAY,EAAE,IAAc;IACnG,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QACtC,KAAK,QAAQ;YACX,OAAO,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,KAAK,OAAO,CAAC;QACb;YACE,OAAO,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,iBAAiB,CAAuC,eAAe,EAAE,UAAC,KAAK,EAAE,GAAG;IACvG,IAAA,KAAK,GAAoC,KAAK,MAAzC,EAAE,MAAM,GAA4B,KAAK,OAAjC,EAAE,IAAI,GAAsB,KAAK,KAA3B,EAAE,eAAe,GAAK,KAAK,gBAAV,CAAW;IAEvD,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAE5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,IAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAE9C,IAAM,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;~~IAChE~~,IAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,IAAM,sBAAsB,GAAG,yBAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IAE9E,IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,EAAoC;;QACnC,IAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC;QAEjC,IAAI,CAAC,QAAQ,IAAI,CAAC,EAAE,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAM,SAAS,GAAsB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAC9F,IAAM,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QAEzC,IAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,UAAC,QAAQ,IAAK,OAAA,QAAQ,KAAK,EAAE,IAAI,QAAQ,CAAC,QAAQ,CAAC,EAAqB,CAAC,EAA3D,CAA2D,CAAC,CAAC;QAE7G,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,QAAQ,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACvD,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,~~IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,EAAoC;QACnC,OAAO,UAAU,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,~~mBAAmB,CACjB,GAAG,EACH,cAAM,OAAA,CAAC;QACL,UAAU,YAAA;QACV,~~UAAU,YAAA;QACV,~~WAAW,EAAE,cAAM,OAAA,OAAO,CAAC,OAAO,EAAf,CAAe;KACnC,CAAC,~~EAJI~~,~~CAIJ~~,EACF,CAAC,UAAU,~~EAAE,UAAU,~~CAAC,~~CACzB~~,CAAC;IAEF,IAAM,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IACzC,IAAM,eAAe,GAAG,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAE1D,OAAO,CACL,8BAAM,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,IACzC,KAAK;QACJ,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAC,OAAO,EAAE,KAAK;;;YAC9B,IAAM,YAAY,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC;YAElD,IAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;iBACvC,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,KAAK,qBAAqB,EAA9B,CAA8B,CAAC;iBAChD,IAAI,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;YAEjE,IAAM,KAAK,GAAG;gBACZ,8BACE,GAAG,EAAE,OAAO,mBACG,EAAE,EACjB,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,EAC3B,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,OAAO,EAAE,KAAK,CAAC,EAAjC,CAAiC;oBAEtD,SAAS;oBACV,8BAAM,SAAS,EAAE,aAAa,IAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAQ,CACjG;aACR,CAAC;YAEF,IAAI,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAChC,KAAK,CAAC,IAAI,CACR,8BACE,GAAG,EAAE,oBAAa,KAAK,CAAE,EACzB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,EAAE,sBAAsB;wBACrE,GAAC,MAAM,CAAC,eAAe,EAAE,IAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,qBAAqB,CAAC;4BACzE,IAED,cAAc,CACV,CACR,CAAC;YACJ,CAAC;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QACJ,CAAC,CAAC,IAAI,CACH,CACR,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './TimeFragments.styles.js';\n\nexport interface TimeFragmentsRef {\n ~~isFragment(el: HTMLElement \| EventTarget \| null): boolean;\n~~ getSegment(el: HTMLElement \| EventTarget \| null): TimeSegment \| null;\n getRootNode(): HTMLSpanElement \| null;\n}\n\nexport interface TimeFragmentsProps {\n value: string;\n format: TimeFormat;\n size: SizeProp;\n\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, theme: Theme, size: SizeProp): string => {\n switch (size) {\n case 'large':\n return styles.separatorLarge(theme);\n case 'medium':\n return styles.separatorMedium(theme);\n case 'small':\n default:\n return styles.separatorSmall(theme);\n }\n};\n\nexport const TimeFragments = forwardRefAndName<TimeFragmentsRef, TimeFragmentsProps>('TimeFragments', (props, ref) => {\n const { value, format, 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, theme, 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(format);\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 [format],\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(format);\n const displaySegments = getDisplaySegments(value, format);\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"]}
1	+ {"version":3,"file":"TimeFragments.js","sourceRoot":"","sources":["TimeFragments.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './TimeFragments.styles.js';\n\nexport interface TimeFragmentsRef {\n getSegment(el: HTMLElement \| EventTarget \| null): TimeSegment \| null;\n getRootNode(): HTMLSpanElement \| null;\n}\n\nexport interface TimeFragmentsProps {\n value: string;\n format: TimeFormat;\n size: SizeProp;\n\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getEmptyPlaceholderClassName = (\n styles: ReturnType<typeof getStyles>,\n theme: Theme,\n size: SizeProp,\n format: TimeFormat,\n): string => {\n if (format === 'HH:mm:ss') {\n switch (size) {\n case 'large':\n return styles.emptyPlaceholderWithSecondsLarge(theme);\n case 'medium':\n return styles.emptyPlaceholderWithSecondsMedium(theme);\n case 'small':\n default:\n return styles.emptyPlaceholderWithSecondsSmall(theme);\n }\n }\n\n switch (size) {\n case 'large':\n return styles.emptyPlaceholderLarge(theme);\n case 'medium':\n return styles.emptyPlaceholderMedium(theme);\n case 'small':\n default:\n return styles.emptyPlaceholderSmall(theme);\n }\n};\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, theme: Theme, size: SizeProp): string => {\n switch (size) {\n case 'large':\n return styles.separatorLarge(theme);\n case 'medium':\n return styles.separatorMedium(theme);\n case 'small':\n default:\n return styles.separatorSmall(theme);\n }\n};\n\nexport const TimeFragments = forwardRefAndName<TimeFragmentsRef, TimeFragmentsProps>('TimeFragments', (props, ref) => {\n const { value, format, 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 [getEmptyPlaceholderClassName(styles, theme, size, format)]: !value,\n });\n const maskClassName = styles.mask(theme);\n const separatorSizeClassName = getSeparatorSizeClassName(styles, theme, 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(format);\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 [format],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n getSegment,\n getRootNode: () => rootRef.current,\n }),\n [getSegment],\n );\n\n const segments = getTimeSegments(format);\n const displaySegments = getDisplaySegments(value, format);\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"]}

package/internal/TimeInput/TimeFragments.styles.d.ts CHANGED Viewed

@@ -1,6 +1,20 @@
 import type { Theme } from '../../lib/theming/Theme.js';
 export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(): string;
+    /**
+     * Резервируют место под время, когда значения нет: без этого поле с suffix
+     * сужается на ширину времени, а при вводе снова расширяется.
+     * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
+     * но не попадает в текст поля и не читается скринридером.
+     * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
+     * по два на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
+     */
+    emptyPlaceholderSmall(t: Theme): string;
+    emptyPlaceholderMedium(t: Theme): string;
+    emptyPlaceholderLarge(t: Theme): string;
+    emptyPlaceholderWithSecondsSmall(t: Theme): string;
+    emptyPlaceholderWithSecondsMedium(t: Theme): string;
+    emptyPlaceholderWithSecondsLarge(t: Theme): string;
     selected(t: Theme): string;
     mask(t: Theme): string;
     segment(): string;

package/internal/TimeInput/TimeFragments.styles.js CHANGED Viewed

@@ -2,6 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { getEmptyDisplayValue } from '../../components/TimePicker/helpers/TimePicker.value.js';
 import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
 export var getStyles = memoizeGetStyles(function (_a) {
     var css = _a.css;
@@ -9,35 +10,61 @@ export var getStyles = memoizeGetStyles(function (_a) {
         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    "])));
         },
+        /**
+         * Резервируют место под время, когда значения нет: без этого поле с suffix
+         * сужается на ширину времени, а при вводе снова расширяется.
+         * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
+         * но не попадает в текст поля и не читается скринридером.
+         * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
+         * по два на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
+         */
+        emptyPlaceholderSmall: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXSmall);
+        },
+        emptyPlaceholderMedium: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXMedium);
+        },
+        emptyPlaceholderLarge: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 2);\n      }\n    "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXLarge);
+        },
+        emptyPlaceholderWithSecondsSmall: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 4);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 4);\n      }\n    "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXSmall);
+        },
+        emptyPlaceholderWithSecondsMedium: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 4);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 4);\n      }\n    "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXMedium);
+        },
+        emptyPlaceholderWithSecondsLarge: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 4);\n      }\n    "], ["\n      &::before {\n        content: '", "';\n        visibility: hidden;\n        padding-right: calc(", " * 4);\n      }\n    "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXLarge);
+        },
         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.timePickerSelectedBgColor, t.timePickerSelectedTextColor));
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      cursor: text;\n      ", "\n    "], ["\n      cursor: text;\n      ", "\n    "])), getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor));
         },
         mask: function (t) {
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.timePickerMaskColor);
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.timePickerMaskColor);
         },
         segment: function () {
-            return css(templateObject_4 || (templateObject_4 = __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    "])));
+            return css(templateObject_10 || (templateObject_10 = __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_5 || (templateObject_5 = __makeTemplateObject(["\n      display: inline;\n      position: relative;\n    "], ["\n      display: inline;\n      position: relative;\n    "])));
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: inline;\n      position: relative;\n    "], ["\n      display: inline;\n      position: relative;\n    "])));
         },
         separatorSmall: function (t) {
-            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopSmall, t.timePickerSeparatorPaddingXSmall, t.timePickerSeparatorPaddingXSmall);
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopSmall, t.timePickerSeparatorPaddingXSmall, t.timePickerSeparatorPaddingXSmall);
         },
         separatorMedium: function (t) {
-            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopMedium, t.timePickerSeparatorPaddingXMedium, t.timePickerSeparatorPaddingXMedium);
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopMedium, t.timePickerSeparatorPaddingXMedium, t.timePickerSeparatorPaddingXMedium);
         },
         separatorLarge: function (t) {
-            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopLarge, t.timePickerSeparatorPaddingXLarge, t.timePickerSeparatorPaddingXLarge);
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.timePickerSeparatorOffsetTopLarge, t.timePickerSeparatorPaddingXLarge, t.timePickerSeparatorPaddingXLarge);
         },
         separatorFilled: function () {
-            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: inherit;\n    "], ["\n      color: inherit;\n    "])));
+            return css(templateObject_15 || (templateObject_15 = __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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 //# sourceMappingURL=TimeFragments.styles.js.map

package/internal/TimeInput/TimeFragments.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeFragments.styles.js","sourceRoot":"","sources":["TimeFragments.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,EAAwE,QAC3E,KADG,YAAY,CAAC,CAAC,CAAC,yBAAyB,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAC1E;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,+FAAA,iBACC,EAAqB,SAC/B,KADU,CAAC,CAAC,mBAAmB,EAC9B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,~~uKAAA~~,oGAIT,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,~~8HAAA~~,2DAGT,KAAC;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,~~oJAAA~~,eACD,EAAmC,yBAC1B,EAAkC,0BACjC,EAAkC,SACpD,KAHQ,CAAC,CAAC,iCAAiC,EAC1B,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,EACnD;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,~~oJAAA~~,eACD,EAAoC,yBAC3B,EAAmC,0BAClC,EAAmC,SACrD,KAHQ,CAAC,CAAC,kCAAkC,EAC3B,CAAC,CAAC,iCAAiC,EAClC,CAAC,CAAC,iCAAiC,EACpD;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,~~oJAAA~~,eACD,EAAmC,yBAC1B,EAAkC,0BACjC,EAAkC,SACpD,KAHQ,CAAC,CAAC,iCAAiC,EAC1B,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,EACnD;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.timePickerSelectedBgColor, t.timePickerSelectedTextColor)}\n `;\n },\n\n mask(t: Theme) {\n return css`\n color: ${t.timePickerMaskColor};\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(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopSmall};\n padding-left: ${t.timePickerSeparatorPaddingXSmall};\n padding-right: ${t.timePickerSeparatorPaddingXSmall};\n `;\n },\n\n separatorMedium(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopMedium};\n padding-left: ${t.timePickerSeparatorPaddingXMedium};\n padding-right: ${t.timePickerSeparatorPaddingXMedium};\n `;\n },\n\n separatorLarge(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopLarge};\n padding-left: ${t.timePickerSeparatorPaddingXLarge};\n padding-right: ${t.timePickerSeparatorPaddingXLarge};\n `;\n },\n\n separatorFilled() {\n return css`\n color: inherit;\n `;\n },\n}));\n"]}
1	+ {"version":3,"file":"TimeFragments.styles.js","sourceRoot":"","sources":["TimeFragments.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { getEmptyDisplayValue } from '../../components/TimePicker/helpers/TimePicker.value.js';\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 /*\n Резервируют место под время, когда значения нет: без этого поле с suffix\n * сужается на ширину времени, а при вводе снова расширяется.\n * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,\n * но не попадает в текст поля и не читается скринридером.\n * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:\n * по два на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.\n /\n emptyPlaceholderSmall(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXSmall} 2);\n }\n `;\n },\n\n emptyPlaceholderMedium(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXMedium} * 2);\n }\n `;\n },\n\n emptyPlaceholderLarge(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXLarge} * 2);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsSmall(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXSmall} * 4);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsMedium(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXMedium} * 4);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsLarge(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXLarge} * 4);\n }\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.timePickerSelectedBgColor, t.timePickerSelectedTextColor)}\n `;\n },\n\n mask(t: Theme) {\n return css`\n color: ${t.timePickerMaskColor};\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(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopSmall};\n padding-left: ${t.timePickerSeparatorPaddingXSmall};\n padding-right: ${t.timePickerSeparatorPaddingXSmall};\n `;\n },\n\n separatorMedium(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopMedium};\n padding-left: ${t.timePickerSeparatorPaddingXMedium};\n padding-right: ${t.timePickerSeparatorPaddingXMedium};\n `;\n },\n\n separatorLarge(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopLarge};\n padding-left: ${t.timePickerSeparatorPaddingXLarge};\n padding-right: ${t.timePickerSeparatorPaddingXLarge};\n `;\n },\n\n separatorFilled() {\n return css`\n color: inherit;\n `;\n },\n}));\n"]}

package/internal/TimeInput/TimeInput.d.ts CHANGED Viewed

@@ -5,7 +5,6 @@ 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;

package/internal/TimeInput/TimeInput.js CHANGED Viewed

@@ -43,7 +43,6 @@ export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
         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 = fragmentsRef.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 = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(el)) !== null && _b !== void 0 ? _b : null; },
         selectAll: function () {
             var _a, _b, _c;

package/internal/TimeInput/TimeInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,0DAA0D,CAAC;AAClE,OAAO,EACL,eAAe,GAGhB,MAAM,0DAA0D,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;~~AAsBlD~~,MAAM,CAAC,IAAM,SAAS,GAAG,iBAAiB,CAA+B,WAAW,EAAE,UAAC,KAAK,EAAE,GAAG;;IAE7F,IAAA,KAaE,KAAK,YAbY,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,KAYE,KAAK,KAZO,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,QAAQ,GAWN,KAAK,SAXC,EACR,SAAS,GAUP,KAAK,UAVE,EACT,MAAM,GASJ,KAAK,OATD,EACN,KAAK,GAQH,KAAK,MARF,EACL,KAAK,GAOH,KAAK,MAPF,EACL,OAAO,GAML,KAAK,QANA,EACP,SAAS,GAKP,KAAK,UALE,EACT,MAAM,GAIJ,KAAK,OAJD,EACN,KAAK,GAGH,KAAK,MAHF,EACL,eAAe,GAEb,KAAK,gBAFQ,EACZ,IAAI,UACL,KAAK,EAdH,0IAcL,CADQ,CACC;IAEV,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAE5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,IAAM,gBAAgB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACrD,IAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,mBAAmB,CACjB,GAAG,EACH,cAAM,OAAA,CAAC;QACL,KAAK,EAAE,sBAAM,OAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;QAC9C,IAAI,EAAE,sBAAM,OAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA,EAAA;QAC5C,KAAK,EAAE,sBAAM,OAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;QAC9C,OAAO,EAAE,0BAAM,OAAA,MAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,OAAO,EAAE,mCAAI,IAAI,CAAA,EAAA;QAC1D,UAAU,EAAE,UAAC,EAAE,gBAAK,OAAA,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,UAAU,CAAC,EAAE,CAAC,mCAAI,~~KAAK,CAAA,EAAA;QACjE,UAAU,EAAE,UAAC,EAAE,gBAAK,OAAA,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,UAAU,CAAC,EAAE,CAAC,mCAAI,~~IAAI,CAAA,EAAA;QAChE,SAAS,EAAE;;YACT,IAAM,QAAQ,GAAG,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,WAAW,EAAE,mCAAI,IAAI,CAAC;YAE7D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO;YACT,CAAC;YAED,MAAA,gBAAgB,CAAC,OAAO,0CAAE,eAAe,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACrF,CAAC;QAED,aAAa,EAAE;;YACb,IAAM,QAAQ,GAAG,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,WAAW,EAAE,mCAAI,IAAI,CAAC;YAE7D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO,KAAK,CAAC;YACf,CAAC;YAED,IAAM,SAAS,GAAG,MAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,WAAW,0CAAE,YAAY,EAAE,mCAAI,IAAI,CAAC;YAE7E,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,CAAC,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC;gBACtE,OAAO,KAAK,CAAC;YACf,CAAC;YAED,IAAM,KAAK,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACtC,IAAM,IAAI,GAAG,MAAA,QAAQ,CAAC,WAAW,mCAAI,EAAE,CAAC;YAExC,OAAO,CACL,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAC9G,CAAC;QACJ,CAAC;QAED,aAAa,EAAE,UAAC,OAAO;;YACrB,IAAM,QAAQ,GAAG,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,WAAW,EAAE,mCAAI,IAAI,CAAC;YAE7D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO;YACT,CAAC;YAED,IAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC9D,IAAM,KAAK,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;YACtD,IAAM,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC;YAEtB,MAAA,gBAAgB,CAAC,OAAO,0CAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QAClE,CAAC;KACF,CAAC,~~EAnDI~~,~~CAmDJ~~,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAM,KAAK,GAAG,UAAU,CAAC;;YACvB,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QACpC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO;YACL,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,iBAAiB,GACrB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,8BACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAC9D,GAAC,MAAM,CAAC,oBAAoB,EAAE,IAAG,WAAW,IAAI,CAAC,QAAQ;gBACzD;QAEF,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CACxB,CACR,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IACJ,IAAM,gBAAgB,GAAG,yBAAyB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChE,IAAM,aAAa,GAAG,0BAA0B,CAAC,IAAI,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,EAAE,KAAK,CAAC,CAAC;IAElG,OAAO,CACL,oBAAC,aAAa,aACZ,GAAG,EAAE,gBAAgB,IACjB,IAAI,IACR,gBAAgB,QAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,MAAM,EACtB,MAAM,EAAE,MAAM,IAAI,8BAAM,KAAK,EAAE,EAAE,UAAU,EAAE,gBAAgB,EAAE,IAAG,MAAM,CAAQ,EAChF,KAAK,iCAAO,KAAK,KAAE,QAAQ,EAAE,aAAa,KAAK,OAAO,GACtD,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,KAAK;QAEZ,oBAAC,aAAa,IAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,GAAI,CAClG,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport type { InputProps } from '../../components/Input/index.js';\nimport {\n getTimePickerInputMinWidth,\n getTimePickerSuffixMargin,\n} from '../../components/TimePicker/helpers/TimePicker.layout.js';\nimport {\n getTimeSegments,\n type TimeFormat,\n type TimeSegment,\n} from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { InputLikeText } from '../InputLikeText/index.js';\nimport type { TimeFragmentsRef } from './TimeFragments.js';\nimport { TimeFragments } from './TimeFragments.js';\nimport { getStyles } from './TimeInput.styles.js';\n\nexport interface TimeInputRef {\n focus(): void;\n blur(): void;\n blink(): void;\n ~~isFragment(el: HTMLElement \| EventTarget \| null): boolean;\n~~ isAllSelected(): boolean;\n getSegment(el: HTMLElement \| EventTarget \| null): TimeSegment \| null;\n selectSegment(segment: TimeSegment): void;\n selectAll(): void;\n getNode(): HTMLElement \| null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' \| 'value' \| 'onValueChange' \| 'inputMode'> {\n hasDropdown?: boolean;\n format: TimeFormat;\n value: string;\n 'aria-placeholder'?: string;\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n const {\n hasDropdown = false,\n size = 'small',\n disabled,\n autoFocus,\n suffix,\n style,\n width,\n corners,\n rightIcon,\n format,\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 fragmentsRef = useRef<TimeFragmentsRef>(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) => fragmentsRef.current?.isFragment(el) ?? false,\n~~ getSegment: (el) => fragmentsRef.current?.getSegment(el) ?? null,\n selectAll: () => {\n const rootNode = fragmentsRef.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 = fragmentsRef.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 = fragmentsRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n const segmentIndex = getTimeSegments(format).indexOf(segment);\n const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n const end = start + 1;\n\n inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n },\n }),\n [format],\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 const resolvedRightIcon =\n rightIcon === undefined ? (\n <span\n className={cx(styles.rightIcon(), styles.rightIconDefault(theme), {\n [styles.rightIconInteractive()]: hasDropdown && !disabled,\n })}\n >\n <TimeClockIcon size={size} />\n </span>\n ) : (\n rightIcon\n );\n const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n return (\n <InputLikeText\n ref={inputLikeTextRef}\n {...rest}\n takeContentWidth\n disabled={disabled}\n size={size}\n inputMode={'numeric'}\n width={width ?? 'auto'}\n suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n style={{ ...style, minWidth: inputMinWidth, ...corners }}\n rightIcon={resolvedRightIcon}\n value={value}\n >\n <TimeFragments ref={fragmentsRef} format={format} size={size} value={value} onSelectSegment={onSelectSegment} />\n </InputLikeText>\n );\n});\n"]}
1	+ {"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport type { InputProps } from '../../components/Input/index.js';\nimport {\n getTimePickerInputMinWidth,\n getTimePickerSuffixMargin,\n} from '../../components/TimePicker/helpers/TimePicker.layout.js';\nimport {\n getTimeSegments,\n type TimeFormat,\n type TimeSegment,\n} from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { InputLikeText } from '../InputLikeText/index.js';\nimport type { TimeFragmentsRef } from './TimeFragments.js';\nimport { TimeFragments } from './TimeFragments.js';\nimport { getStyles } from './TimeInput.styles.js';\n\nexport interface TimeInputRef {\n focus(): void;\n blur(): void;\n blink(): void;\n isAllSelected(): boolean;\n getSegment(el: HTMLElement \| EventTarget \| null): TimeSegment \| null;\n selectSegment(segment: TimeSegment): void;\n selectAll(): void;\n getNode(): HTMLElement \| null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' \| 'value' \| 'onValueChange' \| 'inputMode'> {\n hasDropdown?: boolean;\n format: TimeFormat;\n value: string;\n 'aria-placeholder'?: string;\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n const {\n hasDropdown = false,\n size = 'small',\n disabled,\n autoFocus,\n suffix,\n style,\n width,\n corners,\n rightIcon,\n format,\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 fragmentsRef = useRef<TimeFragmentsRef>(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 getSegment: (el) => fragmentsRef.current?.getSegment(el) ?? null,\n selectAll: () => {\n const rootNode = fragmentsRef.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 = fragmentsRef.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 = fragmentsRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n const segmentIndex = getTimeSegments(format).indexOf(segment);\n const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n const end = start + 1;\n\n inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n },\n }),\n [format],\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 const resolvedRightIcon =\n rightIcon === undefined ? (\n <span\n className={cx(styles.rightIcon(), styles.rightIconDefault(theme), {\n [styles.rightIconInteractive()]: hasDropdown && !disabled,\n })}\n >\n <TimeClockIcon size={size} />\n </span>\n ) : (\n rightIcon\n );\n const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n return (\n <InputLikeText\n ref={inputLikeTextRef}\n {...rest}\n takeContentWidth\n disabled={disabled}\n size={size}\n inputMode={'numeric'}\n width={width ?? 'auto'}\n suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n style={{ ...style, minWidth: inputMinWidth, ...corners }}\n rightIcon={resolvedRightIcon}\n value={value}\n >\n <TimeFragments ref={fragmentsRef} format={format} size={size} value={value} onSelectSegment={onSelectSegment} />\n </InputLikeText>\n );\n});\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "6.1.7-65057.0",
+  "version": "6.1.7-e032b.0",
   "description": "UI Components",
   "homepage": "https://tech.skbkontur.ru/kontur-ui",
   "bugs": {