@workday/canvas-kit-react 8.5.0-339-next.0 → 8.5.0-342-next.2

package/dist/commonjs/collection/lib/useListModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListModel.tsx"],"names":[],"mappings":"AAOA,oBAAY,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGA,CAAC"}
+{"version":3,"file":"useListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListModel.tsx"],"names":[],"mappings":"AAOA,oBAAY,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGA,CAAC"}

package/dist/commonjs/collection/lib/useListModel.js

@@ -4,10 +4,26 @@ exports.useListModel = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
 var useSelectionListModel_1 = require("./useSelectionListModel");
 /**
- * Create a list model that includes item registration, cursors for focus, and selection. You can
- * inject navigation and selection managers to change how a user navigates or how selection works.
+ * The List model contains the the state and events necessary to track items, selection, and a cursor.
+ * Various hooks can be used for a List model to create common behaviors associated with lists, such as
+ * navigating a list with a keyboard, selection (single and multiple), and virtualization.
  *
- * @example
+ * A list also has a "cursor". A cursor is often represented by focus, but it is not always a 1:1
+ * mapping. Think of the cursor as the focus item within the list. If the list has browser focus, the
+ * cursor will map to browser focus. Behaviors such as `useListRovingFocus` will map the cursor to the
+ * active tab stop of the list. For more information, see
+ * [Roving Tabindex](https://w3c.github.io/aria-practices/#kbd_roving_tabindex). `useListRovingFocus`
+ * adds keyboard events that map to navigation events. A [Navigation Manager](#navigation-manager) is
+ * used to map new cursor ids to these events. The `ListModel` takes an optional `navigation`
+ * configuration to change the default navigation behavior. The default navigation manager is a
+ * [wrappingNavigationManager](#wrappingnavigationmanager) meaning the cursor will wrap around the
+ * beginning and the ends. The cursor also provides a [navigationManager](#navigationmanager) that does
+ * not wrap. This is the default navigation for grids.
+ *
+ * The cursor also adds the concept of `orientation` which defaults to `'vertical'`. A Tab list is an
+ * example of a `'horizontal'` list.
+ *
+ * ```tsx
  * const list = useListModel({
  *   // custom handling for selection. single and multi select are provided
  *   selection: mySelectionManager,
@@ -16,6 +32,7 @@ var useSelectionListModel_1 = require("./useSelectionListModel");
  *   items: [{ id: '1', text: 'First'}, { id: '2', text: 'Second' }],
  *   getId: item => item.id, // get the unique identifier of your item
  * })
+ * ```
  */
 exports.useListModel = common_1.createModelHook({
     defaultConfig: useSelectionListModel_1.useSelectionListModel.defaultConfig,

package/dist/commonjs/collection/lib/useListRenderItem.d.ts

@@ -1,5 +1,19 @@
 import React from 'react';
 import { Generic } from '@workday/canvas-kit-react/common';
 import { useBaseListModel } from './useBaseListModel';
+/**
+ * This hook is meant to be used inside the render function of `List` style components. It is used
+ * by `ListBox`. This hook gives list-based components their static and dynamic APIs to handle list
+ * items. This hook should only be used if you want to implement your own List. For example,
+ * `Tabs.List` uses this hook, but `Menu.List` uses `ListBox` which uses this hook.
+ *
+ * ```tsx
+ * const MyList = createContainer('ul')({
+ *   modelHook: useListModel,
+ * })((elemProps, Element, model) => {
+ *   return <Element {...elemProps}>{useListRenderItems(model, elemProps.children)}</Element>;
+ * });
+```
+ */
 export declare function useListRenderItems<T>(model: ReturnType<typeof useBaseListModel>, children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode): React.ReactNode;
 //# sourceMappingURL=useListRenderItem.d.ts.map

package/dist/commonjs/collection/lib/useListRenderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListRenderItem.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListRenderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,GAC9E,KAAK,CAAC,SAAS,CAgCjB"}
+{"version":3,"file":"useListRenderItem.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListRenderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,GAC9E,KAAK,CAAC,SAAS,CAgCjB"}

package/dist/commonjs/collection/lib/useListRenderItem.js

@@ -5,6 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListRenderItems = void 0;
 var react_1 = __importDefault(require("react"));
+/**
+ * This hook is meant to be used inside the render function of `List` style components. It is used
+ * by `ListBox`. This hook gives list-based components their static and dynamic APIs to handle list
+ * items. This hook should only be used if you want to implement your own List. For example,
+ * `Tabs.List` uses this hook, but `Menu.List` uses `ListBox` which uses this hook.
+ *
+ * ```tsx
+ * const MyList = createContainer('ul')({
+ *   modelHook: useListModel,
+ * })((elemProps, Element, model) => {
+ *   return <Element {...elemProps}>{useListRenderItems(model, elemProps.children)}</Element>;
+ * });
+```
+ */
 function useListRenderItems(model, children) {
     var items = typeof children === 'function'
         ? model.state.isVirtualized

package/dist/commonjs/collection/lib/useListResetCursorOnBlur.d.ts

@@ -1,10 +1,21 @@
 import React from 'react';
 /**
- * Reset the cursor to the selected item when the list looses focus
+ * This elemProps hook resets the cursor when the list looses focus. By default,
+ * [useListItemRovingFocus](#use-list-item-roving-focus) will leave the last focused item as the
+ * focusable item in the list. Sometimes it is desireable to reset the cursor to the last selected
+ * item. For example, `Tabs.Item` uses this hook to reset the tab stop to the currently selected tab.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListResetCursorOnBlur, // adds the cursor reset to selected for roving tabindex
+ *   useListItemRovingFocus,
+ *   useListItemRegister
+ * );
+```
  */
 export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
     state: {
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -18,7 +29,7 @@ export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -57,7 +68,7 @@ export declare const useListResetCursorOnBlur: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     onKeyDown(event: React.KeyboardEvent): void;
     onFocus(): void;
     onBlur(): void;

package/dist/commonjs/collection/lib/useListResetCursorOnBlur.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListResetCursorOnBlur.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListResetCursorOnBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGhB,mBAAmB;;;;;OAetC,CAAC"}
+{"version":3,"file":"useListResetCursorOnBlur.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListResetCursorOnBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGhB,mBAAmB;;;;;OAetC,CAAC"}

package/dist/commonjs/collection/lib/useListResetCursorOnBlur.js

@@ -9,7 +9,18 @@ var common_1 = require("@workday/canvas-kit-react/common");
 var useListItemRovingFocus_1 = require("./useListItemRovingFocus");
 var useListModel_1 = require("./useListModel");
 /**
- * Reset the cursor to the selected item when the list looses focus
+ * This elemProps hook resets the cursor when the list looses focus. By default,
+ * [useListItemRovingFocus](#use-list-item-roving-focus) will leave the last focused item as the
+ * focusable item in the list. Sometimes it is desireable to reset the cursor to the last selected
+ * item. For example, `Tabs.Item` uses this hook to reset the tab stop to the currently selected tab.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListResetCursorOnBlur, // adds the cursor reset to selected for roving tabindex
+ *   useListItemRovingFocus,
+ *   useListItemRegister
+ * );
+```
  */
 exports.useListResetCursorOnBlur = common_1.createElemPropsHook(useListModel_1.useListModel)(function (_a) {
     var state = _a.state, events = _a.events;

package/dist/commonjs/collection/lib/useOverflowListItemMeasure.d.ts

@@ -1,10 +1,21 @@
+/**
+ * This elemProps hook measures a list item and reports it to an `OverflowListModel`. This is used
+ * in overflow detection.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useOverflowListItemMeasure,
+ *   useListRegisterItem,
+ * )
+ * ```
+ */
 export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
     state: {
         hiddenIds: string[];
         itemWidthCache: Record<string, number>;
         containerWidth: number;
         overflowTargetWidth: number;
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -18,7 +29,7 @@ export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: import("react").RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: import("react").MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -76,7 +87,7 @@ export declare const useOverflowListItemMeasure: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     ref: (instance: HTMLElement | null) => void;
     'aria-hidden': true | undefined;
     style: {};

package/dist/commonjs/collection/lib/useOverflowListItemMeasure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListItemMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListItemMeasure.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BtC,CAAC"}
+{"version":3,"file":"useOverflowListItemMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListItemMeasure.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BtC,CAAC"}

package/dist/commonjs/collection/lib/useOverflowListItemMeasure.js

@@ -7,6 +7,17 @@ var hiddenStyles = {
     position: 'absolute',
     left: -99999,
 };
+/**
+ * This elemProps hook measures a list item and reports it to an `OverflowListModel`. This is used
+ * in overflow detection.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useOverflowListItemMeasure,
+ *   useListRegisterItem,
+ * )
+ * ```
+ */
 exports.useOverflowListItemMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)(function (model, ref, elemProps) {
     if (elemProps === void 0) { elemProps = {}; }
     var _a = common_1.useLocalRef(ref), elementRef = _a.elementRef, localRef = _a.localRef;

package/dist/commonjs/collection/lib/useOverflowListMeasure.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
+/**
+ * This elemProps hook measures a list and reports it to an `OverflowListModel`. This is used in
+ * overflow detection.
+ */
 export declare const useOverflowListMeasure: <P extends {}, R>(model: {
     state: {
         hiddenIds: string[];
         itemWidthCache: Record<string, number>;
         containerWidth: number;
         overflowTargetWidth: number;
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -19,7 +23,7 @@ export declare const useOverflowListMeasure: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -77,7 +81,7 @@ export declare const useOverflowListMeasure: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     ref: (instance: HTMLElement | null) => void;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;

package/dist/commonjs/collection/lib/useOverflowListMeasure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowListMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAalC,CAAC"}
+{"version":3,"file":"useOverflowListMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAalC,CAAC"}

package/dist/commonjs/collection/lib/useOverflowListMeasure.js

@@ -23,6 +23,10 @@ exports.useOverflowListMeasure = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var useOverflowListModel_1 = require("./useOverflowListModel");
+/**
+ * This elemProps hook measures a list and reports it to an `OverflowListModel`. This is used in
+ * overflow detection.
+ */
 exports.useOverflowListMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)(function (model, ref) {
     var localRef = React.useRef(null);
     var resizeRef = common_1.useResizeObserver({