@workday/canvas-kit-react 6.3.0 → 6.3.4

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 (15) hide show
  1. package/dist/commonjs/popup/lib/Popper.d.ts +5 -0
  2. package/dist/commonjs/popup/lib/Popper.d.ts.map +1 -1
  3. package/dist/commonjs/popup/lib/Popper.js +9 -8
  4. package/dist/commonjs/popup/lib/hooks/useInitialFocus.d.ts.map +1 -1
  5. package/dist/commonjs/popup/lib/hooks/useInitialFocus.js +5 -3
  6. package/dist/es6/popup/lib/Popper.d.ts +5 -0
  7. package/dist/es6/popup/lib/Popper.d.ts.map +1 -1
  8. package/dist/es6/popup/lib/Popper.js +9 -8
  9. package/dist/es6/popup/lib/hooks/useInitialFocus.d.ts.map +1 -1
  10. package/dist/es6/popup/lib/hooks/useInitialFocus.js +5 -3
  11. package/package.json +5 -5
  12. package/popup/lib/Popper.tsx +13 -5
  13. package/popup/lib/hooks/useInitialFocus.tsx +3 -1
  14. package/ts3.5/dist/commonjs/popup/lib/Popper.d.ts +5 -0
  15. package/ts3.5/dist/es6/popup/lib/Popper.d.ts +5 -0
package/dist/commonjs/popup/lib/Popper.d.ts CHANGED
@@ -65,6 +65,11 @@ export interface PopperProps {
65
65
  * @default true
66
66
  */
67
67
  portal?: boolean;
68
+ /**
69
+ * Reference to the PopperJS instance. Useful for making direct method calls on the popper
70
+ * instance like `update`.
71
+ */
72
+ popperInstanceRef?: React.Ref<PopperJS.Instance>;
68
73
  }
69
74
  export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
70
75
  //# sourceMappingURL=Popper.d.ts.map
