@hh.ru/magritte-ui-input 9.0.12 → 9.1.1
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/BaseInput.js +1 -1
- package/DateTimeInput.d.ts +2 -1
- package/DateTimeInput.js +7 -5
- package/DateTimeInput.js.map +1 -1
- package/UncontrolledDateTimeInput.d.ts +2 -1
- package/UncontrolledDateTimeInput.js +1 -1
- package/index.css +99 -99
- package/{index.esm-LrCm-Ziw.js → index.esm-CO13rGcB.js} +179 -2
- package/{index.esm-LrCm-Ziw.js.map → index.esm-CO13rGcB.js.map} +1 -1
- package/index.js +1 -1
- package/maskito-exports.d.ts +1 -1
- package/maskito-exports.js +1 -1
- package/package.json +5 -5
- package/types.d.ts +2 -0
- package/useDateTimeMask.d.ts +1 -1
- package/useDateTimeMask.js +14 -7
- package/useDateTimeMask.js.map +1 -1
package/BaseInput.js
CHANGED
|
@@ -12,7 +12,7 @@ import { useFocus } from './useFocus.js';
|
|
|
12
12
|
import { useInputAriaProps } from './useInputAriaProps.js';
|
|
13
13
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
14
14
|
|
|
15
|
-
var styles = {"input":"magritte-input___LVTID_9-
|
|
15
|
+
var styles = {"input":"magritte-input___LVTID_9-1-1","label":"magritte-label___YlOQk_9-1-1","elevated":"magritte-elevated___kPcsM_9-1-1","focused":"magritte-focused___dxrHD_9-1-1","invalid":"magritte-invalid___L5MVa_9-1-1","disabled":"magritte-disabled___0NH6E_9-1-1","position-container":"magritte-position-container___kZnvZ_9-1-1","positionContainer":"magritte-position-container___kZnvZ_9-1-1","field":"magritte-field___9S8Tw_9-1-1","hint":"magritte-hint___EFGK0_9-1-1","additional-value":"magritte-additional-value___9Kyap_9-1-1","additionalValue":"magritte-additional-value___9Kyap_9-1-1","label_elevated":"magritte-label_elevated___PVcpC_9-1-1","labelElevated":"magritte-label_elevated___PVcpC_9-1-1","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_9-1-1","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_9-1-1","icon":"magritte-icon___HEDsQ_9-1-1","focus-visible":"magritte-focus-visible___QvCO1_9-1-1","focusVisible":"magritte-focus-visible___QvCO1_9-1-1","right-container":"magritte-right-container___N0B0o_9-1-1","rightContainer":"magritte-right-container___N0B0o_9-1-1","with-icon":"magritte-with-icon___TPBe2_9-1-1","withIcon":"magritte-with-icon___TPBe2_9-1-1","large":"magritte-large___9frRh_9-1-1","small":"magritte-small___iQL4F_9-1-1","autofill-helper":"magritte-autofill-helper___WFjOW_9-1-1","autofillHelper":"magritte-autofill-helper___WFjOW_9-1-1","content-container":"magritte-content-container___s-0kX_9-1-1","contentContainer":"magritte-content-container___s-0kX_9-1-1","rigging-container":"magritte-rigging-container___Up9Lb_9-1-1","riggingContainer":"magritte-rigging-container___Up9Lb_9-1-1","input__mask":"magritte-input__mask___CHda2_9-1-1","inputMask":"magritte-input__mask___CHda2_9-1-1","value-ghost":"magritte-value-ghost___IXNZj_9-1-1","valueGhost":"magritte-value-ghost___IXNZj_9-1-1","hint-container":"magritte-hint-container___rGsD8_9-1-1","hintContainer":"magritte-hint-container___rGsD8_9-1-1","counter":"magritte-counter___Bld3Q_9-1-1","value-container":"magritte-value-container___6ReT7_9-1-1","valueContainer":"magritte-value-container___6ReT7_9-1-1"};
|
|
16
16
|
|
|
17
17
|
const matchIconSize = (size, icon) => {
|
|
18
18
|
return icon &&
|
package/DateTimeInput.d.ts
CHANGED
|
@@ -5,4 +5,5 @@ export declare const DateTimeInput: import("react").ForwardRefExoticComponent<im
|
|
|
5
5
|
timeRounding?: import("@hh.ru/magritte-ui-input/types").TimeInputRounding;
|
|
6
6
|
onButtonClick?: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
7
7
|
hideMask?: boolean;
|
|
8
|
-
|
|
8
|
+
range?: boolean;
|
|
9
|
+
} & import("@hh.ru/magritte-ui-input/types").ControlledProps & Omit<InputHTMLAttributes<HTMLInputElement>, "onButtonClick" | keyof import("@hh.ru/magritte-ui-input/types").InputBaseProps | keyof import("@hh.ru/magritte-ui-input/types").ControlledProps | "range" | "dateMask" | "timeMask" | "timeRounding" | "hideMask"> & import("react").RefAttributes<HTMLInputElement>>;
|
package/DateTimeInput.js
CHANGED
|
@@ -13,10 +13,10 @@ import '@hh.ru/magritte-ui-form-helper';
|
|
|
13
13
|
import './useFocus.js';
|
|
14
14
|
import './useInputAriaProps.js';
|
|
15
15
|
import '@hh.ru/magritte-ui-typography';
|
|
16
|
-
import './index.esm-
|
|
16
|
+
import './index.esm-CO13rGcB.js';
|
|
17
17
|
|
|
18
|
-
const DateTimeInput = forwardRef(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, ...props }, ref) => {
|
|
19
|
-
const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding);
|
|
18
|
+
const DateTimeInput = forwardRef(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, range, ...props }, ref) => {
|
|
19
|
+
const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding, range);
|
|
20
20
|
const inputRef = useMultipleRefs(maskedInputRef, ref);
|
|
21
21
|
const onBlur = dateMask === 'dd'
|
|
22
22
|
? (event) => {
|
|
@@ -42,8 +42,10 @@ const DateTimeInput = forwardRef(({ dateMask, timeMask, timeRounding, onButtonCl
|
|
|
42
42
|
if (timeMask) {
|
|
43
43
|
parts.push('00:00');
|
|
44
44
|
}
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
const placeholder = parts.join(', ');
|
|
46
|
+
const rangeAllowed = range && dateMask !== 'dd' && !timeMask;
|
|
47
|
+
return rangeAllowed ? [placeholder, placeholder].join(' – ') : placeholder;
|
|
48
|
+
}, [dateMask, timeMask, hideMask, range]);
|
|
47
49
|
return (jsx(BaseInput, { type: "text", inputMode: "decimal", fixedPlaceholder: maskedPlaceholder, ...props, ...((onButtonClick &&
|
|
48
50
|
(size === 'small'
|
|
49
51
|
? {
|
package/DateTimeInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.js","sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import { InputHTMLAttributes, forwardRef, useMemo, FocusEventHandler } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport {\n CalendarOutlinedSize16,\n ClockOutlinedSize16,\n CalendarOutlinedSize24,\n ClockOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { ControlledDateTimeInputProps } from '@hh.ru/magritte-ui-input/types';\nimport { useDateTimeMask } from '@hh.ru/magritte-ui-input/useDateTimeMask';\n\nexport const DateTimeInput = forwardRef<\n HTMLInputElement,\n ControlledDateTimeInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ControlledDateTimeInputProps>\n>(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, ...props }, ref) => {\n const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding);\n const inputRef = useMultipleRefs(maskedInputRef, ref);\n\n const onBlur: FocusEventHandler<HTMLInputElement> | undefined =\n dateMask === 'dd'\n ? (event) => {\n if (props.value.length === 1) {\n if (props.value === '0') {\n props.onChange('');\n } else {\n props.onChange(props.value.padStart(2, '0'));\n }\n }\n props.onBlur?.(event);\n }\n : props.onBlur;\n\n const maskedPlaceholder = useMemo(() => {\n if (hideMask) {\n return undefined;\n }\n const parts = [];\n\n if (dateMask) {\n parts.push(dateMask.replace(/d/g, 'Д').replace(/m/g, 'М').replace(/y/g, 'Г'));\n }\n if (timeMask) {\n parts.push('00:00');\n }\n\n
|
|
1
|
+
{"version":3,"file":"DateTimeInput.js","sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import { InputHTMLAttributes, forwardRef, useMemo, FocusEventHandler } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport {\n CalendarOutlinedSize16,\n ClockOutlinedSize16,\n CalendarOutlinedSize24,\n ClockOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { ControlledDateTimeInputProps } from '@hh.ru/magritte-ui-input/types';\nimport { useDateTimeMask } from '@hh.ru/magritte-ui-input/useDateTimeMask';\n\nexport const DateTimeInput = forwardRef<\n HTMLInputElement,\n ControlledDateTimeInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ControlledDateTimeInputProps>\n>(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, range, ...props }, ref) => {\n const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding, range);\n const inputRef = useMultipleRefs(maskedInputRef, ref);\n\n const onBlur: FocusEventHandler<HTMLInputElement> | undefined =\n dateMask === 'dd'\n ? (event) => {\n if (props.value.length === 1) {\n if (props.value === '0') {\n props.onChange('');\n } else {\n props.onChange(props.value.padStart(2, '0'));\n }\n }\n props.onBlur?.(event);\n }\n : props.onBlur;\n\n const maskedPlaceholder = useMemo(() => {\n if (hideMask) {\n return undefined;\n }\n const parts = [];\n\n if (dateMask) {\n parts.push(dateMask.replace(/d/g, 'Д').replace(/m/g, 'М').replace(/y/g, 'Г'));\n }\n if (timeMask) {\n parts.push('00:00');\n }\n\n const placeholder = parts.join(', ');\n const rangeAllowed = range && dateMask !== 'dd' && !timeMask;\n return rangeAllowed ? [placeholder, placeholder].join(' – ') : placeholder;\n }, [dateMask, timeMask, hideMask, range]);\n\n return (\n <BaseInput\n type=\"text\"\n inputMode=\"decimal\"\n fixedPlaceholder={maskedPlaceholder}\n {...props}\n {...((onButtonClick &&\n (size === 'small'\n ? {\n buttonIcon: timeMask && !dateMask ? ClockOutlinedSize16 : CalendarOutlinedSize16,\n onButtonClick,\n }\n : {\n buttonIcon: timeMask && !dateMask ? ClockOutlinedSize24 : CalendarOutlinedSize24,\n onButtonClick,\n })) ??\n {})}\n ref={inputRef}\n size={size}\n autoComplete=\"off\"\n onBlur={onBlur}\n />\n );\n});\n\nDateTimeInput.displayName = 'DateTimeInput';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;AAaO,MAAM,aAAa,GAAG,UAAU,CAGrC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC5F,IAAA,MAAM,cAAc,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;IAChF,MAAM,QAAQ,GAAG,eAAe,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;AAEtD,IAAA,MAAM,MAAM,GACR,QAAQ,KAAK,IAAI;AACb,UAAE,CAAC,KAAK,KAAI;YACN,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,gBAAA,IAAI,KAAK,CAAC,KAAK,KAAK,GAAG,EAAE;AACrB,oBAAA,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;iBACtB;qBAAM;AACH,oBAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;iBAChD;aACJ;AACD,YAAA,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;SACzB;AACH,UAAE,KAAK,CAAC,MAAM,CAAC;AAEvB,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,IAAI,QAAQ,EAAE;AACV,YAAA,OAAO,SAAS,CAAC;SACpB;QACD,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,IAAI,QAAQ,EAAE;YACV,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;SACjF;QACD,IAAI,QAAQ,EAAE;AACV,YAAA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACvB;QAED,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,YAAY,GAAG,KAAK,IAAI,QAAQ,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;AAC7D,QAAA,OAAO,YAAY,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC;KAC9E,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1C,QACIA,IAAC,SAAS,EAAA,EACN,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,gBAAgB,EAAE,iBAAiB,EAAA,GAC/B,KAAK,EACL,IAAC,CAAC,aAAa;aACd,IAAI,KAAK,OAAO;AACb,kBAAE;AACI,oBAAA,UAAU,EAAE,QAAQ,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,sBAAsB;oBAChF,aAAa;AAChB,iBAAA;AACH,kBAAE;AACI,oBAAA,UAAU,EAAE,QAAQ,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,sBAAsB;oBAChF,aAAa;AAChB,iBAAA,CAAC;AACR,YAAA,EAAE,GACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,YAAY,EAAC,KAAK,EAClB,MAAM,EAAE,MAAM,EAAA,CAChB,EACJ;AACN,CAAC,EAAE;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
|
|
@@ -5,4 +5,5 @@ export declare const UncontrolledDateTimeInput: import("react").ForwardRefExotic
|
|
|
5
5
|
timeRounding?: import("@hh.ru/magritte-ui-input/types").TimeInputRounding;
|
|
6
6
|
onButtonClick?: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
7
7
|
hideMask?: boolean;
|
|
8
|
-
|
|
8
|
+
range?: boolean;
|
|
9
|
+
} & Partial<import("@hh.ru/magritte-ui-input/types").ControlledProps> & Omit<InputHTMLAttributes<HTMLInputElement>, "onButtonClick" | keyof import("@hh.ru/magritte-ui-input/types").InputBaseProps | keyof import("@hh.ru/magritte-ui-input/types").ControlledProps | "range" | "dateMask" | "timeMask" | "timeRounding" | "hideMask"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -15,7 +15,7 @@ import './useFocus.js';
|
|
|
15
15
|
import './useInputAriaProps.js';
|
|
16
16
|
import '@hh.ru/magritte-ui-typography';
|
|
17
17
|
import './useDateTimeMask.js';
|
|
18
|
-
import './index.esm-
|
|
18
|
+
import './index.esm-CO13rGcB.js';
|
|
19
19
|
|
|
20
20
|
const UncontrolledDateTimeInput = forwardRef(({ value, onChange, ...restProps }, ref) => {
|
|
21
21
|
const [currentValue, changeHandler] = useUncontrolledInput(value, onChange);
|