@workday/canvas-kit-react 12.1.0-937-next.0 → 12.1.0-945-next.0

package/collection/lib/useOverflowListItemMeasure.tsx

@@ -26,17 +26,21 @@ 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});
       };
     });
 

package/collection/lib/useOverflowListMeasure.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-import {createElemPropsHook, useForkRef, useResizeObserver} from '@workday/canvas-kit-react/common';
+import {
+  createElemPropsHook,
+  useMountLayout,
+  useResizeObserver,
+  useLocalRef,
+} from '@workday/canvas-kit-react/common';
 
 import {useOverflowListModel} from './useOverflowListModel';
 
@@ -9,12 +14,21 @@ import {useOverflowListModel} from './useOverflowListModel';
  * overflow detection.
  */
 export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
-  const localRef = React.useRef(null);
-  const {ref: resizeRef} = useResizeObserver({
+  const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
+  const gapProperty = model.state.orientation === 'horizontal' ? 'columnGap' : 'rowGap';
+
+  useResizeObserver({
     ref: localRef,
-    onResize: model.events.setContainerWidth,
+    onResize: model.events.setContainerSize,
+  });
+  useMountLayout(() => {
+    if (localRef.current) {
+      const styles = getComputedStyle(localRef.current);
+      model.events.setContainerGap({
+        size: styles.gap === 'normal' ? 0 : Number(styles[gapProperty].replace('px', '')),
+      });
+    }
   });
-  const elementRef = useForkRef(ref, resizeRef);
 
   return {
     ref: elementRef,

package/collection/lib/useOverflowListModel.tsx

@@ -5,49 +5,57 @@ import {useSelectionListModel} from './useSelectionListModel';
 import {Item} from './useBaseListModel';
 
 export function getHiddenIds(
-  containerWidth: number,
-  overflowTargetWidth: number,
-  itemWidthCache: Record<string, number>,
+  containerSize: number,
+  containerGap: number,
+  overflowTargetSize: number,
+  itemSizeCache: Record<string, number>,
   selectedIds: string[] | 'all',
-  items?: Item<any>[]
+  items: Item<any>[]
 ): string[] {
   /** Allows us to prioritize showing the selected item */
   let selectedKey: undefined | string;
   /** Tally of combined item widths. We'll add items that fit until the container is full */
-  let itemWidth = 0;
+  let itemSize = 0;
   /** Tally ids that won't fit inside the container. These will be used by components to hide
    * elements that won't fit in the container */
   const hiddenIds: string[] = [];
+  /** Track if gap should be calculated since gap doesn't apply to the width of the first item, only
+   * consecutive items */
+  let shouldAddGap = false;
+
   if (selectedIds !== 'all' && selectedIds.length) {
-    if (items?.length) {
+    if (items.length) {
       // If selectedIds[0] is not in items, use the first id from items
       selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
-    } else {
-      selectedKey = selectedIds[0];
     }
   }
 
   if (
-    Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
+    Object.keys(itemSizeCache).reduce(
+      (sum, key, index) => sum + itemSizeCache[key] + (index > 0 ? containerGap : 0),
+      0
+    ) <= containerSize
   ) {
     // All items fit, return empty array
     return [];
   } else if (selectedKey) {
-    if (itemWidthCache[selectedKey] + overflowTargetWidth > containerWidth) {
+    if (itemSizeCache[selectedKey] + overflowTargetSize > containerSize) {
       // If the selected item doesn't fit, only show overflow (all items hidden)
-      return Object.keys(itemWidthCache);
+      return Object.keys(itemSizeCache);
     } else {
       // at least the selected item and overflow target fit. Update our itemWidth with the sum
-      itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
+      itemSize += itemSizeCache[selectedKey] + overflowTargetSize;
+      shouldAddGap = true;
     }
   } else {
-    itemWidth += overflowTargetWidth;
+    itemSize += overflowTargetSize;
   }
 
-  for (const key in itemWidthCache) {
+  for (const key in itemSizeCache) {
     if (key !== selectedKey) {
-      itemWidth += itemWidthCache[key];
-      if (itemWidth > containerWidth) {
+      itemSize += itemSizeCache[key] + (shouldAddGap ? containerGap : 0);
+      shouldAddGap = true;
+      if (itemSize > containerSize) {
         hiddenIds.push(key);
       }
     }
@@ -73,12 +81,13 @@ export const useOverflowListModel = createModelHook({
   const shouldCalculateOverflow =
     config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
   const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
-  const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
-  const [containerWidth, setContainerWidth] = React.useState(0);
-  const containerWidthRef = React.useRef(0);
-  const itemWidthCacheRef = React.useRef(itemWidthCache);
+  const [itemSizeCache, setItemSizeCache] = React.useState<Record<string, number>>({});
+  const [containerSize, setContainerSize] = React.useState(0);
+  const [containerGap, setContainerGap] = React.useState(0);
+  const containerSizeRef = React.useRef(0);
+  const itemSizeCacheRef = React.useRef(itemSizeCache);
   const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
-  const overflowTargetWidthRef = React.useRef(0);
+  const overflowTargetSizeRef = React.useRef(0);
 
   const internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
 
@@ -94,8 +103,17 @@ export const useOverflowListModel = createModelHook({
   const state = {
     ...model.state,
     hiddenIds: internalHiddenIds,
-    itemWidthCache,
-    containerWidth,
+    itemSizeCache,
+    /**
+     * @deprecated Use `itemSizeCache` instead
+     */
+    itemWidthCache: itemSizeCache,
+    containerSize,
+    /**
+     * @deprecated Use `containerSize` instead
+     */
+    containerWidth: containerSize,
+    containerGap,
     overflowTargetWidth,
   };
 
@@ -104,9 +122,10 @@ export const useOverflowListModel = createModelHook({
     select(data: Parameters<typeof model.events.select>[0]) {
       const {selectedIds} = model.selection.select(data.id, state);
       const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
+        containerSizeRef.current,
+        containerGap,
+        overflowTargetSizeRef.current,
+        itemSizeCacheRef.current,
         selectedIds,
         config.items
       );
@@ -114,52 +133,93 @@ export const useOverflowListModel = createModelHook({
 
       setHiddenIds(ids);
     },
+    setContainerSize(data: {width?: number; height?: number}) {
+      containerSizeRef.current =
+        model.state.orientation === 'horizontal' ? data.width || 0 : data.height || 0;
+      setContainerSize(containerSizeRef.current);
+      const ids = getHiddenIds(
+        containerSizeRef.current,
+        containerGap,
+        overflowTargetSizeRef.current,
+        itemSizeCacheRef.current,
+        state.selectedIds,
+        config.items
+      );
+      setHiddenIds(ids);
+    },
+    /**
+     * @deprecated Use `setContainerSize` instead and pass both `width` and `height`
+     */
     setContainerWidth(data: {width?: number}) {
-      containerWidthRef.current = data.width || 0;
-      setContainerWidth(data.width || 0);
+      events.setContainerSize({width: data.width, height: 0});
+    },
+    setContainerGap(data: {size: number}) {
+      setContainerGap(data.size);
 
       const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
+        containerSizeRef.current,
+        data.size,
+        overflowTargetSizeRef.current,
+        itemSizeCacheRef.current,
         state.selectedIds,
         config.items
       );
 
       setHiddenIds(ids);
     },
+    setOverflowTargetSize(data: {width: number; height: number}) {
+      overflowTargetSizeRef.current =
+        model.state.orientation === 'horizontal' ? data.width || 0 : data.height || 0;
+      setOverflowTargetWidth(overflowTargetSizeRef.current);
+    },
+
+    /**
+     *
+     * @deprecated `setOverflowTargetWidth` is deprecated. Please use `setOverflowTargetSize` and pass in the `width` and set `height` to `0`.
+     */
     setOverflowTargetWidth(data: {width: number}) {
-      overflowTargetWidthRef.current = data.width;
-      setOverflowTargetWidth(data.width);
+      overflowTargetSizeRef.current = data.width;
+      events.setOverflowTargetSize({width: overflowTargetSizeRef.current, height: 0});
     },
+
+    /**
+     *
+     * @deprecated `addItemWidth` is deprecated. Please use `addItemSize` and set the `width`
+     */
     addItemWidth(data: {id: string; width: number}) {
-      itemWidthCacheRef.current = {
-        ...itemWidthCacheRef.current,
-        [data.id]: data.width,
+      events.addItemSize({id: data.id, width: data.width, height: 0});
+    },
+    addItemSize(data: {id: string; width: number; height: number}) {
+      itemSizeCacheRef.current = {
+        ...itemSizeCacheRef.current,
+        [data.id]: model.state.orientation === 'horizontal' ? data.width : data.height,
       };
 
-      setItemWidthCache(itemWidthCacheRef.current);
+
+      setItemSizeCache(itemSizeCacheRef.current);
 
       const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
+        containerSizeRef.current,
+        containerGap,
+        overflowTargetSizeRef.current,
+        itemSizeCacheRef.current,
         state.selectedIds,
         config.items
       );
 
       setHiddenIds(ids);
     },
-    removeItemWidth(data: {id: string}) {
-      const newCache = {...itemWidthCacheRef.current};
+    removeItemSize(data: {id: string}) {
+      const newCache = {...itemSizeCacheRef.current};
       delete newCache[data.id];
-      itemWidthCacheRef.current = newCache;
-      setItemWidthCache(itemWidthCacheRef.current);
+      itemSizeCacheRef.current = newCache;
+      setItemSizeCache(itemSizeCacheRef.current);
 
       const ids = getHiddenIds(
-        containerWidthRef.current,
-        overflowTargetWidthRef.current,
-        itemWidthCacheRef.current,
+        containerSizeRef.current,
+        containerGap,
+        overflowTargetSizeRef.current,
+        itemSizeCacheRef.current,
         state.selectedIds !== 'all'
           ? state.selectedIds.filter(sId => data.id !== sId)
           : state.selectedIds,
@@ -168,6 +228,13 @@ export const useOverflowListModel = createModelHook({
 
       setHiddenIds(ids);
     },
+    /**
+     *
+     * @deprecated `removeItemWidth` is deprecated. Please use `removeItemSize`.
+     */
+    removeItemWidth(data: {id: string}) {
+      events.removeItemSize({id: data.id});
+    },
     addHiddenKey(data: {id: string}) {
       setHiddenIds(ids => ids.concat(data.id));
     },

package/collection/lib/useOverflowListTarget.tsx

@@ -24,11 +24,15 @@ export const useOverflowListTarget = createElemPropsHook(useOverflowListModel)((
     if (localRef.current) {
       const styles = getComputedStyle(localRef.current);
 
-      model.events.setOverflowTargetWidth({
+      model.events.setOverflowTargetSize({
         width:
           localRef.current.offsetWidth +
           parseFloat(styles.marginLeft) +
           parseFloat(styles.marginRight),
+        height:
+          localRef.current.offsetWidth +
+          parseFloat(styles.marginTop) +
+          parseFloat(styles.marginBottom),
       });
     }
   });