@kaizen/components 0.0.0-canary-rollup-20240408071509 → 0.0.0-canary-rollup--tree-shake-20240408080317

package/dist/cjs/ErrorPage/ErrorPage.cjs

@@ -14,46 +14,86 @@ var Scene = require('../Illustration/Scene/Scene.cjs');
 var Text = require('../Text/Text.cjs');
 var useErrorMessages = require('./hooks/useErrorMessages.cjs');
 var ErrorPage_module = require('./ErrorPage.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-
 var getMailToHref = function (code) {
-    var supportEmail = "support@cultureamp.com";
-    var subject = "Houston we have a problem";
-    var body = "Hi there,\n\nI received a ".concat(code, " error page while I was trying to...");
-    return encodeURI("mailto:".concat(supportEmail, "?subject=").concat(subject, "&body=").concat(body));
+  var supportEmail = "support@cultureamp.com";
+  var subject = "Houston we have a problem";
+  var body = "Hi there,\n\nI received a ".concat(code, " error page while I was trying to...");
+  return encodeURI("mailto:".concat(supportEmail, "?subject=").concat(subject, "&body=").concat(body));
 };
 var HOME_HREF = "/app/home";
 var ErrorPage = function (_a) {
-    var code = _a.code, title = _a.title, message = _a.message, callToAction = _a.callToAction, classNameOverride = _a.classNameOverride;
-    var formatMessage = i18nReactIntl.useIntl().formatMessage;
-    var content = useErrorMessages.useErrorMessages(code);
-    var actions = {
-        primary: { href: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.homeHref) || HOME_HREF },
-        secondary: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.onContactSupport)
-            ? { onClick: callToAction.onContactSupport }
-            : { href: getMailToHref(code) },
-    };
-    return (React__default.default.createElement("div", { className: classnames__default.default(classNameOverride) },
-        React__default.default.createElement(BrandMoment.BrandMoment, { header: React__default.default.createElement(React__default.default.Fragment, null), body: React__default.default.createElement(React__default.default.Fragment, null,
-                React__default.default.createElement("div", { className: ErrorPage_module.paragraphPadding },
-                    React__default.default.createElement(Text.Text, { variant: "intro-lede" }, message || content.message)),
-                React__default.default.createElement(Text.Text, { color: "dark-reduced-opacity", variant: "small" },
-                    React__default.default.createElement(i18nReactIntl.FormattedMessage, { id: "kzErrorPage.errorCode", defaultMessage: "Error code {code}", values: { code: code } }))), illustration: React__default.default.createElement(Scene.BrandMomentError, { isAnimated: true, loop: true }), mood: "negative", primaryAction: tslib.__assign(tslib.__assign({}, actions.primary), { icon: React__default.default.createElement(ArrowRightIcon.ArrowRightIcon, { role: "presentation" }), iconPosition: "end", label: formatMessage({
-                    id: "kzErrorPage.goToHome",
-                    defaultMessage: "Go to Home",
-                    description: "Home button label",
-                }) }), secondaryAction: tslib.__assign(tslib.__assign({}, actions.secondary), { icon: React__default.default.createElement(EmailIcon.EmailIcon, { role: "presentation" }), label: formatMessage({
-                    id: "kzErrorPage",
-                    defaultMessage: "Contact support",
-                    description: "Label for contact button",
-                }) }), text: {
-                title: title || content.title,
-            } })));
+  var code = _a.code,
+    title = _a.title,
+    message = _a.message,
+    callToAction = _a.callToAction,
+    classNameOverride = _a.classNameOverride;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var content = useErrorMessages.useErrorMessages(code);
+  var actions = {
+    primary: {
+      href: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.homeHref) || HOME_HREF
+    },
+    secondary: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.onContactSupport) ? {
+      onClick: callToAction.onContactSupport
+    } : {
+      href: getMailToHref(code)
+    }
+  };
+  return React__default.default.createElement("div", {
+    className: classnames__default.default(classNameOverride)
+  }, React__default.default.createElement(BrandMoment.BrandMoment, {
+    header: React__default.default.createElement(React__default.default.Fragment, null),
+    body: React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
+      className: ErrorPage_module.paragraphPadding
+    }, React__default.default.createElement(Text.Text, {
+      variant: "intro-lede"
+    }, message || content.message)), React__default.default.createElement(Text.Text, {
+      color: "dark-reduced-opacity",
+      variant: "small"
+    }, React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+      id: "kzErrorPage.errorCode",
+      defaultMessage: "Error code {code}",
+      values: {
+        code: code
+      }
+    }))),
+    illustration: React__default.default.createElement(Scene.BrandMomentError, {
+      isAnimated: true,
+      loop: true
+    }),
+    mood: "negative",
+    primaryAction: tslib.__assign(tslib.__assign({}, actions.primary), {
+      icon: React__default.default.createElement(ArrowRightIcon.ArrowRightIcon, {
+        role: "presentation"
+      }),
+      iconPosition: "end",
+      label: formatMessage({
+        id: "kzErrorPage.goToHome",
+        defaultMessage: "Go to Home",
+        description: "Home button label"
+      })
+    }),
+    secondaryAction: tslib.__assign(tslib.__assign({}, actions.secondary), {
+      icon: React__default.default.createElement(EmailIcon.EmailIcon, {
+        role: "presentation"
+      }),
+      label: formatMessage({
+        id: "kzErrorPage",
+        defaultMessage: "Contact support",
+        description: "Label for contact button"
+      })
+    }),
+    text: {
+      title: title || content.title
+    }
+  }));
 };
 ErrorPage.displayName = "ErrorPage";
