@workos-inc/widgets 1.4.0 → 1.4.1

package/dist/cjs/lib/user-security.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { SecondaryButton, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"../card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { getComparativeReadableDate } from \"./utils.js\";\n\ninterface UserSecurityProps {\n  settings: AuthenticationSettings;\n}\n\nexport const UserSecurity = ({ settings }: UserSecurityProps) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n\n  return (\n    <CardList.Root\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-security\"\n    >\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\nexport function UserSecurityError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\nexport const UserSecurityLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <SecondaryButton>Change</SecondaryButton>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <SecondaryButton>Change</SecondaryButton>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <SecondaryButton>Set a password</SecondaryButton>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <SecondaryButton>Disable</SecondaryButton>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <SecondaryButton>Set up authenticator app</SecondaryButton>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n"],"mappings":"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","names":["clsx"]}

package/dist/cjs/lib/user-security.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AuthenticationInformationResponseData } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface UserSecurityProps {
+    settings: AuthenticationInformationResponseData;
+}
+declare const UserSecurity: ({ settings }: UserSecurityProps) => react_jsx_runtime.JSX.Element;
+declare function UserSecurityError({ error }: {
+    error: unknown;
+}): react_jsx_runtime.JSX.Element;
+declare const UserSecurityLoading: React.FC;
+
+export { UserSecurity, UserSecurityError, UserSecurityLoading };

package/dist/cjs/lib/user-sessions.cjs

@@ -0,0 +1,178 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var user_sessions_exports = {};
+__export(user_sessions_exports, {
+  UserSessions: () => UserSessions,
+  UserSessionsError: () => UserSessionsError,
+  UserSessionsLoading: () => UserSessionsLoading
+});
+module.exports = __toCommonJS(user_sessions_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_elements = require("./elements.js");
+var import_utils = require("./utils.js");
+var import_logout_dialog = require("./logout-dialog.js");
+var import_logout_all_sessions_dialog = require("./logout-all-sessions-dialog.js");
+var CardList = __toESM(require("../card-list.js"), 1);
+var import_icon_panel = require("./icon-panel.js");
+var import_react = require("react");
+var import_generic_error = require("./generic-error.js");
+var import_react_icons = require("@radix-ui/react-icons");
+const UserSessions = ({
+  sessionsData: sessions,
+  currentSessionId
+}) => {
+  const currentSession = sessions.find(
+    (session) => session.id === currentSessionId
+  );
+  const otherSessions = sessions.filter(
+    (session) => session.id !== currentSessionId
+  );
+  const [openLogoutDialog, setOpenLogoutDialog] = (0, import_react.useState)(false);
+  const [sessionToSignOut, setSessionToSignOut] = (0, import_react.useState)(null);
+  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Flex,
+    {
+      direction: "column",
+      gap: "4",
+      className: (0, import_clsx.default)("woswidgets-widget"),
+      "data-woswidgets-widget-id": "user-sessions",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardList.Root, { children: [
+          currentSession && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserSession, { session: currentSession, isCurrentSession: true }) }),
+          otherSessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            UserSession,
+            {
+              session,
+              onSignOut: () => {
+                setSessionToSignOut(session);
+                setOpenLogoutDialog(true);
+              }
+            }
+          ) }, session.id))
+        ] }),
+        sessions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "between", align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", children: "Sign out of all other devices" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", as: "p", children: "Remove access from all devices except this one" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_elements.SecondaryButton,
+            {
+              onClick: () => {
+                setOpenLogoutAllSessionsDialog(true);
+              },
+              children: "Sign out"
+            }
+          )
+        ] }) }),
+        sessionToSignOut && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_logout_dialog.LogoutDialog,
+          {
+            session: sessionToSignOut,
+            open: openLogoutDialog,
+            onOpenChange: setOpenLogoutDialog
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_logout_all_sessions_dialog.LogoutAllSessionsDialog,
+          {
+            currentSessionId,
+            open: openLogoutAllSessionsDialog,
+            onOpenChange: setOpenLogoutAllSessionsDialog
+          }
+        )
+      ]
+    }
+  );
+};
+const UserSessionsLoading = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "The location" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", as: "p", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "The location" }) })
+    ] })
+  ] }) });
+};
+function UserSessionsError({ error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error }) });
+}
+const UserSession = ({
+  session,
+  isCurrentSession = false,
+  onSignOut
+}) => {
+  const userAgent = (0, import_utils.parseUserAgent)(session.userAgent);
+  const userLocation = (0, import_utils.getUserLocation)(
+    session.currentLocation,
+    session.ipAddress
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: userAgent.isMobile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.MobileIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.LaptopIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: userAgent.pretty }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "1", align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", as: "p", children: userLocation }),
+        isCurrentSession && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Badge, { ml: "2", children: "This device" }),
+        !isCurrentSession && session.lastActivityAt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: "\u2219" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", children: [
+            "Last seen",
+            " ",
+            (0, import_utils.getComparativeReadableDate)(
+              /* @__PURE__ */ new Date(),
+              new Date(session.lastActivityAt)
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    !isCurrentSession && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { ml: "auto", mr: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Button,
+      {
+        variant: "ghost",
+        onClick: () => {
+          onSignOut?.(session);
+        },
+        children: "Sign out"
+      }
+    ) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UserSessions,
+  UserSessionsError,
+  UserSessionsLoading
+});
+//# sourceMappingURL=user-sessions.cjs.map

