@fluentui/react-virtualizer 0.0.0-nightly-20230119-0422.1

package/CHANGELOG.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fluentui/react-virtualizer",
+  "entries": [
+    {
+      "date": "Thu, 19 Jan 2023 04:29:49 GMT",
+      "tag": "@fluentui/react-virtualizer_v0.0.0-nightly-20230119-0422.1",
+      "version": "0.0.0-nightly-20230119-0422.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "fluentui-internal@service.microsoft.com",
+            "package": "@fluentui/react-virtualizer",
+            "commit": "not available",
+            "comment": "Release nightly v9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-virtualizer",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230119-0422.1",
+            "commit": "5a75e47428063a8ce004349c62041a228a465664"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-virtualizer",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230119-0422.1",
+            "commit": "5a75e47428063a8ce004349c62041a228a465664"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Change Log - @fluentui/react-virtualizer
+
+This log was last generated on Thu, 19 Jan 2023 04:29:49 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20230119-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-virtualizer_v0.0.0-nightly-20230119-0422.1)
+
+Thu, 19 Jan 2023 04:29:49 GMT
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230119-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/5a75e47428063a8ce004349c62041a228a465664) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230119-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/5a75e47428063a8ce004349c62041a228a465664) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-virtualizer
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,5 @@
+# @fluentui/react-virtualizer
+
+**Virtualizer components for [Fluent UI React](https://react.fluentui.dev/)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

package/dist/index.d.ts

@@ -0,0 +1,173 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { Dispatch } from 'react';
+import type { FC } from 'react';
+import type { MutableRefObject } from 'react';
+import * as React_2 from 'react';
+import type { SetStateAction } from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export declare const renderVirtualizer_unstable: (state: VirtualizerState) => JSX.Element;
+
+/**
+ * React hook that allows easy usage of the browser API IntersectionObserver within React
+ * @param callback - A function called when the percentage of the target element is visible crosses a threshold.
+ * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the
+ * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is
+ * enough to trigger a callback).
+ * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to
+ * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.
+ */
+export declare const useIntersectionObserver: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined) => {
+    setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;
+    setObserverInit: Dispatch<SetStateAction<IntersectionObserverInit | undefined>>;
+    observer: MutableRefObject<IntersectionObserver | undefined>;
+};
+
+export declare function useVirtualizer_unstable(props: VirtualizerProps): VirtualizerState;
+
+/**
+ * Apply styling to the Virtualizer states
+ */
+export declare const useVirtualizerStyles_unstable: (state: VirtualizerState) => VirtualizerState;
+
+/**
+ * Virtualizer pseudo-component, this functional wrapper
+ * provides a simple interface for reducing the total number
+ * of elements rendered at one time in large lists.
+ */
+export declare const Virtualizer: FC<VirtualizerProps>;
+
+export declare type VirtualizerChildRenderFunction = (index: number) => React_2.ReactNode;
+
+export declare const virtualizerClassNames: SlotClassNames<VirtualizerSlots>;
+
+export declare type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & {
+    /**
+     * Child render function.
+     * Iteratively called to return current virtualizer DOM children.
+     * Will act as a row or column indexer depending on Virtualizer settings.
+     * Can be used dynamically.
+     */
+    children: VirtualizerChildRenderFunction;
+    /**
+     * Default cell size to use if no custom callback provided.
+     * If implementing `getItemSize` this should be the initial and ideally minimum cell size.
+     */
+    itemSize: number;
+    /**
+     * The total number of items to be virtualized.
+     */
+    numItems: number;
+    /**
+     * Number of children to render in the DOM during virtualization.
+     * Constraints:
+     * - Large enough that the items rendered in DOM cover the viewport
+     *   and intersection observer buffers (buffersize) at both ends.
+     */
+    virtualizerLength: number;
+    /**
+     * Defaults to 1/4th of virtualizerLength.
+     * Controls the number of elements rendered before the current index entering the virtualized viewport.
+     * Constraints:
+     * - Large enough to cover bufferSize (prevents buffers intersecting into the viewport during rest state).
+     * - Small enough that the end buffer and end index (start index + virtualizerLength) is not within viewport at rest.
+     */
+    bufferItems?: number;
+    /**
+     * Defaults to half of bufferItems size (in pixels).
+     * The length (in pixels) before the end/start DOM index where the virtualizer recalculation will be triggered.
+     * Increasing this reduces whitespace on ultra-fast scroll, as additional elements
+     * are buffered to appear while virtualization recalculates.
+     * Constraints:
+     * - At least 1px - although this will only trigger the recalculation after bookends (whitespace) enter viewport.
+     * - BufferSize must be smaller than bufferItems pixel size, as it prevents bookends entering viewport at rest.
+     */
+    bufferSize?: number;
+    /**
+     * Enables users to override the intersectionObserverRoot.
+     * @default null
+     */
+    intersectionObserverRoot?: React_2.MutableRefObject<HTMLElement | null>;
+    /**
+     * The scroll direction
+     * @default vertical
+     */
+    axis?: 'vertical' | 'horizontal';
+    /**
+     * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)
+     * This value should be flipped in RTL implementation (TBD whether automate RTL).
+     */
+    reversed?: boolean;
+    /**
+     * Callback for acquiring size of individual items
+     * @param index - the index of the requested size's child
+     */
+    getItemSize?: (index: number) => number;
+    /**
+     * Notify users of index changes
+     */
+    onUpdateIndex?: (index: number, prevIndex: number) => void;
+    /**
+     * Allow users to intervene in index calculation changes
+     */
+    onCalculateIndex?: (newIndex: number) => number;
+};
+
+export declare type VirtualizerSlots = {
+    /**
+     * The intersection observed 'before' element will detect when scrolling towards the beginning.
+     */
+    before: NonNullable<Slot<'div', 'td'>>;
+    /**
+     * A block place holding whitespace at the beginning of current DOM children.
+     */
+    beforeContainer: NonNullable<Slot<'div', 'tr'>>;
+    /**
+     * The intersection observed 'after' element will detect when scrolling towards the end.
+     */
+    after: NonNullable<Slot<'div', 'td'>>;
+    /**
+     * A block place holding whitespace after the end of current DOM children.
+     */
+    afterContainer: NonNullable<Slot<'div', 'tr'>>;
+};
+
+export declare type VirtualizerState = ComponentState<VirtualizerSlots> & {
+    /**
+     * The current virtualized array of children to show in the DOM.
+     */
+    virtualizedChildren: React_2.ReactNode[];
+    /**
+     * The current start index for the virtualizer, all previous index's will be removed from DOM.
+     */
+    virtualizerStartIndex: number;
+    /**
+     * Current buffer height required at beginning of array.
+     */
+    afterBufferHeight: number;
+    /**
+     * Current buffer height required at end of array.
+     */
+    beforeBufferHeight: number;
+    /**
+     * The total current height of the scrollView/child content.
+     */
+    totalVirtualizerHeight: number;
+    /**
+     * The scroll direction
+     * @default vertical
+     */
+    axis?: 'vertical' | 'horizontal';
+    /**
+     * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)
+     */
+    reversed?: boolean;
+    /**
+     * Tells the virtualizer how much
+     */
+    bufferSize: number;
+};
+
+export { }

