@wix/bex-utils 2.22.0 → 2.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/FocusableWrapper/FocusableService.js +5 -2
- package/dist/cjs/FocusableWrapper/FocusableService.js.map +1 -1
- package/dist/cjs/FocusableWrapper/FocusableWrapper.js +14 -4
- package/dist/cjs/FocusableWrapper/FocusableWrapper.js.map +1 -1
- package/dist/cjs/FocusableWrapper/scrollAndFocus.js +31 -2
- package/dist/cjs/FocusableWrapper/scrollAndFocus.js.map +1 -1
- package/dist/esm/FocusableWrapper/FocusableService.js +8 -2
- package/dist/esm/FocusableWrapper/FocusableService.js.map +1 -1
- package/dist/esm/FocusableWrapper/FocusableWrapper.js +13 -3
- package/dist/esm/FocusableWrapper/FocusableWrapper.js.map +1 -1
- package/dist/esm/FocusableWrapper/scrollAndFocus.js +25 -2
- package/dist/esm/FocusableWrapper/scrollAndFocus.js.map +1 -1
- package/dist/types/FocusableWrapper/FocusableService.d.ts +3 -1
- package/dist/types/FocusableWrapper/FocusableService.d.ts.map +1 -1
- package/dist/types/FocusableWrapper/FocusableWrapper.d.ts.map +1 -1
- package/dist/types/FocusableWrapper/scrollAndFocus.d.ts +6 -1
- package/dist/types/FocusableWrapper/scrollAndFocus.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -9,6 +9,7 @@ class FocusableItemsService {
|
|
|
9
9
|
(0, _defineProperty2.default)(this, "focusableItems", void 0);
|
|
10
10
|
(0, _defineProperty2.default)(this, "scrollableContainers", void 0);
|
|
11
11
|
(0, _defineProperty2.default)(this, "getItemRef", itemName => this.focusableItems[itemName] && this.focusableItems[itemName].ref);
|
|
12
|
+
(0, _defineProperty2.default)(this, "getItemAfterScroll", itemName => this.focusableItems[itemName] && this.focusableItems[itemName].afterScroll);
|
|
12
13
|
(0, _defineProperty2.default)(this, "getContainerRefByItem", itemName => {
|
|
13
14
|
var _this$focusableItems$;
|
|
14
15
|
const containerName = (_this$focusableItems$ = this.focusableItems[itemName]) == null ? void 0 : _this$focusableItems$.containerName;
|
|
@@ -25,12 +26,14 @@ class FocusableItemsService {
|
|
|
25
26
|
addItem({
|
|
26
27
|
ref,
|
|
27
28
|
itemName,
|
|
28
|
-
containerName
|
|
29
|
+
containerName,
|
|
30
|
+
afterScroll
|
|
29
31
|
}) {
|
|
30
32
|
this.focusableItems[itemName] = {
|
|
31
33
|
itemName,
|
|
32
34
|
ref,
|
|
33
|
-
containerName
|
|
35
|
+
containerName,
|
|
36
|
+
afterScroll
|
|
34
37
|
};
|
|
35
38
|
}
|
|
36
39
|
addContainer({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["FocusableItemsService","constructor","_defineProperty2","default","itemName","focusableItems","ref","_this$focusableItems$","containerName","container","scrollableContainers","addItem","addContainer","exports"],"sources":["../../../src/FocusableWrapper/FocusableService.ts"],"sourcesContent":["export type FocusableItem = {\n containerName: string;\n ref: HTMLElement;\n itemName: string;\n};\n\nexport type ScrollableContainer = {\n containerName: string;\n ref: HTMLElement;\n};\n\nexport class FocusableItemsService {\n private focusableItems: {\n [itemName: string]: FocusableItem;\n };\n private scrollableContainers: {\n [containerName: string]: {\n ref: HTMLElement;\n containerName: string;\n };\n };\n\n constructor() {\n this.focusableItems = {};\n this.scrollableContainers = {};\n }\n\n addItem({ ref, itemName, containerName }: FocusableItem) {\n this.focusableItems[itemName] = {
|
|
1
|
+
{"version":3,"names":["FocusableItemsService","constructor","_defineProperty2","default","itemName","focusableItems","ref","afterScroll","_this$focusableItems$","containerName","container","scrollableContainers","addItem","addContainer","exports"],"sources":["../../../src/FocusableWrapper/FocusableService.ts"],"sourcesContent":["export type FocusableItem = {\n containerName: string;\n ref: HTMLElement;\n itemName: string;\n afterScroll?: () => void;\n};\n\nexport type ScrollableContainer = {\n containerName: string;\n ref: HTMLElement;\n};\n\nexport class FocusableItemsService {\n private focusableItems: {\n [itemName: string]: FocusableItem;\n };\n private scrollableContainers: {\n [containerName: string]: {\n ref: HTMLElement;\n containerName: string;\n };\n };\n\n constructor() {\n this.focusableItems = {};\n this.scrollableContainers = {};\n }\n\n addItem({ ref, itemName, containerName, afterScroll }: FocusableItem) {\n this.focusableItems[itemName] = {\n itemName,\n ref,\n containerName,\n afterScroll,\n };\n }\n\n addContainer({ containerName, ref }: ScrollableContainer) {\n this.scrollableContainers[containerName] = {\n containerName,\n ref,\n };\n }\n\n getItemRef = (itemName: string) =>\n this.focusableItems[itemName] && this.focusableItems[itemName].ref;\n\n getItemAfterScroll = (itemName: string) =>\n this.focusableItems[itemName] && this.focusableItems[itemName].afterScroll;\n\n getContainerRefByItem = (itemName: string) => {\n const containerName = this.focusableItems[itemName]?.containerName;\n const container = this.scrollableContainers[containerName];\n return container?.ref;\n };\n getContainerRefByName = (containerName: string) => {\n const container = this.scrollableContainers[containerName];\n return container?.ref;\n };\n}\n"],"mappings":";;;;;;AAYO,MAAMA,qBAAqB,CAAC;EAWjCC,WAAWA,CAAA,EAAG;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,sBAqBAC,QAAgB,IAC5B,IAAI,CAACC,cAAc,CAACD,QAAQ,CAAC,IAAI,IAAI,CAACC,cAAc,CAACD,QAAQ,CAAC,CAACE,GAAG;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,8BAE9CC,QAAgB,IACpC,IAAI,CAACC,cAAc,CAACD,QAAQ,CAAC,IAAI,IAAI,CAACC,cAAc,CAACD,QAAQ,CAAC,CAACG,WAAW;IAAA,IAAAL,gBAAA,CAAAC,OAAA,iCAEnDC,QAAgB,IAAK;MAAA,IAAAI,qBAAA;MAC5C,MAAMC,aAAa,IAAAD,qBAAA,GAAG,IAAI,CAACH,cAAc,CAACD,QAAQ,CAAC,qBAA7BI,qBAAA,CAA+BC,aAAa;MAClE,MAAMC,SAAS,GAAG,IAAI,CAACC,oBAAoB,CAACF,aAAa,CAAC;MAC1D,OAAOC,SAAS,oBAATA,SAAS,CAAEJ,GAAG;IACvB,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,iCACwBM,aAAqB,IAAK;MACjD,MAAMC,SAAS,GAAG,IAAI,CAACC,oBAAoB,CAACF,aAAa,CAAC;MAC1D,OAAOC,SAAS,oBAATA,SAAS,CAAEJ,GAAG;IACvB,CAAC;IAlCC,IAAI,CAACD,cAAc,GAAG,CAAC,CAAC;IACxB,IAAI,CAACM,oBAAoB,GAAG,CAAC,CAAC;EAChC;EAEAC,OAAOA,CAAC;IAAEN,GAAG;IAAEF,QAAQ;IAAEK,aAAa;IAAEF;EAA2B,CAAC,EAAE;IACpE,IAAI,CAACF,cAAc,CAACD,QAAQ,CAAC,GAAG;MAC9BA,QAAQ;MACRE,GAAG;MACHG,aAAa;MACbF;IACF,CAAC;EACH;EAEAM,YAAYA,CAAC;IAAEJ,aAAa;IAAEH;EAAyB,CAAC,EAAE;IACxD,IAAI,CAACK,oBAAoB,CAACF,aAAa,CAAC,GAAG;MACzCA,aAAa;MACbH;IACF,CAAC;EACH;AAiBF;AAACQ,OAAA,CAAAd,qBAAA,GAAAA,qBAAA","ignoreList":[]}
|
|
@@ -31,12 +31,22 @@ const FocusableWrapper = ({
|
|
|
31
31
|
}
|
|
32
32
|
const containerRefByItem = focusableItemsService.getContainerRefByItem(focusedItemName);
|
|
33
33
|
if (containerRefByItem) {
|
|
34
|
-
const
|
|
35
|
-
|
|
34
|
+
const focusedItemRef = focusableItemsService.getItemRef(focusedItemName);
|
|
35
|
+
const afterScroll = focusableItemsService.getItemAfterScroll(focusedItemName);
|
|
36
|
+
return (0, _scrollAndFocus.scrollAndFocus)({
|
|
37
|
+
scrollableRef,
|
|
38
|
+
containerRef: containerRefByItem,
|
|
39
|
+
focusedItemRef,
|
|
40
|
+
afterScroll
|
|
41
|
+
});
|
|
36
42
|
}
|
|
37
43
|
const containerRef = focusableItemsService.getContainerRefByName(focusedItemName);
|
|
38
44
|
if (containerRef) {
|
|
39
|
-
(0, _scrollAndFocus.scrollAndFocus)(
|
|
45
|
+
(0, _scrollAndFocus.scrollAndFocus)({
|
|
46
|
+
scrollableRef,
|
|
47
|
+
containerRef,
|
|
48
|
+
focusedItemRef: containerRef
|
|
49
|
+
});
|
|
40
50
|
}
|
|
41
51
|
}, [focusableItemsService, scrollableRef]);
|
|
42
52
|
const doesItemExist = (0, _react.useCallback)(() => {
|
|
@@ -63,7 +73,7 @@ const FocusableWrapper = ({
|
|
|
63
73
|
__self: void 0,
|
|
64
74
|
__source: {
|
|
65
75
|
fileName: _jsxFileName,
|
|
66
|
-
lineNumber:
|
|
76
|
+
lineNumber: 100,
|
|
67
77
|
columnNumber: 5
|
|
68
78
|
}
|
|
69
79
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_FocusableService","_scrollAndFocus","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getAnchorParam","searchParams","URLSearchParams","window","location","search","exports","FocusableContext","React","createContext","FocusableWrapper","scrollableRef","getScrollableTrigger","getDoesItemExist","children","focusableItemsService","useMemo","FocusableItemsService","scrollIfNeeded","useCallback","focusedItemName","scrollByItemName","containerRefByItem","getContainerRefByItem","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_FocusableService","_scrollAndFocus","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getAnchorParam","searchParams","URLSearchParams","window","location","search","exports","FocusableContext","React","createContext","FocusableWrapper","scrollableRef","getScrollableTrigger","getDoesItemExist","children","focusableItemsService","useMemo","FocusableItemsService","scrollIfNeeded","useCallback","focusedItemName","scrollByItemName","containerRefByItem","getContainerRefByItem","focusedItemRef","getItemRef","afterScroll","getItemAfterScroll","scrollAndFocus","containerRef","getContainerRefByName","doesItemExist","Boolean","useEffect","contextValue","focusable","registerScrollableItem","scrollableItem","addContainer","addItem","createElement","Provider","value","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../src/FocusableWrapper/FocusableWrapper.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport { FocusableItem, FocusableItemsService } from './FocusableService';\nimport { scrollAndFocus } from './scrollAndFocus';\n\nexport const getAnchorParam = (): string | null => {\n const searchParams = new URLSearchParams(window.location.search);\n return searchParams.get('anchor');\n};\n\nexport type ContextProps = {\n focusable: {\n registerScrollableItem: (scrollableItem: FocusableItem) => void;\n };\n};\n\nexport const FocusableContext = React.createContext<ContextProps | null>(null);\n\ntype FocusableWrapperProps = {\n scrollableRef?: HTMLElement | null;\n getScrollableTrigger: (callback: () => void) => void;\n getDoesItemExist: (callback: () => boolean) => void;\n};\n\nexport const FocusableWrapper: React.FC<FocusableWrapperProps> = ({\n scrollableRef,\n getScrollableTrigger,\n getDoesItemExist,\n children,\n}) => {\n const focusableItemsService = useMemo(() => new FocusableItemsService(), []);\n\n const scrollIfNeeded = useCallback(() => {\n const focusedItemName = getAnchorParam();\n scrollByItemName(focusedItemName);\n }, [scrollableRef]);\n\n const scrollByItemName = useCallback(\n (focusedItemName: string | null) => {\n if (!focusedItemName) {\n return;\n }\n const containerRefByItem =\n focusableItemsService.getContainerRefByItem(focusedItemName);\n if (containerRefByItem) {\n const focusedItemRef =\n focusableItemsService.getItemRef(focusedItemName);\n const afterScroll =\n focusableItemsService.getItemAfterScroll(focusedItemName);\n return scrollAndFocus({\n scrollableRef,\n containerRef: containerRefByItem,\n focusedItemRef,\n afterScroll,\n });\n }\n\n const containerRef =\n focusableItemsService.getContainerRefByName(focusedItemName);\n if (containerRef) {\n scrollAndFocus({\n scrollableRef,\n containerRef,\n focusedItemRef: containerRef,\n });\n }\n },\n [focusableItemsService, scrollableRef],\n );\n\n const doesItemExist = useCallback(() => {\n const focusedItemName = getAnchorParam();\n if (!focusedItemName) {\n return false;\n }\n\n return Boolean(\n focusableItemsService.getContainerRefByItem(focusedItemName),\n );\n }, [focusableItemsService]);\n\n useEffect(() => {\n getScrollableTrigger(scrollIfNeeded);\n\n getDoesItemExist(doesItemExist);\n }, [getScrollableTrigger, getDoesItemExist, scrollIfNeeded, doesItemExist]);\n\n const contextValue = useMemo<ContextProps>(\n () => ({\n focusable: {\n registerScrollableItem: (scrollableItem: FocusableItem) => {\n focusableItemsService.addContainer(scrollableItem);\n focusableItemsService.addItem(scrollableItem);\n },\n },\n }),\n [focusableItemsService],\n );\n\n return (\n <FocusableContext.Provider value={contextValue}>\n {children}\n </FocusableContext.Provider>\n );\n};\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAAkD,IAAAG,YAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE3C,MAAMW,cAAc,GAAGA,CAAA,KAAqB;EACjD,MAAMC,YAAY,GAAG,IAAIC,eAAe,CAACC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;EAChE,OAAOJ,YAAY,CAACb,GAAG,CAAC,QAAQ,CAAC;AACnC,CAAC;AAACkB,OAAA,CAAAN,cAAA,GAAAA,cAAA;AAQK,MAAMO,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,gBAAGC,cAAK,CAACC,aAAa,CAAsB,IAAI,CAAC;AAQvE,MAAMC,gBAAiD,GAAGA,CAAC;EAChEC,aAAa;EACbC,oBAAoB;EACpBC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ,MAAMC,qBAAqB,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAIC,uCAAqB,CAAC,CAAC,EAAE,EAAE,CAAC;EAE5E,MAAMC,cAAc,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACvC,MAAMC,eAAe,GAAGpB,cAAc,CAAC,CAAC;IACxCqB,gBAAgB,CAACD,eAAe,CAAC;EACnC,CAAC,EAAE,CAACT,aAAa,CAAC,CAAC;EAEnB,MAAMU,gBAAgB,GAAG,IAAAF,kBAAW,EACjCC,eAA8B,IAAK;IAClC,IAAI,CAACA,eAAe,EAAE;MACpB;IACF;IACA,MAAME,kBAAkB,GACtBP,qBAAqB,CAACQ,qBAAqB,CAACH,eAAe,CAAC;IAC9D,IAAIE,kBAAkB,EAAE;MACtB,MAAME,cAAc,GAClBT,qBAAqB,CAACU,UAAU,CAACL,eAAe,CAAC;MACnD,MAAMM,WAAW,GACfX,qBAAqB,CAACY,kBAAkB,CAACP,eAAe,CAAC;MAC3D,OAAO,IAAAQ,8BAAc,EAAC;QACpBjB,aAAa;QACbkB,YAAY,EAAEP,kBAAkB;QAChCE,cAAc;QACdE;MACF,CAAC,CAAC;IACJ;IAEA,MAAMG,YAAY,GAChBd,qBAAqB,CAACe,qBAAqB,CAACV,eAAe,CAAC;IAC9D,IAAIS,YAAY,EAAE;MAChB,IAAAD,8BAAc,EAAC;QACbjB,aAAa;QACbkB,YAAY;QACZL,cAAc,EAAEK;MAClB,CAAC,CAAC;IACJ;EACF,CAAC,EACD,CAACd,qBAAqB,EAAEJ,aAAa,CACvC,CAAC;EAED,MAAMoB,aAAa,GAAG,IAAAZ,kBAAW,EAAC,MAAM;IACtC,MAAMC,eAAe,GAAGpB,cAAc,CAAC,CAAC;IACxC,IAAI,CAACoB,eAAe,EAAE;MACpB,OAAO,KAAK;IACd;IAEA,OAAOY,OAAO,CACZjB,qBAAqB,CAACQ,qBAAqB,CAACH,eAAe,CAC7D,CAAC;EACH,CAAC,EAAE,CAACL,qBAAqB,CAAC,CAAC;EAE3B,IAAAkB,gBAAS,EAAC,MAAM;IACdrB,oBAAoB,CAACM,cAAc,CAAC;IAEpCL,gBAAgB,CAACkB,aAAa,CAAC;EACjC,CAAC,EAAE,CAACnB,oBAAoB,EAAEC,gBAAgB,EAAEK,cAAc,EAAEa,aAAa,CAAC,CAAC;EAE3E,MAAMG,YAAY,GAAG,IAAAlB,cAAO,EAC1B,OAAO;IACLmB,SAAS,EAAE;MACTC,sBAAsB,EAAGC,cAA6B,IAAK;QACzDtB,qBAAqB,CAACuB,YAAY,CAACD,cAAc,CAAC;QAClDtB,qBAAqB,CAACwB,OAAO,CAACF,cAAc,CAAC;MAC/C;IACF;EACF,CAAC,CAAC,EACF,CAACtB,qBAAqB,CACxB,CAAC;EAED,oBACEzC,MAAA,CAAAY,OAAA,CAAAsD,aAAA,CAACjC,gBAAgB,CAACkC,QAAQ;IAACC,KAAK,EAAER,YAAa;IAAAS,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlE,YAAA;MAAAmE,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC5CjC,QACwB,CAAC;AAEhC,CAAC;AAACR,OAAA,CAAAI,gBAAA,GAAAA,gBAAA","ignoreList":[]}
|
|
@@ -5,7 +5,12 @@ exports.scrollAndFocus = void 0;
|
|
|
5
5
|
const MINIMIZED_HEADER_HEIGHT = 67;
|
|
6
6
|
const EXTRA_SPACE = 48; // Defined by UX
|
|
7
7
|
|
|
8
|
-
const scrollAndFocus = (
|
|
8
|
+
const scrollAndFocus = ({
|
|
9
|
+
scrollableRef,
|
|
10
|
+
containerRef,
|
|
11
|
+
focusedItemRef,
|
|
12
|
+
afterScroll
|
|
13
|
+
}) => {
|
|
9
14
|
if (containerRef && focusedItemRef && scrollableRef) {
|
|
10
15
|
focusedItemRef.focus({
|
|
11
16
|
preventScroll: true
|
|
@@ -16,15 +21,39 @@ const scrollAndFocus = (scrollableRef, containerRef, focusedItemRef) => {
|
|
|
16
21
|
const isFullHeaderDisplayed = scrollableRef.scrollTop < 40;
|
|
17
22
|
const avoidScrollingToKeepFullHeader = isFullHeaderDisplayed && top < 200;
|
|
18
23
|
if (!avoidScrollingToKeepFullHeader) {
|
|
19
|
-
setTimeout(() => {
|
|
24
|
+
setTimeout(async () => {
|
|
20
25
|
scrollableRef.scrollBy({
|
|
21
26
|
top,
|
|
22
27
|
behavior: 'smooth'
|
|
23
28
|
});
|
|
29
|
+
|
|
30
|
+
// Check if the scroll has finished
|
|
31
|
+
await waitForScrollToFinish(scrollableRef);
|
|
32
|
+
afterScroll == null || afterScroll();
|
|
24
33
|
}, 500);
|
|
25
34
|
}
|
|
26
35
|
}
|
|
27
36
|
};
|
|
28
37
|
exports.scrollAndFocus = scrollAndFocus;
|
|
29
38
|
const getTop = ref => ref && ref.getBoundingClientRect ? ref.getBoundingClientRect().top : 0;
|
|
39
|
+
function waitForScrollToFinish(scrollableRef) {
|
|
40
|
+
return new Promise(resolve => {
|
|
41
|
+
let lastScrollTop = scrollableRef.scrollTop;
|
|
42
|
+
const checkIfScrollFinished = () => {
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
const currentScrollTop = scrollableRef.scrollTop;
|
|
45
|
+
|
|
46
|
+
// If the scroll position has not changed, the scroll is finished
|
|
47
|
+
if (currentScrollTop === lastScrollTop) {
|
|
48
|
+
resolve('');
|
|
49
|
+
} else {
|
|
50
|
+
// Otherwise, update the lastScrollTop and keep checking
|
|
51
|
+
lastScrollTop = currentScrollTop;
|
|
52
|
+
checkIfScrollFinished();
|
|
53
|
+
}
|
|
54
|
+
}, 100);
|
|
55
|
+
};
|
|
56
|
+
checkIfScrollFinished();
|
|
57
|
+
});
|
|
58
|
+
}
|
|
30
59
|
//# sourceMappingURL=scrollAndFocus.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["MINIMIZED_HEADER_HEIGHT","EXTRA_SPACE","scrollAndFocus","scrollableRef","containerRef","focusedItemRef","focus","preventScroll","scrollableRefTop","getTop","containerRefTop","top","isFullHeaderDisplayed","scrollTop","avoidScrollingToKeepFullHeader","setTimeout","scrollBy","behavior","exports","ref","getBoundingClientRect"],"sources":["../../../src/FocusableWrapper/scrollAndFocus.ts"],"sourcesContent":["const MINIMIZED_HEADER_HEIGHT = 67;\nconst EXTRA_SPACE = 48; // Defined by UX\n\nexport const scrollAndFocus = (\n scrollableRef: HTMLElement | undefined | null
|
|
1
|
+
{"version":3,"names":["MINIMIZED_HEADER_HEIGHT","EXTRA_SPACE","scrollAndFocus","scrollableRef","containerRef","focusedItemRef","afterScroll","focus","preventScroll","scrollableRefTop","getTop","containerRefTop","top","isFullHeaderDisplayed","scrollTop","avoidScrollingToKeepFullHeader","setTimeout","scrollBy","behavior","waitForScrollToFinish","exports","ref","getBoundingClientRect","Promise","resolve","lastScrollTop","checkIfScrollFinished","currentScrollTop"],"sources":["../../../src/FocusableWrapper/scrollAndFocus.ts"],"sourcesContent":["const MINIMIZED_HEADER_HEIGHT = 67;\nconst EXTRA_SPACE = 48; // Defined by UX\n\nexport const scrollAndFocus = ({\n scrollableRef,\n containerRef,\n focusedItemRef,\n afterScroll,\n}: {\n scrollableRef: HTMLElement | undefined | null;\n containerRef: HTMLElement;\n focusedItemRef: HTMLElement;\n afterScroll?: () => void;\n}): void => {\n if (containerRef && focusedItemRef && scrollableRef) {\n focusedItemRef.focus({ preventScroll: true });\n const scrollableRefTop = getTop(scrollableRef);\n const containerRefTop = getTop(containerRef);\n const top =\n containerRefTop -\n scrollableRefTop -\n MINIMIZED_HEADER_HEIGHT -\n EXTRA_SPACE;\n\n const isFullHeaderDisplayed = scrollableRef.scrollTop < 40;\n const avoidScrollingToKeepFullHeader = isFullHeaderDisplayed && top < 200;\n\n if (!avoidScrollingToKeepFullHeader) {\n setTimeout(async () => {\n scrollableRef.scrollBy({\n top,\n behavior: 'smooth',\n });\n\n // Check if the scroll has finished\n await waitForScrollToFinish(scrollableRef);\n\n afterScroll?.();\n }, 500);\n }\n }\n};\n\nconst getTop = (ref: HTMLElement): number =>\n ref && ref.getBoundingClientRect ? ref.getBoundingClientRect().top : 0;\n\nfunction waitForScrollToFinish(scrollableRef: HTMLElement) {\n return new Promise((resolve) => {\n let lastScrollTop = scrollableRef.scrollTop;\n\n const checkIfScrollFinished = () => {\n setTimeout(() => {\n const currentScrollTop = scrollableRef.scrollTop;\n\n // If the scroll position has not changed, the scroll is finished\n if (currentScrollTop === lastScrollTop) {\n\n resolve('');\n } else {\n // Otherwise, update the lastScrollTop and keep checking\n lastScrollTop = currentScrollTop;\n checkIfScrollFinished();\n }\n }, 100);\n };\n\n checkIfScrollFinished();\n });\n}\n"],"mappings":";;;;AAAA,MAAMA,uBAAuB,GAAG,EAAE;AAClC,MAAMC,WAAW,GAAG,EAAE,CAAC,CAAC;;AAEjB,MAAMC,cAAc,GAAGA,CAAC;EAC7BC,aAAa;EACbC,YAAY;EACZC,cAAc;EACdC;AAMF,CAAC,KAAW;EACV,IAAIF,YAAY,IAAIC,cAAc,IAAIF,aAAa,EAAE;IACnDE,cAAc,CAACE,KAAK,CAAC;MAAEC,aAAa,EAAE;IAAK,CAAC,CAAC;IAC7C,MAAMC,gBAAgB,GAAGC,MAAM,CAACP,aAAa,CAAC;IAC9C,MAAMQ,eAAe,GAAGD,MAAM,CAACN,YAAY,CAAC;IAC5C,MAAMQ,GAAG,GACPD,eAAe,GACfF,gBAAgB,GAChBT,uBAAuB,GACvBC,WAAW;IAEb,MAAMY,qBAAqB,GAAGV,aAAa,CAACW,SAAS,GAAG,EAAE;IAC1D,MAAMC,8BAA8B,GAAGF,qBAAqB,IAAID,GAAG,GAAG,GAAG;IAEzE,IAAI,CAACG,8BAA8B,EAAE;MACnCC,UAAU,CAAC,YAAY;QACrBb,aAAa,CAACc,QAAQ,CAAC;UACrBL,GAAG;UACHM,QAAQ,EAAE;QACZ,CAAC,CAAC;;QAEF;QACA,MAAMC,qBAAqB,CAAChB,aAAa,CAAC;QAE1CG,WAAW,YAAXA,WAAW,CAAG,CAAC;MACjB,CAAC,EAAE,GAAG,CAAC;IACT;EACF;AACF,CAAC;AAACc,OAAA,CAAAlB,cAAA,GAAAA,cAAA;AAEF,MAAMQ,MAAM,GAAIW,GAAgB,IAC9BA,GAAG,IAAIA,GAAG,CAACC,qBAAqB,GAAGD,GAAG,CAACC,qBAAqB,CAAC,CAAC,CAACV,GAAG,GAAG,CAAC;AAExE,SAASO,qBAAqBA,CAAChB,aAA0B,EAAE;EACzD,OAAO,IAAIoB,OAAO,CAAEC,OAAO,IAAK;IAC9B,IAAIC,aAAa,GAAGtB,aAAa,CAACW,SAAS;IAE3C,MAAMY,qBAAqB,GAAGA,CAAA,KAAM;MAClCV,UAAU,CAAC,MAAM;QACf,MAAMW,gBAAgB,GAAGxB,aAAa,CAACW,SAAS;;QAEhD;QACA,IAAIa,gBAAgB,KAAKF,aAAa,EAAE;UAEtCD,OAAO,CAAC,EAAE,CAAC;QACb,CAAC,MAAM;UACL;UACAC,aAAa,GAAGE,gBAAgB;UAChCD,qBAAqB,CAAC,CAAC;QACzB;MACF,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IAEDA,qBAAqB,CAAC,CAAC;EACzB,CAAC,CAAC;AACJ","ignoreList":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export class FocusableItemsService {
|
|
2
2
|
constructor() {
|
|
3
3
|
this.getItemRef = (itemName) => this.focusableItems[itemName] && this.focusableItems[itemName].ref;
|
|
4
|
+
this.getItemAfterScroll = (itemName) => this.focusableItems[itemName] && this.focusableItems[itemName].afterScroll;
|
|
4
5
|
this.getContainerRefByItem = (itemName) => {
|
|
5
6
|
const containerName = this.focusableItems[itemName]?.containerName;
|
|
6
7
|
const container = this.scrollableContainers[containerName];
|
|
@@ -13,8 +14,13 @@ export class FocusableItemsService {
|
|
|
13
14
|
this.focusableItems = {};
|
|
14
15
|
this.scrollableContainers = {};
|
|
15
16
|
}
|
|
16
|
-
addItem({ ref, itemName, containerName }) {
|
|
17
|
-
this.focusableItems[itemName] = {
|
|
17
|
+
addItem({ ref, itemName, containerName, afterScroll }) {
|
|
18
|
+
this.focusableItems[itemName] = {
|
|
19
|
+
itemName,
|
|
20
|
+
ref,
|
|
21
|
+
containerName,
|
|
22
|
+
afterScroll,
|
|
23
|
+
};
|
|
18
24
|
}
|
|
19
25
|
addContainer({ containerName, ref }) {
|
|
20
26
|
this.scrollableContainers[containerName] = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableService.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableService.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FocusableService.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableService.ts"],"names":[],"mappings":"AAYA,MAAM,OAAO,qBAAqB;IAWhC;QAqBA,eAAU,GAAG,CAAC,QAAgB,EAAE,EAAE,CAChC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC;QAErE,uBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE,CACxC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC;QAE7E,0BAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;YACnE,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;YAC3D,OAAO,SAAS,EAAE,GAAG,CAAC;QACxB,CAAC,CAAC;QACF,0BAAqB,GAAG,CAAC,aAAqB,EAAE,EAAE;YAChD,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;YAC3D,OAAO,SAAS,EAAE,GAAG,CAAC;QACxB,CAAC,CAAC;QAlCA,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;IACjC,CAAC;IAED,OAAO,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAiB;QAClE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;YAC9B,QAAQ;YACR,GAAG;YACH,aAAa;YACb,WAAW;SACZ,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,EAAE,aAAa,EAAE,GAAG,EAAuB;QACtD,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,GAAG;YACzC,aAAa;YACb,GAAG;SACJ,CAAC;IACJ,CAAC;CAiBF"}
|
|
@@ -18,12 +18,22 @@ export const FocusableWrapper = ({ scrollableRef, getScrollableTrigger, getDoesI
|
|
|
18
18
|
}
|
|
19
19
|
const containerRefByItem = focusableItemsService.getContainerRefByItem(focusedItemName);
|
|
20
20
|
if (containerRefByItem) {
|
|
21
|
-
const
|
|
22
|
-
|
|
21
|
+
const focusedItemRef = focusableItemsService.getItemRef(focusedItemName);
|
|
22
|
+
const afterScroll = focusableItemsService.getItemAfterScroll(focusedItemName);
|
|
23
|
+
return scrollAndFocus({
|
|
24
|
+
scrollableRef,
|
|
25
|
+
containerRef: containerRefByItem,
|
|
26
|
+
focusedItemRef,
|
|
27
|
+
afterScroll,
|
|
28
|
+
});
|
|
23
29
|
}
|
|
24
30
|
const containerRef = focusableItemsService.getContainerRefByName(focusedItemName);
|
|
25
31
|
if (containerRef) {
|
|
26
|
-
scrollAndFocus(
|
|
32
|
+
scrollAndFocus({
|
|
33
|
+
scrollableRef,
|
|
34
|
+
containerRef,
|
|
35
|
+
focusedItemRef: containerRef,
|
|
36
|
+
});
|
|
27
37
|
}
|
|
28
38
|
}, [focusableItemsService, scrollableRef]);
|
|
29
39
|
const doesItemExist = useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableWrapper.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAiB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,GAAkB,EAAE;IAChD,MAAM,YAAY,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjE,OAAO,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAsB,IAAI,CAAC,CAAC;AAQ/E,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,qBAAqB,EAAE,EAAE,EAAE,CAAC,CAAC;IAE7E,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,MAAM,eAAe,GAAG,cAAc,EAAE,CAAC;QACzC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,eAA8B,EAAE,EAAE;QACjC,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO;SACR;QACD,MAAM,kBAAkB,GACtB,qBAAqB,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;QAC/D,IAAI,kBAAkB,EAAE;YACtB,MAAM,
|
|
1
|
+
{"version":3,"file":"FocusableWrapper.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableWrapper.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const MINIMIZED_HEADER_HEIGHT = 67;
|
|
2
2
|
const EXTRA_SPACE = 48; // Defined by UX
|
|
3
|
-
export const scrollAndFocus = (scrollableRef, containerRef, focusedItemRef) => {
|
|
3
|
+
export const scrollAndFocus = ({ scrollableRef, containerRef, focusedItemRef, afterScroll, }) => {
|
|
4
4
|
if (containerRef && focusedItemRef && scrollableRef) {
|
|
5
5
|
focusedItemRef.focus({ preventScroll: true });
|
|
6
6
|
const scrollableRefTop = getTop(scrollableRef);
|
|
@@ -12,14 +12,37 @@ export const scrollAndFocus = (scrollableRef, containerRef, focusedItemRef) => {
|
|
|
12
12
|
const isFullHeaderDisplayed = scrollableRef.scrollTop < 40;
|
|
13
13
|
const avoidScrollingToKeepFullHeader = isFullHeaderDisplayed && top < 200;
|
|
14
14
|
if (!avoidScrollingToKeepFullHeader) {
|
|
15
|
-
setTimeout(() => {
|
|
15
|
+
setTimeout(async () => {
|
|
16
16
|
scrollableRef.scrollBy({
|
|
17
17
|
top,
|
|
18
18
|
behavior: 'smooth',
|
|
19
19
|
});
|
|
20
|
+
// Check if the scroll has finished
|
|
21
|
+
await waitForScrollToFinish(scrollableRef);
|
|
22
|
+
afterScroll?.();
|
|
20
23
|
}, 500);
|
|
21
24
|
}
|
|
22
25
|
}
|
|
23
26
|
};
|
|
24
27
|
const getTop = (ref) => ref && ref.getBoundingClientRect ? ref.getBoundingClientRect().top : 0;
|
|
28
|
+
function waitForScrollToFinish(scrollableRef) {
|
|
29
|
+
return new Promise((resolve) => {
|
|
30
|
+
let lastScrollTop = scrollableRef.scrollTop;
|
|
31
|
+
const checkIfScrollFinished = () => {
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
const currentScrollTop = scrollableRef.scrollTop;
|
|
34
|
+
// If the scroll position has not changed, the scroll is finished
|
|
35
|
+
if (currentScrollTop === lastScrollTop) {
|
|
36
|
+
resolve('');
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
// Otherwise, update the lastScrollTop and keep checking
|
|
40
|
+
lastScrollTop = currentScrollTop;
|
|
41
|
+
checkIfScrollFinished();
|
|
42
|
+
}
|
|
43
|
+
}, 100);
|
|
44
|
+
};
|
|
45
|
+
checkIfScrollFinished();
|
|
46
|
+
});
|
|
47
|
+
}
|
|
25
48
|
//# sourceMappingURL=scrollAndFocus.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollAndFocus.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/scrollAndFocus.ts"],"names":[],"mappings":"AAAA,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,WAAW,GAAG,EAAE,CAAC,CAAC,gBAAgB;AAExC,MAAM,CAAC,MAAM,cAAc,GAAG,
|
|
1
|
+
{"version":3,"file":"scrollAndFocus.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/scrollAndFocus.ts"],"names":[],"mappings":"AAAA,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,WAAW,GAAG,EAAE,CAAC,CAAC,gBAAgB;AAExC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,aAAa,EACb,YAAY,EACZ,cAAc,EACd,WAAW,GAMZ,EAAQ,EAAE;IACT,IAAI,YAAY,IAAI,cAAc,IAAI,aAAa,EAAE;QACnD,cAAc,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QAC/C,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;QAC7C,MAAM,GAAG,GACP,eAAe;YACf,gBAAgB;YAChB,uBAAuB;YACvB,WAAW,CAAC;QAEd,MAAM,qBAAqB,GAAG,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC;QAC3D,MAAM,8BAA8B,GAAG,qBAAqB,IAAI,GAAG,GAAG,GAAG,CAAC;QAE1E,IAAI,CAAC,8BAA8B,EAAE;YACnC,UAAU,CAAC,KAAK,IAAI,EAAE;gBACpB,aAAa,CAAC,QAAQ,CAAC;oBACrB,GAAG;oBACH,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAC;gBAEH,mCAAmC;gBACnC,MAAM,qBAAqB,CAAC,aAAa,CAAC,CAAC;gBAE3C,WAAW,EAAE,EAAE,CAAC;YAClB,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;KACF;AACH,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,GAAgB,EAAU,EAAE,CAC1C,GAAG,IAAI,GAAG,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAEzE,SAAS,qBAAqB,CAAC,aAA0B;IACvD,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,IAAI,aAAa,GAAG,aAAa,CAAC,SAAS,CAAC;QAE5C,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,UAAU,CAAC,GAAG,EAAE;gBACd,MAAM,gBAAgB,GAAG,aAAa,CAAC,SAAS,CAAC;gBAEjD,iEAAiE;gBACjE,IAAI,gBAAgB,KAAK,aAAa,EAAE;oBAEtC,OAAO,CAAC,EAAE,CAAC,CAAC;iBACb;qBAAM;oBACL,wDAAwD;oBACxD,aAAa,GAAG,gBAAgB,CAAC;oBACjC,qBAAqB,EAAE,CAAC;iBACzB;YACH,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;QAEF,qBAAqB,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -2,6 +2,7 @@ export type FocusableItem = {
|
|
|
2
2
|
containerName: string;
|
|
3
3
|
ref: HTMLElement;
|
|
4
4
|
itemName: string;
|
|
5
|
+
afterScroll?: () => void;
|
|
5
6
|
};
|
|
6
7
|
export type ScrollableContainer = {
|
|
7
8
|
containerName: string;
|
|
@@ -11,9 +12,10 @@ export declare class FocusableItemsService {
|
|
|
11
12
|
private focusableItems;
|
|
12
13
|
private scrollableContainers;
|
|
13
14
|
constructor();
|
|
14
|
-
addItem({ ref, itemName, containerName }: FocusableItem): void;
|
|
15
|
+
addItem({ ref, itemName, containerName, afterScroll }: FocusableItem): void;
|
|
15
16
|
addContainer({ containerName, ref }: ScrollableContainer): void;
|
|
16
17
|
getItemRef: (itemName: string) => HTMLElement;
|
|
18
|
+
getItemAfterScroll: (itemName: string) => (() => void) | undefined;
|
|
17
19
|
getContainerRefByItem: (itemName: string) => HTMLElement;
|
|
18
20
|
getContainerRefByName: (containerName: string) => HTMLElement;
|
|
19
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableService.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableService.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"FocusableService.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableService.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,qBAAa,qBAAqB;IAChC,OAAO,CAAC,cAAc,CAEpB;IACF,OAAO,CAAC,oBAAoB,CAK1B;;IAOF,OAAO,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,EAAE,aAAa;IASpE,YAAY,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,EAAE,mBAAmB;IAOxD,UAAU,aAAc,MAAM,iBACuC;IAErE,kBAAkB,aAAc,MAAM,8BACuC;IAE7E,qBAAqB,aAAc,MAAM,iBAIvC;IACF,qBAAqB,kBAAmB,MAAM,iBAG5C;CACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableWrapper.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAyB,MAAM,oBAAoB,CAAC;AAG1E,eAAO,MAAM,cAAc,QAAO,MAAM,GAAG,IAG1C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE;QACT,sBAAsB,EAAE,CAAC,cAAc,EAAE,aAAa,KAAK,IAAI,CAAC;KACjE,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,oCAAiD,CAAC;AAE/E,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"FocusableWrapper.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAyB,MAAM,oBAAoB,CAAC;AAG1E,eAAO,MAAM,cAAc,QAAO,MAAM,GAAG,IAG1C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE;QACT,sBAAsB,EAAE,CAAC,cAAc,EAAE,aAAa,KAAK,IAAI,CAAC;KACjE,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,oCAAiD,CAAC;AAE/E,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgF5D,CAAC"}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
export declare const scrollAndFocus: (scrollableRef
|
|
1
|
+
export declare const scrollAndFocus: ({ scrollableRef, containerRef, focusedItemRef, afterScroll, }: {
|
|
2
|
+
scrollableRef: HTMLElement | undefined | null;
|
|
3
|
+
containerRef: HTMLElement;
|
|
4
|
+
focusedItemRef: HTMLElement;
|
|
5
|
+
afterScroll?: (() => void) | undefined;
|
|
6
|
+
}) => void;
|
|
2
7
|
//# sourceMappingURL=scrollAndFocus.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollAndFocus.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/scrollAndFocus.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"scrollAndFocus.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/scrollAndFocus.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc;mBAMV,WAAW,GAAG,SAAS,GAAG,IAAI;kBAC/B,WAAW;oBACT,WAAW;yBACP,IAAI;MACtB,IA4BH,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/bex-utils",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.23.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Kobi",
|
|
@@ -149,5 +149,5 @@
|
|
|
149
149
|
"wallaby": {
|
|
150
150
|
"autoDetect": true
|
|
151
151
|
},
|
|
152
|
-
"falconPackageHash": "
|
|
152
|
+
"falconPackageHash": "166b7a4e70b857611545e7411df075934d643bf4a92f0ee3d9134b43"
|
|
153
153
|
}
|