@workday/canvas-kit-react 13.0.5 → 13.1.0-1130-next.0

package/collection/index.ts

@@ -36,4 +36,3 @@ export {
   getCursor,
   isCursor,
 } from './lib/useCursorListModel';
-export {VirtualItem, ScrollToOffsetOptions} from './lib/react-virtual';

package/collection/lib/ListBox.tsx

@@ -46,7 +46,7 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
   return {
     style: {
       position: 'relative' as const,
-      height: model.state.isVirtualized ? model.state.UNSTABLE_virtual.totalSize : undefined,
+      height: model.state.isVirtualized ? model.state.UNSTABLE_virtual.getTotalSize() : undefined,
     },
   };
 });

package/collection/lib/useBaseListModel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useVirtual} from './react-virtual';
+import {useVirtualizer} from '@tanstack/react-virtual';
 
 import {useUniqueId, createModelHook, Generic} from '@workday/canvas-kit-react/common';
 
@@ -159,14 +159,16 @@ export const useBaseListModel = createModelHook({
   );
   const [staticItems, setStaticItems] = React.useState<Item<Generic>[]>([]);
 
-  const UNSTABLE_virtual = useVirtual({
-    size: items.length,
-    parentRef: containerRef,
+  const UNSTABLE_virtual = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => containerRef.current,
     estimateSize: React.useCallback(() => UNSTABLE_defaultItemHeight, [UNSTABLE_defaultItemHeight]),
     horizontal: config.orientation === 'horizontal',
     overscan: 3, // overscan of 3 helps rapid navigation
   });
 
+
+
   // Force Typescript to recognize the `Generic` symbol
   const genericState: {items: Item<Generic>[]} = {
     items: items.length ? items : staticItems,

package/collection/lib/useListItemRegister.tsx

@@ -43,7 +43,10 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
     const [localId, setLocalId] = React.useState(elemProps['data-id'] || item?.id || '');
 
     const {localRef, elementRef} = useLocalRef(
-      useForkRef(ref as React.Ref<HTMLElement>, virtual?.measureRef)
+      useForkRef(
+        ref as React.Ref<HTMLElement>,
+        virtual ? model.state.UNSTABLE_virtual.measureElement : null
+      )
     );
 
     // if the list is virtual, force the correct styling. Without this, weird things happen...
@@ -96,8 +99,9 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
       ref: elementRef,
       'data-id': localId,
       disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
-      'aria-setsize': virtual ? state.UNSTABLE_virtual.totalSize : undefined,
+      'aria-setsize': virtual ? state.UNSTABLE_virtual.getTotalSize() : undefined,
       'aria-posinset': virtual ? item!.index + 1 : undefined,
+      'data-index': virtual ? item!.index : undefined,
       style,
       id: slugify(`${state.id}-${localId}`),
     };

package/collection/lib/useListLoader.ts

@@ -281,7 +281,8 @@ export function useListLoader<
     })
   ) as ReturnType<typeof useListModel>;
 
-  const {virtualItems} = model.state.UNSTABLE_virtual;
+  const {getVirtualItems} = model.state.UNSTABLE_virtual;
+  const virtualItems = getVirtualItems();
 
   const {state} = model;
   const stateRef = React.useRef(state);

package/collection/lib/useListRenderItem.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Generic} from '@workday/canvas-kit-react/common';
 
 import {Item, useBaseListModel} from './useBaseListModel';
-import {VirtualItem} from './react-virtual';
+import {VirtualItem} from '@tanstack/react-virtual';
 
 export const ListRenderItemContext = React.createContext<{
   item?: Item<Generic>;
@@ -31,7 +31,7 @@ export function useListRenderItems<T>(
   const items =
     typeof children === 'function'
       ? model.state.isVirtualized
-        ? model.state.UNSTABLE_virtual.virtualItems.map(virtual => {
+        ? model.state.UNSTABLE_virtual.getVirtualItems().map(virtual => {
             const item = model.state.items[virtual.index];
             const child = children(item.value, virtual.index);
             return (

package/common/lib/theming/types.ts

@@ -240,6 +240,7 @@ export interface CanvasTheme {
 
 /**
  * Indicates a component is themeable with a CanvasTheme
+ * @deprecated `Themeable` is deprecated. If you want to theme your application, please use `<CanvasProvider theme={{canvas: {palette: {primary: {main: 'orange'}}}}} />` at the root of your application or use our CSS tokens to change individual component styles as seen in our [Button docs](https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs#custom-styles).
  */
 export interface Themeable {
   theme?: EmotionCanvasTheme;