@wix/bex-utils 2.20.0 → 2.21.0

package/dist/cjs/FocusableWrapper/FocusableService.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.FocusableItemsService = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+class FocusableItemsService {
+  constructor() {
+    (0, _defineProperty2.default)(this, "focusableItems", void 0);
+    (0, _defineProperty2.default)(this, "scrollableContainers", void 0);
+    (0, _defineProperty2.default)(this, "getItemRef", itemName => this.focusableItems[itemName] && this.focusableItems[itemName].ref);
+    (0, _defineProperty2.default)(this, "getContainerRefByItem", itemName => {
+      var _this$focusableItems$;
+      const containerName = (_this$focusableItems$ = this.focusableItems[itemName]) == null ? void 0 : _this$focusableItems$.containerName;
+      const container = this.scrollableContainers[containerName];
+      return container == null ? void 0 : container.ref;
+    });
+    (0, _defineProperty2.default)(this, "getContainerRefByName", containerName => {
+      const container = this.scrollableContainers[containerName];
+      return container == null ? void 0 : container.ref;
+    });
+    this.focusableItems = {};
+    this.scrollableContainers = {};
+  }
+  addItem({
+    ref,
+    itemName,
+    containerName
+  }) {
+    this.focusableItems[itemName] = {
+      itemName,
+      ref,
+      containerName
+    };
+  }
+  addContainer({
+    containerName,
+    ref
+  }) {
+    this.scrollableContainers[containerName] = {
+      containerName,
+      ref
+    };
+  }
+}
+exports.FocusableItemsService = FocusableItemsService;
+//# sourceMappingURL=FocusableService.js.map

package/dist/cjs/FocusableWrapper/FocusableService.js.map

@@ -0,0 +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] = { itemName, ref, containerName };\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  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":";;;;;;AAWO,MAAMA,qBAAqB,CAAC;EAWjCC,WAAWA,CAAA,EAAG;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,sBAgBAC,QAAgB,IAC5B,IAAI,CAACC,cAAc,CAACD,QAAQ,CAAC,IAAI,IAAI,CAACC,cAAc,CAACD,QAAQ,CAAC,CAACE,GAAG;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,iCAC3CC,QAAgB,IAAK;MAAA,IAAAG,qBAAA;MAC5C,MAAMC,aAAa,IAAAD,qBAAA,GAAG,IAAI,CAACF,cAAc,CAACD,QAAQ,CAAC,qBAA7BG,qBAAA,CAA+BC,aAAa;MAClE,MAAMC,SAAS,GAAG,IAAI,CAACC,oBAAoB,CAACF,aAAa,CAAC;MAC1D,OAAOC,SAAS,oBAATA,SAAS,CAAEH,GAAG;IACvB,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,iCACwBK,aAAqB,IAAK;MACjD,MAAMC,SAAS,GAAG,IAAI,CAACC,oBAAoB,CAACF,aAAa,CAAC;MAC1D,OAAOC,SAAS,oBAATA,SAAS,CAAEH,GAAG;IACvB,CAAC;IAzBC,IAAI,CAACD,cAAc,GAAG,CAAC,CAAC;IACxB,IAAI,CAACK,oBAAoB,GAAG,CAAC,CAAC;EAChC;EAEAC,OAAOA,CAAC;IAAEL,GAAG;IAAEF,QAAQ;IAAEI;EAA6B,CAAC,EAAE;IACvD,IAAI,CAACH,cAAc,CAACD,QAAQ,CAAC,GAAG;MAAEA,QAAQ;MAAEE,GAAG;MAAEE;IAAc,CAAC;EAClE;EAEAI,YAAYA,CAAC;IAAEJ,aAAa;IAAEF;EAAyB,CAAC,EAAE;IACxD,IAAI,CAACI,oBAAoB,CAACF,aAAa,CAAC,GAAG;MACzCA,aAAa;MACbF;IACF,CAAC;EACH;AAaF;AAACO,OAAA,CAAAb,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/dist/cjs/FocusableWrapper/FocusableWrapper.js

