@deque/cauldron-react 4.2.1-canary.cea36594 → 4.2.1-canary.d1539456

package/lib/index.js

@@ -1423,8 +1423,9 @@ var SkipLink = /** @class */ (function (_super) {
         return (React__default.createElement("nav", tslib.__assign({ className: classNames('SkipLink', currentClass) }, other),
             React__default.createElement("a", { href: target, className: "SkipLink__link", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur },
                 React__default.createElement("span", { className: "SkipLink__item--first" }, skipText),
-                "\u00A0",
-                React__default.createElement("span", { className: "SkipLink__item--second" }, targetText))));
+                React__default.createElement("span", { className: "SkipLink__item--second" },
+                    React__default.createElement(Icon, { type: "triangle-right" }),
+                    targetText))));
     };
     SkipLink.prototype.onClick = function () {
         if (!isBrowser()) {
@@ -7999,9 +8000,31 @@ function AxeLoader() {
         React__default.createElement("path", { fill: "currentColor", d: "M379 549.9h-27.6v-16.7c-7.4 13.5-22.8 20.2-39 20.2-37.1 0-58.9-28.9-58.9-61.6 0-36.5 26.4-61.4 58.9-61.4 21.1 0 34 11.2 39 20.5V434H379v115.9zm-97.8-57.4c0 14.3 10.3 35.2 35.2 35.2 15.4 0 25.5-8 30.8-18.6 2.7-5.1 4-10.5 4.4-16.2.2-5.5-.8-11.2-3.2-16.2-4.9-11-15.6-20.5-32.3-20.5-22.4 0-35 18.1-35 36.1v.2zM436.2 488.9l-39-54.8h33.3l22.6 35.6 22.6-35.6h32.9l-38.8 54.8 43.2 61h-34L453.1 510l-26.2 39.9h-33.5l42.8-61z" })));
 }
 
-var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
+/**
+ * When a component needs to track an internal ref on a component that has a
+ * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
+ * correctly invoke the parent ref as well providing an internal ref.
+ *
+ * @example
+ * React.forwardRef(function Component({ children }, ref) {
+ *   const internalRef = useSharedRef<HTMLElement>(ref)
+ *   if (internalRef.current) {
+ *     // do something with the internal ref...
+ *   }
+ *   return (<div ref={internalRef}>...</div>)
+ * })
+ */
+function useSharedRef(ref) {
+    var internalRef = React.useRef();
+    React.useEffect(function () {
+        setRef(ref, internalRef.current);
+    }, [ref]);
+    return internalRef;
+}
+
+var LoaderOverlay = React.forwardRef(function (_a, ref) {
     var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender"]);
-    var overlayRef = typeof ref === 'function' || !ref ? React.createRef() : ref;
+    var overlayRef = useSharedRef(ref);
     React.useEffect(function () {
         if (!!focusOnInitialRender && overlayRef.current) {
             setTimeout(function () {
@@ -8011,11 +8034,6 @@ var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
         }
         return;
     }, [overlayRef.current]);
-    React.useEffect(function () {
-        if (typeof ref === 'function') {
-            ref(overlayRef.current);
-        }
-    }, [ref]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
             ? 'Loader__overlay--large'
             : variant === 'small'

package/lib/utils/useSharedRef.d.ts

@@ -0,0 +1,16 @@
+import { MutableRefObject, Ref } from 'react';
+/**
+ * When a component needs to track an internal ref on a component that has a
+ * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
+ * correctly invoke the parent ref as well providing an internal ref.
+ *
+ * @example
+ * React.forwardRef(function Component({ children }, ref) {
+ *   const internalRef = useSharedRef<HTMLElement>(ref)
+ *   if (internalRef.current) {
+ *     // do something with the internal ref...
+ *   }
+ *   return (<div ref={internalRef}>...</div>)
+ * })
+ */
+export default function useSharedRef<T>(ref: Ref<T>): MutableRefObject<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.2.1-canary.cea36594",
+  "version": "4.2.1-canary.d1539456",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"