@wix/patterns 1.175.0 → 1.177.0

package/dist/cjs/components/ToolbarItemBox/ToolbarItemBox.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItemBox992053247\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItemBox992053247__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItemBox2049107614\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItemBox2049107614__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/VirtualGridRepeater/TableForceRenderIndexes.js

@@ -28,6 +28,7 @@ const TableForceRenderIndexes = exports.TableForceRenderIndexes = /*#__PURE__*/(
       contents,
       listAttributes
     }) => /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({
+      key: props.id,
       "data-hook": "virtual-inner-element",
       "data-count": state.gridState.itemsToRenderCount,
       ref: el => {

package/dist/cjs/components/VirtualGridRepeater/TableForceRenderIndexes.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_VirtualGridRepeaterContext","_VirtualTableRow","_ForceRenderIndexes","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TableForceRenderIndexes","exports","forwardRef","props","ref","children","style","state","useVirtualGridRepeaterContext","useEffect","scrollHeight","height","createElement","ForceRenderIndexesObserver","ItemElementType","VirtualTableRow","contentsWrapper","contents","listAttributes","_extends2","gridState","itemsToRenderCount","el","current","innerElement","width","undefined","position","display","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../../src/components/VirtualGridRepeater/TableForceRenderIndexes.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  useEffect,\n} from 'react';\nimport { useVirtualGridRepeaterContext } from './VirtualGridRepeaterContext';\nimport { VirtualTableRow } from './VirtualTableRow';\nimport { ForceRenderIndexesObserver } from './ForceRenderIndexes';\n\nexport const TableForceRenderIndexes = forwardRef<\n  HTMLTableSectionElement,\n  { children: ReactElement[] } & HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  const { children, style } = props;\n  const { state } = useVirtualGridRepeaterContext();\n\n  useEffect(() => {\n    state.scrollHeight = style?.height;\n  }, [style?.height]);\n\n  return (\n    <ForceRenderIndexesObserver\n      ItemElementType={VirtualTableRow}\n      contentsWrapper={({ contents, listAttributes }) => (\n        <tbody\n          data-hook=\"virtual-inner-element\"\n          data-count={state.gridState.itemsToRenderCount}\n          ref={(el) => {\n            if (typeof ref === 'function') {\n              ref(el);\n            } else if (ref) {\n              ref.current = el;\n            }\n            state.innerElement = el;\n          }}\n          {...listAttributes}\n          {...props}\n          style={{\n            ...style,\n            width: undefined, // we get the width from react-window but we want it to be auto, so we pass undefined\n            position: 'relative',\n            display: 'flex',\n          }}\n        >\n          {contents}\n        </tbody>\n      )}\n    >\n      {children}\n    </ForceRenderIndexesObserver>\n  );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_VirtualGridRepeaterContext","_VirtualTableRow","_ForceRenderIndexes","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TableForceRenderIndexes","exports","forwardRef","props","ref","children","style","state","useVirtualGridRepeaterContext","useEffect","scrollHeight","height","createElement","ForceRenderIndexesObserver","ItemElementType","VirtualTableRow","contentsWrapper","contents","listAttributes","_extends2","key","id","gridState","itemsToRenderCount","el","current","innerElement","width","undefined","position","display","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../../src/components/VirtualGridRepeater/TableForceRenderIndexes.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  useEffect,\n} from 'react';\nimport { useVirtualGridRepeaterContext } from './VirtualGridRepeaterContext';\nimport { VirtualTableRow } from './VirtualTableRow';\nimport { ForceRenderIndexesObserver } from './ForceRenderIndexes';\n\nexport const TableForceRenderIndexes = forwardRef<\n  HTMLTableSectionElement,\n  { children: ReactElement[] } & HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  const { children, style } = props;\n  const { state } = useVirtualGridRepeaterContext();\n\n  useEffect(() => {\n    state.scrollHeight = style?.height;\n  }, [style?.height]);\n\n  return (\n    <ForceRenderIndexesObserver\n      ItemElementType={VirtualTableRow}\n      contentsWrapper={({ contents, listAttributes }) => (\n        <tbody\n          key={props.id}\n          data-hook=\"virtual-inner-element\"\n          data-count={state.gridState.itemsToRenderCount}\n          ref={(el) => {\n            if (typeof ref === 'function') {\n              ref(el);\n            } else if (ref) {\n              ref.current = el;\n            }\n            state.innerElement = el;\n          }}\n          {...listAttributes}\n          {...props}\n          style={{\n            ...style,\n            width: undefined, // we get the width from react-window but we want it to be auto, so we pass undefined\n            position: 'relative',\n            display: 'flex',\n          }}\n        >\n          {contents}\n        </tbody>\n      )}\n    >\n      {children}\n    </ForceRenderIndexesObserver>\n  );\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/VirtualGridRepeater/VirtualGridRepeaterState.js

@@ -79,6 +79,7 @@ class VirtualGridRepeaterState {
   init({
     container: scrollableContainer
   }) {
+    let animationFrameId;
     if (!scrollableContainer) {
       return;
     }
@@ -102,7 +103,7 @@ class VirtualGridRepeaterState {
         });
         return;
       }
-      requestAnimationFrame((0, _mobx.action)(() => {
+      animationFrameId = window.requestAnimationFrame((0, _mobx.action)(() => {
         if (this.gridRef == null || this.innerElement == null) {
           return;
         }
@@ -128,6 +129,7 @@ class VirtualGridRepeaterState {
     scrollableContainer.addEventListener('scroll', onScroll);
     return () => {
       scrollableContainer.removeEventListener('scroll', onScroll);
+      window.cancelAnimationFrame(animationFrameId);
     };
   }
 }

package/dist/cjs/components/VirtualGridRepeater/VirtualGridRepeaterState.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobx","require","VirtualGridRepeaterState","constructor","params","_defineProperty2","default","index","gridState","itemKeyRecyclerOverride","forceKey","makeObservable","calcGridProps","computed","rowCount","height","width","itemKeyRecycler","toolbar","itemsContentHeight","itemsContentWidth","itemsToRenderCount","columnCount","Math","ceil","rowIndex","columnIndex","_itemKeyRecycler","init","container","scrollableContainer","onScroll","ev","process","env","NODE_ENV","gridRef","_testScroll","scrollTopValue","state","scrollTop","scrollTo","requestAnimationFrame","action","innerElement","top","innerElementTop","getBoundingClientRect","containerTop","offsetTop","max","addEventListener","removeEventListener","exports"],"sources":["../../../../src/components/VirtualGridRepeater/VirtualGridRepeaterState.ts"],"sourcesContent":["import { action, computed, makeObservable } from 'mobx';\nimport { GridState } from './GridState';\nimport { VariableSizeGrid } from 'react-window';\nimport { CSSProperties } from 'react';\n\nexport interface ReactWindowGridRef extends VariableSizeGrid {\n  readonly state: {\n    readonly scrollTop: number;\n  };\n  _getVerticalRangeToRender(): number[];\n  _getHorizontalRangeToRender(): number[];\n  _getItemStyle(rowIndex: number, columnIndex: number): CSSProperties;\n  _getItemStyleCache(...args: any[]): unknown;\n}\n\nexport interface VirtualGridRepeaterStateParams {\n  gridState: GridState;\n}\n\nexport class VirtualGridRepeaterState {\n  readonly gridState;\n\n  gridRef?: ReactWindowGridRef | null;\n\n  scrollHeight?: number | string | null;\n\n  innerElement?: HTMLElement | null = null;\n\n  constructor(params: VirtualGridRepeaterStateParams) {\n    this.gridState = params.gridState;\n\n    makeObservable(this, {\n      calcGridProps: computed,\n      rowCount: computed,\n      height: computed,\n      width: computed,\n      itemKeyRecycler: computed,\n    });\n  }\n\n  get height() {\n    return this.gridState.toolbar.itemsContentHeight;\n  }\n\n  get width() {\n    return this.gridState.itemsContentWidth;\n  }\n\n  get calcGridProps() {\n    return this.gridState.calcGridProps;\n  }\n\n  get rowCount() {\n    const {\n      gridState: { itemsToRenderCount },\n      calcGridProps: { columnCount },\n    } = this;\n\n    return Math.ceil(itemsToRenderCount / columnCount);\n  }\n\n  _itemKeyRecycler = (index: number) => {\n    const {\n      gridState: { itemKeyRecyclerOverride },\n    } = this;\n\n    const forceKey = itemKeyRecyclerOverride?.(index);\n\n    if (forceKey != null) {\n      return forceKey;\n    }\n\n    // https://github.com/wix-private/cairo/pull/1142\n    // const [verticalStartIndex, verticalEndIndex] = this.gridRef?._getVerticalRangeToRender() ?? [];\n    // const verticalCount = verticalEndIndex - verticalStartIndex + 1;\n    // return index % (verticalCount * columnCount);\n\n    return index;\n  };\n\n  get itemKeyRecycler() {\n    const {\n      gridState: { itemKeyRecyclerOverride },\n      calcGridProps: { columnCount },\n    } = this;\n\n    void itemKeyRecyclerOverride;\n\n    return ({\n      rowIndex,\n      columnIndex,\n    }: {\n      columnIndex: number;\n      rowIndex: number;\n    }) => {\n      const index = rowIndex * columnCount + columnIndex;\n      return this._itemKeyRecycler(index);\n    };\n  }\n\n  init({ container: scrollableContainer }: { container?: HTMLElement | null }) {\n    if (!scrollableContainer) {\n      return;\n    }\n\n    const onScroll = (ev: Event) => {\n      if (process.env.NODE_ENV === 'test') {\n        if (this.gridRef == null) {\n          return;\n        }\n\n        const { _testScroll } = (ev ?? {}) as { _testScroll?: 'top' | 'up' };\n\n        let scrollTopValue =\n          this.gridRef.state.scrollTop +\n          this.gridState.toolbar.itemsContentHeight;\n\n        if (_testScroll === 'top') {\n          scrollTopValue = 0;\n        }\n\n        if (_testScroll === 'up') {\n          scrollTopValue = -this.gridState.toolbar.itemsContentHeight;\n        }\n\n        this.gridRef.scrollTo({\n          scrollTop: scrollTopValue,\n        });\n\n        return;\n      }\n\n      requestAnimationFrame(\n        action(() => {\n          if (this.gridRef == null || this.innerElement == null) {\n            return;\n          }\n\n          const { innerElement, gridState } = this;\n          const { top: innerElementTop } = innerElement.getBoundingClientRect();\n          const { containerTop } = gridState.toolbar;\n\n          if (containerTop == null) {\n            return;\n          }\n\n          const offsetTop = innerElementTop - containerTop;\n\n          this.gridRef.scrollTo({\n            scrollTop: Math.max(-offsetTop, 0),\n          });\n        }),\n      );\n    };\n\n    scrollableContainer.addEventListener('scroll', onScroll);\n\n    return () => {\n      scrollableContainer.removeEventListener('scroll', onScroll);\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_mobx","require","VirtualGridRepeaterState","constructor","params","_defineProperty2","default","index","gridState","itemKeyRecyclerOverride","forceKey","makeObservable","calcGridProps","computed","rowCount","height","width","itemKeyRecycler","toolbar","itemsContentHeight","itemsContentWidth","itemsToRenderCount","columnCount","Math","ceil","rowIndex","columnIndex","_itemKeyRecycler","init","container","scrollableContainer","animationFrameId","onScroll","ev","process","env","NODE_ENV","gridRef","_testScroll","scrollTopValue","state","scrollTop","scrollTo","window","requestAnimationFrame","action","innerElement","top","innerElementTop","getBoundingClientRect","containerTop","offsetTop","max","addEventListener","removeEventListener","cancelAnimationFrame","exports"],"sources":["../../../../src/components/VirtualGridRepeater/VirtualGridRepeaterState.ts"],"sourcesContent":["import { action, computed, makeObservable } from 'mobx';\nimport { GridState } from './GridState';\nimport { VariableSizeGrid } from 'react-window';\nimport { CSSProperties } from 'react';\n\nexport interface ReactWindowGridRef extends VariableSizeGrid {\n  readonly state: {\n    readonly scrollTop: number;\n  };\n  _getVerticalRangeToRender(): number[];\n  _getHorizontalRangeToRender(): number[];\n  _getItemStyle(rowIndex: number, columnIndex: number): CSSProperties;\n  _getItemStyleCache(...args: any[]): unknown;\n}\n\nexport interface VirtualGridRepeaterStateParams {\n  gridState: GridState;\n}\n\nexport class VirtualGridRepeaterState {\n  readonly gridState;\n\n  gridRef?: ReactWindowGridRef | null;\n\n  scrollHeight?: number | string | null;\n\n  innerElement?: HTMLElement | null = null;\n\n  constructor(params: VirtualGridRepeaterStateParams) {\n    this.gridState = params.gridState;\n\n    makeObservable(this, {\n      calcGridProps: computed,\n      rowCount: computed,\n      height: computed,\n      width: computed,\n      itemKeyRecycler: computed,\n    });\n  }\n\n  get height() {\n    return this.gridState.toolbar.itemsContentHeight;\n  }\n\n  get width() {\n    return this.gridState.itemsContentWidth;\n  }\n\n  get calcGridProps() {\n    return this.gridState.calcGridProps;\n  }\n\n  get rowCount() {\n    const {\n      gridState: { itemsToRenderCount },\n      calcGridProps: { columnCount },\n    } = this;\n\n    return Math.ceil(itemsToRenderCount / columnCount);\n  }\n\n  _itemKeyRecycler = (index: number) => {\n    const {\n      gridState: { itemKeyRecyclerOverride },\n    } = this;\n\n    const forceKey = itemKeyRecyclerOverride?.(index);\n\n    if (forceKey != null) {\n      return forceKey;\n    }\n\n    // https://github.com/wix-private/cairo/pull/1142\n    // const [verticalStartIndex, verticalEndIndex] = this.gridRef?._getVerticalRangeToRender() ?? [];\n    // const verticalCount = verticalEndIndex - verticalStartIndex + 1;\n    // return index % (verticalCount * columnCount);\n\n    return index;\n  };\n\n  get itemKeyRecycler() {\n    const {\n      gridState: { itemKeyRecyclerOverride },\n      calcGridProps: { columnCount },\n    } = this;\n\n    void itemKeyRecyclerOverride;\n\n    return ({\n      rowIndex,\n      columnIndex,\n    }: {\n      columnIndex: number;\n      rowIndex: number;\n    }) => {\n      const index = rowIndex * columnCount + columnIndex;\n      return this._itemKeyRecycler(index);\n    };\n  }\n\n  init({ container: scrollableContainer }: { container?: HTMLElement | null }) {\n    let animationFrameId: number;\n    if (!scrollableContainer) {\n      return;\n    }\n\n    const onScroll = (ev: Event) => {\n      if (process.env.NODE_ENV === 'test') {\n        if (this.gridRef == null) {\n          return;\n        }\n\n        const { _testScroll } = (ev ?? {}) as { _testScroll?: 'top' | 'up' };\n\n        let scrollTopValue =\n          this.gridRef.state.scrollTop +\n          this.gridState.toolbar.itemsContentHeight;\n\n        if (_testScroll === 'top') {\n          scrollTopValue = 0;\n        }\n\n        if (_testScroll === 'up') {\n          scrollTopValue = -this.gridState.toolbar.itemsContentHeight;\n        }\n\n        this.gridRef.scrollTo({\n          scrollTop: scrollTopValue,\n        });\n\n        return;\n      }\n\n      animationFrameId = window.requestAnimationFrame(\n        action(() => {\n          if (this.gridRef == null || this.innerElement == null) {\n            return;\n          }\n\n          const { innerElement, gridState } = this;\n          const { top: innerElementTop } = innerElement.getBoundingClientRect();\n          const { containerTop } = gridState.toolbar;\n\n          if (containerTop == null) {\n            return;\n          }\n\n          const offsetTop = innerElementTop - containerTop;\n\n          this.gridRef.scrollTo({\n            scrollTop: Math.max(-offsetTop, 0),\n          });\n        }),\n      );\n    };\n\n    scrollableContainer.addEventListener('scroll', onScroll);\n\n    return () => {\n      scrollableContainer.removeEventListener('scroll', onScroll);\n      window.cancelAnimationFrame(animationFrameId);\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/VirtualGridRepeater/VirtualInternalMemoItem.js

@@ -19,11 +19,11 @@ const _VirtualInternalMemoItem = ({
   (0, _react.useEffect)(() => {
     if (!ready) {
       // An optimization for rendering the item lazily when scrolling fast (this is experimental and might be changed)
-      const requestId = requestAnimationFrame(() => {
+      const id = window.requestAnimationFrame(() => {
         setReady(true);
       });
       return () => {
-        cancelAnimationFrame(requestId);
+        window.cancelAnimationFrame(id);
       };
     }
     return undefined;

package/dist/cjs/components/VirtualGridRepeater/VirtualInternalMemoItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_mobx","_mobxReactLite","_VirtualInternalMemoItem","index","rowIndex","columnIndex","renderItem","itemKey","state","style","timeoutProps","ready","setReady","useState","runInAction","gridState","toolbar","isScrolling","useEffect","requestId","requestAnimationFrame","cancelAnimationFrame","undefined","_itemKeyRecycler","index2d","VirtualInternalMemoItem","exports","memo","observer","a","b","in"],"sources":["../../../../src/components/VirtualGridRepeater/VirtualInternalMemoItem.tsx"],"sourcesContent":["import { CSSProperties, memo, useEffect, useState } from 'react';\nimport { RenderItem } from './RenderItem';\nimport { VirtualGridRepeaterState } from './VirtualGridRepeaterState';\nimport { TimeoutProps } from 'react-transition-group/Transition';\nimport { runInAction } from 'mobx';\nimport { observer } from 'mobx-react-lite';\n\nexport type VirtualInternalMemoItemProps = {\n  index: number;\n  rowIndex: number;\n  columnIndex: number;\n  renderItem: RenderItem;\n  state: VirtualGridRepeaterState;\n  itemKey: (params: {\n    columnIndex: number;\n    rowIndex: number;\n  }) => string | number;\n  style?: CSSProperties;\n} & Partial<TimeoutProps<undefined>>;\n\nconst _VirtualInternalMemoItem = ({\n  index,\n  rowIndex,\n  columnIndex,\n  renderItem,\n  itemKey,\n  state,\n  style,\n  ...timeoutProps\n}: VirtualInternalMemoItemProps) => {\n  const [ready, setReady] = useState(() =>\n    runInAction(() => !state.gridState.toolbar.isScrolling),\n  );\n\n  useEffect(() => {\n    if (!ready) {\n      // An optimization for rendering the item lazily when scrolling fast (this is experimental and might be changed)\n      const requestId = requestAnimationFrame(() => {\n        setReady(true);\n      });\n\n      return () => {\n        cancelAnimationFrame(requestId);\n      };\n    }\n\n    return undefined;\n  }, [ready]);\n\n  return renderItem(index, {\n    timeoutProps,\n    style,\n    itemKey: state._itemKeyRecycler,\n    index2d: { rowIndex, columnIndex },\n  });\n};\n\nexport const VirtualInternalMemoItem = memo(\n  observer(_VirtualInternalMemoItem),\n  (a, b) =>\n    a.index === b.index &&\n    a.in === b.in &&\n    a.renderItem === b.renderItem &&\n    a.itemKey === b.itemKey &&\n    a.style === b.style,\n);\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAeA,MAAMG,wBAAwB,GAAGA,CAAC;EAChCC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,UAAU;EACVC,OAAO;EACPC,KAAK;EACLC,KAAK;EACL,GAAGC;AACyB,CAAC,KAAK;EAClC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,MACjC,IAAAC,iBAAW,EAAC,MAAM,CAACN,KAAK,CAACO,SAAS,CAACC,OAAO,CAACC,WAAW,CACxD,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAI,CAACP,KAAK,EAAE;MACV;MACA,MAAMQ,SAAS,GAAGC,qBAAqB,CAAC,MAAM;QAC5CR,QAAQ,CAAC,IAAI,CAAC;MAChB,CAAC,CAAC;MAEF,OAAO,MAAM;QACXS,oBAAoB,CAACF,SAAS,CAAC;MACjC,CAAC;IACH;IAEA,OAAOG,SAAS;EAClB,CAAC,EAAE,CAACX,KAAK,CAAC,CAAC;EAEX,OAAOL,UAAU,CAACH,KAAK,EAAE;IACvBO,YAAY;IACZD,KAAK;IACLF,OAAO,EAAEC,KAAK,CAACe,gBAAgB;IAC/BC,OAAO,EAAE;MAAEpB,QAAQ;MAAEC;IAAY;EACnC,CAAC,CAAC;AACJ,CAAC;AAEM,MAAMoB,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,gBAAG,IAAAE,WAAI,EACzC,IAAAC,uBAAQ,EAAC1B,wBAAwB,CAAC,EAClC,CAAC2B,CAAC,EAAEC,CAAC,KACHD,CAAC,CAAC1B,KAAK,KAAK2B,CAAC,CAAC3B,KAAK,IACnB0B,CAAC,CAACE,EAAE,KAAKD,CAAC,CAACC,EAAE,IACbF,CAAC,CAACvB,UAAU,KAAKwB,CAAC,CAACxB,UAAU,IAC7BuB,CAAC,CAACtB,OAAO,KAAKuB,CAAC,CAACvB,OAAO,IACvBsB,CAAC,CAACpB,KAAK,KAAKqB,CAAC,CAACrB,KAClB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","require","_mobx","_mobxReactLite","_VirtualInternalMemoItem","index","rowIndex","columnIndex","renderItem","itemKey","state","style","timeoutProps","ready","setReady","useState","runInAction","gridState","toolbar","isScrolling","useEffect","id","window","requestAnimationFrame","cancelAnimationFrame","undefined","_itemKeyRecycler","index2d","VirtualInternalMemoItem","exports","memo","observer","a","b","in"],"sources":["../../../../src/components/VirtualGridRepeater/VirtualInternalMemoItem.tsx"],"sourcesContent":["import { CSSProperties, memo, useEffect, useState } from 'react';\nimport { RenderItem } from './RenderItem';\nimport { VirtualGridRepeaterState } from './VirtualGridRepeaterState';\nimport { TimeoutProps } from 'react-transition-group/Transition';\nimport { runInAction } from 'mobx';\nimport { observer } from 'mobx-react-lite';\n\nexport type VirtualInternalMemoItemProps = {\n  index: number;\n  rowIndex: number;\n  columnIndex: number;\n  renderItem: RenderItem;\n  state: VirtualGridRepeaterState;\n  itemKey: (params: {\n    columnIndex: number;\n    rowIndex: number;\n  }) => string | number;\n  style?: CSSProperties;\n} & Partial<TimeoutProps<undefined>>;\n\nconst _VirtualInternalMemoItem = ({\n  index,\n  rowIndex,\n  columnIndex,\n  renderItem,\n  itemKey,\n  state,\n  style,\n  ...timeoutProps\n}: VirtualInternalMemoItemProps) => {\n  const [ready, setReady] = useState(() =>\n    runInAction(() => !state.gridState.toolbar.isScrolling),\n  );\n\n  useEffect(() => {\n    if (!ready) {\n      // An optimization for rendering the item lazily when scrolling fast (this is experimental and might be changed)\n      const id = window.requestAnimationFrame(() => {\n        setReady(true);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(id);\n      };\n    }\n\n    return undefined;\n  }, [ready]);\n\n  return renderItem(index, {\n    timeoutProps,\n    style,\n    itemKey: state._itemKeyRecycler,\n    index2d: { rowIndex, columnIndex },\n  });\n};\n\nexport const VirtualInternalMemoItem = memo(\n  observer(_VirtualInternalMemoItem),\n  (a, b) =>\n    a.index === b.index &&\n    a.in === b.in &&\n    a.renderItem === b.renderItem &&\n    a.itemKey === b.itemKey &&\n    a.style === b.style,\n);\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAeA,MAAMG,wBAAwB,GAAGA,CAAC;EAChCC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,UAAU;EACVC,OAAO;EACPC,KAAK;EACLC,KAAK;EACL,GAAGC;AACyB,CAAC,KAAK;EAClC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,MACjC,IAAAC,iBAAW,EAAC,MAAM,CAACN,KAAK,CAACO,SAAS,CAACC,OAAO,CAACC,WAAW,CACxD,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAI,CAACP,KAAK,EAAE;MACV;MACA,MAAMQ,EAAE,GAAGC,MAAM,CAACC,qBAAqB,CAAC,MAAM;QAC5CT,QAAQ,CAAC,IAAI,CAAC;MAChB,CAAC,CAAC;MAEF,OAAO,MAAM;QACXQ,MAAM,CAACE,oBAAoB,CAACH,EAAE,CAAC;MACjC,CAAC;IACH;IAEA,OAAOI,SAAS;EAClB,CAAC,EAAE,CAACZ,KAAK,CAAC,CAAC;EAEX,OAAOL,UAAU,CAACH,KAAK,EAAE;IACvBO,YAAY;IACZD,KAAK;IACLF,OAAO,EAAEC,KAAK,CAACgB,gBAAgB;IAC/BC,OAAO,EAAE;MAAErB,QAAQ;MAAEC;IAAY;EACnC,CAAC,CAAC;AACJ,CAAC;AAEM,MAAMqB,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,gBAAG,IAAAE,WAAI,EACzC,IAAAC,uBAAQ,EAAC3B,wBAAwB,CAAC,EAClC,CAAC4B,CAAC,EAAEC,CAAC,KACHD,CAAC,CAAC3B,KAAK,KAAK4B,CAAC,CAAC5B,KAAK,IACnB2B,CAAC,CAACE,EAAE,KAAKD,CAAC,CAACC,EAAE,IACbF,CAAC,CAACxB,UAAU,KAAKyB,CAAC,CAACzB,UAAU,IAC7BwB,CAAC,CAACvB,OAAO,KAAKwB,CAAC,CAACxB,OAAO,IACvBuB,CAAC,CAACrB,KAAK,KAAKsB,CAAC,CAACtB,KAClB,CAAC","ignoreList":[]}

package/dist/cjs/components/VirtualGridRepeater/VirtualTableRowMutated.js

@@ -15,7 +15,7 @@ function VirtualTableRowMutated(props) {
   } = props;
   const gridState = (0, _VirtualGridStateContext.useVirtualGridStateContext)();
   const element = children[index];
-  const rowRef = (0, _react.useRef)(null);
+  const rowRef = (0, _react.useRef)();
   const [state] = (0, _react.useState)(() => new _VirtualTableRowMutatedState.VirtualTableRowMutatedState({
     rowRef,
     state: gridState,

package/dist/cjs/components/VirtualGridRepeater/VirtualTableRowMutated.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_VirtualGridStateContext","_VirtualTableRowMutatedState","VirtualTableRowMutated","props","children","index","style","itemKey","rowIndex","gridState","useVirtualGridStateContext","element","rowRef","useRef","state","useState","VirtualTableRowMutatedState","useEffect","_measureRowContentsHeight","init","ref","useCallback","el","current","cloneElement","rowProps","process","env","NODE_ENV","undefined"],"sources":["../../../../src/components/VirtualGridRepeater/VirtualTableRowMutated.tsx"],"sourcesContent":["import {\n  cloneElement,\n  CSSProperties,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useVirtualGridStateContext } from './VirtualGridStateContext';\nimport { VirtualTableRowMutatedState } from './VirtualTableRowMutatedState';\n\nexport function VirtualTableRowMutated(props: {\n  index: number;\n  style?: CSSProperties;\n  itemKey?: (index: number) => number | string;\n  rowIndex?: number;\n  children: ReactElement[];\n}) {\n  const { children, index, style, itemKey, rowIndex } = props;\n\n  const gridState = useVirtualGridStateContext();\n\n  const element = children[index];\n\n  const rowRef = useRef<HTMLTableRowElement | null | undefined>(null);\n\n  const [state] = useState(\n    () =>\n      new VirtualTableRowMutatedState({\n        rowRef,\n        state: gridState,\n        itemKey,\n        index,\n        rowIndex,\n      }),\n  );\n\n  useEffect(() => {\n    state.index = index;\n  }, [index]);\n\n  useEffect(() => {\n    state.rowIndex = rowIndex;\n  }, [rowIndex]);\n\n  useEffect(() => {\n    state.itemKey = itemKey;\n  }, [itemKey]);\n\n  useEffect(() => {\n    state._measureRowContentsHeight();\n  }, [rowRef, rowIndex]);\n\n  useEffect(() => state.init(), []);\n\n  const ref = useCallback((el: HTMLTableRowElement | null | undefined) => {\n    rowRef.current = el;\n  }, []);\n\n  if (element == null) {\n    return null;\n  }\n\n  return cloneElement(element, {\n    style: { ...(element.props.style ?? {}), ...style },\n    rowProps: {\n      ...(element.props.rowProps ?? {}),\n      'data-key':\n        process.env.NODE_ENV === 'development' ? itemKey?.(index) : undefined,\n      'data-index': `index-${index}`,\n      ref,\n    },\n  });\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AASA,IAAAC,wBAAA,GAAAD,OAAA;AACA,IAAAE,4BAAA,GAAAF,OAAA;AAEO,SAASG,sBAAsBA,CAACC,KAMtC,EAAE;EACD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAE3D,MAAMM,SAAS,GAAG,IAAAC,mDAA0B,EAAC,CAAC;EAE9C,MAAMC,OAAO,GAAGP,QAAQ,CAACC,KAAK,CAAC;EAE/B,MAAMO,MAAM,GAAG,IAAAC,aAAM,EAAyC,IAAI,CAAC;EAEnE,MAAM,CAACC,KAAK,CAAC,GAAG,IAAAC,eAAQ,EACtB,MACE,IAAIC,wDAA2B,CAAC;IAC9BJ,MAAM;IACNE,KAAK,EAAEL,SAAS;IAChBF,OAAO;IACPF,KAAK;IACLG;EACF,CAAC,CACL,CAAC;EAED,IAAAS,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACT,KAAK,GAAGA,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAAY,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACN,QAAQ,GAAGA,QAAQ;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAAS,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACP,OAAO,GAAGA,OAAO;EACzB,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAAU,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACI,yBAAyB,CAAC,CAAC;EACnC,CAAC,EAAE,CAACN,MAAM,EAAEJ,QAAQ,CAAC,CAAC;EAEtB,IAAAS,gBAAS,EAAC,MAAMH,KAAK,CAACK,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;EAEjC,MAAMC,GAAG,GAAG,IAAAC,kBAAW,EAAEC,EAA0C,IAAK;IACtEV,MAAM,CAACW,OAAO,GAAGD,EAAE;EACrB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIX,OAAO,IAAI,IAAI,EAAE;IACnB,OAAO,IAAI;EACb;EAEA,oBAAO,IAAAa,mBAAY,EAACb,OAAO,EAAE;IAC3BL,KAAK,EAAE;MAAE,IAAIK,OAAO,CAACR,KAAK,CAACG,KAAK,IAAI,CAAC,CAAC,CAAC;MAAE,GAAGA;IAAM,CAAC;IACnDmB,QAAQ,EAAE;MACR,IAAId,OAAO,CAACR,KAAK,CAACsB,QAAQ,IAAI,CAAC,CAAC,CAAC;MACjC,UAAU,EACRC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,GAAGrB,OAAO,oBAAPA,OAAO,CAAGF,KAAK,CAAC,GAAGwB,SAAS;MACvE,YAAY,EAAE,SAASxB,KAAK,EAAE;MAC9Be;IACF;EACF,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["_react","require","_VirtualGridStateContext","_VirtualTableRowMutatedState","VirtualTableRowMutated","props","children","index","style","itemKey","rowIndex","gridState","useVirtualGridStateContext","element","rowRef","useRef","state","useState","VirtualTableRowMutatedState","useEffect","_measureRowContentsHeight","init","ref","useCallback","el","current","cloneElement","rowProps","process","env","NODE_ENV","undefined"],"sources":["../../../../src/components/VirtualGridRepeater/VirtualTableRowMutated.tsx"],"sourcesContent":["import {\n  cloneElement,\n  CSSProperties,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useVirtualGridStateContext } from './VirtualGridStateContext';\nimport { VirtualTableRowMutatedState } from './VirtualTableRowMutatedState';\n\nexport function VirtualTableRowMutated(props: {\n  index: number;\n  style?: CSSProperties;\n  itemKey?: (index: number) => number | string;\n  rowIndex?: number;\n  children: ReactElement[];\n}) {\n  const { children, index, style, itemKey, rowIndex } = props;\n\n  const gridState = useVirtualGridStateContext();\n\n  const element = children[index];\n\n  const rowRef = useRef<HTMLTableRowElement>();\n\n  const [state] = useState(\n    () =>\n      new VirtualTableRowMutatedState({\n        rowRef,\n        state: gridState,\n        itemKey,\n        index,\n        rowIndex,\n      }),\n  );\n\n  useEffect(() => {\n    state.index = index;\n  }, [index]);\n\n  useEffect(() => {\n    state.rowIndex = rowIndex;\n  }, [rowIndex]);\n\n  useEffect(() => {\n    state.itemKey = itemKey;\n  }, [itemKey]);\n\n  useEffect(() => {\n    state._measureRowContentsHeight();\n  }, [rowRef, rowIndex]);\n\n  useEffect(() => state.init(), []);\n\n  const ref = useCallback((el: HTMLTableRowElement | undefined) => {\n    rowRef.current = el;\n  }, []);\n\n  if (element == null) {\n    return null;\n  }\n\n  return cloneElement(element, {\n    style: { ...(element.props.style ?? {}), ...style },\n    rowProps: {\n      ...(element.props.rowProps ?? {}),\n      'data-key':\n        process.env.NODE_ENV === 'development' ? itemKey?.(index) : undefined,\n      'data-index': `index-${index}`,\n      ref,\n    },\n  });\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AASA,IAAAC,wBAAA,GAAAD,OAAA;AACA,IAAAE,4BAAA,GAAAF,OAAA;AAEO,SAASG,sBAAsBA,CAACC,KAMtC,EAAE;EACD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAE3D,MAAMM,SAAS,GAAG,IAAAC,mDAA0B,EAAC,CAAC;EAE9C,MAAMC,OAAO,GAAGP,QAAQ,CAACC,KAAK,CAAC;EAE/B,MAAMO,MAAM,GAAG,IAAAC,aAAM,EAAsB,CAAC;EAE5C,MAAM,CAACC,KAAK,CAAC,GAAG,IAAAC,eAAQ,EACtB,MACE,IAAIC,wDAA2B,CAAC;IAC9BJ,MAAM;IACNE,KAAK,EAAEL,SAAS;IAChBF,OAAO;IACPF,KAAK;IACLG;EACF,CAAC,CACL,CAAC;EAED,IAAAS,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACT,KAAK,GAAGA,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAAY,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACN,QAAQ,GAAGA,QAAQ;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAAS,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACP,OAAO,GAAGA,OAAO;EACzB,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAAU,gBAAS,EAAC,MAAM;IACdH,KAAK,CAACI,yBAAyB,CAAC,CAAC;EACnC,CAAC,EAAE,CAACN,MAAM,EAAEJ,QAAQ,CAAC,CAAC;EAEtB,IAAAS,gBAAS,EAAC,MAAMH,KAAK,CAACK,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;EAEjC,MAAMC,GAAG,GAAG,IAAAC,kBAAW,EAAEC,EAAmC,IAAK;IAC/DV,MAAM,CAACW,OAAO,GAAGD,EAAE;EACrB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIX,OAAO,IAAI,IAAI,EAAE;IACnB,OAAO,IAAI;EACb;EAEA,oBAAO,IAAAa,mBAAY,EAACb,OAAO,EAAE;IAC3BL,KAAK,EAAE;MAAE,IAAIK,OAAO,CAACR,KAAK,CAACG,KAAK,IAAI,CAAC,CAAC,CAAC;MAAE,GAAGA;IAAM,CAAC;IACnDmB,QAAQ,EAAE;MACR,IAAId,OAAO,CAACR,KAAK,CAACsB,QAAQ,IAAI,CAAC,CAAC,CAAC;MACjC,UAAU,EACRC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,GAAGrB,OAAO,oBAAPA,OAAO,CAAGF,KAAK,CAAC,GAAGwB,SAAS;MACvE,YAAY,EAAE,SAASxB,KAAK,EAAE;MAC9Be;IACF;EACF,CAAC,CAAC;AACJ","ignoreList":[]}

package/dist/cjs/components/WixPatternsModalsContainer.js

@@ -34,14 +34,14 @@ function WixPatternsModalsContainer(props) {
       top: null
     };
     const setTop = lodash.throttle(() => {
-      const animationFrameId = window.requestAnimationFrame(() => {
+      const id = window.requestAnimationFrame(() => {
         setRender({
           top: top ?? container.getBoundingClientRect().top,
           left: container.getBoundingClientRect().right,
           anchor: (anchorRef == null ? void 0 : anchorRef.current) ?? container
         });
       });
-      disposers.push(() => window.cancelAnimationFrame(animationFrameId));
+      disposers.push(() => window.cancelAnimationFrame(id));
     }, 300);
     const disposers = [(0, _bexCore.addResizeObserver)(container, setTop)];
     setTop();

package/dist/cjs/components/WixPatternsModalsContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_SidePanelModal","require","_react","_interopRequireWildcard","_reactDom","_react2","_bexCore","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","WixPatternsModalsContainer","props","state","rootRef","anchorRef","zIndex","appendModalsToBody","lodash","useWixPatternsContainer","render","setRender","useState","useEffect","container","top","document","body","current","setTop","throttle","animationFrameId","window","requestAnimationFrame","getBoundingClientRect","left","right","anchor","disposers","push","cancelAnimationFrame","addResizeObserver","cancel","forEach","d","modalsContainerStyle","useMemo","position","child","createElement","style","__self","__source","fileName","lineNumber","columnNumber","SidePanelModal","createPortal"],"sources":["../../../src/components/WixPatternsModalsContainer.tsx"],"sourcesContent":["import { SidePanelModal } from './SidePanelModal';\nimport React, {\n  CSSProperties,\n  RefObject,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { addResizeObserver } from '@wix/bex-core';\nimport { SidePanelsState } from '../state/SidePanelsState';\n\nexport interface WixPatternsModalsContainerProps {\n  rootRef?: RefObject<HTMLElement | null | undefined>;\n  anchorRef?: RefObject<HTMLElement | null | undefined>;\n  zIndex?: CSSProperties['zIndex'];\n  state: SidePanelsState;\n}\n\nexport function WixPatternsModalsContainer(\n  props: WixPatternsModalsContainerProps,\n) {\n  const { state, rootRef, anchorRef, zIndex = 1 } = props;\n\n  const { appendModalsToBody, lodash } = useWixPatternsContainer();\n\n  const [render, setRender] = useState<{\n    top?: number;\n    left?: number;\n    anchor?: HTMLElement | null;\n  }>({});\n\n  useEffect(() => {\n    const { container, top } = appendModalsToBody\n      ? {\n          container: document.body,\n          top: 0,\n        }\n      : {\n          container: rootRef?.current ?? document.body,\n          top: null,\n        };\n\n    const setTop = lodash.throttle(() => {\n      const animationFrameId = window.requestAnimationFrame(() => {\n        setRender({\n          top: top ?? container.getBoundingClientRect().top,\n          left: container.getBoundingClientRect().right,\n          anchor: anchorRef?.current ?? container,\n        });\n      });\n\n      disposers.push(() => window.cancelAnimationFrame(animationFrameId));\n    }, 300);\n\n    const disposers = [addResizeObserver(container, setTop)];\n\n    setTop();\n\n    return () => {\n      setTop.cancel();\n      disposers.forEach((d) => d?.());\n    };\n  }, []);\n\n  // creates a new stacking context\n  const modalsContainerStyle = useMemo(\n    () => ({\n      position: 'relative' as const,\n      zIndex,\n    }),\n    [zIndex],\n  );\n\n  let child = (\n    <div style={modalsContainerStyle} data-hook=\"cairo-modals-container\">\n      {render.top != null && (\n        <SidePanelModal state={state} top={render.top} left={render.left} />\n      )}\n    </div>\n  );\n\n  if (render.anchor == null) {\n    return null;\n  }\n\n  child = createPortal(child, render.anchor);\n\n  return child;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_SidePanelModal","require","_react","_interopRequireWildcard","_reactDom","_react2","_bexCore","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","WixPatternsModalsContainer","props","state","rootRef","anchorRef","zIndex","appendModalsToBody","lodash","useWixPatternsContainer","render","setRender","useState","useEffect","container","top","document","body","current","setTop","throttle","id","window","requestAnimationFrame","getBoundingClientRect","left","right","anchor","disposers","push","cancelAnimationFrame","addResizeObserver","cancel","forEach","d","modalsContainerStyle","useMemo","position","child","createElement","style","__self","__source","fileName","lineNumber","columnNumber","SidePanelModal","createPortal"],"sources":["../../../src/components/WixPatternsModalsContainer.tsx"],"sourcesContent":["import { SidePanelModal } from './SidePanelModal';\nimport React, {\n  CSSProperties,\n  RefObject,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { addResizeObserver } from '@wix/bex-core';\nimport { SidePanelsState } from '../state/SidePanelsState';\n\nexport interface WixPatternsModalsContainerProps {\n  rootRef?: RefObject<HTMLElement | null | undefined>;\n  anchorRef?: RefObject<HTMLElement | null | undefined>;\n  zIndex?: CSSProperties['zIndex'];\n  state: SidePanelsState;\n}\n\nexport function WixPatternsModalsContainer(\n  props: WixPatternsModalsContainerProps,\n) {\n  const { state, rootRef, anchorRef, zIndex = 1 } = props;\n\n  const { appendModalsToBody, lodash } = useWixPatternsContainer();\n\n  const [render, setRender] = useState<{\n    top?: number;\n    left?: number;\n    anchor?: HTMLElement | null;\n  }>({});\n\n  useEffect(() => {\n    const { container, top } = appendModalsToBody\n      ? {\n          container: document.body,\n          top: 0,\n        }\n      : {\n          container: rootRef?.current ?? document.body,\n          top: null,\n        };\n\n    const setTop = lodash.throttle(() => {\n      const id = window.requestAnimationFrame(() => {\n        setRender({\n          top: top ?? container.getBoundingClientRect().top,\n          left: container.getBoundingClientRect().right,\n          anchor: anchorRef?.current ?? container,\n        });\n      });\n\n      disposers.push(() => window.cancelAnimationFrame(id));\n    }, 300);\n\n    const disposers = [addResizeObserver(container, setTop)];\n\n    setTop();\n\n    return () => {\n      setTop.cancel();\n      disposers.forEach((d) => d?.());\n    };\n  }, []);\n\n  // creates a new stacking context\n  const modalsContainerStyle = useMemo(\n    () => ({\n      position: 'relative' as const,\n      zIndex,\n    }),\n    [zIndex],\n  );\n\n  let child = (\n    <div style={modalsContainerStyle} data-hook=\"cairo-modals-container\">\n      {render.top != null && (\n        <SidePanelModal state={state} top={render.top} left={render.left} />\n      )}\n    </div>\n  );\n\n  if (render.anchor == null) {\n    return null;\n  }\n\n  child = createPortal(child, render.anchor);\n\n  return child;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/common.st.css.js

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "common2538631654";
+var _namespace_ = "common3313040118";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "common2538631654__root",
-  "column": "common2538631654__column",
-  "fullHeight": "common2538631654__fullHeight"
+  "root": "common3313040118__root",
+  "column": "common3313040118__column",
+  "fullHeight": "common3313040118__fullHeight"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/common.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../src/components/common.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"common2538631654\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"common2538631654__root\",\"column\":\"common2538631654__column\",\"fullHeight\":\"common2538631654__fullHeight\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,wBAAwB;EAAC,QAAQ,EAAC,0BAA0B;EAAC,YAAY,EAAC;AAA8B,CAAC;AAC/H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../src/components/common.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"common3313040118\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"common3313040118__root\",\"column\":\"common3313040118__column\",\"fullHeight\":\"common3313040118__fullHeight\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,wBAAwB;EAAC,QAAQ,EAAC,0BAA0B;EAAC,YAAY,EAAC;AAA8B,CAAC;AAC/H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/useCollectionReachBottom.js

@@ -10,7 +10,7 @@ function useCollectionReachBottom({
   containerRef,
   scrollMoreAlways
 }) {
-  const targetRef = (0, _react.useRef)();
+  const targetRef = (0, _react.useRef)(null);
   const {
     lodash
   } = (0, _react2.useWixPatternsContainer)();

package/dist/cjs/components/useCollectionReachBottom.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_CollectionReachBottom","_react2","useCollectionReachBottom","collection","containerRef","scrollMoreAlways","targetRef","useRef","lodash","useWixPatternsContainer","result","keyedItems","collectionReachBottom","useState","CollectionReachBottom","useEffect","current","reachBottom","container","target","subscribe","unsubscribe","_containerRef$current","process","env","NODE_ENV","scrollHeight","triggerListenerIfReached","length"],"sources":["../../../src/components/useCollectionReachBottom.tsx"],"sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\nimport { CollectionReachBottom } from '../state/CollectionReachBottom';\nimport { ScrollableWindow } from '../reach-bottom-listener';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\n\nexport interface UseCollectionReachBottomParams<\n  T,\n  F extends FiltersMap = FiltersMap,\n> {\n  collection: CollectionState<T, F>;\n  containerRef?: RefObject<ScrollableWindow | null | undefined>;\n  scrollMoreAlways?: boolean;\n}\n\nexport function useCollectionReachBottom<T, F extends FiltersMap = FiltersMap>({\n  collection,\n  containerRef,\n  scrollMoreAlways,\n}: UseCollectionReachBottomParams<T, F>) {\n  const targetRef = useRef<HTMLElement | null>();\n\n  const { lodash } = useWixPatternsContainer();\n\n  const {\n    result: { keyedItems },\n  } = collection;\n\n  const [collectionReachBottom] = useState(\n    () =>\n      new CollectionReachBottom({\n        collection,\n        lodash,\n      }),\n  );\n\n  useEffect(() => {\n    if (containerRef?.current == null) {\n      return;\n    }\n\n    collectionReachBottom.reachBottom.container = containerRef?.current;\n    collectionReachBottom.reachBottom.target = targetRef?.current;\n\n    collectionReachBottom.subscribe();\n    return () => {\n      collectionReachBottom.reachBottom.target = null;\n      collectionReachBottom.unsubscribe();\n    };\n  }, []);\n\n  // Check if should load more items (scrollable container is not filled yet) after new data has been rendered\n  useEffect(() => {\n    // In jsdom element dimensions are always 0, so calculations inside `CollectionReachBottom` are not relevant.\n    if (process.env.NODE_ENV === 'test') {\n      return;\n    }\n    if (scrollMoreAlways || containerRef?.current?.scrollHeight) {\n      collectionReachBottom.triggerListenerIfReached();\n    }\n  }, [keyedItems.length]);\n\n  return { containerRef, targetRef };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAGA,IAAAE,OAAA,GAAAF,OAAA;AAWO,SAASG,wBAAwBA,CAAuC;EAC7EC,UAAU;EACVC,YAAY;EACZC;AACoC,CAAC,EAAE;EACvC,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAqB,CAAC;EAE9C,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAE5C,MAAM;IACJC,MAAM,EAAE;MAAEC;IAAW;EACvB,CAAC,GAAGR,UAAU;EAEd,MAAM,CAACS,qBAAqB,CAAC,GAAG,IAAAC,eAAQ,EACtC,MACE,IAAIC,4CAAqB,CAAC;IACxBX,UAAU;IACVK;EACF,CAAC,CACL,CAAC;EAED,IAAAO,gBAAS,EAAC,MAAM;IACd,IAAI,CAAAX,YAAY,oBAAZA,YAAY,CAAEY,OAAO,KAAI,IAAI,EAAE;MACjC;IACF;IAEAJ,qBAAqB,CAACK,WAAW,CAACC,SAAS,GAAGd,YAAY,oBAAZA,YAAY,CAAEY,OAAO;IACnEJ,qBAAqB,CAACK,WAAW,CAACE,MAAM,GAAGb,SAAS,oBAATA,SAAS,CAAEU,OAAO;IAE7DJ,qBAAqB,CAACQ,SAAS,CAAC,CAAC;IACjC,OAAO,MAAM;MACXR,qBAAqB,CAACK,WAAW,CAACE,MAAM,GAAG,IAAI;MAC/CP,qBAAqB,CAACS,WAAW,CAAC,CAAC;IACrC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,IAAAN,gBAAS,EAAC,MAAM;IAAA,IAAAO,qBAAA;IACd;IACA,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,EAAE;MACnC;IACF;IACA,IAAIpB,gBAAgB,IAAID,YAAY,aAAAkB,qBAAA,GAAZlB,YAAY,CAAEY,OAAO,aAArBM,qBAAA,CAAuBI,YAAY,EAAE;MAC3Dd,qBAAqB,CAACe,wBAAwB,CAAC,CAAC;IAClD;EACF,CAAC,EAAE,CAAChB,UAAU,CAACiB,MAAM,CAAC,CAAC;EAEvB,OAAO;IAAExB,YAAY;IAAEE;EAAU,CAAC;AACpC","ignoreList":[]}
+{"version":3,"names":["_react","require","_CollectionReachBottom","_react2","useCollectionReachBottom","collection","containerRef","scrollMoreAlways","targetRef","useRef","lodash","useWixPatternsContainer","result","keyedItems","collectionReachBottom","useState","CollectionReachBottom","useEffect","current","reachBottom","container","target","subscribe","unsubscribe","_containerRef$current","process","env","NODE_ENV","scrollHeight","triggerListenerIfReached","length"],"sources":["../../../src/components/useCollectionReachBottom.tsx"],"sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\nimport { CollectionReachBottom } from '../state/CollectionReachBottom';\nimport { ScrollableWindow } from '../reach-bottom-listener';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\n\nexport interface UseCollectionReachBottomParams<\n  T,\n  F extends FiltersMap = FiltersMap,\n> {\n  collection: CollectionState<T, F>;\n  containerRef?: RefObject<ScrollableWindow | null | undefined>;\n  scrollMoreAlways?: boolean;\n}\n\nexport function useCollectionReachBottom<T, F extends FiltersMap = FiltersMap>({\n  collection,\n  containerRef,\n  scrollMoreAlways,\n}: UseCollectionReachBottomParams<T, F>) {\n  const targetRef = useRef<HTMLElement>(null);\n\n  const { lodash } = useWixPatternsContainer();\n\n  const {\n    result: { keyedItems },\n  } = collection;\n\n  const [collectionReachBottom] = useState(\n    () =>\n      new CollectionReachBottom({\n        collection,\n        lodash,\n      }),\n  );\n\n  useEffect(() => {\n    if (containerRef?.current == null) {\n      return;\n    }\n\n    collectionReachBottom.reachBottom.container = containerRef?.current;\n    collectionReachBottom.reachBottom.target = targetRef?.current;\n\n    collectionReachBottom.subscribe();\n    return () => {\n      collectionReachBottom.reachBottom.target = null;\n      collectionReachBottom.unsubscribe();\n    };\n  }, []);\n\n  // Check if should load more items (scrollable container is not filled yet) after new data has been rendered\n  useEffect(() => {\n    // In jsdom element dimensions are always 0, so calculations inside `CollectionReachBottom` are not relevant.\n    if (process.env.NODE_ENV === 'test') {\n      return;\n    }\n    if (scrollMoreAlways || containerRef?.current?.scrollHeight) {\n      collectionReachBottom.triggerListenerIfReached();\n    }\n  }, [keyedItems.length]);\n\n  return { containerRef, targetRef };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAGA,IAAAE,OAAA,GAAAF,OAAA;AAWO,SAASG,wBAAwBA,CAAuC;EAC7EC,UAAU;EACVC,YAAY;EACZC;AACoC,CAAC,EAAE;EACvC,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAc,IAAI,CAAC;EAE3C,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAE5C,MAAM;IACJC,MAAM,EAAE;MAAEC;IAAW;EACvB,CAAC,GAAGR,UAAU;EAEd,MAAM,CAACS,qBAAqB,CAAC,GAAG,IAAAC,eAAQ,EACtC,MACE,IAAIC,4CAAqB,CAAC;IACxBX,UAAU;IACVK;EACF,CAAC,CACL,CAAC;EAED,IAAAO,gBAAS,EAAC,MAAM;IACd,IAAI,CAAAX,YAAY,oBAAZA,YAAY,CAAEY,OAAO,KAAI,IAAI,EAAE;MACjC;IACF;IAEAJ,qBAAqB,CAACK,WAAW,CAACC,SAAS,GAAGd,YAAY,oBAAZA,YAAY,CAAEY,OAAO;IACnEJ,qBAAqB,CAACK,WAAW,CAACE,MAAM,GAAGb,SAAS,oBAATA,SAAS,CAAEU,OAAO;IAE7DJ,qBAAqB,CAACQ,SAAS,CAAC,CAAC;IACjC,OAAO,MAAM;MACXR,qBAAqB,CAACK,WAAW,CAACE,MAAM,GAAG,IAAI;MAC/CP,qBAAqB,CAACS,WAAW,CAAC,CAAC;IACrC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,IAAAN,gBAAS,EAAC,MAAM;IAAA,IAAAO,qBAAA;IACd;IACA,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,EAAE;MACnC;IACF;IACA,IAAIpB,gBAAgB,IAAID,YAAY,aAAAkB,qBAAA,GAAZlB,YAAY,CAAEY,OAAO,aAArBM,qBAAA,CAAuBI,YAAY,EAAE;MAC3Dd,qBAAqB,CAACe,wBAAwB,CAAC,CAAC;IAClD;EACF,CAAC,EAAE,CAAChB,UAAU,CAACiB,MAAM,CAAC,CAAC;EAEvB,OAAO;IAAExB,YAAY;IAAEE;EAAU,CAAC;AACpC","ignoreList":[]}

package/dist/cjs/external-types.d.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/external-types.d.ts"],"sourcesContent":["declare module '*.st.css' {\n  const stylesheet: import('@stylable/runtime').RuntimeStylesheet;\n  export = stylesheet;\n}\ndeclare module 'react-module-container';\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["../../src/external-types.d.ts"],"sourcesContent":["declare module '*.st.css' {\n  const stylesheet: import('@stylable/runtime').RuntimeStylesheet;\n  export = stylesheet;\n}\ndeclare module 'react-module-container';\ndeclare module 'is-ci' {\n  export default boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/hooks/useFilterCollectionStates.js

@@ -25,15 +25,25 @@ function useFilterCollectionStates(params) {
     }
     return translate('emptyState');
   };
-  const getFixedFooter = (dataHook, content) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  const getFixedFooter = (dataHook, content, paramsFixedFooter) => /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "left",
+    direction: "vertical",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 37,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     dataHook: dataHook,
     verticalAlign: "middle",
     align: "center",
     direction: "vertical",
+    width: "100%",
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 34,
+      lineNumber: 38,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -41,10 +51,10 @@ function useFilterCollectionStates(params) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 40,
+      lineNumber: 45,
       columnNumber: 9
     }
-  }, content)));
+  }, content)), paramsFixedFooter);
   if (collection.showInitialLoader || collection.result.status.isLoading) {
     return {
       showInitialLoader: true,
@@ -53,7 +63,7 @@ function useFilterCollectionStates(params) {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 48,
+          lineNumber: 54,
           columnNumber: 53
         }
       }))
@@ -61,25 +71,17 @@ function useFilterCollectionStates(params) {
   }
   if (collection.showEmptyState) {
     return {
-      fixedFooter: getFixedFooter('empty-state', /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-        direction: "vertical",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 56,
-          columnNumber: 9
-        }
-      }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+      fixedFooter: getFixedFooter('empty-state', /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
         dataHook: "empty-state-text",
         secondary: true,
         size: "small",
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 57,
-          columnNumber: 11
+          lineNumber: 62,
+          columnNumber: 9
         }
-      }, getEmptyStateText()), params.fixedFooter))
+      }, getEmptyStateText()), params.fixedFooter)
     };
   }
   if (collection.showErrorState) {
@@ -95,7 +97,7 @@ function useFilterCollectionStates(params) {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 75,
+            lineNumber: 79,
             columnNumber: 11
           }
         }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -107,7 +109,7 @@ function useFilterCollectionStates(params) {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 81,
+            lineNumber: 85,
             columnNumber: 13
           }
         }, resolvedError.message, resolvedError.action && /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
@@ -118,7 +120,7 @@ function useFilterCollectionStates(params) {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 90,
+            lineNumber: 94,
             columnNumber: 17
           }
         }, resolvedError.action.text)), resolvedError.action && /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
@@ -131,7 +133,7 @@ function useFilterCollectionStates(params) {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 100,
+            lineNumber: 104,
             columnNumber: 15
           }
         }, resolvedError.action.text)))

package/dist/cjs/hooks/useFilterCollectionStates.js.map

@@ -1 +1 @@
-{"version":3,"names":["_designSystem","require","_react","_interopRequireDefault","_react2","_providers","_jsxFileName","useFilterCollectionStates","params","collection","fixedFooter","errorHandler","useWixPatternsContainer","translate","useDropdownTranslationContext","getEmptyStateText","hasAvailableItems","getFixedFooter","dataHook","content","default","createElement","Fragment","Box","verticalAlign","align","direction","__self","__source","fileName","lineNumber","columnNumber","padding","showInitialLoader","result","status","isLoading","Loader","size","showEmptyState","Text","secondary","showErrorState","_collection$result$er","resolvedError","getResolvedError","errorStatus","error","gap","weight","message","action","TextButton","onClick","_resolvedError$action","text","_resolvedError$action2"],"sources":["../../../src/hooks/useFilterCollectionStates.tsx"],"sourcesContent":["import { Box, Loader, Text, TextButton } from '@wix/design-system';\nimport React, { ReactNode } from 'react';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useDropdownTranslationContext } from '../providers';\n\nexport interface UseFilterCollectionStateOptionsParams<\n  T,\n  F extends FiltersMap,\n> {\n  collection: CollectionState<T, F>;\n  fixedFooter: ReactNode;\n}\n\nexport function useFilterCollectionStates<T, F extends FiltersMap>(\n  params: UseFilterCollectionStateOptionsParams<T, F>,\n): {\n  fixedFooter?: ReactNode;\n  showInitialLoader?: boolean;\n} {\n  const { collection, fixedFooter } = params;\n  const { errorHandler } = useWixPatternsContainer();\n  const { translate } = useDropdownTranslationContext();\n\n  const getEmptyStateText = () => {\n    if (collection.hasAvailableItems) {\n      return translate('noResultsState');\n    }\n    return translate('emptyState');\n  };\n\n  const getFixedFooter = (dataHook: string, content: ReactNode) => (\n    <>\n      <Box\n        dataHook={dataHook}\n        verticalAlign=\"middle\"\n        align=\"center\"\n        direction=\"vertical\"\n      >\n        <Box padding=\"SP2\">{content}</Box>\n      </Box>\n    </>\n  );\n\n  if (collection.showInitialLoader || collection.result.status.isLoading) {\n    return {\n      showInitialLoader: true,\n      fixedFooter: getFixedFooter('initial-loader', <Loader size=\"small\" />),\n    };\n  }\n\n  if (collection.showEmptyState) {\n    return {\n      fixedFooter: getFixedFooter(\n        'empty-state',\n        <Box direction=\"vertical\">\n          <Text dataHook=\"empty-state-text\" secondary size=\"small\">\n            {getEmptyStateText()}\n          </Text>\n          {params.fixedFooter}\n        </Box>,\n      ),\n    };\n  }\n\n  if (collection.showErrorState) {\n    const resolvedError = errorHandler.getResolvedError?.(\n      collection.result.errorStatus?.error,\n    );\n\n    if (resolvedError) {\n      return {\n        fixedFooter: getFixedFooter(\n          'filter-error-state',\n          <Box\n            direction=\"vertical\"\n            gap=\"SP1\"\n            verticalAlign=\"middle\"\n            align=\"center\"\n          >\n            <Text\n              dataHook=\"filter-error-state-text\"\n              secondary\n              align=\"center\"\n              weight=\"thin\"\n              size=\"small\"\n            >\n              {resolvedError.message}\n              {resolvedError.action && (\n                <TextButton\n                  onClick={async () => {\n                    await resolvedError.action?.onClick?.();\n                  }}\n                >\n                  {resolvedError.action.text}\n                </TextButton>\n              )}\n            </Text>\n            {resolvedError.action && (\n              <TextButton\n                size=\"small\"\n                weight=\"thin\"\n                onClick={async () => {\n                  await resolvedError.action?.onClick?.();\n                }}\n              >\n                {resolvedError.action.text}\n              </TextButton>\n            )}\n          </Box>,\n        ),\n      };\n    }\n  }\n\n  return {\n    fixedFooter,\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_designSystem","require","_react","_interopRequireDefault","_react2","_providers","_jsxFileName","useFilterCollectionStates","params","collection","fixedFooter","errorHandler","useWixPatternsContainer","translate","useDropdownTranslationContext","getEmptyStateText","hasAvailableItems","getFixedFooter","dataHook","content","paramsFixedFooter","default","createElement","Box","align","direction","__self","__source","fileName","lineNumber","columnNumber","verticalAlign","width","padding","showInitialLoader","result","status","isLoading","Loader","size","showEmptyState","Text","secondary","showErrorState","_collection$result$er","resolvedError","getResolvedError","errorStatus","error","gap","weight","message","action","TextButton","onClick","_resolvedError$action","text","_resolvedError$action2"],"sources":["../../../src/hooks/useFilterCollectionStates.tsx"],"sourcesContent":["import { Box, Loader, Text, TextButton } from '@wix/design-system';\nimport React, { ReactNode } from 'react';\nimport { CollectionState, FiltersMap } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useDropdownTranslationContext } from '../providers';\n\nexport interface UseFilterCollectionStateOptionsParams<\n  T,\n  F extends FiltersMap,\n> {\n  collection: CollectionState<T, F>;\n  fixedFooter: ReactNode;\n}\n\nexport function useFilterCollectionStates<T, F extends FiltersMap>(\n  params: UseFilterCollectionStateOptionsParams<T, F>,\n): {\n  fixedFooter?: ReactNode;\n  showInitialLoader?: boolean;\n} {\n  const { collection, fixedFooter } = params;\n  const { errorHandler } = useWixPatternsContainer();\n  const { translate } = useDropdownTranslationContext();\n\n  const getEmptyStateText = () => {\n    if (collection.hasAvailableItems) {\n      return translate('noResultsState');\n    }\n    return translate('emptyState');\n  };\n\n  const getFixedFooter = (\n    dataHook: string,\n    content: ReactNode,\n    paramsFixedFooter?: ReactNode,\n  ) => (\n    <Box align=\"left\" direction=\"vertical\">\n      <Box\n        dataHook={dataHook}\n        verticalAlign=\"middle\"\n        align=\"center\"\n        direction=\"vertical\"\n        width=\"100%\"\n      >\n        <Box padding=\"SP2\">{content}</Box>\n      </Box>\n      {paramsFixedFooter}\n    </Box>\n  );\n\n  if (collection.showInitialLoader || collection.result.status.isLoading) {\n    return {\n      showInitialLoader: true,\n      fixedFooter: getFixedFooter('initial-loader', <Loader size=\"small\" />),\n    };\n  }\n\n  if (collection.showEmptyState) {\n    return {\n      fixedFooter: getFixedFooter(\n        'empty-state',\n        <Text dataHook=\"empty-state-text\" secondary size=\"small\">\n          {getEmptyStateText()}\n        </Text>,\n        params.fixedFooter,\n      ),\n    };\n  }\n\n  if (collection.showErrorState) {\n    const resolvedError = errorHandler.getResolvedError?.(\n      collection.result.errorStatus?.error,\n    );\n\n    if (resolvedError) {\n      return {\n        fixedFooter: getFixedFooter(\n          'filter-error-state',\n          <Box\n            direction=\"vertical\"\n            gap=\"SP1\"\n            verticalAlign=\"middle\"\n            align=\"center\"\n          >\n            <Text\n              dataHook=\"filter-error-state-text\"\n              secondary\n              align=\"center\"\n              weight=\"thin\"\n              size=\"small\"\n            >\n              {resolvedError.message}\n              {resolvedError.action && (\n                <TextButton\n                  onClick={async () => {\n                    await resolvedError.action?.onClick?.();\n                  }}\n                >\n                  {resolvedError.action.text}\n                </TextButton>\n              )}\n            </Text>\n            {resolvedError.action && (\n              <TextButton\n                size=\"small\"\n                weight=\"thin\"\n                onClick={async () => {\n                  await resolvedError.action?.onClick?.();\n                }}\n              >\n                {resolvedError.action.text}\n              </TextButton>\n            )}\n          </Box>,\n        ),\n      };\n    }\n  }\n\n  return {\n    fixedFooter,\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/hooks/usePickerModal/PickerModalState.js

@@ -355,13 +355,18 @@ class PickerModalState {
     // if the modal is already open, report startLoad BI, otherwise prefetch dependencies
     if (!this.isModalOpen) {
       // the timeout delay (500) indicates how soon (or late) we want to execute the callback, in case requestIdleCallback is not implemented
-      const _requestIdleCallback = window.requestIdleCallback ?? (cb => setTimeout(cb, 500));
-      const _cancelIdleCallback = window.cancelIdleCallback ?? clearTimeout;
+      const _requestIdleCallback = window.requestIdleCallback ?? (cb => {
+        return window.setTimeout(cb, 500);
+      });
       const requestId = _requestIdleCallback(() => {
         this.fetchFirstPage.once();
       });
       return () => {
-        _cancelIdleCallback(requestId);
+        if (window.cancelIdleCallback) {
+          window.cancelIdleCallback(requestId);
+        } else {
+          window.clearTimeout(requestId);
+        }
       };
     }
     return;