@@ -0,0 +1,72 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getAnchorParam = exports.FocusableWrapper = exports.FocusableContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FocusableService = require("./FocusableService");
+var _scrollAndFocus = require("./scrollAndFocus");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/utils/dist/cjs/FocusableWrapper/FocusableWrapper.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getAnchorParam = () => {
+  const searchParams = new URLSearchParams(window.location.search);
+  return searchParams.get('anchor');
+};
+exports.getAnchorParam = getAnchorParam;
+const FocusableContext = exports.FocusableContext = /*#__PURE__*/_react.default.createContext(null);
+const FocusableWrapper = ({
+  scrollableRef,
+  getScrollableTrigger,
+  getDoesItemExist,
+  children
+}) => {
+  const focusableItemsService = (0, _react.useMemo)(() => new _FocusableService.FocusableItemsService(), []);
+  const scrollIfNeeded = (0, _react.useCallback)(() => {
+    const focusedItemName = getAnchorParam();
+    scrollByItemName(focusedItemName);
+  }, [scrollableRef]);
+  const scrollByItemName = (0, _react.useCallback)(focusedItemName => {
+    if (!focusedItemName) {
+      return;
+    }
+    const containerRefByItem = focusableItemsService.getContainerRefByItem(focusedItemName);
+    if (containerRefByItem) {
+      const focusedItem = focusableItemsService.getItemRef(focusedItemName);
+      return (0, _scrollAndFocus.scrollAndFocus)(scrollableRef, containerRefByItem, focusedItem);
+    }
+    const containerRef = focusableItemsService.getContainerRefByName(focusedItemName);
+    if (containerRef) {
+      (0, _scrollAndFocus.scrollAndFocus)(scrollableRef, containerRef, containerRef);
+    }
+  }, [focusableItemsService, scrollableRef]);
+  const doesItemExist = (0, _react.useCallback)(() => {
+    const focusedItemName = getAnchorParam();
+    if (!focusedItemName) {
+      return false;
+    }
+    return Boolean(focusableItemsService.getContainerRefByItem(focusedItemName));
+  }, [focusableItemsService]);
+  (0, _react.useEffect)(() => {
+    getScrollableTrigger(scrollIfNeeded);
+    getDoesItemExist(doesItemExist);
+  }, [getScrollableTrigger, getDoesItemExist, scrollIfNeeded, doesItemExist]);
+  const contextValue = (0, _react.useMemo)(() => ({
+    focusable: {
+      registerScrollableItem: scrollableItem => {
+        focusableItemsService.addContainer(scrollableItem);
+        focusableItemsService.addItem(scrollableItem);
+      }
+    }
+  }), [focusableItemsService]);
+  return /*#__PURE__*/_react.default.createElement(FocusableContext.Provider, {
+    value: contextValue,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 88,
+      columnNumber: 5
+    }
+  }, children);
+};
+exports.FocusableWrapper = FocusableWrapper;
+//# sourceMappingURL=FocusableWrapper.js.map

package/dist/cjs/FocusableWrapper/FocusableWrapper.js.map