package/dist/cjs/lib/user-sessions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { Badge, SecondaryButton, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getUserLocation,\n  parseUserAgent,\n} from \"./utils.js\";\nimport { LogoutDialog } from \"./logout-dialog.js\";\nimport { LogoutAllSessionsDialog } from \"./logout-all-sessions-dialog.js\";\nimport { ActiveSession } from \"../api/endpoint.js\";\nimport * as CardList from \"../card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { useState } from \"react\";\nimport { GenericError } from \"./generic-error.js\";\nimport { LaptopIcon, MobileIcon } from \"@radix-ui/react-icons\";\n\ninterface UserSessionsProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nexport const UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n}: UserSessionsProps) => {\n  const currentSession = sessions.find(\n    (session) => session.id === currentSessionId,\n  );\n  const otherSessions = sessions.filter(\n    (session) => session.id !== currentSessionId,\n  );\n  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);\n  const [sessionToSignOut, setSessionToSignOut] =\n    useState<ActiveSession | null>(null);\n  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =\n    useState(false);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-sessions\"\n    >\n      <CardList.Root>\n        {currentSession && (\n          <CardList.Item>\n            <UserSession session={currentSession} isCurrentSession />\n          </CardList.Item>\n        )}\n\n        {otherSessions.map((session) => (\n          <CardList.Item key={session.id}>\n            <UserSession\n              session={session}\n              onSignOut={() => {\n                setSessionToSignOut(session);\n                setOpenLogoutDialog(true);\n              }}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      {sessions.length > 1 && (\n        <Card size=\"2\">\n          <Flex gap=\"2\" justify=\"between\" align=\"center\">\n            <Box>\n              <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n                Sign out of all other devices\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                Remove access from all devices except this one\n              </Text>\n            </Box>\n\n            <SecondaryButton\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              Sign out\n            </SecondaryButton>\n          </Flex>\n        </Card>\n      )}\n\n      {sessionToSignOut && (\n        <LogoutDialog\n          session={sessionToSignOut}\n          open={openLogoutDialog}\n          onOpenChange={setOpenLogoutDialog}\n        />\n      )}\n\n      <LogoutAllSessionsDialog\n        currentSessionId={currentSessionId}\n        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n      />\n    </Flex>\n  );\n};\n\nexport const UserSessionsLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Flex gap=\"4\" align=\"center\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nexport function UserSessionsError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\ninterface UserSessionProps {\n  session: ActiveSession;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: ActiveSession) => void;\n}\n\nconst UserSession = ({\n  session,\n  isCurrentSession = false,\n  onSignOut,\n}: UserSessionProps) => {\n  const userAgent = parseUserAgent(session.userAgent);\n  const userLocation = getUserLocation(\n    session.currentLocation,\n    session.ipAddress,\n  );\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel>\n        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          {userAgent.pretty}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && <Badge ml=\"2\">This device</Badge>}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                Last seen{\" \"}\n                {getComparativeReadableDate(\n                  new Date(),\n                  new Date(session.lastActivityAt),\n                )}\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\" mr=\"2\">\n          <Button\n            variant=\"ghost\"\n            onClick={() => {\n              onSignOut?.(session);\n            }}\n          >\n            Sign out\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n"],"mappings":"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","names":["clsx"]}