package/lib/Hooks.js

@@ -0,0 +1,2 @@
+export * from './hooks/index';
+//# sourceMappingURL=Hooks.js.map

package/lib/Hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hooks.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-virtualizer/src/Hooks.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './hooks/index';\n"]}

package/lib/Virtualizer.js

@@ -0,0 +1,2 @@
+export * from './components/Virtualizer/index';
+//# sourceMappingURL=Virtualizer.js.map

package/lib/Virtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Virtualizer.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-virtualizer/src/Virtualizer.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/Virtualizer/index';\n"]}

package/lib/components/Virtualizer/Virtualizer.js

@@ -0,0 +1,15 @@
+import { useVirtualizerStyles_unstable } from './useVirtualizerStyles';
+import { useVirtualizer_unstable } from './useVirtualizer';
+import { renderVirtualizer_unstable } from './renderVirtualizer';
+/**
+ * Virtualizer pseudo-component, this functional wrapper
+ * provides a simple interface for reducing the total number
+ * of elements rendered at one time in large lists.
+ */
+export const Virtualizer = props => {
+  const state = useVirtualizer_unstable(props);
+  useVirtualizerStyles_unstable(state);
+  return renderVirtualizer_unstable(state);
+};
+Virtualizer.displayName = 'Virtualizer';
+//# sourceMappingURL=Virtualizer.js.map