@@ -0,0 +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","focusedItem","getItemRef","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 focusedItem = focusableItemsService.getItemRef(focusedItemName);\n        return scrollAndFocus(scrollableRef, containerRefByItem, focusedItem);\n      }\n\n      const containerRef =\n        focusableItemsService.getContainerRefByName(focusedItemName);\n      if (containerRef) {\n        scrollAndFocus(scrollableRef, containerRef, containerRef);\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":"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","ignoreList":[]}

package/dist/cjs/FocusableWrapper/scrollAndFocus.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.scrollAndFocus = void 0;
+const MINIMIZED_HEADER_HEIGHT = 67;
+const EXTRA_SPACE = 48; // Defined by UX
+
+const scrollAndFocus = (scrollableRef, containerRef, focusedItemRef) => {
+  if (containerRef && focusedItemRef && scrollableRef) {
+    focusedItemRef.focus({
+      preventScroll: true
+    });
+    const scrollableRefTop = getTop(scrollableRef);
+    const containerRefTop = getTop(containerRef);
+    const top = containerRefTop - scrollableRefTop - MINIMIZED_HEADER_HEIGHT - EXTRA_SPACE;
+    const isFullHeaderDisplayed = scrollableRef.scrollTop < 40;
+    const avoidScrollingToKeepFullHeader = isFullHeaderDisplayed && top < 200;
+    if (!avoidScrollingToKeepFullHeader) {
+      setTimeout(() => {
+        scrollableRef.scrollBy({
+          top,
+          behavior: 'smooth'
+        });
+      }, 500);
+    }
+  }
+};
+exports.scrollAndFocus = scrollAndFocus;
+const getTop = ref => ref && ref.getBoundingClientRect ? ref.getBoundingClientRect().top : 0;
+//# sourceMappingURL=scrollAndFocus.js.map

package/dist/cjs/FocusableWrapper/scrollAndFocus.js.map

@@ -0,0 +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,\n  containerRef: HTMLElement,\n  focusedItemRef: HTMLElement,\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(() => {\n        scrollableRef.scrollBy({\n          top,\n          behavior: 'smooth',\n        });\n      }, 500);\n    }\n  }\n};\n\nconst getTop = (ref: HTMLElement): number =>\n  ref && ref.getBoundingClientRect ? ref.getBoundingClientRect().top : 0;\n"],"mappings":";;;;AAAA,MAAMA,uBAAuB,GAAG,EAAE;AAClC,MAAMC,WAAW,GAAG,EAAE,CAAC,CAAC;;AAEjB,MAAMC,cAAc,GAAGA,CAC5BC,aAA6C,EAC7CC,YAAyB,EACzBC,cAA2B,KAClB;EACT,IAAID,YAAY,IAAIC,cAAc,IAAIF,aAAa,EAAE;IACnDE,cAAc,CAACC,KAAK,CAAC;MAAEC,aAAa,EAAE;IAAK,CAAC,CAAC;IAC7C,MAAMC,gBAAgB,GAAGC,MAAM,CAACN,aAAa,CAAC;IAC9C,MAAMO,eAAe,GAAGD,MAAM,CAACL,YAAY,CAAC;IAC5C,MAAMO,GAAG,GACPD,eAAe,GACfF,gBAAgB,GAChBR,uBAAuB,GACvBC,WAAW;IAEb,MAAMW,qBAAqB,GAAGT,aAAa,CAACU,SAAS,GAAG,EAAE;IAC1D,MAAMC,8BAA8B,GAAGF,qBAAqB,IAAID,GAAG,GAAG,GAAG;IAEzE,IAAI,CAACG,8BAA8B,EAAE;MACnCC,UAAU,CAAC,MAAM;QACfZ,aAAa,CAACa,QAAQ,CAAC;UACrBL,GAAG;UACHM,QAAQ,EAAE;QACZ,CAAC,CAAC;MACJ,CAAC,EAAE,GAAG,CAAC;IACT;EACF;AACF,CAAC;AAACC,OAAA,CAAAhB,cAAA,GAAAA,cAAA;AAEF,MAAMO,MAAM,GAAIU,GAAgB,IAC9BA,GAAG,IAAIA,GAAG,CAACC,qBAAqB,GAAGD,GAAG,CAACC,qBAAqB,CAAC,CAAC,CAACT,GAAG,GAAG,CAAC","ignoreList":[]}

package/dist/cjs/FocusableWrapper/withFocusable.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.withFocusable = withFocusable;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _FocusableWrapper = require("./FocusableWrapper");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/utils/dist/cjs/FocusableWrapper/withFocusable.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function withFocusable(WrappedComponent) {
+  return props => {
+    const context = (0, _react.useContext)(_FocusableWrapper.FocusableContext);
+    const registerScrollableItem = (0, _react.useCallback)(args => {
+      var _context$focusable;
+      context == null || (_context$focusable = context.focusable) == null || _context$focusable.registerScrollableItem == null || _context$focusable.registerScrollableItem(args);
+    }, [context]);
+    const addedProps = {
+      registerScrollableItem
+    };
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({}, props, addedProps, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 23,
+        columnNumber: 12
+      }
+    }));
+  };
+}
+//# sourceMappingURL=withFocusable.js.map