package/dist/cjs/lib/user-sessions.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ActiveSession } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface UserSessionsProps {
+    sessionsData: ActiveSession[];
+    currentSessionId: string;
+}
+declare const UserSessions: ({ sessionsData: sessions, currentSessionId, }: UserSessionsProps) => react_jsx_runtime.JSX.Element;
+declare const UserSessionsLoading: React.FC;
+declare function UserSessionsError({ error }: {
+    error: unknown;
+}): react_jsx_runtime.JSX.Element;
+
+export { UserSessions, UserSessionsError, UserSessionsLoading };

package/dist/cjs/lib/users-filter.cjs

@@ -0,0 +1,85 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var users_filter_exports = {};
+__export(users_filter_exports, {
+  UsersFilter: () => UsersFilter
+});
+module.exports = __toCommonJS(users_filter_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var React = __toESM(require("react"), 1);
+var import_elements = require("./elements.js");
+var import_users_management_context = require("./users-management-context.js");
+const ALL_ROLES_NAME = "All";
+const ALL_ROLES_VALUE = "null";
+const UsersFilter = ({
+  roles,
+  disabled
+}) => {
+  const {
+    dispatch,
+    state: { role }
+  } = (0, import_users_management_context.useUsersManagementContext)();
+  const setFilterParams = (value) => {
+    dispatch({ type: "FILTER_BY_ROLE", role: value });
+  };
+  const isValidRole = (value) => roles ? roles.findIndex((role2) => role2.slug === value) !== -1 : false;
+  const filteredRole = isValidRole(role) ? role : ALL_ROLES_VALUE;
+  const roleName = roles?.find((role2) => role2.slug === filteredRole)?.name || ALL_ROLES_NAME;
+  const onValueChange = (value) => {
+    if (value === ALL_ROLES_VALUE) {
+      setFilterParams(null);
+    } else {
+      if (isValidRole(value)) {
+        setFilterParams(value);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Select.Root,
+    {
+      value: roles ? filteredRole : "null",
+      onValueChange,
+      disabled,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectTrigger, { children: roles ? roleName : ALL_ROLES_NAME }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.SelectContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { value: ALL_ROLES_VALUE, children: ALL_ROLES_NAME }),
+          roles?.map((role2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { value: role2.slug, children: role2.name }) }, role2.slug))
+        ] })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UsersFilter
+});
+//# sourceMappingURL=users-filter.cjs.map