-
 exports.ErrorPage = ErrorPage;

package/dist/cjs/ErrorPage/ErrorPage.module.scss.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
-var styles = {"paragraphPadding":"ErrorPage-module_paragraphPadding__-L-qy"};
-
+var styles = {
+  "paragraphPadding": "ErrorPage-module_paragraphPadding__-L-qy"
+};
 module.exports = styles;

package/dist/cjs/ErrorPage/hooks/useErrorMessages.cjs

@@ -1,135 +1,133 @@
 'use strict';
 
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
-
 var useErrorMessages = function (code) {
-    var formatMessage = i18nReactIntl.useIntl().formatMessage;
-    var translationsMap = {
-        400: {
-            title: formatMessage({
-                id: "kzErrorPage.400.title",
-                defaultMessage: "Problem loading page",
-                description: "Heading for page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.400.message",
-                defaultMessage: "Problem loading page right now. Try again or head home.",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        401: {
-            title: formatMessage({
-                id: "kzErrorPage.401.title",
-                defaultMessage: "You can't view this page",
-                description: "Main title for page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.401.message",
-                defaultMessage: "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        403: {
-            title: formatMessage({
-                id: "kzErrorPage.403.title",
-                defaultMessage: "You can't view this page",
-                description: "Main title for page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.403.message",
-                defaultMessage: "Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        404: {
-            title: formatMessage({
-                id: "kzErrorPage.404.title",
-                defaultMessage: "Page not found",
-                description: "Main title of page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.404.message",
-                defaultMessage: "Sorry but we can't find the page you're looking for. Go back and try again, or head to Home",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        413: {
-            title: formatMessage({
-                id: "kzErrorPage.413.title",
-                defaultMessage: "Something's gone wrong on our side",
-                description: "Main title of page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.413",
-                defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        422: {
-            title: formatMessage({
-                id: "kzErrorPage.422.title",
-                defaultMessage: "Change couldn't be made",
-                description: "Main title of page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.422.message",
-                defaultMessage: "Sorry but your change couldn't be made. Go back and try again, or head to Home",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        500: {
-            title: formatMessage({
-                id: "kzErrorPage.500.title",
-                defaultMessage: "Something's gone wrong on our side",
-                description: "Main title of page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.500",
-                defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        502: {
-            title: formatMessage({
-                id: "kzErrorPage.502.title",
-                defaultMessage: "You can't view this page",
-                description: "Main title of page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.502.message",
-                defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        503: {
-            title: formatMessage({
-                id: "kzErrorPage.503.title",
-                defaultMessage: "You can't view this page",
-                description: "Main title of page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.503.message",
-                defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
-                description: "Call to action instructions for the user",
-            }),
-        },
-        504: {
-            title: formatMessage({
-                id: "kzErrorPage.504.title",
-                defaultMessage: "You can't view this page",
-                description: "Main title of page",
-            }),
-            message: formatMessage({
-                id: "kzErrorPage.504.message",
-                defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
-                description: "Call to action instructions for the user",
-            }),
-        },
-    };
-    return (translationsMap[code] || {
-        title: "",
-        message: "",
-    });
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var translationsMap = {
+    400: {
+      title: formatMessage({
+        id: "kzErrorPage.400.title",
+        defaultMessage: "Problem loading page",
+        description: "Heading for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.400.message",
+        defaultMessage: "Problem loading page right now. Try again or head home.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    401: {
+      title: formatMessage({
+        id: "kzErrorPage.401.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.401.message",
+        defaultMessage: "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    403: {
+      title: formatMessage({
+        id: "kzErrorPage.403.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.403.message",
+        defaultMessage: "Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    404: {
+      title: formatMessage({
+        id: "kzErrorPage.404.title",
+        defaultMessage: "Page not found",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.404.message",
+        defaultMessage: "Sorry but we can't find the page you're looking for. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    413: {
+      title: formatMessage({
+        id: "kzErrorPage.413.title",
+        defaultMessage: "Something's gone wrong on our side",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.413",
+        defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    422: {
+      title: formatMessage({
+        id: "kzErrorPage.422.title",
+        defaultMessage: "Change couldn't be made",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.422.message",
+        defaultMessage: "Sorry but your change couldn't be made. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    500: {
+      title: formatMessage({
+        id: "kzErrorPage.500.title",
+        defaultMessage: "Something's gone wrong on our side",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.500",
+        defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    502: {
+      title: formatMessage({
+        id: "kzErrorPage.502.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.502.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    503: {
+      title: formatMessage({
+        id: "kzErrorPage.503.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.503.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    504: {
+      title: formatMessage({
+        id: "kzErrorPage.504.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.504.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    }
+  };
+  return translationsMap[code] || {
+    title: "",
+    message: ""
+  };
 };
-
 exports.useErrorMessages = useErrorMessages;

package/dist/cjs/FieldGroup/FieldGroup.cjs

@@ -4,16 +4,22 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var FieldGroup_module = require('./FieldGroup.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-
 var FieldGroup = function (_a) {
-    var children = _a.children, _b = _a.inline, inline = _b === void 0 ? false : _b, classNameOverride = _a.classNameOverride, restProps = tslib.__rest(_a, ["children", "inline", "classNameOverride"]);
-    return (React__default.default.createElement("div", tslib.__assign({ className: classnames__default.default(FieldGroup_module.group, classNameOverride, inline && FieldGroup_module.inline) }, restProps), children));
+  var children = _a.children,
+    _b = _a.inline,
+    inline = _b === void 0 ? false : _b,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "inline", "classNameOverride"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(FieldGroup_module.group, classNameOverride, inline && FieldGroup_module.inline)
+  }, restProps), children);
 };
 FieldGroup.displayName = "FieldGroup";
-
 exports.FieldGroup = FieldGroup;

package/dist/cjs/FieldGroup/FieldGroup.module.scss.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
-var styles = {"group":"FieldGroup-module_group__74Z9M","inline":"FieldGroup-module_inline__K7D9L"};
-
+var styles = {
+  "group": "FieldGroup-module_group__74Z9M",
+  "inline": "FieldGroup-module_inline__K7D9L"
+};
 module.exports = styles;

package/dist/cjs/FieldMessage/FieldMessage.cjs

@@ -8,24 +8,43 @@ var CautionWhiteIcon = require('../Icon/CautionWhiteIcon.cjs');
 var ExclamationWhiteIcon = require('../Icon/ExclamationWhiteIcon.cjs');
 var Text = require('../Text/Text.cjs');
 var FieldMessage_module = require('./FieldMessage.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-
 var FieldMessage = function (_a) {
-    var message = _a.message, _b = _a.status, status = _b === void 0 ? "default" : _b, _c = _a.position, position = _c === void 0 ? "bottom" : _c, _d = _a.reversed, reversed = _d === void 0 ? false : _d, classNameOverride = _a.classNameOverride, restProps = tslib.__rest(_a, ["message", "status", "position", "reversed", "classNameOverride"]);
-    var textColor = status === "default" || status === "success"
-        ? reversed
-            ? "white-reduced-opacity"
-            : "dark-reduced-opacity"
-        : "dark";
-    return (React__default.default.createElement("div", tslib.__assign({ className: classnames__default.default(FieldMessage_module.message, FieldMessage_module[status], classNameOverride, reversed && FieldMessage_module.reversed, position === "bottom" && FieldMessage_module.positionBottom, position === "top" && FieldMessage_module.positionTop) }, restProps),
-        (status === "error" || status === "caution") && (React__default.default.createElement("span", { className: FieldMessage_module.warningIcon }, status === "error" ? (React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, { role: "img", inheritSize: false, "aria-label": "".concat(status, " message") })) : (React__default.default.createElement(CautionWhiteIcon.CautionWhiteIcon, { role: "img", inheritSize: false, "aria-label": "".concat(status, " message") })))),
-        React__default.default.createElement("div", { className: FieldMessage_module.message },
-            React__default.default.createElement(Text.Text, { variant: "small", tag: typeof message === "string" ? "p" : "div", color: textColor }, message))));
+  var message = _a.message,
+    _b = _a.status,
+    status = _b === void 0 ? "default" : _b,
+    _c = _a.position,
+    position = _c === void 0 ? "bottom" : _c,
+    _d = _a.reversed,
+    reversed = _d === void 0 ? false : _d,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["message", "status", "position", "reversed", "classNameOverride"]);
+  var textColor = status === "default" || status === "success" ? reversed ? "white-reduced-opacity" : "dark-reduced-opacity" : "dark";
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(FieldMessage_module.message, FieldMessage_module[status], classNameOverride, reversed && FieldMessage_module.reversed, position === "bottom" && FieldMessage_module.positionBottom, position === "top" && FieldMessage_module.positionTop)
+  }, restProps), (status === "error" || status === "caution") && React__default.default.createElement("span", {
+    className: FieldMessage_module.warningIcon
+  }, status === "error" ? React__default.default.createElement(ExclamationWhiteIcon.ExclamationWhiteIcon, {
+    role: "img",
+    inheritSize: false,
+    "aria-label": "".concat(status, " message")
+  }) : React__default.default.createElement(CautionWhiteIcon.CautionWhiteIcon, {
+    role: "img",
+    inheritSize: false,
+    "aria-label": "".concat(status, " message")
+  })), React__default.default.createElement("div", {
+    className: FieldMessage_module.message
+  }, React__default.default.createElement(Text.Text, {
+    variant: "small",
+    tag: typeof message === "string" ? "p" : "div",
+    color: textColor
+  }, message)));
 };
 FieldMessage.displayName = "FieldMessage";
-
 exports.FieldMessage = FieldMessage;

package/dist/cjs/FieldMessage/FieldMessage.module.scss.cjs

@@ -1,5 +1,13 @@
 'use strict';
 
-var styles = {"message":"FieldMessage-module_message__bKbYp","default":"FieldMessage-module_default__tpp8j","reversed":"FieldMessage-module_reversed__FCi8c","error":"FieldMessage-module_error__OxUCB","caution":"FieldMessage-module_caution__EPqo4","positionBottom":"FieldMessage-module_positionBottom__rLWzS","positionTop":"FieldMessage-module_positionTop__8Hjpb","warningIcon":"FieldMessage-module_warningIcon__0y1jx"};
-
+var styles = {
+  "message": "FieldMessage-module_message__bKbYp",
+  "default": "FieldMessage-module_default__tpp8j",
+  "reversed": "FieldMessage-module_reversed__FCi8c",
+  "error": "FieldMessage-module_error__OxUCB",
+  "caution": "FieldMessage-module_caution__EPqo4",
+  "positionBottom": "FieldMessage-module_positionBottom__rLWzS",
+  "positionTop": "FieldMessage-module_positionTop__8Hjpb",
+  "warningIcon": "FieldMessage-module_warningIcon__0y1jx"
+};
 module.exports = styles;

package/dist/cjs/Filter/Filter/Filter.cjs

@@ -4,40 +4,60 @@ var tslib = require('tslib');
 var React = require('react');
 var reactFocusOn = require('react-focus-on');
 var FilterPopover = require('./subcomponents/FilterPopover/FilterPopover.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
-
 var Filter = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var children = _a.children, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, classNameOverride = _a.classNameOverride, onMount = _a.onMount, restProps = tslib.__rest(_a, ["children", "isOpen", "setIsOpen", "renderTrigger", "classNameOverride", "onMount"]);
-    var triggerId = React.useId();
-    var _g = React.useState(false), isRefLoaded = _g[0], setIsRefLoaded = _g[1];
-    var trigger = renderTrigger({
-        id: triggerId,
-        onClick: function () { return setIsOpen(!isOpen); },
-        isOpen: isOpen,
-    });
-    var inbuiltButtonRef = React.useRef(null);
-    var inbuiltRef = React.useRef({
-        triggerRef: inbuiltButtonRef,
-    });
-    var filterButtonRef = (_b = trigger.ref) !== null && _b !== void 0 ? _b : inbuiltRef;
-    React.useEffect(function () {
-        var _a, _b;
-        if ((_b = (_a = filterButtonRef.current) === null || _a === void 0 ? void 0 : _a.triggerRef) === null || _b === void 0 ? void 0 : _b.current) {
-            setIsRefLoaded(true);
-            onMount === null || onMount === void 0 ? void 0 : onMount(filterButtonRef.current.triggerRef);
-        }
-    }, [(_d = (_c = filterButtonRef.current) === null || _c === void 0 ? void 0 : _c.triggerRef) === null || _d === void 0 ? void 0 : _d.current, onMount]);
-    return (React__default.default.createElement("div", tslib.__assign({ className: classNameOverride }, restProps),
-        React__default.default.cloneElement(trigger, {
-            ref: filterButtonRef,
-        }),
-        isRefLoaded && isOpen && (React__default.default.createElement(reactFocusOn.FocusOn, { scrollLock: false, onClickOutside: function () { return setIsOpen(false); }, onEscapeKey: function () { return setIsOpen(false); } },
-            React__default.default.createElement(FilterPopover.FilterPopover, { referenceElement: ((_f = (_e = filterButtonRef.current) === null || _e === void 0 ? void 0 : _e.triggerRef) === null || _f === void 0 ? void 0 : _f.current) || null, "aria-labelledby": trigger.props.id }, children)))));
+  var _b, _c, _d, _e, _f;
+  var children = _a.children,
+    isOpen = _a.isOpen,
+    setIsOpen = _a.setIsOpen,
+    renderTrigger = _a.renderTrigger,
+    classNameOverride = _a.classNameOverride,
+    onMount = _a.onMount,
+    restProps = tslib.__rest(_a, ["children", "isOpen", "setIsOpen", "renderTrigger", "classNameOverride", "onMount"]);
+  var triggerId = React.useId();
+  var _g = React.useState(false),
+    isRefLoaded = _g[0],
+    setIsRefLoaded = _g[1];
+  var trigger = renderTrigger({
+    id: triggerId,
+    onClick: function () {
+      return setIsOpen(!isOpen);
+    },
+    isOpen: isOpen
+  });
+  var inbuiltButtonRef = React.useRef(null);
+  var inbuiltRef = React.useRef({
+    triggerRef: inbuiltButtonRef
+  });
+  var filterButtonRef = (_b = trigger.ref) !== null && _b !== void 0 ? _b : inbuiltRef;
+  React.useEffect(function () {
+    var _a, _b;
+    if ((_b = (_a = filterButtonRef.current) === null || _a === void 0 ? void 0 : _a.triggerRef) === null || _b === void 0 ? void 0 : _b.current) {
+      setIsRefLoaded(true);
+      onMount === null || onMount === void 0 ? void 0 : onMount(filterButtonRef.current.triggerRef);
+    }
+  }, [(_d = (_c = filterButtonRef.current) === null || _c === void 0 ? void 0 : _c.triggerRef) === null || _d === void 0 ? void 0 : _d.current, onMount]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classNameOverride
+  }, restProps), React__default.default.cloneElement(trigger, {
+    ref: filterButtonRef
+  }), isRefLoaded && isOpen && React__default.default.createElement(reactFocusOn.FocusOn, {
+    scrollLock: false,
+    onClickOutside: function () {
+      return setIsOpen(false);
+    },
+    onEscapeKey: function () {
+      return setIsOpen(false);
+    }
+  }, React__default.default.createElement(FilterPopover.FilterPopover, {
+    referenceElement: ((_f = (_e = filterButtonRef.current) === null || _e === void 0 ? void 0 : _e.triggerRef) === null || _f === void 0 ? void 0 : _f.current) || null,
+    "aria-labelledby": trigger.props.id
+  }, children)));
 };
 Filter.displayName = "Filter";
-
 exports.Filter = Filter;