package/dist/cjs/FocusableWrapper/withFocusable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_FocusableWrapper","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","withFocusable","WrappedComponent","props","context","useContext","FocusableContext","registerScrollableItem","useCallback","args","_context$focusable","focusable","addedProps","createElement","_extends2","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../src/FocusableWrapper/withFocusable.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { ContextProps, FocusableContext } from './FocusableWrapper';\n\nexport type FocusableProps = ContextProps['focusable'];\n\nexport function withFocusable<P extends FocusableProps>(\n  WrappedComponent: React.ComponentType<P>,\n): React.FC<Omit<P, keyof FocusableProps>> {\n  return (props) => {\n    const context = useContext(FocusableContext);\n\n    const registerScrollableItem = useCallback(\n      (args) => {\n        context?.focusable?.registerScrollableItem?.(args);\n      },\n      [context],\n    );\n\n    const addedProps = {\n      registerScrollableItem,\n    };\n\n    return <WrappedComponent {...(props as P)} {...addedProps} />;\n  };\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAAoE,IAAAE,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,SAAAL,wBAAAK,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;AAI7D,SAASW,aAAaA,CAC3BC,gBAAwC,EACC;EACzC,OAAQC,KAAK,IAAK;IAChB,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACC,kCAAgB,CAAC;IAE5C,MAAMC,sBAAsB,GAAG,IAAAC,kBAAW,EACvCC,IAAI,IAAK;MAAA,IAAAC,kBAAA;MACRN,OAAO,aAAAM,kBAAA,GAAPN,OAAO,CAAEO,SAAS,aAAlBD,kBAAA,CAAoBH,sBAAsB,YAA1CG,kBAAA,CAAoBH,sBAAsB,CAAGE,IAAI,CAAC;IACpD,CAAC,EACD,CAACL,OAAO,CACV,CAAC;IAED,MAAMQ,UAAU,GAAG;MACjBL;IACF,CAAC;IAED,oBAAO/B,MAAA,CAAAW,OAAA,CAAA0B,aAAA,CAACX,gBAAgB,MAAAY,SAAA,CAAA3B,OAAA,MAAMgB,KAAK,EAAYS,UAAU;MAAAG,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAArC,YAAA;QAAAsC,UAAA;QAAAC,YAAA;MAAA;IAAA,EAAG,CAAC;EAC/D,CAAC;AACH","ignoreList":[]}

package/dist/cjs/index.js

@@ -19,4 +19,16 @@ Object.keys(_reactiveContext).forEach(function (key) {
   if (key in exports && exports[key] === _reactiveContext[key]) return;
   exports[key] = _reactiveContext[key];
 });
+var _FocusableWrapper = require("./FocusableWrapper/FocusableWrapper");
+Object.keys(_FocusableWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FocusableWrapper[key]) return;
+  exports[key] = _FocusableWrapper[key];
+});
+var _withFocusable = require("./FocusableWrapper/withFocusable");
+Object.keys(_withFocusable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _withFocusable[key]) return;
+  exports[key] = _withFocusable[key];
+});
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactive","require","Object","keys","forEach","key","exports","_PromiseState","_reactiveContext"],"sources":["../../src/index.ts"],"sourcesContent":["export * from './reactive';\nexport * from './PromiseState';\nexport * from './reactiveContext';\n"],"mappings":";;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,SAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,SAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,SAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,aAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,aAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,aAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,aAAA,CAAAF,GAAA;AAAA;AACA,IAAAG,gBAAA,GAAAP,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAK,gBAAA,EAAAJ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,gBAAA,CAAAH,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAG,gBAAA,CAAAH,GAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_reactive","require","Object","keys","forEach","key","exports","_PromiseState","_reactiveContext","_FocusableWrapper","_withFocusable"],"sources":["../../src/index.ts"],"sourcesContent":["export * from './reactive';\nexport * from './PromiseState';\nexport * from './reactiveContext';\nexport * from './FocusableWrapper/FocusableWrapper';\nexport * from './FocusableWrapper/withFocusable';\n"],"mappings":";;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,SAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,SAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,SAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,aAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,aAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,aAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,aAAA,CAAAF,GAAA;AAAA;AACA,IAAAG,gBAAA,GAAAP,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAK,gBAAA,EAAAJ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,gBAAA,CAAAH,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAG,gBAAA,CAAAH,GAAA;AAAA;AACA,IAAAI,iBAAA,GAAAR,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAM,iBAAA,EAAAL,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAI,iBAAA,CAAAJ,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAI,iBAAA,CAAAJ,GAAA;AAAA;AACA,IAAAK,cAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,cAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,cAAA,CAAAL,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAK,cAAA,CAAAL,GAAA;AAAA","ignoreList":[]}