package/dist/cjs/lib/users-filter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/users-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { SelectContent, SelectItem, SelectTrigger } from \"./elements.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { MemberRole } from \"../api/endpoint.js\";\n\nconst ALL_ROLES_NAME = \"All\";\nconst ALL_ROLES_VALUE = \"null\";\n\ntype UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {\n  roles: MemberRole[] | undefined;\n  disabled?: boolean;\n};\n\nexport const UsersFilter: React.FC<UsersFilterProps> = ({\n  roles,\n  disabled,\n}) => {\n  const {\n    dispatch,\n    state: { role },\n  } = useUsersManagementContext();\n\n  const setFilterParams = (value: string | null) => {\n    dispatch({ type: \"FILTER_BY_ROLE\", role: value });\n  };\n  const isValidRole = (value: unknown): value is string =>\n    roles ? roles.findIndex((role) => role.slug === value) !== -1 : false;\n  const filteredRole = isValidRole(role) ? role : ALL_ROLES_VALUE;\n  const roleName =\n    roles?.find((role) => role.slug === filteredRole)?.name || ALL_ROLES_NAME;\n\n  const onValueChange = (value: string) => {\n    if (value === ALL_ROLES_VALUE) {\n      setFilterParams(null);\n    } else {\n      if (isValidRole(value)) {\n        setFilterParams(value);\n      }\n    }\n  };\n\n  return (\n    <Select.Root\n      value={roles ? filteredRole : \"null\"}\n      onValueChange={onValueChange}\n      disabled={disabled}\n    >\n      <SelectTrigger>{roles ? roleName : ALL_ROLES_NAME}</SelectTrigger>\n      <SelectContent>\n        <SelectItem value={ALL_ROLES_VALUE}>{ALL_ROLES_NAME}</SelectItem>\n        {roles?.map((role) => (\n          <React.Fragment key={role.slug}>\n            <SelectItem value={role.slug}>{role.name}</SelectItem>\n          </React.Fragment>\n        ))}\n      </SelectContent>\n    </Select.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDM;AAhDN,oBAAuB;AACvB,YAAuB;AACvB,sBAAyD;AACzD,sCAA0C;AAG1C,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAOjB,MAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,2DAA0B;AAE9B,QAAM,kBAAkB,CAAC,UAAyB;AAChD,aAAS,EAAE,MAAM,kBAAkB,MAAM,MAAM,CAAC;AAAA,EAClD;AACA,QAAM,cAAc,CAAC,UACnB,QAAQ,MAAM,UAAU,CAACA,UAASA,MAAK,SAAS,KAAK,MAAM,KAAK;AAClE,QAAM,eAAe,YAAY,IAAI,IAAI,OAAO;AAChD,QAAM,WACJ,OAAO,KAAK,CAACA,UAASA,MAAK,SAAS,YAAY,GAAG,QAAQ;AAE7D,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU,iBAAiB;AAC7B,sBAAgB,IAAI;AAAA,IACtB,OAAO;AACL,UAAI,YAAY,KAAK,GAAG;AACtB,wBAAgB,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACC,OAAO,QAAQ,eAAe;AAAA,MAC9B;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,iCAAe,kBAAQ,WAAW,gBAAe;AAAA,QAClD,6CAAC,iCACC;AAAA,sDAAC,8BAAW,OAAO,iBAAkB,0BAAe;AAAA,UACnD,OAAO,IAAI,CAACA,UACX,4CAAC,MAAM,UAAN,EACC,sDAAC,8BAAW,OAAOA,MAAK,MAAO,UAAAA,MAAK,MAAK,KADtBA,MAAK,IAE1B,CACD;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["role"]}

package/dist/cjs/lib/users-filter.d.cts

@@ -0,0 +1,13 @@
+import { Select } from '@radix-ui/themes';
+import * as React from 'react';
+import { MemberRole } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+type UsersFilterProps = React.ComponentPropsWithoutRef<typeof Select.Root> & {
+    roles: MemberRole[] | undefined;
+    disabled?: boolean;
+};
+declare const UsersFilter: React.FC<UsersFilterProps>;
+
+export { UsersFilter };

package/dist/cjs/lib/users-management-context.cjs

