@banzamel/mineralui 2.1.3 → 2.1.4
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/{MDropdownMenu-C2lftqSx.cjs → MDropdownMenu-BvN5grK5.cjs} +2 -2
- package/dist/{MDropdownMenu-C2lftqSx.cjs.map → MDropdownMenu-BvN5grK5.cjs.map} +1 -1
- package/dist/{MDropdownMenu-BeD_DxPr.js → MDropdownMenu-CFoKJ7V6.js} +2 -2
- package/dist/{MDropdownMenu-BeD_DxPr.js.map → MDropdownMenu-CFoKJ7V6.js.map} +1 -1
- package/dist/{MInputCVC-DvUOzpYp.js → MInputCVC-B4V0QI5h.js} +2 -2
- package/dist/{MInputCVC-DvUOzpYp.js.map → MInputCVC-B4V0QI5h.js.map} +1 -1
- package/dist/{MInputCVC-_2ALihF1.cjs → MInputCVC-BlY5OrVn.cjs} +2 -2
- package/dist/{MInputCVC-_2ALihF1.cjs.map → MInputCVC-BlY5OrVn.cjs.map} +1 -1
- package/dist/MPopover-C5aaGhma.js +150 -0
- package/dist/MPopover-C5aaGhma.js.map +1 -0
- package/dist/MPopover-CV-9MArH.cjs +2 -0
- package/dist/MPopover-CV-9MArH.cjs.map +1 -0
- package/dist/{cards-fRWZkts9.cjs → cards-CQSYgH9U.cjs} +2 -2
- package/dist/{cards-fRWZkts9.cjs.map → cards-CQSYgH9U.cjs.map} +1 -1
- package/dist/{cards-DYmK8TpL.js → cards-Cpr9B8Mu.js} +4 -4
- package/dist/{cards-DYmK8TpL.js.map → cards-Cpr9B8Mu.js.map} +1 -1
- package/dist/cards.cjs +1 -1
- package/dist/cards.js +1 -1
- package/dist/components/primitives/MPopover/popoverStack.d.ts +32 -0
- package/dist/{data-CuynADWM.cjs → data-BZ92hzXx.cjs} +2 -2
- package/dist/{data-CuynADWM.cjs.map → data-BZ92hzXx.cjs.map} +1 -1
- package/dist/{data-D8WFA3Et.js → data-C-6DP7iY.js} +2 -2
- package/dist/{data-D8WFA3Et.js.map → data-C-6DP7iY.js.map} +1 -1
- package/dist/data.cjs +1 -1
- package/dist/data.js +1 -1
- package/dist/{dropdowns-5cJf-6UG.js → dropdowns-DiThUF7D.js} +2 -2
- package/dist/{dropdowns-5cJf-6UG.js.map → dropdowns-DiThUF7D.js.map} +1 -1
- package/dist/{dropdowns-C-ASvu7P.cjs → dropdowns-bQ0cEKNN.cjs} +2 -2
- package/dist/{dropdowns-C-ASvu7P.cjs.map → dropdowns-bQ0cEKNN.cjs.map} +1 -1
- package/dist/dropdowns.cjs +1 -1
- package/dist/dropdowns.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +8 -8
- package/dist/inputs.cjs +1 -1
- package/dist/inputs.js +1 -1
- package/dist/{layout-i8H5tIbO.js → layout-CdSpVJuK.js} +2 -2
- package/dist/{layout-i8H5tIbO.js.map → layout-CdSpVJuK.js.map} +1 -1
- package/dist/{layout-CfolwT8L.cjs → layout-Ddo7HUPu.cjs} +2 -2
- package/dist/{layout-CfolwT8L.cjs.map → layout-Ddo7HUPu.cjs.map} +1 -1
- package/dist/layout.cjs +1 -1
- package/dist/layout.js +1 -1
- package/dist/{overlays-zPzbHW5P.cjs → overlays-BUZEaZaJ.cjs} +2 -2
- package/dist/{overlays-zPzbHW5P.cjs.map → overlays-BUZEaZaJ.cjs.map} +1 -1
- package/dist/{overlays-CAcGmqNv.js → overlays-C1vO_A2I.js} +2 -2
- package/dist/{overlays-CAcGmqNv.js.map → overlays-C1vO_A2I.js.map} +1 -1
- package/dist/overlays.cjs +1 -1
- package/dist/overlays.js +2 -2
- package/dist/primitives.cjs +1 -1
- package/dist/primitives.js +1 -1
- package/package.json +1 -1
- package/dist/MPopover-Cweomcj2.cjs +0 -2
- package/dist/MPopover-Cweomcj2.cjs.map +0 -1
- package/dist/MPopover-DT3vclV1.js +0 -98
- package/dist/MPopover-DT3vclV1.js.map +0 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Modern React UI framework with a sharp admin aesthetic, theming system, and production-ready components.
|
|
4
4
|
|
|
5
5
|
- npm: `@banzamel/mineralui`
|
|
6
|
-
- version: `2.1.
|
|
6
|
+
- version: `2.1.4`
|
|
7
7
|
- peer dependencies: `react >= 19`, `react-dom >= 19`
|
|
8
8
|
- repository: `https://github.com/Banzamel/mineralui`
|
|
9
9
|
- homepage: `https://mineralui.io`
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./cn-CU5TNITO.cjs`),t=require(`./useKeyboardNav-HVG9JFD2.cjs`),n=require(`./MPopover-
|
|
2
|
-
//# sourceMappingURL=MDropdownMenu-
|
|
1
|
+
const e=require(`./cn-CU5TNITO.cjs`),t=require(`./useKeyboardNav-HVG9JFD2.cjs`),n=require(`./MPopover-CV-9MArH.cjs`);require(`./core-DBpQf3uY.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);function a(e){return e.props}function o(e){return!!e.type.__dropdownItem}function s(e){return!!e.type.__dropdownGroup}function c(e){let t=[];return r.Children.forEach(e,e=>{(0,r.isValidElement)(e)&&(o(e)?t.push(e):s(e)&&r.Children.forEach(a(e).children,e=>{(0,r.isValidElement)(e)&&o(e)&&t.push(e)}))}),t}function l({trigger:l,placement:u=`bottom-start`,closeOnSelect:d=!0,openOn:f=`click`,onOpenChange:p,isolateClick:m=!1,className:h,style:g,popoverClassName:_,popoverStyle:v,children:y}){let[b,x]=(0,r.useState)(!1),S=(0,r.useRef)(null),C=(0,r.useRef)(null),w=c(y),T=w.filter(e=>!a(e).disabled).length,E=(0,r.useCallback)(e=>{x(t=>{let n=typeof e==`function`?e(t):e;return p?.(n),n})},[p]),{activeIndex:D,setActiveIndex:O,onKeyDown:k}=t.t({itemCount:T,onSelect:(0,r.useCallback)(e=>{let t=0;for(let n of w){let r=a(n);if(!r.disabled){if(t===e){r.onClick?.();break}t++}}d&&E(!1)},[w,d,E]),onClose:()=>x(!1),isOpen:b}),A=e=>{m&&(e.stopPropagation(),e.preventDefault()),E(e=>!e)},j=e=>{(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),m&&e.stopPropagation(),E(!0)),b&&k(e)},M=0,N=e=>{if(!(0,r.isValidElement)(e))return e;if(o(e)){let t=a(e).disabled,n=t?-1:M++;return(0,r.cloneElement)(e,{_active:n===D,_onHover:t?void 0:()=>O(n),_onClick:()=>{t||d&&E(!1)}})}return s(e)?(0,r.cloneElement)(e,{children:r.Children.map(a(e).children,N)}):e},P=f===`hover`?{onMouseEnter:()=>{C.current&&clearTimeout(C.current),E(!0)},onMouseLeave:()=>{C.current=setTimeout(()=>E(!1),150)}}:{},F=m?e=>{e.stopPropagation(),e.preventDefault()}:void 0;return(0,i.jsxs)(`div`,{className:e.t(`dropdown menu anchor`,h),style:g,onClick:F,...P,children:[(0,i.jsx)(`div`,{ref:S,onClick:f===`click`?A:void 0,onKeyDown:j,role:`button`,tabIndex:0,className:`dropdown menu trigger`,children:l}),(0,i.jsx)(n.t,{open:b,anchorRef:S,onClose:()=>E(!1),placement:u,className:e.t(`dropdown menu popover`,_),style:v,children:(0,i.jsx)(`div`,{className:`dropdown menu list`,role:`menu`,...P,children:r.Children.map(y,N)})})]})}function u({icon:t,label:n,href:r,to:a,onClick:o,color:s,disabled:c=!1,active:l=!1,component:u,className:d,_active:f,_onHover:p,_onClick:m}){let h=f??l,g=(0,i.jsxs)(i.Fragment,{children:[t&&(0,i.jsx)(`span`,{className:`dropdown menu icon`,children:t}),(0,i.jsx)(`span`,{className:`dropdown menu label`,children:n})]}),_=e.t(`dropdown menu item`,h&&`active`,c&&`disabled`,s,d),v=e=>{if(c){e.preventDefault();return}o?.(),m?.()},y=u??(r||a?`a`:`button`),b=u?{...r?{href:r}:{},...a?{to:a}:{}}:r?{href:r}:a?{href:a}:{};return(0,i.jsx)(y,{className:_,role:`menuitem`,tabIndex:-1,onClick:v,onMouseEnter:p,"aria-disabled":c||void 0,...b,children:g})}u.__dropdownItem=!0;function d({label:e,children:t}){return(0,i.jsxs)(`div`,{className:`dropdown menu group`,role:`group`,children:[(0,i.jsx)(`div`,{className:`dropdown menu group-label`,children:e}),t]})}d.__dropdownGroup=!0;function f({className:t}){return(0,i.jsx)(`div`,{className:e.t(`dropdown menu divider`,t),role:`separator`})}Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
|
|
2
|
+
//# sourceMappingURL=MDropdownMenu-BvN5grK5.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MDropdownMenu-C2lftqSx.cjs","names":[],"sources":["../src/components/overlays/MDropdownMenu/MDropdownMenu.tsx"],"sourcesContent":["import {useState, useRef, useCallback, Children, isValidElement, cloneElement} from 'react'\nimport type * as React from 'react'\nimport {MPopover} from '../../primitives'\nimport {useKeyboardNav} from '../../../utils/useKeyboardNav'\nimport {cn} from '../../../utils/cn'\nimport type {\n MDropdownMenuProps,\n MDropdownItemProps,\n MDropdownGroupProps,\n MDropdownDividerProps,\n} from './MDropdownMenu.types'\nimport './MDropdownMenu.css'\n\ntype AnyProps = Record<string, any>\n\nfunction getProps(el: React.ReactElement): AnyProps {\n return el.props as AnyProps\n}\n\nfunction isItem(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownItem\n}\n\nfunction isGroup(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownGroup\n}\n\n// Collect all MDropdownItem elements from children (including inside groups).\nfunction collectItems(children: React.ReactNode): React.ReactElement[] {\n const items: React.ReactElement[] = []\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) return\n if (isItem(child)) {\n items.push(child)\n } else if (isGroup(child)) {\n Children.forEach(getProps(child).children, (gc: React.ReactNode) => {\n if (isValidElement(gc) && isItem(gc)) {\n items.push(gc)\n }\n })\n }\n })\n return items\n}\n\nexport function MDropdownMenu({\n trigger,\n placement = 'bottom-start',\n closeOnSelect = true,\n openOn = 'click',\n onOpenChange,\n isolateClick = false,\n className,\n style,\n popoverClassName,\n popoverStyle,\n children,\n}: MDropdownMenuProps) {\n const [open, setOpen] = useState(false)\n const anchorRef = useRef<HTMLDivElement>(null)\n const hoverTimeout = useRef<ReturnType<typeof setTimeout>>(null)\n\n const items = collectItems(children)\n const enabledCount = items.filter((i) => !getProps(i).disabled).length\n\n const setMenuOpen = useCallback(\n (next: boolean | ((prev: boolean) => boolean)) => {\n setOpen((prev) => {\n const resolved = typeof next === 'function' ? next(prev) : next\n onOpenChange?.(resolved)\n return resolved\n })\n },\n [onOpenChange]\n )\n\n const handleSelect = useCallback(\n (index: number) => {\n let enabledIdx = 0\n for (const item of items) {\n const p = getProps(item)\n if (p.disabled) continue\n if (enabledIdx === index) {\n p.onClick?.()\n break\n }\n enabledIdx++\n }\n if (closeOnSelect) setMenuOpen(false)\n },\n [items, closeOnSelect, setMenuOpen]\n )\n\n const {activeIndex, setActiveIndex, onKeyDown} = useKeyboardNav({\n itemCount: enabledCount,\n onSelect: handleSelect,\n onClose: () => setOpen(false),\n isOpen: open,\n })\n\n const handleTriggerClick = (e: React.MouseEvent) => {\n if (isolateClick) {\n e.stopPropagation()\n e.preventDefault()\n }\n setMenuOpen((o) => !o)\n }\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (isolateClick) e.stopPropagation()\n setMenuOpen(true)\n }\n if (open) onKeyDown(e as any)\n }\n\n // Map active index back to flat child rendering with enabled-only tracking.\n let enabledIdx = 0\n const renderChild = (child: React.ReactNode): React.ReactNode => {\n if (!isValidElement(child)) return child\n\n if (isItem(child)) {\n const p = getProps(child)\n const isDisabled = p.disabled\n const idx = isDisabled ? -1 : enabledIdx++\n return cloneElement(child, {\n _active: idx === activeIndex,\n _onHover: isDisabled ? undefined : () => setActiveIndex(idx),\n _onClick: () => {\n if (isDisabled) return\n if (closeOnSelect) setMenuOpen(false)\n },\n } as AnyProps)\n }\n\n if (isGroup(child)) {\n return cloneElement(child, {\n children: Children.map(getProps(child).children, renderChild),\n } as AnyProps)\n }\n\n return child\n }\n\n const hoverHandlers =\n openOn === 'hover'\n ? {\n onMouseEnter: () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n setMenuOpen(true)\n },\n onMouseLeave: () => {\n hoverTimeout.current = setTimeout(() => setMenuOpen(false), 150)\n },\n }\n : {}\n\n /**\n * When `isolateClick` is set, every click bubbling out of the menu\n * (trigger AND items) must be stopped — otherwise selecting an action\n * also fires the click handler on a clickable parent (Link, MCard with\n * onClick, MDataTable row link). Trigger click itself is handled by\n * `handleTriggerClick`; this wrapper catches the bubbled item clicks\n * before they leave the anchor. `preventDefault` is needed too — when the\n * dropdown is rendered inside an `<a href>` (MCard component={Link}),\n * stopping propagation alone does not block native link navigation.\n *\n * Caveat: MDropdownItem with `href` will not navigate while inside an\n * `isolateClick` menu — use programmatic navigation (onClick + navigate)\n * in those contexts instead.\n */\n const isolateAnchorClick = isolateClick\n ? (e: React.MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n }\n : undefined\n\n return (\n <div\n className={cn('dropdown menu anchor', className)}\n style={style}\n onClick={isolateAnchorClick}\n {...hoverHandlers}\n >\n <div\n ref={anchorRef}\n onClick={openOn === 'click' ? handleTriggerClick : undefined}\n onKeyDown={handleTriggerKeyDown}\n role=\"button\"\n tabIndex={0}\n className=\"dropdown menu trigger\"\n >\n {trigger}\n </div>\n <MPopover\n open={open}\n anchorRef={anchorRef}\n onClose={() => setMenuOpen(false)}\n placement={placement}\n className={cn('dropdown menu popover', popoverClassName)}\n style={popoverStyle}\n >\n <div className=\"dropdown menu list\" role=\"menu\" {...hoverHandlers}>\n {Children.map(children, renderChild)}\n </div>\n </MPopover>\n </div>\n )\n}\n\nexport function MDropdownItem({\n icon,\n label,\n href,\n to,\n onClick,\n color,\n disabled = false,\n active = false,\n component,\n className,\n _active,\n _onHover,\n _onClick,\n}: MDropdownItemProps & {_active?: boolean; _onHover?: () => void; _onClick?: () => void}) {\n const isHighlighted = _active ?? active\n\n const content = (\n <>\n {icon && <span className=\"dropdown menu icon\">{icon}</span>}\n <span className=\"dropdown menu label\">{label}</span>\n </>\n )\n\n const cls = cn('dropdown menu item', isHighlighted && 'active', disabled && 'disabled', color, className)\n\n const handleClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault()\n return\n }\n onClick?.()\n _onClick?.()\n }\n\n const Tag = component ?? (href || to ? 'a' : 'button')\n const linkProps = component ? {...(href ? {href} : {}), ...(to ? {to} : {})} : href ? {href} : to ? {href: to} : {}\n\n return (\n <Tag\n className={cls}\n role=\"menuitem\"\n tabIndex={-1}\n onClick={handleClick}\n onMouseEnter={_onHover}\n aria-disabled={disabled || undefined}\n {...linkProps}\n >\n {content}\n </Tag>\n )\n}\n;(MDropdownItem as any).__dropdownItem = true\n\nexport function MDropdownGroup({label, children}: MDropdownGroupProps) {\n return (\n <div className=\"dropdown menu group\" role=\"group\">\n <div className=\"dropdown menu group-label\">{label}</div>\n {children}\n </div>\n )\n}\n;(MDropdownGroup as any).__dropdownGroup = true\n\nexport function MDropdownDivider({className}: MDropdownDividerProps) {\n return <div className={cn('dropdown menu divider', className)} role=\"separator\" />\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MDropdownMenu-BvN5grK5.cjs","names":[],"sources":["../src/components/overlays/MDropdownMenu/MDropdownMenu.tsx"],"sourcesContent":["import {useState, useRef, useCallback, Children, isValidElement, cloneElement} from 'react'\nimport type * as React from 'react'\nimport {MPopover} from '../../primitives'\nimport {useKeyboardNav} from '../../../utils/useKeyboardNav'\nimport {cn} from '../../../utils/cn'\nimport type {\n MDropdownMenuProps,\n MDropdownItemProps,\n MDropdownGroupProps,\n MDropdownDividerProps,\n} from './MDropdownMenu.types'\nimport './MDropdownMenu.css'\n\ntype AnyProps = Record<string, any>\n\nfunction getProps(el: React.ReactElement): AnyProps {\n return el.props as AnyProps\n}\n\nfunction isItem(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownItem\n}\n\nfunction isGroup(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownGroup\n}\n\n// Collect all MDropdownItem elements from children (including inside groups).\nfunction collectItems(children: React.ReactNode): React.ReactElement[] {\n const items: React.ReactElement[] = []\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) return\n if (isItem(child)) {\n items.push(child)\n } else if (isGroup(child)) {\n Children.forEach(getProps(child).children, (gc: React.ReactNode) => {\n if (isValidElement(gc) && isItem(gc)) {\n items.push(gc)\n }\n })\n }\n })\n return items\n}\n\nexport function MDropdownMenu({\n trigger,\n placement = 'bottom-start',\n closeOnSelect = true,\n openOn = 'click',\n onOpenChange,\n isolateClick = false,\n className,\n style,\n popoverClassName,\n popoverStyle,\n children,\n}: MDropdownMenuProps) {\n const [open, setOpen] = useState(false)\n const anchorRef = useRef<HTMLDivElement>(null)\n const hoverTimeout = useRef<ReturnType<typeof setTimeout>>(null)\n\n const items = collectItems(children)\n const enabledCount = items.filter((i) => !getProps(i).disabled).length\n\n const setMenuOpen = useCallback(\n (next: boolean | ((prev: boolean) => boolean)) => {\n setOpen((prev) => {\n const resolved = typeof next === 'function' ? next(prev) : next\n onOpenChange?.(resolved)\n return resolved\n })\n },\n [onOpenChange]\n )\n\n const handleSelect = useCallback(\n (index: number) => {\n let enabledIdx = 0\n for (const item of items) {\n const p = getProps(item)\n if (p.disabled) continue\n if (enabledIdx === index) {\n p.onClick?.()\n break\n }\n enabledIdx++\n }\n if (closeOnSelect) setMenuOpen(false)\n },\n [items, closeOnSelect, setMenuOpen]\n )\n\n const {activeIndex, setActiveIndex, onKeyDown} = useKeyboardNav({\n itemCount: enabledCount,\n onSelect: handleSelect,\n onClose: () => setOpen(false),\n isOpen: open,\n })\n\n const handleTriggerClick = (e: React.MouseEvent) => {\n if (isolateClick) {\n e.stopPropagation()\n e.preventDefault()\n }\n setMenuOpen((o) => !o)\n }\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (isolateClick) e.stopPropagation()\n setMenuOpen(true)\n }\n if (open) onKeyDown(e as any)\n }\n\n // Map active index back to flat child rendering with enabled-only tracking.\n let enabledIdx = 0\n const renderChild = (child: React.ReactNode): React.ReactNode => {\n if (!isValidElement(child)) return child\n\n if (isItem(child)) {\n const p = getProps(child)\n const isDisabled = p.disabled\n const idx = isDisabled ? -1 : enabledIdx++\n return cloneElement(child, {\n _active: idx === activeIndex,\n _onHover: isDisabled ? undefined : () => setActiveIndex(idx),\n _onClick: () => {\n if (isDisabled) return\n if (closeOnSelect) setMenuOpen(false)\n },\n } as AnyProps)\n }\n\n if (isGroup(child)) {\n return cloneElement(child, {\n children: Children.map(getProps(child).children, renderChild),\n } as AnyProps)\n }\n\n return child\n }\n\n const hoverHandlers =\n openOn === 'hover'\n ? {\n onMouseEnter: () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n setMenuOpen(true)\n },\n onMouseLeave: () => {\n hoverTimeout.current = setTimeout(() => setMenuOpen(false), 150)\n },\n }\n : {}\n\n /**\n * When `isolateClick` is set, every click bubbling out of the menu\n * (trigger AND items) must be stopped — otherwise selecting an action\n * also fires the click handler on a clickable parent (Link, MCard with\n * onClick, MDataTable row link). Trigger click itself is handled by\n * `handleTriggerClick`; this wrapper catches the bubbled item clicks\n * before they leave the anchor. `preventDefault` is needed too — when the\n * dropdown is rendered inside an `<a href>` (MCard component={Link}),\n * stopping propagation alone does not block native link navigation.\n *\n * Caveat: MDropdownItem with `href` will not navigate while inside an\n * `isolateClick` menu — use programmatic navigation (onClick + navigate)\n * in those contexts instead.\n */\n const isolateAnchorClick = isolateClick\n ? (e: React.MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n }\n : undefined\n\n return (\n <div\n className={cn('dropdown menu anchor', className)}\n style={style}\n onClick={isolateAnchorClick}\n {...hoverHandlers}\n >\n <div\n ref={anchorRef}\n onClick={openOn === 'click' ? handleTriggerClick : undefined}\n onKeyDown={handleTriggerKeyDown}\n role=\"button\"\n tabIndex={0}\n className=\"dropdown menu trigger\"\n >\n {trigger}\n </div>\n <MPopover\n open={open}\n anchorRef={anchorRef}\n onClose={() => setMenuOpen(false)}\n placement={placement}\n className={cn('dropdown menu popover', popoverClassName)}\n style={popoverStyle}\n >\n <div className=\"dropdown menu list\" role=\"menu\" {...hoverHandlers}>\n {Children.map(children, renderChild)}\n </div>\n </MPopover>\n </div>\n )\n}\n\nexport function MDropdownItem({\n icon,\n label,\n href,\n to,\n onClick,\n color,\n disabled = false,\n active = false,\n component,\n className,\n _active,\n _onHover,\n _onClick,\n}: MDropdownItemProps & {_active?: boolean; _onHover?: () => void; _onClick?: () => void}) {\n const isHighlighted = _active ?? active\n\n const content = (\n <>\n {icon && <span className=\"dropdown menu icon\">{icon}</span>}\n <span className=\"dropdown menu label\">{label}</span>\n </>\n )\n\n const cls = cn('dropdown menu item', isHighlighted && 'active', disabled && 'disabled', color, className)\n\n const handleClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault()\n return\n }\n onClick?.()\n _onClick?.()\n }\n\n const Tag = component ?? (href || to ? 'a' : 'button')\n const linkProps = component ? {...(href ? {href} : {}), ...(to ? {to} : {})} : href ? {href} : to ? {href: to} : {}\n\n return (\n <Tag\n className={cls}\n role=\"menuitem\"\n tabIndex={-1}\n onClick={handleClick}\n onMouseEnter={_onHover}\n aria-disabled={disabled || undefined}\n {...linkProps}\n >\n {content}\n </Tag>\n )\n}\n;(MDropdownItem as any).__dropdownItem = true\n\nexport function MDropdownGroup({label, children}: MDropdownGroupProps) {\n return (\n <div className=\"dropdown menu group\" role=\"group\">\n <div className=\"dropdown menu group-label\">{label}</div>\n {children}\n </div>\n )\n}\n;(MDropdownGroup as any).__dropdownGroup = true\n\nexport function MDropdownDivider({className}: MDropdownDividerProps) {\n return <div className={cn('dropdown menu divider', className)} role=\"separator\" />\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as e } from "./cn-YER3QsV1.js";
|
|
2
2
|
import { t } from "./useKeyboardNav-iEXOdEMB.js";
|
|
3
|
-
import { t as n } from "./MPopover-
|
|
3
|
+
import { t as n } from "./MPopover-C5aaGhma.js";
|
|
4
4
|
import { Children as r, cloneElement as i, isValidElement as a, useCallback as o, useRef as s, useState as c } from "react";
|
|
5
5
|
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/overlays/MDropdownMenu/MDropdownMenu.tsx
|
|
@@ -154,4 +154,4 @@ function y({ className: t }) {
|
|
|
154
154
|
//#endregion
|
|
155
155
|
export { g as i, v as n, _ as r, y as t };
|
|
156
156
|
|
|
157
|
-
//# sourceMappingURL=MDropdownMenu-
|
|
157
|
+
//# sourceMappingURL=MDropdownMenu-CFoKJ7V6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MDropdownMenu-BeD_DxPr.js","names":[],"sources":["../src/components/overlays/MDropdownMenu/MDropdownMenu.tsx"],"sourcesContent":["import {useState, useRef, useCallback, Children, isValidElement, cloneElement} from 'react'\nimport type * as React from 'react'\nimport {MPopover} from '../../primitives'\nimport {useKeyboardNav} from '../../../utils/useKeyboardNav'\nimport {cn} from '../../../utils/cn'\nimport type {\n MDropdownMenuProps,\n MDropdownItemProps,\n MDropdownGroupProps,\n MDropdownDividerProps,\n} from './MDropdownMenu.types'\nimport './MDropdownMenu.css'\n\ntype AnyProps = Record<string, any>\n\nfunction getProps(el: React.ReactElement): AnyProps {\n return el.props as AnyProps\n}\n\nfunction isItem(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownItem\n}\n\nfunction isGroup(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownGroup\n}\n\n// Collect all MDropdownItem elements from children (including inside groups).\nfunction collectItems(children: React.ReactNode): React.ReactElement[] {\n const items: React.ReactElement[] = []\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) return\n if (isItem(child)) {\n items.push(child)\n } else if (isGroup(child)) {\n Children.forEach(getProps(child).children, (gc: React.ReactNode) => {\n if (isValidElement(gc) && isItem(gc)) {\n items.push(gc)\n }\n })\n }\n })\n return items\n}\n\nexport function MDropdownMenu({\n trigger,\n placement = 'bottom-start',\n closeOnSelect = true,\n openOn = 'click',\n onOpenChange,\n isolateClick = false,\n className,\n style,\n popoverClassName,\n popoverStyle,\n children,\n}: MDropdownMenuProps) {\n const [open, setOpen] = useState(false)\n const anchorRef = useRef<HTMLDivElement>(null)\n const hoverTimeout = useRef<ReturnType<typeof setTimeout>>(null)\n\n const items = collectItems(children)\n const enabledCount = items.filter((i) => !getProps(i).disabled).length\n\n const setMenuOpen = useCallback(\n (next: boolean | ((prev: boolean) => boolean)) => {\n setOpen((prev) => {\n const resolved = typeof next === 'function' ? next(prev) : next\n onOpenChange?.(resolved)\n return resolved\n })\n },\n [onOpenChange]\n )\n\n const handleSelect = useCallback(\n (index: number) => {\n let enabledIdx = 0\n for (const item of items) {\n const p = getProps(item)\n if (p.disabled) continue\n if (enabledIdx === index) {\n p.onClick?.()\n break\n }\n enabledIdx++\n }\n if (closeOnSelect) setMenuOpen(false)\n },\n [items, closeOnSelect, setMenuOpen]\n )\n\n const {activeIndex, setActiveIndex, onKeyDown} = useKeyboardNav({\n itemCount: enabledCount,\n onSelect: handleSelect,\n onClose: () => setOpen(false),\n isOpen: open,\n })\n\n const handleTriggerClick = (e: React.MouseEvent) => {\n if (isolateClick) {\n e.stopPropagation()\n e.preventDefault()\n }\n setMenuOpen((o) => !o)\n }\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (isolateClick) e.stopPropagation()\n setMenuOpen(true)\n }\n if (open) onKeyDown(e as any)\n }\n\n // Map active index back to flat child rendering with enabled-only tracking.\n let enabledIdx = 0\n const renderChild = (child: React.ReactNode): React.ReactNode => {\n if (!isValidElement(child)) return child\n\n if (isItem(child)) {\n const p = getProps(child)\n const isDisabled = p.disabled\n const idx = isDisabled ? -1 : enabledIdx++\n return cloneElement(child, {\n _active: idx === activeIndex,\n _onHover: isDisabled ? undefined : () => setActiveIndex(idx),\n _onClick: () => {\n if (isDisabled) return\n if (closeOnSelect) setMenuOpen(false)\n },\n } as AnyProps)\n }\n\n if (isGroup(child)) {\n return cloneElement(child, {\n children: Children.map(getProps(child).children, renderChild),\n } as AnyProps)\n }\n\n return child\n }\n\n const hoverHandlers =\n openOn === 'hover'\n ? {\n onMouseEnter: () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n setMenuOpen(true)\n },\n onMouseLeave: () => {\n hoverTimeout.current = setTimeout(() => setMenuOpen(false), 150)\n },\n }\n : {}\n\n /**\n * When `isolateClick` is set, every click bubbling out of the menu\n * (trigger AND items) must be stopped — otherwise selecting an action\n * also fires the click handler on a clickable parent (Link, MCard with\n * onClick, MDataTable row link). Trigger click itself is handled by\n * `handleTriggerClick`; this wrapper catches the bubbled item clicks\n * before they leave the anchor. `preventDefault` is needed too — when the\n * dropdown is rendered inside an `<a href>` (MCard component={Link}),\n * stopping propagation alone does not block native link navigation.\n *\n * Caveat: MDropdownItem with `href` will not navigate while inside an\n * `isolateClick` menu — use programmatic navigation (onClick + navigate)\n * in those contexts instead.\n */\n const isolateAnchorClick = isolateClick\n ? (e: React.MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n }\n : undefined\n\n return (\n <div\n className={cn('dropdown menu anchor', className)}\n style={style}\n onClick={isolateAnchorClick}\n {...hoverHandlers}\n >\n <div\n ref={anchorRef}\n onClick={openOn === 'click' ? handleTriggerClick : undefined}\n onKeyDown={handleTriggerKeyDown}\n role=\"button\"\n tabIndex={0}\n className=\"dropdown menu trigger\"\n >\n {trigger}\n </div>\n <MPopover\n open={open}\n anchorRef={anchorRef}\n onClose={() => setMenuOpen(false)}\n placement={placement}\n className={cn('dropdown menu popover', popoverClassName)}\n style={popoverStyle}\n >\n <div className=\"dropdown menu list\" role=\"menu\" {...hoverHandlers}>\n {Children.map(children, renderChild)}\n </div>\n </MPopover>\n </div>\n )\n}\n\nexport function MDropdownItem({\n icon,\n label,\n href,\n to,\n onClick,\n color,\n disabled = false,\n active = false,\n component,\n className,\n _active,\n _onHover,\n _onClick,\n}: MDropdownItemProps & {_active?: boolean; _onHover?: () => void; _onClick?: () => void}) {\n const isHighlighted = _active ?? active\n\n const content = (\n <>\n {icon && <span className=\"dropdown menu icon\">{icon}</span>}\n <span className=\"dropdown menu label\">{label}</span>\n </>\n )\n\n const cls = cn('dropdown menu item', isHighlighted && 'active', disabled && 'disabled', color, className)\n\n const handleClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault()\n return\n }\n onClick?.()\n _onClick?.()\n }\n\n const Tag = component ?? (href || to ? 'a' : 'button')\n const linkProps = component ? {...(href ? {href} : {}), ...(to ? {to} : {})} : href ? {href} : to ? {href: to} : {}\n\n return (\n <Tag\n className={cls}\n role=\"menuitem\"\n tabIndex={-1}\n onClick={handleClick}\n onMouseEnter={_onHover}\n aria-disabled={disabled || undefined}\n {...linkProps}\n >\n {content}\n </Tag>\n )\n}\n;(MDropdownItem as any).__dropdownItem = true\n\nexport function MDropdownGroup({label, children}: MDropdownGroupProps) {\n return (\n <div className=\"dropdown menu group\" role=\"group\">\n <div className=\"dropdown menu group-label\">{label}</div>\n {children}\n </div>\n )\n}\n;(MDropdownGroup as any).__dropdownGroup = true\n\nexport function MDropdownDivider({className}: MDropdownDividerProps) {\n return <div className={cn('dropdown menu divider', className)} role=\"separator\" />\n}\n"],"mappings":";;;;;;AAeA,SAAS,EAAS,GAAkC;AAChD,QAAO,EAAG;;AAGd,SAAS,EAAO,GAAoC;AAChD,QAAO,CAAC,CAAE,EAAM,KAAa;;AAGjC,SAAS,EAAQ,GAAoC;AACjD,QAAO,CAAC,CAAE,EAAM,KAAa;;AAIjC,SAAS,EAAa,GAAiD;CACnE,IAAM,IAA8B,EAAE;AAatC,QAZA,EAAS,QAAQ,IAAW,MAAU;AAC7B,IAAe,EAAM,KACtB,EAAO,EAAM,GACb,EAAM,KAAK,EAAM,GACV,EAAQ,EAAM,IACrB,EAAS,QAAQ,EAAS,EAAM,CAAC,WAAW,MAAwB;AAChE,GAAI,EAAe,EAAG,IAAI,EAAO,EAAG,IAChC,EAAM,KAAK,EAAG;IAEpB;GAER,EACK;;AAGX,SAAgB,EAAc,EAC1B,YACA,eAAY,gBACZ,mBAAgB,IAChB,YAAS,SACT,iBACA,kBAAe,IACf,cACA,UACA,qBACA,iBACA,eACmB;CACnB,IAAM,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAY,EAAuB,KAAK,EACxC,IAAe,EAAsC,KAAK,EAE1D,IAAQ,EAAa,EAAS,EAC9B,IAAe,EAAM,QAAQ,MAAM,CAAC,EAAS,EAAE,CAAC,SAAS,CAAC,QAE1D,IAAc,GACf,MAAiD;AAC9C,KAAS,MAAS;GACd,IAAM,IAAW,OAAO,KAAS,aAAa,EAAK,EAAK,GAAG;AAE3D,UADA,IAAe,EAAS,EACjB;IACT;IAEN,CAAC,EAAa,CACjB,EAmBK,EAAC,gBAAa,mBAAgB,iBAAa,EAAe;EAC5D,WAAW;EACX,UAnBiB,GAChB,MAAkB;GACf,IAAI,IAAa;AACjB,QAAK,IAAM,KAAQ,GAAO;IACtB,IAAM,IAAI,EAAS,EAAK;AACpB,WAAE,UACN;SAAI,MAAe,GAAO;AACtB,QAAE,WAAW;AACb;;AAEJ;;;AAEJ,GAAI,KAAe,EAAY,GAAM;KAEzC;GAAC;GAAO;GAAe;GAAY,CACtC;EAKG,eAAe,EAAQ,GAAM;EAC7B,QAAQ;EACX,CAAC,EAEI,KAAsB,MAAwB;AAKhD,EAJI,MACA,EAAE,iBAAiB,EACnB,EAAE,gBAAgB,GAEtB,GAAa,MAAM,CAAC,EAAE;IAGpB,KAAwB,MAA2B;AAMrD,GALI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACxD,EAAE,gBAAgB,EACd,KAAc,EAAE,iBAAiB,EACrC,EAAY,GAAK,GAEjB,KAAM,EAAU,EAAS;IAI7B,IAAa,GACX,KAAe,MAA4C;AAC7D,MAAI,CAAC,EAAe,EAAM,CAAE,QAAO;AAEnC,MAAI,EAAO,EAAM,EAAE;GAEf,IAAM,IADI,EAAS,EAAM,CACJ,UACf,IAAM,IAAa,KAAK;AAC9B,UAAO,EAAa,GAAO;IACvB,SAAS,MAAQ;IACjB,UAAU,IAAa,KAAA,UAAkB,EAAe,EAAI;IAC5D,gBAAgB;AACR,UACA,KAAe,EAAY,GAAM;;IAE5C,CAAa;;AASlB,SANI,EAAQ,EAAM,GACP,EAAa,GAAO,EACvB,UAAU,EAAS,IAAI,EAAS,EAAM,CAAC,UAAU,EAAY,EAChE,CAAa,GAGX;IAGL,IACF,MAAW,UACL;EACI,oBAAoB;AAEhB,GADI,EAAa,WAAS,aAAa,EAAa,QAAQ,EAC5D,EAAY,GAAK;;EAErB,oBAAoB;AAChB,KAAa,UAAU,iBAAiB,EAAY,GAAM,EAAE,IAAI;;EAEvE,GACD,EAAE,EAgBN,IAAqB,KACpB,MAAwB;AAErB,EADA,EAAE,iBAAiB,EACnB,EAAE,gBAAgB;KAEtB,KAAA;AAEN,QACI,kBAAC,OAAD;EACI,WAAW,EAAG,wBAAwB,EAAU;EACzC;EACP,SAAS;EACT,GAAI;YAJR,CAMI,kBAAC,OAAD;GACI,KAAK;GACL,SAAS,MAAW,UAAU,IAAqB,KAAA;GACnD,WAAW;GACX,MAAK;GACL,UAAU;GACV,WAAU;aAET;GACC,CAAA,EACN,kBAAC,GAAD;GACU;GACK;GACX,eAAe,EAAY,GAAM;GACtB;GACX,WAAW,EAAG,yBAAyB,EAAiB;GACxD,OAAO;aAEP,kBAAC,OAAD;IAAK,WAAU;IAAqB,MAAK;IAAO,GAAI;cAC/C,EAAS,IAAI,GAAU,EAAY;IAClC,CAAA;GACC,CAAA,CACT;;;AAId,SAAgB,EAAc,EAC1B,SACA,UACA,SACA,OACA,YACA,UACA,cAAW,IACX,YAAS,IACT,cACA,cACA,YACA,aACA,eACuF;CACvF,IAAM,IAAgB,KAAW,GAE3B,IACF,kBAAA,GAAA,EAAA,UAAA,CACK,KAAQ,kBAAC,QAAD;EAAM,WAAU;YAAsB;EAAY,CAAA,EAC3D,kBAAC,QAAD;EAAM,WAAU;YAAuB;EAAa,CAAA,CACrD,EAAA,CAAA,EAGD,IAAM,EAAG,sBAAsB,KAAiB,UAAU,KAAY,YAAY,GAAO,EAAU,EAEnG,KAAe,MAAwB;AACzC,MAAI,GAAU;AACV,KAAE,gBAAgB;AAClB;;AAGJ,EADA,KAAW,EACX,KAAY;IAGV,IAAM,MAAc,KAAQ,IAAK,MAAM,WACvC,IAAY,IAAY;EAAC,GAAI,IAAO,EAAC,SAAK,GAAG,EAAE;EAAG,GAAI,IAAK,EAAC,OAAG,GAAG,EAAE;EAAE,GAAG,IAAO,EAAC,SAAK,GAAG,IAAK,EAAC,MAAM,GAAG,GAAG,EAAE;AAEnH,QACI,kBAAC,GAAD;EACI,WAAW;EACX,MAAK;EACL,UAAU;EACV,SAAS;EACT,cAAc;EACd,iBAAe,KAAY,KAAA;EAC3B,GAAI;YAEH;EACC,CAAA;;AAGb,EAAuB,iBAAiB;AAEzC,SAAgB,EAAe,EAAC,UAAO,eAAgC;AACnE,QACI,kBAAC,OAAD;EAAK,WAAU;EAAsB,MAAK;YAA1C,CACI,kBAAC,OAAD;GAAK,WAAU;aAA6B;GAAY,CAAA,EACvD,EACC;;;AAGb,EAAwB,kBAAkB;AAE3C,SAAgB,EAAiB,EAAC,gBAAmC;AACjE,QAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,yBAAyB,EAAU;EAAE,MAAK;EAAc,CAAA"}
|
|
1
|
+
{"version":3,"file":"MDropdownMenu-CFoKJ7V6.js","names":[],"sources":["../src/components/overlays/MDropdownMenu/MDropdownMenu.tsx"],"sourcesContent":["import {useState, useRef, useCallback, Children, isValidElement, cloneElement} from 'react'\nimport type * as React from 'react'\nimport {MPopover} from '../../primitives'\nimport {useKeyboardNav} from '../../../utils/useKeyboardNav'\nimport {cn} from '../../../utils/cn'\nimport type {\n MDropdownMenuProps,\n MDropdownItemProps,\n MDropdownGroupProps,\n MDropdownDividerProps,\n} from './MDropdownMenu.types'\nimport './MDropdownMenu.css'\n\ntype AnyProps = Record<string, any>\n\nfunction getProps(el: React.ReactElement): AnyProps {\n return el.props as AnyProps\n}\n\nfunction isItem(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownItem\n}\n\nfunction isGroup(child: React.ReactElement): boolean {\n return !!(child.type as any).__dropdownGroup\n}\n\n// Collect all MDropdownItem elements from children (including inside groups).\nfunction collectItems(children: React.ReactNode): React.ReactElement[] {\n const items: React.ReactElement[] = []\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) return\n if (isItem(child)) {\n items.push(child)\n } else if (isGroup(child)) {\n Children.forEach(getProps(child).children, (gc: React.ReactNode) => {\n if (isValidElement(gc) && isItem(gc)) {\n items.push(gc)\n }\n })\n }\n })\n return items\n}\n\nexport function MDropdownMenu({\n trigger,\n placement = 'bottom-start',\n closeOnSelect = true,\n openOn = 'click',\n onOpenChange,\n isolateClick = false,\n className,\n style,\n popoverClassName,\n popoverStyle,\n children,\n}: MDropdownMenuProps) {\n const [open, setOpen] = useState(false)\n const anchorRef = useRef<HTMLDivElement>(null)\n const hoverTimeout = useRef<ReturnType<typeof setTimeout>>(null)\n\n const items = collectItems(children)\n const enabledCount = items.filter((i) => !getProps(i).disabled).length\n\n const setMenuOpen = useCallback(\n (next: boolean | ((prev: boolean) => boolean)) => {\n setOpen((prev) => {\n const resolved = typeof next === 'function' ? next(prev) : next\n onOpenChange?.(resolved)\n return resolved\n })\n },\n [onOpenChange]\n )\n\n const handleSelect = useCallback(\n (index: number) => {\n let enabledIdx = 0\n for (const item of items) {\n const p = getProps(item)\n if (p.disabled) continue\n if (enabledIdx === index) {\n p.onClick?.()\n break\n }\n enabledIdx++\n }\n if (closeOnSelect) setMenuOpen(false)\n },\n [items, closeOnSelect, setMenuOpen]\n )\n\n const {activeIndex, setActiveIndex, onKeyDown} = useKeyboardNav({\n itemCount: enabledCount,\n onSelect: handleSelect,\n onClose: () => setOpen(false),\n isOpen: open,\n })\n\n const handleTriggerClick = (e: React.MouseEvent) => {\n if (isolateClick) {\n e.stopPropagation()\n e.preventDefault()\n }\n setMenuOpen((o) => !o)\n }\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (isolateClick) e.stopPropagation()\n setMenuOpen(true)\n }\n if (open) onKeyDown(e as any)\n }\n\n // Map active index back to flat child rendering with enabled-only tracking.\n let enabledIdx = 0\n const renderChild = (child: React.ReactNode): React.ReactNode => {\n if (!isValidElement(child)) return child\n\n if (isItem(child)) {\n const p = getProps(child)\n const isDisabled = p.disabled\n const idx = isDisabled ? -1 : enabledIdx++\n return cloneElement(child, {\n _active: idx === activeIndex,\n _onHover: isDisabled ? undefined : () => setActiveIndex(idx),\n _onClick: () => {\n if (isDisabled) return\n if (closeOnSelect) setMenuOpen(false)\n },\n } as AnyProps)\n }\n\n if (isGroup(child)) {\n return cloneElement(child, {\n children: Children.map(getProps(child).children, renderChild),\n } as AnyProps)\n }\n\n return child\n }\n\n const hoverHandlers =\n openOn === 'hover'\n ? {\n onMouseEnter: () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n setMenuOpen(true)\n },\n onMouseLeave: () => {\n hoverTimeout.current = setTimeout(() => setMenuOpen(false), 150)\n },\n }\n : {}\n\n /**\n * When `isolateClick` is set, every click bubbling out of the menu\n * (trigger AND items) must be stopped — otherwise selecting an action\n * also fires the click handler on a clickable parent (Link, MCard with\n * onClick, MDataTable row link). Trigger click itself is handled by\n * `handleTriggerClick`; this wrapper catches the bubbled item clicks\n * before they leave the anchor. `preventDefault` is needed too — when the\n * dropdown is rendered inside an `<a href>` (MCard component={Link}),\n * stopping propagation alone does not block native link navigation.\n *\n * Caveat: MDropdownItem with `href` will not navigate while inside an\n * `isolateClick` menu — use programmatic navigation (onClick + navigate)\n * in those contexts instead.\n */\n const isolateAnchorClick = isolateClick\n ? (e: React.MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n }\n : undefined\n\n return (\n <div\n className={cn('dropdown menu anchor', className)}\n style={style}\n onClick={isolateAnchorClick}\n {...hoverHandlers}\n >\n <div\n ref={anchorRef}\n onClick={openOn === 'click' ? handleTriggerClick : undefined}\n onKeyDown={handleTriggerKeyDown}\n role=\"button\"\n tabIndex={0}\n className=\"dropdown menu trigger\"\n >\n {trigger}\n </div>\n <MPopover\n open={open}\n anchorRef={anchorRef}\n onClose={() => setMenuOpen(false)}\n placement={placement}\n className={cn('dropdown menu popover', popoverClassName)}\n style={popoverStyle}\n >\n <div className=\"dropdown menu list\" role=\"menu\" {...hoverHandlers}>\n {Children.map(children, renderChild)}\n </div>\n </MPopover>\n </div>\n )\n}\n\nexport function MDropdownItem({\n icon,\n label,\n href,\n to,\n onClick,\n color,\n disabled = false,\n active = false,\n component,\n className,\n _active,\n _onHover,\n _onClick,\n}: MDropdownItemProps & {_active?: boolean; _onHover?: () => void; _onClick?: () => void}) {\n const isHighlighted = _active ?? active\n\n const content = (\n <>\n {icon && <span className=\"dropdown menu icon\">{icon}</span>}\n <span className=\"dropdown menu label\">{label}</span>\n </>\n )\n\n const cls = cn('dropdown menu item', isHighlighted && 'active', disabled && 'disabled', color, className)\n\n const handleClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault()\n return\n }\n onClick?.()\n _onClick?.()\n }\n\n const Tag = component ?? (href || to ? 'a' : 'button')\n const linkProps = component ? {...(href ? {href} : {}), ...(to ? {to} : {})} : href ? {href} : to ? {href: to} : {}\n\n return (\n <Tag\n className={cls}\n role=\"menuitem\"\n tabIndex={-1}\n onClick={handleClick}\n onMouseEnter={_onHover}\n aria-disabled={disabled || undefined}\n {...linkProps}\n >\n {content}\n </Tag>\n )\n}\n;(MDropdownItem as any).__dropdownItem = true\n\nexport function MDropdownGroup({label, children}: MDropdownGroupProps) {\n return (\n <div className=\"dropdown menu group\" role=\"group\">\n <div className=\"dropdown menu group-label\">{label}</div>\n {children}\n </div>\n )\n}\n;(MDropdownGroup as any).__dropdownGroup = true\n\nexport function MDropdownDivider({className}: MDropdownDividerProps) {\n return <div className={cn('dropdown menu divider', className)} role=\"separator\" />\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Ki as e, Xi as t, Yi as n } from "./icons-CBMl-kOM.js";
|
|
2
2
|
import { t as r } from "./cn-YER3QsV1.js";
|
|
3
3
|
import { n as i, t as a } from "./MInput-C8ObGzQk.js";
|
|
4
|
-
import { i as o, r as s } from "./MDropdownMenu-
|
|
4
|
+
import { i as o, r as s } from "./MDropdownMenu-CFoKJ7V6.js";
|
|
5
5
|
import { forwardRef as c, useCallback as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
6
6
|
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/inputs/MInputExpDate/MInputExpDate.tsx
|
|
@@ -317,4 +317,4 @@ var w = c(function({ length: e = 3, validateOnBlur: t = !0, validateOnChange: i
|
|
|
317
317
|
//#endregion
|
|
318
318
|
export { x as n, w as t };
|
|
319
319
|
|
|
320
|
-
//# sourceMappingURL=MInputCVC-
|
|
320
|
+
//# sourceMappingURL=MInputCVC-B4V0QI5h.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInputCVC-DvUOzpYp.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-B4V0QI5h.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":";;;;;;;AAWA,IAAM,IAAuB,EAAC,OAAO,IAAK;AAE1C,SAAS,EAAY,GAAe;AAChC,QAAO,EAAM,QAAQ,OAAO,GAAG;;AAGnC,SAAS,EAAS,GAAgB;AAK9B,QAJK,IAIE,EAAM,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,GAH9B;;AAMf,SAAS,EAAY,GAAgB,GAAe;CAChD,IAAM,IAAgB,EAAS,EAAM,EAC/B,IAAe,GAAM,MAAM,GAAG,EAAE,IAAI;AAU1C,QARI,CAAC,KAAiB,CAAC,IACZ,KAGN,IAIE,GAAG,EAAc,GAAG,MAHhB;;AAMf,SAAS,EAAW,GAAe;CAC/B,IAAM,IAAS,EAAY,EAAM,CAAC,MAAM,GAAG,EAAE;AAE7C,QAAO;EACH,OAAO,EAAO,MAAM,GAAG,EAAE;EACzB,MAAM,EAAO,MAAM,GAAG,EAAE;EAC3B;;AAGL,SAAS,EAAkB,GAAkB,GAAkB;CAC3D,IAAM,qBAAc,IAAI,MAAM,EAAC,aAAa,EACtC,IAAkB,KAAK,IAAI,KAAW,GAAa,EAAY;AAGrE,QAAO;EACH;EACA,iBAJoB,KAAK,IAAI,KAAW,IAAc,IAAI,EAAgB;EAK7E;;AAGL,SAAS,GACL,GACA,EAAC,YAAS,cACM;AAChB,KAAI,CAAC,EACD,QAAO;CAGX,IAAM,EAAC,OAAO,GAAY,MAAM,MAAa,EAAW,EAAM;AAE9D,KAAI,EAAW,WAAW,KAAK,EAAU,WAAW,EAChD,QAAO;EAAC,OAAO;EAAO,OAAO;EAAgC;CAGjE,IAAM,IAAQ,SAAS,GAAY,GAAG,EAChC,IAAO,SAAS,GAAW,GAAG,EAC9B,EAAC,oBAAiB,uBAAmB,EAAkB,GAAS,EAAQ;AAE9E,KAAI,OAAO,MAAM,EAAM,IAAI,IAAQ,KAAK,IAAQ,GAC5C,QAAO;EAAC,OAAO;EAAO,OAAO;EAAoB;AAGrD,KAAI,OAAO,MAAM,EAAK,CAClB,QAAO;EAAC,OAAO;EAAO,OAAO;EAAmB;AAGpD,KAAI,IAAO,EACP,QAAO;EAAC,OAAO;EAAO,OAAO,gBAAgB,EAAgB;EAAW;AAG5E,KAAI,IAAO,EACP,QAAO;EAAC,OAAO;EAAO,OAAO,gBAAgB,EAAgB;EAAa;CAG9E,IAAM,oBAAM,IAAI,MAAM,EAChB,IAAe,EAAI,UAAU,GAAG,GAChC,IAAc,EAAI,aAAa;AAMrC,QAJI,IAAO,KAAgB,MAAS,KAAe,IAAQ,IAChD;EAAC,OAAO;EAAO,OAAO;EAAmB,GAG7C;;AAGX,IAAa,IAAgB,EAAiD,SAC1E,EACI,oBAAiB,IACjB,sBAAmB,IACnB,YACA,YACA,uBACA,kBACA,UACA,kBACA,SACA,OACA,cAAW,IACX,cAAW,IACX,cAAW,IACX,eAAY,IACZ,cAAU,YACV,UAAO,MACP,UACA,gBAAY,IACZ,cAAU,IACV,UACA,eACA,eACA,cACA,YACA,gBAAY,IACZ,YAAQ,IACR,aACA,cACA,YACA,WACA,aACA,eACA,WACA,sBAEJ,GACF;CACE,IAAM,IAAW,EAAyB,KAAK,EACzC,KAAU,EAAuB,KAAK,EACtC,EAAC,iBAAc,wBAAmB,EAAsB,GAAO,GAAa,EAC5E,CAAC,GAAY,MAAiB,EAA2B,EAAG,EAC5D,CAAC,GAAS,MAAc,EAAS,GAAM,EACvC,CAAC,GAAS,MAAc,EAAS,GAAM,EACvC,CAAC,IAAe,MAAoB,EAAS,GAAM,EACnD,CAAC,IAAc,MAAmB,EAAS,GAAM,EAEjD,EAAC,UAAO,YAAQ,EAAW,EAAa,EACxC,KAAa,GAAQ,KAAS,IAC9B,IAAkB,KAAY,GAC9B,EAAC,oBAAiB,wBAAmB,EAAkB,GAAS,EAAQ,EACxE,KAAc,QACV,MAAM,KAAK,EAAC,QAAQ,KAAkB,IAAkB,GAAE,GAAG,GAAG,MAAU,IAAkB,EAAM,EACxG,CAAC,IAAiB,EAAgB,CACrC,EAEK,IAAgB,GACjB,MAA2B;EACxB,IAAM,IAAS,GAAgB,GAAgB;GAAC;GAAS;GAAQ,CAAC;AAGlE,SAFA,GAAc,EAAO,EACrB,IAAqB,EAAO,EACrB;IAEX;EAAC;EAAS;EAAS;EAAmB,CACzC,EAEK,IAAY,GACb,MAA2B;AAExB,EADA,GAAgB,EAAe,EAC/B,IAAgB,EAAY,EAAe,EAAE,EAAe;EAE5D,IAAM,IAAS,GAA2C,WAAW,EAAS;AAC9E,EAAI,OACkB,OAAO,yBAAyB,iBAAiB,WAAW,QAAQ,EAAE,MAC7E,KAAK,GAAO,EAAe,EACtC,EAAM,cAAc,IAAI,MAAM,SAAS,EAAC,SAAS,IAAK,CAAC,CAAC;IAGhE;EAAC;EAAe;EAAK;EAAgB,CACxC,EAEK,IAAc,GACf,GAAoB,MAAsB;EACvC,IAAM,IAAiB,EAAY,GAAW,EAAS;AAGvD,EAFA,EAAU,EAAe,EAErB,KAAoB,KACpB,EAAc,EAAe;IAGrC;EAAC;EAAe;EAAW;EAAS;EAAiB,CACxD,EAEK,IAAmB,QAAkB;AAEvC,GADe,GAA2C,WAAW,EAAS,UACvE,OAAO;IACf,CAAC,EAAI,CAAC,EAEH,KAAkB,GACnB,MAA4C;AACzC,MAAI,EACA;AAGJ,KAAW,GAAK;EAChB,IAAM,IAAS,GAA2C,WAAW,EAAS;AAC9E,EAAI,KAAS,EAAM,WAAW,KAC1B,IAAU,EAAuD;IAGzE;EAAC;EAAS;EAAS;EAAI,CAC1B,EAEK,KAAiB,GAClB,MAA4C;EACzC,IAAM,IAAa,EAAM;AAErB,OAAc,GAAQ,SAAS,SAAS,EAAW,KAIvD,GAAW,GAAM,EACjB,GAAW,GAAK,EAEZ,KAAkB,KAClB,EAAc,EAAa,EAG/B,IAAS,EAAuD;IAEpE;EAAC;EAAc;EAAQ;EAAe;EAAe,CACxD,EAEK,KAAoB,GACrB,MAAsB;AAEnB,EADA,GAAkB,EAClB,EAAY,GAAW,EAAK;IAEhC;EAAC;EAAkB;EAAa;EAAK,CACxC,EAEK,KAAmB,GACpB,MAAqB;AAElB,EADA,GAAkB,EAClB,EAAY,GAAO,EAAS;IAEhC;EAAC;EAAkB;EAAO;EAAY,CACzC,EAEK,KAAc,QAAkB;AAMlC,EALA,EAAU,GAAG,EACb,GAAW,GAAM,EACjB,GAAc,EAAG,EACjB,IAAqB,EAAG,EACxB,MAAW,EACX,GAAkB;IACnB;EAAC;EAAkB;EAAS;EAAoB;EAAU,CAAC,EAExD,IAAW,MAAU,KAAW,CAAC,EAAW,OAC5C,IAAoB,OAAc,KAAW,CAAC,EAAW,QAAQ,EAAW,QAAQ,KAAA,IACpF,KACF,CAAC,MAAa,OAAY,KAAA,IAAsB,KAAW,EAAW,SAAS,GAAQ,KAAS,KAA1D,KACpC,KAAqB,IAAW,gBAAgB,IAAQ,SAAS,MAAU,KAAA,GAE3E,KAAmB,EACrB,aACA,SAAS,MACT,SAAS,KACT,KAAW,WACX,KAAY,eACZ,MAAa,CAAC,KAAY,iBAC1B,IACA,KAAY,YACZ,MAAW,UACd,EAEK,KAAa,KAAS,MACtB,KAAY,KAAQ;AAE1B,QACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,SAAS,kBAAkB,IAAoB,MAAa,cAAc,GAAU;EAC3F;EACP,gBAAgB;EAChB,eAAe;YALnB;GAOK,KACG,kBAAC,SAAD;IACI,SAAS;IACT,WAAW,EACP,eACA,KAAW,WACX,KAAY,SACZ,MAAa,CAAC,KAAY,WAC1B,KAAY,YACZ,GACH;cAEA;IACG,CAAA;GAGZ,kBAAC,OAAD;IAAK,WAAW;IAAkB,SAAS;cAA3C;KACK,KAAa,kBAAC,QAAD;MAAM,WAAU;gBAAc;MAAiB,CAAA;KAE7D,kBAAC,SAAD;MACI,KAAK,KAAO;MACZ,MAAK;MACL,OAAO;MACD;MACF;MACJ,UAAA;MACU;MACC;MACX,WAAU;MACV,UAAU;MACV,eAAY;MACF;MACD;MACD;MACV,CAAA;KAEF,kBAAC,OAAD;MAAK,WAAU;MAA0B,cAAW;gBAApD;OACK,IACG,kBAAC,QAAD;QAAM,WAAW,EAAG,0BAA0B,CAAC,KAAS,eAAe,SAAS;kBAC5E,kBAAC,QAAD,EAAA,UAAO,IAAkB,CAAA;QACtB,CAAA,GAEP,kBAAC,GAAD;QACI,SACI,kBAAC,QAAD;SACI,WAAW,EACP,0BACA,MAAiB,QACjB,CAAC,KAAS,cACb;SACD,aAAa;mBANjB,CAQI,kBAAC,QAAD,EAAA,UAAO,IAAkB,CAAA,EACzB,kBAAC,GAAD,EAAkB,MAAM,IAAM,CAAA,CAC3B;;QAEX,QAAO;QACP,eAAA;QACA,cAAc;QACd,kBAAiB;kBAEhB,MAAM,KAAK,EAAC,QAAQ,IAAG,GAAG,GAAG,MAAU;SACpC,IAAM,IAAS,OAAO,IAAQ,EAAE,CAAC,SAAS,GAAG,IAAI;AAEjD,gBACI,kBAAC,GAAD;UAEI,OAAO;UACP,QAAQ,MAAU;UAClB,eAAe,GAAkB,EAAO;UAC1C,EAJO,EAIP;UAER;QACU,CAAA;OAGpB,kBAAC,QAAD;QAAM,WAAU;kBAA2B;QAAQ,CAAA;OAElD,IACG,kBAAC,QAAD;QAAM,WAAW,EAAG,0BAA0B,CAAC,KAAQ,eAAe,SAAS;kBAC3E,kBAAC,QAAD,EAAA,UAAO,IAAiB,CAAA;QACrB,CAAA,GAEP,kBAAC,GAAD;QACI,SACI,kBAAC,QAAD;SACI,WAAW,EACP,0BACA,MAAgB,QAChB,CAAC,KAAQ,cACZ;SACD,aAAa;mBANjB,CAQI,kBAAC,QAAD,EAAA,UAAO,IAAiB,CAAA,EACxB,kBAAC,GAAD,EAAkB,MAAM,IAAM,CAAA,CAC3B;;QAEX,QAAO;QACP,eAAA;QACA,cAAc;QACd,kBAAiB;kBAEhB,GAAY,KAAK,MACd,kBAAC,GAAD;SAEI,OAAO,OAAO,EAAO;SACrB,QAAQ,MAAS,OAAO,EAAO;SAC/B,eAAe,GAAiB,OAAO,EAAO,CAAC;SACjD,EAJO,EAIP,CACJ;QACU,CAAA;OAElB;;KAEL,MAAa,MAAc,CAAC,KACzB,kBAAC,UAAD;MACI,MAAK;MACL,WAAU;MACV,UAAU,MAAU;AAEhB,OADA,EAAM,iBAAiB,EACvB,IAAa;;MAEjB,UAAU;MACV,cAAW;gBAEX,kBAAC,GAAD,EAAc,CAAA;MACT,CAAA;KAGZ,KAAW,kBAAC,QAAD;MAAM,WAAU;gBAAY;MAAe,CAAA;KACrD;;IAEJ,KAAqB,MACnB,kBAAC,OAAD;IAAK,WAAU;cACX,kBAAC,QAAD,EAAA,UAAA,CACK,KACG,kBAAC,QAAD;KAAM,IAAI,IAAK,GAAG,EAAG,UAAU,KAAA;KAAW,WAAU;KAAc,MAAK;eAClE;KACE,CAAA,EAEV,CAAC,KAAqB,KACnB,kBAAC,QAAD;KAAM,IAAI,IAAK,GAAG,EAAG,WAAW,KAAA;KAAW,WAAU;eAChD;KACE,CAAA,CAER,EAAA,CAAA;IACL,CAAA;GAER;;EAEZ,EClbI,IAAuB,EAAC,OAAO,IAAK;AAE1C,SAAS,EAAY,GAAe;AAChC,QAAO,EAAM,QAAQ,OAAO,GAAG;;AAGnC,SAAS,GAAY,GAAe,GAAiC;AAWjE,QAVK,IAIU,EAAY,EAAM,CAEtB,WAAW,IAIf,IAHI;EAAC,OAAO;EAAO,OAAO,2BAA2B,EAAO;EAAS,GANjE;;AAYf,IAAa,IAAY,EAA6C,SAClE,EACI,YAAS,GACT,oBAAiB,IACjB,sBAAmB,IACnB,uBACA,kBACA,UACA,iBACA,aACA,WACA,cACA,UACA,cACA,YACA,gBACA,cACA,oBACA,GAAG,KAEP,GACF;CACE,IAAM,CAAC,GAAe,KAAoB,QACtC,EAAY,GAAc,UAAU,IAAI,GAAG,CAAC,MAAM,GAAG,EAAO,CAC/D,EACK,CAAC,GAAY,KAAiB,EAA2B,EAAG,EAC5D,CAAC,GAAS,MAAc,EAAS,GAAM,EAEvC,IAAe,MAAU,KAAA,IAA6D,IAAjD,EAAY,EAAM,UAAU,CAAC,CAAC,MAAM,GAAG,EAAO,EAEnF,IAAgB,GACjB,MAAsB;EACnB,IAAM,IAAS,GAAY,GAAW,EAAO;AAG7C,SAFA,EAAc,EAAO,EACrB,IAAqB,EAAO,EACrB;IAEX,CAAC,GAAQ,EAAmB,CAC/B,EAEK,KAAe,GAChB,MAA+C;EAC5C,IAAM,IAAY,EAAY,EAAM,OAAO,MAAM,CAAC,MAAM,GAAG,EAAO;AAYlE,EAVI,MAAU,KAAA,KACV,EAAiB,EAAU,EAG/B,IAAgB,EAAU,EAEtB,KAAoB,KACpB,EAAc,EAAU,EAG5B,IAAW,EAAM;IAErB;EAAC;EAAQ;EAAU;EAAe;EAAe;EAAS;EAAkB;EAAM,CACrF,EAEK,KAAa,GACd,MAA8C;AAO3C,EANA,GAAW,GAAK,EAEZ,KAAkB,KAClB,EAAc,EAAa,EAG/B,IAAS,EAAM;IAEnB;EAAC;EAAc;EAAQ;EAAe;EAAe,CACxD,EAEK,IAAgB,GACjB,MAAiD;AAC9C,MAAI;GAAC;GAAa;GAAU;GAAO;GAAa;GAAc;GAAQ;GAAM,CAAC,SAAS,EAAM,IAAI,EAAE;AAC9F,OAAY,EAAM;AAClB;;AAGJ,MAAI,EAAM,WAAW,EAAM,SAAS;AAChC,OAAY,EAAM;AAClB;;AAOJ,EAJK,OAAO,KAAK,EAAM,IAAI,IACvB,EAAM,gBAAgB,EAG1B,IAAY,EAAM;IAEtB,CAAC,EAAU,CACd,EAEK,IAAU,KAAU,KAAW,CAAC,EAAW,OAC3C,KAAoB,MAAc,KAAW,CAAC,EAAW,QAAQ,EAAW,QAAQ,KAAA,IACpF,IAAY,CAAC,MAAY,MAAY,KAAA,IAAsB,KAAW,EAAa,WAAW,IAA7C,IACjD,IAAU,IAAY,kBAAC,GAAD,EAAc,CAAA,GAAG,KAAA;AAE7C,QACI,kBAAC,GAAD;EACI,GAAI;EACC;EACL,MAAK;EACL,WAAU;EACV,OAAO;EACP,UAAU;EACV,QAAQ;EACR,WAAW;EACX,OAAO;EACP,WAAW;EACX,SAAS;EACT,aAAa,KAAe,GAAG,OAAO,GAAQ,IAAI;EAClD,WAAW;EACF;EACT,gBAAgB,EAAG,mBAAmB,GAAe;EAC1C;EACb,CAAA;EAER"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./icons-D675Im0B.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MInput-BpTlP8GE.cjs`),r=require(`./MDropdownMenu-
|
|
2
|
-
//# sourceMappingURL=MInputCVC-
|
|
1
|
+
const e=require(`./icons-D675Im0B.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MInput-BpTlP8GE.cjs`),r=require(`./MDropdownMenu-BvN5grK5.cjs`);require(`./core-DBpQf3uY.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.Ki,{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.Ki,{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.Xi,{})}),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.Yi,{}):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-BlY5OrVn.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInputCVC-_2ALihF1.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-BlY5OrVn.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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"}
|