package/dist/esm/FocusableWrapper/FocusableService.js

@@ -0,0 +1,26 @@
+export class FocusableItemsService {
+    constructor() {
+        this.getItemRef = (itemName) => this.focusableItems[itemName] && this.focusableItems[itemName].ref;
+        this.getContainerRefByItem = (itemName) => {
+            const containerName = this.focusableItems[itemName]?.containerName;
+            const container = this.scrollableContainers[containerName];
+            return container?.ref;
+        };
+        this.getContainerRefByName = (containerName) => {
+            const container = this.scrollableContainers[containerName];
+            return container?.ref;
+        };
+        this.focusableItems = {};
+        this.scrollableContainers = {};
+    }
+    addItem({ ref, itemName, containerName }) {
+        this.focusableItems[itemName] = { itemName, ref, containerName };
+    }
+    addContainer({ containerName, ref }) {
+        this.scrollableContainers[containerName] = {
+            containerName,
+            ref,
+        };
+    }
+}
+//# sourceMappingURL=FocusableService.js.map

package/dist/esm/FocusableWrapper/FocusableService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusableService.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/FocusableService.ts"],"names":[],"mappings":"AAWA,MAAM,OAAO,qBAAqB;IAWhC;QAgBA,eAAU,GAAG,CAAC,QAAgB,EAAE,EAAE,CAChC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC;QACrE,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;QAzBA,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;IACjC,CAAC;IAED,OAAO,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAiB;QACrD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC;IACnE,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;CAaF"}

package/dist/esm/FocusableWrapper/FocusableWrapper.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { FocusableItemsService } from './FocusableService';
+import { scrollAndFocus } from './scrollAndFocus';
+export const getAnchorParam = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get('anchor');
+};
+export const FocusableContext = React.createContext(null);
+export const FocusableWrapper = ({ scrollableRef, getScrollableTrigger, getDoesItemExist, children, }) => {
+    const focusableItemsService = useMemo(() => new FocusableItemsService(), []);
+    const scrollIfNeeded = useCallback(() => {
+        const focusedItemName = getAnchorParam();
+        scrollByItemName(focusedItemName);
+    }, [scrollableRef]);
+    const scrollByItemName = useCallback((focusedItemName) => {
+        if (!focusedItemName) {
+            return;
+        }
+        const containerRefByItem = focusableItemsService.getContainerRefByItem(focusedItemName);
+        if (containerRefByItem) {
+            const focusedItem = focusableItemsService.getItemRef(focusedItemName);
+            return scrollAndFocus(scrollableRef, containerRefByItem, focusedItem);
+        }
+        const containerRef = focusableItemsService.getContainerRefByName(focusedItemName);
+        if (containerRef) {
+            scrollAndFocus(scrollableRef, containerRef, containerRef);
+        }
+    }, [focusableItemsService, scrollableRef]);
+    const doesItemExist = useCallback(() => {
+        const focusedItemName = getAnchorParam();
+        if (!focusedItemName) {
+            return false;
+        }
+        return Boolean(focusableItemsService.getContainerRefByItem(focusedItemName));
+    }, [focusableItemsService]);
+    useEffect(() => {
+        getScrollableTrigger(scrollIfNeeded);
+        getDoesItemExist(doesItemExist);
+    }, [getScrollableTrigger, getDoesItemExist, scrollIfNeeded, doesItemExist]);
+    const contextValue = useMemo(() => ({
+        focusable: {
+            registerScrollableItem: (scrollableItem) => {
+                focusableItemsService.addContainer(scrollableItem);
+                focusableItemsService.addItem(scrollableItem);
+            },
+        },
+    }), [focusableItemsService]);
+    return (React.createElement(FocusableContext.Provider, { value: contextValue }, children));
+};
+//# sourceMappingURL=FocusableWrapper.js.map

package/dist/esm/FocusableWrapper/FocusableWrapper.js.map