@@ -0,0 +1,81 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var users_management_context_exports = {};
+__export(users_management_context_exports, {
+  UsersManagementContextProvider: () => UsersManagementContextProvider,
+  useUsersManagementContext: () => useUsersManagementContext
+});
+module.exports = __toCommonJS(users_management_context_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_users_management_state = require("./users-management-state.js");
+const UsersManagementContext = React.createContext(void 0);
+UsersManagementContext.displayName = "UsersManagementContext";
+const initialState = {
+  pagination: null,
+  role: null,
+  searchQuery: null
+};
+const UsersManagementContextProvider = ({ children }) => {
+  const [state, dispatch] = (0, import_users_management_state.useUsersManagementState)(initialState);
+  const context = React.useMemo(
+    () => ({
+      state,
+      dispatch
+    }),
+    [state, dispatch]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsersManagementContext.Provider, { value: context, children });
+};
+const NOOP = () => void 0;
+const EMPTY_PAGINATION = {};
+function useUsersManagementContext(initialContext) {
+  const context = React.useContext(UsersManagementContext);
+  if (context) {
+    return context;
+  }
+  if (initialContext) {
+    return initialContext;
+  }
+  return {
+    dispatch: NOOP,
+    state: {
+      pagination: EMPTY_PAGINATION,
+      role: null,
+      searchQuery: null
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UsersManagementContextProvider,
+  useUsersManagementContext
+});
+//# sourceMappingURL=users-management-context.cjs.map

package/dist/cjs/lib/users-management-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/users-management-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  UsersManagementAction,\n  UsersManagementState,\n  useUsersManagementState,\n} from \"./users-management-state.js\";\nimport { ListMetadata } from \"../api/endpoint.js\";\n\nexport interface UsersManagementContextType {\n  state: UsersManagementState;\n  dispatch: React.Dispatch<UsersManagementAction>;\n}\n\nconst UsersManagementContext = React.createContext<\n  UsersManagementContextType | undefined\n>(undefined);\nUsersManagementContext.displayName = \"UsersManagementContext\";\n\nconst initialState: UsersManagementState = {\n  pagination: null,\n  role: null,\n  searchQuery: null,\n};\n\nexport const UsersManagementContextProvider: React.FC<{\n  children?: React.ReactNode;\n}> = ({ children }) => {\n  const [state, dispatch] = useUsersManagementState(initialState);\n\n  const context = React.useMemo<UsersManagementContextType>(\n    () => ({\n      state,\n      dispatch,\n    }),\n    [state, dispatch],\n  );\n\n  return (\n    <UsersManagementContext.Provider value={context}>\n      {children}\n    </UsersManagementContext.Provider>\n  );\n};\n\nconst NOOP = () => void 0;\nconst EMPTY_PAGINATION: ListMetadata = {};\n\n/**\n * The context may be provided if it is instantiated in the tree above the user.\n */\nexport function useUsersManagementContext(\n  initialContext?: UsersManagementContextType | null,\n): UsersManagementContextType {\n  const context = React.useContext(UsersManagementContext);\n\n  if (context) {\n    return context;\n  }\n\n  if (initialContext) {\n    return initialContext;\n  }\n\n  return {\n    dispatch: NOOP,\n    state: {\n      pagination: EMPTY_PAGINATION,\n      role: null,\n      searchQuery: null,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCI;AAtCJ,YAAuB;AACvB,oCAIO;AAQP,MAAM,yBAAyB,MAAM,cAEnC,MAAS;AACX,uBAAuB,cAAc;AAErC,MAAM,eAAqC;AAAA,EACzC,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AACf;AAEO,MAAM,iCAER,CAAC,EAAE,SAAS,MAAM;AACrB,QAAM,CAAC,OAAO,QAAQ,QAAI,uDAAwB,YAAY;AAE9D,QAAM,UAAU,MAAM;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,SACE,4CAAC,uBAAuB,UAAvB,EAAgC,OAAO,SACrC,UACH;AAEJ;AAEA,MAAM,OAAO,MAAM;AACnB,MAAM,mBAAiC,CAAC;AAKjC,SAAS,0BACd,gBAC4B;AAC5B,QAAM,UAAU,MAAM,WAAW,sBAAsB;AAEvD,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB;AAClB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF;","names":[]}

package/dist/cjs/lib/users-management-context.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { UsersManagementState, UsersManagementAction } from './users-management-state.cjs';
+import '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface UsersManagementContextType {
+    state: UsersManagementState;
+    dispatch: React.Dispatch<UsersManagementAction>;
+}
+declare const UsersManagementContextProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+/**
+ * The context may be provided if it is instantiated in the tree above the user.
+ */
+declare function useUsersManagementContext(initialContext?: UsersManagementContextType | null): UsersManagementContextType;
+
+export { UsersManagementContextProvider, type UsersManagementContextType, useUsersManagementContext };

package/dist/cjs/lib/users-management-state.cjs

