@banzamel/mineralui 1.3.0 → 1.4.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/README.md +1 -1
- package/dist/{MAvatar-B4Y9P5ua.js → MAvatar-B0uPeciT.js} +3 -3
- package/dist/{MAvatar-B4Y9P5ua.js.map → MAvatar-B0uPeciT.js.map} +1 -1
- package/dist/{MAvatar-D4ZC9wml.cjs → MAvatar-DlFdIi6R.cjs} +2 -2
- package/dist/{MAvatar-D4ZC9wml.cjs.map → MAvatar-DlFdIi6R.cjs.map} +1 -1
- package/dist/{MBadge-BaeeIRhu.js → MBadge-5PivwWxe.js} +2 -2
- package/dist/{MBadge-BaeeIRhu.js.map → MBadge-5PivwWxe.js.map} +1 -1
- package/dist/{MBadge-DJuqtMP7.cjs → MBadge-DNqOptef.cjs} +2 -2
- package/dist/{MBadge-DJuqtMP7.cjs.map → MBadge-DNqOptef.cjs.map} +1 -1
- package/dist/{MButton-pSNx-6UK.js → MButton-Bfe4iq51.js} +2 -2
- package/dist/{MButton-pSNx-6UK.js.map → MButton-Bfe4iq51.js.map} +1 -1
- package/dist/{MButton-Rg85cgO1.cjs → MButton-CtEFKjYZ.cjs} +2 -2
- package/dist/{MButton-Rg85cgO1.cjs.map → MButton-CtEFKjYZ.cjs.map} +1 -1
- package/dist/{MDataTable-_afEvx2S.cjs → MDataTable-CVwnVouZ.cjs} +2 -2
- package/dist/{MDataTable-_afEvx2S.cjs.map → MDataTable-CVwnVouZ.cjs.map} +1 -1
- package/dist/{MDataTable-D5SnGm3D.js → MDataTable-D0ONRmcC.js} +3 -3
- package/dist/{MDataTable-D5SnGm3D.js.map → MDataTable-D0ONRmcC.js.map} +1 -1
- package/dist/{MDrawer-CHvOVWPw.js → MDrawer-C7rLXC_O.js} +2 -2
- package/dist/{MDrawer-CHvOVWPw.js.map → MDrawer-C7rLXC_O.js.map} +1 -1
- package/dist/{MDrawer-2NDNRU77.cjs → MDrawer-DF42-zF2.cjs} +2 -2
- package/dist/{MDrawer-2NDNRU77.cjs.map → MDrawer-DF42-zF2.cjs.map} +1 -1
- package/dist/{MHeading-C5s-kb2D.js → MHeading-DBS5Kytw.js} +3 -3
- package/dist/{MHeading-C5s-kb2D.js.map → MHeading-DBS5Kytw.js.map} +1 -1
- package/dist/{MHeading-CvAYmqMN.cjs → MHeading-XCMJNMYB.cjs} +2 -2
- package/dist/{MHeading-CvAYmqMN.cjs.map → MHeading-XCMJNMYB.cjs.map} +1 -1
- package/dist/{MImage-DqAx0_B0.cjs → MImage-2Xztd_N6.cjs} +2 -2
- package/dist/{MImage-DqAx0_B0.cjs.map → MImage-2Xztd_N6.cjs.map} +1 -1
- package/dist/{MImage-F34N1nhB.js → MImage-UmiZwzDJ.js} +3 -3
- package/dist/{MImage-F34N1nhB.js.map → MImage-UmiZwzDJ.js.map} +1 -1
- package/dist/{MInline-BKY7arDg.js → MInline-BYsbmfkz.js} +2 -2
- package/dist/{MInline-BKY7arDg.js.map → MInline-BYsbmfkz.js.map} +1 -1
- package/dist/{MInline-FgdIt6kv.cjs → MInline-oCvhfJwM.cjs} +2 -2
- package/dist/{MInline-FgdIt6kv.cjs.map → MInline-oCvhfJwM.cjs.map} +1 -1
- package/dist/{MInput-C_Prnehc.cjs → MInput-CpEJQ9SV.cjs} +2 -2
- package/dist/{MInput-C_Prnehc.cjs.map → MInput-CpEJQ9SV.cjs.map} +1 -1
- package/dist/{MInput-DI066RK9.js → MInput-iKIeefss.js} +2 -2
- package/dist/{MInput-DI066RK9.js.map → MInput-iKIeefss.js.map} +1 -1
- package/dist/{MInputCVC-BlBZjRft.js → MInputCVC-BpGTqkQx.js} +2 -2
- package/dist/{MInputCVC-BlBZjRft.js.map → MInputCVC-BpGTqkQx.js.map} +1 -1
- package/dist/{MInputCVC-B75iBIRt.cjs → MInputCVC-BuGwm7fv.cjs} +2 -2
- package/dist/{MInputCVC-B75iBIRt.cjs.map → MInputCVC-BuGwm7fv.cjs.map} +1 -1
- package/dist/{MInputSearch-BKQnKS-9.cjs → MInputSearch-B-Lqr-QG.cjs} +2 -2
- package/dist/{MInputSearch-BKQnKS-9.cjs.map → MInputSearch-B-Lqr-QG.cjs.map} +1 -1
- package/dist/{MInputSearch-CBsBsuqu.js → MInputSearch-y3_ihYRj.js} +2 -2
- package/dist/{MInputSearch-CBsBsuqu.js.map → MInputSearch-y3_ihYRj.js.map} +1 -1
- package/dist/{MLink-DmB3rcWB.cjs → MLink-7hndQLKM.cjs} +2 -2
- package/dist/{MLink-DmB3rcWB.cjs.map → MLink-7hndQLKM.cjs.map} +1 -1
- package/dist/{MLink-BgYBHhce.js → MLink-tcICJfPn.js} +2 -2
- package/dist/{MLink-BgYBHhce.js.map → MLink-tcICJfPn.js.map} +1 -1
- package/dist/{MModal-BaA098nr.cjs → MModal-DlnT3BBp.cjs} +2 -2
- package/dist/{MModal-BaA098nr.cjs.map → MModal-DlnT3BBp.cjs.map} +1 -1
- package/dist/{MModal-DXZ2SrJt.js → MModal-___Rw8YK.js} +2 -2
- package/dist/{MModal-DXZ2SrJt.js.map → MModal-___Rw8YK.js.map} +1 -1
- package/dist/{MPagination-C6hnhbTp.cjs → MPagination-CTtr_L-Q.cjs} +2 -2
- package/dist/{MPagination-C6hnhbTp.cjs.map → MPagination-CTtr_L-Q.cjs.map} +1 -1
- package/dist/{MPagination-BFI_z3y6.js → MPagination-CzJGko3i.js} +2 -2
- package/dist/{MPagination-BFI_z3y6.js.map → MPagination-CzJGko3i.js.map} +1 -1
- package/dist/{MQrCode-DfZwkhZV.js → MQrCode-B7jbpcUj.js} +2 -2
- package/dist/{MQrCode-DfZwkhZV.js.map → MQrCode-B7jbpcUj.js.map} +1 -1
- package/dist/{MQrCode-L0trT6n3.cjs → MQrCode-Cha7657D.cjs} +2 -2
- package/dist/{MQrCode-L0trT6n3.cjs.map → MQrCode-Cha7657D.cjs.map} +1 -1
- package/dist/{MSkeleton-BEdflu0F.cjs → MSkeleton-BAkzwxOS.cjs} +2 -2
- package/dist/{MSkeleton-BEdflu0F.cjs.map → MSkeleton-BAkzwxOS.cjs.map} +1 -1
- package/dist/{MSkeleton-DX9gJ311.js → MSkeleton-Cwa-JRxo.js} +2 -2
- package/dist/{MSkeleton-DX9gJ311.js.map → MSkeleton-Cwa-JRxo.js.map} +1 -1
- package/dist/{MStack-BgwBqm-V.cjs → MStack-Bp1x4woD.cjs} +2 -2
- package/dist/{MStack-BgwBqm-V.cjs.map → MStack-Bp1x4woD.cjs.map} +1 -1
- package/dist/{MStack-Dk0GNVBT.js → MStack-DVOFZo1L.js} +2 -2
- package/dist/{MStack-Dk0GNVBT.js.map → MStack-DVOFZo1L.js.map} +1 -1
- package/dist/{MSubText-DwNeDGYg.js → MSubText-CHvUFOlt.js} +3 -3
- package/dist/{MSubText-DwNeDGYg.js.map → MSubText-CHvUFOlt.js.map} +1 -1
- package/dist/MSubText-Dg3PKnwI.cjs +2 -0
- package/dist/{MSubText-D8VxE877.cjs.map → MSubText-Dg3PKnwI.cjs.map} +1 -1
- package/dist/{MSurface-CFbX5C63.cjs → MSurface-ClPdv7a4.cjs} +2 -2
- package/dist/{MSurface-CFbX5C63.cjs.map → MSurface-ClPdv7a4.cjs.map} +1 -1
- package/dist/{MSurface-COlEjDyo.js → MSurface-FEfWBJFx.js} +2 -2
- package/dist/{MSurface-COlEjDyo.js.map → MSurface-FEfWBJFx.js.map} +1 -1
- package/dist/{MTag-DZjcHYn0.cjs → MTag-BxoSuAOj.cjs} +2 -2
- package/dist/{MTag-DZjcHYn0.cjs.map → MTag-BxoSuAOj.cjs.map} +1 -1
- package/dist/{MTag-wsCYRndK.js → MTag-CjaE6vPj.js} +3 -3
- package/dist/{MTag-wsCYRndK.js.map → MTag-CjaE6vPj.js.map} +1 -1
- package/dist/{MText-YIBipYLh.cjs → MText-CWHwmjs8.cjs} +2 -2
- package/dist/{MText-YIBipYLh.cjs.map → MText-CWHwmjs8.cjs.map} +1 -1
- package/dist/{MText-CexZuJgV.js → MText-hHMgVJ4-.js} +2 -2
- package/dist/{MText-CexZuJgV.js.map → MText-hHMgVJ4-.js.map} +1 -1
- package/dist/{cards-BguCbFp7.js → cards-1--Cy-KV.js} +10 -10
- package/dist/{cards-BguCbFp7.js.map → cards-1--Cy-KV.js.map} +1 -1
- package/dist/{cards-DgOG2sWk.cjs → cards-CTegCxIA.cjs} +2 -2
- package/dist/{cards-DgOG2sWk.cjs.map → cards-CTegCxIA.cjs.map} +1 -1
- package/dist/cards.cjs +1 -1
- package/dist/cards.js +2 -2
- package/dist/components/layout/MNavbar/MNavbar.d.ts +1 -1
- package/dist/components/layout/MNavbar/MNavbar.types.d.ts +1 -0
- package/dist/components/layout/MSidebar/MSidebar.d.ts +1 -1
- package/dist/components/layout/MSidebar/MSidebar.types.d.ts +1 -0
- package/dist/components/layout/MTopbar/MTopbar.d.ts +1 -1
- package/dist/components/layout/MTopbar/MTopbar.types.d.ts +1 -0
- package/dist/{controls-CVdInuMI.js → controls-C0qr_vMu.js} +3 -3
- package/dist/{controls-CVdInuMI.js.map → controls-C0qr_vMu.js.map} +1 -1
- package/dist/{controls-CN5d1q6e.cjs → controls-CAab2nyg.cjs} +2 -2
- package/dist/{controls-CN5d1q6e.cjs.map → controls-CAab2nyg.cjs.map} +1 -1
- package/dist/controls.cjs +1 -1
- package/dist/controls.js +2 -2
- package/dist/{data-BZ3Uio4Z.cjs → data-Uy_XSs32.cjs} +2 -2
- package/dist/{data-BZ3Uio4Z.cjs.map → data-Uy_XSs32.cjs.map} +1 -1
- package/dist/{data-BpGAUxCL.js → data-z3Uc9FSI.js} +14 -14
- package/dist/{data-BpGAUxCL.js.map → data-z3Uc9FSI.js.map} +1 -1
- package/dist/data.cjs +1 -1
- package/dist/data.js +2 -2
- package/dist/{display-gwrOWH2c.js → display-GygMuO4c.js} +3 -3
- package/dist/{display-gwrOWH2c.js.map → display-GygMuO4c.js.map} +1 -1
- package/dist/{display-CCG1eb0m.cjs → display-WS1tupQD.cjs} +2 -2
- package/dist/{display-CCG1eb0m.cjs.map → display-WS1tupQD.cjs.map} +1 -1
- package/dist/display.cjs +1 -1
- package/dist/display.js +2 -2
- package/dist/{dropdowns-HY56LZkp.cjs → dropdowns-CzqyYQwR.cjs} +2 -2
- package/dist/{dropdowns-HY56LZkp.cjs.map → dropdowns-CzqyYQwR.cjs.map} +1 -1
- package/dist/{dropdowns-CNKEy6vf.js → dropdowns-FQlxsOYd.js} +4 -4
- package/dist/{dropdowns-CNKEy6vf.js.map → dropdowns-FQlxsOYd.js.map} +1 -1
- package/dist/dropdowns.cjs +1 -1
- package/dist/dropdowns.js +1 -1
- package/dist/{feedback-DkQNQVdK.cjs → feedback-C9z4MZ-V.cjs} +2 -2
- package/dist/{feedback-DkQNQVdK.cjs.map → feedback-C9z4MZ-V.cjs.map} +1 -1
- package/dist/{feedback-BfSdnvUS.js → feedback-xtBDPbzP.js} +12 -12
- package/dist/{feedback-BfSdnvUS.js.map → feedback-xtBDPbzP.js.map} +1 -1
- package/dist/feedback.cjs +1 -1
- package/dist/feedback.js +5 -5
- package/dist/index.cjs +1 -1
- package/dist/index.js +59 -59
- package/dist/{inputs-BO7bjvyf.js → inputs-gB1ET0dG.js} +3 -3
- package/dist/{inputs-BO7bjvyf.js.map → inputs-gB1ET0dG.js.map} +1 -1
- package/dist/{inputs-vov7Kj6q.cjs → inputs-z84nU7A8.cjs} +2 -2
- package/dist/{inputs-vov7Kj6q.cjs.map → inputs-z84nU7A8.cjs.map} +1 -1
- package/dist/inputs.cjs +1 -1
- package/dist/inputs.js +4 -4
- package/dist/layout-BIPyHdYN.cjs +2 -0
- package/dist/layout-BIPyHdYN.cjs.map +1 -0
- package/dist/layout-DHVIqY-O.js +904 -0
- package/dist/layout-DHVIqY-O.js.map +1 -0
- package/dist/layout.cjs +1 -1
- package/dist/layout.js +5 -5
- package/dist/{media-BhRjHzpA.cjs → media-Ch3Fyf4K.cjs} +2 -2
- package/dist/{media-BhRjHzpA.cjs.map → media-Ch3Fyf4K.cjs.map} +1 -1
- package/dist/{media-BuIEAgV-.js → media-DV58aS3j.js} +6 -6
- package/dist/{media-BuIEAgV-.js.map → media-DV58aS3j.js.map} +1 -1
- package/dist/media.cjs +1 -1
- package/dist/media.js +3 -3
- package/dist/{overlays-CjEh_HWn.cjs → overlays-7HBAQneO.cjs} +2 -2
- package/dist/{overlays-CjEh_HWn.cjs.map → overlays-7HBAQneO.cjs.map} +1 -1
- package/dist/{overlays-D1SAF1F_.js → overlays-_zOs7GGk.js} +3 -3
- package/dist/{overlays-D1SAF1F_.js.map → overlays-_zOs7GGk.js.map} +1 -1
- package/dist/overlays.cjs +1 -1
- package/dist/overlays.js +3 -3
- package/dist/style-runtime.cjs +1 -1
- package/dist/style-runtime.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme/MTheme.types.d.ts +1 -0
- package/dist/theme/index.d.ts +2 -2
- package/dist/theme/responsive.d.ts +5 -0
- package/dist/{theme-CyIOdO9W.cjs → theme-B9iSuxqh.cjs} +2 -2
- package/dist/{theme-CyIOdO9W.cjs.map → theme-B9iSuxqh.cjs.map} +1 -1
- package/dist/{theme-Dl4EpdnW.js → theme-XRUdoLqw.js} +14 -3
- package/dist/{theme-Dl4EpdnW.js.map → theme-XRUdoLqw.js.map} +1 -1
- package/dist/theme.cjs +1 -1
- package/dist/theme.js +2 -2
- package/dist/{typography-DHjL4YTH.cjs → typography-D0dyVQlP.cjs} +2 -2
- package/dist/{typography-DHjL4YTH.cjs.map → typography-D0dyVQlP.cjs.map} +1 -1
- package/dist/{typography-BrIbvz08.js → typography-Db_SHI0H.js} +2 -2
- package/dist/{typography-BrIbvz08.js.map → typography-Db_SHI0H.js.map} +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +5 -5
- package/package.json +1 -1
- package/dist/MSubText-D8VxE877.cjs +0 -2
- package/dist/layout-BvKpFxol.js +0 -905
- package/dist/layout-BvKpFxol.js.map +0 -1
- package/dist/layout-TFV-1uoQ.cjs +0 -2
- package/dist/layout-TFV-1uoQ.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInputCVC-BlBZjRft.js","names":[],"sources":["../src/components/inputs/MInputExpDate/MInputExpDate.tsx","../src/components/inputs/MInputCVC/MInputCVC.tsx"],"sourcesContent":["import {forwardRef, useCallback, useMemo, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputExpDateProps} from './MInputExpDate.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCloseIcon, MChevronDownIcon} from '../../../icons'\nimport {MDropdownItem, MDropdownMenu} from '../../overlays'\nimport '../MInput/MInput.css'\nimport './MInputExpDate.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction padMonth(value?: string) {\n if (!value) {\n return ''\n }\n\n return value.padStart(2, '0').slice(0, 2)\n}\n\nfunction formatValue(month?: string, year?: string) {\n const resolvedMonth = padMonth(month)\n const resolvedYear = year?.slice(0, 4) ?? ''\n\n if (!resolvedMonth && !resolvedYear) {\n return ''\n }\n\n if (!resolvedYear) {\n return resolvedMonth\n }\n\n return `${resolvedMonth}/${resolvedYear}`\n}\n\nfunction parseValue(value: string) {\n const digits = stripDigits(value).slice(0, 6)\n\n return {\n month: digits.slice(0, 2),\n year: digits.slice(2, 6),\n }\n}\n\nfunction resolveYearBounds(minYear?: number, maxYear?: number) {\n const currentYear = new Date().getFullYear()\n const resolvedMinYear = Math.max(minYear ?? currentYear, currentYear)\n const resolvedMaxYear = Math.max(maxYear ?? currentYear + 20, resolvedMinYear)\n\n return {\n resolvedMinYear,\n resolvedMaxYear,\n }\n}\n\nfunction validateExpDate(\n value: string,\n {minYear, maxYear}: Pick<MInputExpDateProps, 'minYear' | 'maxYear'>\n): ValidationResult {\n if (!value) {\n return OK\n }\n\n const {month: monthValue, year: yearValue} = parseValue(value)\n\n if (monthValue.length !== 2 || yearValue.length !== 4) {\n return {valid: false, error: 'Expiration date is incomplete'}\n }\n\n const month = parseInt(monthValue, 10)\n const year = parseInt(yearValue, 10)\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n\n if (Number.isNaN(month) || month < 1 || month > 12) {\n return {valid: false, error: 'Use a valid month'}\n }\n\n if (Number.isNaN(year)) {\n return {valid: false, error: 'Use a valid year'}\n }\n\n if (year < resolvedMinYear) {\n return {valid: false, error: `Year must be ${resolvedMinYear} or later`}\n }\n\n if (year > resolvedMaxYear) {\n return {valid: false, error: `Year must be ${resolvedMaxYear} or earlier`}\n }\n\n const now = new Date()\n const currentMonth = now.getMonth() + 1\n const currentYear = now.getFullYear()\n\n if (year < currentYear || (year === currentYear && month < currentMonth)) {\n return {valid: false, error: 'Card has expired'}\n }\n\n return OK\n}\n\nexport const MInputExpDate = forwardRef<HTMLInputElement, MInputExpDateProps>(function MInputExpDate(\n {\n validateOnBlur = true,\n validateOnChange = false,\n minYear,\n maxYear,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n name,\n id,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success,\n onChange,\n onFocus,\n onBlur,\n onClear,\n className,\n style,\n labelClassName,\n },\n ref\n) {\n const inputRef = useRef<HTMLInputElement>(null)\n const rootRef = useRef<HTMLDivElement>(null)\n const {currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n const [focused, setFocused] = useState(false)\n const [monthMenuOpen, setMonthMenuOpen] = useState(false)\n const [yearMenuOpen, setYearMenuOpen] = useState(false)\n\n const {month, year} = parseValue(currentValue)\n const hasContent = Boolean(month || year)\n const segmentDisabled = disabled || readOnly\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n const yearOptions = useMemo(\n () => Array.from({length: resolvedMaxYear - resolvedMinYear + 1}, (_, index) => resolvedMinYear + index),\n [resolvedMaxYear, resolvedMinYear]\n )\n\n const runValidation = useCallback(\n (formattedValue: string) => {\n const result = validateExpDate(formattedValue, {minYear, maxYear})\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [maxYear, minYear, onValidationChange]\n )\n\n const syncValue = useCallback(\n (formattedValue: string) => {\n setCurrentValue(formattedValue)\n onValueChange?.(stripDigits(formattedValue), formattedValue)\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, formattedValue)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n },\n [onValueChange, ref, setCurrentValue]\n )\n\n const updateValue = useCallback(\n (nextMonth?: string, nextYear?: string) => {\n const formattedValue = formatValue(nextMonth, nextYear)\n syncValue(formattedValue)\n\n if (validateOnChange && touched) {\n runValidation(formattedValue)\n }\n },\n [runValidation, syncValue, touched, validateOnChange]\n )\n\n const focusHiddenInput = useCallback(() => {\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n input?.focus()\n }, [ref])\n\n const handleRootFocus = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n if (focused) {\n return\n }\n\n setFocused(true)\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input && event.target !== input) {\n onFocus?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n }\n },\n [focused, onFocus, ref]\n )\n\n const handleRootBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const nextTarget = event.relatedTarget as Node | null\n\n if (nextTarget && rootRef.current?.contains(nextTarget)) {\n return\n }\n\n setFocused(false)\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleSelectMonth = useCallback(\n (nextMonth: string) => {\n focusHiddenInput()\n updateValue(nextMonth, year)\n },\n [focusHiddenInput, updateValue, year]\n )\n\n const handleSelectYear = useCallback(\n (nextYear: string) => {\n focusHiddenInput()\n updateValue(month, nextYear)\n },\n [focusHiddenInput, month, updateValue]\n )\n\n const handleClear = useCallback(() => {\n syncValue('')\n setTouched(false)\n setValidation(OK)\n onValidationChange?.(OK)\n onClear?.()\n focusHiddenInput()\n }, [focusHiddenInput, onClear, onValidationChange, syncValue])\n\n const hasError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess =\n !hasError && (success !== undefined ? success : touched && validation.valid && Boolean(month && year))\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n isSuccess && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded'\n )\n\n const monthLabel = month || 'MM'\n const yearLabel = year || 'YYYY'\n\n return (\n <div\n ref={rootRef}\n className={cn('input', 'input-exp-date', resolvedColorClass, fullWidth && 'full-width', className)}\n style={style}\n onFocusCapture={handleRootFocus}\n onBlurCapture={handleRootBlur}\n >\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n isSuccess && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onClick={focusHiddenInput}>\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n <input\n ref={ref ?? inputRef}\n type=\"text\"\n value={currentValue}\n name={name}\n id={id}\n readOnly\n required={required}\n autoFocus={autoFocus}\n className=\"input-exp-date-native\"\n tabIndex={-1}\n aria-hidden=\"true\"\n onChange={onChange}\n onFocus={onFocus}\n onBlur={onBlur}\n />\n\n <div className=\"input-exp-date-segments\" aria-label=\"Expiration date\">\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !month && 'placeholder', 'static')}>\n <span>{monthLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n monthMenuOpen && 'open',\n !month && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{monthLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setMonthMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {Array.from({length: 12}, (_, index) => {\n const option = String(index + 1).padStart(2, '0')\n\n return (\n <MDropdownItem\n key={option}\n label={option}\n active={month === option}\n onClick={() => handleSelectMonth(option)}\n />\n )\n })}\n </MDropdownMenu>\n )}\n\n <span className=\"input-exp-date-separator\">/</span>\n\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !year && 'placeholder', 'static')}>\n <span>{yearLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n yearMenuOpen && 'open',\n !year && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{yearLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setYearMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {yearOptions.map((option) => (\n <MDropdownItem\n key={option}\n label={String(option)}\n active={year === String(option)}\n onClick={() => handleSelectYear(String(option))}\n />\n ))}\n </MDropdownMenu>\n )}\n </div>\n\n {clearable && hasContent && !segmentDisabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={(event) => {\n event.stopPropagation()\n handleClear()\n }}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(resolvedErrorText || helperText) && (\n <div className=\"bottom-row\">\n <span>\n {resolvedErrorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {resolvedErrorText}\n </span>\n )}\n {!resolvedErrorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n </div>\n )}\n </div>\n )\n})\n","import {forwardRef, useCallback, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputCVCProps} from './MInputCVC.types'\nimport {MInput} from '../MInput'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCheckIcon} from '../../../icons'\nimport {cn} from '../../../utils/cn'\nimport './MInputCVC.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction validateCvc(value: string, length: 3 | 4): ValidationResult {\n if (!value) {\n return OK\n }\n\n const digits = stripDigits(value)\n\n if (digits.length !== length) {\n return {valid: false, error: `Security code must have ${length} digits`}\n }\n\n return OK\n}\n\nexport const MInputCVC = forwardRef<HTMLInputElement, MInputCVCProps>(function MInputCVC(\n {\n length = 3,\n validateOnBlur = true,\n validateOnChange = false,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n onChange,\n onBlur,\n onKeyDown,\n error,\n errorText,\n success,\n placeholder,\n className,\n inputClassName,\n ...rest\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState(() =>\n stripDigits(defaultValue?.toString() ?? '').slice(0, length)\n )\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n\n const currentValue = value !== undefined ? stripDigits(value.toString()).slice(0, length) : internalValue\n\n const runValidation = useCallback(\n (nextValue: string) => {\n const result = validateCvc(nextValue, length)\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [length, onValidationChange]\n )\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const nextValue = stripDigits(event.target.value).slice(0, length)\n\n if (value === undefined) {\n setInternalValue(nextValue)\n }\n\n onValueChange?.(nextValue)\n\n if (validateOnChange && touched) {\n runValidation(nextValue)\n }\n\n onChange?.(event)\n },\n [length, onChange, onValueChange, runValidation, touched, validateOnChange, value]\n )\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {\n onKeyDown?.(event)\n return\n }\n\n if (event.ctrlKey || event.metaKey) {\n onKeyDown?.(event)\n return\n }\n\n if (!/^\\d$/.test(event.key)) {\n event.preventDefault()\n }\n\n onKeyDown?.(event)\n },\n [onKeyDown]\n )\n\n const isError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess = !isError && (success !== undefined ? success : touched && currentValue.length === length)\n const endIcon = isSuccess ? <MCheckIcon /> : undefined\n\n return (\n <MInput\n {...rest}\n ref={ref}\n type=\"text\"\n inputMode=\"numeric\"\n value={currentValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n error={isError}\n errorText={resolvedErrorText}\n success={isSuccess}\n placeholder={placeholder ?? ''.padEnd(length, '0')}\n maxLength={length}\n endIcon={endIcon}\n inputClassName={cn('input-cvc-field', inputClassName)}\n className={className}\n />\n )\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MInputCVC-BpGTqkQx.js","names":[],"sources":["../src/components/inputs/MInputExpDate/MInputExpDate.tsx","../src/components/inputs/MInputCVC/MInputCVC.tsx"],"sourcesContent":["import {forwardRef, useCallback, useMemo, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputExpDateProps} from './MInputExpDate.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCloseIcon, MChevronDownIcon} from '../../../icons'\nimport {MDropdownItem, MDropdownMenu} from '../../overlays'\nimport '../MInput/MInput.css'\nimport './MInputExpDate.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction padMonth(value?: string) {\n if (!value) {\n return ''\n }\n\n return value.padStart(2, '0').slice(0, 2)\n}\n\nfunction formatValue(month?: string, year?: string) {\n const resolvedMonth = padMonth(month)\n const resolvedYear = year?.slice(0, 4) ?? ''\n\n if (!resolvedMonth && !resolvedYear) {\n return ''\n }\n\n if (!resolvedYear) {\n return resolvedMonth\n }\n\n return `${resolvedMonth}/${resolvedYear}`\n}\n\nfunction parseValue(value: string) {\n const digits = stripDigits(value).slice(0, 6)\n\n return {\n month: digits.slice(0, 2),\n year: digits.slice(2, 6),\n }\n}\n\nfunction resolveYearBounds(minYear?: number, maxYear?: number) {\n const currentYear = new Date().getFullYear()\n const resolvedMinYear = Math.max(minYear ?? currentYear, currentYear)\n const resolvedMaxYear = Math.max(maxYear ?? currentYear + 20, resolvedMinYear)\n\n return {\n resolvedMinYear,\n resolvedMaxYear,\n }\n}\n\nfunction validateExpDate(\n value: string,\n {minYear, maxYear}: Pick<MInputExpDateProps, 'minYear' | 'maxYear'>\n): ValidationResult {\n if (!value) {\n return OK\n }\n\n const {month: monthValue, year: yearValue} = parseValue(value)\n\n if (monthValue.length !== 2 || yearValue.length !== 4) {\n return {valid: false, error: 'Expiration date is incomplete'}\n }\n\n const month = parseInt(monthValue, 10)\n const year = parseInt(yearValue, 10)\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n\n if (Number.isNaN(month) || month < 1 || month > 12) {\n return {valid: false, error: 'Use a valid month'}\n }\n\n if (Number.isNaN(year)) {\n return {valid: false, error: 'Use a valid year'}\n }\n\n if (year < resolvedMinYear) {\n return {valid: false, error: `Year must be ${resolvedMinYear} or later`}\n }\n\n if (year > resolvedMaxYear) {\n return {valid: false, error: `Year must be ${resolvedMaxYear} or earlier`}\n }\n\n const now = new Date()\n const currentMonth = now.getMonth() + 1\n const currentYear = now.getFullYear()\n\n if (year < currentYear || (year === currentYear && month < currentMonth)) {\n return {valid: false, error: 'Card has expired'}\n }\n\n return OK\n}\n\nexport const MInputExpDate = forwardRef<HTMLInputElement, MInputExpDateProps>(function MInputExpDate(\n {\n validateOnBlur = true,\n validateOnChange = false,\n minYear,\n maxYear,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n name,\n id,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success,\n onChange,\n onFocus,\n onBlur,\n onClear,\n className,\n style,\n labelClassName,\n },\n ref\n) {\n const inputRef = useRef<HTMLInputElement>(null)\n const rootRef = useRef<HTMLDivElement>(null)\n const {currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n const [focused, setFocused] = useState(false)\n const [monthMenuOpen, setMonthMenuOpen] = useState(false)\n const [yearMenuOpen, setYearMenuOpen] = useState(false)\n\n const {month, year} = parseValue(currentValue)\n const hasContent = Boolean(month || year)\n const segmentDisabled = disabled || readOnly\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n const yearOptions = useMemo(\n () => Array.from({length: resolvedMaxYear - resolvedMinYear + 1}, (_, index) => resolvedMinYear + index),\n [resolvedMaxYear, resolvedMinYear]\n )\n\n const runValidation = useCallback(\n (formattedValue: string) => {\n const result = validateExpDate(formattedValue, {minYear, maxYear})\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [maxYear, minYear, onValidationChange]\n )\n\n const syncValue = useCallback(\n (formattedValue: string) => {\n setCurrentValue(formattedValue)\n onValueChange?.(stripDigits(formattedValue), formattedValue)\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, formattedValue)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n },\n [onValueChange, ref, setCurrentValue]\n )\n\n const updateValue = useCallback(\n (nextMonth?: string, nextYear?: string) => {\n const formattedValue = formatValue(nextMonth, nextYear)\n syncValue(formattedValue)\n\n if (validateOnChange && touched) {\n runValidation(formattedValue)\n }\n },\n [runValidation, syncValue, touched, validateOnChange]\n )\n\n const focusHiddenInput = useCallback(() => {\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n input?.focus()\n }, [ref])\n\n const handleRootFocus = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n if (focused) {\n return\n }\n\n setFocused(true)\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input && event.target !== input) {\n onFocus?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n }\n },\n [focused, onFocus, ref]\n )\n\n const handleRootBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const nextTarget = event.relatedTarget as Node | null\n\n if (nextTarget && rootRef.current?.contains(nextTarget)) {\n return\n }\n\n setFocused(false)\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleSelectMonth = useCallback(\n (nextMonth: string) => {\n focusHiddenInput()\n updateValue(nextMonth, year)\n },\n [focusHiddenInput, updateValue, year]\n )\n\n const handleSelectYear = useCallback(\n (nextYear: string) => {\n focusHiddenInput()\n updateValue(month, nextYear)\n },\n [focusHiddenInput, month, updateValue]\n )\n\n const handleClear = useCallback(() => {\n syncValue('')\n setTouched(false)\n setValidation(OK)\n onValidationChange?.(OK)\n onClear?.()\n focusHiddenInput()\n }, [focusHiddenInput, onClear, onValidationChange, syncValue])\n\n const hasError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess =\n !hasError && (success !== undefined ? success : touched && validation.valid && Boolean(month && year))\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n isSuccess && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded'\n )\n\n const monthLabel = month || 'MM'\n const yearLabel = year || 'YYYY'\n\n return (\n <div\n ref={rootRef}\n className={cn('input', 'input-exp-date', resolvedColorClass, fullWidth && 'full-width', className)}\n style={style}\n onFocusCapture={handleRootFocus}\n onBlurCapture={handleRootBlur}\n >\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n isSuccess && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onClick={focusHiddenInput}>\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n <input\n ref={ref ?? inputRef}\n type=\"text\"\n value={currentValue}\n name={name}\n id={id}\n readOnly\n required={required}\n autoFocus={autoFocus}\n className=\"input-exp-date-native\"\n tabIndex={-1}\n aria-hidden=\"true\"\n onChange={onChange}\n onFocus={onFocus}\n onBlur={onBlur}\n />\n\n <div className=\"input-exp-date-segments\" aria-label=\"Expiration date\">\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !month && 'placeholder', 'static')}>\n <span>{monthLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n monthMenuOpen && 'open',\n !month && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{monthLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setMonthMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {Array.from({length: 12}, (_, index) => {\n const option = String(index + 1).padStart(2, '0')\n\n return (\n <MDropdownItem\n key={option}\n label={option}\n active={month === option}\n onClick={() => handleSelectMonth(option)}\n />\n )\n })}\n </MDropdownMenu>\n )}\n\n <span className=\"input-exp-date-separator\">/</span>\n\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !year && 'placeholder', 'static')}>\n <span>{yearLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n yearMenuOpen && 'open',\n !year && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{yearLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setYearMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {yearOptions.map((option) => (\n <MDropdownItem\n key={option}\n label={String(option)}\n active={year === String(option)}\n onClick={() => handleSelectYear(String(option))}\n />\n ))}\n </MDropdownMenu>\n )}\n </div>\n\n {clearable && hasContent && !segmentDisabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={(event) => {\n event.stopPropagation()\n handleClear()\n }}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(resolvedErrorText || helperText) && (\n <div className=\"bottom-row\">\n <span>\n {resolvedErrorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {resolvedErrorText}\n </span>\n )}\n {!resolvedErrorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n </div>\n )}\n </div>\n )\n})\n","import {forwardRef, useCallback, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputCVCProps} from './MInputCVC.types'\nimport {MInput} from '../MInput'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCheckIcon} from '../../../icons'\nimport {cn} from '../../../utils/cn'\nimport './MInputCVC.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction validateCvc(value: string, length: 3 | 4): ValidationResult {\n if (!value) {\n return OK\n }\n\n const digits = stripDigits(value)\n\n if (digits.length !== length) {\n return {valid: false, error: `Security code must have ${length} digits`}\n }\n\n return OK\n}\n\nexport const MInputCVC = forwardRef<HTMLInputElement, MInputCVCProps>(function MInputCVC(\n {\n length = 3,\n validateOnBlur = true,\n validateOnChange = false,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n onChange,\n onBlur,\n onKeyDown,\n error,\n errorText,\n success,\n placeholder,\n className,\n inputClassName,\n ...rest\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState(() =>\n stripDigits(defaultValue?.toString() ?? '').slice(0, length)\n )\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n\n const currentValue = value !== undefined ? stripDigits(value.toString()).slice(0, length) : internalValue\n\n const runValidation = useCallback(\n (nextValue: string) => {\n const result = validateCvc(nextValue, length)\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [length, onValidationChange]\n )\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const nextValue = stripDigits(event.target.value).slice(0, length)\n\n if (value === undefined) {\n setInternalValue(nextValue)\n }\n\n onValueChange?.(nextValue)\n\n if (validateOnChange && touched) {\n runValidation(nextValue)\n }\n\n onChange?.(event)\n },\n [length, onChange, onValueChange, runValidation, touched, validateOnChange, value]\n )\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {\n onKeyDown?.(event)\n return\n }\n\n if (event.ctrlKey || event.metaKey) {\n onKeyDown?.(event)\n return\n }\n\n if (!/^\\d$/.test(event.key)) {\n event.preventDefault()\n }\n\n onKeyDown?.(event)\n },\n [onKeyDown]\n )\n\n const isError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess = !isError && (success !== undefined ? success : touched && currentValue.length === length)\n const endIcon = isSuccess ? <MCheckIcon /> : undefined\n\n return (\n <MInput\n {...rest}\n ref={ref}\n type=\"text\"\n inputMode=\"numeric\"\n value={currentValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n error={isError}\n errorText={resolvedErrorText}\n success={isSuccess}\n placeholder={placeholder ?? ''.padEnd(length, '0')}\n maxLength={length}\n endIcon={endIcon}\n inputClassName={cn('input-cvc-field', inputClassName)}\n className={className}\n />\n )\n})\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MInput-
|
|
2
|
-
//# sourceMappingURL=MInputCVC-
|
|
1
|
+
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MInput-CpEJQ9SV.cjs`),r=require(`./MDropdownMenu-X7ywPqth.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);var o={valid:!0};function s(e){return e.replace(/\D/g,``)}function c(e){return e?e.padStart(2,`0`).slice(0,2):``}function l(e,t){let n=c(e),r=t?.slice(0,4)??``;return!n&&!r?``:r?`${n}/${r}`:n}function u(e){let t=s(e).slice(0,6);return{month:t.slice(0,2),year:t.slice(2,6)}}function d(e,t){let n=new Date().getFullYear(),r=Math.max(e??n,n);return{resolvedMinYear:r,resolvedMaxYear:Math.max(t??n+20,r)}}function f(e,{minYear:t,maxYear:n}){if(!e)return o;let{month:r,year:i}=u(e);if(r.length!==2||i.length!==4)return{valid:!1,error:`Expiration date is incomplete`};let a=parseInt(r,10),s=parseInt(i,10),{resolvedMinYear:c,resolvedMaxYear:l}=d(t,n);if(Number.isNaN(a)||a<1||a>12)return{valid:!1,error:`Use a valid month`};if(Number.isNaN(s))return{valid:!1,error:`Use a valid year`};if(s<c)return{valid:!1,error:`Year must be ${c} or later`};if(s>l)return{valid:!1,error:`Year must be ${l} or earlier`};let f=new Date,p=f.getMonth()+1,m=f.getFullYear();return s<m||s===m&&a<p?{valid:!1,error:`Card has expired`}:o}var p=(0,i.forwardRef)(function({validateOnBlur:c=!0,validateOnChange:p=!1,minYear:m,maxYear:h,onValidationChange:g,onValueChange:_,value:ee,defaultValue:v,name:y,id:b,disabled:x=!1,readOnly:te=!1,required:S=!1,autoFocus:ne=!1,variant:re=`outlined`,size:ie=`md`,color:C,fullWidth:ae=!1,rounded:w=!1,label:T,helperText:E,errorText:D,startIcon:O,endIcon:k,clearable:oe=!1,error:A=!1,success:j,onChange:M,onFocus:N,onBlur:P,onClear:se,className:ce,style:le,labelClassName:ue},F){let I=(0,i.useRef)(null),de=(0,i.useRef)(null),{currentValue:L,setCurrentValue:fe}=n.n(ee,v),[R,z]=(0,i.useState)(o),[B,V]=(0,i.useState)(!1),[H,U]=(0,i.useState)(!1),[pe,me]=(0,i.useState)(!1),[he,ge]=(0,i.useState)(!1),{month:W,year:G}=u(L),_e=!!(W||G),K=x||te,{resolvedMinYear:q,resolvedMaxYear:ve}=d(m,h),ye=(0,i.useMemo)(()=>Array.from({length:ve-q+1},(e,t)=>q+t),[ve,q]),J=(0,i.useCallback)(e=>{let t=f(e,{minYear:m,maxYear:h});return z(t),g?.(t),t},[h,m,g]),Y=(0,i.useCallback)(e=>{fe(e),_?.(s(e),e);let t=F?.current??I.current;t&&((Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`)?.set)?.call(t,e),t.dispatchEvent(new Event(`input`,{bubbles:!0})))},[_,F,fe]),X=(0,i.useCallback)((e,t)=>{let n=l(e,t);Y(n),p&&B&&J(n)},[J,Y,B,p]),Z=(0,i.useCallback)(()=>{(F?.current??I.current)?.focus()},[F]),be=(0,i.useCallback)(e=>{if(H)return;U(!0);let t=F?.current??I.current;t&&e.target!==t&&N?.(e)},[H,N,F]),xe=(0,i.useCallback)(e=>{let t=e.relatedTarget;t&&de.current?.contains(t)||(U(!1),V(!0),c&&L&&J(L),P?.(e))},[L,P,J,c]),Se=(0,i.useCallback)(e=>{Z(),X(e,G)},[Z,X,G]),Ce=(0,i.useCallback)(e=>{Z(),X(W,e)},[Z,W,X]),we=(0,i.useCallback)(()=>{Y(``),V(!1),z(o),g?.(o),se?.(),Z()},[Z,se,g,Y]),Q=A||B&&!R.valid,$=D||(B&&!R.valid?R.error:void 0),Te=!Q&&(j===void 0?B&&R.valid&&!!(W&&G):j),Ee=Q?`color-error`:C?`color-${C}`:void 0,De=t.t(`container`,`field-${re}`,`field-${ie}`,H&&`focused`,Q&&`input-error`,Te&&!Q&&`input-success`,Ee,x&&`disabled`,w&&`rounded`),Oe=W||`MM`,ke=G||`YYYY`;return(0,a.jsxs)(`div`,{ref:de,className:t.t(`input`,`input-exp-date`,Ee,ae&&`full-width`,ce),style:le,onFocusCapture:be,onBlurCapture:xe,children:[T&&(0,a.jsx)(`label`,{htmlFor:b,className:t.t(`field-label`,H&&`focused`,Q&&`error`,Te&&!Q&&`success`,S&&`required`,ue),children:T}),(0,a.jsxs)(`div`,{className:De,onClick:Z,children:[O&&(0,a.jsx)(`span`,{className:`start-icon`,children:O}),(0,a.jsx)(`input`,{ref:F??I,type:`text`,value:L,name:y,id:b,readOnly:!0,required:S,autoFocus:ne,className:`input-exp-date-native`,tabIndex:-1,"aria-hidden":`true`,onChange:M,onFocus:N,onBlur:P}),(0,a.jsxs)(`div`,{className:`input-exp-date-segments`,"aria-label":`Expiration date`,children:[K?(0,a.jsx)(`span`,{className:t.t(`input-exp-date-trigger`,!W&&`placeholder`,`static`),children:(0,a.jsx)(`span`,{children:Oe})}):(0,a.jsx)(r.i,{trigger:(0,a.jsxs)(`span`,{className:t.t(`input-exp-date-trigger`,pe&&`open`,!W&&`placeholder`),onMouseDown:Z,children:[(0,a.jsx)(`span`,{children:Oe}),(0,a.jsx)(e.Mi,{size:16})]}),openOn:`click`,closeOnSelect:!0,onOpenChange:me,popoverClassName:`input-exp-date-popover`,children:Array.from({length:12},(e,t)=>{let n=String(t+1).padStart(2,`0`);return(0,a.jsx)(r.r,{label:n,active:W===n,onClick:()=>Se(n)},n)})}),(0,a.jsx)(`span`,{className:`input-exp-date-separator`,children:`/`}),K?(0,a.jsx)(`span`,{className:t.t(`input-exp-date-trigger`,!G&&`placeholder`,`static`),children:(0,a.jsx)(`span`,{children:ke})}):(0,a.jsx)(r.i,{trigger:(0,a.jsxs)(`span`,{className:t.t(`input-exp-date-trigger`,he&&`open`,!G&&`placeholder`),onMouseDown:Z,children:[(0,a.jsx)(`span`,{children:ke}),(0,a.jsx)(e.Mi,{size:16})]}),openOn:`click`,closeOnSelect:!0,onOpenChange:ge,popoverClassName:`input-exp-date-popover`,children:ye.map(e=>(0,a.jsx)(r.r,{label:String(e),active:G===String(e),onClick:()=>Ce(String(e))},e))})]}),oe&&_e&&!K&&(0,a.jsx)(`button`,{type:`button`,className:`clear-btn clear-btn-base`,onClick:e=>{e.stopPropagation(),we()},tabIndex:-1,"aria-label":`Clear input`,children:(0,a.jsx)(e.Ii,{})}),k&&(0,a.jsx)(`span`,{className:`end-icon`,children:k})]}),($||E)&&(0,a.jsx)(`div`,{className:`bottom-row`,children:(0,a.jsxs)(`span`,{children:[$&&(0,a.jsx)(`span`,{id:b?`${b}-error`:void 0,className:`field-error`,role:`alert`,children:$}),!$&&E&&(0,a.jsx)(`span`,{id:b?`${b}-helper`:void 0,className:`field-helper`,children:E})]})})]})}),m={valid:!0};function h(e){return e.replace(/\D/g,``)}function g(e,t){return e?h(e).length===t?m:{valid:!1,error:`Security code must have ${t} digits`}:m}var _=(0,i.forwardRef)(function({length:r=3,validateOnBlur:o=!0,validateOnChange:s=!1,onValidationChange:c,onValueChange:l,value:u,defaultValue:d,onChange:f,onBlur:p,onKeyDown:_,error:ee,errorText:v,success:y,placeholder:b,className:x,inputClassName:te,...S},ne){let[re,ie]=(0,i.useState)(()=>h(d?.toString()??``).slice(0,r)),[C,ae]=(0,i.useState)(m),[w,T]=(0,i.useState)(!1),E=u===void 0?re:h(u.toString()).slice(0,r),D=(0,i.useCallback)(e=>{let t=g(e,r);return ae(t),c?.(t),t},[r,c]),O=(0,i.useCallback)(e=>{let t=h(e.target.value).slice(0,r);u===void 0&&ie(t),l?.(t),s&&w&&D(t),f?.(e)},[r,f,l,D,w,s,u]),k=(0,i.useCallback)(e=>{T(!0),o&&E&&D(E),p?.(e)},[E,p,D,o]),oe=(0,i.useCallback)(e=>{if([`Backspace`,`Delete`,`Tab`,`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key)){_?.(e);return}if(e.ctrlKey||e.metaKey){_?.(e);return}/^\d$/.test(e.key)||e.preventDefault(),_?.(e)},[_]),A=ee||w&&!C.valid,j=v||(w&&!C.valid?C.error:void 0),M=!A&&(y===void 0?w&&E.length===r:y),N=M?(0,a.jsx)(e.Fi,{}):void 0;return(0,a.jsx)(n.t,{...S,ref:ne,type:`text`,inputMode:`numeric`,value:E,onChange:O,onBlur:k,onKeyDown:oe,error:A,errorText:j,success:M,placeholder:b??``.padEnd(r,`0`),maxLength:r,endIcon:N,inputClassName:t.t(`input-cvc-field`,te),className:x})});Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
|
|
2
|
+
//# sourceMappingURL=MInputCVC-BuGwm7fv.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInputCVC-B75iBIRt.cjs","names":[],"sources":["../src/components/inputs/MInputExpDate/MInputExpDate.tsx","../src/components/inputs/MInputCVC/MInputCVC.tsx"],"sourcesContent":["import {forwardRef, useCallback, useMemo, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputExpDateProps} from './MInputExpDate.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCloseIcon, MChevronDownIcon} from '../../../icons'\nimport {MDropdownItem, MDropdownMenu} from '../../overlays'\nimport '../MInput/MInput.css'\nimport './MInputExpDate.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction padMonth(value?: string) {\n if (!value) {\n return ''\n }\n\n return value.padStart(2, '0').slice(0, 2)\n}\n\nfunction formatValue(month?: string, year?: string) {\n const resolvedMonth = padMonth(month)\n const resolvedYear = year?.slice(0, 4) ?? ''\n\n if (!resolvedMonth && !resolvedYear) {\n return ''\n }\n\n if (!resolvedYear) {\n return resolvedMonth\n }\n\n return `${resolvedMonth}/${resolvedYear}`\n}\n\nfunction parseValue(value: string) {\n const digits = stripDigits(value).slice(0, 6)\n\n return {\n month: digits.slice(0, 2),\n year: digits.slice(2, 6),\n }\n}\n\nfunction resolveYearBounds(minYear?: number, maxYear?: number) {\n const currentYear = new Date().getFullYear()\n const resolvedMinYear = Math.max(minYear ?? currentYear, currentYear)\n const resolvedMaxYear = Math.max(maxYear ?? currentYear + 20, resolvedMinYear)\n\n return {\n resolvedMinYear,\n resolvedMaxYear,\n }\n}\n\nfunction validateExpDate(\n value: string,\n {minYear, maxYear}: Pick<MInputExpDateProps, 'minYear' | 'maxYear'>\n): ValidationResult {\n if (!value) {\n return OK\n }\n\n const {month: monthValue, year: yearValue} = parseValue(value)\n\n if (monthValue.length !== 2 || yearValue.length !== 4) {\n return {valid: false, error: 'Expiration date is incomplete'}\n }\n\n const month = parseInt(monthValue, 10)\n const year = parseInt(yearValue, 10)\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n\n if (Number.isNaN(month) || month < 1 || month > 12) {\n return {valid: false, error: 'Use a valid month'}\n }\n\n if (Number.isNaN(year)) {\n return {valid: false, error: 'Use a valid year'}\n }\n\n if (year < resolvedMinYear) {\n return {valid: false, error: `Year must be ${resolvedMinYear} or later`}\n }\n\n if (year > resolvedMaxYear) {\n return {valid: false, error: `Year must be ${resolvedMaxYear} or earlier`}\n }\n\n const now = new Date()\n const currentMonth = now.getMonth() + 1\n const currentYear = now.getFullYear()\n\n if (year < currentYear || (year === currentYear && month < currentMonth)) {\n return {valid: false, error: 'Card has expired'}\n }\n\n return OK\n}\n\nexport const MInputExpDate = forwardRef<HTMLInputElement, MInputExpDateProps>(function MInputExpDate(\n {\n validateOnBlur = true,\n validateOnChange = false,\n minYear,\n maxYear,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n name,\n id,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success,\n onChange,\n onFocus,\n onBlur,\n onClear,\n className,\n style,\n labelClassName,\n },\n ref\n) {\n const inputRef = useRef<HTMLInputElement>(null)\n const rootRef = useRef<HTMLDivElement>(null)\n const {currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n const [focused, setFocused] = useState(false)\n const [monthMenuOpen, setMonthMenuOpen] = useState(false)\n const [yearMenuOpen, setYearMenuOpen] = useState(false)\n\n const {month, year} = parseValue(currentValue)\n const hasContent = Boolean(month || year)\n const segmentDisabled = disabled || readOnly\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n const yearOptions = useMemo(\n () => Array.from({length: resolvedMaxYear - resolvedMinYear + 1}, (_, index) => resolvedMinYear + index),\n [resolvedMaxYear, resolvedMinYear]\n )\n\n const runValidation = useCallback(\n (formattedValue: string) => {\n const result = validateExpDate(formattedValue, {minYear, maxYear})\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [maxYear, minYear, onValidationChange]\n )\n\n const syncValue = useCallback(\n (formattedValue: string) => {\n setCurrentValue(formattedValue)\n onValueChange?.(stripDigits(formattedValue), formattedValue)\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, formattedValue)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n },\n [onValueChange, ref, setCurrentValue]\n )\n\n const updateValue = useCallback(\n (nextMonth?: string, nextYear?: string) => {\n const formattedValue = formatValue(nextMonth, nextYear)\n syncValue(formattedValue)\n\n if (validateOnChange && touched) {\n runValidation(formattedValue)\n }\n },\n [runValidation, syncValue, touched, validateOnChange]\n )\n\n const focusHiddenInput = useCallback(() => {\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n input?.focus()\n }, [ref])\n\n const handleRootFocus = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n if (focused) {\n return\n }\n\n setFocused(true)\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input && event.target !== input) {\n onFocus?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n }\n },\n [focused, onFocus, ref]\n )\n\n const handleRootBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const nextTarget = event.relatedTarget as Node | null\n\n if (nextTarget && rootRef.current?.contains(nextTarget)) {\n return\n }\n\n setFocused(false)\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleSelectMonth = useCallback(\n (nextMonth: string) => {\n focusHiddenInput()\n updateValue(nextMonth, year)\n },\n [focusHiddenInput, updateValue, year]\n )\n\n const handleSelectYear = useCallback(\n (nextYear: string) => {\n focusHiddenInput()\n updateValue(month, nextYear)\n },\n [focusHiddenInput, month, updateValue]\n )\n\n const handleClear = useCallback(() => {\n syncValue('')\n setTouched(false)\n setValidation(OK)\n onValidationChange?.(OK)\n onClear?.()\n focusHiddenInput()\n }, [focusHiddenInput, onClear, onValidationChange, syncValue])\n\n const hasError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess =\n !hasError && (success !== undefined ? success : touched && validation.valid && Boolean(month && year))\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n isSuccess && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded'\n )\n\n const monthLabel = month || 'MM'\n const yearLabel = year || 'YYYY'\n\n return (\n <div\n ref={rootRef}\n className={cn('input', 'input-exp-date', resolvedColorClass, fullWidth && 'full-width', className)}\n style={style}\n onFocusCapture={handleRootFocus}\n onBlurCapture={handleRootBlur}\n >\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n isSuccess && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onClick={focusHiddenInput}>\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n <input\n ref={ref ?? inputRef}\n type=\"text\"\n value={currentValue}\n name={name}\n id={id}\n readOnly\n required={required}\n autoFocus={autoFocus}\n className=\"input-exp-date-native\"\n tabIndex={-1}\n aria-hidden=\"true\"\n onChange={onChange}\n onFocus={onFocus}\n onBlur={onBlur}\n />\n\n <div className=\"input-exp-date-segments\" aria-label=\"Expiration date\">\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !month && 'placeholder', 'static')}>\n <span>{monthLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n monthMenuOpen && 'open',\n !month && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{monthLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setMonthMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {Array.from({length: 12}, (_, index) => {\n const option = String(index + 1).padStart(2, '0')\n\n return (\n <MDropdownItem\n key={option}\n label={option}\n active={month === option}\n onClick={() => handleSelectMonth(option)}\n />\n )\n })}\n </MDropdownMenu>\n )}\n\n <span className=\"input-exp-date-separator\">/</span>\n\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !year && 'placeholder', 'static')}>\n <span>{yearLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n yearMenuOpen && 'open',\n !year && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{yearLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setYearMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {yearOptions.map((option) => (\n <MDropdownItem\n key={option}\n label={String(option)}\n active={year === String(option)}\n onClick={() => handleSelectYear(String(option))}\n />\n ))}\n </MDropdownMenu>\n )}\n </div>\n\n {clearable && hasContent && !segmentDisabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={(event) => {\n event.stopPropagation()\n handleClear()\n }}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(resolvedErrorText || helperText) && (\n <div className=\"bottom-row\">\n <span>\n {resolvedErrorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {resolvedErrorText}\n </span>\n )}\n {!resolvedErrorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n </div>\n )}\n </div>\n )\n})\n","import {forwardRef, useCallback, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputCVCProps} from './MInputCVC.types'\nimport {MInput} from '../MInput'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCheckIcon} from '../../../icons'\nimport {cn} from '../../../utils/cn'\nimport './MInputCVC.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction validateCvc(value: string, length: 3 | 4): ValidationResult {\n if (!value) {\n return OK\n }\n\n const digits = stripDigits(value)\n\n if (digits.length !== length) {\n return {valid: false, error: `Security code must have ${length} digits`}\n }\n\n return OK\n}\n\nexport const MInputCVC = forwardRef<HTMLInputElement, MInputCVCProps>(function MInputCVC(\n {\n length = 3,\n validateOnBlur = true,\n validateOnChange = false,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n onChange,\n onBlur,\n onKeyDown,\n error,\n errorText,\n success,\n placeholder,\n className,\n inputClassName,\n ...rest\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState(() =>\n stripDigits(defaultValue?.toString() ?? '').slice(0, length)\n )\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n\n const currentValue = value !== undefined ? stripDigits(value.toString()).slice(0, length) : internalValue\n\n const runValidation = useCallback(\n (nextValue: string) => {\n const result = validateCvc(nextValue, length)\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [length, onValidationChange]\n )\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const nextValue = stripDigits(event.target.value).slice(0, length)\n\n if (value === undefined) {\n setInternalValue(nextValue)\n }\n\n onValueChange?.(nextValue)\n\n if (validateOnChange && touched) {\n runValidation(nextValue)\n }\n\n onChange?.(event)\n },\n [length, onChange, onValueChange, runValidation, touched, validateOnChange, value]\n )\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {\n onKeyDown?.(event)\n return\n }\n\n if (event.ctrlKey || event.metaKey) {\n onKeyDown?.(event)\n return\n }\n\n if (!/^\\d$/.test(event.key)) {\n event.preventDefault()\n }\n\n onKeyDown?.(event)\n },\n [onKeyDown]\n )\n\n const isError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess = !isError && (success !== undefined ? success : touched && currentValue.length === length)\n const endIcon = isSuccess ? <MCheckIcon /> : undefined\n\n return (\n <MInput\n {...rest}\n ref={ref}\n type=\"text\"\n inputMode=\"numeric\"\n value={currentValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n error={isError}\n errorText={resolvedErrorText}\n success={isSuccess}\n placeholder={placeholder ?? ''.padEnd(length, '0')}\n maxLength={length}\n endIcon={endIcon}\n inputClassName={cn('input-cvc-field', inputClassName)}\n className={className}\n />\n )\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MInputCVC-BuGwm7fv.cjs","names":[],"sources":["../src/components/inputs/MInputExpDate/MInputExpDate.tsx","../src/components/inputs/MInputCVC/MInputCVC.tsx"],"sourcesContent":["import {forwardRef, useCallback, useMemo, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputExpDateProps} from './MInputExpDate.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCloseIcon, MChevronDownIcon} from '../../../icons'\nimport {MDropdownItem, MDropdownMenu} from '../../overlays'\nimport '../MInput/MInput.css'\nimport './MInputExpDate.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction padMonth(value?: string) {\n if (!value) {\n return ''\n }\n\n return value.padStart(2, '0').slice(0, 2)\n}\n\nfunction formatValue(month?: string, year?: string) {\n const resolvedMonth = padMonth(month)\n const resolvedYear = year?.slice(0, 4) ?? ''\n\n if (!resolvedMonth && !resolvedYear) {\n return ''\n }\n\n if (!resolvedYear) {\n return resolvedMonth\n }\n\n return `${resolvedMonth}/${resolvedYear}`\n}\n\nfunction parseValue(value: string) {\n const digits = stripDigits(value).slice(0, 6)\n\n return {\n month: digits.slice(0, 2),\n year: digits.slice(2, 6),\n }\n}\n\nfunction resolveYearBounds(minYear?: number, maxYear?: number) {\n const currentYear = new Date().getFullYear()\n const resolvedMinYear = Math.max(minYear ?? currentYear, currentYear)\n const resolvedMaxYear = Math.max(maxYear ?? currentYear + 20, resolvedMinYear)\n\n return {\n resolvedMinYear,\n resolvedMaxYear,\n }\n}\n\nfunction validateExpDate(\n value: string,\n {minYear, maxYear}: Pick<MInputExpDateProps, 'minYear' | 'maxYear'>\n): ValidationResult {\n if (!value) {\n return OK\n }\n\n const {month: monthValue, year: yearValue} = parseValue(value)\n\n if (monthValue.length !== 2 || yearValue.length !== 4) {\n return {valid: false, error: 'Expiration date is incomplete'}\n }\n\n const month = parseInt(monthValue, 10)\n const year = parseInt(yearValue, 10)\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n\n if (Number.isNaN(month) || month < 1 || month > 12) {\n return {valid: false, error: 'Use a valid month'}\n }\n\n if (Number.isNaN(year)) {\n return {valid: false, error: 'Use a valid year'}\n }\n\n if (year < resolvedMinYear) {\n return {valid: false, error: `Year must be ${resolvedMinYear} or later`}\n }\n\n if (year > resolvedMaxYear) {\n return {valid: false, error: `Year must be ${resolvedMaxYear} or earlier`}\n }\n\n const now = new Date()\n const currentMonth = now.getMonth() + 1\n const currentYear = now.getFullYear()\n\n if (year < currentYear || (year === currentYear && month < currentMonth)) {\n return {valid: false, error: 'Card has expired'}\n }\n\n return OK\n}\n\nexport const MInputExpDate = forwardRef<HTMLInputElement, MInputExpDateProps>(function MInputExpDate(\n {\n validateOnBlur = true,\n validateOnChange = false,\n minYear,\n maxYear,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n name,\n id,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success,\n onChange,\n onFocus,\n onBlur,\n onClear,\n className,\n style,\n labelClassName,\n },\n ref\n) {\n const inputRef = useRef<HTMLInputElement>(null)\n const rootRef = useRef<HTMLDivElement>(null)\n const {currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n const [focused, setFocused] = useState(false)\n const [monthMenuOpen, setMonthMenuOpen] = useState(false)\n const [yearMenuOpen, setYearMenuOpen] = useState(false)\n\n const {month, year} = parseValue(currentValue)\n const hasContent = Boolean(month || year)\n const segmentDisabled = disabled || readOnly\n const {resolvedMinYear, resolvedMaxYear} = resolveYearBounds(minYear, maxYear)\n const yearOptions = useMemo(\n () => Array.from({length: resolvedMaxYear - resolvedMinYear + 1}, (_, index) => resolvedMinYear + index),\n [resolvedMaxYear, resolvedMinYear]\n )\n\n const runValidation = useCallback(\n (formattedValue: string) => {\n const result = validateExpDate(formattedValue, {minYear, maxYear})\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [maxYear, minYear, onValidationChange]\n )\n\n const syncValue = useCallback(\n (formattedValue: string) => {\n setCurrentValue(formattedValue)\n onValueChange?.(stripDigits(formattedValue), formattedValue)\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, formattedValue)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n },\n [onValueChange, ref, setCurrentValue]\n )\n\n const updateValue = useCallback(\n (nextMonth?: string, nextYear?: string) => {\n const formattedValue = formatValue(nextMonth, nextYear)\n syncValue(formattedValue)\n\n if (validateOnChange && touched) {\n runValidation(formattedValue)\n }\n },\n [runValidation, syncValue, touched, validateOnChange]\n )\n\n const focusHiddenInput = useCallback(() => {\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n input?.focus()\n }, [ref])\n\n const handleRootFocus = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n if (focused) {\n return\n }\n\n setFocused(true)\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input && event.target !== input) {\n onFocus?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n }\n },\n [focused, onFocus, ref]\n )\n\n const handleRootBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const nextTarget = event.relatedTarget as Node | null\n\n if (nextTarget && rootRef.current?.contains(nextTarget)) {\n return\n }\n\n setFocused(false)\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event as unknown as React.FocusEvent<HTMLInputElement>)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleSelectMonth = useCallback(\n (nextMonth: string) => {\n focusHiddenInput()\n updateValue(nextMonth, year)\n },\n [focusHiddenInput, updateValue, year]\n )\n\n const handleSelectYear = useCallback(\n (nextYear: string) => {\n focusHiddenInput()\n updateValue(month, nextYear)\n },\n [focusHiddenInput, month, updateValue]\n )\n\n const handleClear = useCallback(() => {\n syncValue('')\n setTouched(false)\n setValidation(OK)\n onValidationChange?.(OK)\n onClear?.()\n focusHiddenInput()\n }, [focusHiddenInput, onClear, onValidationChange, syncValue])\n\n const hasError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess =\n !hasError && (success !== undefined ? success : touched && validation.valid && Boolean(month && year))\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n isSuccess && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded'\n )\n\n const monthLabel = month || 'MM'\n const yearLabel = year || 'YYYY'\n\n return (\n <div\n ref={rootRef}\n className={cn('input', 'input-exp-date', resolvedColorClass, fullWidth && 'full-width', className)}\n style={style}\n onFocusCapture={handleRootFocus}\n onBlurCapture={handleRootBlur}\n >\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n isSuccess && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onClick={focusHiddenInput}>\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n <input\n ref={ref ?? inputRef}\n type=\"text\"\n value={currentValue}\n name={name}\n id={id}\n readOnly\n required={required}\n autoFocus={autoFocus}\n className=\"input-exp-date-native\"\n tabIndex={-1}\n aria-hidden=\"true\"\n onChange={onChange}\n onFocus={onFocus}\n onBlur={onBlur}\n />\n\n <div className=\"input-exp-date-segments\" aria-label=\"Expiration date\">\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !month && 'placeholder', 'static')}>\n <span>{monthLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n monthMenuOpen && 'open',\n !month && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{monthLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setMonthMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {Array.from({length: 12}, (_, index) => {\n const option = String(index + 1).padStart(2, '0')\n\n return (\n <MDropdownItem\n key={option}\n label={option}\n active={month === option}\n onClick={() => handleSelectMonth(option)}\n />\n )\n })}\n </MDropdownMenu>\n )}\n\n <span className=\"input-exp-date-separator\">/</span>\n\n {segmentDisabled ? (\n <span className={cn('input-exp-date-trigger', !year && 'placeholder', 'static')}>\n <span>{yearLabel}</span>\n </span>\n ) : (\n <MDropdownMenu\n trigger={\n <span\n className={cn(\n 'input-exp-date-trigger',\n yearMenuOpen && 'open',\n !year && 'placeholder'\n )}\n onMouseDown={focusHiddenInput}\n >\n <span>{yearLabel}</span>\n <MChevronDownIcon size={16} />\n </span>\n }\n openOn=\"click\"\n closeOnSelect\n onOpenChange={setYearMenuOpen}\n popoverClassName=\"input-exp-date-popover\"\n >\n {yearOptions.map((option) => (\n <MDropdownItem\n key={option}\n label={String(option)}\n active={year === String(option)}\n onClick={() => handleSelectYear(String(option))}\n />\n ))}\n </MDropdownMenu>\n )}\n </div>\n\n {clearable && hasContent && !segmentDisabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={(event) => {\n event.stopPropagation()\n handleClear()\n }}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(resolvedErrorText || helperText) && (\n <div className=\"bottom-row\">\n <span>\n {resolvedErrorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {resolvedErrorText}\n </span>\n )}\n {!resolvedErrorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n </div>\n )}\n </div>\n )\n})\n","import {forwardRef, useCallback, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputCVCProps} from './MInputCVC.types'\nimport {MInput} from '../MInput'\nimport type {ValidationResult} from '../../../utils/validators'\nimport {MCheckIcon} from '../../../icons'\nimport {cn} from '../../../utils/cn'\nimport './MInputCVC.css'\n\nconst OK: ValidationResult = {valid: true}\n\nfunction stripDigits(value: string) {\n return value.replace(/\\D/g, '')\n}\n\nfunction validateCvc(value: string, length: 3 | 4): ValidationResult {\n if (!value) {\n return OK\n }\n\n const digits = stripDigits(value)\n\n if (digits.length !== length) {\n return {valid: false, error: `Security code must have ${length} digits`}\n }\n\n return OK\n}\n\nexport const MInputCVC = forwardRef<HTMLInputElement, MInputCVCProps>(function MInputCVC(\n {\n length = 3,\n validateOnBlur = true,\n validateOnChange = false,\n onValidationChange,\n onValueChange,\n value,\n defaultValue,\n onChange,\n onBlur,\n onKeyDown,\n error,\n errorText,\n success,\n placeholder,\n className,\n inputClassName,\n ...rest\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState(() =>\n stripDigits(defaultValue?.toString() ?? '').slice(0, length)\n )\n const [validation, setValidation] = useState<ValidationResult>(OK)\n const [touched, setTouched] = useState(false)\n\n const currentValue = value !== undefined ? stripDigits(value.toString()).slice(0, length) : internalValue\n\n const runValidation = useCallback(\n (nextValue: string) => {\n const result = validateCvc(nextValue, length)\n setValidation(result)\n onValidationChange?.(result)\n return result\n },\n [length, onValidationChange]\n )\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const nextValue = stripDigits(event.target.value).slice(0, length)\n\n if (value === undefined) {\n setInternalValue(nextValue)\n }\n\n onValueChange?.(nextValue)\n\n if (validateOnChange && touched) {\n runValidation(nextValue)\n }\n\n onChange?.(event)\n },\n [length, onChange, onValueChange, runValidation, touched, validateOnChange, value]\n )\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setTouched(true)\n\n if (validateOnBlur && currentValue) {\n runValidation(currentValue)\n }\n\n onBlur?.(event)\n },\n [currentValue, onBlur, runValidation, validateOnBlur]\n )\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {\n onKeyDown?.(event)\n return\n }\n\n if (event.ctrlKey || event.metaKey) {\n onKeyDown?.(event)\n return\n }\n\n if (!/^\\d$/.test(event.key)) {\n event.preventDefault()\n }\n\n onKeyDown?.(event)\n },\n [onKeyDown]\n )\n\n const isError = error || (touched && !validation.valid)\n const resolvedErrorText = errorText || (touched && !validation.valid ? validation.error : undefined)\n const isSuccess = !isError && (success !== undefined ? success : touched && currentValue.length === length)\n const endIcon = isSuccess ? <MCheckIcon /> : undefined\n\n return (\n <MInput\n {...rest}\n ref={ref}\n type=\"text\"\n inputMode=\"numeric\"\n value={currentValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n error={isError}\n errorText={resolvedErrorText}\n success={isSuccess}\n placeholder={placeholder ?? ''.padEnd(length, '0')}\n maxLength={length}\n endIcon={endIcon}\n inputClassName={cn('input-cvc-field', inputClassName)}\n className={className}\n />\n )\n})\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./useGhostText-QMdO_HK6.cjs`),n=require(`./MInput-
|
|
2
|
-
//# sourceMappingURL=MInputSearch-
|
|
1
|
+
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./useGhostText-QMdO_HK6.cjs`),n=require(`./MInput-CpEJQ9SV.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);var a=(0,r.forwardRef)(function({debounceMs:a=300,onSearch:o,value:s,defaultValue:c,onChange:l,onKeyDown:u,onClear:d,clearable:f=!0,placeholder:p=`Search...`,...m},h){let[g,_]=(0,r.useState)(c?.toString()??``),v=s===void 0?g:s.toString(),y=t.r(e=>o?.(e),a),b=(0,r.useCallback)(e=>{s===void 0&&_(e.target.value),y(e.target.value),l?.(e)},[l,s,y]),x=(0,r.useCallback)(e=>{e.key===`Enter`&&o?.(v),u?.(e)},[v,o,u]),S=(0,r.useCallback)(()=>{s===void 0&&_(``),o?.(``),d?.()},[s,o,d]);return(0,i.jsx)(n.t,{...m,ref:h,type:`text`,value:v,onChange:b,onKeyDown:x,onClear:S,clearable:f,placeholder:p,startIcon:(0,i.jsx)(e.Li,{})})});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
|
|
2
|
+
//# sourceMappingURL=MInputSearch-B-Lqr-QG.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInputSearch-
|
|
1
|
+
{"version":3,"file":"MInputSearch-B-Lqr-QG.cjs","names":[],"sources":["../src/components/inputs/MInputSearch/MInputSearch.tsx"],"sourcesContent":["import {useState, useCallback, forwardRef} from 'react'\nimport type * as React from 'react'\nimport type {MInputSearchProps} from './MInputSearch.types'\nimport {MInput} from '../MInput'\nimport {useDebouncedCallback} from '../../../utils/useDebounce'\nimport {MSearchIcon} from '../../../icons'\n\n// Extend the base input with debounced search callbacks and an inline clear action.\nexport const MInputSearch = forwardRef<HTMLInputElement, MInputSearchProps>(function MInputSearch(\n {\n debounceMs = 300,\n onSearch,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n onClear,\n clearable = true,\n placeholder = 'Search...',\n ...rest\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState(defaultValue?.toString() ?? '')\n const currentValue = value !== undefined ? value.toString() : internalValue\n\n const debouncedSearch = useDebouncedCallback((val: string) => onSearch?.(val), debounceMs)\n\n // Update local state and debounce search notifications while typing.\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (value === undefined) {\n setInternalValue(e.target.value)\n }\n debouncedSearch(e.target.value)\n onChange?.(e)\n },\n [onChange, value, debouncedSearch]\n )\n\n // Run search immediately when the user confirms with Enter.\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearch?.(currentValue)\n }\n onKeyDown?.(e)\n },\n [currentValue, onSearch, onKeyDown]\n )\n\n // Clear both the visible field and the emitted search query.\n const handleClear = useCallback(() => {\n if (value === undefined) {\n setInternalValue('')\n }\n onSearch?.('')\n onClear?.()\n }, [value, onSearch, onClear])\n\n return (\n <MInput\n {...rest}\n ref={ref}\n type=\"text\"\n value={currentValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onClear={handleClear}\n clearable={clearable}\n placeholder={placeholder}\n startIcon={<MSearchIcon />}\n />\n )\n})\n"],"mappings":"0KAQA,IAAa,GAAA,EAAA,EAAA,YAA+D,SACxE,CACI,aAAa,IACb,WACA,QACA,eACA,WACA,YACA,UACA,YAAY,GACZ,cAAc,YACd,GAAG,GAEP,EACF,CACE,GAAM,CAAC,EAAe,IAAA,EAAA,EAAA,UAA6B,GAAc,UAAU,EAAI,GAAG,CAC5E,EAAe,IAAU,IAAA,GAA+B,EAAnB,EAAM,UAAU,CAErD,EAAkB,EAAA,EAAsB,GAAgB,IAAW,EAAI,CAAE,EAAW,CAGpF,GAAA,EAAA,EAAA,aACD,GAA2C,CACpC,IAAU,IAAA,IACV,EAAiB,EAAE,OAAO,MAAM,CAEpC,EAAgB,EAAE,OAAO,MAAM,CAC/B,IAAW,EAAE,EAEjB,CAAC,EAAU,EAAO,EAAgB,CACrC,CAGK,GAAA,EAAA,EAAA,aACD,GAA6C,CACtC,EAAE,MAAQ,SACV,IAAW,EAAa,CAE5B,IAAY,EAAE,EAElB,CAAC,EAAc,EAAU,EAAU,CACtC,CAGK,GAAA,EAAA,EAAA,iBAAgC,CAC9B,IAAU,IAAA,IACV,EAAiB,GAAG,CAExB,IAAW,GAAG,CACd,KAAW,EACZ,CAAC,EAAO,EAAU,EAAQ,CAAC,CAE9B,OACI,EAAA,EAAA,KAAC,EAAA,EAAD,CACI,GAAI,EACC,MACL,KAAK,OACL,MAAO,EACP,SAAU,EACV,UAAW,EACX,QAAS,EACE,YACE,cACb,WAAW,EAAA,EAAA,KAAC,EAAA,GAAD,EAAe,CAAA,CAC5B,CAAA,EAER"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Li as e } from "./icons-D5DK-J2C.js";
|
|
2
2
|
import { r as t } from "./useGhostText-DG0bzcao.js";
|
|
3
|
-
import { t as n } from "./MInput-
|
|
3
|
+
import { t as n } from "./MInput-iKIeefss.js";
|
|
4
4
|
import { forwardRef as r, useCallback as i, useState as a } from "react";
|
|
5
5
|
import { jsx as o } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/inputs/MInputSearch/MInputSearch.tsx
|
|
@@ -40,4 +40,4 @@ var s = r(function({ debounceMs: r = 300, onSearch: s, value: c, defaultValue: l
|
|
|
40
40
|
//#endregion
|
|
41
41
|
export { s as t };
|
|
42
42
|
|
|
43
|
-
//# sourceMappingURL=MInputSearch-
|
|
43
|
+
//# sourceMappingURL=MInputSearch-y3_ihYRj.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInputSearch-
|
|
1
|
+
{"version":3,"file":"MInputSearch-y3_ihYRj.js","names":[],"sources":["../src/components/inputs/MInputSearch/MInputSearch.tsx"],"sourcesContent":["import {useState, useCallback, forwardRef} from 'react'\nimport type * as React from 'react'\nimport type {MInputSearchProps} from './MInputSearch.types'\nimport {MInput} from '../MInput'\nimport {useDebouncedCallback} from '../../../utils/useDebounce'\nimport {MSearchIcon} from '../../../icons'\n\n// Extend the base input with debounced search callbacks and an inline clear action.\nexport const MInputSearch = forwardRef<HTMLInputElement, MInputSearchProps>(function MInputSearch(\n {\n debounceMs = 300,\n onSearch,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n onClear,\n clearable = true,\n placeholder = 'Search...',\n ...rest\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState(defaultValue?.toString() ?? '')\n const currentValue = value !== undefined ? value.toString() : internalValue\n\n const debouncedSearch = useDebouncedCallback((val: string) => onSearch?.(val), debounceMs)\n\n // Update local state and debounce search notifications while typing.\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (value === undefined) {\n setInternalValue(e.target.value)\n }\n debouncedSearch(e.target.value)\n onChange?.(e)\n },\n [onChange, value, debouncedSearch]\n )\n\n // Run search immediately when the user confirms with Enter.\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearch?.(currentValue)\n }\n onKeyDown?.(e)\n },\n [currentValue, onSearch, onKeyDown]\n )\n\n // Clear both the visible field and the emitted search query.\n const handleClear = useCallback(() => {\n if (value === undefined) {\n setInternalValue('')\n }\n onSearch?.('')\n onClear?.()\n }, [value, onSearch, onClear])\n\n return (\n <MInput\n {...rest}\n ref={ref}\n type=\"text\"\n value={currentValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onClear={handleClear}\n clearable={clearable}\n placeholder={placeholder}\n startIcon={<MSearchIcon />}\n />\n )\n})\n"],"mappings":";;;;;;AAQA,IAAa,IAAe,EAAgD,SACxE,EACI,gBAAa,KACb,aACA,UACA,iBACA,aACA,cACA,YACA,eAAY,IACZ,iBAAc,aACd,GAAG,KAEP,GACF;CACE,IAAM,CAAC,GAAe,KAAoB,EAAS,GAAc,UAAU,IAAI,GAAG,EAC5E,IAAe,MAAU,KAAA,IAA+B,IAAnB,EAAM,UAAU,EAErD,IAAkB,GAAsB,MAAgB,IAAW,EAAI,EAAE,EAAW,EAGpF,IAAe,GAChB,MAA2C;AAKxC,EAJI,MAAU,KAAA,KACV,EAAiB,EAAE,OAAO,MAAM,EAEpC,EAAgB,EAAE,OAAO,MAAM,EAC/B,IAAW,EAAE;IAEjB;EAAC;EAAU;EAAO;EAAgB,CACrC,EAGK,IAAgB,GACjB,MAA6C;AAI1C,EAHI,EAAE,QAAQ,WACV,IAAW,EAAa,EAE5B,IAAY,EAAE;IAElB;EAAC;EAAc;EAAU;EAAU,CACtC,EAGK,IAAc,QAAkB;AAKlC,EAJI,MAAU,KAAA,KACV,EAAiB,GAAG,EAExB,IAAW,GAAG,EACd,KAAW;IACZ;EAAC;EAAO;EAAU;EAAQ,CAAC;AAE9B,QACI,kBAAC,GAAD;EACI,GAAI;EACC;EACL,MAAK;EACL,OAAO;EACP,UAAU;EACV,WAAW;EACX,SAAS;EACE;EACE;EACb,WAAW,kBAAC,GAAD,EAAe,CAAA;EAC5B,CAAA;EAER"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./theme-
|
|
2
|
-
//# sourceMappingURL=MLink-
|
|
1
|
+
const e=require(`./theme-B9iSuxqh.cjs`),t=require(`./cn-CU5TNITO.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=(0,n.forwardRef)(function({component:n,to:i,tone:a=`default`,underline:o=`hover`,hidden:s,current:c=!1,block:l=!1,disabled:u=!1,className:d,children:f,href:p,onClick:m,...h},g){let _=n??`a`;function v(e){if(u){e.preventDefault();return}m?.(e)}return(0,r.jsx)(_,{ref:g,href:n||u?void 0:p,to:n?i:void 0,className:t.t(`link`,a,o,c&&`current`,l&&`block`,u&&`disabled`,d),"aria-current":c?`page`:void 0,"aria-disabled":u||void 0,onClick:v,...e.r(s),...h,children:f})});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
|
|
2
|
+
//# sourceMappingURL=MLink-7hndQLKM.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MLink-
|
|
1
|
+
{"version":3,"file":"MLink-7hndQLKM.cjs","names":[],"sources":["../src/components/typography/MLink/MLink.tsx"],"sourcesContent":["import {forwardRef} from 'react'\nimport type {MouseEvent} from 'react'\nimport type {MLinkProps} from './MLink.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport './MLink.css'\n\n// Render a semantic link that can target anchors or router link components.\nexport const MLink = forwardRef<HTMLElement, MLinkProps>(function MLink(\n {\n component,\n to,\n tone = 'default',\n underline = 'hover',\n hidden,\n current = false,\n block = false,\n disabled = false,\n className,\n children,\n href,\n onClick,\n ...rest\n },\n ref\n) {\n const Component = component ?? 'a'\n\n // Prevent disabled links from navigating while still exposing their content.\n function handleClick(event: MouseEvent<HTMLAnchorElement>) {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n }\n\n return (\n <Component\n ref={ref}\n href={component ? undefined : disabled ? undefined : href}\n to={component ? to : undefined}\n className={cn(\n 'link',\n tone,\n underline,\n current && 'current',\n block && 'block',\n disabled && 'disabled',\n className\n )}\n aria-current={current ? 'page' : undefined}\n aria-disabled={disabled || undefined}\n onClick={handleClick}\n {...getHiddenProps(hidden)}\n {...rest}\n >\n {children}\n </Component>\n )\n})\n"],"mappings":"6HAQA,IAAa,GAAA,EAAA,EAAA,YAA4C,SACrD,CACI,YACA,KACA,OAAO,UACP,YAAY,QACZ,SACA,UAAU,GACV,QAAQ,GACR,WAAW,GACX,YACA,WACA,OACA,UACA,GAAG,GAEP,EACF,CACE,IAAM,EAAY,GAAa,IAG/B,SAAS,EAAY,EAAsC,CACvD,GAAI,EAAU,CACV,EAAM,gBAAgB,CACtB,OAGJ,IAAU,EAAM,CAGpB,OACI,EAAA,EAAA,KAAC,EAAD,CACS,MACL,KAAM,GAAwB,EAAZ,IAAA,GAAmC,EACrD,GAAI,EAAY,EAAK,IAAA,GACrB,UAAW,EAAA,EACP,OACA,EACA,EACA,GAAW,UACX,GAAS,QACT,GAAY,WACZ,EACH,CACD,eAAc,EAAU,OAAS,IAAA,GACjC,gBAAe,GAAY,IAAA,GAC3B,QAAS,EACT,GAAI,EAAA,EAAe,EAAO,CAC1B,GAAI,EAEH,WACO,CAAA,EAElB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as e } from "./theme-XRUdoLqw.js";
|
|
2
2
|
import { t } from "./cn-YER3QsV1.js";
|
|
3
3
|
import { forwardRef as n } from "react";
|
|
4
4
|
import { jsx as r } from "react/jsx-runtime";
|
|
@@ -28,4 +28,4 @@ var i = n(function({ component: n, to: i, tone: a = "default", underline: o = "h
|
|
|
28
28
|
//#endregion
|
|
29
29
|
export { i as t };
|
|
30
30
|
|
|
31
|
-
//# sourceMappingURL=MLink-
|
|
31
|
+
//# sourceMappingURL=MLink-tcICJfPn.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MLink-
|
|
1
|
+
{"version":3,"file":"MLink-tcICJfPn.js","names":[],"sources":["../src/components/typography/MLink/MLink.tsx"],"sourcesContent":["import {forwardRef} from 'react'\nimport type {MouseEvent} from 'react'\nimport type {MLinkProps} from './MLink.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport './MLink.css'\n\n// Render a semantic link that can target anchors or router link components.\nexport const MLink = forwardRef<HTMLElement, MLinkProps>(function MLink(\n {\n component,\n to,\n tone = 'default',\n underline = 'hover',\n hidden,\n current = false,\n block = false,\n disabled = false,\n className,\n children,\n href,\n onClick,\n ...rest\n },\n ref\n) {\n const Component = component ?? 'a'\n\n // Prevent disabled links from navigating while still exposing their content.\n function handleClick(event: MouseEvent<HTMLAnchorElement>) {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n }\n\n return (\n <Component\n ref={ref}\n href={component ? undefined : disabled ? undefined : href}\n to={component ? to : undefined}\n className={cn(\n 'link',\n tone,\n underline,\n current && 'current',\n block && 'block',\n disabled && 'disabled',\n className\n )}\n aria-current={current ? 'page' : undefined}\n aria-disabled={disabled || undefined}\n onClick={handleClick}\n {...getHiddenProps(hidden)}\n {...rest}\n >\n {children}\n </Component>\n )\n})\n"],"mappings":";;;;;AAQA,IAAa,IAAQ,EAAoC,SACrD,EACI,cACA,OACA,UAAO,WACP,eAAY,SACZ,WACA,aAAU,IACV,WAAQ,IACR,cAAW,IACX,cACA,aACA,SACA,YACA,GAAG,KAEP,GACF;CACE,IAAM,IAAY,KAAa;CAG/B,SAAS,EAAY,GAAsC;AACvD,MAAI,GAAU;AACV,KAAM,gBAAgB;AACtB;;AAGJ,MAAU,EAAM;;AAGpB,QACI,kBAAC,GAAD;EACS;EACL,MAAM,KAAwB,IAAZ,KAAA,IAAmC;EACrD,IAAI,IAAY,IAAK,KAAA;EACrB,WAAW,EACP,QACA,GACA,GACA,KAAW,WACX,KAAS,SACT,KAAY,YACZ,EACH;EACD,gBAAc,IAAU,SAAS,KAAA;EACjC,iBAAe,KAAY,KAAA;EAC3B,SAAS;EACT,GAAI,EAAe,EAAO;EAC1B,GAAI;EAEH;EACO,CAAA;EAElB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./cn-CU5TNITO.cjs`),t=require(`./MPortal-PyRKsZxc.cjs`),n=require(`./MSkeleton-
|
|
2
|
-
//# sourceMappingURL=MModal-
|
|
1
|
+
const e=require(`./cn-CU5TNITO.cjs`),t=require(`./MPortal-PyRKsZxc.cjs`),n=require(`./MSkeleton-BAkzwxOS.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);var a=540;function o({open:o,onClose:s,title:c,description:l,footer:u,size:d=`md`,closeOnBackdrop:f=!0,closeOnEscape:p=!0,className:m,children:h,...g}){let[_,v]=(0,r.useState)(!1),[y,b]=(0,r.useState)(!1),x=(0,r.useRef)(null);return(0,r.useEffect)(()=>{o&&(v(!0),b(!1))},[o]),(0,r.useEffect)(()=>{if(!o&&_){b(!0);let e=setTimeout(()=>{v(!1),b(!1)},a);return()=>clearTimeout(e)}},[o,_]),(0,r.useEffect)(()=>{if(!o||!p)return;let e=e=>{e.key===`Escape`&&s()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[p,s,o]),(0,r.useEffect)(()=>{if(!_)return;let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}},[_]),_?(0,i.jsx)(t.t,{children:(0,i.jsx)(`div`,{ref:x,className:e.t(`mineral-backdrop`,`modal-backdrop`,y&&`closing`),onMouseDown:e=>{f&&e.target===e.currentTarget&&s()},children:(0,i.jsx)(`div`,{className:`modal-shell`,children:(0,i.jsxs)(n.n,{className:e.t(`modal`,d,m),role:`dialog`,"aria-modal":`true`,"aria-labelledby":c?`mineral-modal-title`:void 0,...g,children:[(c||l)&&(0,i.jsxs)(n.a,{children:[c&&(0,i.jsx)(`div`,{id:`mineral-modal-title`,className:`modal-title`,children:c}),l&&(0,i.jsx)(`div`,{className:`modal-description`,children:l})]}),(0,i.jsx)(n.r,{children:h}),u&&(0,i.jsx)(n.i,{children:u})]})})})}):null}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
|
|
2
|
+
//# sourceMappingURL=MModal-DlnT3BBp.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MModal-
|
|
1
|
+
{"version":3,"file":"MModal-DlnT3BBp.cjs","names":[],"sources":["../src/components/overlays/MModal/MModal.tsx"],"sourcesContent":["import {useEffect, useState, useCallback, useRef} from 'react'\nimport type {MouseEvent} from 'react'\nimport type {MModalProps} from './MModal.types'\nimport {MCard, MCardBody, MCardFooter, MCardHeader} from '../../cards'\nimport {MPortal} from '../../primitives'\nimport {cn} from '../../../utils/cn'\nimport './MModal.css'\n\nconst EXIT_DURATION = 540\n\n// Render blocking overlay content for dense details and mobile-friendly dialogs.\nexport function MModal({\n open,\n onClose,\n title,\n description,\n footer,\n size = 'md',\n closeOnBackdrop = true,\n closeOnEscape = true,\n className,\n children,\n ...rest\n}: MModalProps) {\n const [mounted, setMounted] = useState(false)\n const [closing, setClosing] = useState(false)\n const backdropRef = useRef<HTMLDivElement>(null)\n\n // Open → mount immediately\n useEffect(() => {\n if (open) {\n setMounted(true)\n setClosing(false)\n }\n }, [open])\n\n // Close → animate out, then unmount\n useEffect(() => {\n if (!open && mounted) {\n setClosing(true)\n const timer = setTimeout(() => {\n setMounted(false)\n setClosing(false)\n }, EXIT_DURATION)\n return () => clearTimeout(timer)\n }\n }, [open, mounted])\n\n useEffect(() => {\n if (!open || !closeOnEscape) return\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') onClose()\n }\n\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [closeOnEscape, onClose, open])\n\n useEffect(() => {\n if (!mounted) return\n\n const previousOverflow = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n\n return () => {\n document.body.style.overflow = previousOverflow\n }\n }, [mounted])\n\n if (!mounted) return null\n\n const handleBackdropClick = (event: MouseEvent<HTMLDivElement>) => {\n if (!closeOnBackdrop) return\n if (event.target === event.currentTarget) onClose()\n }\n\n return (\n <MPortal>\n <div\n ref={backdropRef}\n className={cn('mineral-backdrop', 'modal-backdrop', closing && 'closing')}\n onMouseDown={handleBackdropClick}\n >\n <div className={'modal-shell'}>\n <MCard\n className={cn('modal', size, className)}\n role={'dialog'}\n aria-modal={'true'}\n aria-labelledby={title ? 'mineral-modal-title' : undefined}\n {...rest}\n >\n {(title || description) && (\n <MCardHeader>\n {title && (\n <div id={'mineral-modal-title'} className={'modal-title'}>\n {title}\n </div>\n )}\n {description && <div className={'modal-description'}>{description}</div>}\n </MCardHeader>\n )}\n <MCardBody>{children}</MCardBody>\n {footer && <MCardFooter>{footer}</MCardFooter>}\n </MCard>\n </div>\n </div>\n </MPortal>\n )\n}\n"],"mappings":"qKAQA,IAAM,EAAgB,IAGtB,SAAgB,EAAO,CACnB,OACA,UACA,QACA,cACA,SACA,OAAO,KACP,kBAAkB,GAClB,gBAAgB,GAChB,YACA,WACA,GAAG,GACS,CACZ,GAAM,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,GAAA,EAAA,EAAA,QAAqC,KAAK,CAmDhD,OAhDA,EAAA,EAAA,eAAgB,CACR,IACA,EAAW,GAAK,CAChB,EAAW,GAAM,GAEtB,CAAC,EAAK,CAAC,EAGV,EAAA,EAAA,eAAgB,CACZ,GAAI,CAAC,GAAQ,EAAS,CAClB,EAAW,GAAK,CAChB,IAAM,EAAQ,eAAiB,CAC3B,EAAW,GAAM,CACjB,EAAW,GAAM,EAClB,EAAc,CACjB,UAAa,aAAa,EAAM,GAErC,CAAC,EAAM,EAAQ,CAAC,EAEnB,EAAA,EAAA,eAAgB,CACZ,GAAI,CAAC,GAAQ,CAAC,EAAe,OAE7B,IAAM,EAAiB,GAAyB,CACxC,EAAM,MAAQ,UAAU,GAAS,EAIzC,OADA,SAAS,iBAAiB,UAAW,EAAc,KACtC,SAAS,oBAAoB,UAAW,EAAc,EACpE,CAAC,EAAe,EAAS,EAAK,CAAC,EAElC,EAAA,EAAA,eAAgB,CACZ,GAAI,CAAC,EAAS,OAEd,IAAM,EAAmB,SAAS,KAAK,MAAM,SAG7C,MAFA,UAAS,KAAK,MAAM,SAAW,aAElB,CACT,SAAS,KAAK,MAAM,SAAW,IAEpC,CAAC,EAAQ,CAAC,CAER,GAQD,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACI,EAAA,EAAA,KAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,EAAG,mBAAoB,iBAAkB,GAAW,UAAU,CACzE,YAViB,GAAsC,CAC1D,GACD,EAAM,SAAW,EAAM,eAAe,GAAS,YAU3C,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,wBACZ,EAAA,EAAA,MAAC,EAAA,EAAD,CACI,UAAW,EAAA,EAAG,QAAS,EAAM,EAAU,CACvC,KAAM,SACN,aAAY,OACZ,kBAAiB,EAAQ,sBAAwB,IAAA,GACjD,GAAI,WALR,EAOM,GAAS,KACP,EAAA,EAAA,MAAC,EAAA,EAAD,CAAA,SAAA,CACK,IACG,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,sBAAuB,UAAW,uBACtC,EACC,CAAA,CAET,IAAe,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,6BAAsB,EAAkB,CAAA,CAC9D,CAAA,CAAA,EAElB,EAAA,EAAA,KAAC,EAAA,EAAD,CAAY,WAAqB,CAAA,CAChC,IAAU,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,SAAc,EAAqB,CAAA,CAC1C,GACN,CAAA,CACJ,CAAA,CACA,CAAA,CArCO"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as e } from "./cn-YER3QsV1.js";
|
|
2
2
|
import { t } from "./MPortal-Dqlkh3hw.js";
|
|
3
|
-
import { a as n, i as r, n as i, r as a } from "./MSkeleton-
|
|
3
|
+
import { a as n, i as r, n as i, r as a } from "./MSkeleton-Cwa-JRxo.js";
|
|
4
4
|
import { useEffect as o, useRef as s, useState as c } from "react";
|
|
5
5
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/overlays/MModal/MModal.tsx
|
|
@@ -66,4 +66,4 @@ function f({ open: f, onClose: p, title: m, description: h, footer: g, size: _ =
|
|
|
66
66
|
//#endregion
|
|
67
67
|
export { f as t };
|
|
68
68
|
|
|
69
|
-
//# sourceMappingURL=MModal-
|
|
69
|
+
//# sourceMappingURL=MModal-___Rw8YK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MModal-
|
|
1
|
+
{"version":3,"file":"MModal-___Rw8YK.js","names":[],"sources":["../src/components/overlays/MModal/MModal.tsx"],"sourcesContent":["import {useEffect, useState, useCallback, useRef} from 'react'\nimport type {MouseEvent} from 'react'\nimport type {MModalProps} from './MModal.types'\nimport {MCard, MCardBody, MCardFooter, MCardHeader} from '../../cards'\nimport {MPortal} from '../../primitives'\nimport {cn} from '../../../utils/cn'\nimport './MModal.css'\n\nconst EXIT_DURATION = 540\n\n// Render blocking overlay content for dense details and mobile-friendly dialogs.\nexport function MModal({\n open,\n onClose,\n title,\n description,\n footer,\n size = 'md',\n closeOnBackdrop = true,\n closeOnEscape = true,\n className,\n children,\n ...rest\n}: MModalProps) {\n const [mounted, setMounted] = useState(false)\n const [closing, setClosing] = useState(false)\n const backdropRef = useRef<HTMLDivElement>(null)\n\n // Open → mount immediately\n useEffect(() => {\n if (open) {\n setMounted(true)\n setClosing(false)\n }\n }, [open])\n\n // Close → animate out, then unmount\n useEffect(() => {\n if (!open && mounted) {\n setClosing(true)\n const timer = setTimeout(() => {\n setMounted(false)\n setClosing(false)\n }, EXIT_DURATION)\n return () => clearTimeout(timer)\n }\n }, [open, mounted])\n\n useEffect(() => {\n if (!open || !closeOnEscape) return\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') onClose()\n }\n\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [closeOnEscape, onClose, open])\n\n useEffect(() => {\n if (!mounted) return\n\n const previousOverflow = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n\n return () => {\n document.body.style.overflow = previousOverflow\n }\n }, [mounted])\n\n if (!mounted) return null\n\n const handleBackdropClick = (event: MouseEvent<HTMLDivElement>) => {\n if (!closeOnBackdrop) return\n if (event.target === event.currentTarget) onClose()\n }\n\n return (\n <MPortal>\n <div\n ref={backdropRef}\n className={cn('mineral-backdrop', 'modal-backdrop', closing && 'closing')}\n onMouseDown={handleBackdropClick}\n >\n <div className={'modal-shell'}>\n <MCard\n className={cn('modal', size, className)}\n role={'dialog'}\n aria-modal={'true'}\n aria-labelledby={title ? 'mineral-modal-title' : undefined}\n {...rest}\n >\n {(title || description) && (\n <MCardHeader>\n {title && (\n <div id={'mineral-modal-title'} className={'modal-title'}>\n {title}\n </div>\n )}\n {description && <div className={'modal-description'}>{description}</div>}\n </MCardHeader>\n )}\n <MCardBody>{children}</MCardBody>\n {footer && <MCardFooter>{footer}</MCardFooter>}\n </MCard>\n </div>\n </div>\n </MPortal>\n )\n}\n"],"mappings":";;;;;;AAQA,IAAM,IAAgB;AAGtB,SAAgB,EAAO,EACnB,SACA,YACA,UACA,gBACA,WACA,UAAO,MACP,qBAAkB,IAClB,mBAAgB,IAChB,cACA,aACA,GAAG,KACS;CACZ,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAc,EAAuB,KAAK;AAmDhD,QAhDA,QAAgB;AACZ,EAAI,MACA,EAAW,GAAK,EAChB,EAAW,GAAM;IAEtB,CAAC,EAAK,CAAC,EAGV,QAAgB;AACZ,MAAI,CAAC,KAAQ,GAAS;AAClB,KAAW,GAAK;GAChB,IAAM,IAAQ,iBAAiB;AAE3B,IADA,EAAW,GAAM,EACjB,EAAW,GAAM;MAClB,EAAc;AACjB,gBAAa,aAAa,EAAM;;IAErC,CAAC,GAAM,EAAQ,CAAC,EAEnB,QAAgB;AACZ,MAAI,CAAC,KAAQ,CAAC,EAAe;EAE7B,IAAM,KAAiB,MAAyB;AAC5C,GAAI,EAAM,QAAQ,YAAU,GAAS;;AAIzC,SADA,SAAS,iBAAiB,WAAW,EAAc,QACtC,SAAS,oBAAoB,WAAW,EAAc;IACpE;EAAC;EAAe;EAAS;EAAK,CAAC,EAElC,QAAgB;AACZ,MAAI,CAAC,EAAS;EAEd,IAAM,IAAmB,SAAS,KAAK,MAAM;AAG7C,SAFA,SAAS,KAAK,MAAM,WAAW,gBAElB;AACT,YAAS,KAAK,MAAM,WAAW;;IAEpC,CAAC,EAAQ,CAAC,EAER,IAQD,kBAAC,GAAD,EAAA,UACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,oBAAoB,kBAAkB,KAAW,UAAU;EACzE,cAViB,MAAsC;AAC1D,QACD,EAAM,WAAW,EAAM,iBAAe,GAAS;;YAU3C,kBAAC,OAAD;GAAK,WAAW;aACZ,kBAAC,GAAD;IACI,WAAW,EAAG,SAAS,GAAM,EAAU;IACvC,MAAM;IACN,cAAY;IACZ,mBAAiB,IAAQ,wBAAwB,KAAA;IACjD,GAAI;cALR;MAOM,KAAS,MACP,kBAAC,GAAD,EAAA,UAAA,CACK,KACG,kBAAC,OAAD;MAAK,IAAI;MAAuB,WAAW;gBACtC;MACC,CAAA,EAET,KAAe,kBAAC,OAAD;MAAK,WAAW;gBAAsB;MAAkB,CAAA,CAC9D,EAAA,CAAA;KAElB,kBAAC,GAAD,EAAY,aAAqB,CAAA;KAChC,KAAU,kBAAC,GAAD,EAAA,UAAc,GAAqB,CAAA;KAC1C;;GACN,CAAA;EACJ,CAAA,EACA,CAAA,GArCO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MButton-
|
|
2
|
-
//# sourceMappingURL=MPagination-
|
|
1
|
+
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MButton-CtEFKjYZ.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);function a(e,t){let n=[];for(let r=e;r<=t;r++)n.push(r);return n}function o(e,t,n,r){if(e<=r*2+n*2+3)return a(1,e);let i=Math.max(t-n,r+2),o=Math.min(t+n,e-r-1),s=i>r+2,c=o<e-r-1,l=a(1,r),u=a(e-r+1,e);if(!s&&c)return[...a(1,n*2+r+2),`dots`,...u];if(s&&!c){let t=n*2+r+2;return[...l,`dots`,...a(e-t+1,e)]}return[...l,`dots`,...a(i,o),`dots`,...u]}function s({total:a,page:s,pageSize:c=10,onChange:l,siblings:u=1,boundaries:d=1,variant:f=`numbered`,className:p,...m}){let h=Math.max(1,Math.ceil(a/c)),g=Math.min(Math.max(1,s),h),_=(0,r.useMemo)(()=>o(h,g,u,d),[h,g,u,d]);return f===`simple`?(0,i.jsxs)(`nav`,{"aria-label":`pagination`,className:t.t(`pagination`,p),...m,children:[(0,i.jsx)(n.t,{variant:`outlined`,size:`sm`,iconOnly:!0,disabled:g<=1,onClick:()=>l(g-1),className:`nav`,children:(0,i.jsx)(e.Pi,{})}),(0,i.jsxs)(`span`,{className:`info`,children:[g,` / `,h]}),(0,i.jsx)(n.t,{variant:`outlined`,size:`sm`,iconOnly:!0,disabled:g>=h,onClick:()=>l(g+1),className:`nav`,children:(0,i.jsx)(e.Ni,{})})]}):(0,i.jsxs)(`nav`,{"aria-label":`pagination`,className:t.t(`pagination`,p),...m,children:[(0,i.jsx)(n.t,{variant:`outlined`,size:`sm`,iconOnly:!0,disabled:g<=1,onClick:()=>l(g-1),className:`nav`,children:(0,i.jsx)(e.Pi,{})}),_.map((e,n)=>e===`dots`?(0,i.jsx)(`span`,{className:`dots`,children:`…`},`dots-${n}`):(0,i.jsx)(`button`,{type:`button`,className:t.t(`btn`,e===g&&`active`),onClick:()=>l(e),children:e},e)),(0,i.jsx)(n.t,{variant:`outlined`,size:`sm`,iconOnly:!0,disabled:g>=h,onClick:()=>l(g+1),className:`nav`,children:(0,i.jsx)(e.Ni,{})})]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
|
|
2
|
+
//# sourceMappingURL=MPagination-CTtr_L-Q.cjs.map
|