@workday/canvas-kit-react 13.0.0-alpha.944-next.0 → 13.0.0-alpha.950-next.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook, useMountLayout } from '@workday/canvas-kit-react/common';
 import { orientationKeyMap } from './keyUtils';
 import { useListModel } from './useListModel';
 /**
@@ -18,6 +18,13 @@ import { useListModel } from './useListModel';
  */
 export const useListResetCursorOnBlur = createElemPropsHook(useListModel)(({ state, events }) => {
     const programmaticFocusRef = React.useRef(false);
+    const requestAnimationFrameRef = React.useRef(0);
+    useMountLayout(() => {
+        return () => {
+            // Cancelling the animation frame prevents React unmount errors
+            cancelAnimationFrame(requestAnimationFrameRef.current);
+        };
+    });
     return {
         onKeyDown(event) {
             // Programmatic focus only on any focus change via keyboard
@@ -30,7 +37,12 @@ export const useListResetCursorOnBlur = createElemPropsHook(useListModel)(({ sta
         },
         onBlur() {
             if (!programmaticFocusRef.current) {
-                events.goTo({ id: state.selectedIds[0] });
+                // use an animation frame to wait for any other model changes that may happen on a blur
+                requestAnimationFrameRef.current = requestAnimationFrame(() => {
+                    if (state.selectedIds[0] !== state.cursorId) {
+                        events.goTo({ id: state.selectedIds[0] });
+                    }
+                });
             }
         },
     };

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

@@ -12,7 +12,9 @@
 export declare const useOverflowListItemMeasure: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         hiddenIds: string[];
+        itemSizeCache: Record<string, number>;
         itemWidthCache: Record<string, number>;
+        containerSize: number;
         containerWidth: number;
         containerGap: number;
         overflowTargetWidth: number;
@@ -44,12 +46,20 @@ export declare const useOverflowListItemMeasure: import("@workday/canvas-kit-rea
         select(data: {
             id: string;
         }): void;
+        setContainerSize(data: {
+            width?: number | undefined;
+            height?: number | undefined;
+        }): void;
         setContainerWidth(data: {
             width?: number | undefined;
         }): void;
         setContainerGap(data: {
             size: number;
         }): void;
+        setOverflowTargetSize(data: {
+            width: number;
+            height: number;
+        }): void;
         setOverflowTargetWidth(data: {
             width: number;
         }): void;
@@ -57,6 +67,14 @@ export declare const useOverflowListItemMeasure: import("@workday/canvas-kit-rea
             id: string;
             width: number;
         }): void;
+        addItemSize(data: {
+            id: string;
+            width: number;
+            height: number;
+        }): void;
+        removeItemSize(data: {
+            id: string;
+        }): void;
         removeItemWidth(data: {
             id: string;
         }): void;
@@ -69,6 +87,11 @@ export declare const useOverflowListItemMeasure: import("@workday/canvas-kit-rea
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | import("react").SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;

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

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

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

@@ -21,15 +21,18 @@ export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListMod
     useMountLayout(() => {
         if (localRef.current) {
             const styles = getComputedStyle(localRef.current);
-            model.events.addItemWidth({
+            model.events.addItemSize({
                 id: name,
                 width: localRef.current.offsetWidth +
                     parseFloat(styles.marginLeft) +
                     parseFloat(styles.marginRight),
+                height: localRef.current.offsetHeight +
+                    parseFloat(styles.marginTop) +
+                    parseFloat(styles.marginBottom),
             });
         }
         return () => {
-            model.events.removeItemWidth({ id: name });
+            model.events.removeItemSize({ id: name });
         };
     });
     const hidden = model.state.hiddenIds.includes(name);

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

@@ -6,7 +6,9 @@ import * as React from 'react';
 export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         hiddenIds: string[];
+        itemSizeCache: Record<string, number>;
         itemWidthCache: Record<string, number>;
+        containerSize: number;
         containerWidth: number;
         containerGap: number;
         overflowTargetWidth: number;
@@ -38,12 +40,20 @@ export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/c
         select(data: {
             id: string;
         }): void;
+        setContainerSize(data: {
+            width?: number | undefined;
+            height?: number | undefined;
+        }): void;
         setContainerWidth(data: {
             width?: number | undefined;
         }): void;
         setContainerGap(data: {
             size: number;
         }): void;
+        setOverflowTargetSize(data: {
+            width: number;
+            height: number;
+        }): void;
         setOverflowTargetWidth(data: {
             width: number;
         }): void;
@@ -51,6 +61,14 @@ export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/c
             id: string;
             width: number;
         }): void;
+        addItemSize(data: {
+            id: string;
+            width: number;
+            height: number;
+        }): void;
+        removeItemSize(data: {
+            id: string;
+        }): void;
         removeItemWidth(data: {
             id: string;
         }): void;
@@ -63,6 +81,11 @@ export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/c
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;

package/dist/es6/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;AAW/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBjC,CAAC"}
+{"version":3,"file":"useOverflowListMeasure.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useOverflowListMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBjC,CAAC"}

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

@@ -9,7 +9,7 @@ export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)(
     const gapProperty = model.state.orientation === 'horizontal' ? 'columnGap' : 'rowGap';
     useResizeObserver({
         ref: localRef,
-        onResize: model.events.setContainerWidth,
+        onResize: model.events.setContainerSize,
     });
     useMountLayout(() => {
         if (localRef.current) {