@@ -0,0 +1,154 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var users_management_state_exports = {};
+__export(users_management_state_exports, {
+  useUsersManagementState: () => useUsersManagementState
+});
+module.exports = __toCommonJS(users_management_state_exports);
+var React = __toESM(require("react"), 1);
+var import_utils = require("./utils.js");
+function useUsersManagementState(initialState) {
+  const [[state, effects], dispatch] = React.useReducer(reducer, [
+    initialState,
+    []
+  ]);
+  React.useEffect(() => {
+    if (window !== window.top) {
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    dispatch({ type: "INIT", params });
+  }, []);
+  React.useEffect(() => {
+    for (const effect of effects) {
+      effect();
+    }
+  }, [effects]);
+  return [state, dispatch];
+}
+function reducer(current, action) {
+  const effects = [];
+  const exec = (fn) => {
+    const effect = () => {
+      if (!effect.disposed) {
+        effect.disposed = true;
+        fn();
+      }
+    };
+    effect.disposed = false;
+    effects.push(effect);
+  };
+  const [currentState] = current;
+  switch (action.type) {
+    case "INIT": {
+      const { params } = action;
+      let role, searchQuery;
+      if (role = params.get("ak_role")) {
+        return [{ ...currentState, searchQuery: null, role }, effects];
+      }
+      if (searchQuery = params.get("ak_q")) {
+        return [{ ...currentState, searchQuery, role: null }, effects];
+      }
+      return current;
+    }
+    case "SET_PAGINATION": {
+      const { pagination } = action;
+      if (pagination.after && pagination.after === currentState.pagination?.after || pagination.before && pagination.before === currentState.pagination?.before) {
+        return current;
+      }
+      return [{ ...currentState, pagination }, effects];
+    }
+    case "FILTER_BY_ROLE": {
+      if (action.role === currentState.role) {
+        return current;
+      }
+      const { role } = action;
+      exec(
+        () => updateQueryParams(
+          { ak_role: role, ak_q: null },
+          { replaceState: true }
+        )
+      );
+      return [
+        { ...currentState, pagination: null, role, searchQuery: null },
+        effects
+      ];
+    }
+    case "FILTER_BY_SEARCH": {
+      if (action.searchQuery === currentState.searchQuery) {
+        return current;
+      }
+      const { searchQuery } = action;
+      exec(
+        () => updateQueryParams(
+          { ak_role: null, ak_q: searchQuery },
+          { replaceState: true }
+        )
+      );
+      return [
+        { ...currentState, pagination: null, role: null, searchQuery },
+        effects
+      ];
+      break;
+    }
+    default:
+      return current;
+  }
+}
+function updateQueryParams(newParams, args = {}) {
+  if (!import_utils.canUseDOM) {
+    throw new Error("Cannot update query params on the server");
+  }
+  if (window !== window.top) {
+    return;
+  }
+  const initialSearch = window.location.search;
+  const params = new URLSearchParams(initialSearch);
+  Object.entries(newParams).forEach(([key, value]) => {
+    if (value != null && value !== "") {
+      params.set(key, String(value));
+    } else {
+      params.delete(key);
+    }
+  });
+  if (initialSearch === `?${params.toString()}`) {
+    return;
+  }
+  const newUrl = params.toString() ? `${window.location.pathname}?${params}` : window.location.pathname;
+  if (args.replaceState) {
+    window.history.replaceState({}, "", newUrl);
+  } else {
+    window.history.pushState({}, "", newUrl);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useUsersManagementState
+});
+//# sourceMappingURL=users-management-state.cjs.map

package/dist/cjs/lib/users-management-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/users-management-state.ts"],"sourcesContent":["import * as React from \"react\";\nimport { canUseDOM } from \"./utils.js\";\nimport { ListMetadata } from \"../api/endpoint.js\";\n\nexport function useUsersManagementState(initialState: UsersManagementState) {\n  const [[state, effects], dispatch] = React.useReducer(reducer, [\n    initialState,\n    [],\n  ]);\n\n  React.useEffect(() => {\n    if (window !== window.top) {\n      // do not use query params if widget is rendered in an iframe\n      return;\n    }\n    const params = new URLSearchParams(window.location.search);\n    dispatch({ type: \"INIT\", params });\n  }, []);\n\n  React.useEffect(() => {\n    for (const effect of effects) {\n      effect();\n    }\n  }, [effects]);\n\n  return [state, dispatch] as const;\n}\n\nfunction reducer(\n  current: StateWithEffects<UsersManagementState>,\n  action: UsersManagementAction,\n): StateWithEffects<UsersManagementState> {\n  const effects: EffectFn[] = [];\n  const exec = (fn: () => void) => {\n    const effect = () => {\n      if (!effect.disposed) {\n        effect.disposed = true;\n        fn();\n      }\n    };\n    effect.disposed = false;\n    effects.push(effect);\n  };\n\n  const [currentState] = current;\n  switch (action.type) {\n    case \"INIT\": {\n      const { params } = action;\n      let role, searchQuery;\n      if ((role = params.get(\"ak_role\"))) {\n        return [{ ...currentState, searchQuery: null, role }, effects];\n      }\n      if ((searchQuery = params.get(\"ak_q\"))) {\n        return [{ ...currentState, searchQuery, role: null }, effects];\n      }\n      return current;\n    }\n    case \"SET_PAGINATION\": {\n      const { pagination } = action;\n      if (\n        (pagination.after &&\n          pagination.after === currentState.pagination?.after) ||\n        (pagination.before &&\n          pagination.before === currentState.pagination?.before)\n      ) {\n        return current;\n      }\n\n      return [{ ...currentState, pagination }, effects];\n    }\n    case \"FILTER_BY_ROLE\": {\n      if (action.role === currentState.role) {\n        return current;\n      }\n      const { role } = action;\n      exec(() =>\n        updateQueryParams(\n          { ak_role: role, ak_q: null },\n          { replaceState: true },\n        ),\n      );\n      return [\n        { ...currentState, pagination: null, role, searchQuery: null },\n        effects,\n      ];\n    }\n    case \"FILTER_BY_SEARCH\": {\n      if (action.searchQuery === currentState.searchQuery) {\n        return current;\n      }\n      const { searchQuery } = action;\n      exec(() =>\n        updateQueryParams(\n          { ak_role: null, ak_q: searchQuery },\n          { replaceState: true },\n        ),\n      );\n      return [\n        { ...currentState, pagination: null, role: null, searchQuery },\n        effects,\n      ];\n      //\n      break;\n    }\n    default:\n      return current;\n  }\n}\n\nexport interface UsersManagementState {\n  searchQuery: string | null;\n  role: string | null;\n  pagination: ListMetadata | null;\n}\n\nexport type UsersManagementAction =\n  | { type: \"INIT\"; params: URLSearchParams }\n  | { type: \"FILTER_BY_SEARCH\"; searchQuery: string | null }\n  | { type: \"FILTER_BY_ROLE\"; role: string | null }\n  | { type: \"SET_PAGINATION\"; pagination: ListMetadata };\n\ntype EffectFn = {\n  (): void;\n  disposed: boolean;\n};\n\ntype StateWithEffects<State> = [State, EffectFn[]];\n\nfunction updateQueryParams(\n  newParams: { [key: string]: { toString(): string } | null },\n  args: { replaceState?: boolean } = {},\n) {\n  if (!canUseDOM) {\n    throw new Error(\"Cannot update query params on the server\");\n  }\n\n  if (window !== window.top) {\n    // do not update query params if widget is rendered in an iframe\n    return;\n  }\n\n  const initialSearch = window.location.search;\n  const params = new URLSearchParams(initialSearch);\n  Object.entries(newParams).forEach(([key, value]) => {\n    if (value != null && value !== \"\") {\n      params.set(key, String(value));\n    } else {\n      params.delete(key);\n    }\n  });\n\n  if (initialSearch === `?${params.toString()}`) {\n    return;\n  }\n\n  const newUrl = params.toString()\n    ? `${window.location.pathname}?${params}`\n    : window.location.pathname;\n\n  if (args.replaceState) {\n    window.history.replaceState({}, \"\", newUrl);\n  } else {\n    window.history.pushState({}, \"\", newUrl);\n  }\n}\n"],"mappings":"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","names":[]}