@basic-ui/core 0.0.49 → 0.0.51
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/build/cjs/index.js +19 -5
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Menu/MenuItem.js +1 -0
- package/build/esm/Menu/MenuItem.js.map +1 -1
- package/build/esm/Menu/MenuList.d.ts +1 -1
- package/build/esm/Menu/MenuList.js +17 -4
- package/build/esm/Menu/MenuList.js.map +1 -1
- package/build/esm/TimerField/clamp.d.ts +1 -0
- package/build/esm/TimerField/clamp.js +2 -0
- package/build/esm/TimerField/clamp.js.map +1 -0
- package/build/esm/TimerField/index.d.ts +1 -0
- package/build/esm/TimerField/index.js +2 -0
- package/build/esm/TimerField/index.js.map +1 -0
- package/build/esm/TimerField/useControlledState.d.ts +1 -0
- package/build/esm/TimerField/useControlledState.js +2 -0
- package/build/esm/TimerField/useControlledState.js.map +1 -0
- package/build/esm/TimerField/useTimerField.d.ts +44 -0
- package/build/esm/TimerField/useTimerField.js +430 -0
- package/build/esm/TimerField/useTimerField.js.map +1 -0
- package/build/esm/TimerField/wrapEvent.d.ts +1 -0
- package/build/esm/TimerField/wrapEvent.js +2 -0
- package/build/esm/TimerField/wrapEvent.js.map +1 -0
- package/build/esm/utils/wrap-event.js +1 -1
- package/build/esm/utils/wrap-event.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/Menu/MenuItem.tsx +1 -0
- package/src/Menu/MenuList.tsx +16 -5
- package/src/utils/wrap-event.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","names":["forwardRef","useRef","useId","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","innerAs","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"sources":["../../../src/Menu/MenuItem.tsx"],"sourcesContent":["import type {\n LiHTMLAttributes,\n ElementType,\n MouseEvent,\n KeyboardEvent,\n KeyboardEventHandler,\n} from 'react';\nimport { forwardRef, useRef, useId } from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n onSelect?: (\n e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n ) => void;\n disabled?: boolean;\n}\n\nexport const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(\n props,\n forwardedRef\n) {\n const {\n as: Comp = 'li',\n innerAs,\n disabled,\n onSelect,\n onClick,\n onKeyDown,\n ...otherProps\n } = props;\n const { onChange, buttonRef } = useMenuContext();\n const { navigationItem, onNavigate } = useMenuListContext();\n const ref = useRef<HTMLLIElement>();\n const itemId = useId();\n\n const isActive = ref.current && ref.current === navigationItem;\n\n const handleSelect = wrapEvent(\n onSelect,\n (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {\n onChange(e, false);\n buttonRef.current?.focus();\n e.preventDefault();\n }\n );\n\n const handleClick = (e: MouseEvent<HTMLLIElement>) => {\n if (!disabled) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n onNavigate && onNavigate(ref.current!);\n handleSelect(e);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {\n switch (e.key) {\n case 'Enter':\n if (!disabled) {\n handleSelect(e);\n }\n break;\n }\n };\n\n return (\n <Comp\n ref={assignMultipleRefs(ref, forwardedRef)}\n as={innerAs}\n id={disabled ? undefined : itemId}\n data-menu-item=\"\"\n data-highlighted={isActive ? '' : undefined}\n role=\"menuitem\"\n onClick={wrapEvent(onClick, handleClick)}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n data-disabled={disabled ? '' : undefined}\n aria-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...otherProps}\n />\n );\n});\n"],"mappings":";;;AAOA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,qBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGP,UAAU,CAAqB,SAASO,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;EACA,gBAQID,KARJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,IADb;EAAA,IAEEC,OAFF,GAQIJ,KARJ,CAEEI,OAFF;EAAA,IAGEC,QAHF,GAQIL,KARJ,CAGEK,QAHF;EAAA,IAIEC,QAJF,GAQIN,KARJ,CAIEM,QAJF;EAAA,IAKEC,OALF,GAQIP,KARJ,CAKEO,OALF;EAAA,IAMEC,SANF,GAQIR,KARJ,CAMEQ,SANF;EAAA,IAOKC,UAPL,4BAQIT,KARJ;;EASA,sBAAgCL,cAAc,EAA9C;EAAA,IAAQe,QAAR,mBAAQA,QAAR;EAAA,IAAkBC,SAAlB,mBAAkBA,SAAlB;;EACA,0BAAuCf,kBAAkB,EAAzD;EAAA,IAAQgB,cAAR,uBAAQA,cAAR;EAAA,IAAwBC,UAAxB,uBAAwBA,UAAxB;;EACA,IAAMC,GAAG,GAAGrB,MAAM,EAAlB;EACA,IAAMsB,MAAM,GAAGrB,KAAK,EAApB;EAEA,IAAMsB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;EAEA,IAAMM,YAAY,GAAGpB,SAAS,CAC5BQ,QAD4B,EAE5B,UAACa,CAAD,EAAiE;IAAA;;IAC/DT,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAAR;IACA,sBAAAR,SAAS,CAACM,OAAV,0EAAmBG,KAAnB;IACAD,CAAC,CAACE,cAAF;EACD,CAN2B,CAA9B;;EASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAkC;IACpD,IAAI,CAACd,QAAL,EAAe;MACb;MACAQ,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;MACAC,YAAY,CAACC,CAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAkD,GAAG,SAArDA,aAAqD,CAACJ,CAAD,EAAO;IAChE,QAAQA,CAAC,CAACK,GAAV;MACE,KAAK,OAAL;QACE,IAAI,CAACnB,QAAL,EAAe;UACba,YAAY,CAACC,CAAD,CAAZ;QACD;;QACD;
|
|
1
|
+
{"version":3,"file":"MenuItem.js","names":["forwardRef","useRef","useId","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","innerAs","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"sources":["../../../src/Menu/MenuItem.tsx"],"sourcesContent":["import type {\n LiHTMLAttributes,\n ElementType,\n MouseEvent,\n KeyboardEvent,\n KeyboardEventHandler,\n} from 'react';\nimport { forwardRef, useRef, useId } from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n onSelect?: (\n e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n ) => void;\n disabled?: boolean;\n}\n\nexport const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(\n props,\n forwardedRef\n) {\n const {\n as: Comp = 'li',\n innerAs,\n disabled,\n onSelect,\n onClick,\n onKeyDown,\n ...otherProps\n } = props;\n const { onChange, buttonRef } = useMenuContext();\n const { navigationItem, onNavigate } = useMenuListContext();\n const ref = useRef<HTMLLIElement>();\n const itemId = useId();\n\n const isActive = ref.current && ref.current === navigationItem;\n\n const handleSelect = wrapEvent(\n onSelect,\n (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {\n onChange(e, false);\n buttonRef.current?.focus();\n e.preventDefault();\n }\n );\n\n const handleClick = (e: MouseEvent<HTMLLIElement>) => {\n if (!disabled) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n onNavigate && onNavigate(ref.current!);\n handleSelect(e);\n }\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {\n switch (e.key) {\n case ' ':\n case 'Enter':\n if (!disabled) {\n handleSelect(e);\n }\n break;\n }\n };\n\n return (\n <Comp\n ref={assignMultipleRefs(ref, forwardedRef)}\n as={innerAs}\n id={disabled ? undefined : itemId}\n data-menu-item=\"\"\n data-highlighted={isActive ? '' : undefined}\n role=\"menuitem\"\n onClick={wrapEvent(onClick, handleClick)}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n data-disabled={disabled ? '' : undefined}\n aria-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...otherProps}\n />\n );\n});\n"],"mappings":";;;AAOA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,qBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGP,UAAU,CAAqB,SAASO,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;EACA,gBAQID,KARJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,IADb;EAAA,IAEEC,OAFF,GAQIJ,KARJ,CAEEI,OAFF;EAAA,IAGEC,QAHF,GAQIL,KARJ,CAGEK,QAHF;EAAA,IAIEC,QAJF,GAQIN,KARJ,CAIEM,QAJF;EAAA,IAKEC,OALF,GAQIP,KARJ,CAKEO,OALF;EAAA,IAMEC,SANF,GAQIR,KARJ,CAMEQ,SANF;EAAA,IAOKC,UAPL,4BAQIT,KARJ;;EASA,sBAAgCL,cAAc,EAA9C;EAAA,IAAQe,QAAR,mBAAQA,QAAR;EAAA,IAAkBC,SAAlB,mBAAkBA,SAAlB;;EACA,0BAAuCf,kBAAkB,EAAzD;EAAA,IAAQgB,cAAR,uBAAQA,cAAR;EAAA,IAAwBC,UAAxB,uBAAwBA,UAAxB;;EACA,IAAMC,GAAG,GAAGrB,MAAM,EAAlB;EACA,IAAMsB,MAAM,GAAGrB,KAAK,EAApB;EAEA,IAAMsB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;EAEA,IAAMM,YAAY,GAAGpB,SAAS,CAC5BQ,QAD4B,EAE5B,UAACa,CAAD,EAAiE;IAAA;;IAC/DT,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAAR;IACA,sBAAAR,SAAS,CAACM,OAAV,0EAAmBG,KAAnB;IACAD,CAAC,CAACE,cAAF;EACD,CAN2B,CAA9B;;EASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAkC;IACpD,IAAI,CAACd,QAAL,EAAe;MACb;MACAQ,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;MACAC,YAAY,CAACC,CAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAkD,GAAG,SAArDA,aAAqD,CAACJ,CAAD,EAAO;IAChE,QAAQA,CAAC,CAACK,GAAV;MACE,KAAK,GAAL;MACA,KAAK,OAAL;QACE,IAAI,CAACnB,QAAL,EAAe;UACba,YAAY,CAACC,CAAD,CAAZ;QACD;;QACD;IANJ;EAQD,CATD;;EAWA,oBACE,KAAC,IAAD;IACE,GAAG,EAAEtB,kBAAkB,CAACiB,GAAD,EAAMb,YAAN,CADzB;IAEE,EAAE,EAAEG,OAFN;IAGE,EAAE,EAAEC,QAAQ,GAAGoB,SAAH,GAAeV,MAH7B;IAIE,kBAAe,EAJjB;IAKE,oBAAkBC,QAAQ,GAAG,EAAH,GAAQS,SALpC;IAME,IAAI,EAAC,UANP;IAOE,OAAO,EAAE3B,SAAS,CAACS,OAAD,EAAUe,WAAV,CAPpB;IAQE,QAAQ,EAAEjB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAR5B;IASE,SAAS,EAAEP,SAAS,CAACU,SAAD,EAAYe,aAAZ,CATtB;IAUE,iBAAelB,QAAQ,GAAG,EAAH,GAAQoB,SAVjC;IAWE,iBAAepB,QAAQ,GAAG,EAAH,GAAQoB,SAXjC;IAYE,QAAQ,EAAEpB;EAZZ,GAaMI,UAbN,EADF;AAiBD,CAjEiC,CAA3B"}
|
|
@@ -2,6 +2,6 @@ import type { HTMLAttributes, ElementType } from 'react';
|
|
|
2
2
|
export interface MenuListProps extends HTMLAttributes<HTMLUListElement> {
|
|
3
3
|
as?: ElementType<any>;
|
|
4
4
|
innerAs?: ElementType<any>;
|
|
5
|
-
defaultActiveItemValue?: string;
|
|
5
|
+
defaultActiveItemValue?: string | string[];
|
|
6
6
|
}
|
|
7
7
|
export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLUListElement>>;
|
|
@@ -59,10 +59,23 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
|
|
|
59
59
|
var index = getCircularIndex(openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0, allItems.length);
|
|
60
60
|
|
|
61
61
|
if (defaultActiveItemValue) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
if (typeof defaultActiveItemValue === 'string') {
|
|
63
|
+
for (var i = 0; i < allItems.length; i++) {
|
|
64
|
+
if (allItems[i].dataset.value === defaultActiveItemValue) {
|
|
65
|
+
index = i;
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
} else if (Array.isArray(defaultActiveItemValue)) {
|
|
70
|
+
var set = new Set(defaultActiveItemValue);
|
|
71
|
+
|
|
72
|
+
for (var _i = 0; _i < allItems.length; _i++) {
|
|
73
|
+
var val = allItems[_i].dataset.value;
|
|
74
|
+
|
|
75
|
+
if (val && set.has(val)) {
|
|
76
|
+
index = _i;
|
|
77
|
+
break;
|
|
78
|
+
}
|
|
66
79
|
}
|
|
67
80
|
}
|
|
68
81
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuList.js","names":["useCallback","forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","innerAs","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","interactedOutside","itemSearchStr","itemSearchClearTimeout","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","isContextMenu","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","handleClickOutside","e","pointerType","button","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","ctrlKey","altKey","slice","clearTimeout","setTimeout","searchStr","idx","dom","domText","innerText","toLowerCase","startsWith"],"sources":["../../../src/Menu/MenuList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';\nimport {\n useCallback,\n forwardRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n} from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends HTMLAttributes<HTMLUListElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n defaultActiveItemValue?: string;\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n function MenuList(props, forwardedRef) {\n const {\n as: Comp = 'ul',\n innerAs,\n onKeyDown,\n id: preferredId,\n defaultActiveItemValue,\n ...otherProps\n } = props;\n\n const interactedOutside = useRef(false);\n const itemSearchStr = useRef('');\n const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n const {\n menuListIdRef,\n buttonRef,\n onChange,\n openWithArrowKeyRef,\n open,\n isContextMenu,\n } = useMenuContext();\n\n const [navigationItem, setNavigationItem] = useState<\n HTMLElement | undefined\n >();\n\n const [mounted, setMounted] = useState(false);\n\n const menuListRef = useRef<HTMLUListElement>();\n\n const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n const onNavigate = (el: HTMLElement) => {\n el.focus();\n setNavigationItem(el);\n };\n\n menuListIdRef.current = preferredId || menuListIdRef.current;\n\n useEnhancedEffect(() => {\n if (!mounted) {\n const allItems = scope.current.queryAllNodes(queryScope);\n let index = getCircularIndex(\n openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n allItems.length\n );\n\n if (defaultActiveItemValue) {\n for (let i = 0; i < allItems.length; i++) {\n if (allItems[i].dataset.value === defaultActiveItemValue) {\n index = i;\n break;\n }\n }\n }\n\n if (index !== null) {\n onNavigate && onNavigate(allItems[index]);\n }\n }\n\n openWithArrowKeyRef.current = null;\n setMounted(true);\n }, [\n mounted,\n navigationItem,\n onNavigate,\n openWithArrowKeyRef,\n scope,\n defaultActiveItemValue,\n ]);\n\n const handleClickOutside = useCallback(\n (e: PointerEvent) => {\n if (isContextMenu.current) {\n if (!interactedOutside.current && e.pointerType === 'touch') {\n // First interaction should be ignored, because\n // this is what triggered the context menu to open\n interactedOutside.current = true;\n return;\n }\n\n if (e.button === 0) {\n onChange(e as any, false);\n }\n } else {\n if (\n e.target instanceof HTMLElement &&\n e.target !== buttonRef.current &&\n !buttonRef.current?.contains(e.target)\n ) {\n onChange(e as any, false);\n }\n }\n e.preventDefault();\n },\n [buttonRef, isContextMenu, onChange]\n );\n\n useOnClickOutside(menuListRef, handleClickOutside, open);\n\n function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {\n switch (e.key) {\n case 'Escape':\n case 'Tab': {\n onChange(e, false);\n e.preventDefault(); // prevents focusing on next element, because we will be handling it\n itemSearchStr.current = '';\n buttonRef.current?.focus();\n break;\n }\n case 'Home':\n case 'End':\n case 'ArrowDown':\n case 'ArrowUp':\n e.preventDefault();\n itemSearchStr.current = '';\n const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n const currentIndex = allItems.findIndex((e) => e === navigationItem);\n if (allItems.length === 0) {\n return;\n }\n let nextIndex: number = currentIndex;\n switch (e.key) {\n case 'ArrowUp':\n nextIndex += -1;\n break;\n case 'ArrowDown':\n nextIndex += 1;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = -1;\n break;\n }\n // We already checked if allItems.length = 0 above\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n onNavigate && onNavigate(allItems[nextIndex]);\n break;\n default: {\n if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {\n // A-Z\n e.preventDefault();\n\n if (\n itemSearchStr.current.length === 0 ||\n itemSearchStr.current.slice(-1) !== e.key\n ) {\n itemSearchStr.current = itemSearchStr.current + e.key;\n }\n clearTimeout(itemSearchClearTimeout.current as any);\n itemSearchClearTimeout.current = setTimeout(() => {\n itemSearchStr.current = '';\n }, 500);\n\n const allItems = scope\n ? scope.current.queryAllNodes(queryScope)\n : [];\n const currentIndex = allItems.findIndex(\n (e) => e === navigationItem\n );\n const searchStr = itemSearchStr.current;\n let nextIndex = -1;\n for (\n let i = searchStr.length === 1 ? 1 : 0;\n i < allItems.length;\n i++\n ) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n const dom = allItems[idx];\n const domText = dom.innerText.toLowerCase();\n if (domText.length > 0 && domText.startsWith(searchStr)) {\n nextIndex = idx;\n break;\n }\n }\n if (nextIndex >= 0 && nextIndex < allItems.length) {\n onNavigate && onNavigate(allItems[nextIndex]);\n }\n }\n }\n }\n }\n\n if (!open) {\n interactedOutside.current = false;\n return null;\n }\n\n return (\n <MenuListProvider\n value={{\n navigationItem,\n onNavigate,\n }}\n >\n <Comp\n ref={assignMultipleRefs(forwardedRef, menuListRef)}\n as={innerAs}\n id={menuListIdRef.current}\n role=\"menu\"\n aria-labelledby={buttonRef.current?.id}\n data-menu-list=\"\"\n tabIndex=\"-1\"\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n {...otherProps}\n />\n </MenuListProvider>\n );\n }\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MenuList.js","names":["useCallback","forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","innerAs","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","interactedOutside","itemSearchStr","itemSearchClearTimeout","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","isContextMenu","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","Array","isArray","set","Set","val","has","handleClickOutside","e","pointerType","button","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","ctrlKey","altKey","slice","clearTimeout","setTimeout","searchStr","idx","dom","domText","innerText","toLowerCase","startsWith"],"sources":["../../../src/Menu/MenuList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';\nimport {\n useCallback,\n forwardRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n} from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends HTMLAttributes<HTMLUListElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n defaultActiveItemValue?: string | string[];\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n function MenuList(props, forwardedRef) {\n const {\n as: Comp = 'ul',\n innerAs,\n onKeyDown,\n id: preferredId,\n defaultActiveItemValue,\n ...otherProps\n } = props;\n\n const interactedOutside = useRef(false);\n const itemSearchStr = useRef('');\n const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n const {\n menuListIdRef,\n buttonRef,\n onChange,\n openWithArrowKeyRef,\n open,\n isContextMenu,\n } = useMenuContext();\n\n const [navigationItem, setNavigationItem] = useState<\n HTMLElement | undefined\n >();\n\n const [mounted, setMounted] = useState(false);\n\n const menuListRef = useRef<HTMLUListElement>();\n\n const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n const onNavigate = (el: HTMLElement) => {\n el.focus();\n setNavigationItem(el);\n };\n\n menuListIdRef.current = preferredId || menuListIdRef.current;\n\n useEnhancedEffect(() => {\n if (!mounted) {\n const allItems = scope.current.queryAllNodes(queryScope);\n let index = getCircularIndex(\n openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n allItems.length\n );\n\n if (defaultActiveItemValue) {\n if (typeof defaultActiveItemValue === 'string') {\n for (let i = 0; i < allItems.length; i++) {\n if (allItems[i].dataset.value === defaultActiveItemValue) {\n index = i;\n break;\n }\n }\n } else if (Array.isArray(defaultActiveItemValue)) {\n const set = new Set(defaultActiveItemValue);\n for (let i = 0; i < allItems.length; i++) {\n const val = allItems[i].dataset.value;\n if (val && set.has(val)) {\n index = i;\n break;\n }\n }\n }\n }\n\n if (index !== null) {\n onNavigate && onNavigate(allItems[index]);\n }\n }\n\n openWithArrowKeyRef.current = null;\n setMounted(true);\n }, [\n mounted,\n navigationItem,\n onNavigate,\n openWithArrowKeyRef,\n scope,\n defaultActiveItemValue,\n ]);\n\n const handleClickOutside = useCallback(\n (e: PointerEvent) => {\n if (isContextMenu.current) {\n if (!interactedOutside.current && e.pointerType === 'touch') {\n // First interaction should be ignored, because\n // this is what triggered the context menu to open\n interactedOutside.current = true;\n return;\n }\n\n if (e.button === 0) {\n onChange(e as any, false);\n }\n } else {\n if (\n e.target instanceof HTMLElement &&\n e.target !== buttonRef.current &&\n !buttonRef.current?.contains(e.target)\n ) {\n onChange(e as any, false);\n }\n }\n e.preventDefault();\n },\n [buttonRef, isContextMenu, onChange]\n );\n\n useOnClickOutside(menuListRef, handleClickOutside, open);\n\n function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {\n switch (e.key) {\n case 'Escape':\n case 'Tab': {\n onChange(e, false);\n e.preventDefault(); // prevents focusing on next element, because we will be handling it\n itemSearchStr.current = '';\n buttonRef.current?.focus();\n break;\n }\n case 'Home':\n case 'End':\n case 'ArrowDown':\n case 'ArrowUp':\n e.preventDefault();\n itemSearchStr.current = '';\n const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n const currentIndex = allItems.findIndex((e) => e === navigationItem);\n if (allItems.length === 0) {\n return;\n }\n let nextIndex: number = currentIndex;\n switch (e.key) {\n case 'ArrowUp':\n nextIndex += -1;\n break;\n case 'ArrowDown':\n nextIndex += 1;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = -1;\n break;\n }\n // We already checked if allItems.length = 0 above\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n onNavigate && onNavigate(allItems[nextIndex]);\n break;\n default: {\n if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {\n // A-Z\n e.preventDefault();\n\n if (\n itemSearchStr.current.length === 0 ||\n itemSearchStr.current.slice(-1) !== e.key\n ) {\n itemSearchStr.current = itemSearchStr.current + e.key;\n }\n clearTimeout(itemSearchClearTimeout.current as any);\n itemSearchClearTimeout.current = setTimeout(() => {\n itemSearchStr.current = '';\n }, 500);\n\n const allItems = scope\n ? scope.current.queryAllNodes(queryScope)\n : [];\n const currentIndex = allItems.findIndex(\n (e) => e === navigationItem\n );\n const searchStr = itemSearchStr.current;\n let nextIndex = -1;\n for (\n let i = searchStr.length === 1 ? 1 : 0;\n i < allItems.length;\n i++\n ) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n const dom = allItems[idx];\n const domText = dom.innerText.toLowerCase();\n if (domText.length > 0 && domText.startsWith(searchStr)) {\n nextIndex = idx;\n break;\n }\n }\n if (nextIndex >= 0 && nextIndex < allItems.length) {\n onNavigate && onNavigate(allItems[nextIndex]);\n }\n }\n }\n }\n }\n\n if (!open) {\n interactedOutside.current = false;\n return null;\n }\n\n return (\n <MenuListProvider\n value={{\n navigationItem,\n onNavigate,\n }}\n >\n <Comp\n ref={assignMultipleRefs(forwardedRef, menuListRef)}\n as={innerAs}\n id={menuListIdRef.current}\n role=\"menu\"\n aria-labelledby={buttonRef.current?.id}\n data-menu-list=\"\"\n tabIndex=\"-1\"\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n {...otherProps}\n />\n </MenuListProvider>\n );\n }\n);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../utils/clamp';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clamp.js","names":[],"sources":["../../../src/TimerField/clamp.ts"],"sourcesContent":["export * from '../utils/clamp';\n"],"mappings":"AAAA,cAAc,gBAAd"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useTimerField';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/TimerField/index.ts"],"sourcesContent":["export * from './useTimerField';\n"],"mappings":"AAAA,cAAc,iBAAd"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../hooks/useControlledState';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useControlledState.js","names":[],"sources":["../../../src/TimerField/useControlledState.ts"],"sourcesContent":["export * from '../hooks/useControlledState';\n"],"mappings":"AAAA,cAAc,6BAAd"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { RefObject, HTMLAttributes, PointerEvent } from 'react';
|
|
2
|
+
export interface UseTimerFieldProps {
|
|
3
|
+
value?: number | null;
|
|
4
|
+
defaultValue?: number | null;
|
|
5
|
+
onChange?: (value: number | null) => void;
|
|
6
|
+
label?: string;
|
|
7
|
+
ref: RefObject<HTMLElement | null>;
|
|
8
|
+
}
|
|
9
|
+
export interface TimerFieldSegmentType {
|
|
10
|
+
isEditable?: boolean;
|
|
11
|
+
value: number | null;
|
|
12
|
+
minValue: number;
|
|
13
|
+
maxValue: number;
|
|
14
|
+
maxTempValue: number;
|
|
15
|
+
type: 'hour' | 'minute' | 'second';
|
|
16
|
+
}
|
|
17
|
+
export interface TimerFieldState {
|
|
18
|
+
parentRef: RefObject<HTMLElement | null>;
|
|
19
|
+
hasFocusWithin: boolean;
|
|
20
|
+
isReadOnly: boolean;
|
|
21
|
+
isDisabled: boolean;
|
|
22
|
+
value: number | null;
|
|
23
|
+
clear: () => void;
|
|
24
|
+
segments: TimerFieldSegmentType[];
|
|
25
|
+
simplifySegments(): void;
|
|
26
|
+
setSegment(part: 'hour' | 'minute' | 'second', value: number | undefined | ((curValue: number | null) => number | null)): void;
|
|
27
|
+
validationState?: 'invalid' | 'valid';
|
|
28
|
+
}
|
|
29
|
+
export declare function useHasFocusWithin<ElementType extends HTMLElement>(ref: RefObject<ElementType | null>): boolean;
|
|
30
|
+
export declare function useTimerField(props: UseTimerFieldProps): {
|
|
31
|
+
state: TimerFieldState;
|
|
32
|
+
labelProps: {};
|
|
33
|
+
fieldProps: {
|
|
34
|
+
role: string;
|
|
35
|
+
onPointerDown: (e: PointerEvent<HTMLDivElement>) => void;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
export declare function useTimerFieldSegment(segment: TimerFieldSegmentType, state: TimerFieldState, ref: RefObject<HTMLElement>): {
|
|
39
|
+
state: {
|
|
40
|
+
isPlaceholder: boolean;
|
|
41
|
+
text: string;
|
|
42
|
+
};
|
|
43
|
+
segmentProps: HTMLAttributes<HTMLDivElement>;
|
|
44
|
+
};
|
|
@@ -0,0 +1,430 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
|
+
import { useEffect, useRef, useMemo, useState, useCallback, version } from 'react';
|
|
6
|
+
import { unstable_batchedUpdates } from 'react-dom';
|
|
7
|
+
import { useControlledState } from './useControlledState';
|
|
8
|
+
import { clamp as clampFunc } from './clamp';
|
|
9
|
+
|
|
10
|
+
function isValidPartialNumber(value) {
|
|
11
|
+
// Sanitize
|
|
12
|
+
var sanitizedValue = (value || '').replace(/[^0-9]+/g, '');
|
|
13
|
+
return value.length === sanitizedValue.length;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function getSegmentText(nextValue) {
|
|
17
|
+
if (nextValue === undefined) {
|
|
18
|
+
return '00';
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
var padLength = 2;
|
|
22
|
+
return String(nextValue).padStart(padLength, '0');
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var segmentOrdering = ['hour', 'minute', 'second'];
|
|
26
|
+
|
|
27
|
+
function getNextSegment(segmentType, dir) {
|
|
28
|
+
var nextSegmentTypeIdx = segmentOrdering.findIndex(function (c) {
|
|
29
|
+
return c === segmentType;
|
|
30
|
+
}) + (dir === 'next' ? 1 : -1);
|
|
31
|
+
return nextSegmentTypeIdx >= 0 && nextSegmentTypeIdx < segmentOrdering.length ? segmentOrdering[nextSegmentTypeIdx] : null;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function focusOnSegment(parentEl, segmentType) {
|
|
35
|
+
var el = parentEl && parentEl.querySelector("[data-timer-field-segment=\"".concat(segmentType, "\"]"));
|
|
36
|
+
|
|
37
|
+
if (el instanceof HTMLElement) {
|
|
38
|
+
el.focus();
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export function useHasFocusWithin(ref) {
|
|
44
|
+
var _useState = useState(false),
|
|
45
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
46
|
+
hasFocusWithin = _useState2[0],
|
|
47
|
+
setHasFocusWithin = _useState2[1];
|
|
48
|
+
|
|
49
|
+
useEffect(function () {
|
|
50
|
+
if (!ref.current) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
var el = ref.current;
|
|
55
|
+
|
|
56
|
+
var onFocus = function onFocus() {
|
|
57
|
+
setHasFocusWithin(true);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var onBlur = function onBlur(e) {
|
|
61
|
+
// Is the new element receiving focus contained within the wrapped element?
|
|
62
|
+
if (!e.relatedTarget || !(e.relatedTarget instanceof Node) || !el.contains(e.relatedTarget)) {
|
|
63
|
+
setHasFocusWithin(false);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
el.addEventListener('focusin', onFocus);
|
|
68
|
+
el.addEventListener('focusout', onBlur);
|
|
69
|
+
return function () {
|
|
70
|
+
el.removeEventListener('focusout', onBlur);
|
|
71
|
+
el.removeEventListener('focusin', onFocus);
|
|
72
|
+
};
|
|
73
|
+
}, [ref]);
|
|
74
|
+
return hasFocusWithin;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function segmentStatesFromValue(value) {
|
|
78
|
+
var hour = value !== null ? Math.floor(value / 3600) : null;
|
|
79
|
+
var minute = value !== null ? Math.floor(value / 60) % 60 : null;
|
|
80
|
+
var second = value !== null ? value % 60 : null;
|
|
81
|
+
return [{
|
|
82
|
+
type: 'hour',
|
|
83
|
+
value: hour,
|
|
84
|
+
minValue: 0,
|
|
85
|
+
maxValue: 999,
|
|
86
|
+
maxTempValue: 999,
|
|
87
|
+
isEditable: true
|
|
88
|
+
}, {
|
|
89
|
+
type: 'minute',
|
|
90
|
+
value: minute,
|
|
91
|
+
minValue: 0,
|
|
92
|
+
maxValue: 59,
|
|
93
|
+
maxTempValue: 99,
|
|
94
|
+
isEditable: true
|
|
95
|
+
}, {
|
|
96
|
+
type: 'second',
|
|
97
|
+
value: second,
|
|
98
|
+
minValue: 0,
|
|
99
|
+
maxValue: 59,
|
|
100
|
+
maxTempValue: 99,
|
|
101
|
+
isEditable: true
|
|
102
|
+
}];
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export function useTimerField(props) {
|
|
106
|
+
var valueProp = props.value,
|
|
107
|
+
defaultValueProp = props.defaultValue,
|
|
108
|
+
onChangeProp = props.onChange;
|
|
109
|
+
|
|
110
|
+
var _useControlledState = useControlledState(valueProp, function (e, value) {
|
|
111
|
+
return onChangeProp && onChangeProp(value);
|
|
112
|
+
}, defaultValueProp, function (setState) {
|
|
113
|
+
return function (e, value) {
|
|
114
|
+
setState(value);
|
|
115
|
+
};
|
|
116
|
+
}),
|
|
117
|
+
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
118
|
+
value = _useControlledState2[0],
|
|
119
|
+
onChange = _useControlledState2[1];
|
|
120
|
+
|
|
121
|
+
var hasFocusWithin = useHasFocusWithin(props.ref);
|
|
122
|
+
|
|
123
|
+
var _useState3 = useState(segmentStatesFromValue(value || null)),
|
|
124
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
125
|
+
segments = _useState4[0],
|
|
126
|
+
setSegmentState = _useState4[1];
|
|
127
|
+
|
|
128
|
+
var prevValue = useRef(value);
|
|
129
|
+
|
|
130
|
+
if (value !== prevValue.current) {
|
|
131
|
+
prevValue.current = value;
|
|
132
|
+
setSegmentState(segmentStatesFromValue(value || null));
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
var labelProps = {};
|
|
136
|
+
var fieldProps = {
|
|
137
|
+
role: 'group',
|
|
138
|
+
onPointerDown: function onPointerDown(e) {
|
|
139
|
+
if (!hasFocusWithin && e.currentTarget === e.target) {
|
|
140
|
+
e.preventDefault();
|
|
141
|
+
focusOnSegment(props.ref.current, 'second');
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
var state = useMemo(function () {
|
|
146
|
+
var handleChangeSegment = function handleChangeSegment(seg, newValue) {
|
|
147
|
+
if (newValue === null) {
|
|
148
|
+
seg.value = null;
|
|
149
|
+
} else {
|
|
150
|
+
seg.value = newValue;
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
return {
|
|
155
|
+
parentRef: props.ref,
|
|
156
|
+
isReadOnly: false,
|
|
157
|
+
isDisabled: false,
|
|
158
|
+
hasFocusWithin: hasFocusWithin,
|
|
159
|
+
segments: segments,
|
|
160
|
+
value: value,
|
|
161
|
+
clear: function clear() {
|
|
162
|
+
focusOnSegment(props.ref.current, 'second');
|
|
163
|
+
unstable_batchedUpdates(function () {
|
|
164
|
+
setSegmentState(segmentStatesFromValue(null));
|
|
165
|
+
onChange({}, undefined);
|
|
166
|
+
});
|
|
167
|
+
},
|
|
168
|
+
simplifySegments: function simplifySegments() {
|
|
169
|
+
setSegmentState(function (curState) {
|
|
170
|
+
var newState = _toConsumableArray(curState);
|
|
171
|
+
|
|
172
|
+
var carryOver = 0;
|
|
173
|
+
|
|
174
|
+
for (var i = newState.length - 1; i >= 0; i--) {
|
|
175
|
+
var segment = _extends({}, newState[i]);
|
|
176
|
+
|
|
177
|
+
if (carryOver > 0) {
|
|
178
|
+
handleChangeSegment(segment, (segment.value || 0) + carryOver);
|
|
179
|
+
carryOver = 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
if (segment.value && segment.value > segment.maxValue) {
|
|
183
|
+
carryOver = Math.floor(segment.value / (segment.maxValue + 1));
|
|
184
|
+
handleChangeSegment(segment, segment.value % (segment.maxValue + 1));
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
newState[i] = segment;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
return newState;
|
|
191
|
+
});
|
|
192
|
+
},
|
|
193
|
+
setSegment: function setSegment(part, value) {
|
|
194
|
+
var ret = _toConsumableArray(segments);
|
|
195
|
+
|
|
196
|
+
var idx = ret.findIndex(function (v) {
|
|
197
|
+
return v.type === part;
|
|
198
|
+
});
|
|
199
|
+
|
|
200
|
+
if (idx === -1) {
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
var field = _extends({}, ret[idx]);
|
|
205
|
+
|
|
206
|
+
if (typeof value === 'function') {
|
|
207
|
+
handleChangeSegment(field, value(ret[idx].value));
|
|
208
|
+
} else {
|
|
209
|
+
handleChangeSegment(field, value || null);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
ret[idx] = field;
|
|
213
|
+
var newValueInSeconds = (ret[0].value || 0) * 3600 + (ret[1].value || 0) * 60 + (ret[2].value || 0);
|
|
214
|
+
prevValue.current = newValueInSeconds;
|
|
215
|
+
unstable_batchedUpdates(function () {
|
|
216
|
+
onChange({}, newValueInSeconds);
|
|
217
|
+
setSegmentState(ret);
|
|
218
|
+
});
|
|
219
|
+
},
|
|
220
|
+
validationState: 'valid'
|
|
221
|
+
};
|
|
222
|
+
}, [props.ref, hasFocusWithin, segments, onChange, value]);
|
|
223
|
+
return {
|
|
224
|
+
state: state,
|
|
225
|
+
labelProps: labelProps,
|
|
226
|
+
fieldProps: fieldProps
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
export function useTimerFieldSegment(segment, state, ref) {
|
|
230
|
+
var _segmentProps;
|
|
231
|
+
|
|
232
|
+
var stepSize = segment.type === 'hour' ? 2 : 15;
|
|
233
|
+
var segmentText = getSegmentText(segment.value);
|
|
234
|
+
var enteredKeys = useRef('');
|
|
235
|
+
|
|
236
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
237
|
+
var nextValue = segment.value || 0;
|
|
238
|
+
|
|
239
|
+
switch (e.key) {
|
|
240
|
+
case 'ArrowUp':
|
|
241
|
+
nextValue += 1;
|
|
242
|
+
break;
|
|
243
|
+
|
|
244
|
+
case 'ArrowDown':
|
|
245
|
+
nextValue -= 1;
|
|
246
|
+
break;
|
|
247
|
+
|
|
248
|
+
case 'ArrowRight':
|
|
249
|
+
case 'ArrowLeft':
|
|
250
|
+
var nextSegment = getNextSegment(segment.type, e.key === 'ArrowRight' ? 'next' : 'prev');
|
|
251
|
+
|
|
252
|
+
if (nextSegment) {
|
|
253
|
+
focusOnSegment(state.parentRef.current, nextSegment);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
e.preventDefault();
|
|
257
|
+
return;
|
|
258
|
+
|
|
259
|
+
case 'End':
|
|
260
|
+
nextValue = segment.maxValue;
|
|
261
|
+
break;
|
|
262
|
+
|
|
263
|
+
case 'Home':
|
|
264
|
+
nextValue = segment.minValue;
|
|
265
|
+
break;
|
|
266
|
+
|
|
267
|
+
case 'PageUp':
|
|
268
|
+
if (segment.type !== 'hour') {
|
|
269
|
+
nextValue = Math.ceil((nextValue + 1) / stepSize) * stepSize % 60;
|
|
270
|
+
} else {
|
|
271
|
+
nextValue += stepSize;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
break;
|
|
275
|
+
|
|
276
|
+
case 'PageDown':
|
|
277
|
+
if (segment.type !== 'hour') {
|
|
278
|
+
nextValue = Math.floor((nextValue - 1) / stepSize) * stepSize % 60;
|
|
279
|
+
} else {
|
|
280
|
+
nextValue -= stepSize;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
break;
|
|
284
|
+
|
|
285
|
+
default:
|
|
286
|
+
return;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
e.preventDefault(); // prevent scrolling
|
|
290
|
+
|
|
291
|
+
nextValue = clampFunc(nextValue || 0, segment.minValue, segment.maxTempValue);
|
|
292
|
+
|
|
293
|
+
if (nextValue !== segment.value) {
|
|
294
|
+
state.setSegment(segment.type, nextValue);
|
|
295
|
+
}
|
|
296
|
+
};
|
|
297
|
+
|
|
298
|
+
var onInput = useCallback(function (key) {
|
|
299
|
+
if (state.isDisabled || state.isReadOnly) {
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
var newTextValue = enteredKeys.current + key;
|
|
304
|
+
|
|
305
|
+
if (newTextValue.length > String(segment.maxTempValue).length) {
|
|
306
|
+
newTextValue = newTextValue.slice(-String(segment.maxTempValue).length);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
switch (segment.type) {
|
|
310
|
+
case 'hour':
|
|
311
|
+
case 'minute':
|
|
312
|
+
case 'second':
|
|
313
|
+
{
|
|
314
|
+
if (!isValidPartialNumber(newTextValue)) {
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
var numberValue = parseInt(newTextValue, 10);
|
|
319
|
+
var segmentValue = numberValue;
|
|
320
|
+
var allowsZero = segment.minValue === 0;
|
|
321
|
+
|
|
322
|
+
if (numberValue > segment.maxTempValue) {
|
|
323
|
+
segmentValue = parseInt(key);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
if (isNaN(numberValue)) {
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
var shouldSetValue = segmentValue !== 0 || allowsZero;
|
|
331
|
+
|
|
332
|
+
if (shouldSetValue) {
|
|
333
|
+
state.setSegment(segment.type, segmentValue);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
enteredKeys.current = newTextValue;
|
|
337
|
+
break;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}, [segment.maxTempValue, segment.minValue, segment.type, state]);
|
|
341
|
+
var backspace = useCallback(function () {
|
|
342
|
+
if (isValidPartialNumber(segmentText) && !state.isReadOnly) {
|
|
343
|
+
var newValue = segmentText.slice(0, -1);
|
|
344
|
+
var parsed = parseInt(newValue, 10);
|
|
345
|
+
|
|
346
|
+
if (newValue.length === 0 || parsed === 0) {
|
|
347
|
+
state.setSegment(segment.type, undefined);
|
|
348
|
+
} else {
|
|
349
|
+
state.setSegment(segment.type, parsed);
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
enteredKeys.current = newValue;
|
|
353
|
+
}
|
|
354
|
+
}, [segmentText, segment.type, state]);
|
|
355
|
+
var compositionRef = useRef('');
|
|
356
|
+
useEffect(function () {
|
|
357
|
+
var el = ref.current;
|
|
358
|
+
|
|
359
|
+
if (el) {
|
|
360
|
+
var handleBeforeInput = function handleBeforeInput(e) {
|
|
361
|
+
e.preventDefault();
|
|
362
|
+
|
|
363
|
+
switch (e.inputType) {
|
|
364
|
+
case 'deleteContentBackward':
|
|
365
|
+
case 'deleteContentForward':
|
|
366
|
+
if (isValidPartialNumber(segmentText) && !state.isReadOnly) {
|
|
367
|
+
backspace();
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
break;
|
|
371
|
+
|
|
372
|
+
case 'insertCompositionText':
|
|
373
|
+
// insertCompositionText cannot be canceled.
|
|
374
|
+
// Record the current state of the element so we can restore it in the `input` event below.
|
|
375
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
376
|
+
compositionRef.current = el.textContent; // Safari gets stuck in a composition state unless we also assign to the value here.
|
|
377
|
+
// eslint-disable-next-line no-self-assign
|
|
378
|
+
|
|
379
|
+
el.textContent = el.textContent;
|
|
380
|
+
break;
|
|
381
|
+
|
|
382
|
+
default:
|
|
383
|
+
if (e.data !== null) {
|
|
384
|
+
onInput(e.data);
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
break;
|
|
388
|
+
}
|
|
389
|
+
};
|
|
390
|
+
|
|
391
|
+
var handleInput = function handleInput(e) {
|
|
392
|
+
if (e.inputType === 'insertCompositionText') {
|
|
393
|
+
// Reset the DOM to how it was in the beforeinput event.
|
|
394
|
+
el.textContent = compositionRef.current;
|
|
395
|
+
}
|
|
396
|
+
};
|
|
397
|
+
|
|
398
|
+
el.addEventListener('beforeinput', handleBeforeInput);
|
|
399
|
+
el.addEventListener('input', handleInput);
|
|
400
|
+
return function () {
|
|
401
|
+
el.removeEventListener('input', handleInput);
|
|
402
|
+
el.removeEventListener('beforeinput', handleBeforeInput);
|
|
403
|
+
};
|
|
404
|
+
}
|
|
405
|
+
}, [backspace, onInput, ref, segmentText, state.isReadOnly]);
|
|
406
|
+
var simplifySegments = state.simplifySegments;
|
|
407
|
+
var handleBlur = useCallback(function () {
|
|
408
|
+
enteredKeys.current = '';
|
|
409
|
+
|
|
410
|
+
if (segment.value && segment.value > segment.maxValue) {
|
|
411
|
+
simplifySegments();
|
|
412
|
+
}
|
|
413
|
+
}, [segment.maxValue, segment.value, simplifySegments]);
|
|
414
|
+
return {
|
|
415
|
+
state: {
|
|
416
|
+
isPlaceholder: segment.value === undefined && state.hasFocusWithin || state.value === undefined && !state.hasFocusWithin,
|
|
417
|
+
text: segmentText
|
|
418
|
+
},
|
|
419
|
+
segmentProps: (_segmentProps = {
|
|
420
|
+
role: 'spinbutton',
|
|
421
|
+
'aria-valuenow': segment.value,
|
|
422
|
+
'aria-valuemin': segment.minValue,
|
|
423
|
+
'aria-valuemax': segment.maxValue,
|
|
424
|
+
'aria-label': segment.type
|
|
425
|
+
}, _defineProperty(_segmentProps, 'data-timer-field-segment', segment.type), _defineProperty(_segmentProps, "contentEditable", true), _defineProperty(_segmentProps, "suppressContentEditableWarning", true), _defineProperty(_segmentProps, "spellCheck", false), _defineProperty(_segmentProps, "autoCapitalize", 'off'), _defineProperty(_segmentProps, "autoCorrect", 'off'), _defineProperty(_segmentProps, parseInt(version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint', 'next'), _defineProperty(_segmentProps, "inputMode", 'numeric'), _defineProperty(_segmentProps, "tabIndex", 0), _defineProperty(_segmentProps, "style", {
|
|
426
|
+
caretColor: 'transparent'
|
|
427
|
+
}), _defineProperty(_segmentProps, "onKeyDown", handleKeyDown), _defineProperty(_segmentProps, "onBlur", handleBlur), _segmentProps)
|
|
428
|
+
};
|
|
429
|
+
}
|
|
430
|
+
//# sourceMappingURL=useTimerField.js.map
|