@@ -0,0 +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,WAAW,GAAG,qBAAqB,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;YACtE,OAAO,cAAc,CAAC,aAAa,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC;SACvE;QAED,MAAM,YAAY,GAChB,qBAAqB,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;QAC/D,IAAI,YAAY,EAAE;YAChB,cAAc,CAAC,aAAa,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;SAC3D;IACH,CAAC,EACD,CAAC,qBAAqB,EAAE,aAAa,CAAC,CACvC,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,MAAM,eAAe,GAAG,cAAc,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,KAAK,CAAC;SACd;QAED,OAAO,OAAO,CACZ,qBAAqB,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAC7D,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,oBAAoB,CAAC,cAAc,CAAC,CAAC;QAErC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,oBAAoB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5E,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE;YACT,sBAAsB,EAAE,CAAC,cAA6B,EAAE,EAAE;gBACxD,qBAAqB,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;gBACnD,qBAAqB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAChD,CAAC;SACF;KACF,CAAC,EACF,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAC3C,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/FocusableWrapper/scrollAndFocus.js

@@ -0,0 +1,25 @@
+const MINIMIZED_HEADER_HEIGHT = 67;
+const EXTRA_SPACE = 48; // Defined by UX
+export const scrollAndFocus = (scrollableRef, containerRef, focusedItemRef) => {
+    if (containerRef && focusedItemRef && scrollableRef) {
+        focusedItemRef.focus({ preventScroll: true });
+        const scrollableRefTop = getTop(scrollableRef);
+        const containerRefTop = getTop(containerRef);
+        const top = containerRefTop -
+            scrollableRefTop -
+            MINIMIZED_HEADER_HEIGHT -
+            EXTRA_SPACE;
+        const isFullHeaderDisplayed = scrollableRef.scrollTop < 40;
+        const avoidScrollingToKeepFullHeader = isFullHeaderDisplayed && top < 200;
+        if (!avoidScrollingToKeepFullHeader) {
+            setTimeout(() => {
+                scrollableRef.scrollBy({
+                    top,
+                    behavior: 'smooth',
+                });
+            }, 500);
+        }
+    }
+};
+const getTop = (ref) => ref && ref.getBoundingClientRect ? ref.getBoundingClientRect().top : 0;
+//# sourceMappingURL=scrollAndFocus.js.map

package/dist/esm/FocusableWrapper/scrollAndFocus.js.map

@@ -0,0 +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,CAC5B,aAA6C,EAC7C,YAAyB,EACzB,cAA2B,EACrB,EAAE;IACR,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,GAAG,EAAE;gBACd,aAAa,CAAC,QAAQ,CAAC;oBACrB,GAAG;oBACH,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAC;YACL,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"}

package/dist/esm/FocusableWrapper/withFocusable.js

@@ -0,0 +1,15 @@
+import React, { useCallback, useContext } from 'react';
+import { FocusableContext } from './FocusableWrapper';
+export function withFocusable(WrappedComponent) {
+    return (props) => {
+        const context = useContext(FocusableContext);
+        const registerScrollableItem = useCallback((args) => {
+            context?.focusable?.registerScrollableItem?.(args);
+        }, [context]);
+        const addedProps = {
+            registerScrollableItem,
+        };
+        return React.createElement(WrappedComponent, { ...props, ...addedProps });
+    };
+}
+//# sourceMappingURL=withFocusable.js.map

package/dist/esm/FocusableWrapper/withFocusable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFocusable.js","sourceRoot":"","sources":["../../../src/FocusableWrapper/withFocusable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAgB,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAIpE,MAAM,UAAU,aAAa,CAC3B,gBAAwC;IAExC,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;QAE7C,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,IAAI,EAAE,EAAE;YACP,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC,IAAI,CAAC,CAAC;QACrD,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;QAEF,MAAM,UAAU,GAAG;YACjB,sBAAsB;SACvB,CAAC;QAEF,OAAO,oBAAC,gBAAgB,OAAM,KAAW,KAAM,UAAU,GAAI,CAAC;IAChE,CAAC,CAAC;AACJ,CAAC"}

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 export * from './reactive';
 export * from './PromiseState';
 export * from './reactiveContext';
