@skbkontur/react-ui 6.1.4-4e59f.0 → 6.1.4-6d143.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.
- package/components/FxInput/FxInput.d.ts +1 -1
- package/components/FxInput/FxInput.js.map +1 -1
- package/components/Group/Group.js +2 -3
- package/components/Group/Group.js.map +1 -1
- package/components/Input/Input.d.ts +1 -1
- package/components/Input/Input.js.map +1 -1
- package/components/MaskedInput/MaskedInput.d.ts +3 -2
- package/components/MaskedInput/MaskedInput.js +10 -126
- package/components/MaskedInput/MaskedInput.js.map +1 -1
- package/components/MaskedInput/MaskedInputLegacy.d.ts +3 -0
- package/components/MaskedInput/MaskedInputLegacy.js +142 -0
- package/components/MaskedInput/MaskedInputLegacy.js.map +1 -0
- package/components/MaskedInputV2/MaskedInputV2.d.ts +58 -0
- package/components/MaskedInputV2/MaskedInputV2.helpers.d.ts +9 -0
- package/components/MaskedInputV2/MaskedInputV2.helpers.js +17 -0
- package/components/MaskedInputV2/MaskedInputV2.helpers.js.map +1 -0
- package/components/MaskedInputV2/MaskedInputV2.js +286 -0
- package/components/MaskedInputV2/MaskedInputV2.js.map +1 -0
- package/{internal/TimeInput/TimeInput.styles.d.ts → components/MaskedInputV2/MaskedInputV2.styles.d.ts} +4 -3
- package/components/MaskedInputV2/MaskedInputV2.styles.js +19 -0
- package/components/MaskedInputV2/MaskedInputV2.styles.js.map +1 -0
- package/components/MaskedInputV2/index.d.ts +1 -0
- package/components/MaskedInputV2/index.js +2 -0
- package/components/MaskedInputV2/index.js.map +1 -0
- package/components/MaskedInputV2/internal/MaskOverlay.d.ts +19 -0
- package/components/MaskedInputV2/internal/MaskOverlay.js +54 -0
- package/components/MaskedInputV2/internal/MaskOverlay.js.map +1 -0
- package/components/MaskedInputV2/internal/MaskedCore.d.ts +8 -0
- package/components/MaskedInputV2/internal/MaskedCore.js +126 -0
- package/components/MaskedInputV2/internal/MaskedCore.js.map +1 -0
- package/components/MaskedInputV2/internal/MaskedCore.types.d.ts +32 -0
- package/components/MaskedInputV2/internal/MaskedCore.types.js +2 -0
- package/components/MaskedInputV2/internal/MaskedCore.types.js.map +1 -0
- package/components/MaskedInputV2/internal/MaskedInternal.styles.d.ts +15 -0
- package/components/MaskedInputV2/internal/MaskedInternal.styles.js +34 -0
- package/components/MaskedInputV2/internal/MaskedInternal.styles.js.map +1 -0
- package/components/MaskedInputV2/internal/buildSlotMap.d.ts +11 -0
- package/components/MaskedInputV2/internal/buildSlotMap.js +37 -0
- package/components/MaskedInputV2/internal/buildSlotMap.js.map +1 -0
- package/components/MaskedInputV2/internal/computeMaskAlignPadding.d.ts +6 -0
- package/components/MaskedInputV2/internal/computeMaskAlignPadding.js +47 -0
- package/components/MaskedInputV2/internal/computeMaskAlignPadding.js.map +1 -0
- package/components/MaskedInputV2/internal/computePasteMaskedCursor.d.ts +3 -0
- package/components/MaskedInputV2/internal/computePasteMaskedCursor.js +11 -0
- package/components/MaskedInputV2/internal/computePasteMaskedCursor.js.map +1 -0
- package/components/MaskedInputV2/internal/extractRaw.d.ts +10 -0
- package/components/MaskedInputV2/internal/extractRaw.js +16 -0
- package/components/MaskedInputV2/internal/extractRaw.js.map +1 -0
- package/components/MaskedInputV2/internal/findNearestRawLeft.d.ts +10 -0
- package/components/MaskedInputV2/internal/findNearestRawLeft.js +18 -0
- package/components/MaskedInputV2/internal/findNearestRawLeft.js.map +1 -0
- package/components/MaskedInputV2/internal/helpers.d.ts +8 -0
- package/components/MaskedInputV2/internal/helpers.js +9 -0
- package/components/MaskedInputV2/internal/helpers.js.map +1 -0
- package/components/MaskedInputV2/internal/maskedCoreClipboard.d.ts +25 -0
- package/components/MaskedInputV2/internal/maskedCoreClipboard.js +30 -0
- package/components/MaskedInputV2/internal/maskedCoreClipboard.js.map +1 -0
- package/components/MaskedInputV2/internal/maskedCoreDeletion.d.ts +28 -0
- package/components/MaskedInputV2/internal/maskedCoreDeletion.js +70 -0
- package/components/MaskedInputV2/internal/maskedCoreDeletion.js.map +1 -0
- package/components/MaskedInputV2/internal/maskedCoreInputChange.d.ts +35 -0
- package/components/MaskedInputV2/internal/maskedCoreInputChange.js +31 -0
- package/components/MaskedInputV2/internal/maskedCoreInputChange.js.map +1 -0
- package/components/MaskedInputV2/internal/maskedCoreNavigation.d.ts +13 -0
- package/components/MaskedInputV2/internal/maskedCoreNavigation.js +79 -0
- package/components/MaskedInputV2/internal/maskedCoreNavigation.js.map +1 -0
- package/components/MaskedInputV2/internal/measureInputTextWidth.d.ts +2 -0
- package/components/MaskedInputV2/internal/measureInputTextWidth.js +30 -0
- package/components/MaskedInputV2/internal/measureInputTextWidth.js.map +1 -0
- package/components/MaskedInputV2/internal/setMaskInputSelectionRange.d.ts +2 -0
- package/components/MaskedInputV2/internal/setMaskInputSelectionRange.js +25 -0
- package/components/MaskedInputV2/internal/setMaskInputSelectionRange.js.map +1 -0
- package/components/MaskedInputV2/internal/showOverlay.d.ts +3 -0
- package/components/MaskedInputV2/internal/showOverlay.js +14 -0
- package/components/MaskedInputV2/internal/showOverlay.js.map +1 -0
- package/components/MaskedInputV2/internal/stripMaskChars.d.ts +11 -0
- package/components/MaskedInputV2/internal/stripMaskChars.js +20 -0
- package/components/MaskedInputV2/internal/stripMaskChars.js.map +1 -0
- package/components/MaskedInputV2/internal/types.d.ts +74 -0
- package/components/MaskedInputV2/internal/types.js.map +1 -0
- package/components/MaskedInputV2/internal/useInputOverflow.d.ts +4 -0
- package/components/MaskedInputV2/internal/useInputOverflow.js +30 -0
- package/components/MaskedInputV2/internal/useInputOverflow.js.map +1 -0
- package/components/MaskedInputV2/internal/useMaskAlignPadding.d.ts +2 -0
- package/components/MaskedInputV2/internal/useMaskAlignPadding.js +33 -0
- package/components/MaskedInputV2/internal/useMaskAlignPadding.js.map +1 -0
- package/components/MaskedInputV2/internal/useMaskEngine.d.ts +42 -0
- package/components/MaskedInputV2/internal/useMaskEngine.js +82 -0
- package/components/MaskedInputV2/internal/useMaskEngine.js.map +1 -0
- package/components/MaskedInputV2/internal/useMaskedCoreHandlers.d.ts +33 -0
- package/components/MaskedInputV2/internal/useMaskedCoreHandlers.js +244 -0
- package/components/MaskedInputV2/internal/useMaskedCoreHandlers.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/controls/html-input-mask-element.d.ts +16 -0
- package/components/MaskedInputV2/react-imask/imask/controls/html-input-mask-element.js +59 -0
- package/components/MaskedInputV2/react-imask/imask/controls/html-input-mask-element.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/controls/html-mask-element.d.ts +20 -0
- package/components/MaskedInputV2/react-imask/imask/controls/html-mask-element.js +106 -0
- package/components/MaskedInputV2/react-imask/imask/controls/html-mask-element.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/controls/input-history.d.ts +17 -0
- package/components/MaskedInputV2/react-imask/imask/controls/input-history.js +49 -0
- package/components/MaskedInputV2/react-imask/imask/controls/input-history.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/controls/input.d.ts +95 -0
- package/components/MaskedInputV2/react-imask/imask/controls/input.js +420 -0
- package/components/MaskedInputV2/react-imask/imask/controls/input.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/controls/mask-element.d.ts +30 -0
- package/components/MaskedInputV2/react-imask/imask/controls/mask-element.js +59 -0
- package/components/MaskedInputV2/react-imask/imask/controls/mask-element.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/core/action-details.d.ts +30 -0
- package/components/MaskedInputV2/react-imask/imask/core/action-details.js +100 -0
- package/components/MaskedInputV2/react-imask/imask/core/action-details.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/core/change-details.d.ts +20 -0
- package/components/MaskedInputV2/react-imask/imask/core/change-details.js +46 -0
- package/components/MaskedInputV2/react-imask/imask/core/change-details.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/core/continuous-tail-details.d.ts +21 -0
- package/components/MaskedInputV2/react-imask/imask/core/continuous-tail-details.js +52 -0
- package/components/MaskedInputV2/react-imask/imask/core/continuous-tail-details.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/core/holder.d.ts +34 -0
- package/components/MaskedInputV2/react-imask/imask/core/holder.js +38 -0
- package/components/MaskedInputV2/react-imask/imask/core/holder.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/core/tail-details.d.ts +20 -0
- package/components/MaskedInputV2/react-imask/imask/core/tail-details.js +2 -0
- package/components/MaskedInputV2/react-imask/imask/core/tail-details.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/core/utils.d.ts +24 -0
- package/components/MaskedInputV2/react-imask/imask/core/utils.js +100 -0
- package/components/MaskedInputV2/react-imask/imask/core/utils.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/imask.d.ts +5 -0
- package/components/MaskedInputV2/react-imask/imask/imask.js +7 -0
- package/components/MaskedInputV2/react-imask/imask/imask.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/index.d.ts +17 -0
- package/components/MaskedInputV2/react-imask/imask/index.js +16 -0
- package/components/MaskedInputV2/react-imask/imask/index.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/base.d.ts +114 -0
- package/components/MaskedInputV2/react-imask/imask/masked/base.js +411 -0
- package/components/MaskedInputV2/react-imask/imask/masked/base.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/factory.d.ts +62 -0
- package/components/MaskedInputV2/react-imask/imask/masked/factory.js +96 -0
- package/components/MaskedInputV2/react-imask/imask/masked/factory.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/pattern.d.ts +101 -0
- package/components/MaskedInputV2/react-imask/imask/masked/pattern.js +543 -0
- package/components/MaskedInputV2/react-imask/imask/masked/pattern.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/block.d.ts +30 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/block.js +2 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/block.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/chunk-tail-details.d.ts +21 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/chunk-tail-details.js +180 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/chunk-tail-details.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/cursor.d.ts +31 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/cursor.js +163 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/cursor.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/fixed-definition.d.ts +42 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/fixed-definition.js +158 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/fixed-definition.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/input-definition.d.ts +56 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/input-definition.js +185 -0
- package/components/MaskedInputV2/react-imask/imask/masked/patterns/input-definition.js.map +1 -0
- package/components/MaskedInputV2/react-imask/imask/masked/regexp.d.ts +17 -0
- package/components/MaskedInputV2/react-imask/imask/masked/regexp.js +36 -0
- package/components/MaskedInputV2/react-imask/imask/masked/regexp.js.map +1 -0
- package/components/MaskedInputV2/react-imask/index.d.ts +3 -0
- package/components/MaskedInputV2/react-imask/index.js +4 -0
- package/components/MaskedInputV2/react-imask/index.js.map +1 -0
- package/components/MaskedInputV2/react-imask/input.d.ts +8 -0
- package/components/MaskedInputV2/react-imask/input.js +35 -0
- package/components/MaskedInputV2/react-imask/input.js.map +1 -0
- package/components/MaskedInputV2/react-imask/mixin.d.ts +31 -0
- package/components/MaskedInputV2/react-imask/mixin.js +246 -0
- package/components/MaskedInputV2/react-imask/mixin.js.map +1 -0
- package/components/TokenInput/TokenInput.d.ts +7 -3
- package/components/TokenInput/TokenInput.js +0 -1
- package/components/TokenInput/TokenInput.js.map +1 -1
- package/index.d.ts +0 -1
- package/index.js +0 -1
- package/index.js.map +1 -1
- package/internal/themes/BasicTheme.d.ts +0 -34
- package/internal/themes/BasicTheme.js +0 -96
- package/internal/themes/BasicTheme.js.map +1 -1
- package/lib/events/keyboard/KeyboardEventCodes.d.ts +2 -0
- package/lib/events/keyboard/KeyboardEventCodes.js +2 -0
- package/lib/events/keyboard/KeyboardEventCodes.js.map +1 -1
- package/lib/events/keyboard/KeyboardMapKeys.js +2 -0
- package/lib/events/keyboard/KeyboardMapKeys.js.map +1 -1
- package/lib/events/keyboard/identifiers.d.ts +2 -0
- package/lib/events/keyboard/identifiers.js +6 -0
- package/lib/events/keyboard/identifiers.js.map +1 -1
- package/lib/featureFlagsContext/ReactUIFeatureFlagsContext.d.ts +2 -0
- package/lib/featureFlagsContext/ReactUIFeatureFlagsContext.js +1 -0
- package/lib/featureFlagsContext/ReactUIFeatureFlagsContext.js.map +1 -1
- package/lib/locale/types.d.ts +0 -2
- package/lib/locale/types.js.map +1 -1
- package/lib/utils.d.ts +0 -2
- package/lib/utils.js +0 -1
- package/lib/utils.js.map +1 -1
- package/package.json +4 -9
- package/components/TimePicker/TimeClockIcon.d.ts +0 -3
- package/components/TimePicker/TimeClockIcon.js +0 -11
- package/components/TimePicker/TimeClockIcon.js.map +0 -1
- package/components/TimePicker/TimePicker.d.ts +0 -79
- package/components/TimePicker/TimePicker.js +0 -513
- package/components/TimePicker/TimePicker.js.map +0 -1
- package/components/TimePicker/TimePicker.styles.d.ts +0 -11
- package/components/TimePicker/TimePicker.styles.js +0 -36
- package/components/TimePicker/TimePicker.styles.js.map +0 -1
- package/components/TimePicker/TimePickerItems.d.ts +0 -17
- package/components/TimePicker/TimePickerItems.js +0 -80
- package/components/TimePicker/TimePickerItems.js.map +0 -1
- package/components/TimePicker/TimePickerMobilePopup.d.ts +0 -38
- package/components/TimePicker/TimePickerMobilePopup.js +0 -21
- package/components/TimePicker/TimePickerMobilePopup.js.map +0 -1
- package/components/TimePicker/TimePickerPopup.d.ts +0 -20
- package/components/TimePicker/TimePickerPopup.js +0 -18
- package/components/TimePicker/TimePickerPopup.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.constants.d.ts +0 -22
- package/components/TimePicker/helpers/TimePicker.constants.js +0 -31
- package/components/TimePicker/helpers/TimePicker.constants.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.editing.d.ts +0 -23
- package/components/TimePicker/helpers/TimePicker.editing.js +0 -101
- package/components/TimePicker/helpers/TimePicker.editing.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.layout.d.ts +0 -6
- package/components/TimePicker/helpers/TimePicker.layout.js +0 -49
- package/components/TimePicker/helpers/TimePicker.layout.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.selection.d.ts +0 -5
- package/components/TimePicker/helpers/TimePicker.selection.js +0 -23
- package/components/TimePicker/helpers/TimePicker.selection.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.shared.d.ts +0 -47
- package/components/TimePicker/helpers/TimePicker.shared.js +0 -70
- package/components/TimePicker/helpers/TimePicker.shared.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.value.d.ts +0 -30
- package/components/TimePicker/helpers/TimePicker.value.js +0 -96
- package/components/TimePicker/helpers/TimePicker.value.js.map +0 -1
- package/components/TimePicker/helpers/scrollSelectedItemIntoView.d.ts +0 -4
- package/components/TimePicker/helpers/scrollSelectedItemIntoView.js +0 -24
- package/components/TimePicker/helpers/scrollSelectedItemIntoView.js.map +0 -1
- package/components/TimePicker/helpers/validateTimePicker.d.ts +0 -8
- package/components/TimePicker/helpers/validateTimePicker.js +0 -16
- package/components/TimePicker/helpers/validateTimePicker.js.map +0 -1
- package/components/TimePicker/hooks/useTimePickerDropdown.d.ts +0 -17
- package/components/TimePicker/hooks/useTimePickerDropdown.js +0 -62
- package/components/TimePicker/hooks/useTimePickerDropdown.js.map +0 -1
- package/components/TimePicker/hooks/useTimePickerSelection.d.ts +0 -18
- package/components/TimePicker/hooks/useTimePickerSelection.js +0 -66
- package/components/TimePicker/hooks/useTimePickerSelection.js.map +0 -1
- package/components/TimePicker/hooks/useTimePickerValue.d.ts +0 -18
- package/components/TimePicker/hooks/useTimePickerValue.js +0 -59
- package/components/TimePicker/hooks/useTimePickerValue.js.map +0 -1
- package/components/TimePicker/index.d.ts +0 -2
- package/components/TimePicker/index.js +0 -2
- package/components/TimePicker/index.js.map +0 -1
- package/components/TimePicker/locale/index.d.ts +0 -4
- package/components/TimePicker/locale/index.js +0 -9
- package/components/TimePicker/locale/index.js.map +0 -1
- package/components/TimePicker/locale/locales/en.d.ts +0 -2
- package/components/TimePicker/locale/locales/en.js +0 -5
- package/components/TimePicker/locale/locales/en.js.map +0 -1
- package/components/TimePicker/locale/locales/ru.d.ts +0 -2
- package/components/TimePicker/locale/locales/ru.js +0 -5
- package/components/TimePicker/locale/locales/ru.js.map +0 -1
- package/components/TimePicker/locale/types.d.ts +0 -4
- package/components/TimePicker/locale/types.js.map +0 -1
- package/internal/NativeTimeInput/NativeTimeInput.d.ts +0 -16
- package/internal/NativeTimeInput/NativeTimeInput.js +0 -25
- package/internal/NativeTimeInput/NativeTimeInput.js.map +0 -1
- package/internal/NativeTimeInput/NativeTimeInput.styles.d.ts +0 -3
- package/internal/NativeTimeInput/NativeTimeInput.styles.js +0 -15
- package/internal/NativeTimeInput/NativeTimeInput.styles.js.map +0 -1
- package/internal/NativeTimeInput/NativeTimeInput.utils.d.ts +0 -7
- package/internal/NativeTimeInput/NativeTimeInput.utils.js +0 -28
- package/internal/NativeTimeInput/NativeTimeInput.utils.js.map +0 -1
- package/internal/NativeTimeInput/index.d.ts +0 -1
- package/internal/NativeTimeInput/index.js +0 -2
- package/internal/NativeTimeInput/index.js.map +0 -1
- package/internal/TimeInput/TimeFragments.d.ts +0 -15
- package/internal/TimeInput/TimeFragments.js +0 -72
- package/internal/TimeInput/TimeFragments.js.map +0 -1
- package/internal/TimeInput/TimeFragments.styles.d.ts +0 -12
- package/internal/TimeInput/TimeFragments.styles.js +0 -43
- package/internal/TimeInput/TimeFragments.styles.js.map +0 -1
- package/internal/TimeInput/TimeInput.d.ts +0 -22
- package/internal/TimeInput/TimeInput.js +0 -103
- package/internal/TimeInput/TimeInput.js.map +0 -1
- package/internal/TimeInput/TimeInput.styles.js +0 -21
- package/internal/TimeInput/TimeInput.styles.js.map +0 -1
- package/internal/TimeInput/index.d.ts +0 -1
- package/internal/TimeInput/index.js +0 -2
- package/internal/TimeInput/index.js.map +0 -1
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.d.ts +0 -2
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js +0 -20
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js.map +0 -1
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.d.ts +0 -2
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js +0 -20
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js.map +0 -1
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.d.ts +0 -2
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js +0 -20
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js.map +0 -1
- /package/components/{TimePicker/locale → MaskedInputV2/internal}/types.js +0 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import { UI_FONT_NAME, injectGlobalFont } from '../../lib/styles/UiFont.js';
|
|
6
|
+
import { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';
|
|
7
|
+
export var globalClasses = prefix('masked-input-v2')({
|
|
8
|
+
root: 'root',
|
|
9
|
+
});
|
|
10
|
+
export var getStyles = memoizeGetStyles(function (emotion) {
|
|
11
|
+
injectGlobalFont(emotion);
|
|
12
|
+
return {
|
|
13
|
+
root: function (t) {
|
|
14
|
+
return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ", ", ";\n font-variant-numeric: tabular-nums;\n "], ["\n font-family: ", ", ", ";\n font-variant-numeric: tabular-nums;\n "])), UI_FONT_NAME, t.baseFontFamily);
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
});
|
|
18
|
+
var templateObject_1;
|
|
19
|
+
//# sourceMappingURL=MaskedInputV2.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedInputV2.styles.js","sourceRoot":"","sources":["MaskedInputV2.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGxE,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACrD,IAAI,EAAE,MAAM;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IACzD,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,4JAAA,yBACD,EAAY,IAAK,EAAgB,wDAEjD,KAFgB,YAAY,EAAK,CAAC,CAAC,cAAc,EAEhD;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { UI_FONT_NAME, injectGlobalFont } from '../../lib/styles/UiFont.js';\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const globalClasses = prefix('masked-input-v2')({\n root: 'root',\n});\n\nexport const getStyles = memoizeGetStyles((emotion: Emotion) => {\n injectGlobalFont(emotion);\n return {\n root(t: Theme) {\n return emotion.css`\n font-family: ${UI_FONT_NAME}, ${t.baseFontFamily};\n font-variant-numeric: tabular-nums;\n `;\n },\n };\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MaskedInputV2, getSafeMaskInputType, type MaskedInputV2Props, type MaskedInputV2OnBeforePasteValue, type MaskInputType, } from './MaskedInputV2.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,oBAAoB,GAIrB,MAAM,oBAAoB,CAAC","sourcesContent":["export {\n MaskedInputV2,\n getSafeMaskInputType,\n type MaskedInputV2Props,\n type MaskedInputV2OnBeforePasteValue,\n type MaskInputType,\n} from './MaskedInputV2.js';\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface MaskOverlayProps {
|
|
3
|
+
typedValue: string;
|
|
4
|
+
displayValue: string;
|
|
5
|
+
selectionStart: number;
|
|
6
|
+
selectionEnd: number;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
textAlign?: React.CSSProperties['textAlign'];
|
|
9
|
+
containerRef?: React.RefObject<HTMLSpanElement | null>;
|
|
10
|
+
colored?: boolean;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Абсолютно позиционированный слой над <input>.
|
|
14
|
+
* Input делается прозрачным (color: transparent), а весь текст
|
|
15
|
+
* (typedValue + maskPart) рендерится здесь с раскраской.
|
|
16
|
+
* При center/right align overlay выравнивает маску, а input смещается paddingLeft.
|
|
17
|
+
*/
|
|
18
|
+
export declare function MaskOverlay({ typedValue, displayValue, selectionStart, selectionEnd, disabled, textAlign, containerRef, colored, }: MaskOverlayProps): React.JSX.Element | null;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { cx } from '@emotion/css';
|
|
2
|
+
import React, { useContext } from 'react';
|
|
3
|
+
import { useStyles } from '../../../lib/renderEnvironment/index.js';
|
|
4
|
+
import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
|
|
5
|
+
import { getStyles, globalClasses } from './MaskedInternal.styles.js';
|
|
6
|
+
function splitTextBySelection(text, textStartOffset, selectionStart, selectionEnd) {
|
|
7
|
+
if (selectionStart === selectionEnd) {
|
|
8
|
+
return [text, '', ''];
|
|
9
|
+
}
|
|
10
|
+
var localStart = Math.max(0, selectionStart - textStartOffset);
|
|
11
|
+
var localEnd = Math.min(text.length, selectionEnd - textStartOffset);
|
|
12
|
+
if (localEnd <= localStart) {
|
|
13
|
+
return [text, '', ''];
|
|
14
|
+
}
|
|
15
|
+
return [text.slice(0, localStart), text.slice(localStart, localEnd), text.slice(localEnd)];
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Абсолютно позиционированный слой над <input>.
|
|
19
|
+
* Input делается прозрачным (color: transparent), а весь текст
|
|
20
|
+
* (typedValue + maskPart) рендерится здесь с раскраской.
|
|
21
|
+
* При center/right align overlay выравнивает маску, а input смещается paddingLeft.
|
|
22
|
+
*/
|
|
23
|
+
export function MaskOverlay(_a) {
|
|
24
|
+
var typedValue = _a.typedValue, displayValue = _a.displayValue, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, disabled = _a.disabled, textAlign = _a.textAlign, containerRef = _a.containerRef, _b = _a.colored, colored = _b === void 0 ? true : _b;
|
|
25
|
+
var theme = useContext(ThemeContext);
|
|
26
|
+
var styles = useStyles(getStyles);
|
|
27
|
+
var maskPart = displayValue.slice(typedValue.length);
|
|
28
|
+
var disabledClass = disabled && globalClasses.disabled;
|
|
29
|
+
var coloredClass = colored && globalClasses.colored;
|
|
30
|
+
var selectedSegmentClass = styles.selectedSegment();
|
|
31
|
+
if (!typedValue && !maskPart) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
function renderSegment(text, offset, segmentClassName) {
|
|
35
|
+
var _a = splitTextBySelection(text, offset, selectionStart, selectionEnd), before = _a[0], selected = _a[1], after = _a[2];
|
|
36
|
+
return (React.createElement(React.Fragment, null,
|
|
37
|
+
before ? React.createElement("span", { className: segmentClassName }, before) : null,
|
|
38
|
+
selected ? React.createElement("span", { className: selectedSegmentClass }, selected) : null,
|
|
39
|
+
after ? React.createElement("span", { className: segmentClassName }, after) : null));
|
|
40
|
+
}
|
|
41
|
+
return (React.createElement("span", { ref: containerRef, "aria-hidden": "true", className: styles.overlay() },
|
|
42
|
+
React.createElement("span", { "data-tid": "masked-input-overlay", style: {
|
|
43
|
+
display: 'inline-block',
|
|
44
|
+
width: '100%',
|
|
45
|
+
whiteSpace: 'nowrap',
|
|
46
|
+
textAlign: textAlign,
|
|
47
|
+
lineHeight: 'inherit',
|
|
48
|
+
} },
|
|
49
|
+
typedValue ? renderSegment(typedValue, 0, cx(styles.typed(theme), disabledClass, coloredClass)) : null,
|
|
50
|
+
maskPart
|
|
51
|
+
? renderSegment(maskPart, typedValue.length, cx(styles.mask(theme), disabledClass, coloredClass))
|
|
52
|
+
: null)));
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=MaskOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskOverlay.js","sourceRoot":"","sources":["MaskOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cx } from '@emotion/css';\nimport React, { useContext } from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { getStyles, globalClasses } from './MaskedInternal.styles.js';\n\ninterface MaskOverlayProps {\n typedValue: string;\n displayValue: string;\n selectionStart: number;\n selectionEnd: number;\n disabled?: boolean;\n textAlign?: React.CSSProperties['textAlign'];\n containerRef?: React.RefObject<HTMLSpanElement | null>;\n colored?: boolean;\n}\n\nfunction splitTextBySelection(\n text: string,\n textStartOffset: number,\n selectionStart: number,\n selectionEnd: number,\n): [string, string, string] {\n if (selectionStart === selectionEnd) {\n return [text, '', ''];\n }\n\n const localStart = Math.max(0, selectionStart - textStartOffset);\n const localEnd = Math.min(text.length, selectionEnd - textStartOffset);\n\n if (localEnd <= localStart) {\n return [text, '', ''];\n }\n\n return [text.slice(0, localStart), text.slice(localStart, localEnd), text.slice(localEnd)];\n}\n\n/**\n * Абсолютно позиционированный слой над <input>.\n * Input делается прозрачным (color: transparent), а весь текст\n * (typedValue + maskPart) рендерится здесь с раскраской.\n * При center/right align overlay выравнивает маску, а input смещается paddingLeft.\n */\nexport function MaskOverlay({\n typedValue,\n displayValue,\n selectionStart,\n selectionEnd,\n disabled,\n textAlign,\n containerRef,\n colored = true,\n}: MaskOverlayProps) {\n const theme = useContext(ThemeContext);\n const styles = useStyles(getStyles);\n const maskPart = displayValue.slice(typedValue.length);\n\n const disabledClass = disabled && globalClasses.disabled;\n const coloredClass = colored && globalClasses.colored;\n const selectedSegmentClass = styles.selectedSegment();\n\n if (!typedValue && !maskPart) {\n return null;\n }\n\n function renderSegment(text: string, offset: number, segmentClassName: string) {\n const [before, selected, after] = splitTextBySelection(text, offset, selectionStart, selectionEnd);\n\n return (\n <>\n {before ? <span className={segmentClassName}>{before}</span> : null}\n {selected ? <span className={selectedSegmentClass}>{selected}</span> : null}\n {after ? <span className={segmentClassName}>{after}</span> : null}\n </>\n );\n }\n\n return (\n <span ref={containerRef} aria-hidden=\"true\" className={styles.overlay()}>\n <span\n data-tid=\"masked-input-overlay\"\n style={{\n display: 'inline-block',\n width: '100%',\n whiteSpace: 'nowrap',\n textAlign,\n lineHeight: 'inherit',\n }}\n >\n {typedValue ? renderSegment(typedValue, 0, cx(styles.typed(theme), disabledClass, coloredClass)) : null}\n {maskPart\n ? renderSegment(maskPart, typedValue.length, cx(styles.mask(theme), disabledClass, coloredClass))\n : null}\n </span>\n </span>\n );\n}\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { InputElement } from '../../Input/Input.typings.js';
|
|
2
|
+
import type { MaskedCoreProps } from './MaskedCore.types.js';
|
|
3
|
+
export type { MaskedCoreProps } from './MaskedCore.types.js';
|
|
4
|
+
/**
|
|
5
|
+
* Headless-слой MaskedInputV2: прозрачный `<input>` для ввода и {@link MaskOverlay} для отображения маски.
|
|
6
|
+
* Управляется через {@link useMaskedCoreHandlers}.
|
|
7
|
+
*/
|
|
8
|
+
export declare const MaskedCore: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<InputElement | null, MaskedCoreProps> & Record<never, never>;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { cx } from '@emotion/css';
|
|
24
|
+
import React, { useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
|
|
25
|
+
import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
|
|
26
|
+
import { useStyles } from '../../../lib/renderEnvironment/index.js';
|
|
27
|
+
import { scrollInputCaretIntoView } from '../../../lib/scrollInputCaretIntoView.js';
|
|
28
|
+
import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
|
|
29
|
+
import { needsMaskAlignPadding } from './computeMaskAlignPadding.js';
|
|
30
|
+
import { getStyles, globalClasses } from './MaskedInternal.styles.js';
|
|
31
|
+
import { MaskOverlay } from './MaskOverlay.js';
|
|
32
|
+
import { setMaskInputSelectionRange } from './setMaskInputSelectionRange.js';
|
|
33
|
+
import { getShowOverlay } from './showOverlay.js';
|
|
34
|
+
import { useInputOverflow } from './useInputOverflow.js';
|
|
35
|
+
import { useMaskAlignPadding } from './useMaskAlignPadding.js';
|
|
36
|
+
import { useMaskedCoreHandlers } from './useMaskedCoreHandlers.js';
|
|
37
|
+
/**
|
|
38
|
+
* Headless-слой MaskedInputV2: прозрачный `<input>` для ввода и {@link MaskOverlay} для отображения маски.
|
|
39
|
+
* Управляется через {@link useMaskedCoreHandlers}.
|
|
40
|
+
*/
|
|
41
|
+
export var MaskedCore = forwardRefAndName('MaskedCore', function MaskedCore(props, ref) {
|
|
42
|
+
var _a, _b;
|
|
43
|
+
var maskState = props.maskState, slotMap = props.slotMap, engine = props.engine, focused = props.focused, currentRaw = props.currentRaw, onRawChange = props.onRawChange, onUnexpectedInput = props.onUnexpectedInput, onUndo = props.onUndo, onRedo = props.onRedo, coreInputRef = props.coreInputRef, _c = props.colored, colored = _c === void 0 ? true : _c, selectAllOnFocus = props.selectAllOnFocus, onKeyDown = props.onKeyDown, onMouseUp = props.onMouseUp, onInput = props.onInput, onSelect = props.onSelect, onFocus = props.onFocus, onPaste = props.onPaste, onBlur = props.onBlur, placeholder = props.placeholder, className = props.className, disabled = props.disabled, rest = __rest(props, ["maskState", "slotMap", "engine", "focused", "currentRaw", "onRawChange", "onUnexpectedInput", "onUndo", "onRedo", "coreInputRef", "colored", "selectAllOnFocus", "onKeyDown", "onMouseUp", "onInput", "onSelect", "onFocus", "onPaste", "onBlur", "placeholder", "className", "disabled"]);
|
|
44
|
+
var styles = useStyles(getStyles);
|
|
45
|
+
var overlayRef = useRef(null);
|
|
46
|
+
var theme = useContext(ThemeContext);
|
|
47
|
+
var textAlign = (_a = rest.style) === null || _a === void 0 ? void 0 : _a.textAlign;
|
|
48
|
+
var syncOverlayScroll = useCallback(function () {
|
|
49
|
+
if (overlayRef.current && coreInputRef.current) {
|
|
50
|
+
overlayRef.current.style.transform = "translateX(-".concat(coreInputRef.current.scrollLeft, "px)");
|
|
51
|
+
}
|
|
52
|
+
}, [coreInputRef]);
|
|
53
|
+
var overflows = useInputOverflow(coreInputRef, maskState.displayValue, focused);
|
|
54
|
+
var showOverlay = getShowOverlay(maskState, focused, overflows);
|
|
55
|
+
var _d = useMaskedCoreHandlers({
|
|
56
|
+
maskState: maskState,
|
|
57
|
+
slotMap: slotMap,
|
|
58
|
+
engine: engine,
|
|
59
|
+
currentRaw: currentRaw,
|
|
60
|
+
onRawChange: onRawChange,
|
|
61
|
+
onUnexpectedInput: onUnexpectedInput,
|
|
62
|
+
onUndo: onUndo,
|
|
63
|
+
onRedo: onRedo,
|
|
64
|
+
coreInputRef: coreInputRef,
|
|
65
|
+
selectAllOnFocus: selectAllOnFocus,
|
|
66
|
+
onKeyDown: onKeyDown,
|
|
67
|
+
onMouseUp: onMouseUp,
|
|
68
|
+
onInput: onInput,
|
|
69
|
+
onSelect: onSelect,
|
|
70
|
+
onFocus: onFocus,
|
|
71
|
+
onBlur: onBlur,
|
|
72
|
+
onPaste: onPaste,
|
|
73
|
+
syncOverlayScroll: syncOverlayScroll,
|
|
74
|
+
}), pendingCursorRef = _d.pendingCursorRef, shouldSelectAllOnFocusRef = _d.shouldSelectAllOnFocusRef, selectionRange = _d.selectionRange, syncSelection = _d.syncSelection, handleChange = _d.handleChange, handleKeyDown = _d.handleKeyDown, handleSelect = _d.handleSelect, handlePaste = _d.handlePaste, handleCopy = _d.handleCopy, handleCut = _d.handleCut, handleInput = _d.handleInput, handleMouseDown = _d.handleMouseDown, handleMouseUp = _d.handleMouseUp, handleFocus = _d.handleFocus, handleBlur = _d.handleBlur;
|
|
75
|
+
useImperativeHandle(ref, function () { return ({
|
|
76
|
+
input: coreInputRef.current,
|
|
77
|
+
getRootNode: function () { return coreInputRef.current; },
|
|
78
|
+
}); }, [coreInputRef]);
|
|
79
|
+
useLayoutEffect(function () {
|
|
80
|
+
var el = coreInputRef.current;
|
|
81
|
+
if (shouldSelectAllOnFocusRef.current && el && focused) {
|
|
82
|
+
shouldSelectAllOnFocusRef.current = false;
|
|
83
|
+
var end = maskState.typedLength;
|
|
84
|
+
setMaskInputSelectionRange(el, 0, end);
|
|
85
|
+
scrollInputCaretIntoView(el);
|
|
86
|
+
syncSelection(el);
|
|
87
|
+
}
|
|
88
|
+
else if (pendingCursorRef.current !== null && el) {
|
|
89
|
+
var pos = pendingCursorRef.current;
|
|
90
|
+
pendingCursorRef.current = null;
|
|
91
|
+
setMaskInputSelectionRange(el, pos);
|
|
92
|
+
scrollInputCaretIntoView(el);
|
|
93
|
+
syncSelection(el);
|
|
94
|
+
}
|
|
95
|
+
else if (el && focused) {
|
|
96
|
+
scrollInputCaretIntoView(el);
|
|
97
|
+
}
|
|
98
|
+
syncOverlayScroll();
|
|
99
|
+
});
|
|
100
|
+
useEffect(function () {
|
|
101
|
+
if (!focused) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
var el = coreInputRef.current;
|
|
105
|
+
if (!el) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
var handleSelectionChange = function () {
|
|
109
|
+
if (document.activeElement === el) {
|
|
110
|
+
handleSelect();
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
document.addEventListener('selectionchange', handleSelectionChange);
|
|
114
|
+
return function () { return document.removeEventListener('selectionchange', handleSelectionChange); };
|
|
115
|
+
}, [focused, handleSelect]);
|
|
116
|
+
var alignPadding = useMaskAlignPadding(coreInputRef, overlayRef, maskState.displayValue, textAlign, focused && showOverlay && needsMaskAlignPadding(textAlign));
|
|
117
|
+
var inputStyle = alignPadding > 0 ? __assign(__assign({}, rest.style), { textAlign: 'left', paddingLeft: alignPadding }) : rest.style;
|
|
118
|
+
return (React.createElement(React.Fragment, null,
|
|
119
|
+
React.createElement("input", __assign({}, rest, { style: inputStyle, placeholder: showOverlay ? undefined : placeholder, "aria-disabled": disabled, disabled: disabled, ref: coreInputRef, className: cx(globalClasses.input, styles.input(theme), showOverlay && globalClasses.masked, className), value: maskState.typedValue, onChange: handleChange, onKeyDown: handleKeyDown, onSelect: handleSelect, onPaste: handlePaste, onCopy: handleCopy, onCut: handleCut, onFocus: handleFocus, onBlur: handleBlur, onInput: handleInput, onMouseDown: function (e) {
|
|
120
|
+
var _a;
|
|
121
|
+
handleMouseDown();
|
|
122
|
+
(_a = rest.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(rest, e);
|
|
123
|
+
}, onMouseUp: handleMouseUp, onScroll: syncOverlayScroll })),
|
|
124
|
+
showOverlay && (React.createElement(MaskOverlay, { containerRef: overlayRef, typedValue: maskState.typedValue, displayValue: maskState.displayValue, selectionStart: selectionRange.start, selectionEnd: selectionRange.end, disabled: disabled, textAlign: (_b = rest.style) === null || _b === void 0 ? void 0 : _b.textAlign, colored: colored }))));
|
|
125
|
+
});
|
|
126
|
+
//# sourceMappingURL=MaskedCore.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedCore.js","sourceRoot":"","sources":["MaskedCore.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cx } from '@emotion/css';\nimport React, { useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { scrollInputCaretIntoView } from '../../../lib/scrollInputCaretIntoView.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { InputElement } from '../../Input/Input.typings.js';\nimport { needsMaskAlignPadding } from './computeMaskAlignPadding.js';\nimport type { MaskedCoreProps } from './MaskedCore.types.js';\nimport { getStyles, globalClasses } from './MaskedInternal.styles.js';\nimport { MaskOverlay } from './MaskOverlay.js';\nimport { setMaskInputSelectionRange } from './setMaskInputSelectionRange.js';\nimport { getShowOverlay } from './showOverlay.js';\nimport { useInputOverflow } from './useInputOverflow.js';\nimport { useMaskAlignPadding } from './useMaskAlignPadding.js';\nimport { useMaskedCoreHandlers } from './useMaskedCoreHandlers.js';\n\nexport type { MaskedCoreProps } from './MaskedCore.types.js';\n\n/**\n * Headless-слой MaskedInputV2: прозрачный `<input>` для ввода и {@link MaskOverlay} для отображения маски.\n * Управляется через {@link useMaskedCoreHandlers}.\n */\nexport const MaskedCore = forwardRefAndName(\n 'MaskedCore',\n function MaskedCore(props: MaskedCoreProps, ref: React.ForwardedRef<InputElement | null>) {\n const {\n maskState,\n slotMap,\n engine,\n focused,\n currentRaw,\n onRawChange,\n onUnexpectedInput,\n onUndo,\n onRedo,\n coreInputRef,\n colored = true,\n selectAllOnFocus,\n onKeyDown,\n onMouseUp,\n onInput,\n onSelect,\n onFocus,\n onPaste,\n onBlur,\n placeholder,\n className,\n disabled,\n ...rest\n } = props;\n\n const styles = useStyles(getStyles);\n const overlayRef = useRef<HTMLSpanElement>(null);\n const theme = useContext(ThemeContext);\n const textAlign = rest.style?.textAlign;\n\n const syncOverlayScroll = useCallback(() => {\n if (overlayRef.current && coreInputRef.current) {\n overlayRef.current.style.transform = `translateX(-${coreInputRef.current.scrollLeft}px)`;\n }\n }, [coreInputRef]);\n\n const overflows = useInputOverflow(coreInputRef, maskState.displayValue, focused);\n const showOverlay = getShowOverlay(maskState, focused, overflows);\n\n const {\n pendingCursorRef,\n shouldSelectAllOnFocusRef,\n selectionRange,\n syncSelection,\n handleChange,\n handleKeyDown,\n handleSelect,\n handlePaste,\n handleCopy,\n handleCut,\n handleInput,\n handleMouseDown,\n handleMouseUp,\n handleFocus,\n handleBlur,\n } = useMaskedCoreHandlers({\n maskState,\n slotMap,\n engine,\n currentRaw,\n onRawChange,\n onUnexpectedInput,\n onUndo,\n onRedo,\n coreInputRef,\n selectAllOnFocus,\n onKeyDown,\n onMouseUp,\n onInput,\n onSelect,\n onFocus,\n onBlur,\n onPaste,\n syncOverlayScroll,\n });\n\n useImperativeHandle(\n ref,\n () => ({\n input: coreInputRef.current,\n getRootNode: () => coreInputRef.current,\n }),\n [coreInputRef],\n );\n\n useLayoutEffect(() => {\n const el = coreInputRef.current;\n\n if (shouldSelectAllOnFocusRef.current && el && focused) {\n shouldSelectAllOnFocusRef.current = false;\n const end = maskState.typedLength;\n setMaskInputSelectionRange(el, 0, end);\n scrollInputCaretIntoView(el);\n syncSelection(el);\n } else if (pendingCursorRef.current !== null && el) {\n const pos = pendingCursorRef.current;\n pendingCursorRef.current = null;\n setMaskInputSelectionRange(el, pos);\n scrollInputCaretIntoView(el);\n syncSelection(el);\n } else if (el && focused) {\n scrollInputCaretIntoView(el);\n }\n\n syncOverlayScroll();\n });\n\n useEffect(() => {\n if (!focused) {\n return;\n }\n\n const el = coreInputRef.current;\n if (!el) {\n return;\n }\n\n const handleSelectionChange = () => {\n if (document.activeElement === el) {\n handleSelect();\n }\n };\n\n document.addEventListener('selectionchange', handleSelectionChange);\n return () => document.removeEventListener('selectionchange', handleSelectionChange);\n }, [focused, handleSelect]);\n\n const alignPadding = useMaskAlignPadding(\n coreInputRef,\n overlayRef,\n maskState.displayValue,\n textAlign,\n focused && showOverlay && needsMaskAlignPadding(textAlign),\n );\n const inputStyle =\n alignPadding > 0 ? { ...rest.style, textAlign: 'left' as const, paddingLeft: alignPadding } : rest.style;\n\n return (\n <>\n <input\n {...rest}\n style={inputStyle}\n placeholder={showOverlay ? undefined : placeholder}\n aria-disabled={disabled}\n disabled={disabled}\n ref={coreInputRef}\n className={cx(globalClasses.input, styles.input(theme), showOverlay && globalClasses.masked, className)}\n value={maskState.typedValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n onPaste={handlePaste}\n onCopy={handleCopy}\n onCut={handleCut}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onInput={handleInput}\n onMouseDown={(e) => {\n handleMouseDown();\n rest.onMouseDown?.(e);\n }}\n onMouseUp={handleMouseUp}\n onScroll={syncOverlayScroll}\n />\n {showOverlay && (\n <MaskOverlay\n containerRef={overlayRef}\n typedValue={maskState.typedValue}\n displayValue={maskState.displayValue}\n selectionStart={selectionRange.start}\n selectionEnd={selectionRange.end}\n disabled={disabled}\n textAlign={rest.style?.textAlign}\n colored={colored}\n />\n )}\n </>\n );\n },\n);\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import type { InputElement } from '../../Input/Input.typings.js';
|
|
3
|
+
import type { MaskEngine, MaskState, SlotMap } from './types.js';
|
|
4
|
+
/**
|
|
5
|
+
* Пропсы headless-слоя {@link MaskedCore}: прозрачный `<input>` + overlay маски.
|
|
6
|
+
*/
|
|
7
|
+
export interface MaskedCoreProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
|
|
8
|
+
/** Вычисленное состояние маски для отображения. */
|
|
9
|
+
maskState: MaskState;
|
|
10
|
+
/** Карта слотов для clipboard/delete/navigation. */
|
|
11
|
+
slotMap: SlotMap;
|
|
12
|
+
/** Headless IMask-движок. */
|
|
13
|
+
engine: MaskEngine;
|
|
14
|
+
/** Поле в фокусе — влияет на lazy-режим displayValue. */
|
|
15
|
+
focused: boolean;
|
|
16
|
+
/** Текущее raw-значение (источник истины). */
|
|
17
|
+
currentRaw: string;
|
|
18
|
+
/** Колбэк изменения raw от пользовательского ввода или paste. */
|
|
19
|
+
onRawChange: (newRaw: string, source: 'input' | 'paste', cursorPos?: number) => void;
|
|
20
|
+
/** Колбэк отклонённого ввода (невалидный символ или граничное удаление). */
|
|
21
|
+
onUnexpectedInput: () => void;
|
|
22
|
+
onUndo?: () => void;
|
|
23
|
+
onRedo?: () => void;
|
|
24
|
+
/** Ref на нативный `<input>` внутри MaskedCore. */
|
|
25
|
+
coreInputRef: React.RefObject<HTMLInputElement | null>;
|
|
26
|
+
/** Раскрашивать ли символы маски в overlay. @default true */
|
|
27
|
+
colored?: boolean;
|
|
28
|
+
/** Не сбрасывать каретку на mouseup — нужно для selectAllOnFocus. */
|
|
29
|
+
selectAllOnFocus?: boolean;
|
|
30
|
+
}
|
|
31
|
+
/** Ref, который MaskedCore пробрасывает наружу для совместимости с Input.refInput. */
|
|
32
|
+
export type MaskedCoreRef = InputElement | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedCore.types.js","sourceRoot":"","sources":["MaskedCore.types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InputElement } from '../../Input/Input.typings.js';\nimport type { MaskEngine, MaskState, SlotMap } from './types.js';\n\n/**\n * Пропсы headless-слоя {@link MaskedCore}: прозрачный `<input>` + overlay маски.\n */\nexport interface MaskedCoreProps extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'value' | 'onChange' | 'defaultValue'\n> {\n /** Вычисленное состояние маски для отображения. */\n maskState: MaskState;\n /** Карта слотов для clipboard/delete/navigation. */\n slotMap: SlotMap;\n /** Headless IMask-движок. */\n engine: MaskEngine;\n /** Поле в фокусе — влияет на lazy-режим displayValue. */\n focused: boolean;\n /** Текущее raw-значение (источник истины). */\n currentRaw: string;\n /** Колбэк изменения raw от пользовательского ввода или paste. */\n onRawChange: (newRaw: string, source: 'input' | 'paste', cursorPos?: number) => void;\n /** Колбэк отклонённого ввода (невалидный символ или граничное удаление). */\n onUnexpectedInput: () => void;\n onUndo?: () => void;\n onRedo?: () => void;\n /** Ref на нативный `<input>` внутри MaskedCore. */\n coreInputRef: React.RefObject<HTMLInputElement | null>;\n /** Раскрашивать ли символы маски в overlay. @default true */\n colored?: boolean;\n /** Не сбрасывать каретку на mouseup — нужно для selectAllOnFocus. */\n selectAllOnFocus?: boolean;\n}\n\n/** Ref, который MaskedCore пробрасывает наружу для совместимости с Input.refInput. */\nexport type MaskedCoreRef = InputElement | null;\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Theme } from '../../../lib/theming/Theme.js';
|
|
2
|
+
export declare const globalClasses: {
|
|
3
|
+
input: string;
|
|
4
|
+
disabled: string;
|
|
5
|
+
selected: string;
|
|
6
|
+
masked: string;
|
|
7
|
+
colored: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const getStyles: import("../../../lib/theming/Emotion.js").StylesGetter<{
|
|
10
|
+
input(t: Theme): string;
|
|
11
|
+
overlay(): string;
|
|
12
|
+
typed(t: Theme): string;
|
|
13
|
+
mask(t: Theme): string;
|
|
14
|
+
selectedSegment(): string;
|
|
15
|
+
}>;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import { memoizeGetStyles, prefix } from '../../../lib/theming/Emotion.js';
|
|
6
|
+
export var globalClasses = prefix('masked-internal')({
|
|
7
|
+
input: 'input',
|
|
8
|
+
disabled: 'disabled',
|
|
9
|
+
selected: 'selected',
|
|
10
|
+
masked: 'masked',
|
|
11
|
+
colored: 'colored',
|
|
12
|
+
});
|
|
13
|
+
export var getStyles = memoizeGetStyles(function (_a) {
|
|
14
|
+
var css = _a.css;
|
|
15
|
+
return ({
|
|
16
|
+
input: function (t) {
|
|
17
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color-scheme: ", ";\n\n &:-internal-autofill-selected {\n background-color: ", " !important;\n background-image: none !important;\n color: ", " !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px ", " inset;\n box-shadow: 0 0 0 1000px ", " inset;\n -webkit-text-fill-color: ", " !important;\n color: ", " !important;\n transition:\n background-color 0s 600000s,\n color 0s 600000s !important;\n }\n\n &:disabled {\n color: ", ";\n\n &:-internal-autofill-selected {\n background-color: ", " !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px ", " inset;\n box-shadow: 0 0 0 1000px ", " inset;\n }\n }\n\n &.", " {\n color: transparent;\n -webkit-text-fill-color: transparent;\n caret-color: ", ";\n\n &::selection {\n background-color: transparent !important;\n color: transparent !important;\n -webkit-text-fill-color: transparent !important;\n }\n\n /* \u0422\u0435\u043A\u0441\u0442 \u0440\u0438\u0441\u0443\u0435\u0442 MaskOverlay; \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043F\u0440\u0438 autofill \u043D\u0435 \u0434\u043E\u043B\u0436\u0435\u043D \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u0442\u044C fill-color. */\n &:-internal-autofill-selected {\n color: transparent !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-text-fill-color: transparent !important;\n color: transparent !important;\n }\n }\n "], ["\n color-scheme: ", ";\n\n &:-internal-autofill-selected {\n background-color: ", " !important;\n background-image: none !important;\n color: ", " !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px ", " inset;\n box-shadow: 0 0 0 1000px ", " inset;\n -webkit-text-fill-color: ", " !important;\n color: ", " !important;\n transition:\n background-color 0s 600000s,\n color 0s 600000s !important;\n }\n\n &:disabled {\n color: ", ";\n\n &:-internal-autofill-selected {\n background-color: ", " !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px ", " inset;\n box-shadow: 0 0 0 1000px ", " inset;\n }\n }\n\n &.", " {\n color: transparent;\n -webkit-text-fill-color: transparent;\n caret-color: ", ";\n\n &::selection {\n background-color: transparent !important;\n color: transparent !important;\n -webkit-text-fill-color: transparent !important;\n }\n\n /* \u0422\u0435\u043A\u0441\u0442 \u0440\u0438\u0441\u0443\u0435\u0442 MaskOverlay; \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043F\u0440\u0438 autofill \u043D\u0435 \u0434\u043E\u043B\u0436\u0435\u043D \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u0442\u044C fill-color. */\n &:-internal-autofill-selected {\n color: transparent !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-text-fill-color: transparent !important;\n color: transparent !important;\n }\n }\n "])), t.inputColorScheme, t.inputBg, t.inputTextColor, t.inputBg, t.inputBg, t.inputTextColor, t.inputTextColor, t.inputTextColorDisabled, t.inputDisabledBg, t.inputDisabledBg, t.inputDisabledBg, globalClasses.masked, t.inputTextColor);
|
|
18
|
+
},
|
|
19
|
+
overlay: function () {
|
|
20
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n inset: 0;\n pointer-events: none;\n user-select: none;\n overflow: hidden;\n display: flex;\n align-items: center;\n z-index: 2;\n "], ["\n position: absolute;\n inset: 0;\n pointer-events: none;\n user-select: none;\n overflow: hidden;\n display: flex;\n align-items: center;\n z-index: 2;\n "])));
|
|
21
|
+
},
|
|
22
|
+
typed: function (t) {
|
|
23
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n white-space: pre;\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n "], ["\n white-space: pre;\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n "])), t.inputTextColor, globalClasses.disabled, t.inputTextColorDisabled);
|
|
24
|
+
},
|
|
25
|
+
mask: function (t) {
|
|
26
|
+
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n white-space: pre;\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n &.", " {\n color: ", ";\n }\n "], ["\n white-space: pre;\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n &.", " {\n color: ", ";\n }\n "])), t.inputTextColor, globalClasses.colored, t.inputPlaceholderColor, globalClasses.disabled, t.inputTextColorDisabled);
|
|
27
|
+
},
|
|
28
|
+
selectedSegment: function () {
|
|
29
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: #3390ff;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n "], ["\n background-color: #3390ff;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n "])));
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
34
|
+
//# sourceMappingURL=MaskedInternal.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedInternal.styles.js","sourceRoot":"","sources":["MaskedInternal.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG3E,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACrD,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,q6DAAA,wBACQ,EAAkB,wEAGZ,EAAS,2EAEpB,EAAgB,kKAMU,EAAS,4CACjB,EAAS,4CACT,EAAgB,+BAClC,EAAgB,mKAOhB,EAAwB,4EAGX,EAAiB,4KAMF,EAAiB,8CACzB,EAAiB,yCAI5C,EAAoB,uGAGP,EAAgB,2yBAoBlC,KA1DiB,CAAC,CAAC,gBAAgB,EAGZ,CAAC,CAAC,OAAO,EAEpB,CAAC,CAAC,cAAc,EAMU,CAAC,CAAC,OAAO,EACjB,CAAC,CAAC,OAAO,EACT,CAAC,CAAC,cAAc,EAClC,CAAC,CAAC,cAAc,EAOhB,CAAC,CAAC,sBAAsB,EAGX,CAAC,CAAC,eAAe,EAMF,CAAC,CAAC,eAAe,EACzB,CAAC,CAAC,eAAe,EAI5C,aAAa,CAAC,MAAM,EAGP,CAAC,CAAC,cAAc,EAoBjC;QACJ,CAAC;QACD,OAAO;YACL,OAAO,GAAG,4QAAA,yMAST,KAAC;QACJ,CAAC;QACD,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,yKAAA,0CAEC,EAAgB,eAErB,EAAsB,qBACf,EAAwB,kBAEpC,KALU,CAAC,CAAC,cAAc,EAErB,aAAa,CAAC,QAAQ,EACf,CAAC,CAAC,sBAAsB,EAEnC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,0NAAA,0CAEC,EAAgB,eAErB,EAAqB,qBACd,EAAuB,wBAG9B,EAAsB,qBACf,EAAwB,kBAEpC,KATU,CAAC,CAAC,cAAc,EAErB,aAAa,CAAC,OAAO,EACd,CAAC,CAAC,qBAAqB,EAG9B,aAAa,CAAC,QAAQ,EACf,CAAC,CAAC,sBAAsB,EAEnC;QACJ,CAAC;QACD,eAAe;YACb,OAAO,GAAG,6LAAA,0HAIT,KAAC;QACJ,CAAC;KACF,CAAC;AA1G8D,CA0G9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\n\nexport const globalClasses = prefix('masked-internal')({\n input: 'input',\n disabled: 'disabled',\n selected: 'selected',\n masked: 'masked',\n colored: 'colored',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n input(t: Theme) {\n return css`\n color-scheme: ${t.inputColorScheme};\n\n &:-internal-autofill-selected {\n background-color: ${t.inputBg} !important;\n background-image: none !important;\n color: ${t.inputTextColor} !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px ${t.inputBg} inset;\n box-shadow: 0 0 0 1000px ${t.inputBg} inset;\n -webkit-text-fill-color: ${t.inputTextColor} !important;\n color: ${t.inputTextColor} !important;\n transition:\n background-color 0s 600000s,\n color 0s 600000s !important;\n }\n\n &:disabled {\n color: ${t.inputTextColorDisabled};\n\n &:-internal-autofill-selected {\n background-color: ${t.inputDisabledBg} !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px ${t.inputDisabledBg} inset;\n box-shadow: 0 0 0 1000px ${t.inputDisabledBg} inset;\n }\n }\n\n &.${globalClasses.masked} {\n color: transparent;\n -webkit-text-fill-color: transparent;\n caret-color: ${t.inputTextColor};\n\n &::selection {\n background-color: transparent !important;\n color: transparent !important;\n -webkit-text-fill-color: transparent !important;\n }\n\n /* Текст рисует MaskOverlay; браузер при autofill не должен перебивать fill-color. */\n &:-internal-autofill-selected {\n color: transparent !important;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n -webkit-text-fill-color: transparent !important;\n color: transparent !important;\n }\n }\n `;\n },\n overlay() {\n return css`\n position: absolute;\n inset: 0;\n pointer-events: none;\n user-select: none;\n overflow: hidden;\n display: flex;\n align-items: center;\n z-index: 2;\n `;\n },\n typed(t: Theme) {\n return css`\n white-space: pre;\n color: ${t.inputTextColor};\n\n &.${globalClasses.disabled} {\n color: ${t.inputTextColorDisabled};\n }\n `;\n },\n mask(t: Theme) {\n return css`\n white-space: pre;\n color: ${t.inputTextColor};\n\n &.${globalClasses.colored} {\n color: ${t.inputPlaceholderColor};\n }\n\n &.${globalClasses.disabled} {\n color: ${t.inputTextColorDisabled};\n }\n `;\n },\n selectedSegment() {\n return css`\n background-color: #3390ff;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n `;\n },\n}));\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { MaskedPattern } from '../react-imask/imask/index.js';
|
|
2
|
+
import type { SlotMap } from './types.js';
|
|
3
|
+
/**
|
|
4
|
+
* Строит карту соответствия позиций displayValue и raw-слотов для текущей маски.
|
|
5
|
+
* Временно сбрасывает IMask в пустое состояние с `lazy: false`, чтобы получить
|
|
6
|
+
* полный шаблон с плейсхолдерами (например, `"__.__"` для `mask="99.99"`).
|
|
7
|
+
*
|
|
8
|
+
* @param imask — IMask-инстанс с настроенной маской.
|
|
9
|
+
* @returns карта пользовательских слотов и отображения masked ↔ raw.
|
|
10
|
+
*/
|
|
11
|
+
export declare function buildSlotMap(imask: MaskedPattern): SlotMap;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Строит карту соответствия позиций displayValue и raw-слотов для текущей маски.
|
|
3
|
+
* Временно сбрасывает IMask в пустое состояние с `lazy: false`, чтобы получить
|
|
4
|
+
* полный шаблон с плейсхолдерами (например, `"__.__"` для `mask="99.99"`).
|
|
5
|
+
*
|
|
6
|
+
* @param imask — IMask-инстанс с настроенной маской.
|
|
7
|
+
* @returns карта пользовательских слотов и отображения masked ↔ raw.
|
|
8
|
+
*/
|
|
9
|
+
export function buildSlotMap(imask) {
|
|
10
|
+
var _a, _b, _c;
|
|
11
|
+
// Сохраняем состояние
|
|
12
|
+
var savedRaw = imask.unmaskedValue;
|
|
13
|
+
var savedLazy = (_c = (_b = (_a = imask._masked) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.lazy) !== null && _c !== void 0 ? _c : true;
|
|
14
|
+
// Получаем пустой шаблон: "_._._" для mask="99.99"
|
|
15
|
+
imask.unmaskedValue = '';
|
|
16
|
+
imask.updateOptions({ lazy: false });
|
|
17
|
+
var emptyDisplay = imask.displayValue;
|
|
18
|
+
// Восстанавливаем состояние
|
|
19
|
+
imask.unmaskedValue = savedRaw;
|
|
20
|
+
imask.updateOptions({ lazy: savedLazy });
|
|
21
|
+
var placeholderChar = imask.placeholderChar;
|
|
22
|
+
var userSlots = [];
|
|
23
|
+
var maskedToRaw = [];
|
|
24
|
+
var rawToMasked = [];
|
|
25
|
+
for (var i = 0; i < emptyDisplay.length; i++) {
|
|
26
|
+
if (emptyDisplay[i] === placeholderChar) {
|
|
27
|
+
rawToMasked.push(i);
|
|
28
|
+
maskedToRaw.push(userSlots.length);
|
|
29
|
+
userSlots.push(i);
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
maskedToRaw.push(null);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return { userSlots: userSlots, maskedToRaw: maskedToRaw, rawToMasked: rawToMasked };
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=buildSlotMap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buildSlotMap.js","sourceRoot":"","sources":["buildSlotMap.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,KAAoB;;IAC/C,sBAAsB;IACtB,IAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;IACrC,IAAM,SAAS,GAAG,MAAA,MAAA,MAAC,KAAa,CAAC,OAAO,0CAAE,OAAO,0CAAE,IAAI,mCAAI,IAAI,CAAC;IAEhE,mDAAmD;IACnD,KAAK,CAAC,aAAa,GAAG,EAAE,CAAC;IACzB,KAAK,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IACrC,IAAM,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;IAExC,4BAA4B;IAC5B,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAEzC,IAAM,eAAe,GAAG,KAAK,CAAC,eAAe,CAAC;IAC9C,IAAM,SAAS,GAAa,EAAE,CAAC;IAC/B,IAAM,WAAW,GAAyB,EAAE,CAAC;IAC7C,IAAM,WAAW,GAAa,EAAE,CAAC;IAEjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAC7C,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,eAAe,EAAE,CAAC;YACxC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACpB,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;YACnC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED,OAAO,EAAE,SAAS,WAAA,EAAE,WAAW,aAAA,EAAE,WAAW,aAAA,EAAE,CAAC;AACjD,CAAC","sourcesContent":["import type { MaskedPattern } from '../react-imask/imask/index.js';\nimport type { SlotMap } from './types.js';\n\n/**\n * Строит карту соответствия позиций displayValue и raw-слотов для текущей маски.\n * Временно сбрасывает IMask в пустое состояние с `lazy: false`, чтобы получить\n * полный шаблон с плейсхолдерами (например, `\"__.__\"` для `mask=\"99.99\"`).\n *\n * @param imask — IMask-инстанс с настроенной маской.\n * @returns карта пользовательских слотов и отображения masked ↔ raw.\n */\nexport function buildSlotMap(imask: MaskedPattern): SlotMap {\n // Сохраняем состояние\n const savedRaw = imask.unmaskedValue;\n const savedLazy = (imask as any)._masked?.options?.lazy ?? true;\n\n // Получаем пустой шаблон: \"_._._\" для mask=\"99.99\"\n imask.unmaskedValue = '';\n imask.updateOptions({ lazy: false });\n const emptyDisplay = imask.displayValue;\n\n // Восстанавливаем состояние\n imask.unmaskedValue = savedRaw;\n imask.updateOptions({ lazy: savedLazy });\n\n const placeholderChar = imask.placeholderChar;\n const userSlots: number[] = [];\n const maskedToRaw: Array<number | null> = [];\n const rawToMasked: number[] = [];\n\n for (let i = 0; i < emptyDisplay.length; i++) {\n if (emptyDisplay[i] === placeholderChar) {\n rawToMasked.push(i);\n maskedToRaw.push(userSlots.length);\n userSlots.push(i);\n } else {\n maskedToRaw.push(null);\n }\n }\n\n return { userSlots, maskedToRaw, rawToMasked };\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
/** Горизонтальный offset начала текста overlay относительно левого края input. */
|
|
3
|
+
export declare function measureOverlayTextStart(input: HTMLInputElement, overlayContainer: HTMLElement | null): number;
|
|
4
|
+
/** Смещение текста input влево, чтобы каретка совпала с overlay при center/right align. */
|
|
5
|
+
export declare function computeMaskAlignPadding(input: HTMLInputElement, displayValue: string, textAlign?: React.CSSProperties['textAlign'], overlayContainer?: HTMLElement | null): number;
|
|
6
|
+
export declare function needsMaskAlignPadding(textAlign?: React.CSSProperties['textAlign']): boolean;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { getOwnerGlobalObject, isBrowser } from '../../../lib/globalObject.js';
|
|
2
|
+
import { measureInputTextWidth } from './measureInputTextWidth.js';
|
|
3
|
+
/** Горизонтальный offset начала текста overlay относительно левого края input. */
|
|
4
|
+
export function measureOverlayTextStart(input, overlayContainer) {
|
|
5
|
+
if (!overlayContainer) {
|
|
6
|
+
return 0;
|
|
7
|
+
}
|
|
8
|
+
var textEl = overlayContainer.querySelector('[data-tid="masked-input-overlay"]');
|
|
9
|
+
if (!(textEl === null || textEl === void 0 ? void 0 : textEl.textContent)) {
|
|
10
|
+
return 0;
|
|
11
|
+
}
|
|
12
|
+
var globalObject = getOwnerGlobalObject(input);
|
|
13
|
+
if (!isBrowser(globalObject) || !('createRange' in globalObject.document)) {
|
|
14
|
+
return 0;
|
|
15
|
+
}
|
|
16
|
+
var range = globalObject.document.createRange();
|
|
17
|
+
range.selectNodeContents(textEl);
|
|
18
|
+
var textRect = range.getBoundingClientRect();
|
|
19
|
+
var inputRect = input.getBoundingClientRect();
|
|
20
|
+
return Math.max(0, textRect.left - inputRect.left);
|
|
21
|
+
}
|
|
22
|
+
function computeMaskAlignPaddingFromTextWidth(input, displayValue, textAlign) {
|
|
23
|
+
var textWidth = measureInputTextWidth(input, displayValue);
|
|
24
|
+
var availableWidth = input.clientWidth;
|
|
25
|
+
if (textAlign === 'center') {
|
|
26
|
+
return Math.max(0, (availableWidth - textWidth) / 2);
|
|
27
|
+
}
|
|
28
|
+
return Math.max(0, availableWidth - textWidth);
|
|
29
|
+
}
|
|
30
|
+
/** Смещение текста input влево, чтобы каретка совпала с overlay при center/right align. */
|
|
31
|
+
export function computeMaskAlignPadding(input, displayValue, textAlign, overlayContainer) {
|
|
32
|
+
if (textAlign !== 'center' && textAlign !== 'right') {
|
|
33
|
+
return 0;
|
|
34
|
+
}
|
|
35
|
+
if (!displayValue) {
|
|
36
|
+
return 0;
|
|
37
|
+
}
|
|
38
|
+
var measuredStart = measureOverlayTextStart(input, overlayContainer !== null && overlayContainer !== void 0 ? overlayContainer : null);
|
|
39
|
+
if (measuredStart > 0) {
|
|
40
|
+
return measuredStart;
|
|
41
|
+
}
|
|
42
|
+
return computeMaskAlignPaddingFromTextWidth(input, displayValue, textAlign);
|
|
43
|
+
}
|
|
44
|
+
export function needsMaskAlignPadding(textAlign) {
|
|
45
|
+
return textAlign === 'center' || textAlign === 'right';
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=computeMaskAlignPadding.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"computeMaskAlignPadding.js","sourceRoot":"","sources":["computeMaskAlignPadding.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,kFAAkF;AAClF,MAAM,UAAU,uBAAuB,CAAC,KAAuB,EAAE,gBAAoC;IACnG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,CAAC,CAAC;IACX,CAAC;IAED,IAAM,MAAM,GAAG,gBAAgB,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC;IACnF,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAA,EAAE,CAAC;QACzB,OAAO,CAAC,CAAC;IACX,CAAC;IAED,IAAM,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACjD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,aAAa,IAAI,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC1E,OAAO,CAAC,CAAC;IACX,CAAC;IAED,IAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAClD,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACjC,IAAM,QAAQ,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAC/C,IAAM,SAAS,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAEhD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,oCAAoC,CAC3C,KAAuB,EACvB,YAAoB,EACpB,SAA6B;IAE7B,IAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IAC7D,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC;IAEzC,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC;AACjD,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,uBAAuB,CACrC,KAAuB,EACvB,YAAoB,EACpB,SAA4C,EAC5C,gBAAqC;IAErC,IAAI,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;QACpD,OAAO,CAAC,CAAC;IACX,CAAC;IAED,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,CAAC,CAAC;IACX,CAAC;IAED,IAAM,aAAa,GAAG,uBAAuB,CAAC,KAAK,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,IAAI,CAAC,CAAC;IAC/E,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;QACtB,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,OAAO,oCAAoC,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AAC9E,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,SAA4C;IAChF,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,OAAO,CAAC;AACzD,CAAC","sourcesContent":["import type React from 'react';\n\nimport { getOwnerGlobalObject, isBrowser } from '../../../lib/globalObject.js';\nimport { measureInputTextWidth } from './measureInputTextWidth.js';\n\n/** Горизонтальный offset начала текста overlay относительно левого края input. */\nexport function measureOverlayTextStart(input: HTMLInputElement, overlayContainer: HTMLElement | null): number {\n if (!overlayContainer) {\n return 0;\n }\n\n const textEl = overlayContainer.querySelector('[data-tid=\"masked-input-overlay\"]');\n if (!textEl?.textContent) {\n return 0;\n }\n\n const globalObject = getOwnerGlobalObject(input);\n if (!isBrowser(globalObject) || !('createRange' in globalObject.document)) {\n return 0;\n }\n\n const range = globalObject.document.createRange();\n range.selectNodeContents(textEl);\n const textRect = range.getBoundingClientRect();\n const inputRect = input.getBoundingClientRect();\n\n return Math.max(0, textRect.left - inputRect.left);\n}\n\nfunction computeMaskAlignPaddingFromTextWidth(\n input: HTMLInputElement,\n displayValue: string,\n textAlign: 'center' | 'right',\n): number {\n const textWidth = measureInputTextWidth(input, displayValue);\n const availableWidth = input.clientWidth;\n\n if (textAlign === 'center') {\n return Math.max(0, (availableWidth - textWidth) / 2);\n }\n\n return Math.max(0, availableWidth - textWidth);\n}\n\n/** Смещение текста input влево, чтобы каретка совпала с overlay при center/right align. */\nexport function computeMaskAlignPadding(\n input: HTMLInputElement,\n displayValue: string,\n textAlign?: React.CSSProperties['textAlign'],\n overlayContainer?: HTMLElement | null,\n): number {\n if (textAlign !== 'center' && textAlign !== 'right') {\n return 0;\n }\n\n if (!displayValue) {\n return 0;\n }\n\n const measuredStart = measureOverlayTextStart(input, overlayContainer ?? null);\n if (measuredStart > 0) {\n return measuredStart;\n }\n\n return computeMaskAlignPaddingFromTextWidth(input, displayValue, textAlign);\n}\n\nexport function needsMaskAlignPadding(textAlign?: React.CSSProperties['textAlign']): boolean {\n return textAlign === 'center' || textAlign === 'right';\n}\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { SlotMap } from './types.js';
|
|
2
|
+
/** Masked-позиция каретки после вставки в rawCursorPos. */
|
|
3
|
+
export declare function computePasteMaskedCursor(rawBefore: string, rawAfter: string, resultRaw: string, rawCursorPos: number, slotMap: SlotMap, typedLength: number): number;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/** Masked-позиция каретки после вставки в rawCursorPos. */
|
|
2
|
+
export function computePasteMaskedCursor(rawBefore, rawAfter, resultRaw, rawCursorPos, slotMap, typedLength) {
|
|
3
|
+
var _a;
|
|
4
|
+
var insertedRawLength = resultRaw.length - rawBefore.length - rawAfter.length;
|
|
5
|
+
var newRawCursorPos = rawCursorPos + Math.max(0, insertedRawLength);
|
|
6
|
+
if (newRawCursorPos >= slotMap.rawToMasked.length) {
|
|
7
|
+
return typedLength;
|
|
8
|
+
}
|
|
9
|
+
return (_a = slotMap.rawToMasked[newRawCursorPos]) !== null && _a !== void 0 ? _a : typedLength;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=computePasteMaskedCursor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"computePasteMaskedCursor.js","sourceRoot":"","sources":["computePasteMaskedCursor.ts"],"names":[],"mappings":"AAEA,2DAA2D;AAC3D,MAAM,UAAU,wBAAwB,CACtC,SAAiB,EACjB,QAAgB,EAChB,SAAiB,EACjB,YAAoB,EACpB,OAAgB,EAChB,WAAmB;;IAEnB,IAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;IAChF,IAAM,eAAe,GAAG,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;IAEtE,IAAI,eAAe,IAAI,OAAO,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAClD,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,OAAO,MAAA,OAAO,CAAC,WAAW,CAAC,eAAe,CAAC,mCAAI,WAAW,CAAC;AAC7D,CAAC","sourcesContent":["import type { SlotMap } from './types.js';\n\n/** Masked-позиция каретки после вставки в rawCursorPos. */\nexport function computePasteMaskedCursor(\n rawBefore: string,\n rawAfter: string,\n resultRaw: string,\n rawCursorPos: number,\n slotMap: SlotMap,\n typedLength: number,\n): number {\n const insertedRawLength = resultRaw.length - rawBefore.length - rawAfter.length;\n const newRawCursorPos = rawCursorPos + Math.max(0, insertedRawLength);\n\n if (newRawCursorPos >= slotMap.rawToMasked.length) {\n return typedLength;\n }\n\n return slotMap.rawToMasked[newRawCursorPos] ?? typedLength;\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { MaskEngine } from './types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Извлекает raw (unmasked) значение из masked или unmasked строки.
|
|
4
|
+
* Принимает любой формат — IMask сам разберёт.
|
|
5
|
+
*
|
|
6
|
+
* @param value — значение из props или буфера обмена (masked/unmasked).
|
|
7
|
+
* @param engine — движок маски с IMask-инстансом.
|
|
8
|
+
* @returns строка только из пользовательских символов без литералов маски.
|
|
9
|
+
*/
|
|
10
|
+
export declare function extractRaw(value: string | number | null | undefined, engine: Pick<MaskEngine, 'imask'>): string;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Извлекает raw (unmasked) значение из masked или unmasked строки.
|
|
3
|
+
* Принимает любой формат — IMask сам разберёт.
|
|
4
|
+
*
|
|
5
|
+
* @param value — значение из props или буфера обмена (masked/unmasked).
|
|
6
|
+
* @param engine — движок маски с IMask-инстансом.
|
|
7
|
+
* @returns строка только из пользовательских символов без литералов маски.
|
|
8
|
+
*/
|
|
9
|
+
export function extractRaw(value, engine) {
|
|
10
|
+
if (value === null || value === undefined || value === '') {
|
|
11
|
+
return '';
|
|
12
|
+
}
|
|
13
|
+
engine.imask.value = String(value);
|
|
14
|
+
return engine.imask.rawInputValue;
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=extractRaw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"extractRaw.js","sourceRoot":"","sources":["extractRaw.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,KAAyC,EAAE,MAAiC;IACrG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QAC1D,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,OAAO,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC;AACpC,CAAC","sourcesContent":["import type { MaskEngine } from './types.js';\n\n/**\n * Извлекает raw (unmasked) значение из masked или unmasked строки.\n * Принимает любой формат — IMask сам разберёт.\n *\n * @param value — значение из props или буфера обмена (masked/unmasked).\n * @param engine — движок маски с IMask-инстансом.\n * @returns строка только из пользовательских символов без литералов маски.\n */\nexport function extractRaw(value: string | number | null | undefined, engine: Pick<MaskEngine, 'imask'>): string {\n if (value === null || value === undefined || value === '') {\n return '';\n }\n engine.imask.value = String(value);\n return engine.imask.rawInputValue;\n}\n"]}
|