package/lib/components/Virtualizer/Virtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AACA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAGhE;;;;;AAKA,OAAO,MAAMC,WAAW,GAA0BC,KAAuB,IAAI;EAC3E,MAAMC,KAAK,GAAGJ,uBAAuB,CAACG,KAAK,CAAC;EAC5CJ,6BAA6B,CAACK,KAAK,CAAC;EAEpC,OAAOH,0BAA0B,CAACG,KAAK,CAAC;AAC1C,CAAC;AAEDF,WAAW,CAACG,WAAW,GAAG,aAAa","names":["useVirtualizerStyles_unstable","useVirtualizer_unstable","renderVirtualizer_unstable","Virtualizer","props","state","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-virtualizer/src/components/Virtualizer/Virtualizer.ts"],"sourcesContent":["import type { VirtualizerProps } from './Virtualizer.types';\nimport { useVirtualizerStyles_unstable } from './useVirtualizerStyles';\nimport { useVirtualizer_unstable } from './useVirtualizer';\nimport { renderVirtualizer_unstable } from './renderVirtualizer';\nimport type { FC } from 'react';\n\n/**\n * Virtualizer pseudo-component, this functional wrapper\n * provides a simple interface for reducing the total number\n * of elements rendered at one time in large lists.\n */\nexport const Virtualizer: FC<VirtualizerProps> = (props: VirtualizerProps) => {\n  const state = useVirtualizer_unstable(props);\n  useVirtualizerStyles_unstable(state);\n\n  return renderVirtualizer_unstable(state);\n};\n\nVirtualizer.displayName = 'Virtualizer';\n"]}

package/lib/components/Virtualizer/Virtualizer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Virtualizer.types.js.map

package/lib/components/Virtualizer/Virtualizer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Virtualizer.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-virtualizer/src/components/Virtualizer/Virtualizer.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type VirtualizerSlots = {\n  /**\n   * The intersection observed 'before' element will detect when scrolling towards the beginning.\n   */\n  before: NonNullable<Slot<'div', 'td'>>;\n  /**\n   * A block place holding whitespace at the beginning of current DOM children.\n   */\n  beforeContainer: NonNullable<Slot<'div', 'tr'>>;\n  /**\n   * The intersection observed 'after' element will detect when scrolling towards the end.\n   */\n  after: NonNullable<Slot<'div', 'td'>>;\n  /**\n   * A block place holding whitespace after the end of current DOM children.\n   */\n  afterContainer: NonNullable<Slot<'div', 'tr'>>;\n};\n\nexport type VirtualizerState = ComponentState<VirtualizerSlots> & {\n  /**\n   * The current virtualized array of children to show in the DOM.\n   */\n  virtualizedChildren: React.ReactNode[];\n  /**\n   * The current start index for the virtualizer, all previous index's will be removed from DOM.\n   */\n  virtualizerStartIndex: number;\n  /**\n   * Current buffer height required at beginning of array.\n   */\n  afterBufferHeight: number;\n  /**\n   * Current buffer height required at end of array.\n   */\n  beforeBufferHeight: number;\n  /**\n   * The total current height of the scrollView/child content.\n   */\n  totalVirtualizerHeight: number;\n  /**\n   * The scroll direction\n   * @default vertical\n   */\n  axis?: 'vertical' | 'horizontal';\n  /**\n   * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n   */\n  reversed?: boolean;\n  /**\n   * Tells the virtualizer how much\n   */\n  bufferSize: number;\n};\n\n// Virtualizer render function to procedurally generate children elements as rows or columns via index.\n// Q: Use generic typing and passing through object data or a simple index system?\nexport type VirtualizerChildRenderFunction = (index: number) => React.ReactNode;\n\nexport type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & {\n  /**\n   * Child render function.\n   * Iteratively called to return current virtualizer DOM children.\n   * Will act as a row or column indexer depending on Virtualizer settings.\n   * Can be used dynamically.\n   */\n  children: VirtualizerChildRenderFunction;\n\n  /**\n   * Default cell size to use if no custom callback provided.\n   * If implementing `getItemSize` this should be the initial and ideally minimum cell size.\n   */\n  itemSize: number;\n\n  /**\n   * The total number of items to be virtualized.\n   */\n  numItems: number;\n\n  /**\n   * Number of children to render in the DOM during virtualization.\n   * Constraints:\n   * - Large enough that the items rendered in DOM cover the viewport\n   *   and intersection observer buffers (buffersize) at both ends.\n   */\n  virtualizerLength: number;\n\n  /**\n   * Defaults to 1/4th of virtualizerLength.\n   * Controls the number of elements rendered before the current index entering the virtualized viewport.\n   * Constraints:\n   * - Large enough to cover bufferSize (prevents buffers intersecting into the viewport during rest state).\n   * - Small enough that the end buffer and end index (start index + virtualizerLength) is not within viewport at rest.\n   */\n  bufferItems?: number;\n\n  /**\n   * Defaults to half of bufferItems size (in pixels).\n   * The length (in pixels) before the end/start DOM index where the virtualizer recalculation will be triggered.\n   * Increasing this reduces whitespace on ultra-fast scroll, as additional elements\n   * are buffered to appear while virtualization recalculates.\n   * Constraints:\n   * - At least 1px - although this will only trigger the recalculation after bookends (whitespace) enter viewport.\n   * - BufferSize must be smaller than bufferItems pixel size, as it prevents bookends entering viewport at rest.\n   */\n  bufferSize?: number;\n\n  /**\n   * Enables users to override the intersectionObserverRoot.\n   * @default null\n   */\n  intersectionObserverRoot?: React.MutableRefObject<HTMLElement | null>;\n\n  /**\n   * The scroll direction\n   * @default vertical\n   */\n  axis?: 'vertical' | 'horizontal';\n\n  /**\n   * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n   * This value should be flipped in RTL implementation (TBD whether automate RTL).\n   */\n  reversed?: boolean;\n\n  /**\n   * Callback for acquiring size of individual items\n   * @param index - the index of the requested size's child\n   */\n  getItemSize?: (index: number) => number;\n\n  /**\n   * Notify users of index changes\n   */\n  onUpdateIndex?: (index: number, prevIndex: number) => void;\n\n  /**\n   * Allow users to intervene in index calculation changes\n   */\n  onCalculateIndex?: (newIndex: number) => number;\n};\n"]}