+export * from './FocusableWrapper/FocusableWrapper';
+export * from './FocusableWrapper/withFocusable';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC"}

package/dist/types/FocusableWrapper/FocusableService.d.ts

@@ -0,0 +1,20 @@
+export type FocusableItem = {
+    containerName: string;
+    ref: HTMLElement;
+    itemName: string;
+};
+export type ScrollableContainer = {
+    containerName: string;
+    ref: HTMLElement;
+};
+export declare class FocusableItemsService {
+    private focusableItems;
+    private scrollableContainers;
+    constructor();
+    addItem({ ref, itemName, containerName }: FocusableItem): void;
+    addContainer({ containerName, ref }: ScrollableContainer): void;
+    getItemRef: (itemName: string) => HTMLElement;
+    getContainerRefByItem: (itemName: string) => HTMLElement;
+    getContainerRefByName: (containerName: string) => HTMLElement;
+}
+//# sourceMappingURL=FocusableService.d.ts.map

package/dist/types/FocusableWrapper/FocusableService.d.ts.map

@@ -0,0 +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;CAClB,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,EAAE,aAAa;IAIvD,YAAY,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,EAAE,mBAAmB;IAOxD,UAAU,aAAc,MAAM,iBACuC;IACrE,qBAAqB,aAAc,MAAM,iBAIvC;IACF,qBAAqB,kBAAmB,MAAM,iBAG5C;CACH"}

package/dist/types/FocusableWrapper/FocusableWrapper.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FocusableItem } from './FocusableService';
+export declare const getAnchorParam: () => string | null;
+export type ContextProps = {
+    focusable: {
+        registerScrollableItem: (scrollableItem: FocusableItem) => void;
+    };
+};
+export declare const FocusableContext: React.Context<ContextProps | null>;
+type FocusableWrapperProps = {
+    scrollableRef?: HTMLElement | null;
+    getScrollableTrigger: (callback: () => void) => void;
+    getDoesItemExist: (callback: () => boolean) => void;
+};
+export declare const FocusableWrapper: React.FC<FocusableWrapperProps>;
+export {};
+//# sourceMappingURL=FocusableWrapper.d.ts.map

package/dist/types/FocusableWrapper/FocusableWrapper.d.ts.map

@@ -0,0 +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,CAoE5D,CAAC"}

package/dist/types/FocusableWrapper/scrollAndFocus.d.ts

@@ -0,0 +1,2 @@
+export declare const scrollAndFocus: (scrollableRef: HTMLElement | undefined | null, containerRef: HTMLElement, focusedItemRef: HTMLElement) => void;
+//# sourceMappingURL=scrollAndFocus.d.ts.map

package/dist/types/FocusableWrapper/scrollAndFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollAndFocus.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/scrollAndFocus.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,kBACV,WAAW,GAAG,SAAS,GAAG,IAAI,gBAC/B,WAAW,kBACT,WAAW,KAC1B,IAuBF,CAAC"}

package/dist/types/FocusableWrapper/withFocusable.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ContextProps } from './FocusableWrapper';
+export type FocusableProps = ContextProps['focusable'];
+export declare function withFocusable<P extends FocusableProps>(WrappedComponent: React.ComponentType<P>): React.FC<Omit<P, keyof FocusableProps>>;
+//# sourceMappingURL=withFocusable.d.ts.map

package/dist/types/FocusableWrapper/withFocusable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFocusable.d.ts","sourceRoot":"","sources":["../../../src/FocusableWrapper/withFocusable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAoB,MAAM,oBAAoB,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC;AAEvD,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EACpD,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GACvC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAiBzC"}

package/dist/types/index.d.ts

@@ -1,4 +1,6 @@
 export * from './reactive';
 export * from './PromiseState';
 export * from './reactiveContext';
+export * from './FocusableWrapper/FocusableWrapper';
+export * from './FocusableWrapper/withFocusable';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/bex-utils",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -149,5 +149,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "9c7505c95ff1814a600a4c6617d3d0faae86f1acde57a6452a0be272"
+  "falconPackageHash": "40d8c0583caa143abfdd162aab06ecbcb5b706029f83480663917ef5"
 }