@workday/canvas-kit-react 11.1.20 → 11.1.21

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,
   });
-  const elementRef = useForkRef(ref, resizeRef);
+  useMountLayout(() => {
+    if (localRef.current) {
+      const styles = getComputedStyle(localRef.current);
+      model.events.setContainerGap({
+        size: styles.gap === 'normal' ? 0 : Number(styles[gapProperty].replace('px', '')),
+      });
+    }
+  });
 
   return {
     ref: elementRef,

package/dist/commonjs/action-bar/lib/ActionBarList.d.ts

@@ -109,7 +109,7 @@ export declare const useActionBarList: import("@workday/canvas-kit-react/common"
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
-    ref: (instance: unknown) => void;
+    ref: (instance: HTMLElement | null) => void;
 }>;
 export declare const ActionBarList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ActionBarListProps<any>, {
     state: {

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

@@ -90,6 +90,6 @@ export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/c
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
-    ref: (instance: unknown) => void;
+    ref: (instance: HTMLElement | null) => void;
 }>;
 //# sourceMappingURL=useOverflowListMeasure.d.ts.map

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;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWjC,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/commonjs/collection/lib/useOverflowListMeasure.js

@@ -1,26 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowListMeasure = void 0;
-const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const useOverflowListModel_1 = require("./useOverflowListModel");
 /**
@@ -28,12 +8,20 @@ const useOverflowListModel_1 = require("./useOverflowListModel");
  * overflow detection.
  */
 exports.useOverflowListMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)((model, ref) => {
-    const localRef = React.useRef(null);
-    const { ref: resizeRef } = common_1.useResizeObserver({
+    const { elementRef, localRef } = common_1.useLocalRef(ref);
+    const gapProperty = model.state.orientation === 'horizontal' ? 'columnGap' : 'rowGap';
+    common_1.useResizeObserver({
         ref: localRef,
         onResize: model.events.setContainerWidth,
     });
-    const elementRef = common_1.useForkRef(ref, resizeRef);
+    common_1.useMountLayout(() => {
+        if (localRef.current) {
+            const styles = getComputedStyle(localRef.current);
+            model.events.setContainerGap({
+                size: styles.gap === 'normal' ? 0 : Number(styles[gapProperty].replace('px', '')),
+            });
+        }
+    });
     return {
         ref: elementRef,
     };

package/dist/commonjs/tabs/lib/TabsList.d.ts

@@ -186,7 +186,7 @@ export declare const useTabsList: import("@workday/canvas-kit-react/common").Beh
     readonly role: "tablist";
     readonly overflowX: "auto" | undefined;
 } & {
-    ref: (instance: unknown) => void;
+    ref: (instance: HTMLElement | null) => void;
 } & {
     onKeyDown(event: React.KeyboardEvent<Element>): void;
     onFocus(): void;

package/dist/es6/action-bar/lib/ActionBarList.d.ts

@@ -109,7 +109,7 @@ export declare const useActionBarList: import("@workday/canvas-kit-react/common"
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
-    ref: (instance: unknown) => void;
+    ref: (instance: HTMLElement | null) => void;
 }>;
 export declare const ActionBarList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ActionBarListProps<any>, {
     state: {

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

@@ -90,6 +90,6 @@ export declare const useOverflowListMeasure: import("@workday/canvas-kit-react/c
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, {
-    ref: (instance: unknown) => void;
+    ref: (instance: HTMLElement | null) => void;
 }>;
 //# sourceMappingURL=useOverflowListMeasure.d.ts.map

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;AAM/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWjC,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

@@ -1,17 +1,24 @@
-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';
 /**
  * This elemProps hook measures a list and reports it to an `OverflowListModel`. This is used in
  * overflow detection.
  */
 export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
-    const localRef = React.useRef(null);
-    const { ref: resizeRef } = useResizeObserver({
+    const { elementRef, localRef } = useLocalRef(ref);
+    const gapProperty = model.state.orientation === 'horizontal' ? 'columnGap' : 'rowGap';
+    useResizeObserver({
         ref: localRef,
         onResize: model.events.setContainerWidth,
     });
-    const elementRef = useForkRef(ref, resizeRef);
+    useMountLayout(() => {
+        if (localRef.current) {
+            const styles = getComputedStyle(localRef.current);
+            model.events.setContainerGap({
+                size: styles.gap === 'normal' ? 0 : Number(styles[gapProperty].replace('px', '')),
+            });
+        }
+    });
     return {
         ref: elementRef,
     };

package/dist/es6/tabs/lib/TabsList.d.ts

@@ -186,7 +186,7 @@ export declare const useTabsList: import("@workday/canvas-kit-react/common").Beh
     readonly role: "tablist";
     readonly overflowX: "auto" | undefined;
 } & {
-    ref: (instance: unknown) => void;
+    ref: (instance: HTMLElement | null) => void;
 } & {
     onKeyDown(event: React.KeyboardEvent<Element>): void;
     onFocus(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.1.20",
+  "version": "11.1.21",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.1.20",
-    "@workday/canvas-kit-styling": "^11.1.20",
+    "@workday/canvas-kit-popup-stack": "^11.1.21",
+    "@workday/canvas-kit-styling": "^11.1.21",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "a46b2245c28110769ba8aa8393a2573763918701"
+  "gitHead": "2a7e546a8df8c8ff4340f9b2be26e678244f720b"
 }