package/lib/components/Virtualizer/index.js

@@ -0,0 +1,6 @@
+export * from './Virtualizer';
+export * from './Virtualizer.types';
+export * from './useVirtualizer';
+export * from './renderVirtualizer';
+export * from './useVirtualizerStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/Virtualizer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-virtualizer/src/components/Virtualizer/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './Virtualizer';\nexport * from './Virtualizer.types';\nexport * from './useVirtualizer';\nexport * from './renderVirtualizer';\nexport * from './useVirtualizerStyles';\n"]}

package/lib/components/Virtualizer/renderVirtualizer.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+export const renderVirtualizer_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(slots.beforeContainer, {
+    ...slotProps.beforeContainer
+  }, /*#__PURE__*/React.createElement(slots.before, {
+    ...slotProps.before
+  })), state.virtualizedChildren, /*#__PURE__*/React.createElement(slots.afterContainer, {
+    ...slotProps.afterContainer
+  }, /*#__PURE__*/React.createElement(slots.after, {
+    ...slotProps.after
+  })));
+};
+//# sourceMappingURL=renderVirtualizer.js.map

package/lib/components/Virtualizer/renderVirtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAE9D,oBACEH,oBAACA,KAAK,CAACM,QAAQ,qBAEbN,oBAACI,KAAK,CAACG,eAAe;IAAA,GAAKF,SAAS,CAACE;EAAe,gBAClDP,oBAACI,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,EAAI,CAChB,EAEvBL,KAAK,CAACM,mBAAmB,eAE1BT,oBAACI,KAAK,CAACM,cAAc;IAAA,GAAKL,SAAS,CAACK;EAAc,gBAChDV,oBAACI,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,CACf,CACR;AAErB,CAAC","names":["React","getSlots","renderVirtualizer_unstable","state","slots","slotProps","Fragment","beforeContainer","before","virtualizedChildren","afterContainer","after"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-virtualizer/src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\n\nexport const renderVirtualizer_unstable = (state: VirtualizerState) => {\n  const { slots, slotProps } = getSlots<VirtualizerSlots>(state);\n\n  return (\n    <React.Fragment>\n      {/* The 'before' bookend to hold items in place and detect scroll previous */}\n      <slots.beforeContainer {...slotProps.beforeContainer}>\n        <slots.before {...slotProps.before} />\n      </slots.beforeContainer>\n      {/* The reduced list of non-virtualized children to be rendered */}\n      {state.virtualizedChildren}\n      {/* The 'after' bookend to hold items in place and detect scroll next */}\n      <slots.afterContainer {...slotProps.afterContainer}>\n        <slots.after {...slotProps.after} />\n      </slots.afterContainer>\n    </React.Fragment>\n  );\n};\n"]}