package/dist/commonjs/popup/lib/Popper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAI7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
1
+ {"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
package/dist/commonjs/popup/lib/Popper.js CHANGED
@@ -40,6 +40,7 @@ var React = __importStar(require("react"));
40
40
  var ReactDOM = __importStar(require("react-dom"));
41
41
  var PopperJS = __importStar(require("@popperjs/core"));
42
42
  var hooks_1 = require("./hooks");
43
+ var common_1 = require("@workday/canvas-kit-react/common");
43
44
  exports.Popper = React.forwardRef(function (_a, ref) {
44
45
  var _b = _a.portal, portal = _b === void 0 ? true : _b, _c = _a.open, open = _c === void 0 ? true : _c, elemProps = __rest(_a, ["portal", "open"]);
45
46
  if (!open) {
@@ -63,10 +64,10 @@ var defaultPopperOptions = {};
63
64
  // Popper bails early if `open` is false and React hooks cannot be called conditionally,
64
65
  // so we're breaking out the open version into another component.
65
66
  var OpenPopper = React.forwardRef(function (_a, ref) {
66
- var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, containerElement = _a.containerElement;
67
+ var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, containerElement = _a.containerElement, popperInstanceRef = _a.popperInstanceRef;
67
68
  var firstRender = React.useRef(true);
68
- var popperInstance = React.useRef();
69
- var _d = React.useState(popperPlacement), placement = _d[0], setPlacement = _d[1];
69
+ var _d = common_1.useLocalRef(popperInstanceRef), localRef = _d.localRef, elementRef = _d.elementRef;
70
+ var _e = React.useState(popperPlacement), placement = _e[0], setPlacement = _e[1];
70
71
  var stackRef = hooks_1.usePopupStack(ref, anchorElement);
71
72
  var placementModifier = React.useMemo(function () {
72
73
  return {
@@ -90,10 +91,10 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
90
91
  return undefined;
91
92
  }
92
93
  if (stackRef.current) {
93
- popperInstance.current = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
94
+ var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
95
+ elementRef(instance_1); // update the ref with the instance
94
96
  return function () {
95
- var _a;
96
- (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.destroy();
97
+ instance_1 === null || instance_1 === void 0 ? void 0 : instance_1.destroy();
97
98
  };
98
99
  }
99
100
  return undefined;
@@ -106,10 +107,10 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
106
107
  var _a;
107
108
  // Only update options if this is _not_ the first render
108
109
  if (!firstRender.current) {
109
- (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
110
+ (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
110
111
  }
111
112
  firstRender.current = false;
112
- }, [popperOptions, popperPlacement, placementModifier]);
113
+ }, [popperOptions, popperPlacement, placementModifier, localRef]);
113
114
  var contents = React.createElement(React.Fragment, null, isRenderProp(children) ? children({ placement: placement }) : children);
114
115
  if (!portal) {
115
116
  return contents;
package/dist/commonjs/popup/lib/hooks/useInitialFocus.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useInitialFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useInitialFocus.tsx"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,6IAsB3B,CAAC"}
1
+ {"version":3,"file":"useInitialFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useInitialFocus.tsx"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,6IAwB3B,CAAC"}
package/dist/commonjs/popup/lib/hooks/useInitialFocus.js CHANGED
@@ -22,10 +22,12 @@ exports.useInitialFocus = function (model, elemProps) {
22
22
  react_1.default.useEffect(function () {
23
23
  var _a;
24
24
  if (visible && model.state.stackRef.current) {
25
- var element = ((_a = model.state.initialFocusRef) === null || _a === void 0 ? void 0 : _a.current) ||
25
+ var element_1 = ((_a = model.state.initialFocusRef) === null || _a === void 0 ? void 0 : _a.current) ||
26
26
  common_1.getFirstFocusableElement(model.state.stackRef.current);
27
- common_1.assert(element, 'No focusable element was found. Please ensure popup has at least one focusable element');
28
- common_1.changeFocus(element);
27
+ common_1.assert(element_1, 'No focusable element was found. Please ensure popup has at least one focusable element');
28
+ requestAnimationFrame(function () {
29
+ common_1.changeFocus(element_1);
30
+ });
29
31
  }
30
32
  }, [model.state.initialFocusRef, model.state.stackRef, visible]);
31
33
  return elemProps;
package/dist/es6/popup/lib/Popper.d.ts CHANGED
@@ -65,6 +65,11 @@ export interface PopperProps {
65
65
  * @default true
66
66
  */
67
67
  portal?: boolean;
68
+ /**
69
+ * Reference to the PopperJS instance. Useful for making direct method calls on the popper
70
+ * instance like `update`.
71
+ */
72
+ popperInstanceRef?: React.Ref<PopperJS.Instance>;
68
73
  }
69
74
  export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
70
75
  //# sourceMappingURL=Popper.d.ts.map
package/dist/es6/popup/lib/Popper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAI7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
1
+ {"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
package/dist/es6/popup/lib/Popper.js CHANGED
@@ -31,6 +31,7 @@ import * as React from 'react';
31
31
  import * as ReactDOM from 'react-dom';
32
32
  import * as PopperJS from '@popperjs/core';
33
33
  import { usePopupStack } from './hooks';
34
+ import { useLocalRef } from '@workday/canvas-kit-react/common';
34
35
  export var Popper = React.forwardRef(function (_a, ref) {
35
36
  var _b = _a.portal, portal = _b === void 0 ? true : _b, _c = _a.open, open = _c === void 0 ? true : _c, elemProps = __rest(_a, ["portal", "open"]);
36
37
  if (!open) {
@@ -54,10 +55,10 @@ var defaultPopperOptions = {};
54
55
  // Popper bails early if `open` is false and React hooks cannot be called conditionally,
55
56
  // so we're breaking out the open version into another component.
56
57
  var OpenPopper = React.forwardRef(function (_a, ref) {
57
- var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, containerElement = _a.containerElement;
58
+ var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, containerElement = _a.containerElement, popperInstanceRef = _a.popperInstanceRef;
58
59
  var firstRender = React.useRef(true);
59
- var popperInstance = React.useRef();
60
- var _d = React.useState(popperPlacement), placement = _d[0], setPlacement = _d[1];
60
+ var _d = useLocalRef(popperInstanceRef), localRef = _d.localRef, elementRef = _d.elementRef;
61
+ var _e = React.useState(popperPlacement), placement = _e[0], setPlacement = _e[1];
61
62
  var stackRef = usePopupStack(ref, anchorElement);
62
63
  var placementModifier = React.useMemo(function () {
63
64
  return {
@@ -81,10 +82,10 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
81
82
  return undefined;
82
83
  }
83
84
  if (stackRef.current) {
84
- popperInstance.current = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
85
+ var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
86
+ elementRef(instance_1); // update the ref with the instance
85
87
  return function () {
86
- var _a;
87
- (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.destroy();
88
+ instance_1 === null || instance_1 === void 0 ? void 0 : instance_1.destroy();
88
89
  };
89
90
  }
90
91
  return undefined;
@@ -97,10 +98,10 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
97
98
  var _a;
98
99
  // Only update options if this is _not_ the first render
99
100
  if (!firstRender.current) {
100
- (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
101
+ (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
101
102
  }
102
103
  firstRender.current = false;
103
- }, [popperOptions, popperPlacement, placementModifier]);
104
+ }, [popperOptions, popperPlacement, placementModifier, localRef]);
104
105
  var contents = React.createElement(React.Fragment, null, isRenderProp(children) ? children({ placement: placement }) : children);
105
106
  if (!portal) {
106
107
  return contents;
package/dist/es6/popup/lib/hooks/useInitialFocus.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useInitialFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useInitialFocus.tsx"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,6IAsB3B,CAAC"}
1
+ {"version":3,"file":"useInitialFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useInitialFocus.tsx"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,6IAwB3B,CAAC"}
package/dist/es6/popup/lib/hooks/useInitialFocus.js CHANGED
@@ -17,10 +17,12 @@ export var useInitialFocus = function (model, elemProps) {
17
17
  React.useEffect(function () {
18
18
  var _a;
19
19
  if (visible && model.state.stackRef.current) {
20
- var element = ((_a = model.state.initialFocusRef) === null || _a === void 0 ? void 0 : _a.current) ||
20
+ var element_1 = ((_a = model.state.initialFocusRef) === null || _a === void 0 ? void 0 : _a.current) ||
21
21
  getFirstFocusableElement(model.state.stackRef.current);
22
- assert(element, 'No focusable element was found. Please ensure popup has at least one focusable element');
23
- changeFocus(element);
22
+ assert(element_1, 'No focusable element was found. Please ensure popup has at least one focusable element');
23
+ requestAnimationFrame(function () {
24
+ changeFocus(element_1);
25
+ });
24
26
  }
25
27
  }, [model.state.initialFocusRef, model.state.stackRef, visible]);
26
28
  return elemProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "6.3.0",
3
+ "version": "6.3.4",
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",
@@ -57,9 +57,9 @@
57
57
  "@emotion/styled": "^10.0.27",
58
58
  "@popperjs/core": "^2.5.4",
59
59
  "@workday/canvas-colors-web": "^2.0.0",
60
- "@workday/canvas-kit-labs-react": "^6.3.0",
61
- "@workday/canvas-kit-popup-stack": "^6.3.0",
62
- "@workday/canvas-kit-preview-react": "^6.3.0",
60
+ "@workday/canvas-kit-labs-react": "^6.3.4",
61
+ "@workday/canvas-kit-popup-stack": "^6.3.4",
62
+ "@workday/canvas-kit-preview-react": "^6.3.4",
63
63
  "@workday/canvas-system-icons-web": "1.0.41",
64
64
  "@workday/design-assets-types": "^0.2.4",
65
65
  "chroma-js": "^2.1.0",
@@ -77,5 +77,5 @@
77
77
  "@workday/canvas-accent-icons-web": "^1.0.0",
78
78
  "@workday/canvas-applet-icons-web": "^0.17.50"
79
79
  },
80
- "gitHead": "94d5ae2d79daa43b9c2ef5f8eef572fc89694d5e"
80
+ "gitHead": "43759dac29aaa53f6f794a739bc9913f1aade55b"
81
81
  }
package/popup/lib/Popper.tsx CHANGED
@@ -6,6 +6,7 @@ export type Placement = PopperJS.Placement;
6
6
  export type PopperOptions = PopperJS.Options;
7
7
 
8
8
  import {usePopupStack} from './hooks';
9
+ import {useLocalRef} from '@workday/canvas-kit-react/common';
9
10
 
10
11
  export interface PopperProps {
11
12
  /**
@@ -68,6 +69,11 @@ export interface PopperProps {
68
69
  * @default true
69
70
  */
70
71
  portal?: boolean;
72
+ /**
73
+ * Reference to the PopperJS instance. Useful for making direct method calls on the popper
74
+ * instance like `update`.
75
+ */
76
+ popperInstanceRef?: React.Ref<PopperJS.Instance>;
71
77
  }
72
78
 
73
79
  export const Popper = React.forwardRef<HTMLDivElement, PopperProps>(
@@ -108,11 +114,12 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
108
114
  children,
109
115
  portal,
110
116
  containerElement,
117
+ popperInstanceRef,
111
118
  }: PopperProps,
112
119
  ref
113
120
  ) => {
114
121
  const firstRender = React.useRef(true);
115
- const popperInstance = React.useRef<PopperJS.Instance>();
122
+ const {localRef, elementRef} = useLocalRef(popperInstanceRef);
116
123
  const [placement, setPlacement] = React.useState(popperPlacement);
117
124
  const stackRef = usePopupStack(ref, anchorElement as HTMLElement);
118
125
 
@@ -141,14 +148,15 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
141
148
  }
142
149
 
143
150
  if (stackRef.current) {
144
- popperInstance.current = PopperJS.createPopper(anchorEl, stackRef.current, {
151
+ const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
145
152
  placement: popperPlacement,
146
153
  ...popperOptions,
147
154
  modifiers: [...(popperOptions.modifiers || []), placementModifier],
148
155
  });
156
+ elementRef(instance); // update the ref with the instance
149
157
 
150
158
  return () => {
151
- popperInstance.current?.destroy();
159
+ instance?.destroy();
152
160
  };
153
161
  }
154
162
 
@@ -162,14 +170,14 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
162
170
  React.useLayoutEffect(() => {
163
171
  // Only update options if this is _not_ the first render
164
172
  if (!firstRender.current) {
165
- popperInstance.current?.setOptions({
173
+ localRef.current?.setOptions({
166
174
  placement: popperPlacement,
167
175
  ...popperOptions,
168
176
  modifiers: [...(popperOptions.modifiers || []), placementModifier],
169
177
  });
170
178
  }
171
179
  firstRender.current = false;
172
- }, [popperOptions, popperPlacement, placementModifier]);
180
+ }, [popperOptions, popperPlacement, placementModifier, localRef]);
173
181
 
174
182
  const contents = <>{isRenderProp(children) ? children({placement}) : children}</>;
175
183
 
package/popup/lib/hooks/useInitialFocus.tsx CHANGED
@@ -29,7 +29,9 @@ export const useInitialFocus = (model: PopupModel, elemProps = {}) => {
29
29
  'No focusable element was found. Please ensure popup has at least one focusable element'
30
30
  );
31
31
 
32
- changeFocus(element);
32
+ requestAnimationFrame(() => {
33
+ changeFocus(element);
34
+ });
33
35
  }
34
36
  }, [model.state.initialFocusRef, model.state.stackRef, visible]);
35
37
 
package/ts3.5/dist/commonjs/popup/lib/Popper.d.ts CHANGED
@@ -65,6 +65,11 @@ export interface PopperProps {
65
65
  * @default true
66
66
  */
67
67
  portal?: boolean;
68
+ /**
69
+ * Reference to the PopperJS instance. Useful for making direct method calls on the popper
70
+ * instance like `update`.
71
+ */
72
+ popperInstanceRef?: React.Ref<PopperJS.Instance>;
68
73
  }
69
74
  export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
70
75
  //# sourceMappingURL=Popper.d.ts.map
package/ts3.5/dist/es6/popup/lib/Popper.d.ts CHANGED
@@ -65,6 +65,11 @@ export interface PopperProps {
65
65
  * @default true
66
66
  */
67
67
  portal?: boolean;
68
+ /**
69
+ * Reference to the PopperJS instance. Useful for making direct method calls on the popper
70
+ * instance like `update`.
71
+ */
72
+ popperInstanceRef?: React.Ref<PopperJS.Instance>;
68
73
  }
69
74
  export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
70
75
  //# sourceMappingURL=Popper.d.ts.map