@workday/canvas-kit-react 11.2.6 → 11.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/commonjs/icon/lib/SystemIconCircle.d.ts +2 -1
  2. package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map +1 -1
  3. package/dist/commonjs/icon/lib/SystemIconCircle.js +6 -5
  4. package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.d.ts.map +1 -1
  5. package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js +4 -9
  6. package/dist/es6/icon/lib/SystemIconCircle.d.ts +2 -1
  7. package/dist/es6/icon/lib/SystemIconCircle.d.ts.map +1 -1
  8. package/dist/es6/icon/lib/SystemIconCircle.js +6 -5
  9. package/dist/es6/popup/lib/hooks/useDisableBodyScroll.d.ts.map +1 -1
  10. package/dist/es6/popup/lib/hooks/useDisableBodyScroll.js +4 -9
  11. package/icon/lib/SystemIconCircle.tsx +16 -8
  12. package/package.json +4 -4
  13. package/popup/lib/hooks/useDisableBodyScroll.ts +7 -10
package/dist/commonjs/icon/lib/SystemIconCircle.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { SystemIconProps } from './SystemIcon';
2
2
  import { CanvasSystemIcon } from '@workday/design-assets-types';
3
+ import { CSProps } from '@workday/canvas-kit-styling';
3
4
  export declare enum SystemIconCircleSize {
4
5
  xs = 16,
5
6
  s = 24,
@@ -8,7 +9,7 @@ export declare enum SystemIconCircleSize {
8
9
  xl = 64,
9
10
  xxl = 120
10
11
  }
11
- export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
12
+ export interface SystemIconCircleProps extends CSProps, Pick<SystemIconProps, 'shouldMirror'> {
12
13
  /**
13
14
  * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
14
15
  * @default base.soap300
package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FAwB3B,CAAC"}
1
+ {"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAsC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAIzF,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAC3F;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FA+B3B,CAAC"}
package/dist/commonjs/icon/lib/SystemIconCircle.js CHANGED
@@ -24,6 +24,7 @@ const React = __importStar(require("react"));
24
24
  const tokens_1 = require("@workday/canvas-kit-react/tokens");
25
25
  const SystemIcon_1 = require("./SystemIcon");
26
26
  const common_1 = require("@workday/canvas-kit-react/common");
27
+ const layout_1 = require("@workday/canvas-kit-react/layout");
27
28
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
28
29
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
29
30
  const Svg_1 = require("./Svg");
@@ -42,19 +43,19 @@ const systemIconCircleStencil = canvas_kit_styling_1.createStencil({
42
43
  backgroundColor: '',
43
44
  iconColor: '',
44
45
  },
45
- base: { name: "8a694b", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-554859, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-9f0d45:var(--iconColor-system-icon-circle-554859);& img{width:100%;height:100%;}" }
46
- }, "system-icon-circle-554859");
46
+ base: { name: "422e87", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-a3dd9b, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-9f0d45:var(--iconColor-system-icon-circle-a3dd9b);& img{width:100%;height:100%;}" }
47
+ }, "system-icon-circle-a3dd9b");
47
48
  exports.SystemIconCircle = common_1.createComponent('span')({
48
49
  displayName: 'SystemIconCircle',
49
- Component: ({ background, size, icon, shouldMirror }, ref, Element) => {
50
+ Component: ({ background, size, icon, shouldMirror, ...elemProps }, ref, Element) => {
50
51
  // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
51
52
  const backgroundFallback = background && !background.startsWith('--') ? background : tokens_1.colors.soap200;
52
53
  const iconColor = common_1.pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
53
- return (React.createElement("div", Object.assign({}, systemIconCircleStencil({
54
+ return (React.createElement("div", Object.assign({}, layout_1.mergeStyles(elemProps, systemIconCircleStencil({
54
55
  containerSize: typeof size === 'number' ? canvas_kit_styling_1.px2rem(size) : size,
55
56
  backgroundColor: Svg_1.transformColorNameToToken(background),
56
57
  iconColor,
57
- })),
58
+ }))),
58
59
  React.createElement(SystemIcon_1.SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror })));
59
60
  },
60
61
  });
package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;MAwB/B,CAAC"}
1
+ {"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;MAgB/B,CAAC"}
package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js CHANGED
@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.useDisableBodyScroll = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const common_1 = require("@workday/canvas-kit-react/common");
9
+ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
9
10
  const usePopupModel_1 = require("./usePopupModel");
11
+ const disableBodyScrollStyles = canvas_kit_styling_1.createStyles({ name: "806269", styles: "overflow:hidden !important;" });
10
12
  /**
11
13
  * Disables body scroll by adding `overflow: hidden` to the body element. This effectively prevents
12
14
  * page scrolling while the popup is visible.
@@ -20,16 +22,9 @@ exports.useDisableBodyScroll = common_1.createElemPropsHook(usePopupModel_1.useP
20
22
  if (!visible) {
21
23
  return;
22
24
  }
23
- const overflowY = document.body.style.overflowY;
24
- const overflowX = document.body.style.overflowX;
25
- const overflow = document.body.style.overflow;
26
- document.body.style.overflow = 'hidden';
27
- document.body.style.overflowY = 'hidden';
28
- document.body.style.overflowX = 'hidden';
25
+ document.body.classList.add(disableBodyScrollStyles);
29
26
  return () => {
30
- document.body.style.overflow = overflow;
31
- document.body.style.overflowY = overflowY;
32
- document.body.style.overflowX = overflowX;
27
+ document.body.classList.remove(disableBodyScrollStyles);
33
28
  };
34
29
  }, [visible]);
35
30
  return {};
package/dist/es6/icon/lib/SystemIconCircle.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { SystemIconProps } from './SystemIcon';
2
2
  import { CanvasSystemIcon } from '@workday/design-assets-types';
3
+ import { CSProps } from '@workday/canvas-kit-styling';
3
4
  export declare enum SystemIconCircleSize {
4
5
  xs = 16,
5
6
  s = 24,
@@ -8,7 +9,7 @@ export declare enum SystemIconCircleSize {
8
9
  xl = 64,
9
10
  xxl = 120
10
11
  }
11
- export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
12
+ export interface SystemIconCircleProps extends CSProps, Pick<SystemIconProps, 'shouldMirror'> {
12
13
  /**
13
14
  * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
14
15
  * @default base.soap300
package/dist/es6/icon/lib/SystemIconCircle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FAwB3B,CAAC"}
1
+ {"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAsC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAIzF,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAC3F;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FA+B3B,CAAC"}
package/dist/es6/icon/lib/SystemIconCircle.js CHANGED
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
  import { colors } from '@workday/canvas-kit-react/tokens';
3
3
  import { SystemIcon, systemIconStencil } from './SystemIcon';
4
4
  import { createComponent, pickForegroundColor } from '@workday/canvas-kit-react/common';
5
+ import { mergeStyles } from '@workday/canvas-kit-react/layout';
5
6
  import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
6
7
  import { base, system } from '@workday/canvas-tokens-web';
7
8
  import { transformColorNameToToken } from './Svg';
@@ -20,19 +21,19 @@ const systemIconCircleStencil = createStencil({
20
21
  backgroundColor: '',
21
22
  iconColor: '',
22
23
  },
23
- base: { name: "8a694b", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-554859, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-554859, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-9f0d45:var(--iconColor-system-icon-circle-554859);& img{width:100%;height:100%;}" }
24
- }, "system-icon-circle-554859");
24
+ base: { name: "422e87", styles: "box-sizing:border-box;background:var(--backgroundColor-system-icon-circle-a3dd9b, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10));--size-svg-a30d66:calc(var(--containerSize-system-icon-circle-a3dd9b, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-9f0d45:var(--iconColor-system-icon-circle-a3dd9b);& img{width:100%;height:100%;}" }
25
+ }, "system-icon-circle-a3dd9b");
25
26
  export const SystemIconCircle = createComponent('span')({
26
27
  displayName: 'SystemIconCircle',
27
- Component: ({ background, size, icon, shouldMirror }, ref, Element) => {
28
+ Component: ({ background, size, icon, shouldMirror, ...elemProps }, ref, Element) => {
28
29
  // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
29
30
  const backgroundFallback = background && !background.startsWith('--') ? background : colors.soap200;
30
31
  const iconColor = pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
31
- return (React.createElement("div", Object.assign({}, systemIconCircleStencil({
32
+ return (React.createElement("div", Object.assign({}, mergeStyles(elemProps, systemIconCircleStencil({
32
33
  containerSize: typeof size === 'number' ? px2rem(size) : size,
33
34
  backgroundColor: transformColorNameToToken(background),
34
35
  iconColor,
35
- })),
36
+ }))),
36
37
  React.createElement(SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror })));
37
38
  },
38
39
  });
package/dist/es6/popup/lib/hooks/useDisableBodyScroll.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;MAwB/B,CAAC"}
1
+ {"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;MAgB/B,CAAC"}
package/dist/es6/popup/lib/hooks/useDisableBodyScroll.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  import { createElemPropsHook } from '@workday/canvas-kit-react/common';
3
+ import { createStyles } from '@workday/canvas-kit-styling';
3
4
  import { usePopupModel } from './usePopupModel';
5
+ const disableBodyScrollStyles = createStyles({ name: "806269", styles: "overflow:hidden !important;" });
4
6
  /**
5
7
  * Disables body scroll by adding `overflow: hidden` to the body element. This effectively prevents
6
8
  * page scrolling while the popup is visible.
@@ -14,16 +16,9 @@ export const useDisableBodyScroll = createElemPropsHook(usePopupModel)(model =>
14
16
  if (!visible) {
15
17
  return;
16
18
  }
17
- const overflowY = document.body.style.overflowY;
18
- const overflowX = document.body.style.overflowX;
19
- const overflow = document.body.style.overflow;
20
- document.body.style.overflow = 'hidden';
21
- document.body.style.overflowY = 'hidden';
22
- document.body.style.overflowX = 'hidden';
19
+ document.body.classList.add(disableBodyScrollStyles);
23
20
  return () => {
24
- document.body.style.overflow = overflow;
25
- document.body.style.overflowY = overflowY;
26
- document.body.style.overflowX = overflowX;
21
+ document.body.classList.remove(disableBodyScrollStyles);
27
22
  };
28
23
  }, [visible]);
29
24
  return {};
package/icon/lib/SystemIconCircle.tsx CHANGED
@@ -3,7 +3,8 @@ import {colors} from '@workday/canvas-kit-react/tokens';
3
3
  import {SystemIcon, SystemIconProps, systemIconStencil} from './SystemIcon';
4
4
  import {CanvasSystemIcon} from '@workday/design-assets-types';
5
5
  import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
6
- import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
6
+ import {mergeStyles} from '@workday/canvas-kit-react/layout';
7
+ import {calc, createStencil, cssVar, px2rem, CSProps} from '@workday/canvas-kit-styling';
7
8
  import {base, system} from '@workday/canvas-tokens-web';
8
9
  import {transformColorNameToToken} from './Svg';
9
10
 
@@ -16,7 +17,7 @@ export enum SystemIconCircleSize {
16
17
  xxl = 120,
17
18
  }
18
19
 
19
- export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
20
+ export interface SystemIconCircleProps extends CSProps, Pick<SystemIconProps, 'shouldMirror'> {
20
21
  /**
21
22
  * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
22
23
  * @default base.soap300
@@ -61,7 +62,11 @@ const systemIconCircleStencil = createStencil({
61
62
 
62
63
  export const SystemIconCircle = createComponent('span')({
63
64
  displayName: 'SystemIconCircle',
64
- Component: ({background, size, icon, shouldMirror}: SystemIconCircleProps, ref, Element) => {
65
+ Component: (
66
+ {background, size, icon, shouldMirror, ...elemProps}: SystemIconCircleProps,
67
+ ref,
68
+ Element
69
+ ) => {
65
70
  // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
66
71
  const backgroundFallback =
67
72
  background && !background.startsWith('--') ? background : colors.soap200;
@@ -73,11 +78,14 @@ export const SystemIconCircle = createComponent('span')({
73
78
 
74
79
  return (
75
80
  <div
76
- {...systemIconCircleStencil({
77
- containerSize: typeof size === 'number' ? px2rem(size) : size,
78
- backgroundColor: transformColorNameToToken(background),
79
- iconColor,
80
- })}
81
+ {...mergeStyles(
82
+ elemProps,
83
+ systemIconCircleStencil({
84
+ containerSize: typeof size === 'number' ? px2rem(size) : size,
85
+ backgroundColor: transformColorNameToToken(background),
86
+ iconColor,
87
+ })
88
+ )}
81
89
  >
82
90
  <SystemIcon as={Element} ref={ref} icon={icon} shouldMirror={shouldMirror} />
83
91
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.2.6",
3
+ "version": "11.2.8",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^11.2.6",
53
- "@workday/canvas-kit-styling": "^11.2.6",
52
+ "@workday/canvas-kit-popup-stack": "^11.2.8",
53
+ "@workday/canvas-kit-styling": "^11.2.8",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^2.0.0",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "91fe31790985359550880acd17a09a6294b0fe86"
70
+ "gitHead": "155f180b0392c0bd8f09c48c86168661b95d9e4e"
71
71
  }
package/popup/lib/hooks/useDisableBodyScroll.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import React from 'react';
2
2
 
3
3
  import {createElemPropsHook} from '@workday/canvas-kit-react/common';
4
+ import {createStyles} from '@workday/canvas-kit-styling';
4
5
 
5
6
  import {usePopupModel} from './usePopupModel';
6
7
 
8
+ const disableBodyScrollStyles = createStyles({
9
+ overflow: 'hidden !important',
10
+ });
11
+
7
12
  /**
8
13
  * Disables body scroll by adding `overflow: hidden` to the body element. This effectively prevents
9
14
  * page scrolling while the popup is visible.
@@ -19,18 +24,10 @@ export const useDisableBodyScroll = createElemPropsHook(usePopupModel)(model =>
19
24
  return;
20
25
  }
21
26
 
22
- const overflowY = document.body.style.overflowY;
23
- const overflowX = document.body.style.overflowX;
24
- const overflow = document.body.style.overflow;
25
-
26
- document.body.style.overflow = 'hidden';
27
- document.body.style.overflowY = 'hidden';
28
- document.body.style.overflowX = 'hidden';
27
+ document.body.classList.add(disableBodyScrollStyles);
29
28
 
30
29
  return () => {
31
- document.body.style.overflow = overflow;
32
- document.body.style.overflowY = overflowY;
33
- document.body.style.overflowX = overflowX;
30
+ document.body.classList.remove(disableBodyScrollStyles);
34
31
  };
35
32
  }, [visible]);
36
33